badlydrawnrob / anki Goto Github PK

View Code? Open in Web Editor NEW

690.0 690.0 62.0 9.98 MB

Learn to code with Anki — flashcards and themes for all learning levels. Master your programming language of choice!

License: MIT License

Less 21.04% Mustache 7.23% CSS 36.38% HTML 35.34%

anki's People

Contributors

Stargazers

Watchers

Forkers

kfpandayang asavage111 adeluccar metasean ohhhhenry fenildf rockinrone bikenik rrkandala tinsir jiexishede johnking cdpath fydexx alkalami pgh79 phantomk ebustos eloyrd blkknight007 fragon-size ecodiv shrikrishnadubey fitz93 ajpeng yonkyunior xuze1993 ziw-io uamhforever adrianmorales80 newwangshaofeng winston-y colin-code-au wdenyse iamk saintserge rfdaje mkurmag tyler-lemke peter-moran mustafa2146 dglockner patrickalot odagora krystioz dinamika askding anarchy1923 www4lker danerosa callmemarcleo aboba27 n0n3br ngcdan sw3rve parqa

anki's Issues

Explore font stacks

TL;DR

Currently using Verdana and DejaVu fonts. I might find more elegant fonts later. Would like to use a variable fonts? when better browser support. Here's the current way to declare multiple fonts properly.

Views correctly in Safari, Chrome

Requires override on <body> for Anki apps.

Fonts are a bit of an arse to do cross-browser, cross-device, so if you want complete control and consistency use @font-face and save your .ttf font files to Anki's collection.media folder. Loading speed on iOS/Android may be an issue, so probably two custom fonts max.

You'll find variables/typography.less, partials/headings.less and themes/cards/... css files are the places to go to make your edits.

Good monospaced fonts

Variable fonts?
5 monospaced fonts with ligatures — FIRA looks nice.
Menlo is also another good option for a monospace font.
Intel One Mono

Have already checked over these ...

Beware that @font-face should not be nested inside a selector or class.

Font calculations: Verdana is now our base font, but it's a bit too big by default. The global font-size: 1rem; is inherited by, for example, headers so making the font smaller globally will fuck up everything else. For now I'm targeting just the card notes.¹

Using default `--system` font stacks

Monospace (ui-monospace) fails on Anki (but works in Safari). Manually writing 'San Francisco Mono' or 'SF Mono' is unpredictable in Safari and Anki. System font with system-ui seems to work on both.³

Left: system-ui (SF Mono on MacOS); Right: DejaVu Sans Mono

It's a subtle difference (I actually prefer SF Mono), but a good starting point for custom themes. You can see the L has a straight foot in SF Mono, but curve in DejaVu.

I feel the Print First CSS system-ui font stack is pretty good, but allowing custom fonts is a nice-to-have (and could help with code readability). However, after playing around with system-ui I'm now confused about the best route!²

Child themes — inheriting from print-first-css (basic font stack)
Fonts in Anki must be local files.

Verdana looks a bit shit at default `--font-size`

🤔 Anki custom font quirks

See the steps in the Anki documentation to add a custom font. The docs say to name your font myfont but on desktop I've named it the real font name and seems to work. Add the font to the collection.media folder.

Naming the font properly

On Anki desktop, using the proper font-family: 'Font Family Name'; seems to work. However, here only the second image will work — use the font name only ('DejaVu Sans') and use font-weight and font-style to specify the type of font (bold, italic, whatever).

⏳Card loading speed

~~You can use a hosted <link ...> tag~~ — Anki doesn't expose the <header>, so use src: url(...) to load custom fonts from your collection.media folder.

There seems to be a potential issue with page load speed when using a custom font on Anki. I also can't find any useful information on using a URL for an @font-face with Anki.

This is where things get tricky as both font-size and line-height is dependent on the font type, so if it's a bigger font by default, that's potentially going to fuck up all our hard work with the baseline. Also, it's a bit uncertain where to put those font-size changes and there's some who say that you should use global utility classes to do so (like Tailwind). ↩
I'm like 70% sure. It might just fallback to sans-serif. See below. ↩ ↩²
Annoying quirks with Anki and Safari: 'San Francisco Pro', or 'SF Pro' aren't available on the Font Book app but they are available as a system default. In Safari, system-ui seems to pick 'SF Pro' as it's default, as does ui-monospace with 'SF Pro Mono' — ui-monospace has poor support with Anki and browsers! Manually typing in the font-family (using the name of the San Francisco font) doesn't seem to work on Safari anymore, nor with Anki (I think my previous font stack was falling back to sans-serif. monospace weirdness: selects 'Courier' on Safari and 'Menlo' on Anki 🤦‍♂️🤬 ... I "think". ↩

