I'm using Anki to learn Html/CSS, Elm, Lisp, Python, SQlite (and someday Ocaml); I'm confident if you utilize this tool, you'll learn how to code in no time! What languages do you want to learn?
Anki helps you remember and lock-in learning quickly. Whatever language you're looking to master, let this tool help you! Backend, frontend, somewhere-in-between-end, we've got you covered. It uses spaced-repetition (a fancy way to say "scheduled learning") and simple flashcards for a great way to learn, revise, and practice your coding skills.
- Suitable for all learning levels
- Great for frontend and backend
- Popular languages supported
- Add color to your code
- Create your own custom theme
The Anki app is great, but it's default cards aren't good for programming: we can do better. Beautify your code (with css colour themes) and make coding fun to learn. Use these handy Anki Programming Flashcards (APF) as part of your daily routine!
For updates check this issue first just to be safe. Always backup your decks!
- Download Anki desktop
- Get the latest
.apkgdeck release File > Import ...the deck in Anki- Add a new card (select the
APF: ...card type) - Get creative with your cards!
Anki is simple to use, but hard to master. If you're just getting started, these helpful Anki guides will help you; otherwise ... let's begin!
🎥 Quick start video
Coming soon ...Once you're happy with your cards, it's wise to backup!
- Create a web account to backup your cards1
- With the mobile app, click "Synchronize" your profile
- Login to your web account ...
- And you're all done!
Get familiar with the cards below, Markdown code block highlighting, and when you're a little more advanced, try out the compiler.
There's three types of cards to choose from:
- 💡 Simple
- What's the answer?
- What does this syntax do?
- 🔎 Missing!
- A question with a
[…]word - A question with a
[missing]word
- A question with a
- 🖍️ Draw! (experimental)2
- A diagram of a small program you have to guess
- A sketch of a function or program to drill yourself on
Next, you'll probably want to add some pretty colors to your code.
🎨 Life is better in full colour!
They say code is an art form. Anki flashcard's CSS themes come with a light and dark colour palette; it's also good for dark mode if that's your thing.
- 👨🏻🎨 Starter themes
- 🥷🏻 Monochrome
- ⛵️ Breeze Dark
You can highlight any code string with basic highlighting, or go full color with Markdown and Pandoc code blocks. We have a monochrome theme for notes, and a modified Breeze Dark theme3 for blocks of code.
We can bring colour to all your favourite languages:
One big caveat is "learn the basics well first" before deciding on a direction. I'd suggest the first 2-3 chapters of How To Design Programs and learn good habits with Elm, a delightful language for web applications.
This simply means things you will, and won't learn from the enormity of learning resources we all have at our disposal. Concrete goals keep you on track, a learning frame helps avoid wasted time. Looking for a job? A hobby project? A budding entrepreneur? Frames change over time and differ person to person, but if you're starting from scratch, it really helps guide you (I wish I'd done that starting out).
Mine is "prototyping Elm apps with Python and SQLite to validate my digital product ideas". That means academic research, complex servers, deep learning, huge apps, other languages, and so on, is 100% OUT; I don't code every day so the learning must be light and apps simple. Here's a more detailed example of a learning frame from the "Programming Elm" book I worked through.
☝️ One idea per card. Just one.
Over time writing flashcards will become second nature; muscle-memory. These simple constraints have worked well for me, and they add the responsibility to write better flashcards: if you're spending more than a minute reviewing each card; reduce, reduce, reduce.
If you only had 280 characters, what would you say? It's good practice to write your flashcards like you'd write code — as clear as possible. Those 10 cards you wrote with 100 related ideas? Sifting through those will become a chore; 100 cards with one idea is much better!
Essential parts of the code (or all code?) should be 32 characters wide or less,4 with 2 space tabs. In my experience (with the mobile app) this allows for:
- A comfortable reading width (easy to scan)
- Key syntax is front and centre
- No horizontal scrolling (terse code)
You'll look back on your flashcards and they'll make perfect sense. We've all looked at code we've written (our stupid future self) and wondered what on earth is going on, so avoid struggling to understand your cards, or getting overwhelmed with information, by rewriting your cards "as if" we are our future selves. Follow these rules:
- One idea per card
- Less is more (trim the fat)
- Keep it concise and relevant (reduce cognitive load)
A card stuffed with facts will overload the brain. Keep your questions concrete and clear. Limit factual information of each card and be super focused: if you find yourself asking two questions, or learning about two unrelated facts in a single card, split them out into 2 cards:
- One function, syntax, or code snippet to learn
- One learning lesson (documentation of an outcome)
- One particular aspect of a problem you solved
Often I'll create a flashcard and spot problems with it later. Perhaps the question isn't worded well, the code sample is too long, formatting is off, it's too unfocused, a different card type is more suitable, or a difficult question needs splitting into three easy cards. Fix it then and there in the mobile app, or tag it as edit for later. This makes for less frustration and a pleasant experience in future.
Our brain works in focus and diffuse mode, so try to relate learning in interesting ways. Tag cards to group similar themes (like custom types, loops, or package functions) to drill as a group; theme the cards and learn it in 3 ways; Revise a particular card with search. There's so many ways to learn!
🧑🎓 do things the professional way!, once you've levelled up your programming skills!
🎥 Step 1. Write your flashcards quickly and easily (markdown->html)
- ⏱️ Want a faster way to create your flashcards?
- 🤖 I've got you covered with
npmandpandoc
Once you've got the basics of Anki programming flashcards down, it's time to get fancy with the offline markdown->html compiler. It'll render all your card's data fields for you in a flash!
screencast-compiler-data-files.mp4
🎥 Step 2. Create your own colour theme
- 🧑🎨 Want your own custom colour theme?
- 🤖 I've got you covered with
npm,pandocandless
If you're feeling creative, you can also take your code to the next level by 🧑🎨 creating your own colour theme, with any syntax highlighting pallette you like for your code blocks. You can also change the Typography to your favourite --font!
screencast-compiler-css.mp4
I'd advise beginners to start by writing great cards, before moving on to use the compiler. I know when I was starting out using terminal and compilers took some getting used to!
I've spent a lot of time fine-tuning the flashcards so they're pleasant to use.
The flashcards depend on very little from the Anki app (no add-ons required), and they'll work on ANY platform: AnkiMobile, MacOS (Silicon: ARM64, Intel: x86_64), Android, and Windows/Linux. You can use them how you want:
- Use the flashcards as they are; create your own colors/typography
- Use the excellent
markdown->htmlworkflow ... online or locally
Add-ons tend to go out-of-date (dependency hell), so I've made sure it depends on little, using stable, well-supported "boring" technology. It's pretty simple to setup too!
🕰️ A tool or a piece of software that's still around in 5 years, without any serious changes, is a good thing
There are other plugins out there that are fun to use, but beware of dependency hell!
1. How do I upgrade? (semantic versioning)
Always backup your deck before installing a new version! I try to stick to major.minor.patch semantic versioning, so updates don't break existing cards. Anki makes this tricky, so view commits for any major changes to the theme. You can merge your old cards with the new ones.
2. How do I write the flashcards?
Keep it simple and avoid javascript. Stick to Common Markdown or safe HTML to avoid unintended consequences in Anki. Here's some helpful guides on how to use the Anki software.
3. I can't swipe left to view code on Anki Mobile
The Anki Mobile app defaults to launching the menu with the swipe left gesture.
This is not desirable, as often our code will have an overflow which we want to
scroll horizontally. You can change the settings, see issue #118 for a fix. You'll also benefit from setting a 32 character limit on the width of the flashcard's code (or the bits essential to the question),4 see issue #174
4. I can't swipe up or down to view card on Anki Mobile
The problem in issue #168 shows itself when there's a big code block that's overflowing the viewport (the width of your mobile). Touching and scrolling up/down immediately (in one swift motion) resolves this problem.
5. I'm having text formatting problems, what do I do?
Paste raw html or plain text to avoid styling issues.
If you're having formatting problems, make sure you're following the guide and clicking Toggle HTML Editor ⌘⇧X (‹›) in the editor to copy/paste your HTML or raw text. For more information, see this issue. Many editors break formatting when you copy->paste text, or add junk to the html.
6. How do I use dark/night mode in Anki?
The app should follow your preferences, for example, on a Mac or iPhone search for the "Appearance" or "Display and Brightness" settings and set to Light or Dark.
If you want to force the display mode, in Anki desktop select the toolbar Anki -> Preferences -> Appearance -> Theme, and select light or dark. For the mobile app, you can select the gear icon Preferences -> Theme -> Night Mode ... and "Force on/off".
Anki programming flashcards (APF) are licensed under the MIT Open Source License
Thanks to Ben Frain for Enduring CSS and Jeff Escalante for GPS, I've borrowed ideas from both for sane stylesheets. Anki programming flashcards are based on Print First, in turn inspired by @cbracco (Cardinal CSS) and Material Design. Pick @mdo or Google's code guide for orderly code.5 iPhone photo by @svstudioart on Freepik, icons by Devicon and edited with DeEditor!
Also noteworthy is Kanri: a cool Kanban organiser for getting things done. Works offline and is free!
Footnotes
-
You'll want to add cards with Anki desktop; review them with Anki mobile apps. That's how I generally do it anyway! You can sync different profiles with Anki web if you like: one for a test profile, one for proper. ↩
-
Meaning, likely to change. I'm trying a few things out privately and when I have something to share, I'll let you know! ↩
-
This is based on the modified Breeze Dark theme for Visual Studio Code by Andrew Fridley. If you'd prefer the original Pandoc version, you can follow the instructions here. ↩
-
This means sometimes re-evaluating your code and function names to tighten things up. 32 characters might sound short, but when you've got 10 cards to review, no scrolling really speeds things up! Of course, this isn't always practical so see how you go. If you're mostly using desktop Anki, you can ignore this advice. ↩ ↩2
-
I don't follow these religiously but it's good to have something to aim for. Hopefully my code isn't too sloppy! ↩
