Tools for Optimizing SVG

March 17th, 2020

Command Line Tools The biggest (and maybe only?) player in this space: SVGO. It’s even used under the hood of other tools. Using with a Task Runner grunt-svgmin gulp-svgmin gulp-svgo svgo-loader (webpack) Desktop Apps ImageOptim (macOS) macOS “folder action” Before macOS 10.15 Catalina, you could use SVGO GUI, but it’s 32-bit which makes it obsolete….

Block Links Are a Pain (and Maybe Just a Bad Idea)

March 10th, 2020

As we noted in our complete guide, you can put an <a href=””> link around whatever chunks of HTML you like. Let’s call that a “block link.” Like you are wanting to link up an entire “Card” of content because it makes a big clickable target. <a href=”/article/”> <!– display: block; –> <div class=”card”> <h2>Card</h2>…

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…