Menu

The WebAIM Million—Updated

April 8th, 2020

This report made a big splash last year. It’s a large chunk of research that shows just how terribly the web does with accessibility. It’s been updated this year and (drumroll…) we got a little worse. I’ll use their blockquote: The number of errors increased 2.1% between February 2019 and February 2020. From the choir:…

CSS Findings From The New Facebook Design

April 7th, 2020

Ahmad Shadeed digs around the new Facebook’s front-end code. One that stood out to me: .element { inset: 4px 0; /* Which is equivalent to: top: 4px, bottom: 4px, left: 0, right: 0 */ } Whaaat? This is the first I’ve heard of the inset property. Ahmad said he saw it working in Chrome 80,…

A Grid of Logos in Squares

April 6th, 2020

Let’s build a literal grid of squares, and we’ll put the logos of some magazines centered inside each square. I imagine plenty of you have had to build a logo grid before. You can probably already picture it: an area of a site that lists the donors, sponsors, or that is showing off all the…

Some Typography Links

April 3rd, 2020

I just can’t stop bookmarking great links related to typography. I’m afraid I’m going to have to subject you, yet again, to a bunch of them all grouped up. So those of you that care about web type stuff, enjoy. I know there are lots of good reasons to be excited about variable fonts. The…

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…

A Few Background Patterns Sites

March 18th, 2020

If I need a quick background pattern to spruce something up, I often think of the CSS3 Patterns Gallery. Some of those are pretty intense but remember they are easily editable because they are just CSS. That means you could take these bold zags and chill them out. CodePen Embed Fallback My usual go-to through…

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…

A Complete Guide to calc() in CSS

March 17th, 2020

CSS has a special calc() function for doing basic math. Here’s an example: .main-content { /* Subtract 80px from 100vh */ height: calc(100vh – 80px); } In this guide, let’s cover just about everything there is to know about this very useful function. calc() is for values The only place you can use the calc()…

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

CSS X

March 16th, 2020

My name appears in an article from Bert Bos (co-author of the original CSS spec), so I’ll consider that a life accomplishment. Bert makes the point that CSS has evolved and the working group versions things, but the working group hasn’t been and doesn’t really plan to be involved in these big named banner releases…