Friday Frontend: Post-Independence Day Edition
KBall from ZenDev
CSS & SCSS
A brilliant deep-dive look into CSS custom properties and how they enable you to utilize inheritance and the cascade while still getting a lot of isolation. I’ve been more in the JS world than the CSS world of late, but posts like this get me soooo excited to get back into styles & CSS architecture with the wonderful new tools we have now.
A great look at how to think about styles and architecting your CSS in layers. That layered approach is also a great way to think about application architecture and design - some things truly are shared and global, while others are extremely specific to a particular component.
Short, straightforward, tightly scoped article talking about the
:focus-within property and how you can use it to improve the accessibility of your site or application. If you’re using
:hover to expose information or actionable elements and not yet also applying
:focus-within, you should definitely read this article.
Useful rundown of some of the differences between shorthand and longhand in CSS properties, what you give up when you go to shorthand, and the pros and cons of each.
Component-based architectures are one of the major megatrends happening right now in front-end development, and I love to see articles like this focused on how to create usable, high quality components. Some of the “commandments” in this article are React specific, while others are more generally applicable. Recommend this to everyone working in a modern JS framework.
RxJS has been embraced by the Angular community as one of the core event-handling patterns in Angular, but it is really applicable quite globally. I really like the mental model, though the API surface area of the library is pretty large and can be hard to pick up. This article does a good job introducing it.
I’m sure I’m not the only one who gets super annoyed by content jumping around while I’m reading it - and I’d never intentionally create that experience for my users. But sometimes you just don’t know how your code behaves “in the wild”, and you can’t exactly ride-along with every user. The Layout Instability API aims to address this issue.