New version of Krypto... in React!

Recently I've been catching up on my web technologies. I've always liked the way you can put together universal and programmatic documents with HTML and web applications. I remember turning my nose up to Django and contributing to Turbogears (if anyone remembers that) back in the day. I've also used JQuery several times to make my own little dynamic web pages and widgets. These were all one-off, not often re-used and I felt very cool about them. It looks like web technology has gone through a sea change, though, and I wanted to keep up. I often make little dashboards and have been increasingly using web pages as a universal GUI and with things like Project Electron that seemed to apply more than ever.

My learning path:

• Eloquent Javascript: I got this through a humble book bundle but you can also read it for free online. I did not to all, or even many, of the exercises but it was instrumental in taking Javascript from an unfamiliar language that I was fighting to a genuinely useful tool.
• React.js Introduction For People Who Know Just Enough jQuery To Get By: A nice, not too heavy, introduction as to the place of React and similar frameworks. React seems complex and jQuery is easy to understand and get things done with very quickly but this article does a good job in both introducing React and the need for React. It also lead me to the next step below:
• Wes Bos's React for Beginners: A nice, focused course on building a React Web Application. It is an objectively crazy pace. Much of it feels like a whirlwind tour and there are depths of things that are skipped or glossed over completely and many times I stopped to ask the question: "Whaaaaa?" But there is right now a great background of web technologies that it would be foolish to try and cover everything. The is necessarily focused on React and it does that well. Very time efficient too, as I was able to get through it in a few afternoons.
• Learn HTML/CSS by Shay Howe: I've always used Bootstrap for just about everything I've done and it has always seemed a bit magic. For my next project I decided to do the CSS on my own. Also it was a nice opportunity to get introduced to those newfangled HTML5 tags.

The result of all the above is a new version of the Krypto Game. The previous version (still available here) was a bit of a mess, with spaghetti Javascript code, jQuery because I didn't know different and Bootstrap for CSS. This one uses React and my own CSS (apart from resets and gradient generators).

They are about the same size, surprisingly. Actually the old version, that includes all of jQuery and Bootstrap and my unminified code would probably be smaller if I minified my code. A little over 50% of the new version is due to webfonts. I don't regret it, though, they had the single greatest effect in making it look better.

Look forward to using modern web technologies more!