Frontend Focus
Issue 224 — January 27, 2016
With your permission, web sites can now send notifications to Firefox. They’re indistinguishable from native notifications, use Service Workers to operate, and there are a few demos at the bottom of
Mozilla Hacks

Using this online tool, developers can interactively analyze images to generate the optimal responsive image dimensions, as well as the HTML markup for using them. Smashing Magazine has an extensive write-up on how to use it productively.

Anne van Kesteren quickly reflects on how the work done on the HTML Standard is now more open than ever before.

Frontend Masters
Which courses on front-end, Node.js, the Web Platform, etc. would you like to see? Vote on the topics most important to you.
Frontend Masters   Sponsor

Google’s Jake Archibald is excited about the potential of the still under development streams API to improve Web responsiveness. It’s complicated though so you might wanna grab a coffee.
Jake Archibald

A not-quite-book-length set of chapters walking through every major concept in CSS layout, with dozens of applied examples to illustrate them.
Mikito Takada

Firefox has joined Chrome in implementing the Web Speech API which makes speech recognition and synthesis possible in the browser. Here’s a look at how it works.
Mozilla Hacks

Inspired by Highway Gothic and sponsored by Red Hat.
Delve Fonts

Jobs Supported by

  • Senior Frontend Developer at bonifyMake a dent in the Fintech universe. How? Join our vibrant international team and be responsible for a unique user experience. See what we can offer you. bonify
  • Get 10 offers from top tech companies in one week.Indeed Prime is an elite new program from that presents in-demand tech talent like you to top employers. Indeed Prime opens the door to exciting career opportunities with one simple application. Join today. Indeed

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

In Brief

Coming to Chrome: Dynamically Inserted StyleSheets Will Not Block Loading news

The State of Hidden Content Support in 2016 news
Steve Faulkner

How to Create an Animated SVG Banner with Greensock tutorial
Sara Soueidan

Using Modern CSS to Build a Responsive Image Grid tutorial
A look at a technique to take control of the distance between grid columns.
George Martsoukos

WebGL Off the Main Thread in Firefox 44 tutorial
You can now use WebGL in Web Workers as the new OffscreenCanvas API lets you create a WebGL context off the main thread.
Mozilla Hacks

Revisiting The Float Label Pattern with CSS tutorial
Emil Björklund

CSS Font Features in WebKit tutorial
A quick look at font-variant-numeric, font-variant-caps, font-variant-numeric and similar properties for enabling advanced text styles and effects.

Everything I Know About Responsive Web Typography with CSS tutorial
Zell Liew

How Clean Is Your Code? tools
Get an in-depth review with prioritized suggestions from Corgibytes.
Corgibytes  Sponsor

The (Unofficial) CanIUse Embed tools
Embed up-to-date data from
Ire Aderinokun

10 Best jQuery and HTML5 WYSIWYG Plugins tools
Sure, it’s a list post, but I didn’t know about a few of these.

Bulma: A Flexbox-based CSS Framework code
Looks pretty smooth. Responsive, flexbox based, auto-sizing columns, navbars whose content will stay vertically aligned..
Jeremy Thomas

Hint.css: A Pure CSS Tooltip Library code
Supports different positions, color settings, rounded corners - looks good.
Kushagra Gour

Milligram: A Minimalist CSS Framework code
C J Patoilo

DateDropped: A Date Input Field jQuery Plugin code
Felice Gattuso

In-depth performance metrics for AngularJS tools
Get a breakdown of the digest cycle including AJAX, templating, services & cache calls. See how each controller spends its time and what’s slowing your app in production. Join the private beta
Opbeat  Sponsor