Web Weekly #117

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

Hello, hello friends! 👋

How can you quickly find out if a web feature is safe to use? Does the definition of the sizes attribute really have to be so painful? And now that we're close to wrapping up 2023, what new features should you start learning?

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

Let's kick off this Web Weekly with some short'n'sweet HTML form trivia!

I was reading the excellent HTMHell advents calendar and discovered a nifty fun fact.

Did you know that a button can submit a form even though it's not included in one?

<button type="reset" form="form-login">Reset</button> <button type="submit" form="form-login">Submit</button>

Put a button somewhere on the page, and reference the form to submit by id — done! The form attribute can be invaluable when your design requires submitting a form on the other side of the page. 😅

But today's trivia doesn't stop here!

Did you know buttons can also change a form's behavior?

<form action="/some-endpoint" method="post"> <label> Your name <input name="full-name" type="text" required> </label> <button formaction="/some-other-endpoint" formmethod="get" formnovalidate>Submit</button> </form>

I just love these HTML fun facts!

Something that made me smile this week

A notion like avatar entirely generated with CSS variables.

CSS-Peeps lets you create a notion-like avatar. And that's fun already, but check how it works!

The service uses custom properties, inline SVGs, and HTML data attributes to render your avatar in a single element. Fancy!

Create your CSS peep

Is browser diversity in danger?

\[...\], the meaning of the “multiple browser engines” part is in serious danger of significant change. Unless something dramatically reverses Firefox’s trends, the ’fox could soon be whimpering its way down an ugly, slippery slope to irrelevance.

Firefox and Chrome are my daily drivers. And I'm very aware that Firefox's market share is declining every month. 😓 But I didn't know that a US standard defines what browsers a government website has to support.

How is it evaluated if you "must support Browser ABC"? You guessed it right — by market share. And the threshold is 2%. Firefox has 2.2% right now. Bryce Wray draws a rather sad picture of browser diversity and the open web.

Let's hope he's wrong with this one!

Let's hope!

Bye bye, margin auto?

An alternative to the container class

Kevin Powell advocates for using this hefty CSS grid snippet.

grid-template-columns: \[full-width-start\] minmax(var(--padding-inline), 1fr) \[breakout-start\] minmax(0, var(--breakout-size)) \[content-start\] min( 100% - (var(--padding-inline) * 2), var(--content-max-width) ) \[content-end\] minmax(0, var(--breakout-size)) \[breakout-end\] minmax(var(--padding-inline), 1fr) \[full-width-end\];

Yeah... I feel you — that's a mouthful. And yet, it feels very clean to use once set up. What do you think?

Use fancy grid

All the new CSS in a single post

All the new 27 CSS features summarized. Including scope, nesting, popover, color level 4 and many more.

2023 has been the year for CSS and the web. Una, Adam and Bramus wrapped up the year and shared all the new and shiny we can use today.

If you read one post in this Web Weekly, that's the one!

Wrap up this stunning CSS year

Soon to ship in Chromium: sizes=auto

An image element with defined "sizes=auto".

Loading responsive images is tricky (and annoying). srcset is quickly defined, but setting up sizes is a pain. The attribute is noisy, and we have to put layout information into the semantic markup so the browser can load images quickly. It's necessary but not great.

But have you ever wondered why the browser still needs the sizes attribute for lazy loaded images? When an image is lazy loaded, all layout information is available. Why can't the browser evaluate the best image itself?

And that's right! Chrome ships sizes=auto, and Eric Portis shares what you need to know!

Learn more about auto-sizing

The wonderful weird web – Learn Morse Code

Learn Morse Code

There's nothing serious to see here; it's just an app teaching you how to send Morse code. #ilovetheweb

Press that button

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

Baseline updates

New MDN baseline widgets. It includes three types: "limited availability", "newly available" and "widely available".

Google announced "the baseline" last May. A web feature in (on?) the baseline was supposed to be supported by the last two versions of every browser engine.

But with all these people ignoring the big red update button, support in the last two browser versions doesn't guarantee a feature's safe use.

The baseline got a definition update (☝️), MDN already includes it, and you can now see if a browser feature is well supported within a second. 👏

Adopt the baseline

mask-clip and mask-composite

Youtube video of Mojtaba Seyedi showing a Codepen example.

Mojtaba Seyedi shared how you can create an animated CSS border. The video starts basic, but it gets very fancy with CSS masking towards the end.

I plan to animate the button borders on my blog for quite a while. Nice timing, Mojtaba!

Put on a mask

Random MDN – autocapitalize

<label for="sentences">autocapitalize="sentences"</label> <input type="text" id="sentences" name="sentences" autocapitalize="sentences" />

From the unlimited MDN knowledge archive...

Did you know you can define autocapitalize to control when the caps key should be active on mobile devices? Now you do!

Control the caps

TIL recap – Regex multiline mode

// Match strings that: // - start lines with a digit (^\d) // - are followed by any sequence of characters (.+?) // - include a colon (:) // - consider multiple lines (m) // - and test for all possible matches (g) winners.match(/^\d.+?:/gm); // -> \["1st:", "2nd:", "3rd:"\]

How do you test if a new line in a long string starts with a specific phrase in JavaScript? One way is to split the string on every line break and iterate through the returned list.

But could there be a sweet one-liner? Regular expressions running in multiline mode can do it, too. 💪

Use multiline

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

New to the platform — popover

<button popovertarget="my-popover">Open Popover</button> <div popover id="my-popover">Greetings, one and all!</div>

Hallelujah! HTML is becoming a major upgrade with the Popover API. popover, popovertarget and popovertargetaction are new attributes to open/close elements. And there's no JS required!

You can use popovers for tooltips, overlays and anything that opens with a click. But how's a popover different than a <dialog>?

Hidde has you covered in this quick 7min talk.

Hidde on stage showing all different characteristics of modals and popovers.

And can you use it today? Almost!

Browser support info for popover showing support in all engines but Firefox (behind a flag).

popover isn't in the newly available baseline yet, but we're almost there! Firefox supports popover behind a flag and intents to ship soon. Yay!

I'm stunned — you almost made it to the end!

If you made it this far, maybe you want to receive the Web Weekly newsletter once a week.

Three valuable projects to have a look at

A new Tiny Helper

Visualization of n npm package showing the download numbers for each major version.

For the npm package maintainers: suppose you want to see download statistics for every version of your package; this tiny helper helps out!

Analyze your packages

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

Thought of the week

You might know that I like to write down what I learn. And obviously, if people read my little musings and learn something, it makes me happy.

Thanks for reading this newsletter, by the way! 💙

But now that all this AI stuff is happening, I see more and more SEO blogs generating thousands of posts with LLMs. 🤮 There's no creativity, no voice, no meaning. It's just pure traffic hunger resulting in sh**** search results.

Searching and navigating the web is changing, and no matter what all the traffic grifters are doing right now, Ian Betteridge is correct in saying that Google Search will soon be the biggest summary engine of all.

Any content you can create with an LLM can be done better by Google at the top of its results pages.

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! 👋

Was this post interesting?
Yes? Cool! You might want to check out the email version. The last edition went out 5 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