New HTML5 Boilerplate Template Repository

Posted on by Rob Larsen

Hey! It’s been a while. Sorry! I’m going to have a lot more content to share over the next few months, so get used to me writing again.

Anyway, we’re in the middle of creating HTML5 Boilerplate 9.0. As part of that release we have created a Github template repository.

As GitHub wrote when they unveiled the feature

Sharing boilerplate code across codebases is a constant pattern in software development. Bootstrapping a new project with our favorite tools and directory structures helps programmers go from idea to “Hello world!” more efficiently and with less manual configuration.

Today, we’re excited to introduce repository templates to make boilerplate code management and distribution a first-class citizen on GitHub. To get started, all you need to do is mark a repository as a template, and you’ll immediately be able to use it to generate new repositories with all of the template repository’s files and folders.

With all the mentions of “boilerplate” it’s like template repos were made for HTML5 Boilerplate. Nice.

Using them is pretty simple.

First, navigate to h5bp/html5-boilerplate-template. Once there, click on the “Use this template”

Next, you add the name you would like to use:

And that’s it. You’ve got a fresh repo with all the files from HTML5 Boilerplate ready to go.

That’s just a taste of the changes on offer. I’ll have more news as we get closer to the final release. I would love to have this release out before 2021 is over. We’ll see!

Since I Can’t Check in, in Person- Here’s Where I’m At and What I’m Working on in 2021

Posted on by Rob Larsen

While things should be getting better soon in terms of seeing people in person again (both here and on the road) we’re not quite there yet. To that end, here’s a quick rundown of where I I am and what I’m up to on the technology front.

Day Job

At present, I work for Eaton Vance as a software architect. I say at present, because we were purchased by Morgan Stanley so at some point in the near future I’ll be an employee of Morgan Stanley. That will be different. I’m just not sure how it will differ. I’ve been at EV for over 3 years now, so this is more uncertainty that I expected to be having on the job front. We’ll see how it goes. I’m cautiously optimistic.

Books

I’ve got two newish books for sale, Mastering SVG and The HTML and CSS Workshop, and one older book with evergreen content, Beginning HTML and CSS. Check them out if you’d like to learn about SVG or HTML and CSS.

Additionally, I’ve been wanting to write a book on Git and GitHub for a while now and may find time to pick that up over the next few weeks. I’ll be self-publishing it*. I’ll have more news as soon as it feels real.

*If anyone wants to publish a book by me on Git and GitHub, that would be fine, too. I just would like to try self-publishing.

Open Source

I’m still managing the h5bp organization, 135,000+ stars and counting, and actively managing HTML5 Boilerplate, main.css, and create-html5-boilerplate. I’ve also inherited Front-end-Developer-Interview-Questions. I’ve really got to sort that project out a little bit. It’s still a little messy!

I’d actually be interested in helping out with something outside of that h5bp world. If you’ve got any ideas for something that could use my help or if you would like to help out with one of the above projects, hit me up!

The Only #hacktoberfest Help I Need is Someone to Close Spam #hacktoberfest PRs

Posted on by Rob Larsen

They started before it was even October in the United States and they’ve continue to grow across three of our repos over the past 20 hours. I can’t wait for another month of this!

I really wish I could just opt our org out of this. The main project has 2000+ watchers!

HTML5 Boilerplate 8.0.0 Released

Posted on by Rob Larsen

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.