---
title: "This Week's HTML5, CSS and Browser Tech News #265"
publication: "Frontend Focus"
issue: 265
published_at: "2016-11-09"
canonical_url: "https://frontendfoc.us/issues/265"
---
This Week's HTML5, CSS and Browser Tech News #265
[Read this e-mail on the Web](http://frontendfoc.us/issues/265)
Frontend FocusIssue 265 — November 9, 2016[CSS Grids, Flexbox and Box Alignment: Our New System For Web Layout](https://www.smashingmagazine.com/2016/11/css-grids-flexbox-and-box-alignment-our-new-system-for-web-layout/?utm_source=frontendfocus&utm_medium=email)Rachel Andrew explains that by understanding flexbox you’re very close to understanding much of grid layout. Plenty of great CodePen examples here. Rachel Andrew
[How to Build A Responsive Grid System](https://zellwk.com/blog/responsive-grid-system/?utm_source=frontendfocus&utm_medium=email)Zell sets outs to prep you with the knowledge needed to build a custom-made grid in this tutorial. Zell Liew
[10 Principles for Smooth Web Animations](https://blog.gyrosco.pe/smooth-css-animations-7d8ffc2c1d29?utm_source=frontendfocus&utm_medium=email)Handy insights and approaches for reaching the much desired 60fps for your site’s animations. Anand Sharma
[](https://frontendmasters.com/workshops/?utm_source=frontendfocus&utm_medium=email)[Unlimited LIVE online front-end engineering workshops](https://frontendmasters.com/workshops/?utm_source=frontendfocus&utm_medium=email)Starting this week, Frontend Masters is offering all their LIVE online workshops from world-class experts, 100% free for members! Get unlimited access to ALL live online workshops, plus 50+ courses for just $39/mo. Frontend MastersSponsor
[309 Useful CodePens for Everyday Front End Development](http://codepen.io/collection/nMgKxJ/?utm_source=frontendfocus&utm_medium=email)A large CodePen collection collated by Sarah Drasner featuring techniques that may prove useful in everyday front-end dev. Sarah Drasner
[How and Why You Should Inline Your Critical CSS](https://www.sitepoint.com/how-and-why-you-should-inline-your-critical-css/?utm_source=frontendfocus&utm_medium=email)Why you should be inlining your critical CSS, as well as how to do it using Grunt, npm modules and other tools. Asha Laxmi
[SkateJS: Cross-Framework Web Component Library Built on W3C Specs](https://github.com/skatejs/skatejs?utm_source=frontendfocus&utm_medium=email)A library built on top of the W3C web component specs for writing functional and performant web components with a small footprint. Trey Shugart
[Cooperative Scheduling with requestIdleCallback](https://hacks.mozilla.org/2016/11/cooperative-scheduling-with-requestidlecallback/?utm_source=frontendfocus&utm_medium=email)Firefox Nightly has support for `requestIdleCallback`, a method for having a function be called in the main thread during a window of idle time. Mozilla Hacks
[HeadlessBrowsers: A List of (Almost) All Headless Web Browsers in Existence](https://github.com/dhamaniasad/HeadlessBrowsers?utm_source=frontendfocus&utm_medium=email)A collection of web browsers without a graphical user interface, controlled programmatically. Useful for automation, testing, and other purposes. Asad Dhamani
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)
- [Want Multiple Job Offers? - Try Hired](http://hired.com/?utm_source=newsletters&utm_medium=petercooperpress&utm_campaign=q4-16-frontendfocus)On Hired, engineers typically get 5+ job offers in 1 week. Find that new opportunity you've been craving and get access to 4,000+ companies instantly. 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
[Google's Mobile-First Indexing Approach](https://webmasters.googleblog.com//2016/11/mobile-first-indexing.html?utm_source=frontendfocus&utm_medium=email) news
Google’s algorithms will eventually primarily use the mobile version of a site’s content.
Google
[Announcing Dart Sass: A Dart Implementation of the Sass CSS Pre-Processor](http://blog.sass-lang.com/posts/1022316-announcing-dart-sass?utm_source=frontendfocus&utm_medium=email) news
It’s fast, and compatible with JavaScript, naturally.
Sass
[CSS 'position: sticky' To Be Enabled by Default in Chrome 56](https://www.chromestatus.com/feature/6190250464378880?utm_source=frontendfocus&utm_medium=email) news
Chrome Platform Status
[CSS Round Display Specifications](https://01.org/chromium/blogs/joone/2016/css-round-display-specifications?utm_source=frontendfocus&utm_medium=email) news
A look at support for round displays in CSS and how to use the features in Crosswalk.
Joone Hur
[Download 'Intelligent Caching' from O'Reilly Media](https://vault.stackpath.com/download-intelligent-caching?utm_source=coopermedia-fef&utm_campaign=oreilly-intelligent-caching&utm_medium=email)
Use 'Intelligent Caching' as a resource & guide for optimizing performance on your site or app. Download now.
StackPathSponsor
[Rendering the Mandelbrot Set with WebGL](http://gpfault.net/posts/mandelbrot-webgl.txt.html?utm_source=frontendfocus&utm_medium=email) tutorial
nicebyte
[Generating Sounds Programmatically in the Browser with JavaScript](http://marcgg.com/blog/2016/11/01/javascript-audio/?utm_source=frontendfocus&utm_medium=email) tutorial
Marc G Gauthier
[Get Started on the CSS of the Future with PostCSS-cssnext](https://www.sitepoint.com/future-css-with-postcss-cssnext/?utm_source=frontendfocus&utm_medium=email) tutorial
Sitepoint
[Capturing an Image from the User via the Browser](https://developers.google.com/web/fundamentals/native-hardware/capturing-images/?utm_source=frontendfocus&utm_medium=email) tutorial
Paul Kinlan
[The State of Responsive 3D Shapes](https://css-tricks.com/state-responsive-3d-shapes/?utm_source=frontendfocus&utm_medium=email) tutorial
An incredibly thorough guide.
Ana Tudor
[Building a responsive HTML5 app? Learn the must-know techniques in this whitepaper](http://www.telerik.com/campaigns/kendo-ui/responsive-must-know-techniques?utm_medium=newsletter&utm_source=frontendfocus&utm_campaign=dt-kendo-responsive-wp-oct15)
If you're a HTML5/JS dev, responsive web design is or will be a requirement in the near future. This whitepaper will give you the must-know on responsive web.
ProgressSponsor
[WebVR: Developing for the Immersive Web](http://www.slideshare.net/auradeluxe/webvr-developing-for-the-immersive-web?utm_source=frontendfocus&utm_medium=email) slidedeck
Tony Parisi
[A Look at the Chinese Language and Typography on the Web](https://www.chenhuijing.com/blog/chinese-web-typography/?utm_source=frontendfocus&utm_medium=email) story
A thorough look into how Chinese typography is displayed on the web.
Chen Hui Jing
[Custom Elements: An Ecosystem Still Being Worked Out](https://paul.kinlan.me/custom-elements-ecosystem/?utm_source=frontendfocus&utm_medium=email) opinion
Paul Kinlan
[Web Fonts, Boy, I Don't Know](http://meowni.ca/posts/web-fonts/?utm_source=frontendfocus&utm_medium=email) opinion
_“Web fonts are okay”_, but Monica proclaims it’s your _“responsibility to make your site load super fast”_ when using them.
Monica Dinculescu
[Rethinking Responsive Design](https://medium.com/@unakravets/rethinking-responsive-d557ef1745bd?utm_source=frontendfocus&utm_medium=email) opinion
_”..the future of the web exists beyond screens.”_
Una Kravets
[Why I Won’t Be Using the Fetch API in My Apps](https://medium.com/@shahata/why-i-wont-be-using-fetch-api-in-my-apps-6900e6c6fe78?utm_source=frontendfocus&utm_medium=email) opinion
Shahar Talmi
[CSS Architecture for Design Systems](http://bradfrost.com/blog/post/css-architecture-for-design-systems/?utm_source=frontendfocus&utm_medium=email) opinion
Brad Frost
[Tool to Produce Gradient Fallbacks for An Image That Resembles The Original](https://github.com/ben-eb/postcss-resemble-image?utm_source=frontendfocus&utm_medium=email) tools
Inspired by [Harry Roberts’ article](http://csswizardry.com/2016/10/improving-perceived-performance-with-multiple-background-images/).
Ben Briggs
[ChaosSocket: A WebSocket Mocking Interface](https://github.com/zzarcon/chaosocket?utm_source=frontendfocus&utm_medium=email) code
Hector Zarco
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/265)
Cooper Press Ltd. Office 30, Lincoln Way, Louth, LN11 0LS, UK