Friday Frontend: Almost Guten-Time Edition
Hello from fire-filled California where we’ve been breathing smoke for the last week and could REALLY use some extra rain if y’all have some to send. :)
KBall from ZenDev
CSS & SCSS
If you still feel like you’re fighting to understand why certain CSS attributes aren’t showing up like you’d expect, chances are you’re still wrapping your head around the cascade. No shame, it took me a long time to really master it. This article does a nice job breaking it down step by step, and also has a great visual guide at the end for those who learn better visually.
A very deep dive into the performance implications of how you place your CSS, how it interacts with script loading, and much more. Fascinating and filled with actionable advice.
The description of PostCSS as a framework for building CSS tools is apt; PostCSS is the Babel of CSS (that happened to exist before Babel did), and this is a really neat look at some of the various tools that have been built with it. It’s come a long way from just autoprefixer (though that is still a great usecase!)
Super cool exploration of how easy it is to create a variety of responsive tile layouts using CSS Grid with auto-fit and minmax. Yet another example of how responsiveness via media query has become the “old clunky” way to do things - the new tools are so much more powerful.
With all the power inherent in CSS Grid, and the articles and tutorials showing how much nicer it makes things, this is an interesting exploration of one use case that it doesn’t handle well: floating text around an image while sticking to grid alignment. The author does a good job of explaining the situation, the old-school solution, and walking through how to handle it with grid. There’s also a bonus reference to future CSS features that will make the solution better.
Both an interesting dive into how React Suspense works and an example of how to wrap up an existing API to play nicely with it.
An excellent step by step to get started with the new experimental Hooks API. Covers the full story from motivations, through a slew of examples, on to writing custom hooks, and explores how to write tests for hooks.
For all of the concerns, the fact that huge numbers of people still hate it, and that the accessibility story is terrible, it is looking like Gutenberg is going to ship. Current scheduled ship date is later this month, with a fallback if they miss the deadline (probable) to January. This will be big for anyone working with WordPress, and likely also open a bunch of possibility for frontend developers at large. Check it out.
Wow. The comments on this post will give you a bit of the flavor of discourse about Gutenberg in the Wordpress world. It’s pretty polarized. This article is good because it provides a relatively neutral evaluation of Gutenberg, not shying away from its downsides but also acknowledging many of the good sides and remaining bluntly pragmatic about options moving forward.
It’s been a while since I highlighted a JS-framework-SVG manipulation article, and most of the ones I’ve done before have been showing how powerful combining React with SVG is. Turns out, Vue is just as powerful; this is a great walkthrough of how simple it is to create an interactive SVG using Vue.
This is promising for those looking to build on top of GraphQL for the long term - an independent Foundation is getting set up under the Linux Foundation to provide a neutral home for the continued stewardship of the project. Good to see that Facebook is letting some of its projects out from under it’s wings into true community ownership… though I gotta wonder why GraphQL gets to be fully independent but React doesn’t.
At the recent Chrome developer summit, Google launched a new page that combines Lighthouse-style site auditing with educational resources to help you improve the performance of your site along 4 dimensions: Speed, Accessibility, Best Practices, and SEO.