Web Weekly #47

Happy Monday, party people! 👋

This week has been a rollercoaster! I discovered that Natalie Imbruglia's "Torn" is a cover, jumped into a massive JavaScript ecosystem rabbit hole (including skypack, snowpack, rollup and esbuild – more to come), and received some beautiful npom stickers. It's been a good week, and I hope you had a good one, too!

This week's Web Weekly includes:

  • The outdated video element
  • Accessibility warnings in browser dev tools
  • color-scheme in CSS and HTML

... and, as always, GitHub repositories, a new Tiny Helper and some music.

Something that made me smile

Stefan's character rendered as checkboxes

Did you ever want to render images as HTML checkboxes? Me neither, but I have to say, doing so makes me happy!

"Checkbox" yourself

Quick links

Do we need a better video element?

The HTML video element needs to go back on the drawing board

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!

Think about videos

"Every project CSS"

Recently, I've been using my own custom CSS reset. It includes all of the little tricks I've discovered to improve both the user experience and the CSS authoring experience.

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.

Include some base styles

Lovely little websites

Pixal art showing a ventilator pointed to a lion

I loved Cosima Mielke's collection of creative websites. Her post includes countless sites that make the web so beautiful!

Discover some good stuff

It's all about the "fried ratio"

Fried potatoes including wedges, fries and chips

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 canvas element.

See some 3D magic

Accessibility warnings in Edge developer tools

Edge elements panel highlighting accessibility issues

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!

See more a11y warnings

A suspicious npm command

npm birthday command logging "npm ERR! Please try again in 26232975127ms"

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.

Learn more about "npm birthday"

How to get around paywalled articles

Show me a 10ft paywall, I’ll show you a 12ft ladder.

I haven't tried 12ft.io yet, but it claims to make paywalled articles accessible. It's worth a try.

Break some article paywalls

Fascinating number facts

The key lies in the curious truth that the result of the subtraction of two numbers that have the same digits where one is a scrambled version of the other is always going to be a multiple of 9.

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 9.

(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?).

Level up your party game

Vanilla CSS entrance animations

So, I put together a set of CSS utilities for animating elements as they enter into view. And, yes, this pure CSS. It not only has a nice variety of animations and variations, but supports staggering those animations as well, almost like a way of creating scenes.

Creating CSS Animation is tough. That's maybe why a lot of people go for JavaScript solutions to add some website delight. Neale Van Fleet shared how to animate elements without any JavaScript. I'm down!

Animate some entrances

Til recap: Dark mode and color-scheme

color-scheme in CSS

Firefox 96 will come with color-scheme support. 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!

Define your color scheme

If you learned something, no matter if small or big, old or new, documented or not, I'd love to include more learnings in this newsletter. Send me an email, and I'm happy to share your discovery!

Three valuable projects to have a look at

A new Tiny Helper

svgco.de - an app to transform pixel graphics into SVG

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!

Vectorize everything

Find more single-purpose online tools on tiny-helpers.dev.

A quote to think about

This week I learned that Natalie Imbruglia's song "Torn" is a cover. 🤯 This YouTube comment is too real!

Every "90s kid" comes of age 3 times: 18th birthday, 21st birthday, the day they find out Natali Imbruglia's version of "Torn" is a cover.

A song that makes you stop coding

Thieves (Klaves Remix)

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.

Listen to "Thieves"

Thank you for reading!

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. ♥️

If you're not a subscriber, you can change that! 😉

Stay safe, and I'll talk to you next week! 🎉 👋