Frontend Focus
Issue 261 — October 12, 2016
This study looks at HTML usage data from 8M pages gathered from top Google results (for about 30M keywords, chosen by volume). An example: The average web page uses twenty-five different element types.
Advanced Web Ranking

A look at HTML5 input elements, how each browser interprets them and what the best strategy is for using them in your web projects.
Tim Severien

The transcript of a chat with web and mobile dev experts discussing whether the jQuery project is still useful for modern web development.
Telerik Developer Network

Red Gate
SQL Compare is the industry standard for comparing and deploying SQL Server database schemas quickly and accurately. Find out why 71% of the Fortune 100 use it to create error-free deployment scripts with a free trial.
Red Gate   Sponsor

An overview of how CSS Feature Queries can be used to detect support for specific features on different browsers.
Abbey Fitzgerald

JavaScript is great, yet you can build so many functional UI components without it. Here’s a number of typical web components built with HTML and CSS/SCSS.
Una Kravets

A practical exploration of the native Web accessibility landscape with expert Estelle Weyl.
Estelle Weyl

The benefits of inline form validation are numerous when implemented correctly but many sites don’t use it or do it poorly. Lots of tips here.
Christian Holst

Jobs Supported by

  • Senior Front End EngineerEveryone should have the power to create professional-quality videos. As a member of the Animoto team, you'll be developing a responsive, elegant web experience and pioneering the next generation of video creation software. Animoto
  • Front End Developer at GeckoboardGeckoboard is a successful and growing 30-person startup based in East London looking for curious and creative problem solvers to help create beautiful UIs with React and ES6. Geckoboard
  • Don't Get Frustrated - Get HiredSick of pushy recruiters, and dead end interviews? Try Hired to hear from top tier companies, and only talk to relevant companies. Hired

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

In Brief

AMP Is One Year Old and Growing Fast news
Greg Sterling

Blink Intent to Implement: The 'system-ui' Generic Font Family news
This new generic font family allows a standardized way to use the system font, on all platforms Blink supports.

Is WebVR Ready? The Current State of WebVR Browser Support news
Mozilla VR Team

Join Google for Polymer Summit 2016 via Livestream on 17-18 October rawurl news
Two days of talks on Polymer, Web Components, Progressive Web Apps, and the future of the mobile web.
Google Inc.

Latest WebKit Build Supports JavaScript Internationalization API news

Why Nexedi is Suing Apple for Better HTML5 Support in iOS news

Chrome Dev Summit 2016 news
Chrome Dev Summit 2016 will take place in San Francisco, CA on Nov 10-11. Join Chrome VP Darin Fisher for two days of announcements and talks from the Chrome team. Register with code FRONTENDFOCUS.
Google Inc.  Sponsor

Building a Maintainable and Scalable CSS Codebase with ITCSS tutorial
Oliver Thomas Klein

Styling Underlines on the Web tutorial
Styling the underlines that sit beneath links can be trickier than you’d think — this post aims to get you up to speed on your options.
John Jameson

Responsive Images 201: Client Hints tutorial
Client Hints can make the day-to-day task of creating responsive images easier by greatly simplifying the markup.
Jason Grigsby

Level up your Ember Skills with simplabs' workshops rawurl course
simplabs are offering Ember.JS workshops, ranging from 3 day Jumpstart events to advanced workshops which cover techniques like complex component architectures, FastBoot and Testing.
simplabs  Sponsor

You Might Not Need a CSS Framework video
Frameworks can come at a cost, paid in big CSS files and unused styles.
Belen Albeza

The Right Layout Tool for The Job video
Rachel Andrew takes a look at Flexbox, CSS Grid Layout and Box Alignment through a lens of performance.

Your Body Text Is Too Small opinion
Why website body text should be bigger, and ways to optimize it.
Christian Miller

Critical Style Snapshot: Capture CSS Used Above The Fold tools
Capture and copy CSS above the fold with one click.
Léon Smit

Hero Patterns: Repeatable SVG Background Patterns For Your Projects tools
Steve Schoger Web Service to Convert Any Image into a Highly Optimized JPEG tools

Convert Any Font-Awesome Icons to SVG or IMG Assets code

A Tweet-Sized CSS Layout Debugger code
A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random CSS hex color.
Addy Osmani

Chnl: Connect Together Web Audio API Effects and Channels code
Maximilian Torggler