Frontend Focus
Issue 194 — June 24, 2015
“Photoshop Design Space” is a new interface for Photoshop aimed at app and Web developers. It’s open source, built with HTML5, and can be enabled as a Technology Preview in the latest Photoshop CC release.

A fun 20 minute talk that digs into the background to audio synthesis generally, backed up by numerous Web Audio API examples along the way.
Chris Lowis

A look at clarifying the relationship between CSS and HTML and the role of CSS in working alongside other components of the Web development picture. It doesn’t exist yet but it’s bold thinking.
Glen Maddern

AppBuilder combines the tools you need to build, test deploy mobile apps to iOS, Android and Windows Phone.
Telerik   Sponsor

Wavesurfer makes it easy to show a visual representation of audio in any browser that supports the Web Audio API (a bit like how SoundCloud does).

Axel Rauschmayer explains WebAssembly, a new low level binary format for Web scripting, in an efficient, easy to understand way. This is big news for the Web, especially as Google, Microsoft, and Mozilla are working together on it.
Dr. Axel Rauschmayer

Unity is one of the world’s most popular game programming environments, and the Unity team aim to support WebAssembly from the off after initial experiments have shown promise.

Detects which CSS selectors your app is using and creates a file without the unused CSS. Also able to also detect dynamically loaded CSS selectors and can work with single-page apps.
Kenny Tran

The ‘filmstrip’, a feature you can enable in Chrome Canary, shows a series of images of how a page rendered at specific points in the page load process.
Damon Bauer

A look at the changes affecting interoperability of web sites against Microsoft’s new browser.
Microsoft Edge Team

An incredible write up, complete with code and graphics, of what went into using modern Web technologies to create a guitar tuner.
Paul Lewis

Jobs Supported by

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

In Brief

From ASM.JS to WebAssembly news
Brendan Eich

Opera for Android Gets Installable Web Apps and 'Add to Home Screen' 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

Service Workers Will Not Ship in Firefox 41 news
“While Service Workers are largely feature complete [..] implementing this feature has introduced a number of security risks. We need to perform a fresh security audit before the code can ship.”
Ben Kelly

Intent to Implement Streams in Firefox news
The Streams specs provide APIs for creating, composing and consuming streams of data.
Ben Kelly

New: 'aria-roledescription' Property news
Defines a human-readable, author-localized description for the role of an element.
Steve Faulkner

Building Shaders With Babylon.js and WebGL: Theory and Examples tutorial
There’s a lot packed into this tutorial.

A Fast, Accurate Way to Test IE from iOS, Mac OS X, and Android tutorial tools
RemoteIE is a Microsoft project that provides a virtualized version of the latest version of IE.

Responsive Web Typography with Sass Maps tutorial
Smashing Magazine

UI Animation Reviews: A Look at Animation In Responsive Design video
A quick five minute review of several uses of animation in responsive design situations.
Val Head

Secrets and Ideas for Focusing on Performance in HTML5 video
Looking to boost performance in your web and mobile apps? This blog combines the top talks from Fluent on the subject and a datagrid performance benchmark sample from Wijmo.
Wijmo  Sponsor

An Introduction to Browser Rendering video
A quick 7 minute walk through some of the underlying processes of rendering a Web page within a browser.
Umar Hansa

If Apple are throttling back on web platform work in Safari... opinion
.. I wish they’d allow other browsers on iOS so someone else can have a go.
Jake Archibald

Be Mobile Friendly with The New W3C Mobile Checker tools

DeckTape: A PDF Exporter for HTML5 Presentation Frameworks tools
Built on top of PhantomJS and supports reveal.js and DZSlides out of the box but is extendable.
Antonin Stefanutti

Material Theme: A Google Material Design-esque Sublime Text 3 Theme tools
Mattia Astorino

Froala: A Design Framework Based on HTML5 and CSS3 'Design Blocks' code

inert-polyfill: Polyfill for The HTML 'inert' Attribute code
The ‘inert’ attribute makes the browser consider an element absent for the purposes of targeting user interaction events and more.