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

Publikováno: 27.3.2023

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

Tooling

Security

Web Performance

HTML & SVG

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

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

Nahoru
Tento web používá k poskytování služeb a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tímto souhlasíte. Další informace