Frontend Focus
Issue 289 — May 10, 2017
Based on D3.js v4 and built around reusable components, Britecharts makes it easy to declaratively build charts and visualizations, such as this. There’s lots of info in this introductory post too.
Eventbrite

The latest version of the Media Query spec brings extra features to media queries, as thoroughly demonstrated here.
Andrés Galante

ES6/ES2015 modules are now natively supported in Chrome Canary behind the Experimental Web Platform flag. Here’s the basics of how they work.
Sam Thorogood

Jpeg.io
Jpeg.io is a free online service for rapidly converting your images into highly optimized JPEGs using proprietery JPEG optimization algorithms. Optimize all your images in one go and greatly speed-up your websites and applications.
Jpeg.io   Sponsor

A look at the state of web standards for each of the core PhoneGap/Cordova plugins to see if the mobile web has caught up in 2017.
Raymond Camden

Mozilla is revamping Firefox’s engine. Potch is blogging about the process, starting with what actually makes up a browser engine.
Mozilla Hacks

4 years ago this month Opera shipped its first browser built around Chromium. Today’s next step is to a browser with a snazzy new UI and integrated instant messaging.
Opera

The Web Animations API provides a way for developers to directly manipulate the browser’s animation engine using JavaScript.
Ire Aderinokun

Jobs Supported by Hired.com

Can't find the right job? Want companies to apply to you? Try Hired.com.

In Brief

Webpack Announces New Webpack CLI news
Even Stensberg

Chrome Improves Extension Security with Out-of-Process IFrames news
Extension-hosted iframes are now run out of process so they can’t access extension APIs.
Google

The Maximum (Safe) Font Size for Emoji is 54px news
Larger sizes work but Chrome on Android fails at 55px or above.
Tobi Reif

Track web app performance in real time 
Graph custom & turn-key metrics from 150+ technologies, alert, and collaborate — all in one place. 14-day free trial.
Datadog  Sponsor

CSS 'Poly Fluid' Sizing using Calc(), 'vw', Breakpoints and Linear Equations tutorial
Jake Wilson

Guidelines to Avoid Google's Penalty on Intrusive Interstitials tutorial
Myriam Jessier

Easing Linear CSS Gradients tutorial
A thorough look at making gradients smoother and more pleasant to look at.
Andreas Larsen

Google's Online Progressive Web App Development Course tutorial
A new course from Google on how to convert existing sites to PWAs.
Google Developers

The :focus-within Pseudo Class tutorial
Ian Devlin

Managing State in CSS with Reusable JavaScript Functions tutorial
Luke Harrison

Building Animated SVG Banners tutorial
Todd Gardner

Methods for Contrasting Text Against Backgrounds tutorial
Ana Tudor

Can I Use CSS Box Alignment? tutorial
Javier Fernández

Service Workers Practically video
A 25 minute introductory talk on service workers, and why and how to use them.
Anna Doubková

Why IT Consulting and Developer Services Companies Love Compose opinion
Software firms and app developers love using Compose to manage data for their clients – find out why.
Compose  Sponsor

The Different Logical Ways to Group CSS Properties opinion
Chris Coyier

10 jQuery-Powered HTML5 Audio Players tools
Michael Wanyoike

Obnoxious.css: Ultra Annoying CSS Animations code
Tim Holman

A Collection of Striking Text Effects on CodePen demo
Lots of things to learn from and be inspired by here.
Mandy Michael