---
title: "This Week's HTML5, CSS and Browser Tech News #277"
publication: "Frontend Focus"
issue: 277
published_at: "2017-02-15"
canonical_url: "https://frontendfoc.us/issues/277"
---
This Week's HTML5, CSS and Browser Tech News #277
[Read this e-mail on the Web](http://frontendfoc.us/issues/277)
Frontend FocusIssue 277 — February 15, 2017[Bridging CSS and JS with Custom Properties](https://sgom.es/posts/2017-02-10-bridging-css-and-js-with-custom-properties/?utm_source=frontendfocus&utm_medium=email)A simple, practical example of how CSS variables (supported in all major browsers except Edge) can lead to looser coupling and better code when JS needs to interact with CSS. Sérgio Gomes
[How Stack Overflow Redesigned Its Navigation Bar](http://stackoverflow.blog/2017/02/Why-Stack-Overflow-Redesigned-the-Top-Navigation/?utm_source=frontendfocus&utm_medium=email)A significant change for one of the most used developer sites in the world. This post digs into the changes made and how they performed during A/B testing. Stack Overflow
[What’s Up with Base64 Encoding and Performance?](https://csswizardry.com/2017/02/base64-encoding-and-performance/?utm_source=frontendfocus&utm_medium=email)What is the performance reality of embedding external assets directly into pages or stylesheets? The conclusion is ‘Base64 still feels like a huge anti-pattern.’ Harry Roberts
[](https://bugsnag.com/platforms/javascript/?utm_source=cooperpress&utm_medium=cpc&utm_content=trial-signup-primary&utm_campaign=&utm_term=frontend-focus-20170215)[Automatically capture and fix JavaScript errors affecting your users 🚀](https://bugsnag.com/platforms/javascript/?utm_source=cooperpress&utm_medium=cpc&utm_content=trial-signup-primary&utm_campaign=&utm_term=frontend-focus-20170215)Get real-time crash alerts and collect detailed diagnostics so you can fix errors for your users. See deminified stacktraces with support for sourcemaps. Cut through front-end noise so you can efficiently assess the impact of errors. [Learn more](https://bugsnag.com/platforms/javascript/?utm_source=cooperpress&utm_medium=cpc&utm_content=trial-signup-primary&utm_campaign=&utm_term=frontend-focus-20170215). BugsnagSponsor
[Experimenting with speechSynthesis](https://www.smashingmagazine.com/2017/02/experimenting-with-speechsynthesis/?utm_source=frontendfocus&utm_medium=email)The Web Speech API provides the ability to voice-enable your website by using the SpeechRecognition and the SpeechSynthesis interfaces. Aaron Gustafson
['CSS4' Selectors: What Can We Expect?](https://gorillalogic.com/blog/css4-selectors-can-expect/?utm_source=frontendfocus&utm_medium=email)Some of the ideas currently in discussion at the W3C regarding the _Selectors Level 4 Draft_. Arturo Campos
[An Element-by-Element HTML Reference](http://htmlreference.io/?utm_source=frontendfocus&utm_medium=email)Essentially a list of 113 HTML elements which link to pages explaining their use and the attributes they support, if any. There’s a [similar reference for CSS](http://cssreference.io/) too. Jeremy Thomas
[Friendly Webdev Tutorials For Complete Beginners](https://internetingishard.com/html-and-css/?utm_source=frontendfocus&utm_medium=email)Covers basic HTML, CSS, the box model, flexbox, floats, etc. Suited for beginners but I found the [flexbox page](https://internetingishard.com/html-and-css/flexbox/) a good primer on its own. Interneting Is Hard
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)
- [JavaScript Application Developer (m/f) - Berlin/Umgebung](https://civey.breezy.hr/p/150e959e5a58-javascript-application-developer-focusing-on-single-page-application-development---m-f?utm_source=frontendfocus&utm_medium=email)Civey is seeking an experienced developer with strong JavaScript skills and is familiar with HTTP, REST and Web Applications. Civey
- [Front-End Developer - Florida/Remote](http://frontenddeveloperjob.com/job/58a1ef8b3f19bf0004945b21?utm_source=frontendfocus&utm_medium=email) Launch Potato
- [Front-End Engineer - Nashville, TN](http://frontenddeveloperjob.com/job/5899ea591a86430004cdff8f?utm_source=frontendfocus&utm_medium=email) Lonely Planet
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
[Editor's Draft of CSS Timing Functions Level 1](https://drafts.csswg.org/css-timing/?utm_source=frontendfocus&utm_medium=email) news
W3C
[Achieving 60 FPS Mobile Animations with CSS3](https://www.sitepoint.com/achieve-60-fps-mobile-animations-with-css3/?utm_source=frontendfocus&utm_medium=email) tutorial
Jose Roasario shares tips for animating elements in mobile contexts.
Sitepoint
[A Basic Introduction to CSS Attribute Selectors](https://www.sitepoint.com/css-selectors-attribute-selectors/?utm_source=frontendfocus&utm_medium=email) tutorial
e.g. `[href$="5555"]` for links to URLs ending in ‘5555’.
Tiffany Brown
[Front-end ♥ npm; npm ♥ you](https://go.npm.me/bvzVbO?utm_source=frontendfocus&utm_medium=email)
Bring npm to work to unblock collaboration, quit reinventing the wheel, and build amazing things.
npm, Inc.Sponsor
[Exercises in Flexbox: Simple Web Components](https://webdesign.tutsplus.com/tutorials/exercises-in-flexbox-simple-web-components--cms-28049?utm_source=frontendfocus&utm_medium=email) tutorial
Zviad Sichinava
[Creating a 'Rollover' Map of the US with SVG and JS](http://mediatemple.net/blog/tips/map-rollovers/?utm_source=frontendfocus&utm_medium=email) tutorial
Chris Coyier
[CSS Grid Layout Terminology, Explained](https://bitsofco.de/css-grid-terminology/?utm_source=frontendfocus&utm_medium=email) tutorial
Ire Aderinokun
[HTML Canvas Cheatsheet](https://skilled.co/html-canvas/?utm_source=frontendfocus&utm_medium=email) tutorial
Skilled
[HTML5 for the Mobile Web: Browser Forms and Input Types](https://mobiforge.com/design-development/html5-mobile-web-forms-and-input-types?utm_source=frontendfocus&utm_medium=email) story
An overview of new form controls, how they look, behave and are supported on various mobile browsers.
Ruadhán O'Donoghue
[CSSO: A CSS Minifier with Structural Optimizations](https://github.com/css/csso?utm_source=frontendfocus&utm_medium=email) tools
Sergey Kryzhanovsky
[A Collection of 180 Curated CSS3 'Web Gradients'](https://webgradients.com/?utm_source=frontendfocus&utm_medium=email) tools
itmeo
[Create data-intensive, feature-rich web and mobile apps with Sencha Ext JS](http://pages.sencha.com/build-data-intensive-web-and-mobile-apps-1.html?utm_source=frontendfocus&utm_medium=email) tools
Learn how to design, develop and test data-intensive web apps that run on desktops, tablets, and smartphones with Sencha Ext JS
Sencha, Inc.Sponsor
[ScrollDir: Leverage Vertical Scroll Direction in CSS Via a Data Attribute](https://dollarshaveclub.github.io/scrolldir/?utm_source=frontendfocus&utm_medium=email) code
Dollar Shave Club
[SVGO: A Node-Based Tool for Optimizing SVG Files](https://github.com/svg/svgo?utm_source=frontendfocus&utm_medium=email) code
A long standing project but still getting frequent updates.
[Rythm.js: Make Elements On Your Page 'Dance'](http://okazari.github.io/Rythm.js/?utm_source=frontendfocus&utm_medium=email) code
A funny effect but warning: _music autoplays._
Benjamin Plouzennec
[Sticky-Kit: jQuery Plugin for Sticky Elements](http://leafo.net/sticky-kit/?utm_source=frontendfocus&utm_medium=email) code
Attach elements to the page when the user scrolls.
[Fluid Paint: A WebGL-based Painting Experience](http://david.li/paint/?utm_source=frontendfocus&utm_medium=email) demo
A browser-based WebGL painting simulator. [Code](https://github.com/dli/paint).
David Li
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/277)
Cooper Press Ltd. Office 30, Lincoln Way, Louth, LN11 0LS, UK