React.JS

React and Angular are popping up a lot in job interviews these days. I decided to try React, since it is rumored to be the simpler of the two. So I created the old Chinese stone game Go in a Codepen. Normally I post code and talk about it in this case, but I think I will just let the Codepen speak for itself. Here, I report my experiences.

There is a lot of learning material out there, but the best resources start out right away with productive examples that get you working quickly. This tutorial video from Traversy Video does a very good job. I used this React demo from Facebook to model my architecture after.

The least trivial part of the game was the capture algorithm. The game engine must figure out if a newly placed stone results in another stone being surrounded. To figure this out, I implemented a recursive breadcrumb algorithm. The method searches recursively in four directions, resulting in a wide descending tree, but marks visited spots on the matrix to prevent infinite recursion. If at any point an empty space (liberty, in game terms) is found, the call stack starts bubbling up with that information. The recursive call will say whether or not a liberty was ever found. If it was, I run a second method to erase all visited points on the matrix, otherwise I run a different method to restore the marked spots back to original.

Here is my reaction (?) to React :

  • JavaScript is fun for web programming in limited amounts, but Object-Oriented frameworks like ES2015, Babel, etc. inevitably make it worse. this.method.bind(this)? Yucko.

  • Hidden inherited methods are traps waiting to happen. My IDE (Codepen) did not alert me to inherited methods, so this may be my own fault for not using a JetBrains tool or some such. Pick unique method names just in case.

  • I don’t really see the payoff. I understand the principle of data flow and limiting state on classes, but a real class-driven language does this in a more flexible way without need of a framework.

I know a little bit of CSS and HTML, so I was able to decorate it a bit, so that it kind of looks like an old wood board.

The WordPress Ecosystem

WordPress is amazing!

I spent a lot of time over the past few months trying to settle on a blogging platform. For me, it is not a trivial matter of looking up features and reading opinions. I try before I buy. On my local drive there are many prototype sites written in more than a few languages slash frameworks. Over at http://jameecreations.com I exercised my raw HTML and CSS skills. Now that I have a WordPress site going, I find that those skills are helping me customize my theme just as I like it.

But before I get lost in code logistics, let me say what I came here to say: WordPress is awesome because of the amazing community of feature contributors. Between the plugins and the themes you have everything you could ever want from a modern, responsive site. No longer do I search for “how to do cool animated transition XYZ”. Now I search for “plugin for cool animated transition XYZ”, and there it is. Install it, configure it, I’m done.

http://wordpress.org and https://wordpress.org/themes/hipwords/ have made this blog a pleasure to create, and I cannot thank their creators and the creative community around them enough.

Now for some minimal coding logistics : A Child Theme (see https://premium.wpmudev.org/blog/how-to-create-wordpress-child-theme/ for great tutorials) enabled me to create a beautiful module loosely-coupled to WordPress and the parent theme. I was able to get a fun font from my name in the form of Lobster from Google Fonts. Another stylesheet resource, hooked into functions.php as with the previous, comes from Fontawesome. Using the :before pseudo-class along with the font-family: CSS property and the icon hex codes, I added cool icons to my menu for social links. This plus some other formatting choices in style.css make for a nice, modern looking software developer blog.

Finally(for now), I fixed a headshot on my page with minimal pain using an Image Widget (https://wordpress.org/plugins/image-widget/). Since the Hipwords theme comes with a widget-based sidebar, the process was easy and largely driven through the browser.

That’s it for now; more to come as I feature-up the site. I would include code, but I have yet to install that plugin. 🙂 Wait for a future post.