Frontend Focus
Issue 250 — July 27, 2016
You’re in a container element with a limited width but want to run a full-width image or other ‘breakout’. What are the options? Some clever tricks here.
Chris Coyier

A click-by-click journey, starting with a basic page, and progressing to consider content, spacing, color and contrast. This has been very popular online this week.
Jeremy Thomas

A look at how a service worker can help you capture offline analytics to send to Google Analytics later on.
Google Developers

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

An in-depth walkthrough, complete with code and examples, of pushing SVG for building advanced Web-based animations.
Michael Ngo

This mechanism prevents pages on other origins from accessing your page’s window object via window.opener.
Jake Archibald

A code review of some form elements led to deep thoughts on how to approach crafting frontend code overall, plus a neat 20 minute HTML code review by Jonathan Snook.
Brad Frost

Paul Lewis explains the new CSS Containment property (contain) which lets developers limit the scope of the browser’s styles, layout and paint work.
Paul Lewis

Jobs Supported by

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

In Brief

$20 Off Front-End Development and Node.js Workshops rawurl news
Upcoming workshops on Webpack, Creating Open Source, Node.js and Elm are all $20 off this week.
Frontend Masters  Sponsor

:any-link CSS Pseudo-Class Has Been Unprefixed in Firefox news
Firefox Site Compatibility

New HTML5 'video' Element Policies for iOS news
Safari in iOS 10 will allow video to play inline and video can now autoplay if the media contains no audio track.
Jer Noble

How We're Bringing HTML5 Video Animations into Tellyo Pro news
Tellyo is a real-time video publishing tool.
Jan Pietek

W3C HTML5 Validator Enhanced with Language Detection Functionality news tools
Can now compare text language with HTML lang attributes, etc.

Final W3C Working Draft of Accessible Rich Internet Applications (WAI-ARIA) 1.1 news

W3C Candidate Recommendation of Resource Timing Level 1 Published news
Provides an interface for webapps to access complete timing information for resources in a document.

The Proposed CSS 'box-suppress' Property news
Rachel Andrew

Make a Morphing Play-Pause Button for HTML5 Video with SVG tutorial
Dudley Storey

requestAnimationFrame Scheduling For Nerds tutorial
A quick look at the scheduling of multiple requestAnimationFrame callbacks.
Paul Irish

Turning Off Autocomplete in Chrome with React tutorial
Getting Chrome to respect your autocomplete="off" property on form inputs.
Paul Matthew Jaworski

Neat Uses for CSS's Awesome Viewport Units tutorial
A look at vw and vh
Martin Falkus

A Tale of 'width' and 'max-width' tutorial
Comparing width: 600px; max-width: 100%; against width: 100%; max-width: 600px;
Chris Coyier

Client Side Performance from the Perspective of a Developer video

Privacy Aspects of the W3C Vibration API opinion
Fingerprinting, identification and out-of-band communications issues.
Lukasz Olejnik

Lightning fast SSD hosts for your HTML5 project rawurl tools
Host your HTML5 site on Linode servers - the fastest VPS hosts available. Use promo code HTML520 for $20 credit.
Linode  Sponsor

PWAify: Progressive Web Apps Running as Native OS X Apps tools
Vlad Filippov

apimock: A Mock API Server tools
Build your front-end without the backend being ready. Written in Node.
Pierre Prinetti

Howler.js: JavaScript Audio Library for the Modern Web code
James Simpson

Aquarelle: A 'Watercolor Effect' for The Web code
See a demo here.

Omnitone: Spatial Audio on the Web story

WebGL Globe Viewer demo
Very smooth and fun to play with.