Published at
Updated at
Reading time
9min
The Web Weekly newsletter keeps you up to date, teaches you web development tricks and covers all things working in tech.

Guten Tag! Guten Tag! πŸ‘‹

What are the new 2024 JavaScript features? What's a good fallback strategy for using container queries today? And do we need yet another browser engine?

Turn on the Web Weekly tune and find all the answers below. Enjoy!

Carlos listens to Grace Jones β€” I've Seen That Face Before (Libertango)

I met her in the film Frantic, by Roman Polanski, which I really love, and I think they fit together wonderfully to give atmosphere to a fascinating Paris.

Do you want to share your favorite song with the Web Weekly community? Hit reply; there are three more songs left in the queue.

This week's biggest news was that Chrome Canary now has a built-in LLM (Gemini Nano) accessible via window.ai.

const session = await window.ai.createTextSession(); const result = session.promptStreaming(inputText);  for await (const chunk of result) {   textarea.value = chunk; }

Here's the explainer document about shipping LLMs in browsers if you want to learn more about it.

Using a local model has some advantages. You're not sending sensible data to Open AI and friends. It works offline. It's probably faster. It's a win-win, right?

But embedding LLMs in browsers is risky business. For years, browser makers have been working towards interoperability. New browser features should work the same way in all browsers. And they all align and plan to make it easier for us web developers.

Patrick has some very valid concerns about shipping LLMs in browsers.

Different models respond differently to the same prompt and require different prompt engineering techniques. The results that a model generates now may be different tomorrow as the model evolves and will be different from another model.

If Google ships its LLM (Gemini Nano) in Chrome and Apple ships another LLM because it has to catch up, what does this mean for us web developers? Receiving predictable results from one LLM can be hard enough already. How should we deal with a wonder box of LLMs shipping across browsers? Do we then have to adjust prompts for every browser LLM combination to receive similar results?

There are no answers yet, and there are tons to figure out, but generally, I prefer sites offering me well-designed AI features computed on my machine over those sending all my data to the latest and greatest SF AI startup.

What's your take?

Something that made me smile this week

The macOS bin surrounded by some flies.

If you struggle to clean up your macOS trash, try the Banana Bin. The more things you have in the trash, the more buzzing friends you'll make.

Find a reason to take out the trash

Pro tip: I barely use the trash folder because I delete files automatically.

πŸ”– Open tabs

What's 1ch anyway?

The ch unit refers to the width of the β€˜0’ character within the selected font, or 0.5em if no β€˜0’ is present. Unless you have a line made up entirely of zeroes, or are using a monospaced font, a width of 66ch will not give you a line containing 66 chars.

My blog posts are limited to 60 characters per line via max-width: 60ch, so they will be easy to read.

But I must admit that I've never thought about what the ch CSS unit means. My brain just computed, "Alright β€” the paragraphs are now 60 characters wide. Good to go!".

TIL β€” when you define 60ch, it's very unlikely that 60 characters fit into your container.

Reconsider line length

useEffect best practices

You might not need an Effect

If you write React for a living, double-check that you're following all the useEffect rules. I found the docs excellent, and the section about useSyncExternalStore and data fetching is well worth your time. I promise!

Double check your React code

New JS features

Ecma International approves ECMAScript 2024: What’s new?

Short'n'sweet: the next version of JavaScript was agreed upon, and Axel, as always, tells us what we need to know about the new specs.

Use the latest and greatest

How to avoid boolean function signatures

fetch(accountId, false, true, true);

An oldie but goldie, Steven explains why you should avoid booleans in your function signatures. I wholeheartedly agree β€” an options object or enums, as described in the post, are almost always the better choice.

Avoid boolean

You're halfway through!

Wowza! Would you enjoy getting Web Weekly straight to your inbox?

The wonderful weird web – Keyboard Similator

A virtual 3d keyboard

I can't explain why it's so satisfying to see keystrokes on a virtual keyboard while in front of a real keyboard β€” but it just is. πŸ˜…

Press the keys

Accessible "SVG forms"

An interactive map in which you can select states via mouse and keyboard

Whenever you start considering reimplementing form functionality with ARIA, you better have a good reason. It's dang hard to do right. Jake had a good reason β€” a client wanted a form that could be used as a clickable map.

I'll let you decide if this approach is good, but the post includes many SVGs and accessible goodies, so it's more than worth reading!

Fiddle with SVG

A container queries fallback strategy

<responsive-container   name='sidebar'   breakpoints='{"bp1":500,"bp2":1000,"bp3":1500}'> </responsive-container>

Not too long ago, Chris wondered if we all actually use container queries after requesting them for so long. They're generally safe to use because all major browsers have supported them for over a year.

If you're still afraid of unsupporting browsers, Philip from Google took the matter into his own hands and described a fancy fallback strategy. He deserves bonus points for using web components. πŸ’™

Use container queries

Node, Bun, or Deno? 🀷 But...

That’s why it makes sense to preserve the ability to switch runtimes easily. It doesn’t matter if you want to use Node.js or Deno or Bun in production right now. What you really want is the ability to change your mind later with as little pain as possible.

The JS runtime competition is on, and we all benefit from it. Competition is good.

But Nicholas reminds us that Bun and Deno are venture-baked "company runtimes" that could disappear tomorrow. Node, on the other hand, is an open source community project.

Does this mean you shouldn't adopt Bun or Deno? Not at all β€” but maybe you want to keep Node compatibility to avoid future headaches.

Be safe

Random MDN – long-animation-frame

const observer = new PerformanceObserver((list) => {   console.log(list.getEntries()); });  observer.observe({ type: "long-animation-frame", buffered: true });

From the unlimited MDN knowledge archive...

If you're debugging poor INP values, Chromium ships the new long-animation-frame API.

Debug the jank

TIL recap β€” JS object property order is predictable

const obj = {   '2': 'integer: 2',   'foo': 'string: foo',   '01': 'string: 01',   1: 'integer: 1',   \[Symbol('first')\]: 'symbol: first' };  obj\['0'\] = '0'; obj\[Symbol('last')\] = 'symbol: last'; obj\['veryLast'\] = 'string: very last';

Imagine calling Object.keys(obj)πŸ‘†...

What order will all the properties have? If you now say "property order isn't guaranteed in JavaScript" you'll be surprised that it mainly is these days.

Access the keys

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

New on the platform

Example gradient using longer color interpolation.

There's some news on the color gradient front. All major browser engines now support long color interpolation. What's that?

To color interpolations β€” one goes the short and one goes the longer way.

Considering a color wheel: if you want to go from one color to another one, you could go clockwise or counterclockwise. You could always go the longer or short path. The shorter / longer keywords let you define which one to take.

Here's a quick CodePen to see the interpolation in action.

Three valuable projects to have a look at

A new Tiny Helper

HTTP Observatory and Security headers report

Today's tiny helper isn't one but two!

Paste your site URL into the "MDN HTTP Observatory" or "Security Headers" and discover how to strengthen its security.

If your site doesn't ship CSP, you should check it out.

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

Thought of the week

Jeff's post from 2008 contains a lot of wisdom. Work-related problems are usually caused by people problems. It's always people. People are the reason why folks stick around, and people are also the reason why someone leaves a company.

The people you choose to work with are the most accurate predictor of job satisfaction I've ever found.

Did you learn something from this issue?

πŸ’™ Support Web Weekly! You can't imagine how much small donations on Patreon motivate me to sit down every Sunday.

This is all, friends!

Loved this email? Hated this email? I want to hear about it!

If you think something needs improvement or something sparked some joy, reply to this email because I want to know more!

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