Frontend Focus
Issue 254 — August 24, 2016
Declan Rek shares real-world advice on boosting front-end performance from static site generation and the picture element to lazy loading CSS and caching.
CSS Tricks

How IFRAMEs are used, where they came from, and what the specs have to say.
Peter van der Zee

Using @supports, you can include a small test in your CSS for whether or not a particular CSS property or value is supported and apply styles conditionally.
Jen Simmons

Frontend Masters
Brian Holt (Netflix) introduces you to React plus surrounding ecosystem including: Redux for state management, React Router for navigation and more!
Frontend Masters   Sponsor

A handy tutorial digging into WebPageTest, a site speed test tool, its RESTful API, and how to use it to optimize your own sites.
Eduardo Bouças

Some neat tricks you can use today in CSS, from fancy CSS animations and a frosted glass effect, to using calc() for grids and aligning with position:fixed items.
Anselm Urban

Adobe Typekit’s Head of Typography shares some interesting ideas on dynamically calculating typography variables (e.g. font size or line heights) independent of media query breakpoints.
Tim Brown

A quick 2 minute video intro to a new unit in the CSS Grid Layout Module - the ‘fr’ unit which represents a fraction of the available space.
Rachel Andrew

Jobs Supported by

  • 29 Front End Developer JobsOur free front-end developer job site currently including frontend jobs from as far afield as Zurich and Malaysia to London and Silicon Valley. Cooper Press
  • Stop Applying to Jobs - Let Companies Come To YouOn Hired, engineers typically get 5+ job offers in 1 week. Find that new opportunity you've been craving and get access to 4,000+ companies instantly.

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

In Brief

Flash Is Dying in December: Long Live HTML5 Video Player news
“TL;DR: if you play HLS, it’s time to add MSE playback.”
Hadar Weiss

Micropub is Now a W3C Candidate Recommendation news
Aaron Parecki

Polymer Summit 2016 Arrives in London on 17-18 October 2016 news
Join the second Polymer Summit at Tobacco Dock, London for two full days of talks, codelabs, and breakout sessions from the Polymer team and major companies using Polymer and web components in production.
Google, Inc.  Sponsor

Using CSS3 Counters for Figure and Table Numbering tutorial
Olivier Pieters

A Few HTML Tips tutorial
Mozilla Hacks

Bootstrapping Progressive Web Apps with amp-install-serviceworker tutorial
How to build a seamless bridge between AMP pages and Progressive Web Apps with amp-install-serviceworker.
Ruadhán O'Donoghue

How to Use the Module Pattern in your SCSS/Sass Stylesheets tutorial
Marc Mintel

`font-display` for The Masses tutorial
font-display is a new CSS property for controlling how Web fonts display.
CSS Tricks

Auditing the US Presidential Candidates Websites for Accessibility story
An accessibility audit on Hillary Clinton’s and Donald Trump’s campaign sites.
Helena Zubkow and Mike Herchel

Offline Content with Service Workers story
A look down the ‘deep rabbit hole’ of how powerful and versatile service workers are for delivering offline content.
Mike Riethmuller

Building a Web Audio Experiment: Detecting Piano Notes story demo
David Gilbertson

Headings and Semantic Structure for Accessible Web Pages video
Marcy Sutton

Getting Started with CSS Transitions (a very simple 2 minute video) video
Channel 9

Photoshop Etiquette For Responsive Web Design opinion
Dan Rose

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

Surfingkeys: Expand Your Browser with JavaScript + Keyboard tools
Write JS to do things in the browser when triggered by the keyboard.
Brook Hong

25 Essential Chrome Extensions for Web Designers tools
A good round-up of tools for devs and designers.
Paul Andrew

Push.js: JavaScript Notifications for (Almost) Every Browser code
Tyler Nickerson

Animate.js: A Tiny Script to Trigger Animations on Elements When In Viewport code
Josh Johnson