Frontend Focus
Issue 183 — April 8, 2015
WebRTC provides a powerful suite of realtime technologies to the browser but the terminology and complexity can make it intimidating. Potch from Mozilla explains the key concepts clearly and shares a library that makes it easier.
Mozilla Hacks

A great attempt at teaching WebGL from scratch without drowning in OpenGL complexity. Also covers some of the 2D and 3D math required too.

A bridge enabling tools to debug IE11 with Chrome’s remote debugging protocol.

Red Gate Software
Boost the performance of your .NET application with ANTS Performance Profiler. Get rich performance data on your code and database queries to find your application's bottleneck fast. Try ANTS Performance Profiler on your app now.
Red Gate Software   Sponsor

A practical look at an approach for defining the look and feel of a Web application in such a way that it can automatically be tested against.
Smashing Magazine

A look at how to write clean, concise HTML with the goal of having it load more quickly across a variety of devices.
Sam Dutton

A spec that defines 2 mechanisms for communicating between browsing contexts in HTML documents: cross-document messages and ‘message channels’

Rey Bango shows how to use RemoteIE to test sites in IE from multiple platforms.

Jobs Supported by

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

In Brief

Blink/Chromium Intent to Implement: Pointer Events 
After deciding to not ship Pointer Events in blink (as used in Chrome) last year, the team have reversed course.

Service Workers Now in Firefox Nightly news
Server Workers are still in testing but now available behind preferences in Nightly instead of a separate build.
Ben Kelly (Mozilla)

Signal: A New Conference To Unlock Communication Experiences news
Learn about the future of the web and real-time communications from developers such as Philipp Hancke from &yet and Guillermo Rauch of at Signal on May 19-20 in San Francisco.
Twilio  Sponsor

WebRTC Market Expanding and Maturing, But in Unexpected Ways news
Dean Bubley's Disruptive Wireless

Upgrade Insecure Requests: An Editor's Draft news
Defines a mechanism which allows authors to instruct a user agent to upgrade insecure resource requests to a secure transport before fetching them.

Simplified Concepts in Web Animations Naming news
HTML5 Rocks

Mobile Game Development with The Device Orientation and Vibration APIs tutorial
Mozilla Hacks

How to Create a 12 Column Grid System with Sass tutorial
Seb Kay

Learn React or Node.js in a 1-day online Crash Course course
Pair with an engineer and skip the slow process of learning on your own. Sign up and start learning!
Thinkful  Sponsor

Motion Blur Effect with SVG tutorial

Animating CSS-Only Hamburger Menu Icons tutorial
Nick Salloum

Move And Scale SVG Graphics with the viewBox Attribute tutorial
Steven Bradley

Towards a Taxonomy of Errors in HTML and CSS [PDF] 
An academic paper on an investigation into the errors people make while writing HTML and CSS.
Park, Saxena, et al.

What Nobody Tells You About "will-change" opinion
CSS Mojo

Pure CSS3 Calculator demo
A rather crazy hack, complete with an explanation of how it works.
Niklas von Hertzen

HTMLHint: Static Code Analysis for HTML tools
Yanis Wang

Beta of C#/XAML for HTML5: Create Cross-Platform HTML5 with C# and XAML tools

Babylon.js: A Framework for Building 3D Games with HTML 5 and WebGL code
Fully documented, has a forum, has an online sandbox, a shader creation tool, a physics engine, particle systems, and basically everything you need to create Web-based 3D games with JavaScript.

ShaderEditorExtension: Chrome DevTools Extension to Live-Edit WebGL Shaders code
Jaume Sanchez