The web technologies behind Dr Lingua...

I've chosen a little bit of a weird mix of technology to build this site, and think it deserves a little explanation for fellow geeks. I'll start with the focus of the site, and move backwards from there.

Phaser

The driving force for this site is to make Japanese language games. My main motivation is making Japanese games for kids, specifically my kids. That said, all kinds of people can enjoy using games to learn a language, so everyone who wants to learn Japanese using games is welcome here.

Phaser is a great HTML5 game engine we use at my work, where we make English literacy and numeracy games for kids. I've tried a few game engines, and Phaser is my current favorite. As it's an HTML5 engine it will run pretty much anywhere you can use a web browser – iPads, iPhones, Android tablets, Chrome books, you name it – which is great for making it generally accessible (sorry Flash....) Again, the main driver here is I wanted to make games that ran on my kid's iPads, that they could share them with their friends.

React

React from Facebook is a lovely way to modularise components for making websites. That means I can write one component and use it in many places – which makes complex sites much easier to maintain. This site currently isn't very complex, and I could have build it in many other ways. But, my vision for this site extends a fair way into the future.

I want kids to be able to progress through different games as they learn Hiragana, Katakana, and eventually, Kanji. To do that I will need a database they stores user progress, and a fairly complex site setup. I'm planning ahead, maybe a bit prematurely, but I'm happy to deal with that.

Gatbsy

React is great, and I love working with it, but there's a couple of minor problem if you don't want to pay to host the site, which I didn't. First, the URLs look ugly...

In my first pass of this site, I was using something called the hash router in React. That means a URL (the address of the page in the browser) included a hash '#' element. An address would need to look like 'drlingua.com/#/games'. Web servers ignore anything after a hash – so React could determine what to show a user by checking what came after the hash, and the server stayed out of it. For me it's an aesthetic thing, I just didn't like the hash.

A bigger problem was that React uses a single HTML page to show all content, then uses JavaScript to show the user different pages. But non human users, like Google and Facebook, only see the initially loaded web page. All pages on a site look the same to them, which makes getting content listed in search engines super tricky. There is a simple way around this called server side rendering with React.

Server side rendering lets you create the pages on the server instead of in the browser, while still getting all the benefits of React. However, this violated my 'not paying for hosting' principal. Gatsby to the rescue.

Gatsby does server side rendering on my computer, giving me a static site with no server processing required, just HTML pages I can put anywhere. That let me use the final main piece of technology I wanted to use - Firebase.

Firebase

Firebase is a cloud offering from Google. I have no idea why, but unless you're a huge company, almost everything on it is free - including web hosting for static sites. Added to that, they provide free custom domain hosting, with a free SSL certificate... Sounds pretty good to me!

More

Above is the main thrust of the site. Apart from that all the usual web dev stuff is used:

• GIT for version control
• SASS for CSS styling
• Photoshop
• Sublime for text editing
• A Macbook Pro
• Lots of coffee!

If you've got any questions, please head over to contact, and get in touch.

Cheers,

Adrian