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

Converting and Optimizing Images From the Command Line

December 21st, 2020

Images take up to 50% of the total size of an average web page. And if images are not optimized, users end up downloading extra bytes. And if they’re downloading extra bytes, the site not only takes that much more time to load, but users are using more data, both of which can be resolved,…