Friday Frontend: Color Palettes and JS Performance Edition
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.
KBall from ZenDev
CSS & SCSS
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.
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.
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.
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.”
Great dive beneath the hood of what’s going in on some popular CSS-in-JS libraries, and what the performance implications are.
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.
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. :)
(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.
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.
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.
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!
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.