Frontend Focus
Issue 246 — June 29, 2016
A enjoyable essay looking at technologies and approaches that were proposed for styling Web documents before CSS became the firm favorite.
Zack Bloom

“Few things are as annoying on the web as having the page layout unexpectedly change or shift while you’re trying to view or interact with it.”
Brandon Smith

Detailed, elegant icons rendered with CSS upon just one div element. (You’ll want to open your browser's element inspector to dig into these.)
Lynn Fisher

Red Gate
Boost the performance of your .NET application with ANTS Performance Profiler. Get rich performance data on your code and database queries to find your application's bottleneck fast. Try ANTS Performance Profiler on your app now.
Red Gate   Sponsor

“Many fonts are large, causing a long delay until the browser can use them. WebKit has mitigated this.”
Myles Maxfield

Baljeet Rathi explains the various CSS image replacement techniques available to web developers today and their pros and cons.
Baljeet Rathi

Mutation Observer is a feature, supported by all modern browsers, that let you detect when elements in a page are inserted, changed or removed.
Zack Bloom

What is the Referer header and how can you control its presence (or lack thereof)? A handy resource for security-minded Web developers.
Neil Jenkins

A quick walkthrough of building your first animation with Velocity.js to animate a list. Includes a CodePen example.
Bryan Elkus

We’ve taken a look through all the stats from HTML5 Weekly published so far in 2016 and collected the most popular CSS links we shared.
Chris Brandrick

Jobs Supported by

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

In Brief

Dreamweaver Is Back for Us, Coders news
A look at the beta of Adobe’s refreshed code editor, Dreamweaver.
Anselm Hannemann

D3.js 4.0 Released: The Popular Data Visualization Library news

HTML5 Ads Aren't That Safe Compared to Flash, Experts Say news
Catalin Cimpanu

Apple Releases Safari 10 Developer Beta for OS X Yosemite and El Capitan news

'Chrome does not respond dynamically to @media rules inside @supports' news
Emil Björklund

Contextual Identities on the Web in Firefox Nightly news
Tanvi Vyas

New Good Parts of JavaScript and the Web Course rawurl
Douglas Crockford greatly expands JavaScript the Good Parts with more programming challenges, ES6, async, how web browsers work, web security and more.
Frontend Masters  Sponsor

Don't Overthink Flexbox Grids tutorial
Vanilla, framework-free grids are easy-peasy with Flexbox.
Chris Coyier

Form Design: How to Automatically Format User Input tutorial
Learn how to format, real time, user input in a form field.
Thoriq Firdaus

Building Better Accessibility Primitives tutorial
A look at ARIA and HTML in relation to modals and disabling tabindex.
Rob Dodson

Drawing Waveforms with the Web Audio API and SVG tutorial
Matt Sumner

Build Your First Thing With WebAssembly tutorial
Nick Larsen

The Landscape of Front-End Testing video
Alicia Sedlock

A Different Approach rawurl tools
Take control of your website with features you won't find anywhere else. Find out why PageCloud is the world's most advanced website creator.
PageCloud  Sponsor

Tool to Draw Pixel Art, Get CSS Back tools
Javier Valencia Romero

Algolia Places: Address Autocompletion for 'input' Fields tools code
There’s a full intro post too.

Tridiv: A Web-Based Tool for Creating 3D Shapes with CSS tools
Julian Garnier

Vidage: Full-Screen Background Video and Image Library code
Automatically switches the video for a fallback image on small/touch devices.
Nenad Novaković

griddy.css: A Simple, Responsive 12 Column Based Grid in ~1KB code
Dmitri Voronianski

gl-water2d: 2D Liquid Simulation with WebGL code
Eric Arnebäck