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 ./readme.md) 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,…