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…

Responsible, Conditional Loading

December 25th, 2020

Over on the Polypane blog (there’s no byline but presumably it’s Kilian Valkhof (it is)), there is a great article, Creating websites with prefers-reduced-data, about the prefers-reduced-data media query. No browser support yet, but eventually you can use it in CSS to make choices that reduce data usage. From the article, here’s one example where…

Integrating TypeScript with Svelte

December 24th, 2020

Svelte is one of the newer JavaScript frameworks and it’s rapidly rising in popularity. It’s a template-based framework, but one which allows for arbitrary JavaScript inside the template bindings; it has a superb reactivity story that’s simple, flexible, and effective; and as an ahead-of-time (AOT) compiled framework, it has incredibly impressive perf, and bundle sizes….

Custom Styles in GitHub Readme Files

December 23rd, 2020

Even though GitHub Readme files (typically ./ are Markdown, and although Markdown supports HTML, you can’t put <style> or <script> tags init. (Well, you can, they just get stripped.) So you can’t apply custom styles there. Or can you? You can use SVG as an <img src=”./file.svg” alt=”” /> (anywhere). When used that way, even…

Edge Everything

December 22nd, 2020

The series is a wrap, my friends! Thanks for reading and a big special thanks to all the authors this year who shared something they have learned. Many authors really swung wide with thoughts about how we can be better and do better, which, of course, I really love. Adam showed us logical properties and,…