Friday Frontend: Small Things at Scale Edition
Happy Friday! I’m traveling again, enjoying some fun monsoon weather in Phoenix, Arizona. Hope you’re having a great end of summer/early fall wherever you’re at.
The articles that stood out to me the most this week are a pair of articles that focus on the impact of small changes at scale. You’ll find them as the first 2 links under ‘other awesome’. There’s also a couple of great articles looking at uses for the
KBall from ZenDev
CSS & SCSS
Super cool effect by using a CSS animation on
:hover on the
Fascinating look at what happens as you layer on multiple box-shadows, play around with alpha, and manipulate blur-radius and offsets.
A collection of fun distortion effects that you can do with CSS, each in their own codepen so you can see it and then see exactly how it’s done.
Pretty sweet intro to using CSS Variables, using the example of creating a light/dark mode theme switcher. That said, use this as a way to learn about CSS Variables, not a pure guide to such themes, because there’s more than just inverting colors to making a good dark mode. I was just talking to a designer going through this process - amazing how some things that work in “light” feel crowded or otherwise off in “dark”. If anyone knows a good article about how to do a great dark-mode design send it my way.
This is a delightful side-by-side comparison of how to do things in the old class/lifecycle based way in React as compared with using Hooks. It uses this to draw out a different way of thinking of things… what data needs to react to what. What I actually found most striking was how close the way the author thinks about hooks is how I think about computed properties in Vue. Anyone else run into that?
A great deep-dive into how the Intersection Observer API works. I love this - this is an incredibly powerful API, and while some of the obvious usecases (lazyloaded images) have already been done to death, I think there’s a ton of unused potential left in this API. Getting a good understanding of how it works is a key to noticing when there’s a good opportunity to take advantage of it.
Fascinating exploration of how different HTML attributes interact with autofill, and then extrapolation for what choices therein can mean to a business at scale. In this case poorly handling credit card year autofills might be costing Chipotle $4.4M a year!
In another example of “small differences make a big difference at scale”, a tale of how Wikipedia reduced the startup manifest of their codebase from 36.2K to 27.2KB, allowing it to fit within 2 14K packets and at the scale of Wikipedia saving 4.3 Terabytes a DAY in bandwidth. Crazy.
What will be the implications of our increasingly shrinking set of browser engines? To me, this sis one of the biggest impact unknowns in our current ecosystem. Chris Coyier does a good job of breaking down both some of the potential negatives and some of the potential positives in the current state of browser engines.
This approach, Component Driven Development, is one of the big trends going on in modern front-end. All of our modern frameworks and tools are component-based, and using that mental model to design your apps unlocks some big productivity and conceptual breakthroughs.
A great look at how to create an expandable table while maintaining semantics (and therefor accessibility) of the table.
That's it for this week's Friday Frontend newsletter. If you enjoyed this, be sure to sign up to get these newsletters straight to your inbox every Friday!