Frontend Focus
Issue 253 — August 17, 2016
Harry Roberts looks at some traditional software engineering paradigms and how we can steal, bend, borrow, and reimplement them when writing our CSS.

A simple ‘bouncing ball’ demo written using vanilla JS, jQuery, Greensock, the Web Animations API, P5.js, and Velocity so you can compare their different APIs.

Microsoft and An Event Apart have teamed up for a contest where your challenge is to create a compelling Web experience in just 10KB. You have until September 30th.
10k Apart

Instantly pinpoint performance issues. See how your app spends its time, and who wrote the slow code.
Opbeat   Sponsor

A well-produced, illustration slidedeck packed with thoughts on designing Web experiences for “weird browsers”, such as those found on game consoles, fridges, smartwatches, and TVs.
Niels Leenheer

The WebVR API is a set of DOM interfaces that enable WebGL rendering into Virtual Reality headsets and access to the various sensors for orientation, positioning, and input controls.
Mozilla VR Blog

A lot of useful links from Addy, plus some advice: “For URL addressable resources, use the Cache API. For all other data, use IndexedDB.”
Addy Osmani

Five hands-on, bite-size videos that demonstrate various aspects of Web accessibility, including accessible forms, buttons, and semantic structure.
Marcy Sutton

Jobs Supported by

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

In Brief

The Average Web Page (Data from Analyzing 8 Million Websites) news
Catalin Rosu digs through a ton of data about the HTML content of web sites.
CSS Tricks

What's New in Web Audio? news
An updated look at the still-in-development Web Audio API and how it’s currently implemented in Firefox.
Mozilla Hacks

A Refined Content Security Policy news
The latest WebKit builds and Safari Technology Preview now support all of the features of the Content Security Policy Level 2 standard.

API Deprecations and Removals in Chrome 53 news
A round-up of the deprecations and removals in version 53 of Chrome.
Joseph Medley

Smooth as Butter: Achieving 60 FPS Animations with CSS3 tutorial
Tips for getting the most out of your Web animations performance-wise.
José Rosário

Zooming CSS Background Images tutorial
Dylan Winn-Brown

Building a responsive HTML5 app? Learn the must-know techniques with this whitepaper rawurl tutorial
If you're a HTML5/JS dev, responsive web design is or will be a requirement in the near future. This whitepaper will give you the must-know on responsive web.
Progress  Sponsor

S(GH)PA: The Single-Page App Hack For GitHub Pages tutorial
Smashing Magazine

Refactoring CSS Without Losing Your Mind slidedeck
How to decide what CSS to refactor and when, and how to avoid regressions when adding new CSS.
Harry Roberts

A 30 Minute Introduction to Service Workers video
Phil Nash

Go Offline with Service Workers video
Emanuel Kluge

When to Use the Web Animations API opinion
Some thoughts on when using JS (Web Animations API) might make more sense than CSS.
Daniel Wilson

Thoughts about a WebGL-Next opinion
What a WebGL2 successor could look like and why it can’t be ‘WebVulkan’.
Andre Weissflog

How to Prepare for A Front-End Developer Interview? opinion
A lot of responses and opinions.
Hacker News

Komodo IDE: The Best IDE for Web and Mobile Developers tools
Web & mobile devs get all their favorite frameworks, languages, and tools in one cross-platform, polyglot IDE.
ActiveState  Sponsor

Really Simple Responsive HTML Email Template code
Lee Munroe

Waud: A Web Audio API Library with HTML5 Audio Fallback code
Adi Reddy Mora

Phonograph.js: Tolerable Mobile Web Audio code
Rich Harris

Baffle: A Tiny Library for Obfuscating and Revealing Text in DOM Elements code
Cam Wiegert

DropZone.jsx: HTML5 Drag and Drop React Component code

GPU Deep Learning Demo: Recognizing Handwritten Numbers with WebGL demo
Eric Arnebäck

Adult Swim's Web Experiments on CodePen demo
U.S Cable network Adult Swim has joined CodePen with numerous weird Web experiments.