ZenDev - Friday Frontend: February 26th Edition

Hey there,

Hope you had a good week! Sorry I missed last week’s newsletter; was firefighting all week at work and just had no time at all. But this week has been more chill, and I’ve got a great set of resources for you down below.

Best,

KBall from ZenDev

CSS & SCSS

An Interactive Guide to CSS Transitions

Super cool guide to a super cool feature. I love CSS transitions for adding a little bit of flair to any changing element, and I really appreciate how this guide gives you ways to really explore the differences between different types of transitions.

Hiding Content Responsibly

Nice breakdown of the different ways to hide content on a website, and which approach you’d want to use in different situations.

Ideas for CSS Button Hover Animations

A set of fun examples of possible hover animations for buttons, along with code that you can grab and tinker with if any of them strikes your fancy.

Don’t put pointer-events: none on form labels

Both super solid advice and a very entertaining story. Speaks to the drawbacks of copying CSS without knowing the implications - here moving something from a Material example into general use managed to break forms throughout a site.

[css-conditional] [css-contain] Fleshing out @container queries with single-axis containment

It is looking like container queries may finally be coming to the web! This is super exciting! This is the draft proposal, which has actually been accepted by the CSS working group.

JavaScript

Announcing Vite 2.0

This is super cool. What looked originally like Evan You (original creator of Vue) mucking around with a new SSG for Vue has turned into a super fast general purpose build system leveraging native ES modules. It’s no longer Vue specific, and looks super interesting and powerful. Check it out.

Exploring Caching Techniques in React

Useful exploration of a range of techniques that can be used to cache data and/or rendered components within React, each with code examples and an explanation of how it works.

JS is an occasionally functional language [audio w/transcript]

(Bias alert: I was a panelist on this show) This was a deeply fascinating JS Party conversation about functional programming in JavaScript. The guest expert has worked for years to figure out ways to teach functional programming in a more accessible way, and I came away with new insights and a better understanding than I’d managed to build up over a number of years dabbling.

Other Awesomeness

Building Your Own Personal Learning Curriculum

Useful post on how to approach continuous learning, particularly in the dev world. This is a skill we all should develop, especially given how fast our industry moves and changes.

front-of-the-front-end and back-of-the-front-end web development

As front-end development has gotten more complex, we’ve seen increasing amounts of specialization within different parts of it. I’m glad to see discussions like this around recognizinig that there is a lot of detail in this profession and we can’t all do it all.

Design engineer

Another take on this “front of the front end” idea, looking at it less as a focus on which technologies you are using (HTML, CSS, etc) but more about your focus on the joint between design and engineering.

Front-End Dissatisfaction (and Backing Off)

Chris Coyier highlighting and discussing some threads of disillusionment in the front-end community. And I get it - there is still a ridiculous amount of churn and JavaScript fatigue is a thing. That said, in a recent JSParty episode where we broke down the state of JS Survey, we noted that far fewer people think that building JavaScript apps is overly complex than did a couple of years ago, so I actually think we’re moving in the right direction here.