Frontend Focus
Issue 191 — June 3, 2015
An in-depth tutorial complete with several interactive examples on using CSS filters to change the appearance of images.
Amelia Bellamy-Royds

Quick bite size Web Audio lessons in a simple online environment. (Learnt about this via Web Audio Weekly - worth checking if you’re into Web Audio.)
Matt McKegg

The latest Firefox (Developer Edition) now includes full performance measurement tools and timeline views, at a similar level to what’s in Chrome.
Mozilla Hacks

Red Gate Software
When your databases drift from their expected state, there’s a risk of deployment problems. New DLM Dashboard tracks schema changes, shows you what changed, who did it, and when. Free tool.
Red Gate Software

An interesting dive into the production techniques behind an interactive exhibition about the world’s 30 most endangered species that leans heavily on CSS’ ‘clip-path’ property.
Smashing Magazine

To show off the new performance tools in Firefox Developer Edition, Mozilla has partnered with an HTML5 game developer to launch an optimization challenge you can take part in.
Mozilla Hacks

Ionic is a series of performance-focused, beautifully designed HTML, CSS and JavaScript components optimized for building mobile applications.
Andrew Chalkley

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 Developer at Guidebook (Palo Alto or SOMA)Guidebook helps people build and publish mobile apps for all types of devices. Our CMS is a huge part of that and you will play a key part in building our new CMS by collaborating with our design and back-end development teams to implement mockups and integrate with our back-end stack. Guidebook

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

In Brief

How to Deliver Great Sounding Content with Dolby Audio, Windows 10 + Edge news

Customizable Frontend Developer Course news course
You decide what you want to learn. Customize your course to fit your goals learn with an experienced engineer.
Thinkful  Sponsor

Polymer 1.0 Released featured
Google’s library that sits on top of Web Components and makes it easy to create interoperable custom elements has reached its 1.0 milestone.
Google Developers Blog

Fancy, Responsive Charts with Chart.js tutorial
Chart.js is an HTML5 Canvas-based charting library that supports six customizable chart types.

Firing Responsive jQuery Functions based on CSS Media Queries Rather than Window Width 
Chris Arasin shows a simple way to use jQuery to trigger JavaScript based upon a specific width in CSS.

Animating SVG with GSAP tutorial

Improving Text Layout and Typography On The Web and in eBooks 

HTML5 Clipboard Support 
Some notes on the current work in implementing the Clipboard API spec in browsers.
What Could Be Wrong?

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

Unleash 3D Rendering with WebGL and Microsoft Edge video
Avoid if poor audio drives you crazy.
David Cathue

What Is The Web For? opinion
Brad Frost

Why We Should Stop Using Bower – And How to Do It opinion
Jaakko Salonen

Glyph: A Versatile SVG Icon Set tools
An alternative to icon fonts.

Just Canvas: A Just Dance + HTML5 Canvas Game demo
Captures your attempts to gesture along to Pharrell’s ‘Happy’.

106.js: A Roland Juno 106 Synthesizer Emulator  demo

10+ CSS Loading Animations code demo
Shown with integrated CodePens.

Hammer.JS: Add Touch Gestures to Your Pages code
Has no dependencies and can recognize gestures made by touch, mouse and pointerEvents.
Eight Media

j2html: A Java 8 HTML5 Builder code
A library for creating HTML5 directly within Java.

melody-jsnes: Multiplayer NES Through The Magic of WebSockets and Go code
If Go interests you, check out our Go newsletter.
Ola Holmström

Voice Memos: A Sample Voice Recorder Webapp from Google code
A sample web app that lets you record voice memos. It uses ES6 classes (via Babel) and RecorderJS.