Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Instant foreign language flashcards (with audio!)
CSS JavaScript Python
Branch: master
Failed to load latest commit information.
server add tts folder to repo
static add tts folder to repo
.gitignore change port
README.md Open sourcing BrainGrinder. First commit.
nginx.conf ip change
requirements.txt update py-bcrypt
supervisor.conf Update master

README.md

BrainGrinder - Instant foreign language flashcards

Instant.fm 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

TODO

  • 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.