Front-end Rapport #2

Chris Coyier dives into how front-end code interacts and intersects, and provides some insight into the building blocks that create the front-end language ‘stack’.

Our Take

Communication is important for all kinds of reasons, so how your various front-end languages talk to each other is critical to achieving a desired result. For Front-end Developers there is typically a level of pride when it comes to following coding standards, best practices, and being able to implement the latest and greatest hacks and techniques. This article stirs up something more primal, more down-to-earth by going beyond tools and tricks and looking at how the languages work together. A great read for beginners and a nice retrospective for seasoned professionals.

This article gives an overview of how page rendering works by stepping through the four key areas: recalculate style, layout, paint, and compositing. Paul Lewis stresses the point that modern web developers need to be aware of the render pipeline because we need to optimize for it. He also touches on a new way to put elements in their own compositing layer by using the new will-change property.

Sara Soueidan outlines the new will-change CSS property, underscoring it's usage, benefits and potential pit falls. The will-change property informs the browser that an element is about to change, allowing the browser to make the necessary, potentially expensive, optimizations prior to an animation, resulting in a smooth and stable experience.

tl;dr: This property removes the need for translateZ() (or translate3d()) hacks. Use sparingly in stylesheets and set/unset the property with JavaScript when possible. Current browser support: Chrome Canary 36+, Opera Developer 23+, and Firefox Nightly. See the spec at CSS Will Change Module Level 1.