ZenDev - Friday Frontend: March 12 Edition

Hey there,

Happy March to you all! This newsletter seems to be turning into an every two weeks one, at least right now while I’m super crunched for time. We’ll see if that makes it more sustainable.

I’ve got a slew of interesting articles this week - I think my favorites are the one about progressive enhancement in CSS and the ‘before you memo’ post on thinking about performance in React. Enjoy!

Best,

KBall from ZenDev

P.S. Interested in working in a company that takes diversity, culture, and work-life balance seriously? One where there is both an ambitious mission (making work better for everyone, everywhere) and an acknowledgement that we are all human and have lives? Come work with me! We’re hiring for frontend, full stack, and design! Right now only more experienced folks (4+ years) because we’re still training our last group of junior engineers. If you want to learn more, feel free to hit REPLY and shoot me an email, I’d love to talk with you.

CSS & SCSS

A DRY Approach to Color Themes in CSS

This is a super cool (if semi-hacky) way to clean/dry up your CSS and when dealing with multiple themes (or just light/dark mode). The preprocessor version makes it crystal clear, but even the pure CSS version seems like an improvement in readability.

Ensuring the correct vertical position of large text

Relatively simple, but may change you a bunch of time if you run into this exact problem. Large text, especially in non-standard fonts, can have very different vertical offsets across different browsers and operating systems. This post shows you how to correct it.

Diving into the ::before and ::after Pseudo-Elements

I love pseudo-elements, and think getting to understand (and eventually master) them is one of the biggest steps you can take in terms of unlocking new and different ways of creating visual effects in CSS.

The Beauty Of Tiny Enhancements In CSS

Progressive enhancement used to be something we talked about with regards to JavaScript, but I love this way of thinking about it for CSS. There are so many new and wonderful CSS features, but some of us still have to support enterprise clients using IE11. This approach lets us delight those who are on modern browsers while still supporting those who few stuck in the wilderness.

Exploring @property and its Animating Powers

One of the interesting challenges with CSS animations is learning about the types of properties where it just doesn’t work. And a big reason for that is some values end up getting treated as strings, so the browser doesn’t know how to interpolate between different values, so it just jumps. Enter @property, letting us add type information to custom variables, which then allows the browser to know how to interpolate them. So cool!

JavaScript

Before You memo()

Beautifully simple explanation of a powerful way to think about improving performance within a React application - manipulating the component hierarchy and where state lives. By making sure you locate components and state at the “right” locations of the tree you can prevent expensive rerendering without explicit memoization.

5 Common JavaScript Memory Mistakes

In a world of persistent SPA applications, JavaScript memory management is hugely important. And even the most widely used applications can run into these problems (anyone else have to periodically close Gmail because it has started taking up 500MB or a gig of memory?). These common mistakes are important to be aware of and watch out for.

5 Advanced Tips for Vue Performance

Interesting set of tips. A common theme here - reactivity is the “secret sauce” of Vue, but if you’re not careful it will end up doing too much and slowing you down. Understand how reactivity works and you can work around some of those naive errors.

The Dark Side of Javascript: A Look at 3 Features You Never Want to Use

This is a fun diversion. If you ever are interested in writing some obfuscated code, or you are looking at really old JavaScript, these might be useful to you. Other than that? I agree with the author, these are generally better left unused.

Other Awesomeness

Explore GraphQL with Graphman

One of the interesting aspects of GraphQL is how amenable to tools it is. Unlike REST APIs, GraphQL automatically includes type structure and relationships embedded straight within the API. This means tools (like the one described in this post) can do a great deal of automatic inference and let you do some really powerful things, including exploration.

How to Build Great Products

I wish this post went deeper, but it still covers a useful set of product development heuristics.

Models Before Screens

A useful take on the design process. We often want to jump so quickly into mocks or prototypes, but we need to first understand the mental models involved, otherwise our designs will mirror our functional implementation rather than helping the user do what they are trying to do.