Re-implementing Part 2

As described in my previous post, I gave myself a project to reimplement an old website using new technologies in order to prove to myself and to potential employers that I can do all the modern stuff.

The “Step 1” prototype was completed 15 days ago. I only wrote about it early today because I was debating with myself whether I should write up each step or do it all at the end. But during that time I’ve managed to get the static HTML page re-written as a React+Redux dynamic front end. I included the deficiencies I mentioned in the first post – the accordion panels open and close with a click anywhere on the title bar, and I’ve added “disclosure triangles” to make it more obvious that the title bars are meant to expand.

It doesn’t talk to a back end yet (it just simulates it using setTimeout), but it does so some nice interactive features

  • The title panes on each accordion panel update based on what you’ve chosen in the panel
  • It updates the countries, states and provinces in the “Country/State/Province” panel based on the latitude and longitude range you entered in the Geographic Area panel.
  • The state checkboxes don’t show up until you check the “US” checkbox in the country list, and similarly, the province checkboxes don’t show up until you check “CA” in the country list.
  • The “Start Generating” button is disabled unless you’ve selected at least one entry in the Airport Types, Navaid Types or Fixes in Charts panels.

Even taking into account the fact that I was learning as I went, I think the code looks ok. I tried to make some common base classes, but in many or most cases, I discovered that convolutions required to make it general weren’t worth it and I just ended up with similar but not identical code – case in point: the various “*Check” classes. I also ended up putting several classes for each accordion panel together in one file – I’m not sure if that’s considered best practices, but it seemed to make sense to me.

The mockup is here. This code is now the third commit on this project on GitHub.

So for a next step, I was planning to write a back end. The back end would have no actual HTML pages returned, just a bunch of AJAX calls and responses, mostly all returning JSON. So I was thinking Django, which is what I’ve been using for the last several years, would be too heavy for that. Similarly, the Java back ends I’m familiar with are also pretty heavy. On the other hand, the existing backend is written in Perl, and frankly, I don’t want to do anything in Perl anymore. I wonder if Flask and SQLAlchemy would be a good choice?

I’ll also have to figure out how to read and store cookies so we can store a session id just like the existing site does, but that’s probably not a big deal.

I also have to think of how the file generation will work. In the old code, I spawned off (fork/exec) a program to generate the file, and then had the web server process looking at the log file the generator task to see how far it had gotten. That made sense when the back end computer was busier and the generator task took 5-10 minutes – I didn’t want to tie up an Apache thread for that long, plus I could use a very primitive hand-rolled bit of Javascript to show progress. These days generating takes less than a minute, so I’m wondering if I couldn’t just do a return “Content-type: application/octet-stream” directly in the Apache thread. I’ll have to investigate.

A much more minor change I’m thinking of is in the country list putting the US and Canada at the top of the list instead of being strictly alphabetical because most of the users of the site are from the US or Canada and it would make it easier to find them.

Cosmetically, I reused the banner from the old site. It doesn’t really match the light and clean look of the rest of the site. I should probably make something more in keeping with the look I’m going for. Similarly, the favicon looks like a Palm Pilot which was fine when most people were using my data for Palm Pilots, but kind of wrong for GPX.

Someday, I’d like to add a simple map that can use to select the geographic area. Even better would be displaying or even picking countries, states, and provinces on the map. I’ve done some quick googling and I can’t find a good map library.

Also, if I could get the backend working fast enough, it would be cool to give a running count of how many waypoints the user is going to get in his file with the current parameters.

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.

V10 Sport good as new, what to do with my V12?

So after my last update I sent my boat off to get fixed. It came back looking amazing – you can’t tell where it was damaged, either by color or by texture. John at ateammarineandsupply.com did an amazing job. But I paid a high price for it – $500. More than I would have liked, but it’s my best boat.

In the meantime, I’ve been paddling my V12. When I bought the V12, I knew it was a bit old and beat up, but I wanted something that would challenge my balance. Also, it had an overstern rudder option, so I thought it might be useful for inland races, especially in shallow waters. And I used it in a few races in 2015. But in 2016, I ended up not using it in races, in spite of using it for much of my early spring training. The only race I did in 2016 that I’d done in the V12 in 2015 was the week before the Canadians, and I had a theory that I wanted more time in the V10 Sport. I didn’t use it for other races that I’d thought about using it for like Round the Mountain because I just haven’t managed to handle it in waves yet, and I wasn’t sure what the weather would be like on race day. I’d still like to get some time in it in waves with the hope of eventually being able to use it in smaller waves.

