Menu

HTML

Jumping Into Webmentions With NextJS (or Not)

June 3rd, 2020

Webmention is a W3C recommendation last published on January 12, 2017. And what exactly is a Webmention? It’s described as… […] a simple way to notify any URL when you mention it on your site. From the receiver’s perspective, it’s a way to request notifications when other sites mention it. In a nutshell, it’s a…

A Guide to the Responsive Images Syntax in HTML

May 26th, 2020

This guide is about the HTML syntax for responsive images (and a little bit of CSS for good measure). The responsive images syntax is about serving one image from multiple options based on rules and circumstances. There are two forms of responsive images, and they’re for two different things: If your only goal is… Increased…

Using Structured Data to Enhance Search Engine Optimization

May 26th, 2020

SEO is often considered the snake oil of the web. How many times have you scrolled through attention-grabbing headlines on know how to improve your SEO? Everyone and their uncle seems to have some “magic” cure to land high in search results and turn impressions into conversions. Sifting through so much noise on the topic…

Radio Buttons Are Like Selects; Checkboxes Are Like Multiple Selects

May 20th, 2020

I was reading Anna Kaley’s “Listboxes vs. Dropdown Lists” post the other day. It’s a fairly straightforward comparison between different UI implementations of selecting options. There is lots of good advice there. Classics like that you should use radio buttons (single select) or checkboxes (multiple select) if you’re showing five or fewer options, and the…

List Style Recipes

May 5th, 2020

Lists are a fundamental part of HTML! They are useful in things like blog posts for listing out steps, recipes for listing ingredients, or items in a navigation menu. Not only are they an opportunity for styling, but they have accessibility implications. For example, the number of items in a list is announced in a…

Some Innocent Fun With HTML Video and Progress

April 30th, 2020

The idea came while watching a mandatory training video on bullying in the workplace. I can just hear High School Geoff LOL-ing about a wimp like me have to watch that thing. But here we are. The video UI was actually lovely, but it was the progress bar that really caught my attention – or…

How to Redirect a Search Form to a Site-Scoped Google Search

April 28th, 2020

This is just a tiny little trick that might be helpful on a site where you don’t have the time or desire to build out a really good on-site search solution. Google.com itself can perform searches scoped to one particular site. The trick is getting people there using that special syntax without them even knowing…

SVG, Favicons, and All the Fun Things We Can Do With Them

April 24th, 2020

Favicons are the little icons you see in your browser tab. They help you understand which site is which when you’re scanning through your browser’s bookmarks and open tabs. They’re a neat part of internet history that are capable of performing some cool tricks. One very new trick is the ability to use SVG as…

Front-End Challenges

April 17th, 2020

My favorite way to level up as a front-end developer is to do the work. Literally just build websites. If you can do it for money, great, you should. If the websites you make can help yourself or anyone else you care about, then that’s also great. In lieu of that, you can also make…

Better Form Inputs for Better Mobile User Experiences

April 17th, 2020

Here’s one simple, practical way to make apps perform better on mobile devices: always configure HTML input fields with the correct type, inputmode, and autocomplete attributes. While these three attributes are often discussed in isolation, they make the most sense in the context of mobile user experience when you think of them as a team….