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…

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…