But here’s the problem: the boat is in much worse shape than I thought it was when I bought it. I don’t know if I just didn’t recognize how horrible it was when I bought it, or if has deteriorated since I got it. As well as the cracks on the seam line that I knew about beforehand, I’ve noticed a bunch of soft spots on the hull, especially where the boat rests on my V-racks. I had it up on my shoulder today and I could hear the gel coat cracking as it bounced when I walked. Not surprisingly, it leaks like a sieve. But on the other hand, I like the fact that my V12 is a beater that I don’t mind dropping in the mud while spring paddling. It also has the earlier bow shape that doesn’t pick up weeds quite as badly as my V10 Sport (the 2014 V10 Sport redesign changed the bow shape to make it sweep up every weed in the world), which means it might be better at the Seneca Monster race if I do it this year. And the overstern option might be good in that race as well.

I don’t want to spend the money to fix it – if fixing a few small cracks on an otherwise pristine boat was $500, fixing all the multitudinous problems with this pig-in-a-poke will cost way more than what it’s worth. Ideally, I should probably get a replacement (used) boat. But what boat? The fact that I’ve been unable to master this boat in anything more than a single boat wake is bothersome. I’d like something that’s faster than the V10 Sport, but I’d also like something I wouldn’t be afraid to use on the Bay (at least before the motorboats come out to play).

But the other problem is that I’ve got my heart set on a better computer this spring, so I don’t have money for a new boat. So I think the plan will be to keep using my V12 as a beater boat until it finally gets an irreparable hole, then look for a used V12, V10 or maybe something else. According to Wesley’s surf ski reviews the Stellar SEL or Fenn Spark might be as fast as a V12 but more stable. So might the new redesign of the V12 but I bet the new one has the weed sucker bow as well as being more expensive.

Oh, that isn’t good!

In the continuing tension between “wanting my lovely boat to stay lovely” and “wanted my boat to look like I’ve gotten good use out of it”, I’ve been leaning towards the “looking used” end of the spectrum. But I think I’ve gone a bit too far this time. Sometime in the last couple paddles, I’ve put some nasty looking cracks in my lovely Epic V10 Sport. I’m betting it’s the time from my video the other day where I paddled amongst ice floes. My local Epic dealer is closed this month, but I’m thinking I should probably keep it off the water until somebody can evaluate it and see how extensive and expensive the repair is going to be.

So while I hadn’t planned to start paddling the V12 while the river was still roiling and boiling like it is now, I guess it’s the best choice for now. Except when I went to get it from the rack, I discovered it was absolutely full of water. I couldn’t lift it, it was so bad. I wasn’t sure where the water was getting in until I turned it on its side and water started pouring out from the water line seam. Shit, I knew this boat was in bad shape, but I didn’t realize it was so bad. After spending some time pouring water out the drain hole, I picked it up and realized there were chunks of ice bouncing around inside the hull as well. Hopefully, those will melt over the next day or so.

My last option, and it’s not a great one either, is to get my ancient “Fat Oscar” V10 Sport back from the guy I loaned it to. I call it “Fat Oscar” because it was the first generation of V10 Sport and the cockpit “bucket” is hugely wide. Even at my heaviest, I’ve had to put pads on the insides to keep from wallowing around. Oscar Chalupsky is infamous for how much weight he used to gain in the off season and then lose in time for Molokai, so the joke is he designed it when he was at his heaviest. This one is “club layup”, meaning it’s heavy as hell, but also more robust than my “ultra layup” light but injured boat. It also has the drawback that it has an open venturi drain rather than the kick open scupper drain that the new boat has. Which means either I’ll be sitting with a crotch full of freezing cold water, or I could cover the drain with duct tape and hope it holds until I finish.

Paddling the GoPro

With the GoPro mounted on my lovely Jim Smith bow mount, I took it out on the Genessee River to see how it looks. And I have to say, I think it looks awesome (ok, as I write this it’s only a few minutes after I uploaded it to YouTube and YouTube is only showing it in 360p, but trust me when I say it looks great in 4K). The GoPro doesn’t have image stabilization in 4K, but on a flat water trip like this, it doesn’t need it. And I love the position – the Jim Smith mount puts it just at about the right height, and it feels firm.

Everything I used to bore people on newsgroups and mailing lists with, now in one inconvenient place.