Artboard 16light, inspiration, solution, idea, innovation,Google Sheets iconSwift icon
Back to site

Learn something new every week!

Sign up to start every week with quick to read Web Development learnings, productivity tricks, useful GitHub projects, #devsheets and music that keeps you going.

Join 1967 subscribers today!

Prefer RSS? Go to my feeds page to pick what you're interested in.

What other people say

Chris Ashton Twitter profile picture
I'm a web developer of around 12 years experience, but I just learned three things from a single issue of @stefanjudis' excellent newsletter.
Chris Ashton, Senior Developer @GDSTeam, Twitter
Eva Dee's profile pictuer.
Stefan's newsletter is the one newsletter I actually read on the day it gets in - instead of bookmarking it under MUST_READ and never getting around to doing that... I always learn something, whether it be about tech or how to be a more productive, effective, and inclusive developer. <3
Eva Dee, Software Developer, includeJS.dev
Wojtek Jeremy Połowniak Twitter profile picture.
I love @stefanjudis latest initiative - weekly newsletter, its already 8th issue helps me to stay up to date with newest features and cool practices - and is, generally speaking - awesome!
Wojtek Jeremy Połowniak, Senior Fullstack Engineer, Twitter
Antodev Twitter profile picture
My new Monday morning routine is @stefanjudis weekly newsletter. You should read it. ♥️
@antodev89, Software Developer, Twitter

Last newsletter

Stefan's web weekly.

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

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! 🎉 👋

View all past newsletters