Highlight.js overriding old (styled) code blocks

I'm assuming this will happen to old code blocks, could always be more specific when calling the function to target <code class="highlight"> i.e:

var blocks = document.querySelectorAll('pre.highlight code:not(.hljs)');
Array.prototype.forEach.call(blocks, highlightBlock);

Add an example for hide/show fields

A visual example so this is easier to understand, can be migrated into the docs eventually.

Run compile command with local install

Using npx

Make json easier

❗ Unescaping HTML triple tags {{{...}}} breaks in Anki desktop

Useful for demo cards, but little benefit for Anki desktop. Also takes a little time to wrap your head around how to escape json properly and how it's compiled for the advanced documentation.

Unescape HTML with {{{ ... }}} (would it conflict with Anki?)
~~Automate escaping HTML in JSON~~
~~Sanitize HTML?~~

Minor css changes

Add useful CSS to this gist

Skylighting (fenced code blocks)

General

Pandoc seems to work with cloze tags

Surprisingly (for now, at least) ... this works!

[0, 20] # {{c1::>= 0, <= 20}}

(0, 20] # {{c1::> 0, <= 20}}

(0, 20) # {{c1::0, < 20}}

[0, 20) # {{c1::0, < 20}}

So can be safely stored as-is in the Markdown field. However, as we're not using the front/back templates now (#56) it's probably best to have a "real" preview of how the card will look used in the Anki app ...

Add my thoughts on "the cult of new"

Everyone in the streets and the windows said, "Oh, how fine are the Emperor's new clothes! Don't they fit him to perfection? And see his long train!" Nobody would confess that he couldn't see anything, for that would prove him either unfit for his position, or a fool. Hans Christian Andersen : The Emperor’s New Clothes (1837)
‌

When is a thing finished?
What gives a thing value?

A ramble or a rant. Good software shouldn't need updating, unless something breaks. I've left this tool alone for 4 years¹ and besides a couple of small niggles, fundamentally the Anki Themes still work.² Now, just how much people actually care their cards still work is up for debate.

Pandoc is stable, Markdown is stable, CSS is ... (horrid to write, but stable); you get the idea. I've not used my own tool in about 3 years, but it's nice to know I can come back anytime and "it just works". Now, I might worry that ultimately my Body of Work™ is dead and buried after a few years, but that's another story.³

Notes on a theme:

Any good quotes on this theme?
Only upgrade when it makes sense to!
Avoid bloat and Reduce, Reduce, reduce!
Some excellent talks from Evan Czaplicki or Rich Hickey
Computer Science is hard. Keep it simple. Can you return 5 years later and understand it?

Javascript as a case in point

During my freelance days, I avoided Javascript on the whole, besides some jQuery plugins and simple code. It always felt to me as if young guys were flying ahead of me, always on the bleeding edge with a revolving door of projects, plugins, and frameworks. Yikes.

Also interesting:

