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

Guten Tag! Guten Tag! πŸ‘‹

What's coming to the web with Interop 2024? How can you style browser scrollbars? And how can you discover great variable fonts?

Turn on the Web Weekly tune and find all the answers below. Enjoy!

Do you want to share your favorite song with the Web Weekly community? Hit reply, and we'll listen to it together!

Now that the indie web is cool again, I started bookmarking beautiful personal sites.

Here's Pete Millspaugh's site. It's simple but so incredibly well done. The background, the colors, the typography... I'm jealous.πŸ’―

A site with the headline Pete Millspaugh. It has comic mountains in the background and a search box in the center.

Pete also built weeksofyour.life. Having my life's key moments on my site, I'm game!

And then there's Tyler Gaw with his rough beauty! The web should look more like this.

Tyler Gaw's site with rough and cards showing streetcred and limbo. There's high contrast and it looks very artsy.

And, of course, if you're a game developer like Matteo Santoro, your site must be a mini-game, right? Seems reasonable. πŸ˜…

A site that looks like super Mario on a Game Boy.

I love this, and if you do, too, you should check Matthias Ott's newsletter "Own Your Web". It's great!

What are your favorite sites? I really want to see more beautiful indie sites that make the internet what it should be. Personal and fun!

Something that made me smile this week

A PDF symbol covering half of Germany.

There's a myth that the largest PDF is 381km x 381km tall. #wat

Alex Chan debugged the entire topic and solved the mystery.

Debug PDFs

Open tabs

useMemo vs useCallback

A cat standing between many "useCallback" text chunks.

One of the most discussed and often done wrong React topics is memoization. Namely, using useMemo and useCallback. Nadia Makarevich explains how to use the hooks correctly to save some renders nicely.

Tame the renders

The perfect favicon

How to Favicon in 2024: Six files that fit most needs

It's the time of the year when the Evil Martians look at favicons to tell us what we need to do to cater to all platforms. I set the reminder to update all my sites already.

Update your favicon

Is a one-line commit message the best we can do?

Convert template to US-ASCIl to fix error. I introduced some tests in a feature branch to match the contents of /etc/nginx/router_routes.conf. They worked fine when run with 'bundle exec rake spec' or 'bundle exec rspec modules/router/spec'. But when run as 'bundle exec rake' each should block failed with: ArgumentError: invalid byte sequence in US-ASCII I eventually found that removing the ' with_content(//)' matchers made the errors go away. That there weren't any weird characters in the spec file. And that it could be reproduced by requiring Puppet in the same interpreter with: rake -E 'require "puppet"' spec.

I'll be bold and assume that most people work with pull requests these days. If your team values code quality, you might do proper code reviews, too. And if you're lucky, people make efforts to document their changes in the PR so that the review is more valuable.

And that's all great, but is the GitHub UI the best place to document your changes? After reading David's post, I think writing an extensive commit message is the way to go.

Document your changes in Git

Sticky VS Code

VSCode editor and tree viewer that comes with sticky headers

You might have to look closely at the screenshot above. It shows sticky elements in the code editor and file tree viewer. We had the sticky editor lines since August 2022, but having it in the file tree is new. Here are the settings to turn on some stickiness.

  • editor.stickyScroll.enabled
  • workbench.tree.enableStickyScroll

Big feature fanboy alert on my side!

You're halfway through!

Wowza! Would you enjoy getting Web Weekly straight to your inbox?

The wonderful weird web – Infinity Craft

Boxes tha are connected with each other. They show dust storms, titanic, egypt or papyros.

I can't explain why I spent the last 10 minutes playing "Infinity craft". It's a beautiful idea with lots of surprises. More of that, please!

Play with infinity

What are your favorite internet corners? Send them my way, and I'll include them in Web Weekly!

I never thought of CSS inheritance like that

Nested Dark Mode via CSS Proximity

My favorite custom property feature is that they inherit values. The "closest" custom property wins when defining a value. I'm using this feature every day and never thought about how inheritance differs from other properties. Jonathan Dallas did an excellent job making me understand another CSS fundamental.

