Frontend Focus
Issue 240 — May 18, 2016
Artem Tabalin demonstrates how to make web components more accessible via ARIA attributes, keyboard support and validating their visual accessibility.
Artem Tabalin

Chrome will display the HTML5 experience if it’s available, but if Flash is required, the user will be asked whether Flash can be allowed to run or not, except on the top 10 sites which will be whitelisted (e.g. Twitch, YouTube).
Emil Protalinski

Aurelio De Rosa explains how the command line API (as used in DevTools) allows you to quickly perform debugging tasks directly from the browser console.
Telerik Developer Network

With Cloudinary, you can easily adapt any image characteristic at breakpoints to provide an optimal viewing experience on any device.
Cloudinary   Sponsor

A golden oldie that has resurfaced this week. Answer several questions and get back some CSS to center your content.
Oliver Zheng

Learn things you didn’t know about flexbox from developer, author, and speaker Estelle Weyl in her keynote from Forward Web Summit.
Estelle Weyl

A site dedicated to ‘CSSitis’, when your site’s CSS grows out of control. It shows how much CSS many top sites use, tools to optimize your CSS, and case studies and articles on the topic.
Roy Quilor

How to use two little known CSS3 properties that can help when creating responsive layouts: object-fit and object-position.
Asha Laxmi

Though browsers are arguably more reliable than they’ve ever been, we still can’t forget about cross-browser testing tools. Ada has 7 options for you.
Ada Ivanoff

Houdini is a collection of APIs (being worked on by Mozilla, Apple, MS, Google and others) that expose the CSS engine’s internals to developers. It’s still early days but this is a good overview.

Jobs Supported by

  • The Easiest Way to Find a JobHired lets you sit back while job offers come to you. When you complete your profile, instantly apply to 3,500+ companies on the platform who will contact you with job offers, including salary and equity up-front. Try it today.

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

In Brief

Lightning fast SSD hosts for your HTML5 project rawurl
Host your HTML5 site on Linode servers - the fastest VPS hosts available. Use promo code HTML520 for $20 credit.
Linode  Sponsor

Web Notifications Supported in Microsoft Edge news
Starting with the most recent preview release, Web Notifications are enabled by default in Edge.
Microsoft Edge Team

Firefox Tops Microsoft Browser Market Share for First Time news
Chrome remains king, with over 60% market share.
Andrii Degeler

Firefox for iOS Makes it Faster and Easier to Use the Mobile Web news
A new update to Firefox for iOS.
The Mozilla Blog

Code Slinger: A 1 Day Software Engineering Conf in London (June 23) news
Cooper Press will be attending - see you there? For 15% off, use code COOPERP15
Code Slinger 2016

Uploading Multiple Files At Once with Ajax and XHR2 tutorial
XHR2 represents the more recent version of the overall XMLHTTPRequest spec.
Raymond Camden

Tips for Aligning Icons to Text tutorial
Geoff Graham

Flexbox and Truncated Text tutorial
Situation: you have a single line of text in a flex child element. You don’t want that text to wrap, you want it truncated with ellipsis…
Chris Coyier

Good and Bad CSS Practices for Beginners tutorial
Samuel Norton

ARIA Tabs, UI Problems and Standards opinion
Alastair Campbell

25 Seconds, That’s All It Took Before the HTML5 Element Flowchart Was My Best Friend opinion
Henrik Ståhl

Is Web Work A Safe Port in The Next Storm? opinion
The skills and techniques used to create for the Web will continue to be valuable, even if technology markets cool for a while.
Simon St. Laurent

Architecting Front-End Styles opinion
Will explains how he breaks front-end stylesheets into four major categories: base, components, patterns, and views.
Will H McMahan

RespImageLint: A Linter for Responsive Images tools
Martin Auswöger

How to find and fix the slowest code in your .NET application rawurl tools
Find bottlenecks in your code or database boost performance with new ANTS Performance Profiler 9. Try free.
Red Gate  Sponsor

jile: Modular CSS in Pure JavaScript code
Manage your styles in JavaScript with the full power of CSS.
Plant The Idea

push.js: A Compact, Cross-Browser Solution for Desktop Notifications code
Tyler Nickerson

Bulma: A Flexbox-based CSS Framework code
Jeremy Thomas

Plyr: A Simple HTML5 Media Player with Custom Controls and WebVTT Captions code
Sam Potts