Menu

HTML

SVG, Favicons, and All the Fun Things We Can Do With Them

April 24th, 2020

Favicons are the little icons you see in your browser tab. They help you understand which site is which when you’re scanning through your browser’s bookmarks and open tabs. They’re a neat part of internet history that are capable of performing some cool tricks. One very new trick is the ability to use SVG as…

Front-End Challenges

April 17th, 2020

My favorite way to level up as a front-end developer is to do the work. Literally just build websites. If you can do it for money, great, you should. If the websites you make can help yourself or anyone else you care about, then that’s also great. In lieu of that, you can also make…

Better Form Inputs for Better Mobile User Experiences

April 17th, 2020

Here’s one simple, practical way to make apps perform better on mobile devices: always configure HTML input fields with the correct type, inputmode, and autocomplete attributes. While these three attributes are often discussed in isolation, they make the most sense in the context of mobile user experience when you think of them as a team….

Learn Eleventy From Scratch

April 7th, 2020

The latest edition of Andy Bell’s Piccalilli landed in my inbox this morning with a sweet offer: preorder Andy’s course on learning Eleventy from scratch at a third of the price. Why the plug? No, not sponsorships or anything like that. I just happen to hear a heckuva lot about Eleventy these days. Like how…

Why Do Some HTML Elements Become Deprecated?

April 2nd, 2020

The internet has been around for a long while, and over time we’ve changed the way we think about web design. Many old techniques and ways of doing things have gotten phased out as newer and better alternatives have been created, and we say that they have been deprecated. Deprecated. It’s a word we use…

How to build a bad design system

March 31st, 2020

I didn’t realize this until it was far too late, but one of the biggest mistakes that are made on a design systems team is a common mismanagement issue: there are too many people in a meeting and they have too many dang opinions. Is there a conversation about the color of your buttons that’s…

Creating a Pencil Effect in SVG

March 28th, 2020

Scott Turner, who has an entire blog “Exploring procedural generation and display of fantasy maps”, gets into why vector graphics seems on these surface why it would be bad for the look of a pencil stroke: Something like this pencil stroke would require many tens of thousands of different elements.  Basically each little blob of…

What Does `playsinline` Mean in Web Video?

March 18th, 2020

I got myself confused about this the other day, went around searching for an answer and came up empty on finding something clear. The answer actually is quite clear and I feel a little silly for not knowing it. With it in place, like this: <video src=”…” controls playsinline></video> Mobile browsers, will play the video…

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>…