Neumorphism and CSS
March 20th, 2020
Neumorphism (aka neomorphism) is a relatively new design trend and a term that’s gotten a good amount of buzz lately. It’s aesthetic is marked by minimal and real-looking UI that’s sort of a new take on skeuomorphism — hence the name. It got its name in a UX Collective post from December 2019, and since…
React Suspense in Practice
March 19th, 2020
This post is about understanding how Suspense works, what it does, and seeing how it can integrate into a real web app. We’ll look at how to integrate routing and data loading with Suspense in React. For routing, I’ll be using vanilla JavaScript, and I’ll be using my own micro-graphql-react GraphQL library for data. If…
First Public Working Draft: RTC Accessibility User Requirements (RAUR)
March 19th, 2020
The Accessible Platform Architectures (APA) Working Group with the Research Questions Task Force (RQTF) has published a First Public Working Draft of the Working Group Note RTC Accessibility User Requirements (RAUR). RAUR outlines user needs, requirements, and scenarios for real-time communication (RTC) to be accessible to people with disabilities. Accessible telecommunication technology is increasingly important…
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….
DOM Review Draft 18 June 2019 Endorsed as a W3C Candidate Recommendation
March 17th, 2020
As part of working with the WHATWG together on HTML and DOM, W3C selected today to endorse the first WHATWG DOM Review Draft as a Candidate Recommendation. DOM defines a platform-neutral model for events, aborting activities, and node trees. This document is published for purposes of patent review by WHATWG Workstream Participants and as a…
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…
Build a Node.js Tool to Record and Compare Google Lighthouse Reports
March 16th, 2020
In this tutorial, I’ll show you step by step how to create a simple tool in Node.js to run Google Lighthouse audits via the command line, save the reports they generate in JSON format and then compare them so web performance can be monitored as the website grows and develops. I’m hopeful this can serve…