Copyediting with Semantic HTML

November 17th, 2020

Tracking changes is a quintessential copyediting feature for comparing versions of content. While we’re used to tracking changes in a word processing document, we actually have HTML elements capable of that. There are a lot of elements that we can use for this process. The main ones we’ll look at are <del>, <ins> and <mark>….


November 12th, 2020

I’ve been saying for years that a pretty good icon system is just dropping in icons with inline <svg> where you need them. This is simple to do, offers full design control, has (generally) good performance, and means you aren’t smurfing around with caching and browser support stuff. Along those lines… using <img> isn’t the…

Comparing Static Site Generator Build Times

October 28th, 2020

There are so many static site generators (SSGs). It’s overwhelming trying to decide where to start. While an abundance of helpful articles may help wade through the (popular) options, they don’t magically make the decision easy. I’ve been on a quest to help make that decision easier. A colleague of mine built a static site…

Smarter Ways to Generate a Deep Nested HTML Structure

October 20th, 2020

Let’s say we want to have the following HTML structure: <div class=’boo’> <div class=’boo’> <div class=’boo’> <div class=’boo’> <div class=’boo’></div> </div> </div> </div> </div> That’s real a pain to write manually. And the reason why this post was born was being horrified on seeing it generated with Haml like this: .boo .boo .boo .boo .boo…

Styling Complex Labels

October 5th, 2020

Danielle Romo covers the HTML pattern you need when you have a wordy <label> with fancy styling for an <input type=”radio”>. The ol’ <span class=”hidden-visually”> that contains the label that you want to be read, and a <span aria-hidden=”true”> with the visual-only content. CodePen Embed Fallback I think it’s interesting how often people are landing…

The Empty Box

September 23rd, 2020

When I was in high school, we learned about “The Black Box” which is a concept in theater. If memory serves me right, the approach was a simple and elegant one: that you can take any space, any black box, and make it come to life with a story. I liked the idea that it’s…

Editing HTML Like A Boss In VS Code

September 16th, 2020

Here’s a seven minute video from Caleb Porzio that focuses on some of Emmet‘s HTML editing features. You might think of Emmet as that thing that expands abbreviations like table.stats>tr*3>td*3 into glorious, expanded, and perfect HTML. But Emmet has other HTML editing trickery up its sleeve. My favorite is “wrap with abbreviation” (which happens to…

Beyond Media Queries: Using Newer HTML & CSS Features for Responsive Designs

September 4th, 2020

Beyond using media queries and modern CSS layouts, like flexbox and grid, to create responsive websites, there are certain overlooked things we can do well to make responsive sites. In this article, we’ll dig into a number of tools (revolving around HTML and CSS) we have at the ready, from responsive images to relatively new…

A Community-Driven Site with Eleventy: Preparing for Contributions

August 19th, 2020

I’ve recently found myself reaching for Eleventy (aka 11ty) above all other tools when I want to develop a website. It’s hard to beat a static site generator that provides advanced templating opportunities while otherwise getting out of your way and allowing you to just create. One of those sites is Style Stage, a modern…

HTML for Subheadings and Headings

August 6th, 2020

Let’s say you have a double heading situation going on. A little one on top of a big one. It comes up, I dunno, a billion times a day, I’d say. What HTML do you go for? Dare I say, it depends? But have you considered all the options? And how those options play out…