Friday Frontend: Rough Week Edition
This has been a rough week for those of us in the US, and I suspect for some folks outside the US. Some very very dark and messy stuff playing out on the national stage. If learning about front-end stuff helps distract you, hope you enjoy this week’s links. And if you’re feeling too emotionally strained to even think about this stuff right now, know I’m right there with you.
Take some time for self care. And if you haven’t been triggered by any of the stuff going on, lend some sympathy to anyone in your life who has been.
Hope you have a great weekend!
KBall from ZenDev
CSS & SCSS
Don’t use empty or low content for your design system grid examples
This is kinda blowing my mind. Exploring the fact that CSS-Grid based systems can not only reproduce the type of regular, controlled distribution of layout that we had before but a fascinating new type of system where grid sizing and space is determined by the content within it. Very very cool!
Putting things on top of other things
Fascinating exploration of the concept of ‘stacking contexts’. My previous primary exposure to them was with z-indexes, and this will help you if you ever get frustrated with z-index not doing what you expect, but this article also goes into the other effects of a stacking context and how that impacts things like blending and more.
What is Modular CSS?
A walk through the history and thinking behind modern CSS naming schemes and approaches. Explains what systems like OOCSS, BEM, and SMACSS are, but also walks through the thinking. A great overview of ‘component-oriented’ coding from a CSS (rather than JS framework) perspective.
3D Emoji Town (Pure CSS)
This is a really nice “how to write better code” article. Some specific concrete tips that help you to write cleaner, more readable conditionals.
Using Scoped Slots in Vue.js to Abstract Functionality
Took me a couple read throughs to fully wrap my head around this, but essentially what this is showing is how to use Vue’s
scoped slot functionality to create what in the React World would be called higher order components with render props. Essentially wrapper components that add particular functionality but can then be used with arbitrary children.
3 Anti-patterns for Conditional Rendering with React
Content and Design Are Inseparable Work Partners
This is highlighted around design, but I’ve found it to be true for development as well. Any development that you do with purely “dummy data” that is not representative of actual data is incomplete at best. To build a truly robust system, you need to have an understanding of the real data that is going to be in it.
The “Developer Experience” Bait-and-Switch
A framework for web performance
Along a similar line as the previous article, but instead of making an argument about what we should be valuing, this talks about how we even go about measuring web performance. What are the relevant things to look at, and if we want to optimize how should we determine what will be the most valuable.
Accurately measuring layout on the web
An open governance model for the AMP Project
If you think that AMP plays a valuable role outside of prefered google results (and I think it very well may - it’s another take on the mobile performance question) then this is a very good sign. The tech lead of the project announces a move towards an open governance model with a technical steering committee.