"Data is fundamental to what we do ... anytime you make changes the most vocal ones are those who dislike what you've done. We don't just throw numbers in a spreadsheet" — Measuring design (or, you're not Google)

The internet is rotting (the impermanence of things)
I can't stop winning Idle Words and Pinboard creator post.

⌚The same amount of time since Elm lang was updated, which has become a big bone of contention for the community, and many have moved on to other languages. I admire the creator's philosophy (such as this talk on economics) but also understand the frontend guys are often chasing the Next Best Thing™, while old timers often prefer stable (aka boring) and community-led projects. Or at least, something that has ongoing development. ↩
💭 Following that thought, it might upset a few people that development isn't ongoing, issues are unresolved, you never call anymore, so on; but in the grand scheme of things, how essential is it really that that feature is built? That a small error goes unfixed? If the software is free, you really have very little to complain about — do it yourself or wait. That's about it. Burnout is a real thing and working for free is only fun if it's a pet-project or some very tangible philanthropic purpose. ↩
🌎 Avoiding trends and making your world move slowly. Remember all the projects you've worked on that are now dead and buried. Micro-deadlines, time-boxing tasks, avoiding timesinks and unnecessary fluff. It's too easy for a simple task, or an addition to documentation/issues to spill over into a timesink. Stop that. Trim the fat, do less, avoid distractions (or tangential thoughts/link-hopping), 80/20 rule, etc, etc. ↩

How to add the the word in a cloze deletion to the back of card?

Thanks for reading this.

Let's say I have a sentence:

Die Dame, welche (die) die Brosche gekauft {{c1::hat::habe}}, ist sehr reich.

And I want to add the c1 word "hat" to the back of the card automatically. So something like:

Front of card:
Die Dame, welche (die) die Brosche gekauft [habe], ist sehr reich.

Back of card:

hat
Die Dame, welche (die) die Brosche gekauft hat, ist sehr reich.

Is this possible?

Thanks so much!

Tidy up syntax highlighting

Using Pandoc and skylighting

AnkiDroid nightmode CSS

The cards do not display that well when using nightmode in AnkiDroid. The Syntax field for example displays as dark grey on black background and the key point notes display as white on an off-white background. I only know the basics of CSS so was unsure what sections I would want to edit in order to have the cards display better when using nightmode.

Replace Highlight.js with Pygments

As a couple of posters have mentioned, using Highlight.js is problematic for the following reasons:

Javascript must be inline, src= isn't supported (an addon is available to allow this, but it'll only work for desktop)
iOS is really laggy at times, with [random crashes] and it also crashes AnkiDroid
It really increases overall deck size and performance, as you can see in the below screenshot comparison (no media or scheduling have been included in the export):

I'm a novice with javascript (and have no intention of learning), so I can't continue supporting Highlight.js unless a) Anki supports src= attributes, or b) someone wiser than me creates a working, lightweight, reliable script to integrate Highlight.js

So, until Anki fully supports src= on all devices, I think using something like pygments is a far more practical solution, as there's backwards compatibility (albeit maintaining css for the code it outputs) and it can be safely swapped out for a js version if Anki eventually allows imports.

Pygments can be used via the command line, or using an addon like Power format pack ... it outputs like this:

