Friday Frontend: Small Things at Scale Edition
Tags: fridayfrontend, css, javascript, webdev
Published: 2019-10-04 16:41:14

---
title: Friday Frontend: Small Things at Scale Edition
published: true
tags: friday-frontend, css, javascript, webdev
canonical_url: https://zendev.com/2019/09/27/small-things-at-scale-edition.html
---
[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](https://css-tricks.com/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](https://tobiasahlin.com/blog/layered-smooth-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](https://1stwebdesigner.com/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](https://dev.to/lampewebdev/css-quickies-css-variables-or-how-you-create-a-white-dark-theme-easily-1i0i)

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.

  
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CE7D6K7I&amp;placement=zendevcom" id="_carbonads_js"></script>
#### JavaScript

##### [Thinking in React Hooks](https://wattenberger.com/blog/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](https://css-tricks.com/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](https://blog.bitsrc.io/build-a-tree-shaking-utility-in-javascript-c6b13e469121)

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](https://www.swyx.io/writing/js-tooling/)

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](https://dev.to/sarajchipps/practical-ways-to-write-better-javascript-4e1j-temp-slug-5051646)

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](https://cloudfour.com/thinks/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](https://phabricator.wikimedia.org/phame/live/7/post/175/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](https://css-tricks.com/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)](https://blog.bitsrc.io/a-guide-to-component-driven-development-cdd-69dbd3d07bf0)

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](http://adrianroselli.com/2019/09/table-with-expando-rows.html)

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](https://twitter.com/kbal11) 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](https://zendev.com/friday-frontend.html)