Tag: h5bp

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!

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.

10 Years of HTML5 Boilerplate

Posted on by Rob Larsen

some of the many contributors to HTML5 Boilerplate

While we’re preparing an upcoming release, I didn’t want the day to go by without mentioning that ten years ago today, HTML5 Boilerplate was released. Here’s the story of the project as we wrote it up a few years ago.

The History of HTML5 Boilerplate

Sometime in 2009…

“Wouldn’t it be great if we created a document that would be the starting point for developers?”

The boilerplate was started with the above quote in mind. While at Isobar / Molecular, Paul Irish began combining frequently copied and pasted chunks of code into a single document. The document would consist of basic, low level snippets to be used on upcoming projects. It began building on top of itself throughout each new project. This document was being created around the same time as the Isobar Best Practices.

But first…


The first written evidence of h5bp. See “starting template” at the bottom.

The Isobar / Molecular Standards Doc started in the summer of 2009. Work continued throughout the year. On April 30th, 2010, it went public (original post). Feedback was fantastic and a lot of people started adopting / following the guidelines laid out in this doc.

“Ongoing feedback was great (filling in a little bit since Paul left right after it launched) It was the #1 page on the isobar site forever and would make the rounds once every couple of months with a huge traffic spike as new people discovered it. It was actually very cool to have people come in for interviews and want to work with us because they’d seen the standards doc.” – Rob Larsen

Meanwhile…

The HTML5 Boilerplate was started in Jan 2010 under the name “frontend-pro-template“. Divya Manian and Paul Irish meet during SXSW at Halcyon (the coffee shop with s’mores). This was the first time they met in person to discuss the project, brainstorming was continued back and forth over IM.

On Mar 20, 2010, Divya made the first outside contribution. Up to this point, Adam McIntyre and Rob Larsen had contributed when it was still a Molecular project.

Things are getting hawt in huurrr… so hawt…

April 5, 2010, hawttt pink makes an appearance. Hawttt pink was first seen at Dan Cedarholm’s dribbble.com. The clear choice when choosing something that’s hawttt and sexy and catches your eye, is #FF5E99.

“Some sort of whimsy needs to be a part of every project. But, it’s a bit tricky on a project that will be used by everyone, so the text selection color is a perfect spot for this” – Paul

Paul also gave an early tease about the project to Rey Bango in an interview (skip to 3:15 of the Paul video). Intrigue!

It’s never too early…

wassup sass

May 14th, 2010, the team starts to experiment with Sass. Divya was the catalyst behind this because as she claims.. “Paul does not believe in being an early adopter :P”. But the project settled on using CSS to appeal to a wider audience.

Did you know…

Some of the names for the project that didn’t make the cut:

  • Pro Frontend Template
  • Starting HTML5 Template
  • Markup Zygote

Paul came up with the name HTML5 Boilerplate in the car on the way to his parents house. The project isn’t truly a “boilerplate”. A boilerplate is the bare minimum amount of code needed for a project. H5BP isn’t the bare minimum.

June 2010 Paul leaves Isobar and heads to a little startup called Google.

July 6, 2010 the project name is officially changed to HTML5 Boilerplate

HTML5 Reset-er-um-plate-ish…

The day before H5BP launched, HTML5 Reset went live. The projects had similarities. Divya had been pushing to launch earlier, but the desire for a build script was holding it back. The build script was such an important part of the project, performance, etc.. but the work was underestimated. The launch of HTML5 Reset made the team decide to launch the project without the build script… for now.

“If we wait a week, we lost and all this work was wasted” – Paul.

HTML5 Boilerplate releases…

In Aug 2010, the HTML5 Boilerplate ships. Contributors included: Jonathan Neal, Garowetz, Jdbartlett, Rob Larsen, and Mathias. About 120 watchers initially but not many commits, yet.

Aug. 13th, 2010, Rob kicked off the Ant build script. Even though it’s difficult to introduce Ant, Java and XML to front-end developers, the build script was extremely important. The build script was created with the ySlow and PageSpeed guidelines in mind. Ant was the proper solution.

Shi Chuan starts to contribute.

A mobile home…

Dec 16, 2010 Mobile Boilerplate launched

To infinity and beyond…

Since the launch, the growth has been linear.

Unilever was a major early adopter (where’s the pink bro?), and Twitter’s use in 2010 was huge as well. Because H5BP is a starting point, the project didn’t start showing up in the wild for a few months after the initial release. Many sites, which were currently in production, couldn’t start over and implement H5BP after it launched. But soon, many sites were using it.

As soon as it shipped people began contributing and reporting bugs here and there. GitHub FTW. Steadily The project climbed to the #4 most watched on GitHub. Since the release of Twitter Bootstrap, HTML5BP has settled at #5.

