Frontend Focus
Issue 192 — June 10, 2015
Web Components were first introduced to the world at Google IO 2012 but are still considered on the cutting edge. Wilson Page of Mozilla looks at what Web Components are, why they’re useful, and why they’re still not everywhere.
Mozilla Hacks

“The W3C HTML Work­ing Group char­ter is ex­pir­ing; dis­cus­sion on what to do is in­con­clu­sive; things are pret­ty qui­et in the WhatWG. Con­clu­sion: The best thing to do about HTML is noth­ing.”
Tim Bray

A now complete four part series digging deep into creating a Media Source Extensions-based player which can buffer video and also switch between different renditions on demand.

Frontend Masters
Build a clean, well-structured web app from scratch by combining best-of breed approaches and a carefully curated set of tools including: Ampersand, React, WebPack, ES6 and Node.js.
Frontend Masters   Sponsor

Why did Microsoft choose the name Edge over Spartan for its new browser? Burke Holland explains that it's all about the blue E.
Telerik Developer Network

Enabled in the latest Chrome, the Web MIDI API is here to play with. Here’s a quick look at how to do that from JavaScript.
Keith McMillen Instruments

Links to all of 120 APIs and specs under development as part of the ‘HTML5’ moniker.
Erik Wilde

Two members of Mozilla’s MozVR research team look at how VR can become ‘native’ on the Web.
Road to VR

Jobs Supported by

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

In Brief

'Beginning HTML5 Media' Book Available on Preorder news

Want to share your developer expertise with a global audience? Apply today. news
Actively seeking web developers to join our tight knit family of teachers and earn royalties.
Pluralsight  Sponsor

Mozilla's CTO, Andreas Gal, is Leaving news
Andreas Gal

Opera 30 Released news

HTML5's 'details' Element tutorial
Anything in ‘details’ is rendered behind a drop-down toggle with text supplied by an optional ‘summary’ element.
Max Stoiber

Importing CSS Breakpoints Into JavaScript tutorial

Things I've Learned About Building and Coding HTML Email Templates tutorial
A lot of useful tips, tricks, and workarounds.
Lee Munroe

Review of Current HTML5 Bugs as of June 2015 
A rough review from one engineer on the Microsoft Edge team.
Adrian Bateman

Ask HN: What Tools Do You Use to Build HTML Emails? opinion
Hacker News

BackstopJS: Catch CSS Curve Balls tools
BackstopJS is a config-driven automated screenshot test component. Labs

12 Tools for Creating Animations with HTML5 tools

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

Flash2Svg v3.13: An Animated SVG Exporter for Flash Pro  tools
Warning: autoplays an example animation with sound.
Thomas Byrne

J2C: JavaScript to CSS Compiler tools code
A CSS preprocessor based around JavaScript objects; provides a subset of Sass.
Pierre-Yves Gérardy

Pa11y 2.0 Released: Automated Accessibility Testing with PhantomJS tools
Nature Publishing Group

Destroy With Science - Quantum Loop video demo
A video of someone using two Novation Launchpads with Loop Drop, a Web MIDI and We Audio based MIDI looper and synth.
Matt McKegg

lightgl.js: A Lightweight WebGL Library code
Designed for quick prototyping of WebGL apps, while being lower level than most other WebGL libraries.
Evan Wallace