Frontend Focus
Issue 256 — September 7, 2016
Under certain circumstances, Chrome is blocking some external scripts that are using document.write() to improve performance.
Paul Kinlan

A look at using the basics of the Web Animations API, now available by default in Firefox 48+ (also supported in Chrome 36+).

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

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.
Wijmo   Sponsor

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.

“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

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.

Lots of things to consider before launching your latest site.

Jobs Supported by

  • Front End Developer - Leipzig, Germanytrivago 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 WeekWith Hired, companies apply to hire you - get salary and equity offers before you interview from companies like Facebook, Postmates, & Square

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

In Brief

An Update on the Progress of Bootstrap v4 news
Mark Otto

Chrome 55 to Start Highlighting HTTP Sites as 'Not Secure' news
Andy Gambles

Happy 15th Birthday to SVG (Scalable Vector Graphics) news demo
A fun CodePen demo from Tobi Reif to mark 15 years of the format.
Tobi Reif

FlyWeb: Pure Web Cross-Device Interaction news
An experimental project from Mozilla.
Mozilla Hacks

How A Chrome Extension Creator's Extension Was Taken Down After 4 Years news
Be careful if you use other people’s trademarks.
Zeno Popovici

Multi-Process Firefox Brings 400-700% Improvement In Responsiveness news
Mozilla’s continued efforts to rollout a multi-process architecture, codename Electrolysis, for Firefox.
John Mannes

Developing Extensible HTML and CSS Components tutorial
Jon Yablonski

The Building Blocks Of Progressive Web Apps tutorial
Some dos and donts on building progressive web apps.
Ada Rose Edwards

Glitch Art with HTML5 Canvas tutorial
Dudley Storey

Using WebUSB to Access USB Devices on the Web tutorial
A draft API for accessing USB devices from the Web browser, currently an experimental feature in Chrome.

Learn CSS Flexbox in 3 Minutes tutorial
A very brief intro.
Per Harald Borgen

A to Z CSS: The CSS Value of 'auto' video
Guy Routledge explores CSS values and properties from each letter of the alphabet. Letter A is for auto

A Multiple Image Hero Layout with CSS Grid Layout video
A quick 3 minute guide.
Rachel Andrew

Element Finder Package for Atom tools
Use Atom? Want to easily find elements in your project that match a certain CSS selector? This is for you.
Keegan Street

DevTools Timeline Viewer tools
Shareable URLs for your Chrome DevTools Timeline traces.
Paul Irish

25 Useful HTML, CSS and JS Tools and Libraries tools
A great round-up of handy front-end tools.
Bradley Nice

SQL Source Control: Track each change to your SQL Server database rawurl tools
Get a full history in your source control system. See who made changes, what they did why. See how
Red Gate  Sponsor

mobi.css: A Lightweight, Flexible CSS Framework with a Mobile Focus code
Xcat Liu

Cesium: A WebGL Virtual Globe and Map Engine code

Postmate: A Powerful, Promise-based postMessage Library 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 code
Cam Wiegert