Friday Frontend: Birthday Edition
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.
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.
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.
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.
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.
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.