---
title: "#289: Modern Media Queries - Key Features of Media Query Level 4"
publication: "Frontend Focus"
issue: 289
published_at: "2017-05-10"
canonical_url: "https://frontendfoc.us/issues/289"
---

#289: Modern Media Queries - Key Features of Media Query Level 4

[Read this e-mail on the Web](http://frontendfoc.us/issues/289)

Frontend FocusIssue 289 — May 10, 2017[Britecharts: A D3.js-Based Client-Side Charting Library](http://eventbrite.github.io/britecharts/?utm_source=frontendfocus&utm_medium=email)Based on D3.js v4 and built around reusable components, Britecharts makes it easy to declaratively build charts and visualizations, such as [this.](https://eventbrite.github.io/britecharts/tutorial-stacked-area.html) There’s lots of info in [this introductory post](https://www.eventbrite.com/engineering/introducing-britecharts/) too. Eventbrite 
[Modern Media Queries: Key Features of Media Query Level 4](https://css-tricks.com/mobile-small-portrait-slow-interlace-monochrome-coarse-non-hover-first/?utm_source=frontendfocus&utm_medium=email)The latest version of the [Media Query spec](https://www.w3.org/TR/mediaqueries-4/) brings extra features to media queries, as thoroughly demonstrated here. Andrés Galante 
[ES6 Module Support Now in Chrome Canary (M60+)](https://medium.com/dev-channel/es6-modules-in-chrome-canary-m60-ba588dfb8ab7?utm_source=frontendfocus&utm_medium=email)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\](https://copm.s3.amazonaws.com/817edd6c.png)](https://www.jpeg.io/?utm_source=newsletter&utm_medium=email&utm_campaign=frontendweekly-may2017)[Convert any major image format into a highly optimized JPEG](https://www.jpeg.io/?utm_source=newsletter&utm_medium=email&utm_campaign=frontendweekly-may2017)[Jpeg.io](https://www.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.ioSponsor
[Have Web Standards on Mobile Caught Up to PhoneGap in 2017?](http://developer.telerik.com/topics/mobile-development/have-web-standards-on-mobile-caught-up-to-phonegap-in-2017/?utm_source=frontendfocus&utm_medium=email)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 
[Quantum Up Close: What is a Browser Engine?](https://hacks.mozilla.org/2017/05/quantum-up-close-what-is-a-browser-engine/?utm_source=frontendfocus&utm_medium=email)Mozilla is revamping Firefox’s engine. Potch is blogging about the process, starting with what actually makes up a browser engine. Mozilla Hacks 
[Opera Reborn: A New Browser from Opera](http://blogs.opera.com/desktop/2017/05/opera-is-reborn/?utm_source=frontendfocus&utm_medium=email)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 
[CSS Animations vs the Web Animations API: A Case Study](https://bitsofco.de/css-animations-vs-the-web-animations-api/?utm_source=frontendfocus&utm_medium=email)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\](http://s3.cooperpress.com.s3.amazonaws.com/hired1.png)](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)

- [craigslist seeks JavaScript Developers (San Francisco, CA)](https://www.craigslist.org/about/craigslist_is_hiring?utm_source=frontendfocus&utm_medium=email)Web devs with JavaScript, CSS, and HTML experience wanted to design and ship new features, and see them loved (or hated) by millions. craigslist
- [Front End Developer](https://workingatbooking.com/vacancies/front-end-developer/?gh_src=2lkqrj1)Booking.com is looking for Front End Developers all around the globe to join us at our beautiful headquarters in Amsterdam. Booking.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

[Webpack Announces New Webpack CLI](https://medium.com/webpack/announcing-the-new-webpack-cli-75ce1d9b8663?utm_source=frontendfocus&utm_medium=email) news
Even Stensberg

[Chrome Improves Extension Security with Out-of-Process IFrames](https://blog.chromium.org/2017/05/improving-extension-security-with-out.html?utm_source=frontendfocus&utm_medium=email) 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](https://tobireif.com/posts/maximum_font_size_for_emoji/?utm_source=frontendfocus&utm_medium=email) news 
Larger sizes work but Chrome on Android fails at 55px or above.
Tobi Reif

[Track web app performance in real time](https://www.datadoghq.com/lpg/?utm_source=Advertisement&utm_medium=CooperPress&utm_campaign=CooperPress-FrontEndFocus) 
Graph custom & turn-key metrics from 150+ technologies, alert, and collaborate — all in one place. 14-day free trial.
DatadogSponsor

[CSS 'Poly Fluid' Sizing using Calc(), 'vw', Breakpoints and Linear Equations](https://medium.com/@jakobud/css-polyfluidsizing-using-calc-vw-breakpoints-and-linear-equations-8e15505d21ab?utm_source=frontendfocus&utm_medium=email) tutorial
Jake Wilson

[Guidelines to Avoid Google's Penalty on Intrusive Interstitials](https://www.smashingmagazine.com/2017/05/intrusive-interstitials-guidelines-avoid-google-penalty/?utm_source=frontendfocus&utm_medium=email) tutorial
Myriam Jessier

[Easing Linear CSS Gradients](https://css-tricks.com/easing-linear-gradients/?utm_source=frontendfocus&utm_medium=email) tutorial 
A thorough look at making gradients smoother and more pleasant to look at.
Andreas Larsen

[Google's Online Progressive Web App Development Course](https://developers.google.com/web/ilt/pwa/?utm_source=frontendfocus&utm_medium=email) tutorial 
A new course from Google on how to convert existing sites to PWAs.
Google Developers

[The :focus-within Pseudo Class](https://www.iandevlin.com/blog/2017/04/css/the-focus-within-pseudo-class?utm_source=frontendfocus&utm_medium=email) tutorial
Ian Devlin

[Managing State in CSS with Reusable JavaScript Functions](https://css-tricks.com/managing-state-css-reusable-javascript-functions/?utm_source=frontendfocus&utm_medium=email) tutorial
Luke Harrison

[Building Animated SVG Banners](https://davidwalsh.name/building-animated-svg-banners?utm_source=frontendfocus&utm_medium=email) tutorial
Todd Gardner

[Methods for Contrasting Text Against Backgrounds](https://css-tricks.com/methods-contrasting-text-backgrounds/?utm_source=frontendfocus&utm_medium=email) tutorial
Ana Tudor

[Can I Use CSS Box Alignment?](https://blogs.igalia.com/jfernandez/2017/05/03/can-i-use-css-box-alignment/?utm_source=frontendfocus&utm_medium=email) tutorial
Javier Fernández

[Service Workers Practically](https://pusher.com/sessions/meetup/front-end-london/service-workers-practically?utm_source=frontendfocus&utm_medium=email) 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](https://compose.com/articles/why-it-consulting-and-developer-services-companies-love-compose/?utm_source=cooper&utm_medium=newsletter&utm_content=frontend) opinion 
Software firms and app developers love using Compose to manage data for their clients – find out why.
ComposeSponsor

[The Different Logical Ways to Group CSS Properties](http://mediatemple.net/blog/tips/different-logical-ways-group-css-properties/?utm_source=frontendfocus&utm_medium=email) opinion
Chris Coyier

[10 jQuery-Powered HTML5 Audio Players](https://www.sitepoint.com/10-jquery-html5-audio-players/?utm_source=frontendfocus&utm_medium=email) tools
Michael Wanyoike

[Obnoxious.css: Ultra Annoying CSS Animations](http://tholman.com/obnoxious/?utm_source=frontendfocus&utm_medium=email) code
Tim Holman

[A Collection of Striking Text Effects on CodePen](http://codepen.io/collection/DamKJW/?utm_source=frontendfocus&utm_medium=email) demo 
Lots of things to learn from and be inspired by here.
Mandy Michael

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/289)

Cooper Press Ltd. Office 30, Lincoln Way, Louth, LN11 0LS, UK