Painters Tape and Fault Tolerance
January 8th, 2021
Snipping the top bit of Nicholas C. Zakas’s Top of the Month newsletter (go sign up!), with permission. One of my favorite things in the world is painter’s tape (also called masking tape). It seems like something silly: some tape you put on a wall when you’re painting to avoid getting paint on the wall….
Creating CSS APIs without JavaScript With the datasette-css-properties plugin
January 7th, 2021
Simon Willison has a project called Datasette, an open-source multi-tool for exploring and publishing data. I’m not sure I’m qualified to explain it, but it’s like a tool to make handling data easier and doing more — through the web — with data you have. Like making that data queryable and giving it an API….
Custom Properties as State
January 5th, 2021
Here’s a fun idea from James Stanley: a CSS file (that presumably updates daily) containing CSS custom properties for “seasonal” colors (e.g. spring is greens, fall is oranges). You’d then use the values to theme your site, knowing that those colors change slightly from day to day. This is what I got while writing this:…
Creating Arrays in Hasura
January 4th, 2021
Hasura is one of my favorite ways to create a managed GraphQL API for my applications. I find it easy and straightforward as well as suitable for a wide range of use cases. However, since working with Hasura, I’ve seen the same question come up again and again: how should we make an array? Given…
The End of Adobe Flash
January 4th, 2021
I come to bury Flash, not to praise it, writes Matt May in this excellent thread about the end of Adobe Flash. Not so long ago, web designers used Flash to create striking visuals and animations, and games. But shortly after that, it began to replace HTML and CSS which caused a ton of accessibility…
Give your Eleventy Site Superpowers with Environment Variables
December 31st, 2020
Eleventy is increasing in popularity because it allows us to create nice, simple websites, but also — because it’s so developer-friendly. We can build large-scale, complex projects with it, too. In this tutorial, we’re going to demonstrate that expansive capability by putting together a powerful and human-friendly environment variable solution. What are environment variables? Environment…
Design v18
December 29th, 2020
I redesigned the site! I can never think about the word redesign without also thinking about realigning, from Cameron Moll’s seminal article. I did not start from nothing. This design wasn’t a blank design canvas and empty code editor thing. I doubt any future redesign will be either. I started with what we already had…
Simulating Drop Shadows with the CSS Paint API
December 29th, 2020
Ask a hundred front-end developers, and most, if not all, of them will have used the box-shadow property in their careers. Shadows are enduringly popular and can add an elegant, subtle effect if used properly. But shadows occupy a strange place in the CSS box model. They have no effect on an element’s width and…
Accessible SVG Icons
December 28th, 2020
The answer to “What is the most accessible HTML for an SVG icon?” isn’t one-size-fits all, because what an icon needs to do on a website varies. I’m partial to Heather Migliorisi’s research on all this, but I can summarize. Extremely quickly: hide it if it’s decorative, title it if it’s stand-alone, let the link…
Create a Tag Cloud with some Simple CSS and even Simpler JavaScript
December 28th, 2020
I’ve always liked the tag clouds. I like the UX of seeing what tags are most popular on a website by seeing the relative font size of the tags, popular tags being bigger. They seem to have fallen out of fashion, though you do often see versions of them used in illustrations in tools like…