I’m Currently Looking For Work and Looking for Open Source Sponsors

It’s been such a short time at my new job I never posted about it here. That didn’t stop me from being laid off ????

So, if you’re looking for a Front-End Architect or Director of Engineering, please let me know.

Anyway, in the tradition of making lemonade from lemons, I finally set up a GitHub sponsors page. If you’d like to support my open source work, that’s where it happens.

HTML5 Boilerplate 8.0.0 Released

It took a little longer than I expected, but we released HTML5 Boilerplate 8.0.0 yesterday. As I mentioned a few weeks ago, it’s the 10th anniversary release, and if I do say so myself, it’s a pretty good way to celebrate 10 years of the project. It was a lot of work getting this one out the door, but I’m really happy with how it turned out.

I’ve been involved with HTML5-Boilerplate from before the beginning (I was working with Paul at Isobar/Molecular while it was still an internal project) so seeing it through this anniversary release was a lot of fun for me. Five years ago I wouldn’t have predicted I’d end up shepherding the project through this milestone. At the time I was basically just a watcher on the project who knew a lot of backstory, floating into issues where background was needed to explain something. My commits, at that time, were few and far between. So stumbling into the job of maintaining HTML5-Boilerplate and, by extension, managing the H5BP organization for the past three years has been a pleasant surprise.

For a number of reasons, this release, my third major release as maintainer, is the most satisfying work I’ve done on the project since the early days. Here’s what it includes:

Quick-start With npx,npm init or yarn create

The addition I’m most excited about is not a core part of HTML5-Boilerplate at all. Last week we released a very early version of create-html5-boilerplate. Similar to create-react-app, this application allows you to get started with HTML5-Boilerplate quickly and without installing any dependencies. With npx starting a new app or site based on HTML5-Boilerplate looks like this:


npx create-html5-boilerplate new-site
cd new-site
npm install
npm start

The above commands do the following:

  • Downloads and install the latest version of HTML5 Boilerplate
  • Installs dependencies
  • Bundles site assets and start a web server using Parcel
  • Opens a web browser pointed to http://localhost:1234/

This is very early days for this feature, but I think it’s a great start. Kudos to Vlad Tansky for his suggestion of this feature and his work getting it up and running and out the door. We’ll be working on more enhancements to this feature to get to a proper 1.0.0 release in the near future. If you’re interested in helping out, please drop by the new repo and pitch in.

We’re looking to add a small initialization wizard to get up and running with more values filled in and adding/removing some features. The first thing we’ll solve there is the long-running issue of the empty lang attribute on the html element.

That’s going to make me really happy.

I’m not saying that the empty lang attribute has kept me up and night or anything, but it’s always bothered me. The empty lang attribute has always been a “least bad” solution and not a good solution.

Sample package.json, Complete With Basic Parcel Scripts

We added a sample package.json to the project. In addition to being a starting point for people to get familiar with the npm ecosystem and the contents of package.json, it also adds Parcel to the project. Parcel describes themselves like this:

Parcel is a web application bundler, differentiated by its developer experience. It offers blazing fast performance utilizing multicore processing, and requires zero configuration.

Perfect.

The zero configuration part is especially nice to me. I have thought about adding a dev server and bundler to the project since those features are such a vital part of the developer experience in 2020. I never wanted to because the overhead and learning curve of some of those technologies is way too much for HTML5-Boilerplate. The simplicity of getting started with Parcel makes it a perfect choice for HTML5-Boilerplate. There’s just the one dependency in package.json, a couple of entries in the scripts array and then nothing else… If you don’t want to use Parcel, you won’t even notice that it’s there. If you do want to use it, run one command, npm start, and you’re up and running with a simple development web server and asset bundler. It’s really pretty great.

Once again, big thanks to Vlad Tansky for this feature. He suggested it and did a lot of the work getting this integrated into the project.

Sample Open Graph Metadata

This feature has been discussed for a while. The Open Graph protocol widely used these days so it’s a good addition to the project. The empty values in the sample markup are another area we’ll be filling in with the create-html5-boilerplate initialization wizard.

Remove jQuery

I wrote half of a book about jQuery and have broken bread/had drinks/talked tech/discussed opera (you can look it up- that’s one of the things I miss about being on Twitter) with members of the jQuery team over the years. I was a fan back in the day and remain a fan. I also recognize that, on the back of WordPress, jQuery is still in use on an enormous number of sites.

