WDRL — Edition 295: CSS Parent Selectors, Interoperability of the web, web3 reflections and sanitizing.

Celý článek

Hey,

It is January February already, and it feels like time flies. In the world of technology, there are always so many news, trends, and possible distractions. On top of that, we already have so much work to do, projects to finish, and people to please. It is easy to feel empty or get burned out. Plus, we still live in the middle of an uncomfortable situation for everyone, a so far unseen pandemic situation; This causes a lot of mental problems on its own and drains a lot of energy from us.

What we can do in this case — although it’s hard to accept — is slowing down.

When I feel overwhelmed, I try to go outside as much as possible. I will get some fresh air, have a long walk and reflect on the things I do. I try to answer the question: »What brings me joy in web development?«. After that, I find myself working more calmly and happily.

Now, if you have the time and energy, you can read through some interesting articles we curated for you. This week, Malte wrote the intro.

Generic

• Cory Doctorow by the EFF shares some of the issues of today’s web and how that may change over the next years as both U.S. and the EU initialized law proposals for better interoperability of services and software. There’s quite some interesting stuff in the article.
• Arnold Galovics shares his first-hand experiences with microservices. He offers some strong arguments on why microservices might not be a good fit for your next project.

UI/UX

• Josh W. Cameau blogged about his custom CSS reset which includes a nice idea of more variable, better line-height via calc()
• Oliver Schöndorfer in the ideal line length and line heigh in web design. He shares examples of what doesn’t work and how to improve legibility of a website with some easy and generic rules.
• Icones.js is a huge collection of iconsets with a preview.

Tooling

• esbuild is a new JavaScript compiler that’s super fast and could shake up the current tooling world.
• ParcelCSS is a super fast parser, transpiler, and minified for CSS. It’s so fast because it’s not a node.js tool but written in Rust.

Security

• This is something I love to see coming to our browsers: The HTML Sanitizer API. If that becomes reality, we finally get a safer frontend web and our written JavaScript code is slimmer and less bloated up with sanitising libraries. Until then (and maybe afterwards as we still need it for some cases), we can use DOMPurify.

Web Performance

• It’s not been long ago that we’ve seen HTTP/2 making a huge impact to website performance. Now HTTP/3 is here and brings another set of performance benefits.

HTML & SVG

• Did you know you can control autocapitalization in user input with the autocapitalize property?

Accessibility

• Stephanie Eckles has a short code snippet how to standardise focus styles on a web project easily with CSS custom properties.

JavaScript

• This cool JavaScript snippet offers "add event to calendar" buttons for websites.
• Stephanie Eckles explains how to use the Intersection Observer Web API as a performant way to track where elements are in the viewport and other scrollable regions.
• Doeke Norg shares how to use JavaScript generators instead of iterating through arrays with traditional methods.
• What’s the state of ES6 native modules in our browsers? Right now, it’s still a bit complicated but things get better and once a few more things land in browsers, we may finally reduce the complexity of frontend code and workspaces again.

CSS

• Bramus Van Damme shares what’s to expect in 2022 from CSS — which could be a lot. Things like Container Queries, Cascade Layers, Color functions, better viewport units, Parent (:has()) selector, Subgrid, Accent color, Media Query ranges.
• Temani Afif shares an approach how to build reponsive layouts with less media queries based on the way we note Flex and Grid patterns. By using min, max, clamp or autofit functions, we reduce the complexity of media queries.
• The CSS :has() selector is way more than a “Parent Selector”.
• This CSS snippet collection by 30 seconds of code contains great utilities and interactive CSS modules, such as custom checkbox styling, scroll snap, and lots more.
• Stefan Judis explains how the hwb() color syntax works and why it’s probably the easiest to work and understand as human. Safari and Firefox both recently implemented it with others to follow soon hopefully.
• CSS has come a long way since the early days of web development, when tables and various other hacks were used for layout and positioning. Today's developers can enjoy writing CSS that works in all major browsers, without having to bend over backwards to implement tricky layout requirements. Not only does this make it easier to create dynamic layouts, but it also allows you to ship smaller (and simpler) stylesheets by removing unnecessary cruft. In this article, we'll look at various scenarios where modern techniques can reduce the complexity of your code and allow you to write better CSS.

Work & Life

• 
I was busy and productive, which made me feel important and accomplished. Yet my heart told me a different story.

  Andrew Rocha on how to prioritise important things and why everything else is extra. Apps aren’t solving these matters, we need to.

Go beyond…

• When we buy something, we get an immediate boost. But what happens once we have the item for a few days? Most of the time, it doesn’t match our expectations of becoming a happier person by buying it. Leo shares his findings on buying less and focus on the inner self to solve these issues. With that in mind, we tend to buy only really useful things while being happier overall. Win-win.
• There is currently a lot of hype around crypto and web3 around. Moxie Marlinspike shares his impressions and down-to-earth thoughts on those topics. But even if you’re not very interested in web3, this article reveals a couple of interesting problems with the current system. For example the fact that “Even nerds do not want to run their own servers at this point.”
• As service platform provider, should you clean up your inactive users regularly or collect them for your numbers instead? Here’s the Flare app team sharing why and how they remove inactive users and teams.

I hope you’re doing fine and have a way to 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 like this newsletter, you can contribute to financing the project. Thank you!

Anselm