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.
This week, what stood out to me was a couple of great in-depth articles on how to handle the challenges of shared state. Both of those are down in the JavaScript section. I also got a kick out of the ‘random numbers in CSS’ article, and loved the historical exploration of grids.
Have a great weekend! Enjoy!
Best,
KBall from ZenDev
CSS & SCSS
The two-value syntax of the CSS Display property
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.
Are There Random Numbers in CSS?
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.
Bidirectional horizontal rules in CSS
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!
8 state-of-the-art CSS features (and how to use them)
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.
Null variables in Sass
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.
JavaScript
A Simple Explanation of JavaScript Closures
I’ve harped on the importance of understanding closures a few times, and it’s something that continues to be key in understanding JavaScript, especially as we adopt more and more functional patterns. I agree with the author’s description of this post: “While being used everywhere, closures are difficult to grasp. Closures, like recursion, require an “Aha!” moment. If you haven’t had your “Aha!” moment, then this post is for you.”
The problems of shared mutable state and how to avoid them
This is a super in-depth piece diving into the problems of sharing data between different parts of a JavaScript application and how to work around them. Dealing with shared state is a challenge I’ve seen bite particularly junior developers over and over again, and is something that even today after working in JavaScript for over a decade I still occasionally make mistakes with.
Encapsulation in JavaScript
A look at a different way to handle the problems of shared state - using encapsulation. This post dives into both the concept of encapsulation, its origins in object oriented programming, and the techniques available for implementing it in JavaScript.
Thought on Vue 3 Composition API - reactive() considered harmful
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.
Angular Architecture - Unofficial Docs
If you’re not in the Angular ecosystem, it can feel super intimidating to look at from the outside. There’s so many things! And ideas we don’t encounter in other JavaScript frameworks! How does it all work? This is a very nice quick introduction to the architecture of an Angular application, helping you see what is required and how it fits together.
Other Awesomeness
Stop Animations During Window Resizing
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.
History of grids: from the printing press to modern web design
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.
Using the Platform
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.
There’s no server more secure than one that doesn’t exist (audio with transcript)
(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.
Happy Friday!
That's it for this week's Friday Frontend newsletter. If you enjoyed this, you should probably follow me on Twitter or join my mailing list. Sign up to get these newsletters straight to your inbox every Friday! Sign up here: https://zendev.com/friday-frontend.html
Top comments (0)