That said, while, at one point, jQuery was JavaScript for many people, that’s no longer the case. So, we removed it from the project. It’s been requested on multiple occasions.

For those of you who are still interested in using jQuery, we’ve documented the simple steps to getting it back into the project with our optimized snippet and will probably add it as an option to create-html5-boilerplate.

Set anonymizeIp to true in Google Analytics Snippet

Christian Oliff wrote:

By default Google Analytics records the full IP address of a user visiting the site, but that full IP address is never available to the Google Analytics property admin. By anonymizing the IP address you can make your site more GDPR-compliant as a full IP address can be defined as publicly identifiable information.

And so we anonomized the IP address.

Remove Browser Upgrade Prompt

My least favorite part of the project was removed.

Dependency Updates

We updated Modernizr to 3.11.2 (they’ve been busy!) and main.css to 2.1.0.

Documentation Upgrades, Galore

Docs! Docs! Docs! Documentation never ends.

Use GitHub Actions to Generate the Release, Upload the Zip File and Publish to npm

This isn’t visible to end users, but we’re now using Actions to generate the GitHub release, generate and upload the zip file and then publish the package to npm. Previously we were just publishing to npm.

All I need to do is tag the release on the command line, push the tag to GitHub and the Action takes care of the rest. This ensures consistency with the download package and automates a lot of manual steps. One of the most common issues withe releases over the years has been problems with the download file, so this ensures that the download package will be consistent from release to release.

I’m looking to do a few more things with Actions over the next couple of months across different H5BP projects. I’ll be sure to write it up here when I do interesting things.


One final note before I sign off. I added Christian Oliff to the maintainer line on the site with this release. Christian has been a great asset to the project over the years so I wanted to acknowledge how important his contributions have been. Without his attention to detail I’d be an absolute mess and the project would be in a very different place. Kudos to him for everything he’s done.

Filling the Void Part 1: Random Projects and SSL via Let’s Encrypt

As I mentioned last month, my last long-term project ended in December. Between the holidays and then two separate instances of thinking I had something lined up and it falling through, I’ve only been working part-time over the past few weeks. While I’d prefer to be working full time (please reach out if you’re looking for help with anything) I have made myself useful over the past few weeks with side-projects and tinkering with new technology. I figured it might be fun to go through some of what I’ve been up to. This is the first of two posts detailing what I’ve done on my “winter break.”

SSL with Let’s Encrypt

One of my favorite projects has been switching several of my domains over to HTTPS using the free certs from Let’s Encrypt. I was really excited when my long-time host, FutureQuest announced support for Let’s Encrypt, including automatic updates. I love that this free path to secure communication exists and was excited to take advantage of it when my host offered it. Paying a one-time $25 setup fee is a lot better than the cost of an SSL certificate.

I was worried about what the drive to encryption by Google and others would do to smaller web publishers and businesses. I understand the need for and heartily support encrypted communication across all channels, I just hated the idea that small-fry publishers would get punished (in search ranking, etc.) for being insecure when the cost would be prohibitive for many publishers. Let’s Encrypt removes that monetary hurdle. Great stuff.

Futurequest’s implementation was pretty easy so the only difficulty was in getting WordPress working well with SSL (all three sites so far have been WordPress.) Generally, that was okay. A clean WordPress install is fine, but once you get into a real-world installation things get icky. Every migration included at least one instance where the site in question completely blew up because of one plugin or another. The good news is I was able to work around all those issues pretty easily (deleting plugins is especially easy) and am now running up and running on HTTPS on three of my sites.

Pretty sweet.

Time for a Refresh

One of the earliest projects I worked on was a refresh of the $100,000 Club and the All Time Record Comic Book Sales SVG visualization (a scatter plot.) Both of those projects are on Angular 1 and going back and updating them several years later was a lot of fun. I’d had a few things I wanted to do with the visualization for a few years and I jumped at the chance to implement them. It’s much nicer under the hood now.

All that code is on github.

Random Projects

As the above indicates, I do a lot of comic book related research and code. I have continued to document the Edgar Church Collection and have also started to document other named comic book collections. Free data for comic book people.

I’d like to do something interesting with the Edgar Church data this year. We’ll see what I come up with.


That’s round one. Round two, with Angular 2, React and Auerlia, will drop sometime next week.