Frontend Focus
Issue 263 — October 26, 2016
Powerful opinions on the importance of elegantly dealing with mobile web constraints, whether through aggressive build solutions, client-side technology or ‘tricks and illusions.’
Dion Almaer

A pure Node solution for testing webapps that handles browsers, running tests, and generating report. There’s great documentation too.
Developer Express Inc.

“If you have ever been on a long roadtrip, then you can understand CSS Flexbox.” This is a very interesting way to explain things.
Kevin Kononenko
Now’s the time to get up to speed with Angular 2. Rangle offers a FREE Angular 2 online training course for JavaScript developers. Register now to join the session on November 22-23.   Sponsor

Variables are one of the major reasons CSS preprocessors exist at all, but now ‘CSS variables’ are supported by most major browsers.
Chris Coyier

Every icon is getting remade from scratch, and with 36 days left to go, the campaign is far beyond its original goal.
Dave Gandy

How using multiple backgrounds via CSS can be a useful technique to improve perceived load time when large masthead images are involved.
Harry Roberts

John Gruber worries that using AMP traps users by not easily offering them an obvious way to get back to the canonical version of the article. Chris Coyier follows up.
John Gruber

Jobs Supported by

  • Senior Web Developer (Minnesota, USA)We're seeking a dev who loves creating polished web experiences. The right candidate needs the skills to create smooth animations, and an ability to make artistic decisions, turning static designs into interactive interfaces. Plaudit
  • One Application, 4,000+ Opportunities - Try HiredOn Hired companies apply to interview you. Get 1:1 support for your job search plus upfront compensation details. Hired

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

In Brief

CSS Table Module Level 3: W3C First Public Working Draft news

Introducing the Web Share API: Native Sharing from the Web news
Chrome is running an Origin Trial on a simple API called Web Share that allows sites to invoke the native sharing capabilities of the host platform.
Google Developers

PubSubHubbub Now Known as PubSub, Adopted by W3C news

Gaining Understanding of The Browsers People Use news
During September 2016 only 2% of visitors to the UK government website used IE 7, 8 or 9.
That’s 1.8 million people.

UK Government Digital Service

YouTube Is Being Rebuilt with Web Components and Polymer news
Jorge Arévalo

What's New in IndexedDB 2.0? news
Mozilla Hacks

Error Monitoring and Crash Reporting Now Available for React Native rawurl
Use Bugsnag to automatically capture and report JavaScript and native OS crashes in your React Native apps.
Bugsnag  Sponsor

Recreating The Periodic Table with Grid CSS tutorial
A practical look at the flexibility afforded by using Grid CSS.
Justin Avery

JavaScript for Web Designers: DOM Scripting tutorial
Mat Marquis

The Sad State of HTML Email Input Fields and IDNs tutorial
Mike Cardwell

Using CSS Mod(ulo) Queries with Range Selectors tutorial
A creative use for queries that select patterns of items and range selectors to change the layout of elements in lists.
Patrick Clancey

Responsive Images in CSS tutorial
A look at the available options for supporting responsive images, how they work and where they are supported.
Chris Coyier

How to Manage Hyphens with CSS tutorial
Using the hyphens and -webkit-hyphens properties.
Joseph Medley

aria-selected: When (Not) to Use It tutorial
Using ARIA attributes can be more nuanced and tricker than you’d think.
Stefan Judis

You Can’t Get Comfortable in Web Development opinion
Rey argues that developers are panicking because they’re “looking at what they need to do to stay relevant and it’s hard to pick a route”.
Rey Bango

Is MVC Dead for The Frontend? opinion
Alex Moldovan

Komodo IDE: The Best IDE for Web and Mobile Developers rawurl tools
Web & mobile devs get all their favorite frameworks, languages, and tools in one cross-platform, polyglot IDE.
ActiveState  Sponsor

Web Bloat Score Calculator tools
A tool with an interesting approach of measuring a page’s weight vs. the size of a screenshot of the same page.

CSS Icons: Icons You Can Use Built Entirely in CSS tools
Wenting Zhang A CSS Flexbox Framework tools

CSS Character Units: CSS Getting 'ch' Character Width Units demo
Wes Bos