This doc was primarily written by Tony J Camp based on issue 844. Original notes here.

HTML5 Boilerplate 7.3.0 Released

Posted on by Rob Larsen

We just released HTML5 Boilerplate 7.3.0.

In addition to the changes below, we also started using Github Actions to publish our npm package. It was pretty easy. I wrote up the process.

HTML5Boilerplate Changelog

  • Updated to Modernizr 3.8 (2b2bb45)
  • Updated to Gulp 4 (#2151)
  • Updated package.json (#2162) and enabled package-lock.json (abe2087),(#2145)
  • Remove redundant rules from .editorconfig (#2157)
  • Small docs maintenance updates (#2155), (#2164), (#2165), (#2167) & (#2168)
  • Bump lowest supported version of node to 8.x (#2142)
  • Remove .jscsrc config and remove gulp-jscs from package.json (#2153)

Thanks again to Christian Oliff for his work on this release. I continue to appreciate his help on tasks and his attention to detail. I’d be a mess without him on the team.

And, as always, thanks to our many contributors. You are the best!

As always, are you interested in helping out? Check out our current issues, submit an idea for a new feature or look at one of the other H5BP projects to see if there’s something else you’re interested in helping with. It’s fun.

Download the latest from github or install it from npm.

Using Github Actions to Publish the HTML5 Boilerplate npm Package

Posted on by Rob Larsen

We just released HTML5 Boilerplate 7.3.0. As part of that release we integrated Github Actions in order to publish our npm package when we cut a Github release. Doing so was pretty easy. This is how I ended up doing it.

To start, I enabled Github Actions for the repo. To do so check “Enable local and third party Actions for this repository” on the “settings/actions” tab of the repository.

Next, I created a workflows directory inside our .github folder and added a new file called npmpublish.yml

Here’s what that file looks like. It’s based on one of the default Actions that Github provides, conveniently.


name: publish npm

on:
  release:
    types: [published]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - uses: actions/setup-node@v1
        with:
          node-version: 12
      - run: npm ci
      - run: npm run build

  publish-npm:
    needs: build
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - uses: actions/setup-node@v1
        with:
          node-version: 12
          registry-url: https://registry.npmjs.org/
      - run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{secrets.npm_token}}

Let’s go through what it does. The first line gives the action its name. 


name: publish npm

This is the name that will show up in the Actions tab within Github.

The next section indicates that this action should run on a release event, specifically when a release is published. Github releases are basically enhanced git tags and we use them to neatly package up our dist folder for easy consumption as a zip folder. The type property actually accepts a list, but since we’re publishing to npm, we only want to do this when the code is actually released. 


on:
  release:
    types: [published]

The next section contains the jobs that we will run, build and publish.

First up is build. I just used the default runs-on option- ubuntu-latest, since I’m not doing anything particularly fancy. This just means my work will run on a machine running Ubuntu.

Following that are some default Actions:

  • actions/checkout@v1, which checks out your repository, so that your workflow can access the contents of your repository.
  • actions/setup-node@v1, which installs a specific version of node for your project to use. In our case we’re using node version 12.

Finally, with the environment set up, we run two commands. npm ci, which is a continuous integration version of the more familiar npm install command. npm ci uses package-lock.json and some other optimizations to build out node_modules dependencies more quickly than npm install. Then we run npm run build which is our standard build command. That is an alias for gulp build and it generates the contents our our dist folder. 


 build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - uses: actions/setup-node@v1
        with:
          node-version: 12
      - run: npm ci
      - run: npm run build

At this point we’re ready to publish to npm. That happens in our next job, npm-publish. Here we have a new wrinkle, the needs property. This just means that it requires the previous build job to be there before it can run. After that, the setup is similar. It runs on ubuntu-latest, it checks out the code and sets up our node environment. The one change in the environment set-up is that it sets the registry-url to https://registry.npmjs.org/. This is the default, but your organization might have a different private registry. You would set that here.

Finally, we run npm publish which does the actual job of publishing the project out to npm. This is just the standard npm command. This command uses the environment variable NODE_AUTH_TOKEN for authentication. The following section shows how to set up authentication for npm. 


 publish-npm:
    needs: build
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - uses: actions/setup-node@v1
        with:
          node-version: 12
          registry-url: https://registry.npmjs.org/
      - run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{secrets.npm_token}}

To set up a token to use for authentication with npm, first go to npmjs.com/ and open up the tokens page.

Click on the “create new token” button.

Select “read and publish.”

Copy the newly created token.

Head over to Github. Click on “settings” and then “secrets.” Add a new secret. Call it npm_token and then paste in the npm token.

And that’s that. Authentication for npm is set up.

This is just a basic example of what you can do with Github Actions, but was super convenient for me, so I thought it was worth sharing.