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.
