---
title: "This Week's HTML5 and Browser Technology News (Issue 191)"
publication: "Frontend Focus"
issue: 191
published_at: "2015-06-03"
canonical_url: "https://frontendfoc.us/issues/191"
---

This Week's HTML5 and Browser Technology News (Issue 191)

CSS color filtering, Web Audio School, new Firefox performance tools, and more. — [Read this e-mail on the Web](http://frontendfoc.us/issues/191)

Frontend FocusIssue 191 — June 3, 2015[Color Filters Can Turn Your Gray Skies Blue](https://css-tricks.com/color-filters-can-turn-your-gray-skies-blue/?utm_source=frontendfocus&utm_medium=email) An in-depth tutorial complete with several interactive examples on using CSS filters to change the appearance of images.  Amelia Bellamy-Royds 
[Web Audio School: Bite Sized Web Audio API Lessons](http://mmckegg.github.io/web-audio-school/?utm_source=frontendfocus&utm_medium=email) Quick bite size Web Audio lessons in a simple online environment. _(Learnt about this via [Web Audio Weekly](http://blog.chrislowis.co.uk/waw.html) - worth checking if you’re into Web Audio.)_ Matt McKegg 
[New Performance Tools in Firefox Developer Edition 40](https://hacks.mozilla.org/2015/06/new-performance-tools-in-firefox-developer-edition-40/?utm_source=frontendfocus&utm_medium=email) 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\](http://s3.amazonaws.com/nlga/uploads/item/image/38128/i.gif)](http://www.red-gate.com/products/dlm/dlm-dashboard/?utm_source=html5weekly=displayemail=dash_free=dlmdashboard=email-23720)[New DLM Dashboard – free tool](http://www.red-gate.com/products/dlm/dlm-dashboard/?utm_source=html5weekly=displayemail=dash_free=dlmdashboard=email-23720)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.](http://www.red-gate.com/products/dlm/dlm-dashboard/?utm_source=html5weekly=displayemail=dash_free=dlmdashboard=email-23720) Red Gate Software 
[The Making Of An Interactive Exhibition with CSS Clip Paths](http://www.smashingmagazine.com/2015/06/02/the-making-of-in-pieces/?utm_source=frontendfocus&utm_medium=email) 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 
[Power Surge: An HTML5 Game Optimization Challenge from Firefox](https://hacks.mozilla.org/2015/06/power-surge-optimize-the-javascript-in-this-html5-game-using-firefox-developer-edition/?utm_source=frontendfocus&utm_medium=email) 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 
[Why Ionic is Reigniting the Native vs HTML5 Debate](http://blog.teamtreehouse.com/ionic-reigniting-native-vs-html5-debate?utm_source=frontendfocus&utm_medium=email) Ionic is a series of performance-focused, beautifully designed HTML, CSS and JavaScript components optimized for building mobile applications.  Andrew Chalkley 


Jobs [![Supported by Hired.com\](http://s3.cooperpress.com.s3.amazonaws.com/hired1.png)](https://hired.com/join/?utm_source=petercooperpress&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-swe%29%28q2-17-frontend-focus%29&utm_content=newsletter)

- [Freelance with Companies like Airbnb, IDEO JPMorgan](http://www.toptal.com/developers?utm_source=html5_weekly&utm_medium=cpm-newsletter&utm_campaign=html5_weekly_job)Work 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)](https://www.jobscore.com/jobs2/guidebook/front-end-developer/bbpx1waiOr5yXaiGalkWKP?name=Corpsite+en+Jobs+page&ref=rss&sid=68)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 Hired.com.](https://hired.com/?utm_source=newsletters&utm_medium=petercooperpress&utm_term=cat-tech-frontend&utm_campaign=q2-17-frontend)

In Brief

[How to Deliver Great Sounding Content with Dolby Audio, Windows 10 + Edge](http://blog.dolby.com/2015/05/how-to-deliver-great-sounding-content-with-dolby-audio-windows-10-and-microsoft-edge/?utm_source=frontendfocus&utm_medium=email) news
Dolby

[Customizable Frontend Developer Course](https://www.thinkful.com/courses/frontend-development-career-path/?utm_source=html5weekly&utm_campaign=html5weekly_june3&utm_term=sponsoredlink) news course 
You decide what you want to learn. Customize your course to fit your goals learn with an experienced engineer.
ThinkfulSponsor

[Polymer 1.0 Released](http://googledevelopers.blogspot.co.uk/2015/05/polymer-10-released.html?utm_source=frontendfocus&utm_medium=email) 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](http://www.sitepoint.com/fancy-responsive-charts-with-chart-js/?utm_source=frontendfocus&utm_medium=email) tutorial 
Chart.js is an HTML5 Canvas-based charting library that supports six customizable chart types.
SitePoint

[Firing Responsive jQuery Functions based on CSS Media Queries Rather than Window Width](https://www.fourfront.us/blog/jquery-window-width-and-media-queries?utm_source=frontendfocus&utm_medium=email) 
Chris Arasin shows a simple way to use jQuery to trigger JavaScript based upon a specific width in CSS.
FourFront

[Animating SVG with GSAP](http://greensock.com/svg-tips?utm_source=frontendfocus&utm_medium=email) tutorial
GreenSock

[Improving Text Layout and Typography On The Web and in eBooks](http://w3c.github.io/typography/?utm_source=frontendfocus&utm_medium=email) 
W3C

[HTML5 Clipboard Support](http://www.whatcouldbewrong.com/articles/html5-clipboard-support/?utm_source=frontendfocus&utm_medium=email) 
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](http://wijmo.com/fluent-2015-focused-on-performance/?utm_source=HTML5%20Weekly&utm_medium=6.03%20sponsored%20link.%20Fluent%20recap%20focused%20on%20peformance%20blog&utm_campaign=Wijmo%20) 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.
WijmoSponsor

[Unleash 3D Rendering with WebGL and Microsoft Edge](http://www.sitepoint.com/video-unleash-3d-rendering-webgl-microsoft-edge/?utm_source=frontendfocus&utm_medium=email) video 
Avoid if poor audio drives you crazy.
David Cathue

[What Is The Web For?](http://bradfrost.com/blog/post/what-is-the-web-for/?utm_source=frontendfocus&utm_medium=email) opinion
Brad Frost

[Why We Should Stop Using Bower – And How to Do It](http://gofore.com/ohjelmistokehitys/stop-using-bower/?utm_source=frontendfocus&utm_medium=email) opinion
Jaakko Salonen

[Glyph: A Versatile SVG Icon Set](http://glyph.smarticons.co/?utm_source=frontendfocus&utm_medium=email) tools 
An alternative to icon fonts.
SmartIcons

[Just Canvas: A Just Dance + HTML5 Canvas Game](http://raphamorim.com/just-canvas/?utm_source=frontendfocus&utm_medium=email) demo 
Captures your attempts to gesture along to Pharrell’s ‘Happy’.

[106.js: A Roland Juno 106 Synthesizer Emulator](http://resistorsings.com/106/?utm_source=frontendfocus&utm_medium=email) demo

[10+ CSS Loading Animations](http://design.pakmax.net/2015/06/10-css-loading-animations-2015.html?utm_source=frontendfocus&utm_medium=email) code demo 
Shown with integrated CodePens.

[Hammer.JS: Add Touch Gestures to Your Pages](http://hammerjs.github.io/?utm_source=frontendfocus&utm_medium=email) code 
Has no dependencies and can recognize gestures made by touch, mouse and pointerEvents.
Eight Media

[j2html: A Java 8 HTML5 Builder](http://j2html.com/?utm_source=frontendfocus&utm_medium=email) code 
A library for creating HTML5 directly within Java.

[melody-jsnes: Multiplayer NES Through The Magic of WebSockets and Go](https://github.com/olahol/melody-jsnes?utm_source=frontendfocus&utm_medium=email) code 
If Go interests you, check out [our Go newsletter.](http://golangweekly.com/)
Ola Holmström

[Voice Memos: A Sample Voice Recorder Webapp from Google](https://github.com/GoogleChrome/voice-memos?utm_source=frontendfocus&utm_medium=email) code 
A sample web app that lets you record voice memos. It uses ES6 classes (via Babel) and RecorderJS.
Google

Curated by [Peter Cooper](http://twitter.com/peterc) and [Chris Brandrick](http://twitter.com/chrisbrandrick) and published by [Cooperpress](https://cooperpress.com/).

[Stop getting FrontEnd Focus](*|UNSUB|*) : [Change email address](*|UPDATE_PROFILE|*) : [Read this issue on the Web](http://frontendfoc.us/issues/191)

Cooper Press Ltd. Office 30, Lincoln Way, Louth, LN11 0LS, UK