Web Weekly #94

Guten Tag! πŸ‘‹

Should the web provide native functionality to hide elements visually? What features will Node.js ship to compete with Deno and Bun? And how much code is necessary to say "Hello world" using current frameworks?

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

Yeah... I had to skip a week with Web Weekly. 😒 The last two weeks were just way too busy. Busy but good because I've become a Google Developer Expert. Yay! It's so cool to connect and learn from all these smart people in the program. I'll keep you posted about it!

And secondly, we had another launch week a Checkly (this is where I work 🫣). If you're into testing, monitoring or Playwright automation stuff to ship excellent software, check out all the live sessions we had on YouTube.

But let's get into nerdy stuff!

Styling headlines in a responsive world is painful. Where do you put the line break? And how can you avoid that there's this one annoying word jumping to the next line, not knowing about the viewport or container size?

It's one of these long-lasting web platform problems I labeled "doesn't work" long ago. But is it that hard to solve this problem?

Two column layout showing an unbalanced and balanced headline.

Sure, you could slap some JS onto it. Adobe did that years ago, and Shu Ding released a React component to create balanced headlines.

If you ask me, having a dangling word isn't a big deal, but it would be nice to have a solution baked into the platform, right?

And there's news: Chrome will ship text-wrap with version 113 end of April.

text-wrap is a nice-to-have feature, but what about the other browsers? Mozilla says "it's worth prototyping"; Apple still needs to make a statement, but if Jen Simmons is already looking into it, chances are good that we can have pretty headlines in Safari soon, too.

Something that made me smile this week

Cartoon showing a person with a "disliking" speech bubble.

This video is wonderful; if you find yourself arguing with someone, it'll make a handy response.

Don't like things, but...

Quick links

TIL β€” Git supports dry runs

git clean --dry-run . Would remove not-important.js Would remove untracked-but-very-important.js

Git is pretty good at being a safety net, so you don't lose files and code changes. I learned this week that it also supports dry runs to make commands such as git clean less scary.

Don't lose things in Git

::marker

A graphic visualizing how `::marker` could be rendered with a content SVG.

Do you use the ::marker pseudo-element? If you don't, Ε ime Vidas published everything you need to know about custom list markers.

Mark the lists

The hidden functionality of native HTML elements

Once you use ARIA to replace native HTML interactive bits, it starts to get a little riskier. Sure, you can make 'div role="button"' functionally the same as 'button' once you strap on the correct event handlers. But do you really know all the interactions to support?

Building custom UIs can be a drag. And sometimes, it might just be easier to reimplement a native HTML element and slap some JavaScript on it, right?

Sure, the JS hammer is always an option, but Adrian Roselli once again reminds us that things aren't that easy. Native HTML elements provide focus handling, accessible semantics, and clearly defined events. So you should cover all of these before reimplementing your own to be a good web citizen.

Side note: I'm still amazed that buttons fire keydown when you hit Enter but keyup when you press the space bar. 🀯

Know about all the native functionality

A native way to visually hide elements β€” yes, please!

/* Hypothetical */ display: visually-hidden;

You probably have a .sr-only or .visually-hidden class somewhere in your code base to hide elements visually but keep them accessible for assistive technology.

If you want to learn how this cryptic CSS works, this guide is golden.

But here's the thing: we all copy and paste the same snippet from project to project. Ben Myers made a strong (and well-researched) case for baking this functionality into the web platform! πŸ’―

Keep things accessible

The wonderful weird web – it's puzzle time!

A sliding puzzle game.

I loved these sliding puzzle games when I was little. πŸ’™

Puzzle'n'chill

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

The Node.js future

Single executable apps β€” (Just landed!) Added in v19.7.0, there's now a way to package your app code along with the Node.js runtime so that you can distribute a single executable binary file.

Providing and distributing JavaScript-based command line apps has always been a pain. Sure, folks could install them via npm, and you could define the allowed node versions and configure things, but it hasn't felt great.

And for this reason, one of the things I like about the Deno runtime is that it allows the creation of single-file executables.

But check this out! Node is catching up, and there are fantastic native things in the making:

  • a test runner
  • a file watcher
  • an argument parser
  • fetch
  • and yes, single-file executables are also on the list! πŸŽ‰

Use the latest and greatest!

How to guarantee that 3rd parties aren't taking you down

And while implementing third-party resources has downsides for performance and you should self-host your assets when possible, sometimes relying on external files is unavoidable. But be warned β€” using them can sometimes cause real headaches.

As mentioned, I'm dabbling with Playwright a lot at work. Last week I wrote a guide explaining how to monitor your 3rd party frontend resources.

Why would you do this? Well... depending on how you implement 3rd parties, another one's downtime (or an adblocker) can take you down. 🫣

Be sure that an adblocker isn't breaking your site

A handy :has() animation trick

Zoran Jambor explaining a hover effect on YouTube.

I love tiny CSS tricks. Zoran Jambor, the curator of the fabulous CSS Weekly newsletter, shared how to use the new :has() pseudo-class to create directional CSS effects.

Whenever I read something about new CSS stuff, I wonder "Is it there yet?". :has() still needs to be rolled out in Firefox, but Zoran's approach can be treated as progressive enhancement. πŸ’ͺ

Level up your animation game

How much tooling code do you need to create a website?

A graph showing the node_module weight for current frameworks. Gatsby leads with 583mb followed by remix with 497mb.

How much code must you download to reach "Hello world!" in a modern web dev world? I'll leave it to Zach Leatherman to answer this question. 🫣

Investigate frameworks

Random MDN – media query change events

const mql = window.matchMedia("(max-width: 600px)"); mql.onchange = (e) => { if (e.matches) { /* the viewport is 600 pixels wide or less */ console.log("This is a narrow screen β€” less than 600px wide."); } else { /* the viewport is more than 600 pixels wide */ console.log("This is a wide screen β€” more than 600px wide."); } };

From the unlimited knowledge archive called MDN...

Did you know that media queries in JavaScript trigger change events? Now you do!

React to changes

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

TIL recap – media queries can be nested

@media not print { @media (min-width: 0) { p { font-weight: bold; } @media (max-width: 750px) { p { background: yellow; } } } }

Native CSS nesting is already on the horizon, but did you know you can nest media queries already?

Nest your media queries

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

Three valuable projects to have a look at

  • sverweij/dependency-cruiser – Validate and visualize dependencies.
  • google/zx – Oldie but goldie: A tool for writing better scripts.
  • bagder/uncurled – Everything the cURL maintainer knows and learned about running and maintaining the project for three decades.

A new Tiny Helper

"Build a better mobile input" UI showing a virtual keyboard preview.

How often do you use your phone to fill out forms? I keep it to a minimum because a computer provides a better experience. A virtual keyboard is the wrong tool for sensible info and complex data.

There are HTML attributes to improve the mobile experience, though. If the type, inputmode and autocomplete attributes aren't in your toolbelt yet, this week's tiny helper shows how to use them.

Build better mobile inputs

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

Thought of the week

Oh man, this week's quote hits home big times! Ellie Hughes argues that catch-up lunches aren't the best way to spend time with friends and family. And sure, it's tough to experience things together, but I'm convinced it's worth it!

I would never have imagined that some of my closest friendships would one day be confined to a small blue rectangle on my Google calendar every other month.

A song that makes you stop coding

Death Cab for Cutie - Pepper (a cloudy city landscape)

I'll see one of my Indie heroes, Death Cab for Cutie, on Thursday. And I can't wait!

Listen to "Pepper"

This is all, friends!

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