Friday Frontend: Almost Halloween Edition

Hey there,

We’re getting close to Halloween, which is also often my signal for getting close to the end of the year. I certainly hope that when we put 2020 behind us, we’ll be back on the road to improvement in so many of the dimensions that have been hard this year!

This week’s newsletter has a wide range of stuff, from some interesting comparisons of different CSS methodologies to a super deep dive on isomorphic JavaScript, to some great career and communication advice. Enjoy!

Best,

KBall from ZenDev

P.S. Thanks to those who shared what they’re finding to get excited about today. Reading interesting books, learning new skills, and improving outdoor spaces were all themes I heard. Please keep it coming! If you have something that you’re getting excited about, share it with me. We all need ways to keep finding light in the darkness that has been 2020. 

CSS & SCSS

Comparing Styling Methods in 2020

Nice quick roundup of the multitude of options you have when it comes to styling today. I’m a big fan of using SCSS, but these days I’m spending much of my time in a CSS-in-JS codebase and it definitely has its advantages as well.

Sass vars, CSS vars, and semantic theme vars

On the subject of different styling mechanisms, this short and sweet article looks at some of the differences between Sass vars and CSS vars, including what can be moved from Sass into CSS and what cannot. CSS has gotten much more powerful, but there is still a place for Sass in the layer cake that is styling.

Logical layout enhancements with flow-relative shorthands

Useful CSS shorthands for our continued progress into a web that works better across multiple language types, with different horizontal and vertical flow. I’m working right now on the first truly internationalized application I’ve ever done, and dealing with the multitude of approaches in different languages is an incredibly complex challenge. More tools like this help chip away at some of the pain points.

State of CSS 2020 Survey

For good or bad, the ‘State of X’ surveys get a lot of visibility and are discussed quite a bit in the community. The set of folks responding to them tend to be very JavaScript focused (simply due to the existing audience of the folks backing the survey), so especially if you are coming from a more HTML & CSS or design background, make sure you chime in and make your voice heard.

PureCSS Character

If you’re into CSS art, this is an incredible piece to look at. I love the inclusion of toggles for hair and skin color on the right. Shows some of the amazing things you can do with CSS Variables.

JavaScript

The Journey to Isomorphic Rendering Performance

This is a super interesting deep dive in how the author of the SolidJS framework dug into making the framework isomorphic with extremely fast server-side rendering. As an application developer, much of this is hopefully irrelevant to you (your framework should “just do it” for you), but it is still a fascinating piece with some very innovative ideas (I live the idea of modeling isomorphic reactivity as a promise sent from server to client). It is a challenging read, but it will expand your mind.

Getting Started with Modern JavaScript — Proxy

A great quick hit diving into the Proxy functionality and how it works. This is a super useful pattern for building systems that transparently react or create side effects on change.

What is Functional Inheritance?

Super short article - literally 2 paragraphs and a code example - but I think this is a useful pattern to be aware of, especially in the JavaScript world of prototypal inheritance, where this type of composable inheritance is straightforward and useful.

Top 10 React Hook libraries

Most of the highlighted libraries are super small and targeted -- things like useMedia to make it easy to work with media queries. That doesn’t take away from their usefulness though, and if you’re working in react this is worth a scan through to understand what’s out there so you don’t end up rolling your own when a solid 3rd party library already exists.

Other Awesomeness

Focus management and inert

This article combines a useful overview of focus management as it exists today with a look at a future feature (currently available in experimental mode in a number of browsers) that will make focus trapping, typically used for modals but sometimes elsewhere, infinitely simpler to implement.

So good they can’t ignore you — how craftsmanship builds great careers

Super useful career advice for makers of all types. While the article uses specific examples that are focused on designers, I think the approach and many of the insights and tips will be useful for anyone.

The two most important steps of the design process aren’t about design

I like this because it emphasizes two of the key communication points in design work: the project definition/brief, and the design documentation. Similar to software development, if you don’t properly get your inputs or communicate your work, that work is either going to be ineffective or unused. That said, I think there is room to talk about continuous communication and adjustment throughout the process, and that is likely to be almost as important.

Unlearning to learn design

This article has two pieces: highlighting the ways in which the current design system bakes in existing systems of privilege, and thoughts on ways to step back from that and be more inclusive in design processes. If you are uncomfortable thinking about things like race and privilege, this may not be an article you enjoy, but I think it is a super important piece of the conversation about design’s social impacts and place in our current societal conversations about diversity, inclusion, and prejudice.

Thank you, Dr. Bahmutov! [audio w/transcript]

A fun JSParty episode with one of the creators of Cypress.io, diving into JavaScript testing, how Cypress works both as open source and a business, and why end to end testing is a must in the web world.