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

How many units are defined in CSS? Is Jamstack dead? Or how can you detect Emojis in JavaScript strings?

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

Tricky question: what domains do you own? If you own country code top-level domains such as .af (Afghanistan), .io (British Indian Ocean Territory) or .gg ( Bailiwick of Guernsey), here's a reminder to maybe move to a "boring" .com domain instead.

Tweet from Web Bos: Having a .AF domain is all fun and games until your business relies on flakey geopolitical relationships. I think we may need to say goodbuy to bos.af.

Web Bos and Jason Lengstorf have issues with .af. And I've read plenty of reports from people losing domain access lately.

From friend to friend: you better pick a safe over a fancy domain, you know? πŸ˜…

Something that made me smile this week

Gangsta Lorem Ipsum

I'm a big fan of the Doggo Ipsum, but the Gangsta one at lorizzle.nl is pretty decent, too.πŸ˜…

Paste da shizzle

Is "Jamstack" dead?

Netlify CEO and coiner of terms here :) I would actually argue that Jamstack has won the point of basically just being "Modern Web Development" by now.

First, it was JAMstack, then Jamstack and now it's ...?

What's this "new" way to build for the web called today? With serverless functions and a gazillion rendering patterns, I stopped using the term J(AM|am)stack and started calling it "hipster web stuff" instead.

Swyx summarized what happened in the developer ecosystem (and at Netlify, who coined the term). It's worth a read if you're developing on the jam.

Use modern web tech

How to detect Symbols in JavaScript strings

const re = /^\p{RGI_Emoji}$/v;  // Match an emoji that consists of just 1 code point: re.test('⚽'); // '\u26BD' // β†’ true βœ…  // Match an emoji that consists of multiple code points: re.test('πŸ‘¨πŸΎβ€βš•οΈ'); // '\u{1F468}\u{1F3FE}\u200D\u2695\uFE0F' // β†’ true βœ…

Firefox 116 shipped, including unicodeSets mode (//v) for JavaScript regular expressions. You can now detect and test for Emoji sequences, Flags, language Symbols and many more! πŸ’―

Chrome shipped the flag a while ago, and Safari will include it in its upcoming 17 release. The future's bright for pattern matching!

Detect all the things

TS interface vs type

But the TS team recommend you default to using `interface` and only use `type` when you need to. I like to recommend the opposite. The features of declaration mergin and implicit signatures are surprising enough that they should scare you off using interfaces by default.

interface and type do almost the same things in TypeScript. But when should you use which? Matt Pocock explained the differences and gave a different recommendation than the TypeScript folks. 🌢️

Use types

Interactive tutorials just do it best!

Two column layout: Tutorial text on the left and and interactive playground on the right.

Man, I love interactive tutorials. If you want to learn how the wild numbers in SVG paths come together, Nanda Syahrasyad has you covered!

Create SVG paths

The wonderful weird web – The 90ies TV

A TV showing the backstreet boys singing.

I believe I already shared the 90ies TV in an earlier Web Weekly, but I rediscovered it in my social feeds. Suppose you're a 90ies kid like me, turn on the TV and watch the good old times.

Teleport to the 90ies

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

Do you remember CSS env()?

Visualization of the virtual keyboard CSS API.

I must admit I last used CSS env(safe-area-inset-*) long ago. For non-rectangular devices (like newer iPhones), you can use it to design around the device notch.

You can also pair env() with titlebar-area-* values to work around the native UI of installed progressive web apps. Fancy!

But today, I learned keyboard-inset-* values are in the making, too! Ahmad Shadeed explains what env(keyboard-inset-width) and all the other new values are about!

Style around a virtual keyboard

The lack of context for toggle buttons

Two toggle buttons: one is labeled with "cookies" and "no cookies" and the other one is only labeled with "cookies".

Joel Holmberg published a lengthy article arguing that "Toggles suck!". I'm guilty of implementing handmade toggle buttons many times. Joel shares two very compelling arguments:

  1. toggles rely on obvious context to work well (like physical light switches).
  2. toggles make you think.

Pair these two UX downsides with the problem of making custom markup accessible, and you're into trouble.

Avoid toggle buttons

20 handful of different CSS units

An Overview of CSS Sizing Units

There are now over 50 different CSS units. There's cm (centimeters β€” not kidding), Q (quarter-millimeters β€” still not kidding), ch (width of the 0 glyph), or lh (line height). πŸ˜…

I'll probably stick to the two handful units I use every day, but if you want to inspect the CSS unit space, our friends at Sitepoint published a massive guide about it!

Use the best unit

Random MDN – Array.prototype.with()

const arr = [1, 2, 3, 4, 5]; console.log(arr.with(2, 6)); // [1, 2, 6, 4, 5] console.log(arr); // [1, 2, 3, 4, 5]

From the unlimited MDN knowledge archive...

When did this happen? Did you know you can replace array elements with with()? It's supported by all browsers, too. πŸ˜…

Replace elements

And as Seb pointed out, with is particularly handy in the immutable React world.

TIL recap – Reusable regex groups in String.replace

const re = /(\w+)\s(\w+)/; const str = 'Jane Smith'; const newstr = str.replace(re, '$2, $1'); console.log(newstr);  // Smith, Jane

Here's a JS fun fact: when you replace string values using replace and (!) use a regular expression for pattern matching, you can reference capture groups with $1, $2, and so on. 🀯

Replace with groups

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

Three valuable projects to have a look at

A new Tiny Helper

Shots UI showing a options to render a device mockup.

I was initially unimpressed when I played with "Shots", but I'm in love after discovering the device frames!

If you're looking for a tool to create beautiful screenshots or always google for iPhone frames, this tool is for you!

Mock it up

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

Thought of the week

The following is so right, but how can I resist all the tech hotness? πŸ˜… Addy Osmani shares thoughts on the fear of missing out regarding tech.

Stick to boring architecture for as long as possible, and spend the majority of your time, and resources, building something your customers are willing to pay for.

A song that makes you stop coding

Kraftklub band posing in black and white clothes.

I was out to see the German band Kraftklub yet another time, and holly molly, the band has strong "The Hives" vibes when on stage.

Here's an absolute German classic.

Listen to "Songs fΓΌr Liam"

This is all, friends!

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