Friday Frontend: Juneteenth Edition
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.
KBall from ZenDev
CSS & SCSS
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!
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.
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.
Neat article looking at how to handle automatically counted items (similar to a
ul) that decrement or have other custom properties of the count.
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.
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.
: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.
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.
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.
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.
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.
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.
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.