by Sean Lange

Front-end Rapport #2

Web Technologies Hanging Out Together

Topics: HTML, CSS, Javascript, PHP

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.

Pixels are Expensive

Topics: performance

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.

Everything You Need to Know About the CSS will-change Property

Topics: CSS, JavaScript

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.

Componentize the Web

Topics: Web Components, JavaScript

This is Addy Osmani's recorded talk from LXJS, along with slides and related links. Addy details the role of web components and how to create custom HTML elements with Polymer.

What Happened Recently

  • Determine exactly where a breakpoint exists in a stylesheet with Chrome's media inspector — @umaar
  • position:sticky temporarily removed from Blink (chrome's rendering engine) — @paul_kinlan
  • jquery-latest.js was inaccessible on the jQuery CDN for a short time, jQuery blog warns not to use in production. — @jquery
  • Chris Coyier finds gold in an rarely used CSS property called table-layout: fixed; — @chriscoyier

Daily News

Craving more? Subscribe to our Flipboard mag for daily updates or sign up for our newsletter below.

Front-end Rapport

Enter your email address

powered by TinyLetter