Frontend Focus
Issue 202 — August 19, 2015
Getting your head around what ‘microtasks’ are and how browsers queue execution of tasks and microtasks in its event loops is essential if you’re doing performance work or debugging code heavy on timeouts, events, and promises. You will feel smarter after reading this.
Jake Archibald

A ty­po­graphic pre-proces­sor for your html which uses no client-side JavaScript (it’s a Node script) and gives hanging punctuation, small-caps conversion, punctuation substitution, and more.
David Merfield

“The Interactive Advertising Bureau (IAB) has revamped its display creative guidelines to ‘fully embrace’ HTML5.” Adobe supports the move.
The Drum

Transactional HTML emails often get neglected but they're important for growing and maintaining a healthy user base. To help you, we have open-sourced a collection of common templates for transactional email to download for free. Tables, inline CSS, unsupported CSS, desktop clients, web clients, mobile clients, various devices, various providers - all thought about and tested. Download now.
Mailgun   Sponsor

“The future of web layout is bright, thanks to flexbox,” says Ben Gremillion before presenting a short, easily understood primer.
Smashing Magazine

New Edge features in development include support for the ‘download’ attribute on links, time and datetime-local input types, picture elements, template elements, Pointer Lock support and more.

A look at WebKit’s work on CSS pseudo classes that take other selectors as arguments. For example, a:not(.internal) would match A elements that are not of the ‘internal’ class.
Surfin' Safari

Service Workers require HTTPS, but how can you do this in your local development environment? Andrea shows us the way.
Andrea Giammarchi

Inlining ‘critical’ CSS (that is, CSS that’s needed right away and helps pages render faster) into the head of an HTML document can provide a real speed boost, but how can it be done effectively? Dean Hume explains.
Smashing Magazine

Jobs Supported by

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

In Brief

Official Microsoft Edge VMs Now Available news tools
Microsoft has made available VMs running their Edge browser.

Give back to the developer community-apply to teach today. news
Actively seeking web developers to join our tight knit family of passionate teachers and earn royalties.
Pluralsight  Sponsor

XQuery 3.1 Requirements and Use Cases news

Building A Circular Navigation Menu with CSS Clip Paths tutorial
A very thorough tutorial from one of my favorite writers in the Web design space right now.
Sara Soueidan

Making Charts with CSS tutorial
A look at plain CSS methods for styling data.
Robin Rendle

Eliminating Roundtrips with Preconnect 
Subscribe to our WebOps Weekly newsletter if performance stuff like this is important to you.
Ilya Grigorik

Techniques and Treatments for Background Retina Images tutorial
Dudley Storey

A 'Scribble' Image Reveal with SVG and Blend Modes tutorial code
Dudley Storey

Understanding CSS: Selector Specificity tutorial
Daniel Eden

How Floating Works tutorial
If you need to refresh your knowledge of how floating elements work, this is a great place to start.
Ire Aderinokun

Designing Web Interfaces For Kids tutorial
A lot of good points to think about here for all users IMHO.
Smashing Magazine

Character Model for the World Wide Web: String Matching and Searching 
Aims to provide authors of specs, developers, and content produces a reference on string identity matching on the Web to improve interoperability.

From Russia With Love: Behind The Responsive Redesign of opinion
Smashing Magazine

Solutions for Banner Ads in the Post-Flash World opinion
Greensock suggests their own tools, of course, but there are some good insights here.

Flying Drones in Your Browser video
Jan Jongboom on the Physical Web and the WebBluetooth API.

20 New HTML5 Tools for Your Arsenal tools
Yes, a list post, but I always find a few things I didn’t know about before.
Code Geekz

The new .NET MISSION: IMPOSSIBLE – ‘Situation Critical’ tools
Find out why ANTS Performance Profiler is the ultimate .NET profiler in a new online adventure. Read it now.
Red Gate Software  Sponsor

Pure CSS Progress: 3D Effect Progress Bars code demo

Peaks.js: Audio Waveform Rendering in The Browser code
Presented via an article that goes into the research and techniques behind its development.