SVG Title vs. HTML Title Attribute

July 30th, 2020

You know the title attribute? I can do this: <div title=”The Title”> I’m a div with a `title` </div> And now if I’m on a device with a mouse pointer and hover the cursor over that element, I get… Which, uh, I guess is something. I sometimes use it for things like putting an expanded…

A Bit on Web Component Libraries

July 28th, 2020

To my mind, one of the best use cases for Web Components is pattern libraries. Instead of doing, say, <ul class=”nav nav-tabs”> like you would do in Bootstrap or <div class=”tabs”> like you would in Bulma, you would use a custom element, like <designsystem-tabs>. The new Shoelace library uses the sl namespace for their components….

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…