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.

Hello Hello!

Do your React useEffect hooks include race conditions? Have you heard of the perspective() CSS function? Would you use Next.js?

This week's Web Weekly includes all the answers and much more. Enjoy!

With macOS Sonoma, it's possible to "install" web pages as Safari web apps with the new "add to dock" feature.

Safari "add to dock" menu item under "file"

I use Chrome (for work) and Firefox (for private), so why would I care? I use Gmail, Google Calendar and Twitter as standalone Chrome apps to get them out of my tab bar. But they have some annoyances.

Chrome install app dialog.

I gave "add to dock" a spin, and I'll stick to it. Here's why:

  1. I can spin up an installed web app without kicking off the base browser. If I install a Safari web app, it's its own thing. It has its own cookies, history and can be opened independently. It always bugged me that a Chrome app spins up Chrome, too.
  2. As said, I use multiple browsers and Choosy as the default browser to figure out which browser should display a new link. This never worked in Chrome web apps. Links are always opened in Chrome because it seems to be just a fancy Chrome window. In Safari web apps, I can open links in Firefox, Chrome, or whatever I like. Wonderful.

What are the downsides? Extensions aren't working in Safari Web Apps. Bummer. Also, badging doesn't seem to work to show unread notifications or an indicator that something happened.

Will I stick to Safari Web Apps for now? Yep, and I hope all these too-long ignored PWA features will land in Safari eventually.

Something that made me smile this week

Screenshot of MySpace Tom

Do you remember MySpace Tom? Or the Million Dollar website that sold pixels for advertising? Neal Agarwal takes you by the hand through internet history!

Visit the ancient web

Strikethrough accessibility

Two ecommerce products with strikethrough text

How do you make strikethrough text accessible for all? It's complicated.

Make things accessible

useEffect race conditions

Example showing how to prevent a 'useEffect' race condition

Here's a quick reminder that useEffect is open to race conditions. It's an older post, but Max Rozen explains how to secure your React side effects.

Don't run into the race

After reading Max's post, I started reading the React docs, and they're excellent these days. Here are two great pages to learn more or refresh your React skillz.

Long live the web

If we want that sort of longevity, we need to avoid dependencies that we don’t control and stick to standards that we know won’t break. If we want our work to be accessible in five or ten or even 20 years, we need to use the web with no layers in between.

Tools and frameworks come and go. Jake Lazaroff makes the case for web components as a solution that's there to stay.🌢️

Bet on the platform

New. New. New. CSS.

A Couple of New CSS functions I'd never heard of

I've no idea how Chris keeps track of all things CSS, but apparently, light-dark(), xywh(), round() and perspective() are a thing in CSS land.

Level up your CSS

The wonderful weird web – World Population Stats

Do you think you belong to the young or old? Your the 4,828,831,991 person alive on the planet. This means that you are older than 60% of the world's population and older than 40% of all people in Germany.

I guess I'm not that young anymore.πŸ˜… population.io gives you a look into the world's population and where you stand.

Compare yourself with the world

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

Git tip: automagically load project configs

A gitconfig that requires different files depending on the git directory

For the freelance folks: Garrit Franke describes how he manages multiple git identities (SSH keys and stuff) for different clients depending on the project directory. Smart!

Make Git smarter

Next.js β€” the good & the bad

Are you evaluating Next.js and ready for some opinions, popcorn and hot takes?

Why I won't use Next.js

Kent C. Dodds published "Why I don't use Next.js". And he's criticizing that Next relies on a React canary release, there's too much magic and that it's not relying on web standards. Do all his arguments hold?

Why I'm using Next.js

Vercel's Lee Robinson didn't let us wait and took the mic to reply with "Why I'm Using Next.js" a few days later. I'm no daily Next.js user, so it's hard to take a stand here. Do you have thoughts on the topic? I'd love to hear them!

But I love the way Kent and Lee interact with each other. Sure, it's marketing. But both have massive followings and could easily start some hot "Mine is better than yours" drama, but instead, they constructively write about it.

At the end: whatever you use is probably fine.

Random MDN – Object.groupBy

Object.groupBy example

From the unlimited MDN knowledge archive...

Did you know you can group array entries with a nifty JS one-liner?

Well... Almost. Firefox 119 followed Chrome and shipped Object.groupBy. Only Safari's missing, but don't worry. groupBy isn't too hard to polyfill.

Group it

TIL recap – ping

Example of HTML that includes an anchor with the "ping" attribute

Do you know that HTML has a native way to track link clicks? That's what the ping attribute is for. πŸ’ͺ

Track with the platform

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

New to the platform

Multiple details elements that were transformed to an accordeon by using the "name" attribute

We're right in the HTML revolution. dialog shipped. popover is almost cross-browser supported (Firefox is missing with a flagged implementation). And now there's another update in the browser maker pipeline.

details elements with similar name attributes will become native accordions. So far, so good. But...

⚠️ After sharing this feature on social media, I learned there's a big BUT!. Are accordions a good user pattern, after all?

Exclusive accordions allow visitors to see only one thing at a time. There's no way to open multiple sections at once. You can't read and reference different open sections. This behavior can be inaccessible and a frustrating user experience. Baking an accessibility / UX antipattern into the platform encourages using not thought-throw UI patterns.

To work around this, people add "Collapse/Expand all" buttons to their custom accordion implementations. But how do you do this with the native implementations when it's only allowed to have one open element?

I admit I've never thought about all this problems. WebDev is hard. πŸ˜…

Thanks to Eric Eggert and Sara Soueidan for their feedback.

Three valuable projects to have a look at

  • google/wireit – Oldie, but goldie β€” upgrade your npm/pnpm/yarn scripts to make them smarter and more efficient.
  • tsparticles/tsparticles – Create particle effects, confetti explosions and fireworks animations.
  • usebruno/bruno – Opensource IDE for exploring and testing APIs.

A new Tiny Helper

Vectorpea

Photopea is my web-based Photoshop replacement since forever. The same folks have now released a new tool to edit and create vector files. Say hello to Vectorpea.

Vector all the things

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

Thought of the week

We all know what Aaron Francis is talking about, right? πŸ˜…

The best part about being 90% done with a project is that you're almost halfway finished!

This is all, friends!

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

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 8 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