---
title: "This Week's HTML5 and Browser Technology News (Issue 253)"
publication: "Frontend Focus"
issue: 253
published_at: "2016-08-17"
canonical_url: "https://frontendfoc.us/issues/253"
---
This Week's HTML5 and Browser Technology News (Issue 253)
[Read this e-mail on the Web](http://frontendfoc.us/issues/253)
Frontend FocusIssue 253 — August 17, 2016[CSS for Software Engineers for CSS Developers [video\]](https://vimeo.com/177216958?utm_source=frontendfocus&utm_medium=email)Harry Roberts looks at some traditional software engineering paradigms and how we can steal, bend, borrow, and reimplement them when writing our CSS. CSS Day
[Bouncy Ball: A Way to Compare 6 Web Animation Techniques](http://sparkbox.github.io/bouncy-ball/?utm_source=frontendfocus&utm_medium=email)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. Sparkbox
[10k Apart: A Contest to Build a Web Experience in Just 10KB](https://a-k-apart.com/?utm_source=frontendfocus&utm_medium=email)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
[](https://opbeat.com/?utm_source=frontendfocus&utm_medium=newsletter)[Opbeat for AngularJS](https://opbeat.com/?utm_source=frontendfocus&utm_medium=newsletter)Instantly pinpoint performance issues. See how your app spends its time, and who wrote the slow code. OpbeatSponsor
[Designing for 'Weird Browsers'](https://speakerdeck.com/nielsleenheer/weird-browsers-at-webworker-nrw?utm_source=frontendfocus&utm_medium=email)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
[WebVR 1.0 Available in Firefox Nightly](https://blog.mozvr.com/webvr-1-0-available-in-firefox-nightly/?utm_source=frontendfocus&utm_medium=email)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
[Offline Storage for Progressive Web Apps](https://medium.com/@addyosmani/offline-storage-for-progressive-web-apps-70d52695513c?utm_source=frontendfocus&utm_medium=email)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
[Building Accessible Web Applications (in 5 Short Videos)](https://egghead.io/courses/start-building-accessible-web-applications-today?utm_source=frontendfocus&utm_medium=email)Five hands-on, bite-size videos that demonstrate various aspects of Web accessibility, including accessible forms, buttons, and semantic structure. Marcy Sutton
Jobs [](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)
- [Senior Web Developer at Slate Magazine](http://frontenddeveloperjob.com/job/5792d5947260280003f34c39?utm_source=frontendfocus&utm_medium=email)Slate is hiring a senior web developer to help build the next iteration of slate.com in Washington, D.C. Slate
- [Find Your Perfect Company Match](https://hired.com/?utm_source=newsletters&utm_medium=petercooperpress&utm_campaign=q3-16-frontendfocus)You're smart, you're efficient. Why job hunt the old way? Try Hired and get your profile in front of thousands of top tech companies. Hired.com
- [Find Out How to List Your FrontEnd Jobs Here](http://booking.cooperpress.com/jobs?utm_source=frontendfocus&utm_medium=email)We're giving 20% off for FrontEnd Focus listings in August and September. Cooper Press
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
[The Average Web Page (Data from Analyzing 8 Million Websites)](https://css-tricks.com/average-web-page-data-analyzing-8-million-websites/?utm_source=frontendfocus&utm_medium=email) news
Catalin Rosu digs through a ton of data about the HTML content of web sites.
CSS Tricks
[What's New in Web Audio?](https://hacks.mozilla.org/2016/08/whats-new-in-web-audio-2/?utm_source=frontendfocus&utm_medium=email) 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](https://webkit.org/blog/6830/a-refined-content-security-policy/?utm_source=frontendfocus&utm_medium=email) news
The latest WebKit builds and Safari Technology Preview now support all of the features of the Content Security Policy Level 2 standard.
WebKit
[API Deprecations and Removals in Chrome 53](https://developers.google.com/web/updates/2016/08/chrome-53-deprecations?utm_source=frontendfocus&utm_medium=email) 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](https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108?utm_source=frontendfocus&utm_medium=email) tutorial
Tips for getting the most out of your Web animations performance-wise.
José Rosário
[Zooming CSS Background Images](https://css-tricks.com/zooming-background-images/?utm_source=frontendfocus&utm_medium=email) tutorial
Dylan Winn-Brown
[Building a responsive HTML5 app? Learn the must-know techniques with this whitepaper](http://www.telerik.com/campaigns/kendo-ui/responsive-must-know-techniques?utm_medium=newsletter&utm_source=HTMLWeekly&utm_campaign=dt-kendo-responsive-wp-oct15) 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.
ProgressSponsor
[S(GH)PA: The Single-Page App Hack For GitHub Pages](https://www.smashingmagazine.com/2016/08/sghpa-single-page-app-hack-github-pages/?utm_source=frontendfocus&utm_medium=email) tutorial
Smashing Magazine
[Refactoring CSS Without Losing Your Mind](https://speakerdeck.com/csswizardry/refactoring-css-without-losing-your-mind?utm_source=frontendfocus&utm_medium=email) 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](https://www.youtube.com/watch?v=EnaKD_EHG14) video
Phil Nash
[Go Offline with Service Workers](https://www.youtube.com/watch?v=ou6oPEEyjNQ&list=PL37ZVnwpeshGgaWeK9oFRPIjrLSo8mm6b&index=4) video
Emanuel Kluge
[When to Use the Web Animations API](https://danielcwilson.com/blog/2016/08/why-waapi/?utm_source=frontendfocus&utm_medium=email) opinion
Some thoughts on when using JS (Web Animations API) might make more sense than CSS.
Daniel Wilson
[Thoughts about a WebGL-Next](http://floooh.github.io/2016/08/13/webgl-next.html?utm_source=frontendfocus&utm_medium=email) 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?](https://news.ycombinator.com/item?id=12286547) opinion
A lot of responses and opinions.
Hacker News
[Komodo IDE: The Best IDE for Web and Mobile Developers](http://komodoide.com/web-ide/?utm_source=frontendfocus&utm_medium=link&utm_term=&utm_content=text&utm_campaign=komodo-x-q3) tools
Web & mobile devs get all their favorite frameworks, languages, and tools in one cross-platform, polyglot IDE.
ActiveStateSponsor
[Really Simple Responsive HTML Email Template](https://github.com/leemunroe/responsive-html-email-template?utm_source=frontendfocus&utm_medium=email) code
Lee Munroe
[Waud: A Web Audio API Library with HTML5 Audio Fallback](http://www.waudjs.com/?utm_source=frontendfocus&utm_medium=email) code
Adi Reddy Mora
[Phonograph.js: Tolerable Mobile Web Audio](https://medium.com/@Rich_Harris/phonograph-js-tolerable-mobile-web-audio-55286bd5e567?utm_source=frontendfocus&utm_medium=email) code
Rich Harris
[Baffle: A Tiny Library for Obfuscating and Revealing Text in DOM Elements](https://camwiegert.github.io/baffle/?utm_source=frontendfocus&utm_medium=email) code
Cam Wiegert
[DropZone.jsx: HTML5 Drag and Drop React Component](https://gist.github.com/realseanp/cefe1727533619f340bb2aee5e1339af?cache=off) code
[GPU Deep Learning Demo: Recognizing Handwritten Numbers with WebGL](https://erkaman.github.io/regl-cnn/src/demo?utm_source=frontendfocus&utm_medium=email) demo
Eric Arnebäck
[Adult Swim's Web Experiments on CodePen](http://codepen.io/adultswim/?utm_source=frontendfocus&utm_medium=email) demo
U.S Cable network Adult Swim has joined CodePen with numerous weird Web experiments.
CodePen
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/253)
Cooper Press Ltd. Office 30, Lincoln Way, Louth, LN11 0LS, UK