Artboard 16light, inspiration, solution, idea, innovation,ionicons-v5_logosGoogle Sheets iconSwift icon
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.

Guten Tag!

Do you struggle with Unicode in JavaScript? Or curse the vh when designing for mobile? Or always wanted to know how this obscure .visually-hidden class you're copying from project to project works?

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

Enjoy!

This edition is the 86th Web Weekly, and for almost two years, I've been sharing weekly Frontend tips (I missed a few, but hey... πŸ™ˆ).

It's odd that Web Weekly somehow became a part of my life. πŸ’™

This week, I've chatted with my friend Anselm who runs the excellent Web Development Reading List. You should check it out!

We both wondered where we're going with our newsletters and if there's a way to collaborate.

All this got me thinking about Web Weekly.

Is it valuable to send it weekly? Should it be focussed on a specific topic rather than only including the things I liked during the week?

As we're almost closing the year, I'd love to know what you think of Web Weekly. Why did you subscribe? Is the format good as it is? Should I cut something?

Reply to this email or send me an email. Thank you!

Something that made me smile this week

Two colorful circles next to each other.

I've seen a few of these optical illusions tricking the brain, but this one is wild!

Be confused

A guide to radial CSS gradients

radial-gradient(closest-side, black, lime, fuchsia)

Some folks create stunning CSS gradient art. I'm none of them, but if you want to become part of the cook kids club, Patrick Brosset's guide covers everything you need to know about radial CSS gradients.

I learned that CSS can automatically size gradients with closest-side and farthest-side. 😲

Circe all the things

Why can't we have native JSON forms?

I think there’s another equally significant change that could decrease the amount of JavaScript shipped to modern websites: we need either 1) more APIs that speak FormData, or 2) browsers that speak JSON.

I think about the following a lot! JSON APIs power the majority of sites I built today. And to use them, I have to run client-side JavaScript or do some serverless function magic. Unfortunately, it all becomes "a little tricky" to enhance things progressively.

But here's a thought: what if forms would support JSON? How great would that be!

Think about JSON

How does .visually-hidden actually work?

.visually-hidden {     width: 1px;     height: 1px;     overflow: hidden;     ... }

You probably have used a .visually-hidden or .sr-only class in your projects to visually hide text but keep it accessible for assistive technology.

It's this mixed bag of absolute positioning, clip-path and white-space properties. Have you ever wondered why all this CSS is necessary? James Edwards explains it very well!

Learn what it takes to hide stuff visually

New and shiny viewport units

Boxes showing the viewport units vh, lvh, svh and dvh.

If you're using 100vh on your sites, consider switching to 100dvh. Manuel Matuzovic shares why.

Adapt your units

Whimsical websites

Websites that spark joy. A curated list of sites with an extra bit of fun.

Suppose you're looking for some inspiration on what fun things to build into your site. Max BΓΆck curates a great collection of entertaining website functionality.

Have fun! πŸŽ‰

TIL – top-level await and the mysterious 13 exit code

// index.mjs (ESM) await new Promise(() => {});  // ----- // Exit code: 13

I've been writing a quick'n'dirty Node script, made a silly mistake and hit a surprise. Node just exited with the exit code 13. There was no error or anything. As it turns out, if you use Node's top-level await features, it comes with some additional DX sugar. πŸ’―

Learn when Node exits

But, amongst the chaos, there are some positive trends right now. Here are a things about software development for the web that are improving.

Frontend tech is constantly moving, and it takes time to identify the new tech that matters. Tom MacWright collected trends you should keep an eye on.

Watch out for the good stuff

Unicode nerdery

JavaScript Regex test and replaceAll calls.

Apparently, there's a new Regex flag in the making β€” /v. There are so many Unicode facts in Axel Rauschmayer's post that it's hard to summarize.

If nerdy Unicode insights are your thing, you'll love this post.

Learn more about Unicode

Random MDN – :modal

:modal – The :modal CSS pseudo-class matches an element that is in a state in which it excludes all interaction with elements outside it until the interaction has been dismissed. Multiple elements can be selected by the :modal pseudo-class at the same time, but only one of them will be active and able to receive input.

From the unlimited knowledge archive called MDN...

Do you know that there's a fairly new :modal CSS pseudo-class? Now you do!

Learn more about :modal

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

TIL recap – email inputs accept multiple addresses

An example email input showing multiple entered email addresses and the input's validity.

A while ago, I learned that email inputs support a multiple attribute. But before jumping all onto it, there are UX drawbacks.

Learn about email input challenges

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

Three valuable projects to have a look at

  • google/wireit – Upgrade your npm scripts to make them smarter and more efficient.
  • danielgatis/rembg – Rembg is a tool to remove image backgrounds.
  • antfu/fsxx – File system scripts in zx style.

A new Tiny Helper

CSS Clothoid Corners β€” Generate clothoid rounded corners by CSS clip-path.

I didn't know that clothoid corners were a thing, but if you always wanted them, this tool helps out.

Tweak your corners

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

Thought of the week

There's a lot of truth in the following because the easy choices usually come with downsides.

Hard choices, easy life. Easy choices, hard life.

And that's why I'll do my Sunday evening exercise right after sending this newsletter. πŸ’ͺ I hope...

A song that makes you stop coding

Nada Surf - Blankest Year

I bought Nada Surf tickets for December, and I can't wait to see them live!

Listen to "Blankest year"

This is all, friends!

Writing Web Weekly takes me roughly five hours every week, and I pay real money for sending over 3.1k 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 4 days ago.

Related Topics

Related Articles