---
title: "This Week's HTML5, CSS and Browser Tech News #281"
publication: "Frontend Focus"
issue: 281
published_at: "2017-03-15"
canonical_url: "https://frontendfoc.us/issues/281"
---
This Week's HTML5, CSS and Browser Tech News #281
Creating a horizontal navigation control, scrolling on the Web, and Chrome 57 — [Read this e-mail on the Web](http://frontendfoc.us/issues/281)
Frontend FocusIssue 281 — March 15, 2017[Creating A Horizontal Scrolling Navigation Control](https://benfrain.com/a-horizontal-scrolling-navigation-pattern-for-touch-and-mouse-with-moving-current-indicator/?utm_source=frontendfocus&utm_medium=email)A simple guide to creating a scrollable panel for touch use, augmented with click and drag functionality for mouse input. Ben Frain
[Scrolling on the Web: A Primer](https://blogs.windows.com/msedgedev/2017/03/08/scrolling-on-the-web/?utm_source=frontendfocus&utm_medium=email)_“scrolling is still the most fundamental interaction on the web, and perhaps the most misunderstood.”_ Nolan Lawson
[UnCSS: Tool to Remove Unused Styles From CSS](https://github.com/giakki/uncss?utm_source=frontendfocus&utm_medium=email)A tool (built in Node) that removes unused styles from your stylesheets by filtering out selectors not used in the associated HTML. Giacomo Martino
[](http://www.telerik.com/campaigns/kendo-ui/free-trial-4?utm_medium=newsletter&utm_source=frontendweeklyprimary&utm_campaign=kendo-ui-trial-free4&utm_content=trialad)[Try Kendo UI - the most complete JavaScript/HTML UI library with 70+ widgets](http://www.telerik.com/campaigns/kendo-ui/free-trial-4?utm_medium=newsletter&utm_source=frontendweeklyprimary&utm_campaign=kendo-ui-trial-free4&utm_content=trialad)Kendo UI delivers everything you need to build modern web applications under tight deadlines - from the must-haves Data Grids & DropDowns to Spreadsheet & Scheduler. Choose from 70+ UI components and combine them to create beautiful, responsive apps. ProgressSponsor
['Minecraft' in WebVR with HTML Using A-Frame](https://css-tricks.com/minecraft-webvr-html-using-frame/?utm_source=frontendfocus&utm_medium=email)A VR developer on Mozilla’s VR team goes in-depth on creating a room scale WebVR Minecraft-style demo using A-Frame and just 11 HTML elements. Kevin Ngo
[Linting HTML Using CSS](https://bitsofco.de/linting-html-using-css/?utm_source=frontendfocus&utm_medium=email)Using slightly advanced CSS selectors to highlight potential problem areas (invalid, unsemantic, or inaccessible markup) in your HTML. Ire Aderinokun
[Approaches to Testing Service Workers](https://medium.com/dev-channel/testing-service-workers-318d7b016b19?utm_source=frontendfocus&utm_medium=email)An incredibly thorough guide to different approaches being taken to test service workers by the Chrome DevRel team. Matt Gaunt
[CSS Grid Layout: A New Layout Module for the Web](https://webkit.org/blog/7434/css-grid-layout-a-new-layout-module-for-the-web/?utm_source=frontendfocus&utm_medium=email)An introductory look at CSS Grid Layout from WebKit’s perspective. You can play with it in their Safari Technology Preview. Manuel Rego
[Polymer 2.0 Release Candidate Released](https://www.polymer-project.org/blog/2017-03-08-2-0-rc?utm_source=frontendfocus&utm_medium=email)Now considered feature complete, Polymer 2.0 is ready to test and try. A key focus has been on improved interoperability with other libraries and frameworks. Dan Freedman
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 Front-end Developer, Bitbucket](https://www.smartrecruiters.com/Atlassian/108813286-senior-front-end-developer-bitbucket?utm_source=frontendfocus&utm_medium=email)Want to build the future of code collaboration? Join us as a Front-end Engineer on Bitbucket, Atlassian's source code collaboration and hosting product. Atlassian (Bitbucket)
- [Sr. Front-End Engineer -- React/Redux (San Francisco)](https://jobs.lever.co/quri/44ffd19f-54fa-466f-9cda-1544f1bd6365?lever-origin=agency%5B%5D=Cooper)We're looking for an enthusiastic app developer to join our team. We use React, Flow, GraphQL, Relay, Apollo Client on a daily basis. Quri Inc
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
[What's New in Chrome 57 for Developers?](https://developers.google.com/web/updates/2017/03/nic57?utm_source=frontendfocus&utm_medium=email) news
Grid based layouts, the Media Session API and more.
Google Developers
[How setTimeout() Behavior Has Changed in Firefox 52](https://blog.wanderview.com/blog/2017/03/13/firefox-52-settimeout-changes/?utm_source=frontendfocus&utm_medium=email) tutorial
Ben Kelly
[A Simple Use Case for 'vmin'](https://css-tricks.com/simple-little-use-case-vmin/?utm_source=frontendfocus&utm_medium=email) tutorial
Chris Coyier
[Celebrate CSS Grid Support by Re-Creating The iOS Calculator in HTML and CSS](https://medium.com/statuscode/celebrate-css-grid-support-by-re-creating-the-ios-calculator-5f2da806e96f?utm_source=frontendfocus&utm_medium=email) tutorial
Robert Mion
[Golden Guidelines for Writing Clean CSS](https://www.sitepoint.com/golden-guidelines-for-writing-clean-css/?utm_source=frontendfocus&utm_medium=email) tutorial
Tiffany Brown
[Your First '5K From OSS In 14 Days' Sprint](https://www.getdrip.com/forms/55215740/submissions/new?utm_source=frontendfocus&utm_medium=email) course
If you want to stop competing with code-chimps, model what works. Finish this can’t lose “5K From OSS” Sprint.
HookOpsSponsor
[Deep Dive CSS: Font Metrics, line-height and vertical-align](http://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align?utm_source=frontendfocus&utm_medium=email) tutorial
Vincent De Oliveira
[A (Non-Standard) Way to Stroke/Outline Text on the Web](https://css-tricks.com/text-stroke-stuck-middle/?utm_source=frontendfocus&utm_medium=email) tutorial
Chris Coyier
[Recording to an Audio File using HTML5 and JS](https://air.ghost.io/recording-to-an-audio-file-using-html5-and-js/?utm_source=frontendfocus&utm_medium=email) tutorial
Coding using AIR
[How to Order and Align Items using CSS Grid Layout](https://www.sitepoint.com/order-align-items-grid-layout/?utm_source=frontendfocus&utm_medium=email) tutorial
Nitish Kumar
[Learn About Color Fonts](http://www.colorfonts.wtf/?utm_source=frontendfocus&utm_medium=email) tutorial
Already well supported by Edge and Firefox.
Fontself
[Making a Stacked Paper Effect in CSS](https://css-tricks.com/snippets/css/stack-of-paper/?utm_source=frontendfocus&utm_medium=email) tutorial
Geoff Graham
[Pinterest's Utilities for Creating and Testing Service Workers](https://github.com/pinterest/service-workers?utm_source=frontendfocus&utm_medium=email) tools
Pinterest
[Animista: CSS Animations on Demand](http://animista.net/?utm_source=frontendfocus&utm_medium=email) tools
Tweak and download a collection of ready to use CSS animations.
Ana Travas
[How to find and fix the slowest code in your .NET application](http://www.red-gate.com/products/dotnet-development/ants-performance-profiler/?utm_source=frontendfocus&utm_medium=displayemail&utm_content=slowest_code&utm_campaign=antsperformanceprofiler&utm_term=email-25332) tools
Find bottlenecks in your code or database boost performance with new ANTS Performance Profiler 9. [Try free.](http://www.red-gate.com/products/dotnet-development/ants-performance-profiler/?utm_source=frontendfocus=displayemail=slowest_code=antsperformanceprofiler=email-25332)
Red GateSponsor
[Waffle Grid: An Easy to Use Flexbox Grid System](https://lucasgruwez.github.io/waffle-grid/?utm_source=frontendfocus&utm_medium=email) code
Lucas Gruwez
[blurify.js: Image Blurring from JavaScript](https://github.com/JustClear/blurify?utm_source=frontendfocus&utm_medium=email) code
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/281)
Cooper Press Ltd. Office 30, Lincoln Way, Louth, LN11 0LS, UK