Frontend Focus
Issue 223 — January 20, 2016
Ian Devlin documents the various implementation quirks and issues of the ‘date’ input type on mobile and desktop browsers.
HTML5 Doctor

A great grab-bag of things you can do with CSS along with brief code snippets. Things like gradient borders, counters, and z-index transitions.
Ilya Pestov

Tidy is not a new tool but it had fallen into a non-maintained state. A group has now reinvigorated the project and is making it ideal for working with the latest HTML.

Imgix is a real-time image processing service and CDN. Our new libraries enable you to implement lightboxes and zoom viewers without having to create multiple copies of the image, while also delivering it at high quality and speed, to every device or browser.
Imgix   Sponsor

A designer at Shopify looks at how the flexible box model (Flexbox) can be used to create flexible layouts that work across devices. All major browsers now support it.
Levin Mejia

A W3C First Public Working Draft of a spec covering a mechanism through which sites can ask to be notified when other sites link to them. is a service aiming to help make it easier to implement.

If you’ve cobbled together your knowledge of CSS piecemeal over the years, as I have, this could be a handy refresher of the main concepts.

Client Hints is an initiative spearheaded by Google already available in Chrome and Opera that lets you reduce both image sizes and the verbosity of responsive image markup.
Smashing Magazine

Built vertical timelines and mix content into the line or to the left or right of it. There are static and dynamic demos to get the idea.

Patrick Catanzariti notes that ‘vendor prefixes are fading away as browser teams look for better solutions.’ The Chrome team intend to keep features behind their ‘experimental web platform features’ flag until they’re ready for primetime.

Christian Heilmann implores us to write defensive code and check for capabilities in browsers rather than break at the first sign of an unfamiliar environment.
Christian Heilmann

Jobs Supported by

  • Get 10 offers from top tech companies in one week.Indeed Prime is an elite new program from that presents in-demand tech talent like you to top employers. Indeed Prime opens the door to exciting career opportunities with one simple application. Join today. Indeed

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

In Brief

10 Years of Web Inspector news
A great timeline covering a decade of WebKit’s main developer tool.

Microsoft Edge Web Summit - San Francisco, April 4th news
Free registration opens soon.

An HTML5 Player for VR 360° Video - The Next Big Thing? news tools

We'll take you from beginner to employed engineer, guaranteed course
Sign up to start learning everything from HTML to Angular. We guarantee you a job after graduation or your money back.
Thinkful  Sponsor

How Not To Misuse ARIA States, Properties and Roles tutorial
“ARIA should not be added to HTML content that already has the desired implied semantics.”
Jonathan Avila

How I Shrank My CSS by 84kb by Refactoring with ITCSS tutorial
Jordan Koschei

Creating a WebGL Game with Unity 5 and 'JavaScript' tutorial
Well, UnityScript really, but it’s very similar.
Michaela Lehr

Optimizing SVGs for Web Use tutorial
Andreas Larsen

The Benefits of Inheritance via @Extend in Sass tutorial
David Nguyen

The Axis of Flexbox video
Learn about the axes of Flexbox, which are different than the traditional top to bottom, left to right axes.
Guy Routledge

Influencing Web Layouts with Print Layouts opinion
Chris Coyier

The Current State of Web Security, An Interview with Anselm Hannemann opinion
Robin Rendle

Why I Left Gulp and Grunt for npm Scripts opinion
Cory House

CSS Gradient Animator tools
This simple online tools produces an interesting background effect.
Ian Forrest

Flag-Colors: A 600 Color Collection tools
Select colors on the page or in Sass, Less, or Stylus. Brand-Colors is similar but using popular brands’ logos.

vivus.js: Animate SVGs as If They're Being Drawn code

Animate Plus: CSS and SVG Animation Library code
Benjamin De Cock

voxel.css: 3D Pixel Rendering with CSS code
Makes it easy to render Minecraft-esque pixellated block layouts in the browser using 3D CSS.
Hunter John Larco

tweezer.js: Small, Dependency-free, ES6 Library for Smooth Animations code
Jackson Geller

Pure CSS Apple Keyboard code demo

Alex The CSS Husky code demo
A clever bit of CSS and SVG-only animation here.

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