Frontend Focus
Issue 265 — November 9, 2016
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

Zell sets outs to prep you with the knowledge needed to build a custom-made grid in this tutorial.
Zell Liew

Handy insights and approaches for reaching the much desired 60fps for your site’s animations.
Anand Sharma

Frontend Masters
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 Masters   Sponsor

A large CodePen collection collated by Sarah Drasner featuring techniques that may prove useful in everyday front-end dev.
Sarah Drasner

Why you should be inlining your critical CSS, as well as how to do it using Grunt, npm modules and other tools.
Asha Laxmi

A library built on top of the W3C web component specs for writing functional and performant web components with a small footprint.
Trey Shugart

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

A collection of web browsers without a graphical user interface, controlled programmatically. Useful for automation, testing, and other purposes.
Asad Dhamani

Jobs Supported by

  • Want Multiple Job Offers? - Try HiredOn 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

In Brief

Google's Mobile-First Indexing Approach news
Google’s algorithms will eventually primarily use the mobile version of a site’s content.

Announcing Dart Sass: A Dart Implementation of the Sass CSS Pre-Processor news
It’s fast, and compatible with JavaScript, naturally.

CSS 'position: sticky' To Be Enabled by Default in Chrome 56 news
Chrome Platform Status

CSS Round Display Specifications 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 
Use 'Intelligent Caching' as a resource & guide for optimizing performance on your site or app. Download now.
StackPath  Sponsor

Rendering the Mandelbrot Set with WebGL tutorial

Generating Sounds Programmatically in the Browser with JavaScript tutorial
Marc G Gauthier

Get Started on the CSS of the Future with PostCSS-cssnext tutorial

Capturing an Image from the User via the Browser tutorial
Paul Kinlan

The State of Responsive 3D Shapes tutorial
An incredibly thorough guide.
Ana Tudor

Building a responsive HTML5 app? Learn the must-know techniques in this whitepaper 
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.
Progress  Sponsor

WebVR: Developing for the Immersive Web slidedeck
Tony Parisi

A Look at the Chinese Language and Typography on the Web story
A thorough look into how Chinese typography is displayed on the web.
Chen Hui Jing

Custom Elements: An Ecosystem Still Being Worked Out opinion
Paul Kinlan

Web Fonts, Boy, I Don't Know 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 opinion
”..the future of the web exists beyond screens.”
Una Kravets

Why I Won’t Be Using the Fetch API in My Apps opinion
Shahar Talmi

CSS Architecture for Design Systems opinion
Brad Frost

Tool to Produce Gradient Fallbacks for An Image That Resembles The Original tools
Inspired by Harry Roberts’ article.
Ben Briggs

ChaosSocket: A WebSocket Mocking Interface code
Hector Zarco