Love custom properties

Are UI controls changing?

Apple is the first major operating system vendor who had abandoned a four-decades-long tradition. Their new visionOS β€” for the first time in the history of Apple β€” will have round checkboxes.

Interface design has rules. Checkboxes are well... boxes. Radios are circles. This pattern makes me understand what I'm dealing with.

Is this going to change? Nikita Prokopov discovered a somewhat drastic design change coming from Apple.

Get a checkbox history lesson

Yay for standards β€” scrollbar-color and scrollbar-width

An example of a blue scrollbar.

Do you remember the good old days when we hunted browser-specific pseudo-elements to style UI elements and included -webkit- or -moz- property prefixes everywhere β€” a blast from the past.

Web standards took the prefixes' position, and there's news. Chrome now allows standards-based styling of scroll bars. I wrote about it two years ago. Better late than never. πŸ˜…

Style the scroll bar

What's the price of a high uptime promise?

A graph showing the cost for a high uptime skyrockets when aiming more uptime than 99.5%

I've been working for tech SaaS companies for a long time, and the number of 9s is often a big topic. What's the best availability number? Do you want to promise 99.9% availability? Or even 99.99%? And more importantly, can you promise any of these?

Itzy Sabo flips the question around and asks how much 9s you can afford.

Make realistic promises

Random MDN – dotAll

RegExp.prototype.dotAll has the value true if the s flag was used; otherwise, false. The s flag indicates that the dot special character (.) should additionally match more characters like line breaks.

From the unlimited MDN knowledge archive...

Did you know that the . in regular expressions doesn't match every character? To also match line breaks, dotAll is your friend!

Match them all!

TIL recap – Git autocorrect

WARNING: You called a Git command named 'stats', which does not exist. Run 'status' instead y/N?

I would love to say that I'm consistently hitting the correct keys when hammering commands into my terminal, but when I'm not, git auto-correct is a friend I don't wanna miss.

Correct your typos

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

New on the platform

The 2024 Focus Areas - Accessibility - CSS Nesting - Custom Properties - Declarative Shadow DOM - Font size adjust - HTTPS URLs for WebSocket - IndexedDB - Layout - Pointer and Mouse Events - Popover - Relative Color Syntax - requestVideoFrameCallback - Scrollbar Styling - @starting-style and transition-behavior - Text Directionality - text-wrap: balance - URL

Okay, you got me; today's "New on the platform" didn't ship cross-platform yet, but hear me out. All the above topics are part of Interop 2024. The future is bright, and Jen Simmons tells us everything we need to know about the new web features.

See what's coming

Classifieds & friends

  • Headsdown, the Nibble is my favorite newsletter for staying on top of the wild AI world. Pushkar and Aashutosh do such a fantastic job. πŸ’™ Check it out!
  • Learn modern UI engineering with Web Components and standards! Join veteran architect Rob Eisenberg on over 170 practical lessons covering dozens of topics. Use code WEBWEEKLY for 10% off today! Coupon expires 3/15/2024.

Three valuable projects to have a look at

A new Tiny Helper

Variable Fonts β€” A simple resource for finding and trying variable fonts

Variable fonts are great. If you're looking for fonts for your next project, v-fonts.com lists hundreds.

Pro tip: filter them by license to be on the safe side.

Discover variable fonts

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

Thought of the week

A unified theory of fucks is a beautiful story about "giving a fuck about work". I loved every sentence of it. πŸ’™

Work β€” the action of change, the movement of energy from one being to another β€” is the means by which fucks are granted. Good work is the art of giving a fuck about the living.

This is all, friends!

Loved this email? Hated this email? I want to hear about it!

If you think there’s something that needs to be improved or something that you enjoyed, reply to this email because I want to know more!

And with that, take care of yourself - mentally, physically, and emotionally.

I'll see you next week! πŸ‘‹

Was this post interesting?
Yes? Cool! You might want to check out the email version. The last edition went out 4 days ago.
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