---
title: "This Week's HTML5, CSS and Browser Tech News #260"
publication: "Frontend Focus"
issue: 260
published_at: "2016-10-05"
canonical_url: "https://frontendfoc.us/issues/260"
---
This Week's HTML5, CSS and Browser Tech News #260
[Read this e-mail on the Web](http://frontendfoc.us/issues/260)
Frontend FocusIssue 260 — October 5, 2016[Grid By Example: A Free Video Series on Learning CSS Grid Layout](http://gridbyexample.com/video/?utm_source=frontendfocus&utm_medium=email)CSS Grid expert Rachel Andrew has put together a handy set of short videos covering different aspects of creating your own CSS Grid layouts. Rachel Andrew
[A Look at a Redesign with CSS Shapes](http://alistapart.com/article/redesign-with-css-shapes?utm_source=frontendfocus&utm_medium=email)Small but mighty, CSS ‘float shapes’ and feature queries could provide the latest boost to your front-end development toolset. Eric Meyer
[Alternative Text and Images](https://bitsofco.de/alternative-text-and-images/?utm_source=frontendfocus&utm_medium=email)The most accessible format for any content on the web is plain text, and even where images are used, text can provide added value for many users. This is a handy set of tips on the topic. Ire Aderinokun
[](http://www.telerik.com/campaigns/kendo-ui/responsive-must-know-techniques?utm_medium=newsletter&utm_source=HTMLWeeklyPrimary&utm_campaign=dt-kendo-responsive-wp-oct15)[Building a responsive HTML5 app? Learn the must-know techniques with this free whitepaper](http://www.telerik.com/campaigns/kendo-ui/responsive-must-know-techniques?utm_medium=newsletter&utm_source=HTMLWeeklyPrimary&utm_campaign=dt-kendo-responsive-wp-oct15)If you're a HTML5/JS dev, maybe you have already jumped in on a responsive project and would like to learn more. If not, responsive web design will probably be a requirement in the near future. This whitepaper will give you the must-know responsive web. ProgressSponsor
[g9.js: Generate Automatically Interactive Web Graphics](http://omrelli.ug/g9/?utm_source=frontendfocus&utm_medium=email)Draw graphics, then g9 automatically makes them interactive for end users. There’s a great set of [code-driven explanations and demos](http://omrelli.ug/g9/gallery/) to learn more. bijection
[Real Art Direction on the Web](https://www.youtube.com/watch?v=5Z7lSSMwRgo)A step-by-step design process for creating layouts as unique as your content. Learn how Flexbox, Grid, Shapes, Multicolumn, Viewport Units, and more can be combined together to revolutionize how you approach page design. _31 minutes_ Jen Simmons
[Grid Layout Is A Much Needed Step-Change for CSS](http://maketea.co.uk/2016/09/28/css-grid-layout-is-a-step-change.html?utm_source=frontendfocus&utm_medium=email)“Grid layout is expressive and logical and it solves a number of fundamental gripes.” Matt Hinchliffe
[The State of HTML Mobile Frameworks in 2016](http://www.agingcoder.com/mobile/2016/09/25/the-state-of-html-mobile-frameworks-in-2016/?utm_source=frontendfocus&utm_medium=email)A look into the current state of HTML-based mobile UI frameworks for building hybrid apps. Kris Erickson
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 Engineer (San Francisco, US)](https://jobs.lever.co/quri/44ffd19f-54fa-466f-9cda-1544f1bd6365?utm_source=frontendfocus&utm_medium=email)We’re looking for an experienced front-end engineer to join our small team of focused, dedicated technologists. Join us and help build our market leading Enterprise Dashboard. Quri
- [Senior Front End Engineer](https://jobs.lever.co/animoto/f247e7a5-8495-4ab7-ac43-a2fe49ff8d25?lever-source=cooperpress)Everyone should have the power to create professional-quality videos. As a member of the Animoto team, you'll be developing a responsive, elegant web experience and pioneering the next generation of video creation software. Animoto
- [Don't love your job? You Should - Try Hired and Find the Right Fit.](http://hired.com/?utm_source=newsletters&utm_medium=petercooperpress&utm_campaign=q4-16-frontendfocus)Hired puts the power back in your hands, by having companies apply to you, not the other way around. With Hired you only talk to companies you're interested in. Hired
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
[CSS Grid Layout Module Level 1 at Candidate Recommendation](https://rachelandrew.co.uk/archives/2016/09/29/css-grid-layout-module-level-1-at-candidate-recommendation/?utm_source=frontendfocus&utm_medium=email) news
CSS Grid Layout has transitioned to become a Candidate Recommendation.
Rachel Andrew
[WebKit Introduces MotionMark: A New Graphics Benchmark for Browsers](https://webkit.org/blog/6943/motionmark-a-new-graphics-benchmark/?utm_source=frontendfocus&utm_medium=email) news
WebKit
[Software Remodeling](http://corgibytes.com/blog/2016/08/11/software-remodeling/?utm_source=frontendfocus&utm_medium=email) rawurl
Corgibytes’ CEO Andrea Goulet compares remodeling software to how we remodel houses, focusing on biggest value fixes first. It’s about slowly transforming the codebase to become as efficient as possible.
CorgibytesSponsor
[An Illustrated Guide to the SVG 'path' Element](https://css-tricks.com/svg-path-syntax-illustrated-guide/?utm_source=frontendfocus&utm_medium=email) tutorial
Described as ‘the ultimate drawing element’.
Chris Coyier
[10 Things You Probably Didn’t Know You Could Do with Chrome’s Dev Console](https://medium.freecodecamp.com/10-tips-to-maximize-your-javascript-debugging-experience-b69a75859329?utm_source=frontendfocus&utm_medium=email) tutorial
Swagat Kumar Swain
[Responsive Table Layout](http://allthingssmitty.com/2016/10/03/responsive-table-layout/?utm_source=frontendfocus&utm_medium=email) tutorial
Data tables on the web are used to communicate important information to a user. Yet so many of these aren’t mobile-optimized. Here’s one easy way to do just that.
Matt Smith
[How to Add or Remove a CSS Class with Vanilla JavaScript](https://www.sitepoint.com/add-remove-css-class-vanilla-js/?utm_source=frontendfocus&utm_medium=email) tutorial
Sitepoint
[Things to Watch Out for When Working with 3D in CSS](https://css-tricks.com/things-watch-working-css-3d/?utm_source=frontendfocus&utm_medium=email) tutorial
Ana Tudor explores some of the things which surprised her whilst working with 3D in CSS.
CSS Tricks
['Progressive Webapps' is the New Ajax](https://www.youtube.com/watch?v=EErueQdEXMA) video
_32 minutes._
Chris Wilson
[Why You Should Avoid document.write, Specifically for Script Injection](http://blog.dareboost.com/en/2016/09/avoid-using-document-write-scripts-injection/?utm_source=frontendfocus&utm_medium=email) opinion
Damien Jubeau
[Can We Stop Bad-Mouthing CSS in Developer Talks, Please?](https://www.christianheilmann.com/2016/10/05/can-we-stop-bad-mouthing-css-in-developer-talks-please/?utm_source=frontendfocus&utm_medium=email) opinion
Christian Heilmann
[Frontend Developer at Honeypot (Berlin, Germany)](https://jobs.lever.co/honeypot/ce2e9e92-fc16-4dc1-badc-22b8bfeb4684?lever-source=frontendfocusco) rawurl
If you have a deep knowledge in JavaScript, Web Standards (HTML5, CSS3), UI/UX, a passion to create the best apps imaginable, and are seeking a new challenge with an awesome team, apply to Honeypot.
HoneypotSponsor
[Landmarks: Navigate a Web Page via WAI-ARIA Landmarks](http://matatk.agrip.org.uk/landmarks/?utm_source=frontendfocus&utm_medium=email) tools
Matthew Tylee Atkinson
[stylelint: A Modern CSS Linter](https://github.com/stylelint/stylelint/?utm_source=frontendfocus&utm_medium=email) tools
GitHub
[Blend: Create and Customize Beautiful CSS3 Gradients.](http://www.colinkeany.com/blend/?utm_source=frontendfocus&utm_medium=email) tools
A handy browser tool to create CSS3 gradients.
Colin Keany
[text-spinners: Pure Text, CSS Only Inline Loading Indicators](http://tawian.io/text-spinners/?utm_source=frontendfocus&utm_medium=email) code
A clever and flexible approach.
[Optimizing Text Content for Screen Readers](https://output.jsbin.com/gavepu/?utm_source=frontendfocus&utm_medium=email) code
Quick tip on how using `opacity` and the `::after` element can optimize screen-reading output. Here’s a [short video](
https://www.youtube.com/watch?v=yaHOpbAlgkU) demonstrating it in action.
Šime Vidas
[Super Mario Kart Map Recreated in 3D with CSS](https://xem.github.io/CSS3Dprototypes/5/?utm_source=frontendfocus&utm_medium=email) demo
A fun use of CSS 3D functions to create a playable Mario Kart demo — use the arrow keys. Code available on [the CSS3Dprototypes repo](https://github.com/xem/CSS3Dprototypes).
xem
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/260)
Cooper Press Ltd. Office 30, Lincoln Way, Louth, LN11 0LS, UK