Frontend Focus
Issue 255 — August 31, 2016
Google’s Rob Dodson makes the case for why he thinks Custom Elements make sense on the modern Web, particularly within large organizations.
Rob Dodson

Any time a browser has to recalculate the positions of elements in a document, a reflow occurs which can affects performance and the user experience. How can these shifts be minimized?
Smashing Magazine

While developing a 3D card flip effect for the Web, Google’s Paul Lewis ran into some challenges with making good shadows. This post explores how he overcame them.
Paul Lewis

If you're a HTML5/JS dev, maybe you have already jumped in on a responsive project and would like to learn more. If not, responsive web design will probably be a requirement in the near future. This whitepaper will give you the must-know responsive web.
Progress   Sponsor

“The W3C Wiki and the W3C specifications are now accessible using the Memento ‘Time Travel for the Web’ protocol.” Memento is an HTTP extension that adds a ‘time dimension’ to the Web.
Herbert Van De Sompel

A look at techniques for making CSS animations and transitions feel more natural and professional.
Nash Vail

How to use Web Bluetooth to control any Bluetooth Low Energy device directly from your PC or smart phone as a Progressive Web App.
Uri Shaked

A look at building a wrapper for the Fetch API, step-by-step, to cache fetched AJAX results and avoid repeated requests to the server.
Peter Bengtsson

Build some practical experience in making webapps accessible with Alice Boxhall and Rob Dodson in this online course.

Jobs Supported by

Can't find the right job? Want companies to apply to you? Try

In Brief

W3C Invites Implementations of its Data on the Web Best Practices news
W3C News

Microsoft Edge and Continuum: Your Desktop Browser On Mobile news

WebDriver Support Now in Safari 10 news
WebDriver is a browser automation API that enables people to write automated tests.

Celebrating 15 Years of WebKit news
The first commit to the public WebKit repository was made in August 2001.
Maciej Stachowiak

HTML Spec Changing Behavior of Line Breaks with minlength and maxlength news

Webinar: 3 Tips to Deliver Fast Performance Across Mobile Web rawurl
Tips to ensure your responsive web design is high-performance and customer-friendly. Register now.
Dynatrace  Sponsor

The New Rules of (Web) Form Design tutorial
Mike Madaio

A Thorough Intro to Spectre: A Lightweight CSS Framework tutorial
Baljeet Rathi

CSS Positioning Explained By Building An Ice Cream Sundae tutorial
Kevin Kononenko

Fun Times with CSS Pixel Art tutorial
Techniques for producing retro-style ‘pixel art’ for the Web using CSS, Canvas and SVG.
Geoff Graham

Using WebP Images tutorial
Still only supported in Chrome, however.
Jeremy Wagner

Use Cases for Fixed Backgrounds in CSS tutorial
Geoff Graham

Webpack from First Principles: A Smooth 15 Minute Intro video
Front End Center

Demythstifying Web Components: 4 Myths Debunked opinion
Daniel Buchner

How to find and fix the slowest code in your .NET application rawurl tools
Find bottlenecks in your code or database and boost performance with new ANTS Performance Profiler 9. Try free.
ants performance profiler  Sponsor

Grade: Generate Complementary Gradients From Supplied Images code
The demo shows it off well.
Ben Howdle

Badgerly: A CSS 3 Library for Rendering Badges code
Steven Hunt

React Static Plate: Build Static Sites with React + CSS Modules code
Uses ES6, supports hot reloading locally, generates a sitemap.xml file.
Yannik Schweinzer

Interactive 3D CSS Cubes demo
A simple interactive grid in 3D space. The effects are pure CSS.
Christine Cha

Make a Depth of Field Effect with CSS Animation demo
Simulating depth-of-field with HTML and CSS alone is “surprisingly easy”. Demo of it in action.
Pixel One Zero