WDRL — Edition 304: New CSS, an unplugged life, and new Open Source challenges.

Celý článek

Hey,

when I started this newsletter in 2013, I’d never imagined to writing this for nine years, to have thousands of subscribers via email, and many more via the website, social media, and the RSS feed. With many ups and downs, changes in schedule, and ups and downs in motivation, I’m glad to have this project still alive, to get feedback from my dear readers (you), and seem to have a positive impact on web developers’ work lives. This is what still motivates me today.

But what remains open is the question of monetarizing this project. I have always accepted contributions, but they decline every year. And while the monthly schedule brings a bit more flexibility, writing the newsletter is the big chunk of work. Right now, I’m happy if the contributions at least pay my hosting and sending bills.

If you have an opinion on the topic, please let me know whether you’d favor relevant ads in the newsletter or prefer to contribute regularly by replying to the email. Until I’ve come to a decision, you can help me with a small contribution.

—Anselm

News

• Safari 16.1 is coming and brings animated AFIV, Web Push for macOS Ventura, Passkey support, and some bug fixes and improvements.

Generic

• The team from web.dev collects cross-browser UI components that include decent design, user experience, accessibility, markup, and functionality. A nice library to look at from time to time…

UI/UX

• Jenni Nadler shares the importance of writing and designing good error messages. She shows some not-so-great examples that we all have seen too often and explains how to improve them by giving the user a piece of actionable advice instead of the error itself.

Tooling

• broz is a simple, frameless browser for making nice screenshots of a website without any user interface around the page.
• Dropbox just released Capture, a handy tool to record videos and screens. But it’s actually made to replace lengthy remote / video-chat stand-up meetings in teams, to record learning courses, and to streamline the onboarding of new team members.
• Paul Irish has this nice script of using ffmpeg and vidstab to stabilize your smartphone videos and make them look professional.

Security

• ZenRows digs deep into Cloudflare’s bot protection and explains how to bypass it. An impressive deep dive into modern network and security technology.

Web Performance

• Abdelrahman Abdelhafez shares the pitfalls of running a node.js server and how at Trivago they slowed it down substantially by using a log function incorrectly and by fixing it, they cut their server memory load in half. How did they make this mistake? They tested in their test environment which wasn’t a 100% clone of the production environment. Instead, they ran some load tests but didn’t profile again in production. Lesson learned, and shared so we can all benefit from it — thank you!

HTML & SVG

• Stefan Judis on how to mark up links by defining a relationship to them. If you ask “why?”, here’s the thing: Search engines need this information to classify the information and use it for their rankings. If you don’t add rel="sponsored", or rel="ugc" for user-generated content (comments, social platforms) you may be punished for the link while you can’t even control it. A simple SEO trick that’s easy to implement and protects all the effort to get a good ranking.

Accessibility

• Steve Faulkner shares how to mark up content as a subheading, subtitle, alternative title, or tagline using <hgroup> and <p> instead of a <h3> or <h4> element.

CSS

• Ryan Mulligan shares how to break out of default content widths using CSS Grid named areas and newer CSS sizing functions like clamp() or minmax().
• Jane Ori shows us how to use CSS-only Type Grinding to allow your design tokens written in your CSS to be transformed into any other values without relying on JavaScript. ????
• Sacha Greif digs deep into new CSS ideas that are currently being discussed or landing in browsers soon, such as real CSS Toggles (replacing things like the checkbox hack), a switch() function to offer multiple values inline, Intrinsic Typography, patterns, and finally, the wild idea of animating things to auto values (this will be a big one, once possible). A nice look into the future!
• Harry Roberts on when to use the star selector which generally consumes a lot of resources. Browsers resolve selectors right to left, so more often than not, something like .sidebar * {} selects ALL of the DOM and then discards the majority of it. But: On very long blog posts, it’s actually quite reasonable to use!

Work & Life

• “(…) never look at your phone in a situation where it wouldn’t be appropriate to read a book.“

  This is one good piece of advice out of many from Mehret Biruk, taken from an article sharing a couple of easy tricks to be less addicted to digital media.

Go beyond…

• “Copi­lot intro­duces what we might call a more self­ish inter­face to open-source soft­ware: just give me what I want!”
  And so we have to discuss whether Copilot as a concept for the web is a useful addition or a harmful service that will cause problems with how we see and develop open-source software.

If you liked it, please contribute. Thank you!

Anselm