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…

clipPath vs. mask

December 27th, 2020

These things are so similar, I find it hard to keep them straight. This is a nice little explanation from viewBox (what a cool name and URL, I hope they keep it up). The big thing is that clipPath (the element in SVG, as well as clip-path in CSS) is vector and when it is…