oefenuw

Practice Your Dutch

This is the primary source code repo for oefenuw.nl, a site designed to help you practice the Dutch language. That domain name is intended to be read as "oefen uw nl" ("practice your Nederlands").

Credits

Sounds Effects & Audio Implementation

• The "correct" sound effect used here is UI Confirmation Alert, C5.wav by InspectorJ of Freesound.org
• The "incorrect" sound effect used here is Access Denied Sound by Sun Temple Games via Freesound.org
• Spoken utterances are currently generated using the Apple macOS text-to-speech voices "Ellen" (NL-BE), "Xander" (NL-NL), and "Claire" (NL-NL). See gen_audio.sh to view the code that generates the utterances used on the site. Note: I'm working to determine if there are license requirements for using rendered utterances in this way.
• The sound effects and recorded utterances are then packaged into audio sprites using Tõnis Tiigi's audiosprite utility.
• The audio sprites are loaded and played back in the browser using the howler.js library.

i18n Interface Elements

• Andreas Löw's tutorial on using vue-i18n was extremely helpful.
• Language data came from Wikimedia's List of language names.
• This blog post flags are not languages influenced our i18n UI.

Typefaces

• We host our fonts for user privacy and security. The hosted version of Mario Ranftl's google-webfonts-helper was very helpful during development.

Resources

I've used these resources while developing this site:

• https://en.wikipedia.org/wiki/Dutch_orthography
• https://nl.wikipedia.org/wiki/Alfabet
• https://www.learndutch.org/lessons/pronunciation-dutch-alphabet/
• https://www.youtube.com/embed/ZCA2DyqYvF0
• https://www.youtube.com/watch?v=ktikutDOA0E

Code Notes

This repo defines a containerized single page app written mostly in ES6 and leveraging Vue.js. We try to comply with the vue.js style guide. For UI styling we use the Bulma CSS framework.

Docker Container Implementation

This repo's Dockerfile utilizes a multi-stage build:

• stage 1 is based on galvanist/vueenv (an npm/vue-cli "compiler" environment) and it compiles the app into static files containing the SPA
• stage 2 is based on nginx:1-alpine and it serves the static files compiled in the first stage

Next Steps

Some things left to do:

• briefly flash or outline the correct answer when the user gets it wrong
• work on improving the colors
• improve post-game report, persist the data somewhere (scores, perhaps timing, and a report card)
• investigate a high score screen
• more languages!
  • adding an RTL language and having it present correctly would be a big win
  • I'll need to find typefaces that support non-latin languages

Consider what other types of exercises I'll have on the site, some immediate ideas:

• numbers and prices (you hear the number you type it out)