Frontend Focus
Issue 276 — February 8, 2017
We have h1, h2, and h3, but not li1, li2, and li3, so could or should headings also be denoted without including a level in the element name? Some interesting discussion on the W3C’s HTML spec repo.
W3C

“In an HTML API, the definitions and protocols are in the HTML itself, and the tools look in HTML for the configuration.” Plenty of great insights from Lea here.
Lea Verou

Reflecting on a popular article from 2012, Harry Roberts has some new candidates to add to his list of CSS 'code smells'.
Harry Roberts

ForwardJS & Forward Swift
Last chance for Advance tickets to nine days of Angular 2, Swift, React, Webpack, VR, Redux, Async, D3, WebPerf, Ionic and TypeScript presented by industry experts this March in San Francisco.
ForwardJS & Forward Swift   Sponsor

How to make it so that link underlines wave around upon hover. A clever use of modern Web technologies for a striking effect.
Ahmad Al Maaz

Flexbox promises to save us from the evils of plain CSS (like vertical alignment).
Scott Domes

Apple’s WebKit team has proposed a new W3C Community Group to discuss the future of 3D graphics on the web, and to develop a standard API that exposes modern GPU features.
Dean Jackson

A tool that lets you load two websites side by side and observe which loads faster/smoother.
Lea Verou

A modern browser API designed to extend users’ sharing experience in a cross-platform way.
Serg Hospodarets

Jobs Supported by Hired.com

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

In Brief

What's New In Chrome 56 news
A brief look at new features including the Web Bluetooth API and position: sticky
Pete LePage

It's Time to Vote On An Official WebAssembly Logo news
The logo with the most ‘thumbs up’ will then be deemed the official logo.
WebAssembly

Server-Side Timings Now in the Chrome Devtools news
Mattias Geniar

Chrome 57 Will Permanently Enable DRM news
You won’t be able to disable the Widevine plugin that works alongside Encrypted Media Extensions.
Tom's Hardware

What Really Makes a Static Site Generator? tutorial
What exactly is a static site generator and what goes on inside that black box?
CSS Tricks

[99-Point Cheat Sheet] The Ultimate Guide to Getting Started In Sketch tutorial
Whether you’re a total novice, a designer in training, or a seasoned pro switching from another product, this guide is for you.
Designlab  Sponsor

CSS Pseudo-Classes: Styling Form Fields Based on Their Input tutorial
Tiffany Brown

5 Ways to Lazy Load Images For Faster Page Loads tutorial
Dynamic Drive

Polyfills: Everything You Ever Wanted to Know (Maybe) tutorial
David Gilbertson

Cross-Browser Testing: Installing All The Things tutorial
How to set up what’s needed to test in different browsers and devices.
David Gilbertson

Gridtab: A jQuery Plugin to Build Grid Based Responsive Tabs code

console-extend: A Proxy for the 'console' Object So You Can Extend It code
Jordan Piepkow

JSMpeg: A Pure JavaScript MPEG 1 + MP2 Decoder code
Dominic Szablewski

Animatelo: 'Just-Add-Water' Web Animations for Your HTML Elements code
Live demo here.
GibboK

Between: Proxy-Based Animation Library with Cocoa Animation Block-esque API code
Anthony Catel

Gibon: Functional UI Router in ~600 Bytes, Built on HTML5 History API code
Charlike Mike Reagent

Luxbar: A Featherweight, Responsive, CSS Only Navigation bar code
Balazs Saros

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