---
title: "This Week's HTML5 and Browser Technology News (Issue 238)"
publication: "Frontend Focus"
issue: 238
published_at: "2016-05-04"
canonical_url: "https://frontendfoc.us/issues/238"
---
This Week's HTML5 and Browser Technology News (Issue 238)
[Read this e-mail on the Web](http://frontendfoc.us/issues/238)
Frontend FocusIssue 238 — May 4, 2016[Working with Images in Stylesheets with PostCSS](https://css-tricks.com/images-in-postcss/?utm_source=frontendfocus&utm_medium=email)Did you know you can use PostCSS to inline images, calculate dimensions, inline and modify SVGs, and more? PostCSS is an increasingly powerful part of a modern front-end toolset. Aleks Hudochenkov
[An Extensive Guide To CSS Pseudo-Classes And Pseudo-Elements](https://www.smashingmagazine.com/2016/05/an-ultimate-guide-to-css-pseudo-classes-and-pseudo-elements/#?)A thorough look at pseudo-classes (like `:first-child`) and pseudo-elements (like `:before`) with plenty of live Codepen examples to play with. Ricardo Zea
[A Comparison of Web Animation Technologies](https://css-tricks.com/comparison-animation-technologies/?utm_source=frontendfocus&utm_medium=email)A thorough comparison of both native and library-based Web animation technologies with useful pros and cons to help you choose for your next project. Sarah Drasner
[](https://frontendmasters.com/workshops/chrome-dev-tools/?utm_source=frontendfocus&utm_medium=email)[Master Chrome Dev Tools Workshop with Jon Kuperman](https://frontendmasters.com/workshops/chrome-dev-tools/?utm_source=frontendfocus&utm_medium=email)You probably use dev tools for tweaking CSS or the interactive console...but there is so much more! Let’s look at everything the dev tools have to offer. Join Jon Kuperman and learn how to edit, debug and profile web applications with Chrome Dev Tools. Frontend MastersSponsor
[Geolocation API Removed For Unsecure Origins in Chrome](https://developers.google.com/web/updates/2016/04/geolocation-on-secure-contexts-only?utm_source=frontendfocus&utm_medium=email)As part of Chrome’s intent to deprecate powerful features on non-secure origins, it no longer supports the HTML5 Geolocation API over non-secure connections. Paul Kinlan
[31 Talks from the Forward Web Summit](https://www.youtube.com/playlist?list=PLndbWGuLoHebKI8krCzJU88Rf3TwhNZvH#forward4websummit)All 31 talks from the 4th _Forward Web Summit_ - a JavaScript and Web culture event looking at the technologies and tools we can use to move the web forward. YouTube
[Animating a Basic 3D Scene with Three.js](http://tympanus.net/codrops/2016/04/26/the-aviator-animating-basic-3d-scene-threejs/?utm_source=frontendfocus&utm_medium=email)A thorough tutorial covering the basics of creating animated 3D scenes in the browser using Three.js. Karim Maaloul
[Meaningful CSS: Style Like You Mean It](http://alistapart.com/article/meaningful-css-style-like-you-mean-it?utm_source=frontendfocus&utm_medium=email)Tim Baxter encourages us to move beyond ‘classitis’ (the “measles of markup”) to writing rich, semantic HTML and CSS. Only habit is stopping us. A List Apart
[How to Create Animated Heat Distortion Effects with WebGL](http://tympanus.net/codrops/2016/05/03/animated-heat-distortion-effects-webgl/?utm_source=frontendfocus&utm_medium=email)How to use fragment shaders in WebGL to create an animated heat haze distortion effect on images and text. Lucas Bebber
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)
- [The Easiest Way to Find a Job](https://hired.com/?utm_source=newsletters&utm_medium=petercooperpress&utm_term=cat-tech-html5&utm_content=easiest&utm_campaign=q2-16-html5weekly&utm_location=us)Hired lets you sit back while job offers come to you. When you complete your profile, instantly apply to 3,500+ companies on the platform who will contact you with job offers, including salary and equity up-front. [Try it today.](https://hired.com/?utm_source=newsletters&utm_medium=petercooperpress&utm_term=cat-tech-html5&utm_content=easiest&utm_campaign=q2-16-html5weekly&utm_location=us) Hired.com
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
[Speed Up Page Load with WOFF 2.0 Fonts in Microsoft Edge](https://blogs.windows.com/msedgedev/2016/05/03/woff2-fonts-in-microsoft-edge/?utm_source=frontendfocus&utm_medium=email) news
Microsoft Edge Team
[Updated Working Draft of the HTML 5.1 Spec](http://www.w3.org/TR/html51/?utm_source=frontendfocus&utm_medium=email) news
The W3C working draft for HTML 5.1 was updated on May 3rd.
W3C
[An Interesting Change to Browsing On Android](https://www.broken-links.com/2016/04/29/interesting-change-chrome-android/?utm_source=frontendfocus&utm_medium=email) news
Search results from the Google Android app now open in a Chrome custom tab. Peter Gasston says this may have an impact on mobile browsing habits.
Peter Gasston
[Browser Trends May 2016: Firefox Finally Overtakes IE](http://www.sitepoint.com/browser-trends-may-2016-firefox-finally-overtakes-ie/?utm_source=frontendfocus&utm_medium=email) news
Mozilla can claim to have more web users than MS in the battle of the browsers.
Craig Buckler
[Turn Errors into Awesome](http://www.launchbit.com/taz/11157-6394-111?utm_source=frontendfocus&utm_medium=email) rawurl tools
Quickly pinpoint what’s broken and why. Get the context and insights to defeat all application errors. Full-stack error tracking for all apps in any language.
Rollbar.comSponsor
[How to Design Rich Card-Based Layouts with Semantic UI](http://www.sitepoint.com/how-to-design-rich-card-based-layouts-with-semantic-ui/?utm_source=frontendfocus&utm_medium=email) tutorial
Ivaylo Gerchev
[Introducing the CSS Grid Layout](http://www.sitepoint.com/introducing-the-css-grid-layout/?utm_source=frontendfocus&utm_medium=email) tutorial
Nitish Kumar
[Reducing JPEG File Sizes for the Web](https://medium.com/@duhroach/reducing-jpg-file-size-e5b27df3257c?utm_source=frontendfocus&utm_medium=email) tutorial
Colt McAnlis
[So You Want to Make A PostCSS Plugin..](https://css-tricks.com/want-make-postcss-plugin/?utm_source=frontendfocus&utm_medium=email) tutorial
Marcus Tisater
[Streamlining the Sign-in Flow Using Credential Management API in Chrome](https://developers.google.com/web/updates/2016/04/credential-management-api?hl=en) tutorial
The latest version of Chrome (51) supports the [Credential Management API](http://w3c.github.io/webappsec-credential-management/).
Eiji Kitamura
[The Cutting Edge of Browser Security](https://channel9.msdn.com/Events/WebPlatformSummit/edgesummit2016/ES1604?utm_source=frontendfocus&utm_medium=email) video
A look at what the Edge team is doing to improve browser security.
Channel 9
[Debugging Scroll Jank in Chrome 51](https://www.youtube.com/watch?v=6-D_3yx_KVI) video
7 minute video with tips on improving scroll performance in Chrome.
Rick Byers
[Enhance Your HTML5 Game's Sound with Dolby Audio](http://media.bemyapp.com/enhance-html5-games-sound-dolby-audio/?utm_source=frontendfocus&utm_medium=email) video
A dev evangelist for Dolby shows how to use Dolby audio in HTML5 games.
Titus Blair
[The Future of JavaScript - 2016 and Beyond](http://www.telerik.com/campaigns/kendo-ui/javascript-future?utm_medium=newsletter&utm_source=html5weekly&utm_campaign=dt-kendo-js-2016-wp-may4) rawurl opinion
Learn what's coming around for the most popular JavaScript frameworks in 2016 and beyond in this free whitepaper.
Telerik Kendo UISponsor
[Drinking the Web Through A Straw](https://500ish.com/drinking-the-web-through-a-straw-75ab685a1763?utm_source=frontendfocus&utm_medium=email) opinion
Thoughts on AMP, and how a simplified web experience could benefit all, not just mobile users.
M.G. Siegler
[Flexbox Grid](http://flexboxgrid.com/?utm_source=frontendfocus&utm_medium=email) tools
A grid system based on the ‘flex’ display property.
Kristofer Joseph
[Tools And Resources For Editing, Converting And Optimizing SVGs](https://www.smashingmagazine.com/2016/04/tools-and-resources-for-editing-converting-and-optimizing-svgs/?utm_source=frontendfocus&utm_medium=email) tools
Cosima Mielke
[WAAPI Browser Support Test](http://codepen.io/danwilson/pen/xGBKVq/?utm_source=frontendfocus&utm_medium=email) tools
A checklist of browser Web Animations API support.
Dan Wilson
[20 of the Most Popular HTML5 Game Templates](http://code.tutsplus.com/tutorials/20-of-the-most-popular-html5-game-templates--cms-26070?utm_source=frontendfocus&utm_medium=email) tools
Eric Dye
[Easily Convert CSS to React Inline Styles](http://staxmanade.com/2016/04/easily-convert-css-to-react-inline-styles/?utm_source=frontendfocus&utm_medium=email) tools
A tool to help translate plain CSS into an inline JSON representation for React.
Jason Jarrett
[ccapture.js: Library to Capture Canvas-Based Animations at a Fixed Framerate](https://github.com/spite/ccapture.js?utm_source=frontendfocus&utm_medium=email) code
Jaume Sanchez
[A Parallel Raytracer Built with TypeScript and GPU.js (WebGL/GLSL)](http://raytracer.crypt.sg/?utm_source=frontendfocus&utm_medium=email) demo
[Create Your Own Star Wars Intro Crawl in Pure CSS](http://polarnotion.github.io/starwarsintro/?utm_source=frontendfocus&utm_medium=email) demo
As it’s May the 4th.
Polar Notion
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/238)
Cooper Press Ltd. Office 30, Lincoln Way, Louth, LN11 0LS, UK