---
title: "A Guide to Web Font Loading Strategies, A CSS Selector Game, HTML5test Updated"
publication: "Frontend Focus"
issue: 248
published_at: "2016-07-13"
canonical_url: "https://frontendfoc.us/issues/248"
---

A Guide to Web Font Loading Strategies, A CSS Selector Game, HTML5test Updated

Plus a 30 minute guide to building instant-loading offline-first webapps... — [Read this e-mail on the Web](http://frontendfoc.us/issues/248)

Frontend FocusIssue 248 — July 13, 2016[How to Build Instant-Loading Offline-First Progressive Webapps](https://www.youtube.com/watch?v=qDJAz3IIq18)In just 30 minutes, Jake Archibald presents a practical guide to the technologies behind taking an online-only site and turning it into a fully network-resilient offline-first progressive webapp. YouTube 
[A Comprehensive Guide to Font Loading Strategies](https://www.zachleat.com/web/comprehensive-webfonts/?utm_source=frontendfocus&utm_medium=email)An objective set of pros, cons and helpful tips spanning the various ways of loading Web fonts on your site. Zach Leatherman 
[ChromeLens: Chrome Extension to Develop for the Visually Impaired](http://chromelens.xyz/?utm_source=frontendfocus&utm_medium=email)A Chrome DevTools extension that lets you simulate interactions with a site as a completely, partially or color-blind person, as well as run an accessibility audit. [More insights here.](http://www.jaredrigby.co.uk/2016/07/11/accessibility-testing-with-chromelens.html) Eugene Chiong 
[![ForwardJS\](https://copm.s3.amazonaws.com/9eee7afd.jpeg)](http://forwardjs.com?utm_source=frontendfocus&utm_medium=email)[ForwardJS July 25-Aug 1 in San Francisco: More JavaScript Than You Require](http://forwardjs.com?utm_source=frontendfocus&utm_medium=email)Eight days of sessions and workshops on React, D3, Angular 2, Accessibility, Progressive Web Apps and Functional JS. ForwardJSSponsor
[SVG Accessibility on the Web: A How To](https://css-tricks.com/accessible-svgs/?utm_source=frontendfocus&utm_medium=email)A code and example-dense look at how the rising popularity of Scalable Vector Graphics (SVG) could impact users of assistive technology, and what can be done to ensure a great experience. Heather Migliorisi 
[CSS Diner: A Fun CSS Selector Game / Tutorial](https://flukeout.github.io/?utm_source=frontendfocus&utm_medium=email)A quick online game/tutorial to help you learn CSS selectors (or at least refresh your knowledge). Luke Pacholski 
[How I Ended Up With Element Queries, And How You Can Use Them Today](https://www.smashingmagazine.com/2016/07/how-i-ended-up-with-element-queries-and-how-you-can-use-them-today/?utm_source=frontendfocus&utm_medium=email)A discussion of the history and uses of element queries and how this led to the creation of EQCSS, a plugin that supports element queries, Scoped CSS, and more. Tommy Hodgins 
[Front-End Development in an IoT World](https://www.sitepoint.com/the-future-of-the-web-in-an-internet-of-things-world/?utm_source=frontendfocus&utm_medium=email)Patrick Catanzariti looks at how the Internet of Things may affect front-end web development in the future. Patrick Catanzariti 
[Updated CSS Grid Layout Module Draft](https://drafts.csswg.org/css-grid/?utm_source=frontendfocus&utm_medium=email)The level one draft for the CSS Grid Layout spec has been updated, outlining the differences between Flexbox and Grid: _“Unlike Flexible Box Layout, which is single-axis–oriented, Grid Layout is optimized for 2-dimensional layouts”_ W3C 


Jobs [![Supported by Hired.com\](http://s3.cooperpress.com.s3.amazonaws.com/hired1.png)](https://hired.com/join/?utm_source=petercooperpress&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-swe%29%28q2-17-frontend-focus%29&utm_content=newsletter)

- [Hired is the best place to find engineering jobs.](https://hired.com/?utm_source=newsletters&utm_medium=petercooperpress&utm_term=cat-tech-html5&utm_content=bestplace&utm_campaign=q3-16-html5weekly&utm_location=us)Bored at work? Want to try a new stack? Find 3500+ great tech companies on Hired who will compete to hire you. [Try it today.](https://hired.com/?utm_source=newsletters&utm_medium=petercooperpress&utm_term=cat-tech-html5&utm_content=bestplace&utm_campaign=q2-16-html5weekly&utm_location=us) Hired.com

Can't find the right job? Want companies to apply to _you?_ [Try Hired.com.](https://hired.com/?utm_source=newsletters&utm_medium=petercooperpress&utm_term=cat-tech-frontend&utm_campaign=q2-17-frontend)

In Brief

[New Good Parts of JavaScript and the Web Course](https://frontendmasters.com/courses/good-parts-javascript-web/?utm_source=frontendfocus&utm_medium=email) rawurl news 
Douglas Crockford greatly expands JavaScript the Good Parts with more programming challenges, ES6, async, how web browsers work, web security and more.
Frontend MastersSponsor

[HTML5test Updated; Now Supports Many New Web Specs](http://blog.html5test.com/2016/07/html5test-has-been-updated/?utm_source=frontendfocus&utm_medium=email) news

[A Start on a Human-Readable Prose-Led WebAssembly Spec](https://github.com/WebAssembly/spec/blob/md-proto/md-proto/WebAssembly.md?utm_source=frontendfocus&utm_medium=email) news 
Still very much a work in progress, like WebAssembly itself.
WebAssembly Project

[The W3C and MIT Media Lab Host First ‘Blockchain and the Web’ Workshop](https://bitcoinmagazine.com/articles/the-w-c-and-mit-media-lab-host-first-blockchain-and-the-web-workshop-1467989496?utm_source=frontendfocus&utm_medium=email) news 
Blockchain and Web standards experts discussed what needs to happen to integrate blockchains into the Web.
Giulio Prisco

[Using Zopfli to Optimize PNG Images](http://ariya.ofilabs.com/2016/06/using-zopfli-to-optimize-png-images.html?utm_source=frontendfocus&utm_medium=email) tutorial 
A way to reduce the size of your PNGs (often significantly) in a lossless fashion.
Ariya Hidayat

[Accessibility Options for Unlabelled HTML 'input' Search Fields](https://adactio.com/journal/10910?utm_source=frontendfocus&utm_medium=email) tutorial
Jeremy Keith

[How To Build A Cross-Platform WebGL Game with Babylon.js](https://www.smashingmagazine.com/2016/07/babylon-js-building-sponza-a-cross-platform-webgl-game/?utm_source=frontendfocus&utm_medium=email) tutorial
David Rousset

[How to Scale SVGs Without Scaling Their Strokes](http://callmenick.com/post/svg-vector-effects?utm_source=frontendfocus&utm_medium=email) tutorial 
Useful when scaling icons, for example.
Nick Salloum

[How to Set Up Automated, Cross-Browser JavaScript Unit Testing](https://philipwalton.com/articles/learning-how-to-set-up-automated-cross-browser-javascript-unit-testing/?utm_source=frontendfocus&utm_medium=email) tutorial
Philip Walton

[6-Step Responsive Design Guide: Grids, Progressive Disclosure, & Layouts](http://trydesignlab.com/responsive-web-design/?utm_source=frontendfocus&utm_campaign=july2016) rawurl tutorial 
Learn how to truly design mobile-first and the 3 vital questions to ask before you start any web development project.
DesignlabSponsor

[How The Guardian is Experimenting with Interactive Web Notifications](https://medium.com/the-guardian-mobile-innovation-lab/web-notifications-part-1-interactive-852dcbebc721?utm_source=frontendfocus&utm_medium=email) story
Madeline Welsh

[How Will Web Components Change CSS Architecture?](https://snook.ca/archives/html_and_css/will-web-components-change-css?utm_source=frontendfocus&utm_medium=email) opinion
Jonathan Snook

[We Built Our Website Without CSS: The Highs and The Lows](https://medium.com/@david.gilbertson/building-a-website-without-css-trials-and-tribulations-5aa30499f57c?utm_source=frontendfocus&utm_medium=email) opinion 
“If I started a personal project today, I would do my styling in JavaScript.”
David Gilbertson

[Practical Use Cases for the 'picture' Element](http://coreybruyere.com/practical-use-cases-for-the-picture-element/?utm_source=frontendfocus&utm_medium=email) opinion
Corey Bruyere

[The Hottest Trend in Web Design Is Making Intentionally Ugly, Difficult Sites](https://www.washingtonpost.com/news/the-intersect/wp/2016/05/09/the-hottest-trend-in-web-design-is-intentionally-ugly-unusable-sites/?utm_source=frontendfocus&utm_medium=email) opinion
Washington Post

[Reflecting on the W3C Web Payments WG](https://medium.com/payments-innovation/reflecting-on-the-w3c-web-payments-wg-278db14c871d?utm_source=frontendfocus&utm_medium=email) opinion 
The [Payment App API](https://w3c.github.io/webpayments/proposals/paymentapps/payment-apps.html) was adopted as an editor’s draft this week.
Adrian Hope-Bailie

[The Moment CSS Started Making 'Sense'](https://css-tricks.com/moment-css-started-making-sense/?utm_source=frontendfocus&utm_medium=email) opinion 
Geoff Graham, Robin Rendle and Sarah Drasner share what it took for them to ‘get’ CSS.
Geoffrey Graham

[A Look at WebP Support in Browsers](https://optimus.keycdn.com/support/webp-support/?utm_source=frontendfocus&utm_medium=email) opinion 
WebP offers some advantages over JPEGs and PNGs but how broad is support for the format? More common than you’d think..
KeyCDN

[aXe 2.0: An Open Source Accessibility Testing Engine](http://www.deque.com/blog/introducing-axe-2-0/?utm_source=frontendfocus&utm_medium=email) tools 
Automated testing of HTML-based UIs for accessibility defects.
Marcy Sutton

[VidzPlayer: A React-Based HTML5 Video Player](https://github.com/planttheidea/react-vidz-player?utm_source=frontendfocus&utm_medium=email) code 
A simple video player built in React, leveraging [vidz](https://github.com/planttheidea/vidz) for the player creation.
Plant The Idea

[ZingTouch: A JavaScript Mobile Gesture Detection Library](https://zingchart.github.io/zingtouch/?utm_source=frontendfocus&utm_medium=email) code 
Provides six standard gestures that are completely customizable (Try it on a touch-enabled device).
ZingChart

[Recreating The Sounds of The BBC Radiophonic Workshop](http://webaudio.prototyping.bbc.co.uk/wobbulator/?utm_source=frontendfocus&utm_medium=email) demo 
The BBC has reproduced an early electronic instrument using the Web Audio API. You can play with it here and also see how it was built. Several other examples can also be found in the footer.
BBC Research and Development

Curated by [Peter Cooper](http://twitter.com/peterc) and [Chris Brandrick](http://twitter.com/chrisbrandrick) and published by [Cooperpress](https://cooperpress.com/).

[Stop getting FrontEnd Focus](*|UNSUB|*) : [Change email address](*|UPDATE_PROFILE|*) : [Read this issue on the Web](http://frontendfoc.us/issues/248)

Cooper Press Ltd. Office 30, Lincoln Way, Louth, LN11 0LS, UK