<div class="hlcode">
    <div class="syntax">
        <pre><span></span><span class="k">def</span> <span class="nf">fib</span><span class="p">(</span><span class="n">n</span><span class="p">):</span>
            <span class="sd">&quot;&quot;&quot;Print a Fibonacci series up to n.&quot;&quot;&quot;</span>
            <span class="n">a</span><span class="p">,</span> <span class="n">b</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">1</span>
            <span class="k">while</span> <span class="n">a</span> <span class="o">&lt;</span> <span class="n">n</span><span class="p">:</span>
                <span class="nb">print</span><span class="p">(</span><span class="n">a</span><span class="p">,</span> <span class="n">end</span><span class="o">=</span><span class="s1">&#39; &#39;</span><span class="p">)</span>
                <span class="n">a</span><span class="p">,</span> <span class="n">b</span> <span class="o">=</span> <span class="n">b</span><span class="p">,</span> <span class="n">a</span><span class="o">+</span><span class="n">b</span>
            <span class="nb">print</span><span class="p">()</span>

        <span class="c1"># Now call the function we just defined:</span>
        <span class="n">fib</span><span class="p">(</span><span class="mi">2000</span><span class="p">)</span>

        <span class="c1"># Returns</span>
        <span class="mi">0</span> <span class="mi">1</span> <span class="mi">1</span> <span class="mi">2</span> <span class="mi">3</span> <span class="mi">5</span> <span class="mi">8</span> <span class="mi">13</span> <span class="mi">21</span> <span class="mi">34</span> <span class="mi">55</span> <span class="mi">89</span> <span class="mi">144</span> <span class="mi">233</span> <span class="mi">377</span> <span class="mi">610</span> <span class="mi">987</span> <span class="mi">1597</span>
        </pre>
    </div>
</div>

Not pretty, but I have a feeling it'll be lighter weight than including js on every card.

Custom font?

http://ankisrs.net/docs/manual.html#installingfonts

How to install

Sorry for the dumb question, but could you please enlighten me to what should be obvious: how do I install this? I've managed to get it working by simply git clone https://github.com/badlydrawnrob/anki.git and importing anki-themes-1.0.0-beta-3.apkg. Now the note types are available. Is there a better way to do it, or is that just fine? Is it better to git clone https://github.com/badlydrawnrob/anki.git into a particular directory, e.g. ~/Documents/Anki/addons ?

Thanks! Looking forward to using this.

Extend the color variables?

There's a few extra colours used, for example:

.highlight .ow { color: #859900 } /* Operator.Word */

See https://gist.github.com/scotu/1272660 as an example

Styling for none code on cloze template

<ul> are a bit knackered and some other formatting when not using <pre><code> tags

Just use css

Note to self: Anki will use css, html, minimal compiling, minimal code.

After struggling with bugs via Stylus lang compiler (stalled or dead project), Jeet (dead project), Less css, a little Sass and reading around, I've come to the conclusion to just use css wherever possible.

Yes, the syntax can be ugly
Yes, it's pretty hard to remember sometimes
Yes, it's not perfect
Yes, preprocessors have gone a long way to pushing css forward

But, all this comes at a cost:

High cognitive load for (in my opinion) little gain.
Complicated functions and cleverness seem simple on the surface, but obfuscate code.
CSS is not a programming language and we should probably stop treating it so.¹
Visual styling is different to logic, so unless there's a huge overhaul of language design (or something new comes along) I think we have to be ok with CSS being a less-than-perfect language.²
Packages, software, languages come and go — so be careful what you depend on.³

One of the first books I read on web design was "Don't make me think" which is all about Keeping It Simple Stupid! At this point in my life, I have zero motivation to keep up with trends — the less time I spend on a computer, the better. Life is there to be enjoyed not obsessing over minutia.

The web moves in cycles like any trend, but it seems humans have a tendency to overcomplicate for the sake of "progress". Sometimes complexity is necessary, but more often than not, we can strip it out for a far more simple, sane, alternative.

You could argue the opposite and I'm not trying to belittle a CSS coder in any way — it's really flippin' hard to get right once your UI and state become complex, so a good CSSer is worth it. I however, tend to try and keep things simple — I'll save Material Design for mobile apps (if at all). ↩
And use it in a light way, not trying to be too clever. I don't like Javascript, and less, sass, etc feel like using javascript — messy. I understand a little Lisp and Python, so I'm not a complete philistine, but trying to wrestle CSS into a javascript-like language I feel is a mistake. I like the way Elm lang is headed and admire it's creator's ethos, but I'm not 100% convinced with elm/html or elm-css either. Wherever possible, keep things simple and just use plain HTML and CSS! ↩
CSS has moved on and now includes some functionality preprocessors were trying to solve — even nesting is now in fashion! ↩

Add some live examples

Anki uses a modified version of Pystache — currently using mustache.js to render locally.

Remember: reduce cognitive load and easy for beginners!

A few options:

Stick with what we have (+ JSON)
- Look into using the build option in NPM
~~Look at Pystache as an option? (possibly too complex)~~
- ~~Rendering template files examples~~
- Pystache hasn't been updated in years :(
~~Use codepen live examples (probably not)~~
Create a (VERY) basic landing page to showcase solutions.

Potentially add more colours and themes

To view available languages, type pandoc --list-highlight-languages into the terminal. You can also output and edit a json file to edit the highlighting theme #67. This is a replacement for Power Format Pack and Pygments, in older versions.

Solarized has a 16 colour palette
- it's a bit of a ballache trying to decipher which colour goes where, though.
- I could extend the --color-code variables and use the proper names ...
- Such as in this guide to export .json, and this one.
#67

Nice to have, not essential.

Considering Anki note file size and performance

It might be an idea to check performance, especially:

Images (keep to a mimimum, minify)
Markdown field
Third-party plugins?

Changelog and update guide

See #18 comments, the documentation could be a little clearer.

Anchor #answer link

I think this is overkill to worry about it, but will leave in for now.

Would it be better to use something that's self-contained? See the thoughts in this thread.

Docs:

{{FrontSide}}

<hr id=answer>

{{Back}}

Conditional fields for templates

This won't work:

{{#c1}}
  {{^----✄-- Hide: ★ Title}}
    <p class="title">{{★ Title}}</p>
  {{/----✄-- Hide: ★ Title}}
{{/c1}}

And this should be possible, but isn't with cloze deletion:

{{#c1}}
  {{#»»♻»» Show: ★ Title}}
    <p class="title">{{★ Title}}</p>
  {{/»»♻»» Show: ★ Title}}
 {{/c1}}

So, unfortunately for cloze templates it's sticking to the basic {{#c1}} {{/c1}} setup. I imagine most of the time this would be useful, to have a question about the code for c1 and a question about the syntax with c2.

Anki doesn't allow adding an extra class within class=" " either. So these are the options:

They can be removed from the template if not required
~~Hidden with a div~~
- Doesn't work, has to be a full html tag not partial. So this won't work:
  - {{#}}<div>{{/}} {{#c1}}{{/c1}} {{#}}<div>{{/}}
Hidden with js eventually?

Also, when creating cloze deletions, by default sibling cards are buried. ~~They also seem to need to be in order (i.e. you can't have {{c2}} before {{c1}}), which sucks~~.

Compile using npm build

Example: https://deliciousbrains.com/npm-build-script/

npm run build:css && npm run build:js && npm run build:img

Semicolon in mustache fieldname?

Makes things obvious when compiling to Anki deck

{{{★ Key point (code block or image)}}} {{! add cloze: in Anki }}
- --> {{{cloze:★ Key point (code block or image)}}} in .moustache
- --> "close:★ Key point (code block or image)": in .json

Study pygments docs

http://pygments.org/docs/styles/

Allow the use of inline (generic) `highlight.js` code?

1.0 includes highlight.js code blocks and removes the <pre><code> which has to be added manually. Shall we allow highlighting in a similar fashion for inline code?

Problems:

It's a pain to have to input <code> tags all the time, so best to keep them in
- It would break those cards using the current simple HTML tags method
  - Although, it could be an optional method depending on the user
You could wrap the language in a <div class=""> or any tag for that matter
- If it wasn't wrapped in language specific class, could use generic styling.
- Could add a .hljs to the <code> in the card template, then use the method above for adding language specific class.
- Could have different cards for different code types?
  - This would have to be done manually per card, not in the theme
  - This is what Anki tags are for, so might not be a good idea to have multiple card themes

Any comments welcomed.

Visitor personas: easy to understanding usage, beginner, intermediate, expert

Add some flowcharts to ease understanding of usage, similar to Anki Essentials
Live Codepen examples? See #5
Explore typing templates
- Does it work with mobile??

Originally posted by @badlydrawnrob in #5 (comment)

Dependancy hell

The Anki app creator is very clear that some things simply aren't supported, and are liable to break. See #56 #86

The more chinks in the chain, the more reliances on 3rd party software, the more headaches you open yourself to. If Anki is the root (with it's own dependencies, a plugin is the 3rd party, and you build on top of that ... well, you're going to have problems friend ...

Power format pack broke in 2.1 and is unlikely to be updated (and who knows when it'll be ported) ...
There's an alternative but no markdown support ( see here)
This means your previous markdown is likely to break, or be uneditable

Alternative options

Here's a few things I've tried over the years:

Just use Pandoc? Just use Anki-style rich text and HTML?
~~Find another plugin? (at time of writing, this works)~~
~~Use the (hopefully more stable) pygments?~~
~~Wait for Anki to integrate features (unlikely)~~

Sample code block is optional?

Some questions are very simple and only need Title/Notes.
Creating another card type just for this use-case is silly.
Just use ★ Title as "question" and ★ Key point notes as "answer"
Do the same for Simple and Missing! cards

This is only for fringe cases when you don't need a sample piece of code. In the documentation, there's a general rule that some fields are required, and some aren't, but this rule can be safely be broken¹ if you only need two fields for a simple question->answer:

Either force a pre block in the docs
~~Or allow the pre block to be optional in Simple~~

Creating a simple(er) card without required fields

Some tags aren't specified as optional, but can be safely ignored

It's not the greatest of practices to say you have required fields,
and to not enforce those fields, but I don't think that's even possible

Optional fields should be specified as optional, like so:²

{{#☆ Subtitle}}
    content
{{/☆ Subtitle}}

However, if the values are missing or null (at least within the json file) they're just replaced with some whitespace.

For Missing! cards, more cloze type fields could be needed

A couple of cards I've made in the past only really need two fields, no need for code at all:

A question
An answer

It's definitely the case for Simple cards, and may be the case for a Missing! card (in which case more fields should be available as a cloze deletion).

Hopefully Anki won't change the optional field syntax. I think for Anki the general rule is fields just won't show if they're empty (Moustache is more specific) ↩
See "False Values and Empty Lists" in the Moustache documentation ↩

Twig code block: rendering {{ i }} incorrectly

As the only "Anki" solution is to wholesale replace {{ with <% tags (which means replacing every single one of them) it's probably best to use either images, regex or perhaps even css to render the tags properly.

Javascript version
CSS example using <i class="{"></i> (double {{ doesn't work in the Anki browser for some reason)

Experimental: highlight.js for Anki and AnkiMobile

Currently using highlight.js shim and copy and paste html via Marked App viewer (right-click, copy and paste in Anki html view). Also see Marked App html exporting):

Work-in-progress Codepen example: http://codepen.io/badlydrawnrob/pen/xwzyej
- doesn't quite work the same as my local deck, but almost. Syntax highlighting is working on iPhone.
- Need someone to test on AnkiDroid

To do:

Experiment with Power format pack and see if the syntax highlighting interferes with the themes'.
See if highlight.js can be enabled using a javascript plugin

One idea per slide?

☝️ One idea per card. Just one!
Anything more can overload the brain.
Anything more can take too long to answer.

A concept from a storytelling workshop I attended (his example was one idea per powerpoint slide). The basic idea is your viewer shouldn't have to reason about what the card is about, it should be obvious at-a-glance (or at least within 10 seconds). If you're finding yourself scanning a card for more than 30 seconds, it's probably too involved and needs simplifying.

What's the most vital piece of information to put on each slide?

How can it be reduced?
How can the language be simplified?
How can it be told in 3 ways (logic, metaphor, experience)
What is the essential supporting material to add?
What can safely be left to Google? (just-in-time learning, rather than cramming)
What mixed media can be used? (images, sketches, code example, story, ...)
What personal "helpers" might you need (mnemonics)

Profile not syncing in iOS?

Created a new profile in Mac desktop version, doesn't seem to sync to iPhone app. Need to read up on profiles and Mac app as seems you need a new Ankiweb account for each profile??

Replace {{Sample code image}} with code block?

Use highlight.js for this too? Or at least allow use of both an image, or a code block.

Speeds up syncing
No images required
Relatively quick to achieve the same effect
- Generally it's already been typed in editor and it's a screenshot
- Sometimes it'll be preferable to use an image however

Using mustache for live demo (unescape JSON data)

TL;DR

Stick to plain HTML and Markdown
- Be careful what code you're adding to Anki fields!
Make sure you escape your HTML if you're doing things the professional way (making your own build/ folder)
- You can use an online tool to do this

Anki field templates and Mustache.js

Mustache javascript library is the closest representation of the Anki app field templates that I can find. It's not exactly the same as the docs so beware of bugs.

We can generate live card previews that are compiled from the demo/ folder and the .json file populates the content. The Anki cards that live in the Anki app are generated in cards/ (the demo/ folder is just for show!)

{{{☆ Syntax}}} Triple brackets are used, to unescape json html in the live demo cards
- Without it, syntax blocks are interpreted as strings (not raw html)
- HTML, or speech marks (" ") in json must be escaped before they're compiled.
Triple brackets will not work in the Anki app
I'd advise you to stick to plain Markdown and HTML in the Anki App, javascript can break things.
Also be careful when importing other people's decks, especially if they include javascript.

Stylus executable fails with duplicate filenames

Stylus might need retiring

Doesn't work: npx stylus source/stylus/main.styl --out build/
Doesn't work either: npx stylus --disable-cache source/stylus/main.styl --out build/

Getting syntax highlighting to work

First of all a massive thanks for creating these cards. I am having an issue getting the syntax highlighting to work. The example cards work completely fine but end up with plain text when trying to create my own. I have the Power Format Pack and changed the lines in utility.py to "CodeHiliteExtension(),". The markdown fenced code blocks link no longer works but found the page via google. Been writing code with opening
'''python
and closing
'''
Then hit the markdown button. However, all code just appears in plain text in the cards. I am assuming I am doing something wrong, but unsure what?
Note: using apostrophes instead of grave accent above so it displays OK.

Updating Anki deck

When importing the new deck:

Merge Note Types toggled on is the option you want to update all cards

Toggle Merge Note Types off if you want to play it safe

Increment the **major**.minor.patch for breaking changes.

If the Note Type schema has changed (you've moved fields, changed the name of fields, etc, existing cards — and Merge Note Types is off — your old cards won't be affected.

For a very dry overview of Anki storing values in the database, this post is very informative. I'm still unclear on how it does/doesn't merge Note Types however.¹

Updating without breaking current cards
Making sure new (or edited) Note Types don't break existing Note Types.

Steps taken

Added a customised deck, with field names changed
Add the original deck with Merge notetypes disabled
- Update notes and Update notetypes set to "if newer"

Adding an Anki deck (with Note Types)

Options for importing the anki-major.minor.patch.apkg — it does allow non-breaking changes but new changes won't be included if so. If the updates are minor, it shouldn't affect things too badly.

Merging Note Types?

Does it use hashes to compare different note types? The Note ID? ↩

Better export/import methods

Currently there's a couple methods to test out:

Clone Note Types and use a demo deck
Create a new profile to test an imported deck
Export as plain text

Typography base

Better base for typography (using rem?)

Remove inline <code> block styles?

TL;DR

Use markdown->html with backticks ... inline code
Add a b/strong, i/em tag or use the Anki editor as a visual aid

More info

Even Github Markdown doesn't allow inline highlighting (but some flavours do, like Pandoc) ...

~~Remove inline highlighting?~~
- Perhaps a basic code block + pygments is plenty.
- At the very least, it could do with simplification (perhaps just <b> and <i>)
- Inline <code> blocks should (generally) be very simple and short
Just use markdown backticks (other than specific inline code fields)
- Leave this up to user discretion (can add <b> or <i> in Anki editor if needed)
~~Markdown generally renders all inline tags (<b>, <mark>, etc) as part of the <code> block ...~~
- So it won't render anyway, and not sure if there's a workaround

An alternative to puzzle?

Marked as hard due to the step-by-step nature of a puzzle.
Every new card type adds a layer of difficulty and cognitive load for the user.

It might be a better idea to use a simple card, but a more complex offline puzzle, or question->answer, or drill. Mixed media such as videos and books, with a learning point in card form.

What do we want to achieve?

Mixed media learning
More than just recall
Most of all — it should be FUN! to learn
Grouping similar concepts (3 times, 3 ways)

If anyone is has examples or ideas, shoot me a reply :)

Multiple cloze fields?

#111

Other fun puzzle examples?

Kind of like a crossword, or puzzle, or game — more interactive, engaging, but getting you to think on paper rather than memorising. Joining the dots.

Go back and look at the original deck with the puzzle cards
Look at other challenges people have created, such as this¹
Other people have done some interesting things (like a quiz)²
- Multiple choice can be handled very easily

Image occlusions?

I like the concept, but perhaps something analogue and simpler might work, such as:

Sketch out this cons concept

Did you get it right?

Image occlusion is another option

Other alternatives?

Problem solvers: sketch out the concept using a framework
An alternative to Anki — Mochi cards
Reverso also has some nice ideas (like dictionary modals)

There's a world of difference between memorising short answers, like early-stage Codecombat, or simple challenges, to narly problems like setting up a json api. For the latter, I'm not sure there's any straightforward way for memorisation as it's interleaved learning. ↩
This can be achieved in a far simpler way (see below). I still think javascript in Anki is unwise, as it can slow down page load and is prone to break. Also, multi-option quizzes add an overhead to adding cards. ↩

Ideas for onboarding

Create a (VERY) basic landing page to showcase solutions.

Add some flowcharts to ease understanding of usage, similar to Anki Essentials
A nice example of documentation done well

Auto-compile moustache files?

https://codekitapp.com/help/hooks/

Draw!

Some ideas are too complex for a simple flashcard. For example, the HTDP game code or a stonking great glob of code from a program. How can this be broken down to make reviews sane? Should only a handful of snippets from the code base be added?

#23 (see the game, also the notes table)
#72 (especially on when NOT to add cards)
Meaning, context, and flow of a program
concrete->pictorial->abstract approach to teaching

Initial thoughts on sketching out ideas

Stop! Draw it out. Test design routes.
When faced with a difficult problem:

do part of it & try again, or

do a similar problem and try again.

When writing a function or programme, there'll be many routes. Each will have it's pros and cons, some will lead to shorter (or easier) code — having visuals of design decisions could come in handy when reviewing cards.

Do the simplest thing possible
- Pull out the nugget of the idea
- Start with the most basic unit of data
How much time do you have to explore?
Could it benefit from some research first?
Draw out potential routes
- See here and here for examples (simple and hard)
Filter the useful one(s) (try not to satisfice)
- It might be useful to note down the answer you didn't use (wrong answer, needlessly complex idea)
- You'll have it stored for next time you tackle a similar problem
Start writing code with confidence

See also hammock driven development for thinking about a problem, and ideally a non-maths version of "How to Solve it" if one exists. Some problems will need context, or step-by-step drawings, but where possible get to the nugget of the issue without adding a ton of code (this could be handled with simple drawings or explanations).

See the below comment, and my Head First SQL book notes as an example of where Anki might not be necessary. Here I've pulled out key ideas in a document for reference, and it only makes sense to add an Anki card on bits you routinely get stuck on.

If you come back to your notes and a section is too hard to understand, it's probably a good candidate for a simpler Anki card.

Image occlusions in Anki

Image Occlusions are another area to explore. The only downside is you must add annotations via Anki to validate the card. An example here on building your own.

Some things are hard to visualise

How to design programs function mental model is pretty good, if it could be visualised somehow. Also interesting is this article on meaning, context, and flow of a program.

A good example of something I've forgotten how I did it and is visually complex in racket lang.

Some concepts are really hard (or really dry) to grasp, so it's sometimes easier to draw out in a conceptual, abstract way.

It may involve mixed media that's offsite
Taking a snippet to make you reconnect that particular problem
A little nudge or reminder (a lesson you took, a bug you faced)
Or, a simplified version of a larger problem

Programming terminology can be dense

An argot: the language used by a particular type or group of people

Programming deals with precision for commanding a computer, so they can be hard to understand for the beginner. There's also the question of depth of understanding — and how to explain a thing depending on that student's knowledge reference points. A great example of this is Richard Feinman's explanation of magnets, and why they repel.

Some languages are easier to understand than others. It would be helpful to have a glossary for all the jargon out there!

Some other helpful examples

How about AI and drawing (an example of drawing a circuit and rendering code)
- Write a musical note and convert into some function
Drawing with code in Racket, interesting but a lot of code to animate a thing.
Code tracing and various sketching methods on pg. 169 of this pdf
- Feels a bit too much like maths to me, but useful for loops and recursions
I can't find many books on sketching out coding problems (yet), but this games patterns might do.
Programming a diamond shape (with sketches)

Crashes AnkiDroid

Hey badlydrawnrob,

first of all thanks for creating these note types.

Please note, that they make AnkiDroid crash due to a size limit that Android enforces on String fields in a database: ankidroid/Anki-Android#4241

How Did You Solve iOS Highlight.js?

Hey @badlydrawnrob,

I have the following code in a template (Front Side):

<link rel="stylesheet" href="_highlight.css">
<script src="_highlight.js"></script>

<div class="question">
{{Question}}
</div>

<pre><code class="language-{{Code Snippet Language}}">
{{Code Snippet}}
</code></pre>

<script>
hljs.initHighlighting.called = false;
hljs.initHighlighting();
</script>

Do you know why this works in Anki OS X and not in IOS?

How did you fix it?

Would really appreciate if you could help me out.
I downloaded your deck but couldn't figure it out myself.
Thanks! :

—Alberto

Too complex?

I've been on and off as to whether or not the complex template is too complicated (or at least, too complicated to understand for anyone who isn't me!) — any opinions on the matter add them here.

I've found the puzzle template useful to reduce the need for multiple cards, but I'm also working on a cloze template. Perhaps we could separate them into these categories eventually:

Simple
- What does this code do?
- What's the syntax?
Puzzle
- What does this code do?
- Solve a hard problem
Cloze deletion template
- Guess the missing code

Whatever the case, I've found it easier to keep the questions simple, following some of these rules. Basically, one question at a time, that's directly related to the question without being misconstrued.

To Do

Add some flowcharts to ease understanding of usage, similar to Anki Essentials
Live Codepen examples? See #5
Build basic cloze template
Explore typing templates
- Does it work with mobile??

Change field name on Cloze template

★ Syntax (code block) -> ★ Key point (code block or image)

badlydrawnrob / anki Goto Github PK

anki's People

Contributors

Stargazers

Watchers

Forkers

anki's Issues

TL;DR

Good monospaced fonts

Have already checked over these ...

Using default --system font stacks

Verdana looks a bit shit at default --font-size

🤔 Anki custom font quirks

Naming the font properly

⏳Card loading speed

Footnotes

Skylighting (fenced code blocks)

General

Notes on a theme:

Javascript as a case in point

Also interesting:

Footnotes

Footnotes

Alternative options

Creating a simple(er) card without required fields

Footnotes

To do:

Steps taken

Adding an Anki deck (with Note Types)

Merging Note Types?

Footnotes

What do we want to achieve?

Multiple cloze fields?

Other fun puzzle examples?

Image occlusions?

Other alternatives?

Footnotes

Initial thoughts on sketching out ideas

Image occlusions in Anki

Some things are hard to visualise

Programming terminology can be dense

Some other helpful examples

To Do

Recommend Projects

Recommend Topics

Recommend Org

Using default `--system` font stacks

Verdana looks a bit shit at default `--font-size`