Friday Frontend: The Power of Modern CSS
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.
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
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.
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.
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.
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.
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.
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.
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!
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!
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.
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.
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.
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.
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.
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.