Hope you had a great week and are looking forward to a good weekend! This week’s articles fell into a couple of themes that I want to call out to you.

First, there’s a set of articles that highlight the power of modern CSS (and some of the SUPER EXCITING upcoming features).

Second, there’s a whole slew of interesting performance related articles down in the ‘other awesome’ section, both making cases about why you should care about web performance and giving you tools to have an impact.

Plus of course a smattering of other CSS, JavaScript, and web related topics including one of the most interesting articles I’ve seen yet on React Hooks. Enjoy!

Best,

KBall from ZenDev

P.S. in case you didn’t see it and are interested, I published a post this week on my top 5 frontend topics to learn in 2019.

CSS & SCSS

In Defense of Utility-First CSS

One of the most thorough and well-done explanations of the thinking behind “Utility-First” CSS (related to atomic CSS) that I’ve seen. Goes through many of the arguments against and addresses them one by one. Definitely opened my eyes a bit - I may now try this out on a project and see how it goes.

Why we need CSS subgrid

CSS Subgrid is the next part of CSS Grid that will be revolutionizing the way we do layouts. It’s currently in the process of specification, and hopefully we’ll start seeing it in browsers in the next year or so. This post explains what it is, what the problems are that it’s solving, and how it will be used. Frankly, it got me EVEN MORE excited about CSS Grid than I already am. Front-end development is a wonderful place to be right now.

When And How To Use CSS Multi-Column Layout

Often neglected in the amazingness that is today’s grid and flexbox layout mechanisms, CSS also has a multicolumn layout structure that is supported (at least mostly) across just about every browser. It’s relatively constrained - there’s a pretty small number of scenarios where it works well - but it’s another powerful tool in the toolchest.

Stepping away from Sass

A take on how some of the key value propositions from Sass have “transcended” into being available directly in CSS. Personally I use mixins enough that I’m still pretty excited about Sass, but I think the author has some really good points, and it’s another reminder of how powerful CSS has become.

New horizons in CSS: Houdini and the Paint API

On the topic of the power of CSS, this is a good look at upcoming CSS Houdini, one of the most exciting in-progress developments that will influence how powerful CSS will be.

JavaScript

Using React Portals to Render Children Outside the DOM Hierarchy

Portals aren’t something I’ve seen or thought about much before, but this is articles gives me a very clear idea of what they are and how they work. Lets you create conceptual children that are not necessarily DOM children of a component, keeping all the nice hierarchical benefits of child components while letting you break out of layout constraints. Modals are the canonical example, but there are many other scenarios I could think of for this.

Getting Started with Web Accessibility in React

Very nice look at how to implement an accessible web application using React. In-context information about the tools that React gives you that you can use to address a range of accessibility challenges. Love it!

How I built an async form validation library in ~100 lines of code with React Hooks

One of the value propositions of React’s new Hooks API is that hooks are composable. This is the first article I’ve seen that really starts to explore the power of that composition, building a very simple and powerful API for form validation. Very cool!

TypeScript 2.8: Conditional Types

The latest version of TypeScript comes with a very powerful feature that lets you implement functions handling multiple types and give clues to the compiler about when you can infer one type over another. This is an incredibly powerful addition to the TypeScript toolchest.

Real JavaScript, not too much, stage three and above

(Bias alert - I did this interview) A behind the scenes look at the way ECMA and the TC39 committee work to create the standards for the JavaScript language. If you’ve ever wondered how all that stuff works (or how to get involved), this is a great conversation to listen to, or if you prefer to read there is a transcript at the link above.

Other Awesome

The Ethics of Web Performance

A discussion of the ethical implications of web performance, making the case that we have a moral obligation to tune the performance of our sites. Looks at exclusion, access, and also energy and waste. If we care about global warming, the energy costs of popular websites actually do start to matter, and tuning performance can make a real difference.

Web Page Usability Matters

Another look at the implications of web performance, this one from the angle of how it impacts user behavior. Looks at the different dimensions of performance, how those correlate with user behaviors we might want to avoid (rage clicks) or encourage (conversions), and looks into some of the approaches you can use to optimize various performance dimensions.

Front-End Performance Checklist 2019

Whether the above articles convinced you that paying close attention to performance is something you want to do, or front-end performance is already on your agenda, it can be helpful to have a checklist of points to consider and address. This is exactly that, helpfully downloadable as a PDF/Mobi/Etc, as well as online via HTML. For each point in the checklist there are links for context and guidance on how to do it. Excellent.

Designing the Flexbox Inspector

Very interesting look behind the scenes at the thought process behind the new Flexbox inspector in Firefox. Neat to see how they thought about the unique properties of Flexbox and how to expose those and the decisions the browser is making around them to developers in dev tools.

Why Does Everyone Love GraphQL?

In my recent post about topics to learn in 2019, I put GraphQL on there, largely based on the rapid adoption growth and increasing number of projects & companies I hear about adopting it. This post takes a look at some of the ‘whys’ behind that rapid growth. What the benefits and features are that are leading GraphQL to become so popular so quickly.

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