Web Weekly #116

Hello, hello Friends! 👋

How does reactivity work in JS frameworks? What's the deal with the oklch() CSS color function? And how can you ship responsive videos on the web?

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

GitHub rolled out new markdown rendering features to give authors more styling options. And they continue to mess with extend the markdown syntax.

GitHub Markdown example showing how a custom blockquote syntax is rendered to a colored highlight note with an icon.

You can now render a custom headline, icon and some color if you use a blockquote with the > [!NOTE] syntax. Fancy!

In total, there are !NOTE, !TIP, !IMPORTANT, !WARNING and !CAUTION.

Note, Tip, Important, Warning, Caution rendered in the GitHub UI.

And that's all cool, but I'm just no fan of these custom markdown solutions. It's all fine for GitHub, sure, but GitHub markdown doesn't stay on GitHub. npm is only one example; does npm support this rendering syntax? (I don't know...)

And what happens if a markdown renderer doesn't know what to make of > ![NOTE]?

Common rendering of the new markdown syntax leading to "\[!NOTE\]" in the rendered result.

Is this terribly broken? I guess not. But is it great? Not at all.

And why don't they standardize these callouts? The GitHub flavoured markdown spec was last updated three years ago. 🤔

And I keep thinking about Markdown in general. It is extensible by default with good old HTML. Why not use it? The details element works on Github, and support for the picture element was added to enable dark mode images. Why not use something HTML-like?

And as more people are talking about web components lately, why not have a <callout /> component? It could allow for setting a callout headline, Octicon and color.

There are probably reasons I don't know. And I can't even imagine shipping for an audience like GitHub's. I'll adopt the new syntax for issues and PRs but will be very cautious when using it in readmes.

Either way, have fun styling your PRs, issues and docs! (or not)

Quick links

How to shim native Node modules in a serverless world

JavaScript code: export function stat(file: string, cb: (err: Error, stat?: any) => void) { cb(new Error('No filesystem')); }

If you're jamming in the serverless world, you might have encountered situations where native Node.js modules or globals like fs or Buffer aren't available. Too bad, but once you are aware, your source code can work around it.

But what if you want to use an npm package that's not built for serverless, and it automatically reaches for the file system?

George MacKerron describes how to shim packages and use bundler magic to levarage the ecosystem. Fancy!

Use the ecosystem everywhere

How to build your own reactive DOM framework

So there you have it. In the span of one (lengthy) blog post, we’ve implemented our very own JavaScript framework. Feel free to use this as the foundation for your brand-new JavaScript framework, to release to the world and enrage the Hacker News crowd.

Nolan Lawson explains how you could compete with Lit, Svelte and Solid by writing your own JS framework. Should you do it? Please don't!

But here's an in-depth article covering tagged template literals, the template element, and the Proxy object. And all these are good to know about. 👏

Use the platform

How browsers evaluate an element's width and height

The secret is in this summation: to determine width you look up the tree, to determine height you look down the tree.

Jim Nielsen quoted Josh Comeau about something I'd never thought about when doing page layout. Wild!

Rethink your layouting

Netlify is catching up

Code examples for Netlify Blobs and Netlify Image CDN

Almost all my things run on Netlify. And I was worried already because, featurewise, it's been a bit quiet. But two new betas just entered the stage.

I'm very excited about storage to ditch my Airtable connections. But before going all in, keep in mind that the pricing of each is still tbd. 💸

The paint order of view transitions

CSS code: ::view-transition-group(footer) { z-index: 100; }

Maybe you have played with view transitions (Chromium-only) already and noticed that animated elements are always rendered above other elements — even fixed-positioned ones.

Nic Chan shared how to work around this behavior. 👏

Stack your transitions

The wonderful weird web – stranger.video

"Stranger video" next to Stefan looking into the camera

I had a good laugh yesterday. stranger.video connects you with random people to play a starring game. Whoever blinks first loses. At some point, we were eight people staring each other into the ground. 😆

Obviously, this idea gives strong chatroulette vibes, and to avoid all the creeps, it blanks the camera if there's anything but eyes to see. Bravo!

Stare at people

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

Not so "weird" debugging tricks

JavaScript code: (function () { let last = document.activeElement; setInterval(() => { if (document.activeElement !== last) { last = document.activeElement; console.log("Focus changed to: ", last); } }, 100); })();

Short'n'sweet: Alan Norbauer collected 12 hands full of JavaScript debugging tricks. I'm sure you'll find something valuable in there!

Debug like a pro

Surprising CSS selector facts

Be careful! .a .b .c is not the same as .a :is(.b .c). The first matches any .c that is a child of .b that is a child of .a. The second matches any .c that is a child of .a and .b, regardless of order!

It's time to open a bottle of champaign because with :has(), :is(), :where() and native selector nesting, CSS is getting more and more super powers. But the new and shiny comes with some footguns.

Scott Vandehey shared quite a few! 👏

Get surprised

oklch() retains lightness on hue rotation

The same color displayed in hsl() and oklch(). When changing the hue angle oklch() retains its perceived lightness while hsl() can be drastically lighter/darker.

I finally made the time to play with oklch() and wanted to see if this new color function maps human lightness perception as promised. Spoiler: it does!

Avoid contrast issues

Random MDN – autocomplete

HTML code: &lt;label for=&quot;firstName&quot;&gt;First Name:&lt;/label&gt; &lt;input name=&quot;firstName&quot; id=&quot;firstName&quot; type=&quot;text&quot; autocomplete=&quot;given-name&quot; /&gt; &lt;label for=&quot;lastName&quot;&gt;Last Name:&lt;/label&gt; &lt;input name=&quot;lastName&quot; id=&quot;lastName&quot; type=&quot;text&quot; autocomplete=&quot;family-name&quot; /&gt; &lt;label for=&quot;email&quot;&gt;Email:&lt;/label&gt; &lt;input name=&quot;email&quot; id=&quot;email&quot; type=&quot;email&quot; autocomplete=&quot;off&quot; /&gt;

From the unlimited MDN knowledge archive...

Do you use autocomplete and all the correct attribute values to make automagically filling forms as easy as possible? Maybe you should. 😉

Ease auto-completion

TIL recap – scrollIntoView options

JavaScript code: document.querySelector('.some-elem').scrollIntoView({ behavior: 'smooth', // 'auto' or 'smooth' block: 'center', // 'start', 'center', 'end' or 'nearest' inline: 'center' // 'start', 'center', 'end' or 'nearest' });

Did you know that when you scroll elements into view with scrollIntoView, you can define where the element should be scrolled to? Now you do!

Scroll scroll scroll!

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

New to the platform — responsive video

HTML code: &lt;video&gt; &lt;source media=&quot;(min-width: 2000px)&quot; src=&quot;large.webm&quot; type=&quot;video/webm&quot;&gt; &lt;source media=&quot;(min-width: 2000px)&quot; src=&quot;large.mp4&quot; type=&quot;video/mp4&quot;&gt; &lt;source media=&quot;(min-width: 1000px)&quot; src=&quot;medium.webm&quot; type=&quot;video/webm&quot;&gt; &lt;source media=&quot;(min-width: 1000px)&quot; src=&quot;medium.mp4&quot; type=&quot;video/mp4&quot;&gt; &lt;source src=&quot;small.webm&quot; type=&quot;video/webm&quot;&gt; &lt;source src=&quot;small.mp4&quot; type=&quot;video/mp4&quot;&gt; &lt;/video&gt;

Isn't it weird that everybody talks about the massive performance impact of poorly-sized images, and yet it's fine that we don't have responsive videos on the web?

Up until now! Firefox 120 shipped media attribute support for videos. So did Chrome 120. And Webkit... they support media since forever. Great news for a leaner web.

Scott Jehl explained (and partly implemented) the new feature.

Ship the best video

Three valuable projects to have a look at

A new Tiny Helper

QuickType UI showing how a JSON payload was transformed to TypeScript type definitions.

If you're looking for a quick way to transform JSON payloads into TypeScript types, this is what quicktype does. ✨

Create the types

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

Thought of the week

Cory LaViska discussed the usage of (meta) frameworks. 👏

In this industry, you don't win by building well-architected apps. You win by shipping fast and moving on.

This is all, friends!

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

If you think there’s something that needs to be improved or something that you enjoyed, 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! 👋