WDRL — Edition 312: Modern CSS isn’t always easy, DOM efficiency, and how the room sounds right now.

Celý článek

Hey,

it’s been a while again since my last edition. Spring and summer here are always a busy season for me, splitting my available time into two jobs: Web work (or currently project management) and my garden. I’ll try to catch up more regularly now again, so maybe another edition will follow soon.

I’m learning to value my market garden nursery more and more. It forces me to be in a passive, listening and watching mode, and only interfere if I have a proper plan to make an impact. When you do things improperly, you may end up having twice the work. Or even worse, your plants suffer and you get less crop.

With software development it’s often very similar. We can push forwards and run behind latest trends and technologies but without a proper plan, you end up having these endless projects. Being a Scrum Master in my current project I need to remind that the main goal is to listen to my team, understanding their goals, their struggles and then acting as guidance to get more effective (=unblock people).

UI/UX

• A visual cheat-sheet for the 119 keyboard shortcuts found in Figma.
• As a grotesque sans serif font, MacPaw Fixel was designed to be a variable typeface with a human touch. And indeed, it’s nice to see this variable font being lean and friendly.
• As a UX director, I’ve reviewed countless design portfolios over the years, and one thing that often stands out is the lack of attention given to the “About me” page.
• Adam Silver says we shouldn’t use sticky menus and shows us why in great examples.

Tooling

• Draw good pressure-sensitive freehand lines with this tool.
• If you work on a Laravel app, this browsershot package is nice to generate PDFs, e.g. for invoices. All running in a job that's processed by a queue worker, so that it’s pretty efficient.

Security

• What’s needed to be compliant with PCI-DSS, HIPAA and NIST security standards? SivaPraveen R shares their effort.

Web Performance

• Large DOM sizes can be a factor in whether interactions on a website are fast or not. Learn more about the relationship between DOM size and INP, and what you can do to reduce DOM size and other ways to limit rendering work when your page has lots of DOM elements.

JavaScript

• Conditional statements are important because you use them as "validators" which can either return truth or false. Here’s a guide how to write better understandable conditions with modern JavaScript methods.
• Josh W. Cameau digs into the incredibly-important distinction between “assignment” and “mutation” in JavaScript and why const confuses people as you’re able to change an object that’s declared as constant.

CSS

• So while this looks simple, I like the examination to build a complete modern layout with the latest technologies available. It’s a nice exercise for mentoring sessions, internal team workshops or ourselves to level up our knowledge.
• Stefanie Eckles shares how to produce truly responsive typography, regardless of context with Container queries, CSS calc functions, modern selectors and applying this with a native CSS mixin using Custom properties.
• Why do we define CSS Custom Properties at :root level? Matthias Ott digs deeper into this matter and explains why generically this is a good idea but you can use on different levels individually and use this feature for you.
• Some discoveries on how the CSS Grid gap property operates when hiding items in grid-template and grid-auto layouts, by Ryan Mulligan.
• CSS Anchor positioning might be one of the most exciting features coming to CSS. While it’s experimental currently, this article by Roman Komarov shows how important that is for annotations, context-based content like images or sidebars.
• We’re close to getting scroll animations in CSS only, and if needed with a proper API to JavaScript. That’d be pretty nice and, most importantly, reduce the number of implementations that really hurt performance and UX.

Work & Life

• Kaylie Boogaerts outlines some tips and advice for running your own corporate retreat and I can say from working with her in the past, she definitely knows about these things. It’s nice to see this being shared so more people and companies can adopt those practices.
• Thousands of books have been written attempting to point people to the difference between mindfulness and “paying attention” as we normally do. Here’s a simple practice of learning to be in the now

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

Anselm