[Ed note: I got behind on republishing to dev.to, so this is coming out here a week late. Sorry!]

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 box-shadow property, a delightful look at how to think about React Hooks, and an interesting look into the ecosystem reasons behind challenges with JavaScript tooling. Enjoy!

Best,

KBall from ZenDev

CSS & SCSS

Link Underlines That Animate Into Block Backgrounds

Super cool effect by using a CSS animation on :hover on the box-shadow property.

Smoother & sharper shadows with layered box-shadows

Fascinating look at what happens as you layer on multiple box-shadows, play around with alpha, and manipulate blur-radius and offsets.

Trippy CSS Distortion Effects

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.

CSS Quickies: CSS Variables - Or how you create a 🌞white/🌑dark theme easily

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.

JavaScript

Thinking in React Hooks

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?

An Explanation of How the Intersection Observer Watches

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.

Build a Tree-Shaking Utility in JavaScript

A little esoteric for most folks, but if you’ve heard a lot about “Tree-Shaking” as a JavaScript performance booster and are curious what it is and how it works, this article walks through what the concept is and how to build a “tree shaker” using JavaScript.

Why JavaScript Tooling Sucks

Yeah it’s kind of a click-baity title, but this is a nice exploration of the JavaScript ecosystem and what some of the underlying issues are that lead to the challenges we all have to grapple with.

Practical Ways to Write Better JavaScript

Nice combination look at language features, tooling, and architecture/strategy to help you get better at writing JavaScript.

Other Awesomeness

An HTML attribute potentially worth $4.4M to Chipotle

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!

Wikipedia's JavaScript initialisation on a budget

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.

Browser Engine Diversity

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.

A Guide to Component Driven Development (CDD)

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.

Table with Expando Rows

A great look at how to create an expandable table while maintaining semantics (and therefor accessibility) of the table.

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