---
title: "This Week's HTML5 and Browser Technology News (Issue 256)"
publication: "Frontend Focus"
issue: 256
published_at: "2016-09-07"
canonical_url: "https://frontendfoc.us/issues/256"
---
This Week's HTML5 and Browser Technology News (Issue 256)
[Read this e-mail on the Web](http://frontendfoc.us/issues/256)
Frontend FocusIssue 256 — September 7, 2016[Chrome Intervening Against Costly 'document.write()'s](https://developers.google.com/web/updates/2016/08/removing-document-write?utm_source=frontendfocus&utm_medium=email)Under certain circumstances, Chrome is blocking some external scripts that are using document.write() to improve performance. Paul Kinlan
[Using the Web Animation API (now supported in Firefox)](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API?utm_source=frontendfocus&utm_medium=email)A look at using the basics of the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API), now available by default in Firefox 48+ (also supported in Chrome 36+). Mozilla
[The Math of CSS Locks](http://fvsch.com/code/css-locks/?utm_source=frontendfocus&utm_medium=email)A detailed walkthrough of a modern front-end design technique for transitioning smoothly between two values, depending on the current viewport size, rather than jumping from one value to another. Florens Verschelde
[](http://wijmo.com/blog/sticky-headers-case-study-customer-driven-development/?utm_source=frontendfocus&utm_medium=sept.7.primarynewsletter.%20stickyheaders&utm_content=stickyheadersblog&utm_campaign=wijmo%20)[Sticky Headers: A Case Study in Customer-Driven Development](http://wijmo.com/blog/sticky-headers-case-study-customer-driven-development/?utm_source=frontendfocus&utm_medium=sept.7.primarynewsletter.%20stickyheaders&utm_content=stickyheadersblog&utm_campaign=wijmo%20)The aha moment, when you can scroll a page and still see a data grid’s column headers as the page scrolls off the screen. Seeing the user benefit and customer request, learn how the team at Wijmo implemented this new feature in FlexGrid. [View sample.](http://wijmo.com/blog/sticky-headers-case-study-customer-driven-development/?utm_source=frontendfocus&utm_medium=sept.7.primarynewsletter.%20stickyheaders&utm_content=stickyheadersblog&utm_campaign=wijmo%20) WijmoSponsor
[An Introduction to Chart.js 2.0 in 6 Examples](https://www.sitepoint.com/introduction-chart-js-2-0-six-examples/?utm_source=frontendfocus&utm_medium=email)Jack Rometty takes you on a tour of Chart.js 2.0 and its various chart types. Plenty of easy-to-follow examples to drop in to your next project. SitePoint
[Is HTTP Public Key Pinning 'Dead'?](https://blog.qualys.com/ssllabs/2016/09/06/is-http-public-key-pinning-dead?utm_source=frontendfocus&utm_medium=email)_“I fear that HTTP Public Key Pinning — a standard that was intended to bring public key pinning to the masses—might be dead.”_ Ivan Ristic
[Analyze a Site's Security with Mozilla's 'HTTP Observatory'](https://observatory.mozilla.org/?utm_source=frontendfocus&utm_medium=email)A set of tools to analyze your website and inform you if you’re using some of the many available methods to secure it. [Code here.](https://github.com/mozilla/http-observatory) Mozilla
[A 48 Point Web Developer Checklist](http://webdevchecklist.com/?utm_source=frontendfocus&utm_medium=email)Lots of things to consider before launching your latest site. WebDevCheckList
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)
- [Front End Developer - Leipzig, Germany](http://company.trivago.com/jobs/895/?utm_campaign=Front%20End%20Developer%20%u2013%20Leipzig%20895%20repost%202&utm_source=Frontend%20Focus&utm_medium=newsletter&utm_term=engineering&utm_content=global)trivago is on the lookout for a Frontend Developer to join our IT team. If you are fluent in CSS3, HTML5 and JavaScript then we want to hear from you! Trivago
- [Get 5+ Engineering Job Offers in 1 Week](https://hired.com/?utm_source=newsletters&utm_medium=petercooperpress&utm_campaign=q3-16-frontendfocus)With Hired, companies apply to hire you - get salary and equity offers before you interview from companies like Facebook, Postmates, & Square Hired.com
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
[An Update on the Progress of Bootstrap v4](https://github.com/twbs/bootstrap/issues/20631?utm_source=frontendfocus&utm_medium=email) news
Mark Otto
[Chrome 55 to Start Highlighting HTTP Sites as 'Not Secure'](https://medium.servertastic.com/chrome-plans-to-start-highlighting-not-secure-websites-2babf35b46e6?utm_source=frontendfocus&utm_medium=email) news
Andy Gambles
[Happy 15th Birthday to SVG (Scalable Vector Graphics)](https://codepen.io/TobiReif/full/ZpERON?utm_source=frontendfocus&utm_medium=email) news demo
A fun CodePen demo [from Tobi Reif](https://twitter.com/TobiReif/status/773261231624945664) to mark 15 years of the format.
Tobi Reif
[FlyWeb: Pure Web Cross-Device Interaction](https://hacks.mozilla.org/2016/09/flyweb-pure-web-cross-device-interaction/?utm_source=frontendfocus&utm_medium=email) news
An experimental project from Mozilla.
Mozilla Hacks
[How A Chrome Extension Creator's Extension Was Taken Down After 4 Years](https://by.graffino.com/how-google-obliterated-my-24k-users-chrome-extension-eeb14c040a39?utm_source=frontendfocus&utm_medium=email) news
Be careful if you use other people’s trademarks.
Zeno Popovici
[Multi-Process Firefox Brings 400-700% Improvement In Responsiveness](https://techcrunch.com/2016/09/02/multi-process-firefox-brings-400-700-improvement-in-responsiveness/?utm_source=frontendfocus&utm_medium=email) news
Mozilla’s continued efforts to rollout a multi-process architecture, codename Electrolysis, for Firefox.
John Mannes
[Developing Extensible HTML and CSS Components](https://css-tricks.com/developing-extensible-html-css-components/?utm_source=frontendfocus&utm_medium=email) tutorial
Jon Yablonski
[The Building Blocks Of Progressive Web Apps](https://www.smashingmagazine.com/2016/09/the-building-blocks-of-progressive-web-apps/?utm_source=frontendfocus&utm_medium=email) tutorial
Some dos and donts on building progressive web apps.
Ada Rose Edwards
[Glitch Art with HTML5 Canvas](http://thenewcode.com/1132/Glitch-Art-with-HTML5-Canvas?utm_source=frontendfocus&utm_medium=email) tutorial
Dudley Storey
[Using WebUSB to Access USB Devices on the Web](https://developers.google.com/web/updates/2016/03/access-usb-devices-on-the-web?utm_source=frontendfocus&utm_medium=email) tutorial
A draft API for accessing USB devices from the Web browser, currently an experimental feature in Chrome.
Google
[Learn CSS Flexbox in 3 Minutes](https://medium.com/learning-new-stuff/learn-css-flexbox-in-3-minutes-c616c7070672?utm_source=frontendfocus&utm_medium=email) tutorial
A very brief intro.
Per Harald Borgen
[A to Z CSS: The CSS Value of 'auto'](https://www.sitepoint.com/atoz-css-screencast-auto/?utm_source=frontendfocus&utm_medium=email) video
Guy Routledge explores CSS values and properties from each letter of the alphabet. Letter A is for `auto`
SitePoint
[A Multiple Image Hero Layout with CSS Grid Layout](https://www.youtube.com/watch?v=paBou8Fy25k) video
A quick 3 minute guide.
Rachel Andrew
[Element Finder Package for Atom](https://keegan.st/2016/09/01/element-finder-package-for-atom/?utm_source=frontendfocus&utm_medium=email) tools
Use [Atom](https://atom.io/)? Want to easily find elements in your project that match a certain CSS selector? This is for you.
Keegan Street
[DevTools Timeline Viewer](https://chromedevtools.github.io/timeline-viewer/?utm_source=frontendfocus&utm_medium=email) tools
Shareable URLs for your Chrome DevTools Timeline traces.
Paul Irish
[25 Useful HTML, CSS and JS Tools and Libraries](https://medium.com/web-development-zone/amazingly-useful-html-css-and-javascript-tools-and-libraries-d73b10fbae29?utm_source=frontendfocus&utm_medium=email) tools
A great round-up of handy front-end tools.
Bradley Nice
[SQL Source Control: Track each change to your SQL Server database](http://www.red-gate.com/products/sql-development/sql-source-control/?utm_source=frontendfocus&utm_medium=displayemail&utm_content=track_every_change_v2&utm_campaign=sqlsourcecontrol&utm_term=email-24971) rawurl tools
Get a full history in your source control system. See who made changes, what they did why. [See how](http://www.red-gate.com/products/sql-development/sql-source-control/?utm_source=frontendfocus&utm_medium=displayemail&utm_content=track_every_change_v2&utm_campaign=sqlsourcecontrol&utm_term=email-24971)
Red GateSponsor
[mobi.css: A Lightweight, Flexible CSS Framework with a Mobile Focus](https://github.com/xcatliu/mobi.css?utm_source=frontendfocus&utm_medium=email) code
Xcat Liu
[Cesium: A WebGL Virtual Globe and Map Engine](http://cesiumjs.org/?utm_source=frontendfocus&utm_medium=email) code
Cesium
[Postmate: A Powerful, Promise-based postMessage Library](https://github.com/dollarshaveclub/postmate?utm_source=frontendfocus&utm_medium=email) code
Allows a parent page to speak with a child iFrame across origins.
Dollar Shave Club
[in-view: Get Notified When A DOM Element Enters or Exits The Viewport](https://github.com/camwiegert/in-view?utm_source=frontendfocus&utm_medium=email) code
Cam Wiegert
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/256)
Cooper Press Ltd. Office 30, Lincoln Way, Louth, LN11 0LS, UK