ZenDev - Friday Frontend: September 25 Edition

Hey there,

Hope you’ve had a good week! We had a brief interlude here of neither smoke nor hot weather, so I have been enjoying it with lots of outdoor time. It looks like that is due to end this weekend, sigh, but in these chaotic and challenging times I’m trying to remember to take every positive moment I can find.

There’s a bunch of great articles today, but the number 1 must read for me is the ‘Hidden Features of Chrome Devtools’ article at the top of the ‘Other Awesome’ section. So many great tricks that I had never heard of! Enjoy!

Best,

KBall from ZenDev

CSS & SCSS

Using the new two-value syntax of the display property in CSS

This is a short introduction to this upcoming change, though it links out to more in-depth articles and a video if you want to go deeper. I’m super excited about this because it takes something that is confusing and inconsistent in today’s CSS and makes it much cleaner. Current display values incorporate 2 orthogonal concepts -- how does this element lay out, and how do its children lay out. This explicitly breaks those concepts apart so it is clear what is happening in each.

Centering in CSS

Fun graphical guide to all of the different ways we can center things in CSS. I love the whimsical touch of letting you choose from a set of food pictures to use in the example demonstrations.

Introduction to CSS Animations

Very nice, simple to understand, step by step tutorial on CSS Animations. Not for those who are already feeling solid on animating in CSS, but if you’re just getting started in this domain, this will make it super easy to understand.

Min, Max, and Clamp

Simple, quick hit tutorial on these three CSS functions that are at the core of being able to create fluid (responsive without media queries) layouts.

JavaScript

Vue v3.0.0 One Piece

Vue 3 is out! Officially released! Super exciting to see. Many of the underlying new techniques have been available via libraries before now (composition API being the big one), but the whole thing is now officially out. Some of the advancements -- massive improvements in performance, far easier to use with TypeScript, and a much more modular architecture so you can pull in just what you need.

Pre-Caching Image with React Suspense

React Suspense is an interesting case - it’s a feature that has not yet been released, but has been the subject of articles, talks, and discussion for over a year now. And I feel like the opinion of it has kind of changed over that time - there was early excitement, followed by a lot of folks saying it’s overly complex and you aren’t going to need it. Where will it land? Well, it’s going to be in React regardless because Facebook controls React, and they want it. So it’s probably worth reading articles like this to understand what the benefits are and when you’ll want to use it.

Everything about null in JavaScript

Rundown of that fun and special value null. Nothing mindblowing, but does call out a number of the edge cases around dealing with nulls. Useful if you’re still getting used to the language.

Farewell, Moment.js!

This is an important update, since so many of us use Moment.js for dealing with dates and times in our code. The maintainer team has officially declared that they are no longer developing Moment, and that new projects should use something different. The long term goal is the new Temporal proposal that will include much more powerful date/time manipulation in the core of JavaScript, but that is not ready yet and this article includes a number of alternatives you can use in the meantime.

Other Awesomeness

Hidden Features of Chrome DevTools

This completely blew my mind. I didn’t know about almost any of these tricks, but they all are super useful for front-end development. Go read this article now.

Communication For Designers

This is an important conversation about how to best communicate around design work. I think the author reacts a little bit overly strongly to suggestions about persuasive communication in the article he is responding to, but his key points about communication as an emergent property and the need to invest in things like relationships and trust is super key.

6 Important Aspects of Well-Performing Mobile Product Page Breadcrumbs

Super interesting research into what works well vs what confuses users when it comes to mobile product breadcrumbs. I must admit that I was surprised by some of the outcomes, but upon thinking about them and reading the explanations, they make a ton of sense.

Bringing Context To Design Systems

I’ve previously included articles talking about design systems as living documents, as compared to static. This article adds an important piece of context to that -- the importance of the context in which components or decisions were made. If we don’t include that in the system in a way that is easy to understand, we can keep using components long after the context in which they were designed has changed.

The secret sauce to elevating your design: storytelling in 4 different ways

This ties into something I’ve been thinking about a lot recently -- how do we use a product to create a narrative that takes a user through an experience, rather than simply a tool that they can use.