ZenDev - Friday Frontend: Juneteenth Edition

Hey there,

Happy day of celebrating the end of slavery in the US. Crazy how recent it was, and how much this history continues to haunt us today.

I’m not going to say much today; it’s a good day to not just stick with the folks you already listen to or follow but to seek out Black voices in tech. If you’re not sure where to get started, some amazing folks I follow include Anjuan Simmons, Mo Hampton, Crystal Martin, Amal Hussein, BDougie, Nick Caldwell, Leslie Miley, and Kevin Stewart.

Best,

KBall from ZenDev

CSS & SCSS

The Surprising Things That CSS Can Animate

This is a bloody fascinating article. Looks at what animation means when it comes to discrete properties like text transforms and visibility, how to use z-index animation to create layers and 3-d effects, and more. Absolutely love it!

Learn Z-Index Using a Visualization Tool

When I was first starting to do more CSS, I think z-index was one of the most confusing things to me. It seems like it should be so simple, but when you layer on the concepts of stacking context and requiring an element to have position, you quickly end up in a position of frustration asking why the HECK the element you’ve just laid z-index: 99999 is still hidden. If you’re still living that, you definitely should check out this combination article + tool for learning how Z-index works.

CUBE CSS

In-depth writeup of an approach to writing CSS by a super-experienced CSS developer. This probably won’t be relevant for those who have gone all in on CSS-in-JS, but I really appreciate how this approach truly embraces the cascade and native capabilities of CSS rather than trying to work around them in the name of pure isolation. As the author points out, design systems have both an bottom-up set of components and a top-down global consistencies, and it’s great to have a CSS approach that embraces both of those.

How to Reverse CSS Custom Counters

Neat article looking at how to handle automatically counted items (similar to a ul) that decrement or have other custom properties of the count.

Grid for layout, Flexbox for components

Helpful guide for those struggling to figure out when to use Grid and when to use Flexbox. The title of the article sums it up, but it includes more detailed decision criteria and then follows through with a series of examples showing straightforward implementations of common component and layout problems.

The Mad Magazine Fold-In Effect in CSS

Super cool effect, demonstrated and then documented in code. Doesn’t really explain much about *why* it works but if you’re up to dig through and understand it there’s some useful techniques in here.

JavaScript

How to Get All Custom Properties on a Page in JavaScript

Step by step walkthrough of how to programmatically pull out all of the custom properties in your CSS and make them accessible to your JavaScript. I’d be curious to explore how it works if you’re doing more than setting properties at the :root level of the cascade - I suspect you’d end up with duplicate properties and some more context would be useful - but still a useful exercise.

Recoil.js — The New, Better State Management Library for React

Nice introduction to a new state management library released by Facebook. Certainly with many of the new capabilities React has introduced, there are a larger and larger number of usecases that don’t need the full heavy-handed approach of a Redux or Mobx, so interesting to see these alternatives coming out.

JSGrids.io

Ooooh this is super useful! A filterable index of table/grid libraries in JavaScript. Lets you filter by JavaScript framework and by a set of commonly needed features to understand what your options are.

Advanced TypeScript Types Cheat Sheet (with Examples)

If you, like me, have jumped onto the TypeScript bandwagon but are still climbing up the learning curve, this is a super useful resource that highlights a set of tools and utility types that will improve your ability to make the type checker do your bidding.

Other Awesomeness

Josh.js

I’m happy to see folks working on animation libraries like this that make it easy to add micro-interactions as you scroll through your page. This is a tiny library -- it’s not as fully-featured as the long-neglected Skrollr -- but shows how easy it is to build something like this on top of modern tools like Animate.css. I’d love to see someone take this (or a similar) library and build out something as powerful as Skrollr but that actually works on mobile and is actively maintained.

2020 Logo Trend Report

More on the design side than front-end development, but this is a fascinating look through logo trends this last year, with enough context discussion that even a non-designer like me can understand a little bit about what’s going on and why some of these trends are interesting.

Event listeners and garbage collection

Interesting look at how event listeners interact with the browser’s garbage collection. I also found it interesting to take note of just how hard it is to correctly handle race conditions and related aborts. I wish the browser had better primitives for that.

Striking a Balance Between Native and Custom Select Elements

This looks at a dilemma that has come up before in this newsletter: Native select elements are clunky and hard to customize, but custom select elements often fall down when it comes to accessibility and keyboard use. The article goes through some of these challenges and then walks down an example “hybrid” approach that attempts to get the best of both worlds… or at least avoid the major downsides of either.