ZenDev - Friday Frontend: January 22 Edition

Hey there,

Hey, we passed through the US inauguration without violence! I’m going to count that as a win, and hope no matter where in the political spectrum you will also, given the chaos we saw in the weeks leading up to it. Political turmoil and other forms of threat make it hard to focus on the future and learning. Getting past election season will help some, hopefully as vaccines continue to roll out we’ll be able to get out of the pandemic threat as well and then really be able to refocus on growth.

Anyway, for all of you still plugging away learning despite the existential threats all around us, some great articles below. And if you’re having trouble focusing due to those threats, give yourself some grace. It’s okay to just be surviving right now.

Best,

KBall from ZenDev

CSS & SCSS

Understanding Clip Path in CSS

Super deep dive look at clip-path. Well worth your time. Has great visual examples, explanations, and use case information.

Drawing Decorative Lines with CSS

Nice, short article on 3 different ways you can draw decorative line using CSS. I think my favorite is the one using stacked gradients in a background image, if only because you can take that technique and expand on it to do all sorts of things.

Use CSS Clamp to create a more flexible wrapper utility

Quick hit that both gives you a useful class you can use out of the box and explores the power of the new clamp CSS function.

JavaScript

An Introduction to the JavaScript Temporal API

I’m excited to see high quality native datetime support coming to JavaScript so we can all stop importing massive libraries like moment.js. :P That said, it’s not quite ready for production use yet, as it is only at stage 2 in the standardization process and may change.

Connection-Aware Components

Speaking of super-cool new capabilities that are not quite available yet, check this out - a browser API to check for connection speed/quality, so you can make choices about how your component renders based on the connection a user has.

How to Solve the Infinite Loop of React.useEffect()

The mistake described - an interaction of useEffect and useState that leads to an infinite loop - is an easy mistake to make when getting started with hooks. I think this type of article that highlights easy mistakes to make and then ways to resolve it is more useful than the ‘top 10 ways to use X’ style articles because they run you through a way that naive mental model break down and help you build a better model of what’s going on.

Other Awesomeness

Progressive Web Apps in 2021

Comprehensive look at the state of PWAs now at the beginning of 2021. Market share, growth trends, compatibility challenge, new features, it’s all there.

Design Principles For The Web

Super fun long-form article derived from a talk. Looks at survivorship bias, how that plays out in the perils of decisionmaking/designing by metrics, and fleshes out useful principles and heuristics we can use to better create things that are as the author says, “not just on the web but of the web”.