Frontend Focus
Issue 208 — September 30, 2015
A well written and thorough tutorial that goes from doing illustrative work in Adobe Illustrator through to exporting to SVG and writing code to make the lamp ‘work’.
Chris Gannon

Open source UI components and a visual style guide to create consistency and beautiful user experiences across U.S. federal government websites. They recommend using Sass, Bourbon and Neat throughout.
US Digital Service

With just 5 elements (aside, footer, header, main and nav) you can provide the understanding and navigation benefits of content organisation to users who would otherwise not be able to perceive it from visual cues alone.
Steve Faulkner

Easy SMTP integration and a simple, RESTful API abstracts away the messy details of sending transactional or bulk email. Scale quickly, whether you need to send 10 or 10 million emails. Start sending email now with Mailgun
Mailgun   Sponsor

“You should learn what [PostCSS] is and how to use it ASAP,” says Kezz Bracey. PostCSS is a tool that transforms CSS via JavaScript plugins and offers a lot of interesting functionality.
Kezz Bracey

BBC iPlayer is one the most heavily used video on demand services in the world and they’re using the new open MPEG-DASH standard and Media Source Extensions to stream video to an HTML5 video player.
BBC - James East

A CSS3 filter trick where you invert the colors and set opacity to 50%.
Franklin Ta

“Using a new specification called Subresource Integrity, a website can include JavaScript that will stop working if it has been modified.”
Mozilla Hacks

Jobs Supported by

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

In Brief

Accessibility: Towards an Inclusive Web with Edge and Windows 10 news
Microsoft Edge Dev Blog

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

A Look at Firefox 41's Improvements for Developers news tools
Mozilla Hacks

World’s First Conference Calls Between Chrome, Firefox, and Edge news
Notes on continued developments of cross-browser WebRTC interoperability.
Peter Saint-Andre

6 Use Cases For CSS's calc() tutorial
Vincent Pickering

CSS Stacking Contexts: What They Are and How They Work tutorial
Tiffany B Brown

Modern Web Layout with Flexbox tutorial
Webdesigner Depot

How To Do Knockout Text on the Web tutorial
Chris Coyier

My Current HTML Email Development Workflow tutorial
Massimo Cassandro

Exploring the 'crossorigin' Media Attribute in HTML5 tutorial
Schalk Neethling

Easier HTML Refactors Through Better Selectors opinion
Daniel O'Connor

What I Learned While Publishing An HTML5 Mobile App opinion
Thomas Hunter II

Ad Blocking and the Future of the Web opinion
“Your site may soon be collateral damage in a war between Silicon Valley superpowers.” (i.e. Google and Apple)
Jeffrey Zeldman

Bootstrap Form Builder + Processing tools
Easily create beautiful HTML forms styled with Bootstrap. Let our server validate and email the submissions.
Formden  Sponsor

Visual Studio Emulators: Debug WebGL and HTML5 Mobile Experiences tools

The Encrypted Media Extensions (EME) Logger Extension tools
A Chrome extension that logs EME events and calls to the DevTools console along with debugging information.
Sam Dutton

HTML5 Background Videos: Stock HTML5 Background Video tools video
BG Stock

animate.css: A Cross-Browser Library of CSS Animations code
Daniel Eden

Sheets of Paper: Emulating Sheets of Paper in Web Documents code
Before you get too excited, it’s mostly about the overall look and size - no effects.

postcss-write-svg: Write SVGs Directly in CSS code
Jonathan Neal

Family Guy's Brian Griffin in Pure CSS demo