Jeffrey van

This is by far my biggest (and most complete) personal project: A site all made to look up anything about the Japanese language, and learn it by doing a shitton of practices. This site was running for a long time in a closed alpha and beta test while still doing big improvements. Since this year is finally released in a public beta. The site is made for everyone who wants to learn Japanese, including myself. The content has been contributed and double checked by multiple people during the developments, but even now more content is added regularly.


During the developments my key point was to make the site fast and useful (nobody likes useless snail sites). The site has been written in ASP.NET MVC, but multiple tweaks were made to improve speed the user experienced while using the information site or the learn center. Caching is enabled on pretty much all areas possible (output cache, http client side cache, local storage) and the requests are kept to a minimum. The structure of the information pages are set up with html5 schematic elements to make our search engine friends happy.

The learn center itself is written almost completely in JavaScript and can run mostly without internet connection needed by using the application cache feature new in HTML5. Of course any cool site needs a few charts, so I've decided to add one library d3.js to build nice SVG based charts and a few interactive introduction videos.

Both the site and learn center is usable on a mobile device as well. I've used media queries to make the layout responsive and usable on any screen.

Nice tricks and technologies

A small addition I've made early on were a few JavaScript array extensions which allowed me to do fun stuff like filtering, ordering, randomizing and extracting information from every array on a C# LINQ kind of way. This really decreased a lot of the development time of the practices. For example: Filter difficult vocab, Randomize, take 20. I've published the code here.

All the screens in the learn center run through a small self-made framework which allowed me to make templates of screens, easy change all elements and add interaction, and most important: Add a good reusable structure through the whole project. Almost no code has been written twice. Basically it added support for JavaScript based components and templates.

I've also used the HTML5 speech recognition API and it turned out to be amazing for the practices! The API allows you to set up a few predefined text, which I've set to the vocab the user knows at that point. By limiting the speech recognition possible interpretations it (almost) always exactly knows what you were saying.


The site is ready to use but like always, my projects are a work in progress. Expect more of everything in the future... you know, somewhere between my other personal projects when I feel like it.

Show all articles