Frontend Focus
Issue 236 — April 20, 2016
Some interactive examples showing practical ways to use Flexbox to build UI components for your own site, along with code you can use.
CJ Cenizal

Facebook introduced JSX, in which HTML markup is mixed in with JavaScript. What about if we did the same with CSS? Here's a thorough look at one option.
Krasimir Tsonev

Use these font load­ing pat­terns and Web font loading will become a lot simpler. Com­bine the pat­terns to cre­ate cus­tom load­ing be­hav­iour for all browsers.
Bram Stein

Full Stack Fest
A week-long full stack development conference with a focus on solving current problems with new & inspiring perspectives. Our Call For Papers is open with 16 speaker slots. Submit your talk before the 14th of May and join us in Barcelona!
Full Stack Fest   Sponsor

A look at some of the new features in Edge’s ‘F12’ developer tools and how they can make your life as a developer easier with a practical look at fixing real world issues with them.
Andy Sterland

“Can we replace Application Cache with Service Workers? Yes we can. In the same way we can replace your old CRT TV with a Microsoft Hololens.”
Maximiliano Firtman

Billed as ‘an experiment in sharing background across multiple elements using CSS’, the creator takes a fun approach to explaining how it works.
Denis Lukov

It takes screenshots of components on Web pages under different situations (branches, pages, etc.) and visually diffs them.
Argus Eyes

Reflections on the progress of MSFT's “first new browser in 20 years”: Edge.
Channel 9

Jobs Supported by Hired.com

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

In Brief

New in Chrome 50: Payload in Push, Preload Assets & More news video
YouTube

Preview Plugin-Free Skype Video Calling in Microsoft Edge news
Powered by the ORTC API.
Kyle Pflug

WebM, VP9 and Opus Support in Microsoft Edge news
The WebM container format and the VP9 video and Opus audio codecs are supported in the latest Edge.
Microsoft Edge Team

WebUSB: Enabling Support for Web Access to USB Devices news
The Chrome team are experimenting with allowing webapps to access USB devices.
Google Groups

Building The UI for The New 'The Times' Site news
Pedro Duarte

Free Webinar - How to Launch A Career In Software Development rawurl course
Learn what it takes to become a professional software developer, what employers are looking for, and how to make the transformation.
Launch School  Sponsor

Embedding Virtual Reality Across The Web with VR Views tutorial
How to use Google’s new VR Views to embed VR content on your website.
Patrick Catanzariti

Webpack — The Confusing Parts tutorial
Raja Rao

Better CSS Drop Caps with 'initial-letter' tutorial
Ian Yates

An In-Depth Typi Tutorial (a Sass Mixin for Easier Responsive Typography) tutorial
Zell Liew

Data Types in Sass tutorial
Gajendar Singh

The SaveAs Webinar: Exporting Content from JavaScript Apps rawurl tutorial
Implementing export functionality in your web apps presents a multitude of challenges. Learn how to tackle them.
Telerik Kendo UI  Sponsor

Building Extensions for Microsoft Edge video
Channel 9

How We Use BEM to Modularize Our CSS opinion
A look at the ‘Block Element Modifier’ approach that provides a methodical way to arrange CSS classes into independent components.
Andrei Popa

Spectre.css: A Lightweight and Responsive CSS Framework code
Includes a flexbox-based responsive grid system.
Yan Zhu

Bricklayer: A Lightweight, Cascading Grid Layout Library code
Adem ilter

Atrament.js: For Smooth Drawing and Handwriting on HTML Canvas code
Jakub Fiala

CSS Only iPhone 6 Mockup code
Håvard Brynjulfsen