Frontend Focus
Issue 243 — June 8, 2016

Recently I mentioned we're rebranding HTML5 Weekly to reflect its general front-end focus and *drum roll*.. in July, HTML5 Weekly will become Frontend Focus. Thanks to everyone who suggested new names.

In other news, we're running some workshops in London with JavaScript guru Kyle Simpson later this month, so if you want to do a 2 day intensive JS workshop, a 2 hour ES6 class, or a 2 hour functional JS class, register now :-)

Starts from the usual basics (title, charset, etc.) but works up to a significant number of meta and link tags useful in various situations.
Josh Buchea

Alex Russell thinks the Web is in serious crisis due to the dominance of mobile platforms and research showing time spent using the Web is dropping.
Peter Gasston

Literally see what’s new in the next version of the popular front-end framework, including cards, font changes, a new XL grid tier, and tweaks to button styling.
Carol Skelly

Linode's SSD hosts are the perfect environment for any HTML5, CSS, and JavaScript media. Meet your website's demands with a lightening-quick cloud host offered at competitive pricing. 99.9% uptime and 24/7 support.
Linode   Sponsor

Error messages in the Firefox Developer Console will provide helpful links to associated documentation.
Mozilla Hacks

Parker is a CSS static analysis tool that provides insights into your stylesheets and their complexity.
Harry Roberts

An interesting introduction to the ‘physical Web’ from Google’s Leon Nicholls at Google I/O. “What if the real world behaved like the Web?” he asked.

New to Chrome 51, passive event listeners provide a major potential boost to scroll performance.

Jobs Supported by

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

In Brief

Upcoming Web Design Conferences (June-December 2016) news
Smashing Magazine

Five Ways to Hide Elements in CSS tutorial
Baljeet Rathi

You Don't Need JavaScript for That (Use CSS) tutorial
A look at JS-free tooltips, dropdowns, and visibility toggling.
Cristina Silva

Battling BEM: 10 Common Problems And How To Avoid Them tutorial
BEM is a front-end development methodology covering code reuse, naming, file layout, and more.
David Berner

Retrofitting Zooming UI To Legacy Websites: An Impossible Task? tutorial
Luca Leone and Anders Schmidt Hansen

Using the Permissions API to Query Browser API Permission Levels tutorial
David Walsh

How to Build a News Website Layout with Flexbox tutorial
Jeremy Thomas

Don't Use iOS Meta Tags Irresponsibly in Your Progressive Web Apps opinion
Maximiliano Firtman

Web Storage: The Lesser Evil for Session Tokens opinion
James Kettle

The Basics of Building 3D Games on the Web opinion
Andrzej Mazur

An Animated Typographic Terminology Cheat Sheet tools demo

Cutestrap: A Tiny Alternative to Bootstrap tools
Just 8KB of CSS.
Tyler Childs

CSS Specificity Cheat Sheet, inspired by The Shining tools
CSS Dev Conference

LightCMS Developer Program - Free 14-day trial rawurl tools
Design More, Work Less. You do fun, we do boring. Create outstanding websites on LightCMS.
LightCMS  Sponsor

An example of morphing shapes in CSS using some rather intense SCSS code code

html-extend: Extend HTML using an ES6-like Module System and Annotations code
Sergii Kliuchnyk

AOS: A CSS-Driven 'On Scroll' Animation Library code tutorial
AOS standing for Animate On Scroll
Michał Sajnóg

CSS Modules Demos code
CSS Modules is a method to add local scope and dependencies to CSS.
Ruan YiFeng

raf-stub: Accurate Testing of requestAnimationFrame & cancelAnimationFrame code
Alex Reardon

An HTML5 Micro-Simulation of Traffic Flow demo
Not new but I found it fun to see how jams can appear ‘out of nowhere’.
Dr. Martin Treiber