---
title: "This Week's HTML5, CSS and Browser Tech News #280"
publication: "Frontend Focus"
issue: 280
published_at: "2017-03-08"
canonical_url: "https://frontendfoc.us/issues/280"
---
This Week's HTML5, CSS and Browser Tech News #280
[Read this e-mail on the Web](http://frontendfoc.us/issues/280)
Frontend FocusIssue 280 — March 8, 2017[Welcome to the (CSS) Grid](http://meyerweb.com/eric/thoughts/2017/03/07/welcome-to-the-grid/?utm_source=frontendfocus&utm_medium=email)CSS Grid support is in the now public Firefox 52 and coming in the next Chrome release too. Eric Meyer is excited about the possibilities. Rachel Andrew has [similar opinions](https://rachelandrew.co.uk/archives/2017/03/07/css-grid-lands-in-firefox-52/). Want to get started? There’s [lots of useful links here.](http://jeffbridgforth.com/css-grid-first-steps/) Eric Meyer
[Front-End Tooling Trends for 2017](https://www.sitepoint.com/front-end-tooling-trends-2017/?utm_source=frontendfocus&utm_medium=email)Are you using the best development tools? Is your CSS compilation complicated? A look at the lay of the land based on [Ashley Nolan’s Front-End Tooling Survey.](https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results) Craig Buckler
[The Complete Guide to CSS Grid](https://tympanus.net/codrops/css_reference/grid/?utm_source=frontendfocus&utm_medium=email)Learn everything about the CSS Grid Module in this illustrated guide with practical examples & demos. Hui Jing Chen
[](http://www.telerik.com/campaigns/kendo-ui/javascript-future-2017?utm_medium=newsletter&utm_source=frontendweeklyprimary&utm_campaign=kendo-ui-whitepaper-futurejs17)[[Whitepaper\] The Future of JavaScript—2017 and Beyond](http://www.telerik.com/campaigns/kendo-ui/javascript-future-2017?utm_medium=newsletter&utm_source=frontendweeklyprimary&utm_campaign=kendo-ui-whitepaper-futurejs17)2017 predictions for the key and rising JavaScript libraries and frameworks and JS’s New Frontiers in this whitepaper. ProgressSponsor
[Firefox 52 Released: WebAssembly, CSS Grid and the Grid Inspector](https://hacks.mozilla.org/2017/03/firefox-52-introducing-web-assembly-css-grid-and-the-grid-inspector/?utm_source=frontendfocus&utm_medium=email)A look at key innovations including CSS Grid support, an improved responsive design more, and ES7 async/await support. Prefer a complete list? [Enjoy the developer release notes.](https://developer.mozilla.org/en-US/Firefox/Releases/52) Mozilla
[An Introduction to the Web Audio API](https://css-tricks.com/introduction-web-audio-api/?utm_source=frontendfocus&utm_medium=email)Create sounds right in the browser with the Web Audio API. This post does a good job of starting with the basics and showing off some demos. Greg Hovanesyan
[WebAssembly: Under The Hood with Mozilla](https://www.youtube.com/watch?v=o52_5qAJhNg)In just 7 minutes, Alon Zakai, originally the creator of the [Emscripten](https://github.com/kripken/emscripten) LLVM-to-JavaScript compiler, explains what WebAssembly is all about. YouTube
[The Document Outline Dilemma](https://css-tricks.com/document-outline-dilemma/?utm_source=frontendfocus&utm_medium=email)For the past few weeks there has been lots of talk about HTML headings in web standards circles. This insightful piece takes a very deep dive into the nature of HTML document outlines. Amelia Bellamy-Royds
[An Introduction to the Reduced Motion Media Query](https://css-tricks.com/introduction-reduced-motion-media-query/?utm_source=frontendfocus&utm_medium=email)Safari 10.1 introduced the ‘Reduced Motion’ Media Query, a declaration that lets developers “create styles that avoid large areas of motion” for users that prefer that. Eric Bailey
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)
- [React Developer at X-Team (Remote)](https://x-team.com/frontend-developer/?utm_source=newsletter&utm_medium=email&utm_campaign=frontend-march-8-17)We're looking for a developer with an extensive knowledge of React and Javascript. We are 100% remote and we provide the funding needed to help you achieve your goals and grow. X-Team
- [Front-End JavaScript Engineer (f/m) - Contentful (Berlin)](https://boards.greenhouse.io/contentful/jobs/520996?gh_src=3vw1jl1#.WK287BKLSV4)As our front-end engineer, you'll work on a modular user interface where API design and application architecture are the main challenges. contentful
- [Software Engineer, Web - Zürich, Switzerland](https://www.centralway.com/de/careers/open-positions/details#oii51fwq?utm_source=frontendfocus&utm_medium=email)Centralway is seeking an experienced programmer to come and join the team. The right candidate will be responsible for building and maintaining high performance web applications with cutting-edge technologies. Centralway Numbrs
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
['Web Annotation' Now A Web Standard](https://hypothes.is/blog/annotation-is-now-a-web-standard/?utm_source=frontendfocus&utm_medium=email) news
[Why I Love Element Queries and You Should Too](https://hashnode.com/post/why-i-love-element-queries-and-you-should-too-cizgq4uyy000m7m53dsyeghst?utm_source=frontendfocus&utm_medium=email) tutorial
What makes element queries powerful and how you can get started using them with the EQCSS plugin.
Tommy Hodgins
[Building Web Extensions Because You Can](https://blog.codeship.com/building-web-extensions-because-you-can/?utm_source=frontendfocus&utm_medium=email) tutorial
Benjamin Young
[Using the Block-Element-Modifier (BEM) System in CSS](https://www.sitepoint.com/css-architecture-block-element-modifier-bem/?utm_source=frontendfocus&utm_medium=email) tutorial
Tiffany Brown
[How to Create A Spinning Loading Image with CSS Only](http://web-tricks.org/content/how-create-loading-image-using-css-only?utm_source=frontendfocus&utm_medium=email) tutorial
Web Tricks
[Squash bugs quickly](https://www.datadoghq.com/lpg/?utm_source=Advertisement&utm_medium=CooperPress&utm_campaign=CooperPress-FrontEndFocus) tools
Eliminate issues faster with automatic anomaly detection, intelligent alerts, and end-to-end, real-time monitoring. Try for 14 days free.
DatadogSponsor
[An Interview with CSS's Creator on Printing Web Pages](http://tosbourn.com/interview-hakon-wium-lie/?utm_source=frontendfocus&utm_medium=email) story
Håkon Wium Lie talks about CSS printing, its history, and Prince (an HTML to PDF converter).
Tony Osbourn
[How We Built EQCSS & Why You Should Try Building Your Own Polyfills Too](https://www.sitepoint.com/how-we-built-eqcss-why-you-should-try-building-your-own-polyfills-too/?utm_source=frontendfocus&utm_medium=email) story
Tom Hodgins
[DRM in HTML5 Is A Victory for The Open Web, Not A Defeat](https://arstechnica.com/business/2017/03/drm-in-html5-is-a-victory-for-the-open-web-not-a-defeat/?utm_source=frontendfocus&utm_medium=email) opinion
The W3C’s decision will keep the Web relevant and useful.
Peter Bright
[The Benefits of Learning How to Code Layouts with CSS](http://jensimmons.com/post/feb-28-2017/benefits-learning-how-code-layouts-css?utm_source=frontendfocus&utm_medium=email) opinion
Jen Simmons
[14 Must Know Chrome DevTools and Console Tricks](https://www.youtube.com/watch?v=xkzDaKwinA8) video
14 quick tips in 10 minutes with Wes Bos.
YouTube
[Previewing Mozilla's WebAssembly Explorer](https://hacks.mozilla.org/2017/03/previewing-the-webassembly-explorer/?utm_source=frontendfocus&utm_medium=email) video
A look at a new tool to help developers understand and experiment with WebAssembly.
Mozilla
[A 7 Minute Video Introduction to CSS Grid and the Firefox Grid Inspector Tool](https://www.youtube.com/watch?v=16enLRDbOyY) video
Jen Simmons
[3 Websites for Generating SVG Patterns](https://css-tricks.com/websites-generate-svg-patterns/?utm_source=frontendfocus&utm_medium=email) tools
Chris Coyier
[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&utm_campaign=sqlsourcecontrol&utm_term=email-25331) 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=displayemail=track_every_change=sqlsourcecontrol=email-25331)
Red GateSponsor
[Gutenberg: Modern Framework to Print The Web Correctly](https://github.com/BafS/Gutenberg?utm_source=frontendfocus&utm_medium=email) code
A sort of ‘base stylesheet’ for printing Web documents beautifully.
Fabien Salathe
[Interactive Millenium Falcon WebGL 3D Model](https://spaces.archilogic.com/3d/archilogic/4yzpzool?modelResourceId=5d2038e3-dfe3-411d-b489-f1f85f61ab30&mode=view&view-menu=none&main-menu=interior) demo
Archilogic
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/280)
Cooper Press Ltd. Office 30, Lincoln Way, Louth, LN11 0LS, UK