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.

Long time no see!

Can a regular expression freeze your JavaScript? Are you looking for some inspiration to get started with Chrome's View Transitions? And do you wish there were more ways to style select elements?

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

Last week's Web Weekly was marked as spam for many people. Why? It included the words "and I pay real money for sending over 4.3k emails" and apparently, this phrase rings some bells in an Apache project called "Spamassassin" used by mail providers.

The project includes a gazillion regular expressions trying to figure out if a mail is spam. Here's the one that flagged me. ๐Ÿคฆโ€โ™‚๏ธ

Regular expression that flagged me.

If you didn't receive last week's Web Weekly and have a moment, do me a favor and flag the email as non-spam.

And I hit send now and hope for the best that this was the problem. Wish me luck! ๐Ÿคž

Something that made me smile this week

Pong in the Chrome DevTools

Have you ever wondered how you could implement a game into Chrome DevTools? Yeah, nobody wondered about that. Ever.

Nevertheless, Chris Johnson implemented Pong in Chrome's Layers panel. ๐Ÿซฃ

Play Pong

The invisible problem

Text editing on mobile isnโ€™t ok. Itโ€™s actually much worse than you think, an invisible problem very few appreciate. I wrote this post so you can understand why itโ€™s so important. But as itโ€™s a rather nuanced issue, I may lose you. To help, Iโ€™ve sprinkled lots of headers throughout so if you get bored, just skip ahead.

How often do you edit text on your phone? And I mean real editing, not just fixing a typo in an "I'll be right there!" message. I rarely do it, mainly because I accepted that small touch devices aren't great at these things. But I've never realized how bad the current state of mobile text editing is. Scott Jenson described all the issues and proposed a solution.

Let's hope for a better UX one day, but as Scott summarizes, neither Apple nor Google have an appetite for fixing these fundamental issues.

Dream of better editing

Whatโ€™s the fuzz about ๏ฟฝ?

For example, thereโ€™s no place for the Apple logo in Unicode, so Apple puts it at U+F8FF which is within the Private Use block. In any other font, itโ€™ll render as missing glyph ๔€ฃบ, but in fonts that ship with macOS, youโ€™ll see .

Unicode is one of these tech principles we use daily, yet I can't shake off the feeling of not knowing enough about it. If you want to learn how Unicode works, Nikita Prokopov does an excellent job explaining unicode planes, grapheme clusters and emojis.

I learned that some Unicode points are rendered differently depending on the user locale. And that Apple sneaks the apple symbol into fonts even though it isn't part of the Unicode spec.

Learn more about Unicode

Animating new DOM elements with a MutationObserver

Mutation observer code

Animating newly added DOM elements has always been a challenge. Chrome already started shipping the new @starting-style rule to make things easier. But there's no sign from the other vendors yet.

Phuoc Nguyen used a MutationObserver to animate elements in. Smart!

Watch the DOM

When a regex takes you down...

Backtracking โ€” It might not seem obvious, but most problems with regular expressions stem from failing to match part of the string they are being evaluated against. Matching is easy, but not matching can cause a process called backtracking where the regular expression engine will go back over choices that it made and try alternatives.

Do you know how regular expressions evaluate strings? I don't really know about all the included magic. Unsurprisingly, the time required to evaluate a string depends on the expression and the given string. But what if a regex takes seconds to give a matching result?

Phil Nash explained how regular expressions brought Cloudflare and Stack Overflow to its knees and how to prevent it.

Be aware of RegExp backtracking

The wonderful weird web โ€“ WordArt

Web Weekly Word Art

If you want to go down memory lane to the good old times when creating wort art was a thing, this site helps out for your next professional flyers.

Embrace the retro style

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

View transition examples

View transition examples on codepen

I started playing with view transitions and discovered that it takes some practice to create nice-looking UI interactions. Sure, things morph into each other with a few lines, but there are some gotchas.

Adam Argyle's view transition examples helped me out a lot!

Discover the power of view transitions

Lovingly notifications

Phone notification: Mum hasn't checked in yet

I love everything about this so much! ๐Ÿ’™ Remy Sharp shared a project that sends him a telegraph message when his parents didn't boil tea for a day. This way, he knows when to check in!

Use tech for good!

New newsletters on the block

The Cascade is a newsletter about the past, present, and future of CSS by your friendly neighborhood Robin Rendle.

It's evident by now that CSS-Tricks is no more. I especially liked its newsletter. Robin Rendle was in charge of it and started their own now โ€”ย "The Cascade". It's the same style and voice โ€” great to have you back Robin!

Own your Web

Not only about CSS, but about creating your little corner in the internet: Matthias Ott started "Own your Web". Go Go Go personal sites!

The Nibble

And lastly, a newsletter from the Web Weekly community: Pushkar and Aashutosh go big and share weekly news of all things tech world in "the Nibble". I love the fun and jokes!

Random MDN โ€“ padStart

"padStart" javascript examples.

From the unlimited MDN knowledge archive...

Do you remember when the internet was broken because of leftpad? It's funny that there's a native JavaScript solution for this.

Pad your strings

TIL recap โ€“ :indeterminate

Code example showing a :indeterminate pseudo class

I learned that some form elements can have an indeterminate state. And there's a CSS pseudo-class to style them. ๐Ÿคฏ

Style the indeterminate

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

New to the platform

HTML got another update! select elements now support hrs to add visual grouping.

Two select boxes where the second one includes horizontal lines in the options.

It's a tiny but mighty addition until selectlist (recently renamed from selectmenu) hits off the ground.

What's the browser support? Chrome 119 and Safari 17 ship it, so we're waiting for Firefox. Here's the Bugzilla ticket if you want to follow along.

Three valuable projects to have a look at

A new Tiny Helper

A visualized regular expression.

Suppose you're knee-deep in trying to understand this one nasty regular expression; Regexper might help. Throw your RegExp at it and receive a visual explanation!

Understand your RegExp

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

Thought of the week

Simon MacDonald explained why they're not defaulting to using Shadow DOM in the Enhance framework, and the post included this gem.

Fixing a problem created by JavaScript by writing more JavaScript is like handing a drowning man a glass of water,

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

If you enjoyed this article...

Join 5.4k readers and learn something new every week with Web Weekly.

Web Weekly โ€” Your friendly Web Dev newsletter
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