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. :)

The Wordpress 5.0 public release date (which will include the new React-based Gutenberg editor) is scheduled for NEXT MONDAY. This means the platform used by 30% of the world’s websites will be leaping into modern JavaScript. (I mean really, the current version of wordpress uses something like jquery 1.12, and next version is jumping forward to React…). Expect chaos, expect backlash (some of each highlighted below), but also expect massive opportunities for front-end developers.

Also in this week’s newsletter, some super cool CSS articles (I LOVE the dive into CSS and network performance) a set of JavaScript fundamentals, and a couple looks at new/recent React features. Enjoy!

Best,
KBall from ZenDev

CSS & SCSS

The “C” in CSS: The Cascade

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.


CSS and Network Performance

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.


Five years of PostCSS: State of the Union

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!)


Grid Tile Layouts with auto-fit and minmax

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.


Editorial Layouts, Floats, and CSS Grid

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.


JavaScript

10 things to learn on the way to becoming a JavaScript Master

A nice summation of JavaScript concepts and techniques to learn about. Doesn’t teach you any of them, but gives you a high level idea of what the concept is that should be enough to 1. Decide if you’re already familiar or not, and 2. Google for some resources to learn it.


Understanding Asynchronous JavaScript — the Event Loop

Great explanation of how asynchronicity works in JavaScript. The event loop is a core part of how we think about developing in Node, but is also a key part of browser based approaches. If you’ve ever wondered about why so many frameworks have some sort of ‘nextTick’ function, or seen code with a setTimeout with value 0 or 1 and wondered what the heck it was doing, you might well benefit from reading this article.


The Complete JavaScript Handbook

Massive, encyclopedic resource for learning JavaScript. Claims to follow the 80/20 rule, covering 80% of JavaScript in 20% of the time… I dunno how to assess that, but it covers a truly mammoth and impressive amount of the language in a single article.


React Suspense with the Fetch API

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 Introduction to Hooks in React

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.


Other Awesomeness

What’s New in WordPress 5.0 (How to Prepare for Gutenberg)

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.


The Guten, the Berg, and the Ugly

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.


Building a Donut Chart with Vue and SVG

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.


Introducing the GraphQL Foundation

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.


Web.Dev

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.