Let’s say there is a divide happening in front-end development. The divide is between people who self-identify as a (or have the job title of) front-end developer, yet have divergent skill sets.

On one side, an army of developers whose interests, responsibilities, and skill sets are heavily revolved around JavaScript.

On the other, an army of developers whose interests, responsibilities, and skill sets are focused on other areas of the front end, like HTML, CSS, design, interaction, patterns, accessibility, etc.

The way we write CSS is about to change. No, I don’t mean you have to change how you write your styles, but we as developers are about to get a lot more control. What am I talking about? That would be the CSS Houdini spec and the new browser APIs that are coming out as a part of it.

This morning, I read Heydon Pickering’s post on switching from a multiple column flexbox layout to a single column layout without an intermediate step. I spent a bunch of time figuring out why it works.

Ensuring visual consistency is one of the biggest challenges of working on a UI component library. Since visual regressions in one component can lead to unwanted changes across an entire application, it becomes vital that we test not only our components functionality, but also their visuals. What follows is the story of how we introduced visual regression testing into our React component library that implements our design system.

Despite how simple is each of the items in this example, we’re getting a big improvement by using CSS Containment in layout time going down from ~4ms to ~0.04ms which is a huge difference. Imagine what would happen if the DOM tree has very complex structures and contents but only a small part of the page gets modified, if you can isolate that from the rest of the page you could get similar benefits.