WDRL — Edition 285: Making CSS more unterstandable, crowdsec, bfcache, web theming and finding details in climate change

Celý článek

Hey,

Now there we go with a new writing. For me, this year has been quite different so far. And no, this is mostly not about some virus spreading across the world but about changing a lot in my work and personal life. My son keeps teaching me new skills, patience, happiness. My gardening project went well the first year and we’re scaling it next year so we can grow vegetables for more than 70 people. Not to stop here, we created a network for workshops and events where local people share their knowledge to improve farming, gardening and live a more resilient and sustainable life as humans.

On the other hand, being away from client work for half a year was incredibly useful. I now have a different view on some projects again, I refocused on what’s important in projects and got away from just coding and first ask about the goals, about how to achieve them before starting to dive into code. It was one part that I was missing in my job lately but didn’t realize. By talking to other people out there from a huge variety of professional backgrounds instead of constantly living in the bubble of web developers, I gained a different view of looking at and using websites, of how technology is used and how important (or sometimes unimportant) technology is for people.

On a last note, I’m currently available for a small frontend/fullstack project so if you know something or need someone like me, talk to me. Bonus if it’s for a sustainable company, project or has a positive environmental impact.

In full honesty, Gardening is lot of fun, often really hard work, but also not super well paid. And I think I’m not ready to drop web development entirely, it can be so much fun as well!

News

• Oh yes, two new Firefox versions are here, v82 and v83 and they bring us DevTool inspection of server-send events, the Media Session API, CSS ::file-selector-button (yay!), conic-gradient, WebRender, Pinch to zoom on desktop, and more.
• Safari 14 is here and brings Web Extensions, Webpage Translation, Performance improvements, interoperability and better standards and compatibility by improving Web Platform Test passes. Safari now has a privacy report that shows trackers and third party data issues on a webpage to users quite prominently, it brings WebP support, supports CSS image-orientation, :is(), :where() (resetting specificity for the selector to 0, wohoo). JavaScript gets BigInt support and optional chaining via ?..

UI/UX

• Betsy Mikel shares how to write microcopy that improves the user experience even with a strategy how to analyze microcopy and how to collect feedback.

Tooling

• Upptime is an open source uptime and status page system, powered entirely by GitHub Actions and Issues. Cool!

Security

• Crowdsec is an open-source, lightweight service (written in Go) to detect and respond to bad behaviours and uses a global community-wide IP reputation database. Heard of fail2ban? This is a more modern approach of the service.

Web Performance

• Postgres doesn’t stop to surprise me (positively). James Coleman shares some tips on how to save space nearly for free by using a custom Ruby gem.

HTML & SVG

• Tomek Sułkowski gave us a nice tip in a tweet: Using autocomplete="one-time-code" in a form field will auto-fill an 2-FA code from messages or other apps in some browsers like Safari. This is such a nice UX and so simple to build in.

Accessibility

• Here’s Atkinson, a new free and hyperlegible font published by the Braille institute.
• Nataly Birch on email design accessibility best practices with a good few handful of tips what we can do better in emails and why we and our users benefit from it.

JavaScript

• Philip Walton shares how to build a back/forward (“bfcache” cache for nearly instant loading of pages when a user uses the browser history buttons. To be honest, I didn’t know this exists until I read the article and it’s super interesting. It’s basically a different cache layer that keeps a live capture of the page including the JavaScript heap in a separate cache. But due to this, it’s not always easy to handle, especially if you have events running on the page so this article contains the answers how to observe the bfcache and add handlers to it. In summary it’s a super powerful feature that’s incredibly useful for web apps but a normal website doesn’t need this layer of complexity.
• This date picker is very nice, flexible, pretty universal and accessible. I know there are many others out there but it’s one that’s working well, working with many coding platforms and is well usable by people.
• Nice, Apple now lets us integrate Face ID and Touch ID on the web, building it on top of the Web Authentication API. Imagine how this can improve the logging in experience for a good part of your user base.
• Chris Coyier shares how we can integrate the Web Share API into our websites instead of these ugly lists of social icons. Note that this depends on us how well it’s perceived and working. For example on macOS it’s supported but most apps on the Mac don’t integrate the Framework for it so they don’t show up in the list of sharing services. We should take care that our products support the native frameworks to make the web a better place.
• Wonder which operator to use in JavaScript for a comparison? Or seen a code snippet and felt weird because you didn’t know what operator this was? Josh W Comeau has built an operator lookup.

CSS

• Stefan Judis shares a nice approach of centering a container with sub-elements like a navigation with the fit-content property in CSS. Unfortunately, this still needs vendor prefixes at the moment to work in major browsers.
• Ahmad Shadeed explains the CSS Grid minmax() function with some really good examples. Most tutorials explaining this function are very generic and not practical so this was a nice read when I found it. In case you don’t fully understand the minmax syntax yet, give it a read.
• If you use Tailwind CSS or consider to use it, this amazing post on color theming is for you. But also if you don’t use Tailwind there’s at least a good part of the article that we can learn something from in terms of setting colors in CSS.
• Josh W. Cameau has a CSS Grid full-bleed layout tutorial that’s pretty complete and includes lots of nice throwbacks into the history of the web.
• CSS Text effects are rarely useful but sometimes for big teaser headlines it’s what we need. And if we need them, it’s sometimes not so easy to create a nice and really good effect so this article showing five CSS Text effects is great and includes split colored text, video text, and image background text.
• There are a lot of basic tutorials on CSS Variables but this one contains some pretty handy use cases for variables that go beyond the basic color variable usage but show how we can build a flexible avatar box, defining paddings or gaps by using calc() and variables together.
• Talking about colors in CSS, we have Josh Bader sharing how we can use CSS variables calc() and rgb() to enforce high contrast colors in our CSS design system.
• Rachel Andrew shares how we can build a Masonry layout fully in CSS with CSS Grid Level 3.
• Dave Rupert explores how we should define semantic variable names in the age of light and dark themes.

Work & Life

• Engineering Manager is one of the roles that most people don’t know exactly what it’s about and what these people do. That’s why I found Karl Hughes’ »A day in the life of an Engineering Manager« a really nice one to read. He explains what he does all day and it turns out it’s a role full of soft skills like networking, explaining things or translating between two people, between company departments and to raise awareness around delivery, around process management and recruiting as well as people’s happiness in their jobs. I was Engineering Manager for quite some time as well so I can second what Karl writes here.

Go beyond…

• You know what scares me most when it comes to climate change and how we as humans perceive it? That we don’t notice that our climate is changing slowly but steadily. Every time a big tornado or wildfires destroy lots of things, our habitats, we read dozens of articles in the news, watch it in TV. But we barely notice that the climate already changed for everyone in the world, that temperatures grew already, that the four seasons changed a little bit, that we face more and more inconsistencies in the weather, more things like wildfires. I’m not sure if it’s the protection mode in our brains that blocks this away or if it’s just too hard to notice these tiny events when so much other stuff is going on in our lives.
• Who is responsible for climate change? The complexity of the problem makes a simple answer elusive. And yet, responsibility matters — not just for assigning blame, but for finding strategic levers for future change. Here’s insight, here’s evidence, here’s a good article to help us understand our biggest problem of humanity yet a bit better. And remember that most plastic is made out of oil.

Thank you all for reading this, I hope you’re doing fine and stay positive, find your way to make an impact and help build a better society, better friendships and make our world a little better.
If you want to support my work, you can give back via PayPal or Stripe. Thank you!

—Anselm