WDRL — Edition 311: People-first leadership, Scoped CSS and Grid View Transitions

Celý článek

Hey,

Spring and the caprioles of April’s weather here in Germany kept me so busy that I couldn’t send out a condensed edition earlier. We had a rainy month, and my split role of being a market gardener and web developer (currently working as a Scrum Master) is already challenging. But with unpredictable weather it gets even trickier. On the other hand, being in the garden calms me down, gives me back a lot of energy and happiness, and is a nice counterpart to sitting in front of a display doing virtual work.

If the Internet is to be a place for good, we all need to confront what it’s become.
The essay by Karolina points out why search results are biased, and websites are cluttered with (mis)information. She concludes with a few things designers and developers or product owners can do to make the web a better place.

News

• Discover some of the interesting features that landed in stable and beta web browsers during April 2023: The inert attribute, CSS nesting, and a new headless mode for Chrome.
• Node v20 comes with an experimental permission model, so the gazillion npm dependencies can’t do whatever they like anymore.

Generic

• One-liners in PHP (note by myself: and other languages, looking at JavaScript) may look cool and may be handy. But are they really worth using?

UI/UX

• Adham Dannaway explores how to design a card component with data so it looks great and is well readable. Many of the tricks are applicable to other UI components as well.
• Don’t make my mistake, says Oliver Schöndorfer, and shares what’s crucial and required about color contrast for text and UI components.
• What makes a design look good? Visually pleasing designs use consistent type styles and spacing, create a visual hierarchy, and utilize an underlying grid structure.

Tooling

• Socket is proud to introduce an exciting new tool—“safe npm”—that protects developers whenever they use npm install.
• With CodiumAI, you get non-trivial tests suggested right inside your IDE, so you can code smart, create more value, and stay confident when you push. Haven’t tried but it sounds quite nice.

Privacy

• Firefox now comes with Total Cookie Protection enabled by default.

Web Performance

• Sam Rose explains how a load balancer works in a visual way.
• With the news that CSS Container Queries have shipped in nearly all stable, modern browsers, it’s time to revisit responsive images and ask how they fit in a container query world. Are we on the right path?
• A collection of best practices for optimizing websites’ Core Web Vitals performance based on the state of the web in 2023.
• Learn how to use the Slice app to remove variable font axes and reduce font file size.

HTML & SVG

• I refactored my template about a year ago and was frustrated by the state of coding email templates. Today, things seem to have significantly improved and here’s how coding email looks like in 2023: No tables required anymore, still no HTML5 elements but a few nice things and we now have an Email consortium that tries to fix the remaining inconsistencies.
• In HTML, we now have the <search> element grouping form elements into a semantic search group.

JavaScript

• Have you ever tried to build a calendar yourself? It’s quite challenging and once you come to the point of internationalization and accessibility things get quite complex. Here’s how to solve these things with modern technologies.
• Ryan Mulligan on applying a shadow to a sticky page header when scrolling using the Intersection Observer API. A pretty common use-case and here’s a very solid solution.

CSS

• Adam Argyle with a couple of modern CSS snippets that are useful to know, like how to center everything, a quick circle, a container query or logical properties.
• Ahmad Shadeed shares a lot about CSS Masking which is expected to soon having cross browser support.
• Available in Chrome and other Blink browsers now, we get nicer typography by using text-wrap: balance;.
• A new and quite interesting approach to expanding cards in a grid using View Transitions (only in Chrome though).
• Style queries allow developers to query a parent element's style values using the @container rule. They can now be used in Chrome and the card example in the article shows how useful they are for a couple of use cases. It’s nice to see these quite powerful features coming in but I feel it’s important to say that just because they exist, not everyone needs to use them. In some bigger projects I’d love to have had them though.
• Jennifer Brehm wrote up how we can achieve layouts with CSS that look like they were laid out by hand. Food for thought: Have you ever thought on writing a printed magazine using HTML and CSS?
• Keith J. Grant on the new OKLCH color format we can use in CSS (it’s cross browser supported) and why it makes sense for designers as well as developers to learn how it works.
• Didn’t I just write that? Here’s Ian G McDowell on laying out a print book with CSS. But let me give you another thought here: Did you remember writing print CSS for your recent web projects?
• Chris Coyier, the original CSS Tricks, shares hot modern CSS tricks in this short video demoing a blockquote element, including CSS nesting, logical properties like lh, text-decoration- properties, etc.
• Scoped CSS is something that’s very useful for third-party widgets. Keith J. Grant shares the new specification and Chrome has a first implementation ready. It’s also nice to have this for large-scale applications where we had to rely on BEM or CSS-in-JS tooling.
• There is now a way to transition an element to height auto with CSS alone.

Work & Life

• Adam Blanchard shares a report on growing developers as a people first engineering leader. It’s such an important topic and I can only say thank you to Adam for writing this all up for free, share it with all of you and hope that leaders, managers and other people start picking up these concepts and thoughts.
• There is a mountain of evidence to show that stress is a leading cause of common and lethal diseases, including heart attacks, cancer, anxiety, depression, insomnia, memory loss and premature aging. But how much of a role does ‘toxic’ leadership play in workplace stress, and what are the signs of a toxic leader? Simon L. Dolan just published an in-depth report on this: Recent data has shown that three-fifths of the world’s employees say their job impacts their mental health more than anything else.
• Guiding your team through organizational changes isn’t straightforward. Luckily, there are some ways you may be able to streamline the process and Addy Osmani shares them.

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

Anselm