Happy Friday! Just two full weeks left in 2019, and we’re starting to see a number of end of year round up/looking forwards, plus some “advent calendar” pieces publishing something every day this month.

That said, what stood out to me this week was a set of pairs - first in the CSS section looking at tooling for color palettes, and second in the JavaScript section looking at performance. There’s also some great new tools around shadows and sharing React components, plus an *awesome* interview published on JSParty.

Enjoy!

Best,

KBall from ZenDev

CSS & SCSS

A Handy Sass-Powered Tool for Making Balanced Color Palettes

Fascinating exploration of color and a tool to look at and balance different attributes. Interesting both for the tool itself and the exploration into Sass functionality to understand how it was built.

Calculating Color: Dynamic Color Theming with Pure CSS ⬇

If this wasn’t dated beforehand, I’d swear it was a reaction to the article above. This one takes a set of base colors and explores how you can use vanilla CSS to build out a color palette, creating much of the same functionality exposed by Sass.

Make a smooth shadow, friend.

Super cool tool that lets you manipulate a variety of dimensions of box shadows using a GUI, see the output, and copy the CSS to reproduce the effect.

CSS: An Art, a Science, a Nightmare (Everything You Should Know)

Solid overview article. I also super appreciate that the author makes clear who the article is for - not experts, not novices, but “the middleground of people who have had to touch CSS a few times here and there but ultimately don't feel like they know what they're doing, or struggle with making basic layouts.”

5 CSS Predictions For 2020

We’re at that time of year, where it’s great to look back and look forward. I think this is generally a great list, and agree with almost all of them. I do think the “hail mary” prediction of a package manager for CSS is pretty unlikely, but I wouldn’t be at all be surprised to see more css-specific tooling spring up around JavaScript package managers like npm.

JavaScript

JavaScript component-level CPU costs

Woah, this is a fascinatingly deep and precise look at the CPU cost of various JavaScript components. Appears to only fully work on Linux, but lets you get literal number of CPU instruction counts on how expensive things are to render and run.

The unseen performance costs of modern CSS-in-JS libraries in React apps

Great dive beneath the hood of what’s going in on some popular CSS-in-JS libraries, and what the performance implications are.

JavaScript Christmas

An “advent calendar” highlighting a different JavaScript article every day for the first 25 days of December. Depending on your level and interests different articles may be of interest, but it’s definitely worth taking a look.

Introducing React View, an Interactive Playground for Your Components

Interesting looking alternative to Storybook for creating interactive documentation of React components, open sourced by Uber. They’ve made some different choices than storybook, for one they allow live code editing in the web page to see how things work. I’ll be interested to hear what people think.

What's the difference between encodeURI() and encodeURIComponent() in vanilla JS?

Super short article, but it clearly answers a question I’ve found myself googling many times over my career, so I thought it might be useful to you too. :)

Promoted Link

LAST DAY TODAY - Udemy Courses starting at $11.99

Ending today, Udemy is running a “Tis the season for learning” sale marking down all of their courses, with almost all of them between $11.99 and $14.99. If you have been meaning to get something, now is the time! And if you’re looking for recommendations, Courses I’ve been recommending recently include The Complete JavaScript Course 2019, Modern React with Redux (the course I learned React from, updated with all the latest features), and Vue JS 2 - The Complete Guide (by one of my favorite Udemy instructors, Maximilian Schwarzmüller.)

Other Awesomeness

Modernizing Etsy’s codebase with React (Audio with transcript)

(Bias alert: I recorded this interview) -- Super fun interview with Katie Sylor-Miller, front-end architect at Etsy. We talk about migrating OhShitGit to the JAMStack, migrating legacy codebases to modern front-end technologies, and design systems.

Making a Better Custom Select Element

Fascinating walkthrough of the process of making an accessible custom element. Explores a series of different type of use case - mouse, touch, sighted keyboard use, screen reader plus keyboard - and looks at what we need for each to make this new element both understandable and usable.

WebAssembly becomes a W3C Recommendation

From an exploratory working group to an official W3C recommendation and standard, WebAssembly has grown up and is now clearly a huge part of the future of the web.

Motion Paths – Past, Present and Future

Cool tutorial on animating SVGs along a motion path. Looks at both current solutions using GSAP and the upcoming CSS motion path module. SUPER excited to have this accessible in CSS!

Brand Illustration Systems: Drawing A Strong Visual Identity

A delightful look at the process of design when it comes to visual brand identity. This is an area of design that front-end developers often have less insight into, as it comes well before the actual design of pages and components, but it’s super key for creating a recognizable and relatable brand.

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