What to Use Instead of Number Inputs

March 6th, 2020

You might reach for <input type=”number> when you’re, you know, trying to collect a number in a form. But it’s got all sorts of issues. For one, sometimes what you want kinda looks like a number, but isn’t one (like how a credit card number has spaces), because it’s really just a string of numbers….

Inspiring high school students with HTML and CSS

February 21st, 2020

Here’s a heartwarming post from Stephanie Stimac on her experience teaching kids the very basics of web development: […] the response from that class of high school students delighted me and grounded me in a way I haven’t experienced before. What I view as a simple code was absolute magic to them. And for all…

Do This to Improve Image Loading on Your Website

February 19th, 2020

In the video embedded below, Jen Simmons explains how to improve image loading by using width and height attributes. The issue is that there’s a lot of jank when an image is first loaded because an img will naturally have a height of 0 before the image asset has been successfully downloaded by the browser….

A Complete Guide to Data Attributes

February 17th, 2020

Table of Contents Introduction Syntax Styling with data attributes Accessing data attributes in JavaScript Introduction HTML elements can have attributes on them that are used for anything from accessibility information to stylistic control. <!– We can use the `class` for styling in CSS, and we’ve also make this into a landmark region –> <div class=”names”…

Creating a Details Element That Opens But Never Closes

February 14th, 2020

The <details> and <summary> elements in HTML are useful for making content toggles for bits of text. By default, you see the <summary> element with a toggle triangle (▶︎) next to it. Click that to expand the rest of the text inside the <details> element. But let’s say you want to be able to click…

The Three Types of Code

February 3rd, 2020

Every time I start a new project, I organize the code I’m looking at into three types, or categories if you like. And I think these types can be applied to any codebase, any language, any technology or open-source project. Whether I’m writing HTML or CSS or building a React component, thinking about these different…

Full Stack Panic

February 1st, 2020

A new podcast from Sean Fioritto inspired by Joel Califa’s term “Full Stack Anxiety”. … the little voice in your head says … “I should know all of this. Do I even know what I’m doing?” Why do web developers the world over feel like this? There is an episode with Joel talking about it…

Woodworking SVG (and Other Real Life Encounters)

January 27th, 2020

Eric Meyer does his woodworking math in SVG. I’ve been hand-coding SVG schematics to figure out how things should go together, and as a by-product, guide me in both material buying and woodcutting. This might sound hugely bespoke and artisanally overdone, but they’re not that complicated, and as a major benefit, the process has helped…

Going Beyond Automatic SVG Compression With the “use” Element

January 27th, 2020

If you draw your own SVG files or if you download them from the internet, tools like this SVG-Editor or SVGOMG are your friends. Compressing the files with those tools takes only a few seconds and reduces your file size a lot. But if you need to use your SVG inline to animate or interact…

What’s the Difference Between Width/Height in CSS and Width/Height HTML attributes?

January 24th, 2020

Some HTML elements accept width and height as attributes. Some do not. For example: <!– valid, works, is a good idea –> <img width=”500″ height=”400″ src=”…” alt=”…”> <iframe width=”600″ height=”400″ src=”…”></iframe> <svg width=”20″ height=”20″></svg> <!– not valid, doesn’t work, not a good idea –> <div width=”40″ height=”40″></div> <span width=”100″ height=”10″></span> Those attributes are sometimes referred…