Frontend Focus
Issue 181 — March 25, 2015
“As if HTML5 isn’t new enough to many web developers, people thinking ahead to HTML6 are including native support for APIs [..] to the in-browser experience.”
Paul Bruce

Want to lay down some sick techno beats? Noodling around with this quick and clean example of the Web Audio API is more fun than it sounds.
HTML5 Drum Machine

Must-see slides from Google’s Addy Osmani showing off the latest in the DevTools world like paint profiling and animation inspection.
Addy Osmani

Transactional HTML emails often get neglected but they're important for growing and maintaining a healthy user base. To help you, we have open-sourced a collection of common templates for transactional email to download for free. Tables, inline CSS, unsupported CSS, desktop clients, web clients, mobile clients, various devices, various providers - all thought about and tested. Download now.
Mailgun   Sponsor

A gentle step-by-step guide through the abstract and complex universe of Fragment Shaders, as used in WebGL. Complete with editable, live examples too.
Patricio Gonzalez Vivo

Get the latest on what’s happening with WebGL in the game development world with this 90 minute WebGL meetup at the recent Game Developers Conference chaired by Tony Parisi and including talks from folks from Google, Mozilla and more.

A look at the ‘event cascade’ (which is quite a lengthy stream of events in some browsers) and its relevance in handling user input from mice, taps, etc.
Smashing Magazine

"[..] the software maker has now confirmed that it will use a new name for its upcoming browser successor, codenamed Project Spartan."
The Verge

Jobs Supported by

  • Front End Engineer at YelpJoin Yelp's Front-end team and help build a modern, styleguide-driven UX for our 138 million users. We’re looking for people who love good code and working closely with design, product, and other engineers to make great features. Yelp
  • Experienced web developers are in-demand.Apply once get 5+ job offers in 1 week on Hired. Join today!

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

In Brief

Edge Conference: The Cutting Edge Web Tech Event (June 27; London, UK) news

UI Events W3C Working Draft Published news
Defines UI Events that extend the DOM Event objects defined in DOM4. Formerly known as DOM Level 3 Events.

PandaDoc Seeks to Replace PDFs with New API news
An attempt to replace PDFs with HTML5-based ‘document delivery technology.’

New e-book: React+d3.js: How to Build Data Visualizations with React & D3.js 
Ebook, screencast, and more. First 100 buyers get 20% off.
Swizec Teller  Sponsor

Understanding The CSS Box Model for Inline Elements tutorial
How is the box model applied to inline boxes? And how can a new Firefox feature help you visualize the box model for inline elements?
Mozilla Hacks

SVG Animations using CSS and Snap.svg tutorial
Michael Tempest

Media Queries: Width vs. Device Width tutorial
If you’ve ever been confused of the difference between ‘width’ and ‘device-width’ in CSS media queries, Ryan Reese helps clear it up here.

Animation Principles for the Web tutorial
Reflections on the 12 Principles of Animation as published in “The Illusion of Life: Disney Animation” in 1981.
CSS Animation Rocks

Using the Firefox DevTools to Debug fetch() on GitHub tutorial
Mozilla Hacks

Using Forms in Email: Method or Madness? 
An interesting look at what happens if you try and use forms in HTML emails in various clients.

What Are the Security Risks of HTML5 Apps? opinion

When Private Browsing Isn't Private On iOS: HTML5 and AirPlay opinion
On iOS, ‘everything stored in HTML5 storage in Incognito Mode can be accessed in normal mode.’
Mattias Geniar

WiMi5: A Cloud Gaming Platform for Creating and Monetizing HTML5 games tools

Loaders.css: Performance-Focused Pure CSS Loading Animations code
Connor Atherton

Boy: HTML5Boilerplate But with Older Browsers in Mind code
A lightweight, up-to-date version of HTML5 Boilerplate with conditionally loaded polyfills and a nice general reset for amazing CSS3 support back to IE6.
Cory Simmons

nude.js: Nudity detection with JavaScript and HTML5 Canvas code
Patrick Wied

Purple: A UI Kit for Heroku's Web Interfaces code