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.

Copyright © 2020 ZenDev, LLC, All rights reserved.
You are receiving this email because you opted in at our website, zendev.com.

Our mailing address is:
ZenDev, LLC
922 San Leandro Ave., Unit C
Mountain View, California 94043

Add us to your address book


Want to change how you receive these emails?
You can or .

Email Marketing Powered by Mailchimp

Older messages

Friday Frontend: Reactivity in 2020 Edition

Friday, June 12, 2020

Hope you had a good week and are looking at a great weekend. I'm surely looking forward to a rest after working a lot of late nights on a deadline. View this email in your browser Hey there, Hope

Friday Frontend: Black Lives Matter Edition

Friday, June 5, 2020

This week has been surreal. We've seen protests in cities across every one of the 50 states in the US, and supporting protests across the country. View this email in your browser Hey there, This

[LINK CORRECTION] Friday Frontend: “Modern” JS & Web Dueling Takes Edition

Friday, May 29, 2020

Happy Friday! There's some super cool articles this week that I'd love to draw your attention to. View this email in your browser [The first version of this newsletter contained an incorrect

Friday Frontend: “Modern” JS & Web Dueling Takes Edition

Friday, May 29, 2020

Happy Friday! There's some super cool articles this week that I'd love to draw your attention to. View this email in your browser Hey there, Happy Friday! There's some super cool articles

Friday Frontend: May 22 Edition

Friday, May 22, 2020

Hope you're doing well this week. I continue to be slammed with work, but there's a light at the end of the tunnel. View this email in your browser Hey there, Hope you're doing well this

You Might Also Like

Import AI 399: 1,000 samples to make a reasoning model; DeepSeek proliferation; Apple's self-driving car simulator

Friday, February 14, 2025

What came before the golem? ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Defining Your Paranoia Level: Navigating Change Without the Overkill

Friday, February 14, 2025

We've all been there: trying to learn something new, only to find our old habits holding us back. We discussed today how our gut feelings about solving problems can sometimes be our own worst enemy

5 ways AI can help with taxes 🪄

Friday, February 14, 2025

Remotely control an iPhone; 💸 50+ early Presidents' Day deals -- ZDNET ZDNET Tech Today - US February 10, 2025 5 ways AI can help you with your taxes (and what not to use it for) 5 ways AI can help

Recurring Automations + Secret Updates

Friday, February 14, 2025

Smarter automations, better templates, and hidden updates to explore 👀 ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

The First Provable AI-Proof Game: Introducing Butterfly Wings 4

Friday, February 14, 2025

Top Tech Content sent at Noon! Boost Your Article on HackerNoon for $159.99! Read this email in your browser How are you, @newsletterest1? undefined The Market Today #01 Instagram (Meta) 714.52 -0.32%

GCP Newsletter #437

Friday, February 14, 2025

Welcome to issue #437 February 10th, 2025 News BigQuery Cloud Marketplace Official Blog Partners BigQuery datasets now available on Google Cloud Marketplace - Google Cloud Marketplace now offers

Charted | The 1%'s Share of U.S. Wealth Over Time (1989-2024) 💰

Friday, February 14, 2025

Discover how the share of US wealth held by the top 1% has evolved from 1989 to 2024 in this infographic. View Online | Subscribe | Download Our App Download our app to see thousands of new charts from

The Great Social Media Diaspora & Tapestry is here

Friday, February 14, 2025

Apple introduces new app called 'Apple Invites', The Iconfactory launches Tapestry, beyond the traditional portfolio, and more in this week's issue of Creativerly. Creativerly The Great

Daily Coding Problem: Problem #1689 [Medium]

Friday, February 14, 2025

Daily Coding Problem Good morning! Here's your coding interview problem for today. This problem was asked by Google. Given a linked list, sort it in O(n log n) time and constant space. For example,

📧 Stop Conflating CQRS and MediatR

Friday, February 14, 2025

​ Stop Conflating CQRS and MediatR Read on: m​y website / Read time: 4 minutes The .NET Weekly is brought to you by: Step right up to the Generative AI Use Cases Repository! See how MongoDB powers your