Frontend Focus
Issue 230 — March 9, 2016

This week I'm on site at O'Reilly Fluent in San Francisco, so if you're here, come say hi in the Community Lounge. I can give you some of our entirely-for-fun HTML6 (no, HTML6 isn't real) and CSS4 (ditto) stickers to future proof your laptop :-)
- Peter Cooper, Editor

A succinct look at creating a Chrome extension that uses the Web Speech API to read out content upon the user’s request.
Ivan Dimov

A look at the potential for communicating with Bluetooth Low Energy (BLE) devices from the Web browser. It’s a pretty elegant, promise-based API.
Shwetank Dixit

Uses special data- attributes for its settings, but has no reliance upon JavaScript at all. The code is tidy and clever.
Claudio Holanda

With touch-first design, and full AngularJS support, Wijmo's FlexGrid and chart controls focus on top performance and zero dependencies. Wijmo's flexible API provides users an easy, enjoyable way to get what they need done. Build enterprise apps with Wijmo 5. Learn more.
Wijmo   Sponsor

A look at a tool, ZorroSVG, that can convert transparent PNG32 files into smaller SVGs (containing a JPEG and a alpha mask) that will work in modern browsers.

An introduction to the possibilities of visualizing audio manipulated with the Web Audio API using D3, the data visualization library.
William Ferguson

49 adds support for custom CSS properties. Service Workers become more powerful with the ability to reliably send data with background sync. And the ‘save-data’ client hint header lets you deliver faster pages to users who want them.

I think you need to be careful where you use multi-column layouts for text, but this is an introduction to doing it in most modern browsers.

A raft of new internet accessibility work by Microsoft will make the web user-experience for people with disabilities far smoother and more sophisticated.

Cosima Mielke takes a quick look at a variety of ways to improve your Web typography and improve your readers’ reading experience.
Smashing Magazine

Jobs Supported by

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

In Brief

WebAssembly May Go Live in Browsers This Year news

CSS Grid Layout in Blink: Current Status and Future Plans news

BugRex: Fix HTML, CSS and JS Bugs with Live Chat news
Begun live as a paid idea, but is now free/volunteer.

Last chance to join our March UI/UX courses, launching this Friday! rawurl course
Learn UI UX design through part-time, online courses with 1-on-1 mentorship from expert designers.
Designlab  Sponsor

10 Things to Need to Know About CSS tutorial
Dmitry Sheiko

Make Right Click on a Logo Show Logo Download Options tutorial
A clever and helpful UX trick.
Chris Coyier

Fixing the font-weight Problem on Hover States tutorial
Two solutions to font-weight changes causing undesirable text shifts.
George Martsoukos

CSS-Only Responsive Tables tutorial
David Bushell

Building A Real-Time Retrospective Board With Video Chat tutorial
Uses WebRTC, Node and a little jQuery.
Smashing Magazine

Responsive Typographic Headlines with CSS and JS tutorial
A brief look at a variety of techniques and libraries for creating responsive headlines on your pages.

Trellisheets: How We Spin Up CSS for Trello Sites with Ease opinion

Bixa Color: The First Chromatic Font for The Web tools
The OpenType standard added support for colored glyphs. Only Firefox supports it for now.
Novo Typo

Font Famous: A Free Vector Logo Font for Showing Off Press Mentions tools
Includes logos for the New York Times, Product Hunt, CNN, and more.
Anthony David Adams

CSS Style Guide Usage Auditing Tool tools
Audit the CSS on a page to see what elements are using styles from the style guide and which styles are overriding them
Steven Lambert

CSS Gradient Generator Tool tools
Stefano Merlo

LightSwitch: Lightweight HTML5 Single-Page Site using jQuery Templating to Switch Content code
Kate Klemp

A11y Toggle: For Building Accessible Content Toggling/Toggles code

Discover 52 tips to improve your .NET performance rawurl
Our new eBook features dozens of tips and tricks to boost your .NET performance. Download your free copy.
Red Gate Software  Sponsor

Exoplanets Visualization with WebGL demo