esbuild – more to come), and received some beautiful n
pom stickers. It's been a good week, and I hope you had a good one, too!
This week's Web Weekly includes:
- The outdated
- Accessibility warnings in browser dev tools
color-schemein CSS and HTML
... and, as always, GitHub repositories, a new Tiny Helper and some music.
Did you ever want to render images as HTML checkboxes? Me neither, but I have to say, doing so makes me happy!
hsl(from var(--color) h s l)– Relative CSS colors landed in Safari Tech Preview.
- Fun fact:
//is invalid CSS.
- I discovered a bunch of "uncommon" CSS pseudo classes.
With YouTube being the big player, how often do you use the good old
video element? I don't use it at all. Daniel Aleksandersen argues that the element's functionality is lacking what we need; I agree!
Do you have CSS that you include in every project? I don't (but definitely should!). Josh W. Comeau shared and explained his CSS reset approach. It's a good read with many examples.
I loved Cosima Mielke's collection of creative websites. Her post includes countless sites that make the web so beautiful!
Speaking of fun little websites; Chris Williams' "Fry Universe 🍟" explains why you might like some fries more than others. The site comes with fancy 3D models built with the
I argued that browser dev tools should show more accessibility warnings two years ago. I'm delighted to see that Edge keeps innovating and shows accessibility hints right in the elements panel. Good stuff!
Did you know that
npm includes a
birthday command? The command is supposed to be an easter egg, but its source code is obfuscated. The "malicious" code resulted in a GitHub issue discussion worth a read.
I haven't tried
12ft.io yet, but it claims to make paywalled articles accessible. It's worth a try.
The following fact about numbers blew my mind! Pick a random number like
12345, shuffle the digits (
54321) and subtract one from another. The result will always be a multiple of
(12 - 21) / 9 = -1 (345 - 354) / 9 = -1 (54321 - 12345) / 9 = 4664
This trick works for any number! Samuel Bernheim shared how to use this fact for "party math tricks" (everybody loves these, right?).
Firefox 96 will come with
color-scheme allows you to define that your website supports dark and light mode so that browsers can adjust UI controls such as input elements and scroll bars.
If you're shipping dark mode, now's the time to implement a proper color scheme definition!
- jondot/hygen – A simple, fast, and scalable code generator.
- sharkdp/hyperfine – A command-line benchmarking tool.
- weiran-zsd/dts-cli – A zero-config CLI for TypeScript package development.
If you tried to vectorize an image, you might know that there are many tools, but few do a great job creating SVGs. Thomas Steiner released
svgco.de, which will come in handy!
This week I learned that Natalie Imbruglia's song "Torn" is a cover. 🤯 This YouTube comment is too real!
This week's song is a track I'll keep around for next summer. "Thieves" is a nicely rolling house track that caught my ear.
And that's a wrap for the forty-seventh Web Weekly! If you enjoy my newsletter, I'd love you to tell others about it. ♥️
- Share it on Twitter.
- Forward it to someone who might like it.
If you're not a subscriber, you can change that! 😉
Stay safe, and I'll talk to you next week! 🎉 👋