Frontend Focus
Issue 220 — December 30, 2015
Firefox’s developer tools often get overshadowed by Chrome’s, but they’ve come on a long way and are now rather impressive. Patrick Brosset looks at their history and what’s available now.
Smashing Magazine

Louis Lazaris covers a variety of interesting tools from a script that converts Illustrator documents into HTML and CSS to a JavaScript linter.

A look at an approach for ‘instant’ Web applications that are restored from a Service Worker-based cache.
Dr. Gleb Bahmutov

With imgix, integrating responsive images into your site could not be easier. imgix is fully-compatible with the srcset attribute, the picture element, and Client Hints. Learn how to start delivering responsive images in less than 30 minutes.
imgix   Sponsor

Chrome 48 includes a new Security panel to help you work with issues relating to certificates and mixed content.

A short, well presented video from Chris DeLeon where he creates a simple Canvas-based Pong game from scratch.

“The Web made a comeback in 2015 … reinforcing the idea that the Web was never in any actual danger.”

Typekit is now leaning on modern browsers’ native font loading and manipulation abilities via the CSS Font Loading API.

Jobs Supported by

  • Principal Web Developer. Bristol, UKJoin MixRadio if you are an expert web developer with superior front-end skills. Help us improve our speed of execution and architecture. Use ReactJS and ES2015 on cross-disciplined teams to deliver the next best music streaming service. MixRadio
  • Stop Spending Time Applying For JobsFinding a job IS a full time job. Shouldn't companies come to you with offers upfront? We think so. Join the revolution and sign up for Hired today.

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

In Brief

Facebook Turns Away From Flash for Video news
Now uses HTML5 based video instead.
BBC News

Half off all MEAPs, eBooks, and pBooks at Manning news
It's just today, and you need to use the code dotd122915tw
Manning Publications  Sponsor

Looking for Certified HTML5 Developers? The Search Is Over news
W3C has partnered with edX to certify developers via a course.

Firefox Developer Edition 45: Animations, Memory Tools and More news
What’s new in Firefox DE 45’s developer tools?
Mozilla Hacks

HTML 5 Canvas Cheat Sheet tutorial
Robert Mening

Click SVG Element to Focus (and Style) tutorial
CSS Tricks

Generating SVG With React tutorial
Smashing Magazine

Using Chrome Traces to Automate Rendering Performance tutorial
Parashuram N

`flex-grow` Is Weird. Or Is It? tutorial
Manuel Matuzovic

Understanding the CSS Modules Methodology tutorial

Should I Use A Video As A (Web Page) Background? opinion
CSS Tricks

QICI Engine: A Web-Based Tool for Creating HTML5 Games tools
QuingCi Digital

videospeed: HTML5 Video Speed Controller (for Google Chrome) tools code
HTML5 provides a native API to change playback speed of video, but not all players expose it.
Ilya Grigorik

Timbre.js: JavaScript Library for Objective Sound Programming code

RoboJS: Dynamically Load JS Depending On DOM Structure code
Marco Gobbi

HTML-909: A Roland TR-909 Drum Machine in HTML5 demo
This is great fun to play with.
Teemu Kallio

Improve your UI/UX skills in 2016. Claim your spot in our Jan. 8 course course
Learn UI UX design through part-time, online courses with 1-on-1 mentorship from expert designers
Designlab  Sponsor