Let's Build the Web We Want
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.
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:
npx,npm init or yarn createThe 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:
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.
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.
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.
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.
true in Google Analytics SnippetChristian 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.
My least favorite part of the project was removed.
We updated Modernizr to 3.11.2 (they’ve been busy!) and main.css to 2.1.0.
Docs! Docs! Docs! Documentation never ends.
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.
News flash! Both Mastering SVG and The HTML and CSS Workshop are available as eBooks for $5 starting today.
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.”
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.
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.
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.
Look! I’m back! I may end up writing here more often that I have over the past couple of years as I’m significantly cutting back on the amount of time I spend on Twitter. If you’ve enjoyed me saying “get off my lawn” on Twitter over the past few months, you’ll have to come here to read those thoughts. There is the benefit of paragraphs and formatting on the site, so there’s that. If you’re curious what the hell I’m talking about, this tweet-storm is a great example. That kind of stuff will live here now, if the mood strikes me.
The mood has struck! Read on!
I just finished up a long-term consulting gig and, while I’m kicking off a shorter-term a project for another long-term client, I’m also looking to set up my next big project. That’s the big question for me right now- what am I going to be doing for 2017?
As part of that process, I’m finally going to do a deep dive into Angular 2. I worked with it a little bit at my last client, but that’s not really enough for me to really feel like I know it. People are interested in it. I’m interested in it. So… I’m looking at it.
I’m starting with Switching to Angular 2. I’ve got a bunch of Angular 1.* experience so a book written for people looking to move from 1 to 2 seems like a decent place to start.
Between the book and the exposure I had to it on my previous project, my initial take is that it feels like everything that’s right and wrong about the web all wrapped up into one package.
It’s “right” in that it’s really well put together. The general framework architecture combined with the use of TypeScript make it a very compelling alternative for certain types of applications and teams. Like Angular 1 before it, it works for me for some things.
It’s “wrong” in that it’s just ridiculous. It doesn’t make sense for most of what people actually need to do on the web.
Modern web development is generally too damn complicated for its own good. That complexity is heightened by the interconnected, patchwork nature of modern front end development. If you buy into this mode of development you are relying on a matrix of software that no human could possibly vet. You’re basically acknowledging you’re going to live with random bugs, dependency issues, and reams of alpha software you’re supposed to trust going into production.
Angular 2 is exactly that.
On my first project with Angular 2, I experienced weeks of flaky builds as the development landscape shifted randomly underneath us. Many dependencies were also flaky and/or barely maintained. So much fun! Once the builds stabilized, I was flabbergasted to take a look at how much code was required to run the application. node_modules had over 1000 dependencies and our main.bundle.js was over 4.5MB. This was for a read-only application. It didn’t even do anything. I can’t help but think that’s ridiculous. For complicated, large-scale applications I can see the benefits, but for something simple… holy cow that’s a lot of code to solve the kinds of problems I was able to solve with a few hundred KB of pure JavaScript in 2006.
More on it as I get deeper into this dive.
On a final, related note, I’m really interested in exploring a way to marry the best of modern web development with a more stable, accessible (in both senses) and minimalist approach. There’s got to be something more appropriate for smaller applications and general “web” development.