https://github.com/feross/braingrinder
Instant foreign language flashcards (with audio!)
https://github.com/feross/braingrinder
Last synced: 25 days ago
JSON representation
Instant foreign language flashcards (with audio!)
- Host: GitHub
- URL: https://github.com/feross/braingrinder
- Owner: feross
- Created: 2011-08-31T05:48:32.000Z (over 14 years ago)
- Default Branch: master
- Last Pushed: 2019-10-23T18:18:42.000Z (about 6 years ago)
- Last Synced: 2025-07-31T11:31:44.277Z (5 months ago)
- Language: CSS
- Homepage: https://feross.org/hacks/braingrinder
- Size: 230 KB
- Stars: 34
- Watchers: 3
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# BrainGrinder - Instant foreign language flashcards
[Instant.fm](http://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](http://www.tornadoweb.org/) 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
* Tornado Web Server -
* Supervisor - (used to daemonize the Tornado process)
## JavaScript Libraries
* SoundManager2 -
* JavaScript SHA1 -
* jQuery -
* Modernizr -
* HTML5 Boilerplate -
## jQuery Plugins
* jQuery Hotkeys -
* jQuery QuickFlip - (used as a fallback when CSS3 translation is unavailable)
* jQuery Templates -
* jQuery TouchWipe -
## TODO
* save decks
* edit current deck (more obvious)
* pronunciation guide
* add opengraph tags
* shuffle cards button
* image for each card
* repeat sound button