Web Weekly #79

Guten Tag, my friend!

There's so much noise in the JavaScript ecosystem lately. Deno, Bun, Rome and probably others are coming for Node's throne. Node.js won't go anywhere soon, but there's one thing the new and fancy have in common — they are more complete toolchains.

Let be testing, linting, or TypeScript support; the newer tools come with opinionated solutions to everyday problems.

And because competition is always healthy, Node.js catches up! Yay!

There's a new experimental test runner to run unit tests (node --test).

test('top level test', async (t) => { await t.test('subtest 1', (t) => { assert.strictEqual(1, 1); }); await t.test('subtest 2', (t) => { assert.strictEqual(2, 2); }); });

The new loader argument allows you to hook into module resolution to require CSS or TypeScript files or load modules from the internet.

node \ --experimental-loader unpkg \ --experimental-loader http-to-https \ --experimental-loader cache-buster

And even though it's not shipped yet, a file watcher was merged into main and will be released soon.

Screenshare showing that Node.js restarts after file change

After inventing specialized tools doing one thing very well, we're about to enter the next era of bundled toolchains doing everything. And what shall I say, I'm looking forward to standardized projects all looking the same.

And with this, today you'll learn about:

  • projects betting on web components
  • the capture attribute
  • converting Tailwind to "normal" CSS

... and, as always, GitHub repositories, a new Tiny Helper and some music.

Lastly, welcome to the 47 new subscribers! I'm super excited to have you around! 👋

Something that made me smile this week

The museum of endangered sounds

What was your first messenger? Mine was ICQ, and it's funny that I remember its notification sounds even after twenty years. I'm sure you remember it, too, if you were using it.

The Museum of Endangered Sounds lets you relive the sounds of the past.

Remember some good old sounds

Quick links

Are web components finally becoming cool?

WebC, Rocket and Enhance logos

Is it just me, or are web components on the rise? After all these years (my first web components blog post is nine years old!), more people bet on it.

I haven't had a deeper look into the following projects, but I'm excited about all the folks betting on web standards.

The unknown capture attribute

<input type="file" id="user" capture="user" accept="image/*">

The fairly unknown capture HTML attribute is only supported by mobile browsers. What does it do? It allows you to access a device's camera. Austin Gil explains how it works. 💯

Capture it!

The good form stuff

What’s New With Forms in 2022?

Ollie Williams published an extensive guide on modern form functionality. If you haven't heard of requestSubmit, event.submitter or showPicker, this post is for you!

Use the latest form features

How to talk to C-levels

Have you presented to company executives about a key engineering initiative, walking into the room excited and leaving defeated? Maybe you only made it to your second slide before unrelated questions derailed the discussion. Maybe you worked through your entire presentation only to have folks say, “Great job,” and leave without any useful debate. Afterward, you’re not quite sure what happened, but you know it didn’t go well.

If you're working at a larger company (500+ employees), it's easy to be confused or frustrated about the company's direction. If you care enough and are lucky, you might get a chance to talk to the executives to give feedback.

I did this once, and well... I didn't change anything because influencing executives is challenging. The leaders of a company operate differently.

The following post explains how to approach upper management. 👇

Get your points across

You might not need a package for colored CLI output

Color codes in patched console functions

We're very quick with installing new packages in web development. Often we reach for dependencies to do simple things. Adding colors to CLI logs is one of these — Mazzarolo Matteo shares how to color your logs dependency free.

Avoid a dependency

Lightning CSS

Lightning CSS – An extremely fast CSS parser, transformer, bundler, and minifier.

I was skeptical about all these new build tools written in Rust or Go, but I'm sold since adopting ESBuild! My JS minification time went from seconds to milliseconds.

Lightning CSS (formerly Parcel CSS) is a CSS transformer, bundler and minifier written in Rust. If your CSS toolchain slows you down, have a look!

Speed up your CSS crunching

Magic, magic, magic

Tweet from CSSChallenges

If geeking out about CSS is your thing, I wholeheartedly recommend following Temani Afif's Twitter account @ChallengesCss. I'm not patient enough to come up with such creative CSS, but I'm amazed about what's possible.

Get creative with CSS

Random MDN – Repeating radial gradients

MDN demo showing repeating radial gradients.

From the unlimited knowledge archive called MDN...

Did you know that there's a repeating-radial-gradient() CSS function? Now you do!

Repeat your gradients

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

TIL recap – rgb and hsl support transparency

Screen Shot 2022-09-11 at 19.56.45/* evolution of the rgb function with transparency */ rgba(255, 255, 255, 50%) rgba(255 255 255 / 50%) rgb(255 255 255 / 50%) /* evolution of the hsl function with transparency */ hsla(235, 100%, 50%, 50%) hsla(235 100% 50% / 100%) hsl(235 100% 50% / 100%)

Short'n'sweet: if you use rgba / hsla color functions, you can omit the "a" because rgb / hsl support transparency. 💪

Drop the "a"

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

Three valuable projects to have a look at

A new Tiny Helper

Vanilla Breeze – Convert Tailwind CSS to Semantic CSS

Are you looking for a way to convert Tailwind to "normal" CSS? Vanilla Breeze does just that!

Go Vanilla CSS

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

Thought of the week

Shaping company culture is a rocket task. It must be defined and lived right from the kick-off. How do you want to collaborate and communicate? What behaviors are welcome and what aren't? Defining values and culture is already tricky, but keeping culture in a fast-growing environment is even harder. Every new employee will have a small piece of defining and living the culture.

How can you ensure that people behave the best way? Mike Crittenden recommends embedding it in performance reviews. 💯

If you want to change your culture, change your reviews. Change the systems that reward and recognize people. The culture will follow.

A song that makes you stop coding

Juergen Vogel singing

I've been listening to ancient German indie songs this weekend, and "Baby Melancholie" made me stop assembling a new shelf to listen. 🥰

Listen to "Baby Melancholie"

This is all, friends!

Writing Web Weekly takes me roughly five hours every week, and I pay real money for sending almost 3k emails. If you enjoy it, consider supporting me on Patreon. ♥️

Or tell your friends about it:

If you're not a subscriber, you can change that! 😉

And with that, take care of yourself - mentally, physically, and emotionally. I'll see you next time! 👋