WDRL — Edition 310: 4-day Work Weeks, Awesome CSS, Image Performance, and Type-safe APIs.

Celý článek

Hey,

in my area, spring is arriving and while today we had some snow falling again, I’m regularly in my market garden again, planting vegetables, sowing radish, salads, carrots and more. It’s still such a great balance to my web work that I can only recommend having an outdoors activity to all those sitting in front of screens all day.

In my current projects, TypeScript, React and other tools are set as defaults. But I also realize that a lot of the standards I have in my mind are still not a default: responsive image optimization, bundle optimization, code splitting, performance audits and budgets, accessibility checks. Is it worth the effort of building type-safe code that in the end is transpiled anyway when we’re serving a nearly 1MB one-in-all JavaScript bundle containing scripts, styles and more? Is it worth including a huge UI library if we’re not going to use the entire design system anyways and just want to not rebuild behavioural things like modals, sidebars, menus etc? Sometimes I think we still forget that while developer experience is nice and important, user experience always comes first.

News

• With iOS and iPadOS 16.4 beta 1 comes support for Web Push for Home Screen web apps, Badging API, Manifest ID, and for Safari RegExp lookbehind assertions, Import Maps, OffscreenCanvas, Media Queries Range Syntax, @property, font-size-adjust, Declarative Shadow DOM, and much more.

Generic

• An in-depth course on images for the web. As most of our websites today contain a lot of images, some of them quite large, we all should read that guide and follow it when building websites. In nearly every project today I need to hint people towards the <picture> element, srcset attribute or modern formats like WebP, AVIF, mozJPEG and show the browser’s network performance tab to underline the importance of image optimization.

UI/UX

• Katie Hempenius shares how to build proper font fallbacks with the new size-adjust and font metric overrides to reduce layout shifts.

Tooling

• End-to-end typesafe APIs made easy with tRPC. This looks quite interesting and if you’re not using Remix.run already this may be of interest for all who want a typesafe app and server codebase.
• Want to learn more about what VS Code can do? Here’s VS Code can do that to tell you.

Security

• This in depth article explains how to use biometric authentication on a website.

Web Performance

• Stoyan Stefanov shares the possibilities of unblocking inline JavaScript and CSS with async module scripts.

HTML & SVG

• What’s the best way to build and provide a favicon? Here’s a quite simple guide: Prefer SVG over PNG, trust browsers to downscale, drop obscure formats.
• Paul Hebert discovered that apart from SVG fill, stroke properties, we can also set the r (radius) attribute in CSS.

JavaScript

• If you’re into TypeScript and want to prevent an object to be mutable, we can do a const assertion: const resource = {id: '123'} as const; to make it truly immutable. In my current project, we use this regularly as I think this is how it should be in code that’s written type-safe (otherwise, I think, normal JavaScript is the better choice).
• Delete your timeout functions and shake off their bugs, here's the event you really need: The scrollend event is here. For browsers that does not support, there’s a nice polyfill available so we can progressively enhance.
• Remy Sharp notices that React's useEffect swallows async errors and shows the various ways we can write our code accordingly.

CSS

• The masonry keyword allows you to create masonry grid layouts which is so nice but unfortunately not yet supported
• With the @font-palette-values declaration we can configure multi-colored webfonts.
• In CSS we can declare logical width and height values by using the inline-size property and vi or vb as viewport units. This is quite nice when working with rtl, ltr, or vertical layout modes.
• With the relative color syntax we can modify existing colors using color functions. If an origin color is specified, each color channel can either be directly specified, or taken from the origin color and modified. Another very useful but not easy to understand CSS function.
• It’s fun: I think most of the recent issues were filled with new CSS stuff and yet, when looking at Ahmad Shadeed’s CSS wishlist, I can +1 almost all of them. They would all make my everyday life again easier.
• All major browser engines now support last baseline alignment in CSS grid and flexbox.
• You can use mask properties to apply a mask to an element to create a cut-out or image text-effect.
• Manuel discovered: Rules within a container query only apply to descendants of that container, so they’re scoped.
• It’s possible to animate various CSS Grid properties like gap, grid-template-columns, and grid-template-rows.
• The margin-trim property allows a container element to trim the margins of its children where they adjoin the container’s edges. This allows us to finally style highlight sections and various other teasers way more easily depending on their context and parents, yay! Hopefully other browsers than Safari (Tech Preview) will follow soon.
• We can use the :has() pseudo-class as a previous sibling selector.

Work & Life

• In the U.K, a recent pilot program, the world's largest trial of a 4 day week has ended and here are some of the results: 92% of the participating companies will continue the four day week voluntarily, 29% making this a permanent policy. Most employees were less stressed-out, fatigue, and found it easier to balance work and family. Business revenue and velocity of people stayed mostly the same, slightly increasing and, most importantly, the number of people leaving the companies dropped by 57%!

If you liked it, please contribute any custom amount here. Thank you!

Anselm