badlydrawnrob / anki Goto Github PK
View Code? Open in Web Editor NEWLearn to code with Anki — flashcards and themes for all learning levels. Master your programming language of choice!
License: MIT License
Learn to code with Anki — flashcards and themes for all learning levels. Master your programming language of choice!
License: MIT License
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):
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 ...
Here's a few things I've tried over the years:
Currently there's a couple methods to test out:
See #18 comments, the documentation could be a little clearer.
Using Pandoc and skylighting
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)
A ramble or a rant. Good software shouldn't need updating, unless something breaks. I've left this tool alone for 4 years1 and besides a couple of small niggles, fundamentally the Anki Themes still work.2 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.3
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.
"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 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. ↩
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.
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.
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 broken1 if you only need two fields for a simple question->answer
:
pre block
in the docspre block
to be optional in Simple
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:2
{{#☆ Subtitle}}
content
{{/☆ Subtitle}}
However, if the values are missing or null
(at least within the json
file) they're just replaced with some whitespace.
A couple of cards I've made in the past only really need two fields, no need for code at all:
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 ↩
Better base for typography (using rem?)
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:
{{#}}<div>{{/}}
{{#c1}}{{/c1}}
{{#}}<div>{{/}}
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
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?
concrete->pictorial->abstract
approach to teachingStop! 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.
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 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.
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.
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.
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!
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
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.
But, all this comes at a cost:
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 useful CSS to this gist
rem
is behaving properlypre
blocks) is smaller in the Notes
sectionimg + pre
(see below)<pre>
and not <pre><code>
blocksSyntax: inline code
<i>
and <q>
actually highlight codecode
block + pygments is plenty.<b>
and <i>
)It might be an idea to check performance, especially:
Create a (VERY) basic landing page to showcase solutions.
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.
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
Using npx
Anki uses a modified version of Pystache — currently using mustache.js to render locally.
A few options:
❗ 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.
{{{ ... }}}
(would it conflict with Anki?)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!
To view available languages, type
pandoc --list-highlight-languages
into the terminal. You can also output and edit ajson
file to edit the highlighting theme #67. This is a replacement for Power Format Pack and Pygments, in older versions.
--color-code
variables and use the proper names ....json
, and this one.Nice to have, not essential.
Example: https://deliciousbrains.com/npm-build-script/
npm run build:css && npm run build:js && npm run build:img
<ul>
are a bit knackered and some other formatting when not using <pre><code>
tags
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.
- 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.1
system-ui
will use San Francisco on a Mac2ui-monospace
has poor support in browsers.--font-size
rem
screws everything else up. Increases size of all fonts, so be careful. Also, 1rem
should allow user-edited font-size
options in the browser.--font-size
with rem
a bad idea? (this article sets up a percentage)rem
on an element cascade? (like changing p
affects <code>
even if that tag has it's own rem
declared?rem
.typography.less
and headings.less
; or themes/...
files?@font-face
fonts? (seems to work on desktop)--system
font stacksMonospace (
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 withsystem-ui
seems to work on both.3
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!2
print-first-css
(basic font stack)--font-size
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 thecollection.media
folder.
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 usefont-weight
andfont-style
to specify the type of font (bold, italic, whatever).
You can use a hosted— Anki doesn't expose the<link ...>
tag<header>
, so usesrc: url(...)
to load custom fonts from yourcollection.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. ↩ ↩2
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". ↩
A visual example so this is easier to understand, can be migrated into the docs eventually.
★ Syntax (code block)
-> ★ Key point (code block or image)
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
Originally posted by @badlydrawnrob in #5 (comment)
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.1
Merge notetypes
disabled
Update notes
and Update notetypes
set to "if newer"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.
Does it use hashes to compare different note types? The Note ID
? ↩
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);
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☝️ 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?
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}}
TL;DR
build/
folder)
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
" "
) in json must be escaped before they're compiled.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:
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.
TL;DR
markdown->html
with backticks
... inline code
b
/strong
, i
/em
tag or use the Anki editor as a visual aidMore info
Even Github Markdown doesn't allow inline highlighting (but some flavours do, like Pandoc) ...
<b>
and <i>
)<code>
blocks should (generally) be very simple and short<b>
or <i>
in Anki editor if needed)<b>
, <mark>
, etc) as part of the <code>
block ...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 ...
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??
npx stylus source/stylus/main.styl --out build/
npx stylus --disable-cache source/stylus/main.styl --out build/
See also #36
Use highlight.js
for this too? Or at least allow use of both an image, or a code block.
As a couple of posters have mentioned, using Highlight.js is problematic for the following reasons:
src=
isn't supported (an addon is available to allow this, but it'll only work for desktop)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">"""Print a Fibonacci series up to n."""</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"><</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">' '</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.
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.
<i class="{"></i>
(double {{
doesn't work in the Anki browser for some reason)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:
<code>
tags all the time, so best to keep them in
<div class="">
or any tag for that matter
.hljs
to the <code>
in the card template, then use the method above for adding language specific class.Any comments welcomed.
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.
If anyone is has examples or ideas, shoot me a reply :)
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.
I like the concept, but perhaps something analogue and simpler might work, such as:
- Sketch out this cons concept
- Did you get it right?
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. ↩
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.