Frontend Focus
Issue 233 — March 30, 2016
Houdini is a new W3C task force with plans to introduce a new set of APIs that will give developers the power to extend CSS itself, and the tools to hook into the styling and layout process of a browser’s rendering engine.
Philip Walton

The CSS Grid Layout Module is still in Editor’s Draft but is now nearing finalisation. Here’s a look at recreating the old ‘Holy Grail’ layout using it.
Ire Aderinokun

“There is no single solution to make any traditional HTML ‘table’ appropriately responsive.” But this post looks at alternatives, like Flexbox, tabs, and accordions.
Davide Rizzo

You build features fast. We'll clean up your tech debt (and have fun doing it!)
corgibytes   Sponsor

Significant new releases of Safari for OS X and iOS came out last week - this is a quick roundup of the new features, including ‘picture’ element support.
Jon Davis

Georgie Luhur looks at best practices for commenting HTML and CSS, and why well structured comments can make all the difference.
Georgie Luhur

“I’ve been lobbying the W3C [..] to take measures to protect security researchers (and the users they help) from their own bad decision to standardize DRM as part of HTML5.”
Cory Doctorow

A 26 minute talk explaining CSS Grid Layout, Flexbox and the Box Alignment module and how they work together as a new system for CSS Layout.
Rachel Andrew

Jobs Supported by

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

In Brief

Battery Status API Proposed Recommendation Published news
Defines a means for web developers to programmatically determine the battery status of the hosting device.

Methods for Web Content Analysis and Context Detection news
A paper aiming to understand what parts of Web pages are actually content so that data use can be limited to downloading the relevant content for the end user.
Mozilla Hacks

Need HTML5 Ads? Adobe Animate CC to the Rescue news
A whitepaper from Adobe on HTML5 ad creation in Animate CC.

NPR Has A New HTML5 Audio Player That Kills The Popup (and Flash) news
Nieman Lab

Brief Notes on the WebVR 1.0 API Draft Proposal news
Elio Qoshi

CSS Typography: Kerning, Ligatures, Swashes & Small-Caps tutorial
How to embed your web fonts with all of your favorite font features and use them with CSS.
Megan Zlock

How to Work with SVG Icons on the Web tutorial
Well presented tutorial and insights.
Florens Verschelde

Using CSS Variables in WebKit tutorial

What's The Deal with Declaring Font Properties on @font-face? tutorial
Geoff Graham

Building A VR Experience With Mozilla's A-Frame story
Christopher Waite

The Legend of Canvas video
An introduction to HTML5 Canvas via a Legend of Zelda clone.
Rich McLaughlin

Time for Flexbox First opinion
We’ve seen ‘mobile-first’, now Calvin suggests that it’s time for ‘Flexbox First’.
Calvin Spealman

HTML5 vs Native Apps: What's Best for 2016? opinion
Taking a look at HTML5 vs Native App solutions and determining the best solutions.
Jack Calder

Progressive Web Apps opinion
Thoughts on the the state of mobile, web and desktop in 2016 and the future of progressive web apps.
Benjamin Farrell

Using PX, EM or REM for Media Queries? opinion
The answer, according to this test, is to use em.
Zell Liew

Why I Don’t Use CSS Preprocessors opinion
Roger Johansson

The Chrome Distortion: How Chrome Negatively Alters Our Expectations opinion
Has Chrome taught us to idealize features for so long that we’ve become blind to its many glaring faults?
Chris Thoburn

State of Affairs: Bootstrap 4 Vs Foundation 6.2 opinion
A comparison of Bootstrap 4 and Foundation 6, the latest versions of the most widely used CSS frameworks out there.
Danny Herran

Colofilter.css: Colorful CSS Blend Filters, Inspired by Spotify code
Luky Vj

HTML5 Game: Lumberjack Jacques & The Ritual of Doom demo
An HTML5 adventure built with game maker tool Superpowers. Created by Sparklin Labs in just 48 hours.
Sparklin Labs

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  Sponsor