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

Guten Tag, my friend!

Do you know that VS Code has a built-in version control system outside of Git? Or that SVG filters can be inlined in CSS? Or that you can soon find all render-blocking resources via JavaScript?

All the answers and much more are included in this week's Web Weekly. πŸ™ˆ Enjoy!

Welcome to the 44 new subscribers! I'm super excited to have you around! πŸ‘‹

Thought of the week

As you may know, I like making lists. πŸ™ˆ

My blog includes multiple link lists, and even my most successful open source project, Tiny Helpers, is just a public list.

Whenever I feel something could be valuable in the future, I just have the urge to put it somewhere. I might need it, right? One could also say this newsletter is just that β€” a list.

And even though I tried Obsidian and Notion, none of these knowledge base systems stuck with me. I prefer the good stuff to be accessible and public.

And while I'm passionate about link lists, I'm constantly failing about life-enhancing lists. Life-what?

Get your work recognized: write a brag document

I love Julia Evans' approach to writing a brag document. The idea is to keep track of all your accomplishments. The compiled list will give you a strong argument when discussing your next promotion.

But should you stop at work-related things?

My list of lists

Mike Crittenden advocates for maintaining many other lists to navigate life.

  • A stress list to tackle the most stressful thing first on the day.
  • A gratitude list to appreciate life.
  • A suck list to know what to fix.
  • A gift ideas list to create great gifts for your loved ones.

Maintaining all these is quite some work and needs a strong habit game, but I'm convinced they're worth it.

And most of them don't belong to the public, so I guess I'll set up Notion a third time now. πŸ€·β€β™‚οΈ

Something that made me smile this week

Tweet from Rach Smith sharing a TikTok with the first lines "when you have a bad day..."

Watch this video when you have a bad day, and everything's too much.🀣

  • Are you up for a new VS Code theme, themes.vscode.one has plenty to choose from.
  • How many ways are there to make tables accessible? w3.org lists three. Do you know them all?
  • OpenInTerminal is a macOS app to open your current Finder directory in your terminal or VS Code.

A web component to create SVG art

A CSS doodle showing some custom code and a generated maze.

This one's wild! Yuan Chuan is building a web component to create SVG art. And this is cool by itself, but while being at it, why not invent a new language leaning on CSS syntax to draw these artsy SVG elements? 🀯 Some people are just awesome!

Doodle away!

Fun with images

Comparison of a foto of a landscape with the original on the left and an applied CSS/SVG filter on the right. The filtered one has a dreamy artsy look.

After discovering Yuan's blog, I started browsing and found this dreamy CSS/SVG blur effect. SVG filters are incredibly flexible and powerful once you understand how they work (I don't πŸ™ˆ).

Dream a little

Fun fact: you can also inline SVG filters in your CSS.

Highlights of the Web Almanac 2022

Tweet: .@HTTPArchive's annual state of the web report β€” the Web Almanac β€” is out!  As every year, I'll give it a read and share interesting facts below...

Every year, the folks behind HTTP Archive come together and analyze the most-visited websites to evaluate the state of the web in their Web Almanac report.

Following my own tradition, I read the report and shared interesting facts on Twitter.

Would you have thought 71% of font-size declarations are still defined in px? Me neither! Discover more fun facts on the blog.

Analyze the state of the web

What would you do if someone pretends to be you

So I previewed the document and it was scary. It was a document intended for someone to have a cheat sheet for an interview on how to act as me.

Connor Tumbleson woke up one day to learn that someone was applying for jobs in his name. And this person also showed up to the job interviews pretending to be him. He went on the mystery hunt to find out what was happening, and it's a thrilling story about a massive scam.

Disclaimer: unfortunately, Connor couldn't solve the puzzle entirely yet.

Watch out for the scams

How to find all render-blocking resources

// get all resources window.performance.getEntriesByType('resource')   // only consider the blocking ones   .filter(({renderBlockingStatus}) =>        renderBlockingStatus === 'blocking')   // log their names   .forEach(({name}) => console.log(name))

So far, inspecting a site and finding render-blocking resources has been challenging because you have to know what you're looking for. But there's help: Chrome 107 (currently in beta) ships with a nifty Resource Timing enhancement!

Discover render-blocking

How to test if a font is available

document.fonts.check('12px ui-serif');

Jim Nielsen went on the journey to find out how to test if Apple's "San Francisco" font is available via CSS. It's an excellent read, even though he had to reach for a JavaScript solution at the end.

Learn more about font support

TIL β€” VS Code saves all saved file versions

Example showing the VS Code timeline and that it's stores all file saving states.

Austin Gil made me rethink one of my VS Code workflows.

Let's say I work on the same file for a while and discover that I deleted a few lines of code, which would come in handy now. Unfortunately, they didn't make it into a git commit. What do I do?

I carefully hit CMD+Z to go back in the local file history, copy the snippet, and then go forward again with CMD+Shift+Z.

I can't be the only one doing this, or? πŸ€”

Here's a huge TIL: VS Code stores all saved versions in the timeline panel and keeps them across restarts. Whooot!

Don't press CMD+Z all the time

Random MDN – The Font Loading API

FontFaceSet β€” The FontFaceSet interface of the CSS Font Loading API manages the loading of font-faces and querying of their download status.

Speaking of JavaScript font APIs: document.fonts can do way more than checking if a font is available. Learn more about it on MDN.

Use document.fonts

If you want to learn more about web development, my @randomMDN Twitter bot posts random MDN pages multiple times a day.

TIL recap – negative zeros, NaN and Object.is

Object.is(-0, 0);    // false Object.is(NaN, NaN); // true

A few years ago, I learned about negative JavaScript zeros, which led me down the path to Object.is. Learn more about yet another JavaScript quirk on the blog.

Compare with Object.is

Find more short web development learnings in my "Today I learned" section.

Three valuable projects to have a look at

A new Tiny Helper

Alfredo showing a color pallette

Did you ever try to make a color translucent but struggled to keep its brightness and tone? Alfredo transforms opaque colors into their transparent counterparts, keeping their look on dark and bright backgrounds.

Design with transparency

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

Thought of the week

REM from Frontend Mastery looked at the history of JavaScript frameworks, and the article kicks off with some wise words.

If you’re on the bleeding edge, you are usually the one bleeding.

A song that makes you stop coding

Feist - My Moon My Man (Boys Noize Remix)

This week's track is a remix of Feist's "My Moon My Man". The snarky electro track is one of my all-time favorites.

Listen to "My moon My man"

And this is all, friends!

Writing Web Weekly takes me roughly five hours every week, and I pay real money for sending over 3k emails. If you enjoy it, consider supporting me on Patreon. β™₯️

Or tell your friends about it:

If you're not a subscriber, change that! πŸ˜‰

And with that, take care of yourself - mentally, physically, and emotionally. I'll see you next time! πŸ‘‹

View all past newsletters