DEV Community

Stefan Judis
Stefan Judis

Posted on • Originally published at stefanjudis.com

🧒 Stefan's Web Weekly #22

Welcome to Web Weekly #22!

Hello friends! It's summer here in Berlin! I mean, almost... πŸ™ˆ And I might have made it to get a slight sunburn today. I also started working on a new custom element for my blog (<web-compat />) to show always-up-to-date browser support information in my blog posts. It was a good week!

Before we jump into web stuff, let me share something fascinating with you, this video shows the creation of a beautiful animation without using a computer.

Running cat with a house on its back

This week's Web Weekly includes:

  • JSON modules in JavaScript
  • Lighthouse updates
  • CSS Font descriptors

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

Ready? Steady. Go!

The benefits of asynchronous communication

Graphic comparing communication via chat and async writing

Oldie gut goldie – I'm working from home for more than two years now, and I don't miss going into an office every day. I enjoy saving the commute while having the flexibility to work where I want. That said, it's challenging to establish a remote-first culture in a team or company because you need to adjust many processes to make it work.

If you're considering remote work, Snir David compares synchronous and asynchronous communication in this evergreen blog post.

πŸ‘‰ Learn why written communication rocks

aria-hidden and focusable elements

4th Rule of ARIA Use – Do not use role="presentation" or aria-hidden="true" on a focusable element .

You might know that you can use aria-hidden to hide elements from assistive technology. But what happens when you use aria-hidden in combination with focusable elements? The article "The hidden world of aria-hidden" explains these cases in great detail!

πŸ‘‰ Check for focusable elements

Video encoding in the browser

AVPress interface showing various controls and a video preview

Optimizing videos is difficult and complex! Years ago, I set up a shell command that leverages ffmpeg to make video files smaller, but don't ask me how I came up with this script because ffmpeg is a challenge by itself.

Addy Osmani released AVPress, an online tool to encode and optimize your videos, last week! It uses WebAssembly and ffmpeg, and everything runs right in your browser! It's impressive what the web can do today!

πŸ‘‰ Optimize your videos

Learn coding by teaching

Study Groups – I organize weekly study groups that center around learning JavaScript and computer science.

I had the pleasure to join the first 2-hour long includeJS mini conf two weeks ago. includeJS is a study group where people get better at programming by teaching each other. And let me tell you, that was a lovely and welcoming bunch of people at this mini conf! I had a great time, and if you want to connect with other developers and learn together, reach out to Eva Dee!

πŸ‘‰ Join the includeJS study group

Lighthouse updates and resources on CLS (Cumulative Layout Shift)

Lighthouse score calculator showing metrics FCP, SI, LCP, TBT and CLS

Chrome's Lighthouse will get a major update (v8) in Chrome 93. It comes with new features such as a JavaScript bundle explorer, but most importantly, the overall performance score and CLS calculation will be adjusted.

Here are some resources to learn more:

Do you only want to see how the changes affect your performance score?

No problem, the handy Lighthouse performance calculator has been updated to reflect the upcoming weighting changes, too.

πŸ‘‰ Calculate your Lighthouse score

A new way to minimize font-triggered layout shifts

Source code: @font-face {     font-family: "Lato-fallback";     size-adjust: 97.38%;     ascent-override: 99%;     src: local("Arial"); }

Speaking of layout shift, the loading of custom fonts often contributes to jumpy pages. And while there are practices to minimize font-triggered layout shifts (using font-display or FontFace.load), they always felt like workarounds to me. Luckily, CSS Font descriptors are on their way. Barry Pollard looked at how they improve font loading.

πŸ‘‰ Learn about CSS Font Descriptors

What should you tell your manager?

Being good at telling your manager the right information at the right time and asking for what you need is a superpower. It makes you way more valuable to have on a team (because your manager knows they can trust you to give them the information they need), and it’s more likely that you’ll get what you want (because you’re making it easy for them to do that!).

Julia Evans, who you might know from her programming zines, publishes insightful coding content and shares excellent team work advice. "Things your manager might not know" is a very relevant article that will help you make your manager better at managing you.

πŸ‘‰ Tell your manager what's up

TIL – CSS provides system colors

CSS code: :root { background-color: Canvas; color: CanvasText; }

Jim Nielsen shared a surprising little CSS gem. I learned that CSS provides system color values, and (theoretically) they react to user color preferences changes (light/dark mode).

πŸ‘‰ Learn about CSS System colors

If you want to see system colors in action, I published a demo and thoughts on my blog.

Confusing terms in git

Confusing terms in the git terminology

Do you know the difference between git fetch and git pull or git checkout and git switch? After working with git for almost a decade, I still have to say it: git is very confusing! I have to look up such details all the time. Pragati Verma explains git's confusing parts in this article.

πŸ‘‰ Learn about confusing git terminology

JSON Modules landed in Chrome 91

JavaScript code: import data from "./data.json" assert { type: "json" };  console.log(data);

Here comes some big news! JSON modules landed in Chrome 91. I haven't had a detailed look at it yet, but this syntax is something I haven't seen before. 😲

πŸ‘‰ Find more resources on the blog

Reader shout out πŸ’™

I shared my discovery of the address HTML element last week and asked if one of you is using it. Jens Grochtdreis enlightened me and told me that the address element doesn't offer much value today. He shared this old html5doctor.com article with me, and it made it clear.

Thank you for sharing, Jens! And thank you all for reading along. πŸ’™

A new Tiny Helper

Screenshot of waterfaller.dev

Analyzing waterfalls to find performance bottlenecks is not an easy task. waterfaller.dev loads your website and provides tips and tricks on how to make it faster. Very useful!

πŸ‘‰ Analyze your waterfalls

Three valuable projects to have a look at

A quote to think about

I haven't done "serious pair-programming" in a while, and now that I think of it, I miss it. Putting the heads together to solve something challenging is terrific and, as Jason Gorman points out, leads to better results.

Pair programming isn't 2 people doing the work of one. It's 2 people avoiding the rework of 7.

A song that makes you stop coding

Video screenshot of "Naked and Famous – Young blood"

I warned you a while ago that I discovered an excellent Indie playlist on Spotify. This week's song is the "Young Blood" from the "The Naked And Famous" that perfectly matched Berlin's summer vibe.

πŸ‘‰ Listen to "Young Blood"

Thank you for reading!

And that's a wrap for the twenty-second 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! πŸŽ‰ πŸ‘‹

PS. I heard the cool kids use RSS. You can find multiple feeds on my site.

Top comments (0)