Re-implementing an old web site in a modern style (Part 1)

So a few weeks ago I found out that my contract was going to be ending early due to a loss of funding. This is a great shame, not least because it gave me the opportunity to learn a bunch of new technologies, and also because I’ve really enjoyed working from home with minimal supervision. It’s been really helpful to my kayaking training to be able to go out and train during the afternoon and work in the evening after it gets too dark to paddle. It’s unfortunate timing because my contract ends at the end of April, and we’d already booked our cruise for two weeks towards the end of May.

But I’ve discovered a bunch of things since I’ve started looking for work:

• Getting remote work is hard, even if you have 7 years of remote work.
• Lots of potential employers want to see your work and your code, or worse, they want to see your GitHub profile. The problem with that is that most of my code is written for employers who don’t allow me to share the code I’ve written for them, and the websites I’ve worked on have been internal rather than facing the internet, so I can’t show them. Even worse, the only thing I’ve got on GitHub is a WordPress plugin that I forked for a project I did for the local kayak shop in exchange for a new boat. I used to contribute more to open source projects, but that was before the days of GitHub and mostly it involved emailed patch files. That was back in the days when I didn’t have so many hobbies and obligations.
• While I’ve been doing a lot of JavaScript over the last 7 years, I haven’t used any of the cool frameworks. We’d actually made the decision to transition our project at my soon-to-be-ex job to Angular, but we never got around to it.
• A whole bunch of companies are embracing coding exercises as an evaluation process. I don’t blame them – I’ve given interviews and I’ve received them, and they are an utterly shit way of evaluating people’s technical ability. But it is time-consuming if you have to do this for every company you apply to.

So I thought it would be useful if I could do a bit of a project that I could show to people, and put the code on GitHub, just like all the cool kids. And it should obviously use a JavaScript framework. And you’d think that I’d choose Angular, but there is a particular job here in Rochester that is currently top of my want list, and they use React, so I thought I’d use React.

So having made a decision on the front end technology, what I needed to do was pick a project. And the obvious candidate is my navaid.com website. While I keep the data updated loading FAA and Eurocontrol data every 56 days, I haven’t updated the UI in many years, and it shows. I’ve got several data generators there, but most of them are for Palm Pilot programs, so they’re probably not worth updating. But the GPX generator at http://navaid.com/GPX/ is still viable. So I’ll only reimplement that one.

The first step is to make a mockup of the new site. Actually, the first step was to watch a bunch of tutorial videos for React. Which start off teaching you about WebPack and ES6, and then React, and then React-Redux. I wasn’t 100% sure if I needed Redux, but it seemed like a good way to separate the data state code from the render code. But after watching the videos, it was time to write the mockup.

Obviously, since I have been using Bootstrap for the last several years, it would be easiest to make something modern and presentable using it. I just had to find a nice theme with a CDN. I settled on the “Paper” theme from Bootswatch, which has a nice simple clean look.

The obvious thing was to replace the multiple pages of the original GPX interface with a single page. The existing interface saves your last set of parameters in the database linked to a cookie and re-uses them next time you come back, and I’ve heard from users that they often just click through to the end and hit the action button without changing any of those parameters, so I thought it would be good to be able to display what they’ve loaded so they review to make sure that they don’t need to change anything and click the “Start Generating” button. So I decided on an accordion panel where the header for each type of filter shows what’s selected for that type and if you click on the header, you can modify it. Hard to describe, hopefully, easy to see in action.

So it took a few days, but the mockup is here. The code is the first commit on this project on GitHub.

After playing with it a bit, the first thing that leaps out at me is that the accordion panels should open when you click anywhere on the title bar, not just on the text. Also, Vicki suggested that the color of the accordion panel is a little blah and I should make it a nice light blue. You’ll see that in generation 2.

Update On thing I forgot to mention: While Bootstrap has support for responsive design, I made no attempt to make it work on mobile devices because generating and downloading large files isn’t something you’re likely to do on a phone or tablet. Probably the only change I’d have to make for mobile would be to use <div class=”row”> and <div class=”col-xs-12 col-md-4″> instead of tables, and possibly some tweaking of the padding or margin around checkboxes because they appear to overlap the label text a bit in Chrome and Safari on my iPad (although they don’t overlap in Chrome on my desktop when I choose “iPad mode”).

Also, as per a comment below, I’m also going to look at increasing the text size if I can do it without messing out up the look. The default font is 13px, which I’ve always thought was plenty big, but the Roboto font is a bit “thin”. I like it because it looks elegant, but maybe it doesn’t work at 13px? Bootswatch has some other clean themes, maybe I’ll have a look at some of them instead.

Update: You can read Part 2 and Part 3.