Web Weekly #101

Guten Tag! 👋

Do you want to catch up with all the new CSS features? And then want to establish a strategy to use them in production? Or make a great impression when you onboard a new job?

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

Our friends at Google released a new WebDev term at Google.io — "the baseline". Usually, I'm no fan of new tech lingo (MPA anyone? 😅), but I can get behind this one.

The baseline describes features supported in the current and previous versions of all major browsers (Chrome, Edge, Firefox, and Safari). So that it replaces the mouthful "feature ABC is cross-browser supported".

Grid entry on MDN showing that the feature is in the baseline.

And the term isn't only a Google effort but a collaboration of Apple, Microsoft, and Mozilla. Get ready because we can expect many new baseline widgets like those already on MDN. Great work!

Rachel Andrew next to a slide presenting at Google.io.

If you want to learn more about the baseline, Rachel Andrew gives more details in her Google.io session. 👏

Something that made me smile this week

Gather up the news and get ready to write, share what happened, try to make it bright. What's the best way to deliver the story. Spread the knowledge, make it worth the glory.

To be fair, this generated electro song about writing Web Weekly is fairly poor, but I appreciate the bot's attempt. 😅

Listen to Web Weekly electro

Quick links

The Navigation API

function showLoading(promise) { navigation.addEventListener( 'navigate', (event) => { event.intercept({ scroll: 'manual', handler: () => promise, }) }, { once: true } ) return navigation.navigate(location.href).finished } // show browser loading UI showLoading(new Promise((r) => setTimeout(r, 1500)))

Here's a handy snippet from the future of JavaScript navigations (Chromium-only right now) to display the native browser loading spinner. 💯

It'll be most important for framework authors, but hey—it's cool, nevertheless.

Use native UI

phind - AI search for developers

phind — The AI search engine for developers.

Disclaimer: I've used phind only for a few code questions, but I liked that it shows the sources leading to an answer.

Let's see if I'll adopt it for code-related "googling".

Let the robots search for you

Sticky navs considered harmful

The problem with sticky menus and what to do instead

The following might be a controversial one. Adam Silver shared why sticky navs hurt user experience. I found myself nodding along while reading.

Avoid sticky navs

TIL: There's a standard to disable terminal colors

Command-line software which adds ANSI color to its output by default should check for a NO_COLOR environment variable that, when present and not an empty string (regardless of its value), prevents the addition of ANSI color.

Did you know there's a standard to disable color codes in CLI tools? Now you do, and it's defined at no-color.org.

I just love all these single-purpose domains! 💙

Respect user preferences

The wonderful weird web – Animated Drawings

A man dancing next to animated drawings.

I plugged Jesse Smith's "Animated Drawings" project before, but it's too good not to share it again. If you want to animate your kids' drawings, this tool is for you!

Animate drawings

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

How I Landed My Dream Job – That Didn’t Exist

Dear hiring team, if you read my CV before reading this cover letter, you probably already know that I'm overqualified for this position with over 5 years of experience in People Ops. Even so, I wanted to apply and see if you'd be open for a profile like mine.

Kaylie Boogaerts, our Director of People at Checkly, told me her story of getting the job over coffee the other day, and it's a good one. Why? She applied and later signed a job that wasn't even open. 👏

How did she do it? She was bold, prepared, and knew what she was looking for. Her blog post includes tons of job-hunting advice!

Get your dream job

The one thing to do when onboarding a new job

In the final 2 minutes: ask who else you should talk to. Write down every name they give you.

And if you land your new job, here's a trick that will make you stand out.

I've started a few new jobs in my career, and onboarding practices vary a lot! If things are well-defined, you'll get a list of people you should talk to. But you can level things up! Keep track of all the names dropped in conversations and introduce yourself independently. You'll be surprised how much this practice helps!

Andrew Bosworth describes a more formalized onboarding approach that he calls the career cold start algorithm. It's worth checking out not only when you're onboarding!

Give yourself a head start

The 2023 CSS revolution

A slide titled "I/O 2023 CSS & UI"

Short'n'sweet: do you want to catch up with all the new CSS features? The Chrome devrels put together a list with everything you need to know!

Use the new and shiny

Modern CSS feature testing

Testing Feature Support for Modern CSS

And to carry on: suppose you want to live on the new cutting CSS edge; Stephanie Eckles wrote a deep dive explaining how to test new CSS features before using them.

And if you want to avoid finding out the support, Stephanie also released a new JS library to do it for you!

Test CSS feature support

6 CSS snippets shining in 2023

.panel { container: layers-panel / inline-size; } .card { padding: 1rem; } @container layers-panel (min-width: 20rem) { .card { padding: 2rem; } }

Speaking of CSS—Adam Argyle shared handy baseline CSS snippets. If you aren't using container queries, scroll snapping, or logical properties yet, this post is for you!

Use modern CSS

Random MDN – initial-letter

Paragraphs with bigger initial letters.

From the unlimited MDN knowledge archive...

Did you know that initial-letter: 3 2 is valid CSS? It works in all browsers but Firefox, and you can use it to spice up your paragraphs!

Raise the initial letter

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

TIL recap – image lazy loading depends on JavaScript execution

Why doesn't lazy load work without JS? There's only one reason why we can't have nice things: of course, it's for tracking prevention.

Here's a surprising fact from the HTML spec: loading=lazy depends on JavaScript execution. What? Yeah, I've thought the same.

Learn about the lazy-loading fun fact

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

Three valuable projects to have a look at

A new Tiny Helper

Uptime 99.99% resulting in 52m yearly downtime.

Suppose your production API promises an uptime of 99.99%; how long can it be down during the year? It's 52 minutes. 😲 uptime.is is a handy tool for evaluating SLAs.

Be certain about downtimes

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

Thought of the week

Amelia Wattenberger shared that she doesn't think all these chat / LLM interfaces are the future. Why? They don't guide the user and the results lack direction. I agree. 💯

Good tools make it clear how they should be used.

A song that makes you stop coding

Fatboy Slim cover showing a boy with wings wearing a shirt "I'm #1 so why try harder"

This week's track is Fatboy Slim's legendary "Right Here Right Now". There's not more to say than that it's one of these tracks made for the ages!

Listen to "Right Here Right Now"

This is all, friends!

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