Published at
Updated at
Reading time
7min
The Web Weekly newsletter keeps you up to date, teaches you web development tricks and covers all things working in tech.

Welcome to Web Weekly #7

I hope you're all safe and sound! From my side, nothing major happened this week, and the biggest highlight was that I learned there is a ๐Ÿชค emoji (that's a mousetrap). ๐Ÿ™ˆ

This week's web weekly includes DevTools tricks, the power of storytelling and metaphors, strict Node.js versions, and, as always, GitHub repositories, new Tiny Helpers and some music.

Shall we? Let's do it!

DevTools productivity tips

Useful DevTools Tips And Shortcuts (Chrome, Firefox, Edge)

Vitaly from Smashing Magazine published an extensive article on tips and shortcuts in the browser developer tools. It covers Chrome, Edge and Firefox. It's full of tricks and worth a read!

Learn all about DevTools shortcuts

How you tell a story is as important as the story itself

From "Draw the box smaller": a Dramatic reenactment of the revised new way diagram.

It doesn't matter if you're giving a presentation, writing an article, or are having a conversation. If you want to make your point clear (and maybe convince someone), it's all about how you convey your message and what metaphors you use. Jason Lengstorf wrote an excellent article on how he first failed but later convinced his team to use new software.

Read "Draw the Box Smaller"

A digital decline letter

Chris Coyier's decline letter making clear that he's not offering things without compensation

A while ago, I discovered that Chris Coyier from CSS-Tricks has a side blog โ€“ "Email is good". On this blog, he shares his thoughts on emails and communication in general. He recently shared his thoughts on nohello.net (I included it in Web Weekly #4) and also came up with the idea of a digital decline letter to respond to emails.

Write your decline letter

Tools for responsive web design

Screenshot of responsively showing a website in multiple device sizes

It feels like we're entering a phase of new tools for web development. Products such as Polypane and Sizzy are browsers built to make responsive web development more straightforward. This week I learned about Responsively, and the browser extension looks like a massive help when building responsive websites.

Try out Responsively

Making password fields be friends with password managers

Making password managers play ball with your login form

If you're using a password manager (and I hope you do), you might have noticed that sometimes password fields are not detected and aren't filled out. I came across Hidde de Vries' article on the topic. It explains how to build great password fields.

Make your password fields go well with managers

Minimal snippets for modern CSS layouts and components

Example from smolcss showing a sidebar layout

Stephanie Eckles maintains a site including small CSS snippets for everyday problems. Great work!

Check SmollCSS

What are your domain sins?

Twitter wes bos: What are the best/dumbest domains that you are holding onto?

Wes Bos' Twitter thread made me smile. Developers have a well-known low barrier when it comes to buying domains. I'm still proud that I own my-links.online for sharing URLs. Have fun reading all these beautiful domain purchases.

See all these creative domains

Why you should not open spam emails

Why you should never hit 'unsubscribe' on an illegal spam email

I don't get much spam, and if I do, I'm super quick with hitting the spam button. I never realised, though, that opening a spam email already confirms that a person monitors it. I'll be even quicker with the spam button in the future.

Stop opening spam

Developers building tools

Yokels GitHub profile showing all their tools

While maintaining Tiny Helpers, I didn't notice that many included tools are from one developer โ€“ Yoksel. I love that we, as developers, can sit down and build the tools we need. I โ™ฅ๏ธ computers!

Have a look at Yoksel's tools

Examples of beautiful hover styles

You might know the Codrops blog. I always loved their collections of beautiful and creative Frontend examples. This week I came across a collection of hover styles and adjusted my blog navigation.

Hover all the links

Enforce a correct Node.js version in your projects

A cli log of a failed npm install due to Node.js version mismatch

This week I did some housekeeping and updated an article describing how to prevent people from running npm install in your project when they're not running the correct Node.js version.

Restrict your Node.js versions

Log objects and stack traces with console.trace

Example showing console.trace to log objects and stack traces

This week I learned that you could use console.trace to log out stack traces and(!) objects.

See console.trace in action

Quality settings of the new Avif format

If you usually encode JPEGs with quality setting 60, then encode AVIF with quality setting 50 and WebP with quality setting 65. You should expect your AVIF files to be on average 36% smaller and your WebP images 15% smaller than the equivalent JPEG image.

You probably know that I'm excited about the new Avif image and video format. Malte Ubl shared some guidance on how to approach the quality levels when converting images into different formats.

Learn about Avif quality settings

If you're missing your favourite bar...

Screenshot of imissmybar showing some noise faders

Today I listened to this playlist paired with bar noises while reading some articles. I have to admit that I miss the chatters and sounds of people enjoying a good night out.

Get some bar feelings

New tiny helpers

Screenshots of Ray.so, GraphQL Voyager and online gif tools

  • Ray.so โ€“ Create and share beautiful images of your source code.
  • Online gif tools โ€“ Create, edit and convert GIFs.
  • GraphQL Voyager โ€“ Represent any GraphQL API as an interactive graph.

Three useful projects to have a look at

A quote to think about

I found this week's quote in Austin Kleon's article "Pointing at things". Austin included a quote from Robin Rendle, who you might know from CSS-Tricks.

Blogging is pointing at things and falling in love.

A song that makes you stop coding

Screenshot of "SBTRKT - Pharaohs ft. Roses Gabor"

SBTRKT's funky electro track with a great singers voice made me bounce around this week.

Listen to SBTRKT

And that's a wrap for the seventh Web Weekly! ๐ŸŽ‰

If you enjoyed this edition, a quick share means the world to me. :)

Stay safe and warm, and I'll talk to you next week! ๐ŸŽ‰ ๐Ÿ‘‹

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

If you enjoyed this article...

Join 5.5k readers and learn something new every week with Web Weekly.

Web Weekly โ€” Your friendly Web Dev newsletter
Reply to this post and share your thoughts via good old email.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles