Menu

HTML

Responsive Styling Using Attribute Selectors

June 30th, 2020

One of the challenges we face when implementing class-based atomic styling is that it often depends on a specific breakpoint for context. <div class=”span-12″></div> <!– we want this for small screens  –> <div class=”span-6″></div>  <!– we want this for medium screens –> <div class=”span-4″></div>  <!– we want this for large screens  –> It’s common to…

Where Do You Learn HTML & CSS in 2020?

June 19th, 2020

The question of how and where to learn HTML & CSS is a highly reasonable thing to ask. The answer depends on all sorts of things: how serious you are, your current foundation, what other resources are available to you, what you hope to do with what you learn, and how much time you have,…

On Adding IDs to Headers

June 11th, 2020

Here’s a two-second review. If an element has an ID, you can link to it with natural browser behavior. It’s great if headings have them because it’s often useful to link directly to a specific section of content. <h3 id=”step-2″>Step 2</a> Should I be so inclined, I could link right to this heading, be it…

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…