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! πŸ‘‹

Do you know that the new media query range syntax is almost cross-browser supported? Or that client-side navigation has hard-to-ignore accessibility impacts? Or that native CSS nesting shipped in Safari?

All the answers and much more are included in this week's Web Weekly. 🫣

One of the Arc browser's features is "Boosts" which allow you to inject custom CSS and JavaScript into sites. The idea is not new, but the feature is built into the browser.

BTW: I still have five Arc invites hit reply if you want to try it.

I always wonder if people really change sites because the chances are high that things break with a site update. Is that worth it?

Apparently, many people tweak the web to their liking.

Rach Smith hides shorts from her YT timeline.

Remove Shorts from your YouTube Subscriptions feed with :has()

@hi__mayank disables GitHub's wonky Turbolinks navigation and hides the notification bubble.

A user script to disable Turbolinks on GitHub.

Ivan Akulov displays all GitHub shortcuts right in the UI.

GitHub UI with displayed shortcut commands.

Should I reevaluate? Do you use fancy customizations?

Something that made me smile this week

Snake in google search

Let's pretend I didn't just waste spend 25 minutes reliving the 90ies by playing Snake right in Google search, okay? πŸ˜†

Play snake

Client-side routing problems

Custom routing and focus management done right can actually work even better than the native behaviour without JavaScript, but it must be built manually. You don’t see that in many SPAs unfortunately. I’d rather serve users with the not so great, but consistent default experience than no experience at all.

Manuel Matuzović published a not-so-hot hot-take about the downsides of Single Page Apps. It's a fact that client-side navigation messes with default Browser accessibility features.

And that might be okay as long as you understand the implications. Do you build a graphics app, sure β€” go all in JavaScript. But if your site is primarily driven by content, you may want to evaluate all the downsides. πŸ˜‰

Consider the right tools

The case for frameworks

A table showing apps that are SPAs and should be.

And while we're at it: Laurie Voss published a very rational and reasonable take explaining why JavaScript frameworks might be a good thing.

Again, there's no right or wrong. But it's important to consider that every tech decision has tradeoffs.

Maybe use the ecosystem

What's missing in CSS?

Things CSS Could Still Use Heading Into 2023, My CSS Wishlist, CSS Wish List 2023

Last week I shared how excited I'm about Interop 2023, and if someone asks me about things that need to be added to CSS, I need help to think of something. I'm just happy there's so much long-awaited stuff in the pipeline.

But indeed, we're not done yet. Pseudo-classes for stickiness, easing gradients or CSS anchoring are only a few handy additions.

Some folks wrote about their ideas:

New on the web: native CSS nesting

CSS: .foo {   color: green;  .bar {     font-size: 1.4rem;   } }

Safari's rushing ahead and shipped native CSS nesting in their Tech Preview. This is a huge addition!

But it comes with some caveats: nested selectors always have to start with a symbol, and it doesn't look like nested selectors like &--active {} will work. So it won't be a drop-in replacement for Sass, PostCSS or other CSS tools.

But hey, I can't wait to ditch tools to use native web features. πŸ‘

Drop your CSS tolling?

The wonderful weird web – need a pointer?

A boy pointing at you.

It's amazing how well this site works. Move your cursor somewhere and get a picture with a person pointing at it. πŸ˜†

Get the point

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

A CSS one-liner to adopt

CSS: .stack > * + * {   margin-block-start: 1.5rem; }

Creating a scaleable CSS architecture to space things takes a lot of work and brain power. That's why new properties like margin-trim are on their way. But I must admit that Andy Bell's favorite * + * {} rule gives me what I need most of the time. 🫣

Give some space

How to avoid storing useless files on your machine

Let me tell you a secret! I didn't need to clean up ~/Downloads or ~/Desktop for a year now because I changed a few macOS settings. There are two tricks to get rid of the problem of too many files on your hard drive.

Mike Crittenden shared how he set up a cron task to clean up his downloads folder automatically. It's a nice tip, but did you know that there's a directory on macOS that's deleted on reboot?

I haven't had to delete files by tweaking some settings for years. 🫣

Don't litter your hard drive

The smartest dotfiles approach I've ever seen

We make an alias: alias dotfiles='git --git-dir=/home/mx/.dotfiles --work-tree=/'

Years ago, I spent quite some time and set up my dotfiles. The repository includes my entire machine setup. Setting up a new computer takes me 30min, and 95% of it is automated. VS Code, my shell theme and config, my desktop apps; everything will be ready-to-use.

Unfortunately, my dotfiles became a Frankenstein that contains random undocumented scripts creating files and downloading stuff.

But it's now on my TODO list to refactor things and delete some scripts. The described flow of using Git worktrees is the nicest approach to dotfiles I've ever seen. πŸ‘‡

Check in your config files

And if you didn't invest in dotfiles, do it! It's worth it.

meter and progress elements (and their accessibility issues)

meter elements rendered in Safari, Chrome and Firefox.

I have neither used the meter nor progress element but semantic markup rocks! Dana Byerly published extensive article explaining how to use the elements and why you must use them cautiously.

Learn more about semantics

That's what I call fancy buttons!

Buttons that look like they're sparking electricity

There was a Dribbble challenge or something, and folks started building electrified buttons. The example using the Greensock animation library looks fantastic, but the one without JavaScript is truly impressive.

Electrify without JS

Random MDN – Ranges in media queries

CSS: @media (30em <= width <= 50em) {   /* … */ }

From the unlimited knowledge archive called MDN...

Did you know the Media Queries Level 4 specification has a new range syntax? Now you do!

You might wonder about browser support: Safari's still missing, but the syntax will land soon.

Use ranges soon

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

TIL recap – button attributes that change form behavior

HTML form that includes a button with formaction, formmethod and formnovalidate attributes.

HTML continues to amaze me. Have you ever used the formaction or formmethod attribute on a button? No? Learn what they're about on the blog.

Break out of your forms

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

Three valuable projects to have a look at

A new Tiny Helper

A CSS gradient configurator with multiple options.

I only knew I needed to up my gradients game once I discovered Easing Gradients. Why? Creating a linear CSS gradient looks okay, but applying some easing makes things much more polished.

Ease your gradients

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

Thought of the week

And to continue that thread on gradients, the best ones are barely noticeable and blend into the design. Derek Briggs shared some nicely nerdy design details on how to create stellar-looking borders with CSS box-shadow.

If you can tell there is a gradient then it's too much.

A song that makes you stop coding

JPL - Seaside

This week's track is a wonderfully chilled cover of the Kooks' "Seaside". I love it!

Listen to "Seaside"

This is all, friends!

Writing Web Weekly takes me roughly five hours every week, and I pay real money for sending over 3.4k 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! πŸ‘‹

Was this post interesting?
Yes? Cool! You might want to check out the email version. The last edition went out 23 days ago.

Related Topics

Related Articles

About the author

Stefan standing in the park in front of a green background

Frontend nerd with over ten years of experience, "Today I Learned" blogger, conference speaker, Tiny helpers maintainer, and DevRel at Checkly.