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.


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.

Help Wanted: Please Test the New @h5bp Ant Build Script Image Optimization Flow

I reworked the way images are optimized in the Ant Build Script. After all the work I’d done to get it to 1.0 I discovered that a lot of the features we added to the image optimization process, coupled with a few hacks I threw in there myself, had made the image optimization tasks wonky on the Mac and on Linux. To that end, I reworked them, making them much simpler logically. I think the new changes are pretty foolproof (me, being the fool) but I need as many people as possible to test it to make sure I’ve really solved the problem. With these image issues fixed, I would release 1.1.0 and then sit back and see how things go. I’m really looking at getting the project to a nice stable place where I can just let it chill out and do its thing without me worrying about having stupid open bugs staring me in the face.

Which is where I am now.

Anyway, the branch is new-image-optimization.

To test you need some PNGs and JPGs in the img folder in an HTML5 Boilerplate structured project. Importantly, you need to test your version of OptiPNG. If it’s less than 0.7.0 and you can’t upgrade for some reason* you need to uncomment line 189 in your If it’s above, just run ant and holler if your images aren’t getting optimized.

This is the issue to track issues with the new flow.

If this works, I can close like 6 bugs and release the patch** version. Which is the bee’s knees.

* This is some Mac thing. I’ve never quite understood why people just can’t upgrade their tools, but apparently something about the Mac stops you from being able to update a stupid little utility.
** I’m wondering if this should be a minor version since there’s a lot of “private” code rewritten to change the image optimization flow. 1.1.0? Maybe.

H5BP Ant Build Script v1.0 Released

After a year of living as its own repo, contributions from a bunch of people and a flurry of activity from yours truly over the past month*, I just released the 1.0 version of the H5BP Ant Build Script.

Download a zip or browse the code on github.

Moving to semantic versioning was a good idea by itself and it also served as a perfect opportunity to celebrate the features we’ve been able to add over the past year.

Check out these highlights from the changelog:

– Added support for SASS (*.scss) files (#71)
– Added optional jsdoc3 task (#70)
– Added option to compile LESS CSS (#56)
– Concatenate scripts in order they appear in the HTML (#6)
– Added requireJS support (#18)
– Added sample QUnit Task (#133)
– Added ability to opimize images in multiple directories
– Added advpng optimization (#84)
– Added optional image revving (#135, #3)
– Rewrite relative CSS asset urls when inlining @import calls (#2)
– Added HTML Validation (#27)
– Added new, configurable tokens for concatenation (#95)
– Added async and defer as separate options on the script. (#128)
– Added optional progressive jpeg conversion

I also touched up the documentation and generally made it feel more like a project.

Here’s the big contributor party. This is everyone who’s touched this project from the beginning (including its life as part of the core HTML5 Boilerplate project.)

All these people are awesome:

[master]> git shortlog -s -n
   115  Rob Larsen
    84  Paul Irish
    31  Divya Manian
    14  paulirish
    13  Shi Chuan
    11  darktable
    10  Matthew Donoughe
    10  Samus_
     8  Joe Morgan
     6  Andreas Marschke
     6  calvin
     5  Chris Rowe
     5  Ziggy
     4  Audioname
     4  Daniel Holth
     4  Guillaume Moulin
     3  Kim Blomqvist
     3  bholt
     3  drublic
     2  Andrew Le
     2  Beau Simensen
     2  Calvin Rien
     2  Dan Lopretto
     2  Daniel Filho
     2  John Bacon
     2  Kushal Pisavadia
     2  Maurice W
     2  Ramiro Rikkert
     2  See Guo Lin
     2  Steve Lindstrom
     2  Tarcio Saraiva
     2  alvincrespo
     2  gbakernet
     1  AD7six
     1  Aaron Kavlie
     1  Adrien Kohlbecker
     1  Alex Whitman
     1  Brandon Holtsclaw
     1  Bruno De Barros
     1  Chris Hager
     1  Chris Morrell
     1  Corey Ward
     1  Daniel Reiser
     1  Dave Kirk
     1  Dmitry Gladkov
     1  Egor Kotlyarov
     1  Greg Zoller
     1  Gregory Pakosz
     1  Hans
     1  Jeremey Hustman
     1  John Attebury
     1  Josh Farneman
     1  Kyle Robinson Young
     1  Martin Balfanz
     1  Nic Pottier
     1  Nicholas Camp
     1  Nicolas Gallagher
     1  Robert Doucette
     1  Rutger de Knijf
     1  Taylor Ralston
     1  Tharique Azeez
     1  Thomas Kahn
     1  crappish
     1  d8uv
     1  dplesca
     1  elexx
     1  localpcguy
     1  mikemorris
     1  mikkotikkanen
     1  owilliams
     1  philipvonbargen
     1  rdeknijf
     1  rwldrn
     1  toddhgardner

*yes, I have a funny way of celebrating having a life again.

Recent Reading (JS Natives Duke it Out, Regexp in jQuery, Performance, a New Image Format?)

Sorry, it’s been a while. I’ve been busy at work, I’ve been wringing every last bit out of summer on my bike, and I’ve spent a lot of my free time on my upcoming CSS presentation, so I haven’t been posting as much as I would like. Fall is here. Which means I should have more time for writing. That’s cool.

Anyway, to break the ice here are a few articles that have recently caught my attention.
Continue reading “Recent Reading (JS Natives Duke it Out, Regexp in jQuery, Performance, a New Image Format?)”

Ant. Ant? Really?

Quick, if you were to guess a technology I’d be making commits on an open source project using, would Apache Ant be at the top of the list? I didn’t think so. But yet, here I am committing an Ant Build script to Paul’s excellent HTML5 Boilerplate project. It makes sense since I’ve done work on concatenation, minification and other performance enhancements using Ant, but it’s still a weird technology to be contributing to such a cool project with…

Continue reading “Ant. Ant? Really?”