Skip to content
Instant foreign language flashcards (with audio!)
ApacheConf CSS JavaScript HTML Python Nginx
Find file
Latest commit 5679b42 @feross chmod 644 nginx.conf
Failed to load latest commit information.
server add tts folder to repo
static add tts folder to repo
.gitignore Open sourcing BrainGrinder. First commit.
nginx.conf chmod 644 nginx.conf
requirements.txt update py-bcrypt
supervisor.conf Update master

BrainGrinder - Instant foreign language flashcards is not done yet, but check out what I whipped up in 3 hours using jQuery 1.5 deferreds, jQuery templates, and the Google Translate API!

Automatic foreign language flashcards!

How it works

Fetching MP3s from Google Transalate

Nothing is running server side, except for the text-to-speech which is actually scraped from Google Translate using a simple Tornado AsyncHTTPClient. It is not possible to fetch the audio from Google on the client-side, since Google blocks all requests that have a non-Google referer header (though empty referer headers are allowed). Interestingly, Firefox doesn't send a referer header on mp3 file requests embedded with flash or HTML5 audio, while Chrome and Safari do. So, if I only cared about Firefox, I could really get everything working client side by including the mp3 directly in the page.

Since supporting Chrome and Safari is important, we fetch the mp3s from Google's text-to-speech (tts) service (the one that powers the audio on Google Translate) and cache the files server-side.

Displaying the flashcards

I used a bunch of CSS3. It's pretty self-explanatory, just look at the source.

Server Software

JavaScript Libraries

jQuery Plugins


  • save decks
  • edit current deck (more obvious)
  • pronunciation guide
  • add opengraph tags
  • shuffle cards button
  • image for each card
  • repeat sound button
Something went wrong with that request. Please try again.