CSS is great at handling all the visual bits of the web. With just a couple of lines, the browser knows exactly how we intend to layout the site. Changing one line can drastically change the appearance of hundreds of elements. It’s possible to get pretty far on CSS alone by being very clever indeed.
Soon that will all change. Enter Houdini.
In order to get pixels on the screen, most browsers go through the same process. They workout how things should be laid out, draw them and then stick them all together. This layout ➡️ paint ➡️ composite process is known as the rendering pipeline.
The three big Houdini APIs - the Layout API, Paint API and animation worklets make it easier for us to control the rendering at all stages of the pipeline. The Paint API is ready to play around with in browsers now, with the others still in the works.
In the latest Web Designer we take look at exactly what Houdini is, how it helps the web and how to start using it today. It’s not all ready for prime-time, but we’re closer now than ever before.
This is also the final issue of Web Designer. Over the past three years, I’ve covered a bunch of topics for them and learned a lot along the way myself. While I’m sad to see it go, I’m glad I got the chance to feature in the final issue. It’s a shame to see it leave, but glad it helped so many people over the 293 issues.