Menu

HTML

A Complete State Machine Made With HTML Checkboxes and CSS

November 27th, 2020

State machines are typically expressed on the web in JavaScript and often through the popular XState library. But the concept of a state machine is adaptable to just about any language, including, amazingly, HTML and CSS. In this article, we’re going to do exactly that. I recently built a website that included a “no client…

Three Things You Didn’t Know About AVIF

November 26th, 2020

AVIF, the file format based on the AV1 video codec, is the latest addition to the next-gen image formats. Early reports and comparisons show good results compared to JPEG and WebP. However, even if browser support is good, AVIF is still on the bleeding edge in regards to encoding and decoding. Encoding, decoding, settings and…

Rendering Spectrum

November 24th, 2020

Here are the big categories of rendering websites: Client: ship a <div id=”root”></div> and let a JavaScript template render all of it. Static: pre-render all the HTML. Server: let a live server process requests and generate the HTML response. They are not mutually exclusive. A website could statically pre-render 75% of it’s pages (say, blog…

A Dynamically-Sized Sticky Sidebar with HTML and CSS

November 20th, 2020

Creating page content that sticks to the viewport as you scroll, something like a jump-to-anchor menu or section headings, has never been easier. Throw a position: sticky into your CSS ruleset, set the directional offset (e.g. top: 0) and you’re ready to impress your teammates with minimal effort. But sticky positioning can get a bit…

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>….

SVGBOX

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…