(Editor note - sorry for the late republish on web, things were very busy the 2nd half of this month. To make sure you see get this on time, sign up for the email newsletter)

I’m another year older this weekend, and grateful for having you a part of my life this last year. Thanks for continuing to read, and I hope this newsletter continues to be valuable to you.

This week, my favorite articles are in the JavaScript section, particularly the ‘build your own React’ deep dive and the post looking forward to the pipeline operator.

Enjoy!

Best,

KBall from ZenDev

CSS & SCSS

Finally, it Will Be Easy to Change the Color of List Bullets

A look through the history of our options for controlling the style of list bullets. Starts with the oldest solution, looks at a better version that works right now, and then gives us a glimpse into the future.

CSS Grid: 3 practical examples

Nice learn by example approach to CSS Grid. Takes a set of realistic layout problems and walks through solving them using grid.

How Do You Remove Unused CSS From a Site?

A look through the state of the art of options for removing unused CSS. The key takeaway: There is no magic solution, they all have tradeoffs, and you need to understand what your tools are doing! I’ve seen a lot of folks try to just drop in uncss or purgecss and shoot themselves in the foot.

Understanding the Difference Between CSS Resolution and Device Resolution

Super helpful breakdown of the different things we mean when we say ‘pixel’ in different contexts. Explains the origins of the difference, and how to handle it.

JavaScript

Build your own React

Wow. This is a lot. But it’s super cool - starting from some simple React code, the author takes you through progressively implementing React to show how that code becomes DOM elements on your page. A great way to learn what’s happening under the hood of the most popular frontend framework.

Responsible JavaScript: Part III

Deep dive look at the challenges and problems of using 3rd-party scripts, and how you can mitigate some of them. It may not be possible to completely eliminate them (though I have so far kept them out of my newest site and am loving the speed of having zero third party scripts), but after reading this you’ll be eager to trim them down and have a plan for what to do when you can’t.

Breaking Chains with Pipelines in Modern JavaScript

I think the pipeline operator is the feature I’m most excited about in upcoming JavaScript, and this article does a good job of illustrating why. Combining it with generators and iterators allows an incredibly clean and still performant approach to functional programming in JavaScript. Yes!

Handling null and undefined in JavaScript

Null and undefined are edge cases that are extremely frequent sources of bugs in JavaScript. This article looks at a range of techniques for handling and preventing those issuess.

Versatile Ivy: Using Angular and React Together

Interesting look at embedding Angular within React or React within Angular. Sure, for most situations you aren’t going to want to load both of these in one page, but it can happen, especially when in transition. Good to see how it can work.

Other Awesomeness

Variations on Theme: Reinventing Type on the Web

Part of a great series of insights that CSS tricks put together from web developers and designers about what they’re excited about in the year 2020, this highlights why this year may truly be the year variable fonts take off.

Get More For Less With Variable Fonts

If the above article has you intrigued, this one will take you further, looking in more detail at what variable fonts enable and what exactly the axes of variation are.

Scaling GraphQL at PayPal

Excellent case study of implementing and scaling GraphQL at a large company across many services and handling very large amounts of traffic.

The Aesthetic-Accessibility Paradox

I think this author is wrong along a few dimensions, and pretty abrasive in their response to some comments. However, I also think that there is a dimension here worth discussing, which is how to think about accessibility (particularly in colors) when it conflicts with other design goals. Honestly with the prevalence of theming and the increasing existence of settings like prefers-reduced-motion I wonder if we could resolve this by creating high-contrast and low-contrast themes, perhaps even automatically switched between using a media query.

Happy Friday!

That's it for this week's Friday Frontend newsletter. If you enjoyed this, you should probably follow me on Twitter or join my mailing list. Sign up to get these newsletters straight to your inbox every Friday! Sign up here: https://zendev.com/friday-frontend.html