Frontend Focus
Issue 264 — November 2, 2016
The latest minor revision of W3C’s interpretation of HTML. Its relevance as a spec versus WHATWG’s work remains under dispute, however.

Pointer events unify the pointer input model for the browser, bringing touch, pens, and mice together into a single set of events. IE 11, Edge, and Chrome 55 support them so far.
Google Developers

Webpack is a popular JavaScript, CSS and resource/asset bundler. This post walks through using the soon to be released 2nd version.
Drew Powers

Google Inc.
Chrome Dev Summit 2016 will feature two full days of talks from the Chrome team, including a keynote address by Chrome VP Darin Fisher. All sessions will be livestreamed from our website on November 10-11. Sign up here for livestream updates.
Google Inc.   Sponsor

The WebAssembly project has reached the browser preview milestone, with multiple interoperable implementations from Firefox, Edge and the V8 project now available.
Seth Thompson

A look at getting information from MIDI devices, such as digital pianos, in the browser (Chrome and Opera so far) with JavaScript.
Stoyan Stefanov

What types of assistive technology are used to access the Web? Screen magnifiers and readers come in as most common.
Chris Moore

An overview of OpenType features, explaining why they’re important to typefaces, and explaining the tradeoffs they have on performance. 26 minutes.
Helen Holmes

How shaders work and how you can build your own to render graphics in the browser.
Smashing Magazine

A brief survey to find out what tools and frameworks developers are currently using in their projects and workflows. Ashley promises to share the results on his blog.
Ashley Nolan

A fantastic, thorough guide to creating SVGs for use on the Web. Packed with examples and code.

Jobs Supported by

  • Shouldn't Companies Apply to You? - Try HiredYou're modern, you’re savvy, you're efficient. Why keep job hunting the old way? Try Hired and get in front of 4,000+ tech companies with personalized support to help you land your dream job. Hired

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

In Brief

Blink/Chrome Intent to Ship: WebGL 2.0 news
This will narrow the graphics feature gap between desktop and mobile devices.

What's New and What's Changed in Bootstrap 4 news
Telerik Developer Network

What's New in Chromium 54 and Opera 41 news
Custom Elements v1, Canvas imageSmoothingQuality, BroadcastChannel API, and CSS text-size-adjust
Mathias Bynens

async/await Support in Firefox news
Support for async/await has been added to the Firefox Nightly build. Demo here.

Project Quantum: A Quantum Leap for the Web news
Mozilla’s latest effort to develop a next-generation web engine.
David Bryant

Webmention: A W3C Proposed Recommendation news
Provides a mechanism for a page to notify another page when it mentions its URL.

10 Principles for Smooth Web Animations tutorial
Anand Sharma

Carousels Don't Have to be Complicated tutorial
Chris Coyier

A Deep-Dive Into The Service Worker Lifecycle tutorial
Jake Archibald

Vertical Alignment in CSS video
Guy Routledge explores vertical-align in this 5 min screencast with transcript.

Control Image Aspect Ratio Using CSS video
How to resize images and videos to fill their parent and maintain their aspect ratio with pure CSS.
Damon Bauer

Komodo IDE: The Best IDE for Web and Mobile Developers tools
Web & mobile devs get all their favorite frameworks, languages, and tools in one cross-platform, polyglot IDE
ActiveState  Sponsor

flv.js: An HTML5 FLV Player code

Shave: Truncate Text To Fit Within an HTML Element code
Dollar Shave Club

Recordy: Audio Recording for Browsers code
Record your microphone (or any other input) and add effects to it directly in the browser.
Maximilian Torggler

Sorting a 50K Array With and Without HTML5 Web Workers demo
Afshin Mehrabani

Building a responsive HTML5 app? Learn the must-know techniques with this whitepaper 
If you're a HTML5/JS dev, responsive web design is or will be a requirement in the near future. This whitepaper will give you the must-know on responsive web.
Progress  Sponsor