Frontend Focus
Issue 180 — March 18, 2015
A good introduction to the ‘Fetch API’, an API that aims to fix many of the problems with XMLHttpRequest (the core Ajax technology). HTML5 Rocks also released an introduction to fetch() just the day after if you want a different take.
Mozilla Hacks

If you want to keep an eye on HTML 5.1, you can now do so in one place. The HTML 5.1 spec is now built with the W3C’s new automated publishing system.

The Application Cache enables your visitors to browse your site even when offline.

Angular lets you build dynamic, single-page web applications from scratch that are so smooth your users will forget they're still inside a web browser. Sign up online and start learning today!
Thinkful   Sponsor

As of Chrome version 42, the Push API and Notification API are available to developers. Matt Gaunt digs into how they work complete with code.
HTML5 Rocks

Leans on numerous APIs, like the Ambient Light API, Proximity API, Battery Status API, and Vibration API.

A look at how a developer approached recreating Nintendo’s The Legend of Zelda using JavaScript and HTML5, initially using just the DOM, but then later the Canvas.
Rich McLaughlin

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.

The W3C and Web Application Security Working Group invite implementation of 'Mixed Content', a specification that aims to improve web security by describing how a user agent should handle fetching of content loaded in a mixed security context.

Jobs Supported by

  • Freelance with Companies like Airbnb, IDEO JPMorganWork on special projects with great companies through Toptal. Set your weekly/hourly rate, and work from anywhere in the world as an elite HTML5 developer. See if you have what it takes. TopTal
  • Front End Engineer at Yelp!Join 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

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

In Brief

CSS Grid Layout Module Level 1 Draft Published news
Defines a two-dimensional grid-based layout system, optimized for UI design.

'Experimental support for CSS Filters starting to land in EdgeHTML' news
IE Dev Chat

Tumult Releases Hype 3 and Hype Professional with New HTML5 Physics, Responsive Design Tools news

Web MIDI API Working Draft Published 
A spec providing users with a bridge between a browser and MIDI-capable devices, like instruments and lights.

A Few Different Ways To Use SVG Sprites In Animation tutorial
Smashing Magazine

Get and Set HTML5 Video Current Time tutorial
David Walsh

Beyond Blue Links: Making Clickable Elements Recognizable opinion
Nielsen Norman Group

5 Great Uses for Sass Maps opinion

HTML5 Data Visualization Controls for Mobile Web Development tools
Deliver modern apps using the UI controls optimized for both size and speed inside of Wijmo 5.
Wijmo  Sponsor

Superpowers: An HTML5 2D+3D Game Maker tools
Not yet open source but they’re running a community fundraiser to make it so. The demo seems nice enough though.
Sparklin Labs

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

A Portfolio Site Made Entirely with HTML5 Canvas demo
Eric Lesch

Infinite String Quartet demo
A little odd, you drag circles onto a field and sounds begin..

A 3D Isometric Tile System in SVGs code demo

Textures.js: SVG Patterns for Data Visualization code

trim-html: Cutting HTML Strings without Breaking the HTML code
Node/JavaScript code.
Branko Sekulic

CopperLicht 1.9: Open Source JavaScript 3D Engine using WebGL code

type.js: Remedying CSS’s Typographic Oversights code
Adds new properties to your (embedded) CSS giving extra control over type in areas like kerning and widows.
Nathan Ford