Friday Frontend: Handling Shared State Edition
Happy Halloween! Hope you’re enjoying the holiday and fall weather, and not too many of you are evacuated or breathing smoke from fires out here in California.
Have a great weekend! Enjoy!
KBall from ZenDev
CSS & SCSS
Super interesting look at new functionality in the CSS spec when it comes to the display property. Shows how specifications themselves can be refactored as we learn - in this case the flexbox and grid specs highlighted that the way we were thinking about display was incomplete, which was fudged around at the time but is now being taken fully into account in the new specification.
While I’m not sure if there are any practical applications for it, this was a delightful exploration of how to create pseudo-random outcomes (e.g. simulate dice-rolling) purely with CSS, for things like pure HTML/CSS games.
Creating layouts that work both in languages that are RTL and LTR is a hugely challenging proposition. Most of us are used to using tricks like putting margin on 1 side of an element using
margin-left, which doesn’t translate at all! But luckily we now have logical properties like
margin-inline-end to use instead, which similar to flexbox let us define things in terms of the current direction, rather than by absolute direction. Love it!
While none of these are likely to be completely new to you if you’ve been reading this newsletter for a while, this is still a nice roundup of some of the best new features in CSS over the last couple years.
This is a cool, super simple way to create configurability without code bloat in CSS. Probably most useful for folks creating reusable frameworks and toolsets, rather than application focused CSS, but who knows maybe you’ll find a use for it there as well.
Interesting exploration into the Vue 3 Composition API. I haven’t used it enough yet to know if I agree with his conclusions about the right way to use it, but it’s a great look at some of the tradeoffs between different approaches.
Nice, simple, reusable snippet of JS + CSS to stop all CSS-based animations whenever the window is resizing. Definitely reduces jank on animation-heavy pages.
Fascinating look at how grids have played out through history, looking at print, art, architecture, and more. If you haven’t been thinking about things visually for a long time (I haven’t!) it is fascinating to see how these grids have been present throughout our history, just out of sight.
A bit of a meandering dive into the way the web evolves and continues to evolve through the standards process. This quote seems to capture so much of why the web is a uniquely powerful and challenging platform: “The web thrives on a healthy tension between stability and the chaos of experimentation. ”
If the code works, don't fix it... Or maybe do? When to refactor your code and when to leave it alone.
The questions raised in this article are super important to think about, particularly for newer developers who haven’t encountered them before. Engineers almost all start with a super-strong urge to refactor everything, especially as you’re learning fast, but while it is sometimes important it is often a waste. Of course if something is buggy you will want to fix it, but what about “working” code? The article sort of touches on this, but I like the framework of looking at working code along 2 dimensions: Rate of change and level of complexity/ugliness. If code is not being touched often and isn’t broken, it doesn’t matter if it is ugly or beautiful. If it’s being touched a lot, complexity/ugliness is slowing you down and it is much more likely to be a good candidate for refactoring.
(Bias alert - this is an interview I did). This is a super fun conversation on the JSParty podcast diving deep into the JAMStack with one of the experts in the space, Phil Hawksworth of Netlify. Phil literally wrote the book on JAMStack, and in this interview we cover a wide range of topics including what the stack does well, how to think about it, what it doesn’t do well yet, and some sneak peeks at where things are going.