---
title: "#314: The Future of Loading on the Web"
publication: "Frontend Focus"
issue: 314
published_at: "2017-11-01"
canonical_url: "https://frontendfoc.us/issues/314"
---

#314: The Future of Loading on the Web

This Week's HTML, CSS, Browser, and Frontend News — [Read this e-mail on the Web](http://frontendfoc.us/issues/314)

Frontend FocusIssue 314 — November 1, 2017[Creating HTML Web Components with Vanilla JS](https://ayushgp.github.io/html-web-components-using-vanilla-js/?utm_source=frontendfocus&utm_medium=email)While native Web Component support isn’t 100% yet, polyfills are available, and this tutorial walks through what’s involved to create your own HTML tags as components. Ayush Gupta 
[HTTP 103: A Draft HTTP Status Code for Indicating 'Hints'](https://datatracker.ietf.org/doc/draft-ietf-httpbis-early-hints/?utm_source=frontendfocus&utm_medium=email)The idea is to allow Web servers to send back certain headers (e.g. preload link headers) early before the main response. IETF 
[Web Typography: Designing Tables to be Read, Not Looked At](https://alistapart.com/article/web-typography-tables?utm_source=frontendfocus&utm_medium=email)Richard Rutter goes deep on how to improve the readability of your data tables. Richard Rutter 
[![PSPDFKit\](https://copm.s3.amazonaws.com/d7f7091b.png)](https://pspdfkit.com/blog/2017/integrate-pspdfkit-web/?utm_source=frontendfocus&utm_medium=email&utm_campaign=nov1)[🚀 Add PDF Support to Your Web App in No Time](https://pspdfkit.com/blog/2017/integrate-pspdfkit-web/?utm_source=frontendfocus&utm_medium=email&utm_campaign=nov1)A step-by-step tutorial on how to display and annotate PDF files inside your web app using the [PSPDFKit JavaScript library](https://pspdfkit.com/pdf-sdk/web/?utm_source=frontendfocus&utm_medium=email&utm_campaign=nov1). Features include cross-browser support (IE 11 and up), mobile optimized UI, and no server-side component. PSPDFKitSponsor
[How to Write a JS-Free Todo App With Only HTML and CSS](http://www.mattzeunert.com/2017/10/30/javascript-free-todo-app.html?utm_source=frontendfocus&utm_medium=email)An interesting creative attempt to create a basic ‘web app’ using nothing but HTML & CSS. Matt Zeunert 
[I Watched All The Chrome Dev Summit Vids So You Don’t Have To](https://redfin.engineering/i-watched-all-of-the-chrome-dev-summit-2017-videos-so-you-dont-have-to-9b62a593c3cb?utm_source=frontendfocus&utm_medium=email)The takeaway: Google wants you to build PWAs, reduce JS file size, use Web Components, and configure your forms to support autofill. Dan Fabulich 
[Building a Fast Search Experience](http://engineering.autotrader.co.uk/2017/10/27/building-fast-search-experience.html?utm_source=frontendfocus&utm_medium=email)How popular car selling platform Auto Trader created a high-performance search experience that regularly returns results in less than a second. Elliot Sumner 
[The Future of Loading on the Web](https://www.youtube.com/watch?v=DKyHVGh666s)Sam Saccone explores recently shipped performance primitives, cutting edge performance techniques, and a glimpse into what the future of loading on the web may hold. Google Chrome Developers 
[The Accessibility Cheatsheet](https://bitsofco.de/the-accessibility-cheatsheet/?utm_source=frontendfocus&utm_medium=email)A helpful overview with some simple things you can do to take positive steps towards a more accessible web. From 2015, but worth revisiting. Ire Aderinokun 


Jobs

- [Frontend Developer at X-Team (Remote)](https://x-team.com/frontend-developer/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=front-weekly-q2-17)We help our developers keep learning and growing every day. Unleash your potential. Work from anywhere. [Join X-Team](https://x-team.com/frontend-developer/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=front-weekly-q2-17). X-Team
- [UI Designer/Frontend Developer](http://bit.ly/2eUkurV?utm_source=frontendfocus&utm_medium=email)Interested in #tech4good? We’re seeking a UI Designer to work across ideation, prototyping & coding for international development. Catalpa International
- [craigslist seeks JavaScript Developers (San Francisco, CA)](https://www.craigslist.org/about/craigslist_is_hiring?utm_source=frontendfocus&utm_medium=email)CL seeks JS developers to join our small (~50) team. Come help us save the world, or at least our corner of the Internet. craigslist

In Brief

[Microsoft's Plan to Bring Progressive Web Apps (PWAs) to Windows 10](https://www.thurrott.com/windows/windows-10/142649/microsofts-bold-plan-bring-pwas-windows-10?utm_source=frontendfocus&utm_medium=email) news
Paul Thurrott

[W3C Invites Implementations of Preload](https://www.w3.org/blog/news/archives/6605?utm_source=frontendfocus&utm_medium=email) news 
This [spec](https://www.w3.org/TR/2017/CR-preload-20171026/) defines the `preload` keyword that may be used with link elements.
W3C

[JS Kongress Munich - The Future of JavaScript on Nov 13-14](https://2017.js-kongress.de/?utm_source=newsletter&utm_medium=newsletter&utm_campaign=FrontEndFocus) news 
Join us for two days on the Future of JavaScript (inc. WebAssembly & Tooling). Topics include Frontend Architecture, webpack, Angular, React, Perf, etc.
JS Kongress MunichSponsor

[Unlocking the Benefits of CSS Variables](https://jonathan-harrell.com/unlocking-benefits-css-variables/?utm_source=frontendfocus&utm_medium=email) tutorial 
The benefits of CSS variables and helpful tips and tricks for working with them.
Jonathan Harrell

[How to Build an Interactive Virtual Globe with Three.js](https://medium.com/gitconnected/tutorial-build-an-interactive-virtual-globe-with-three-js-33cf7c2090cb?utm_source=frontendfocus&utm_medium=email) tutorial
Jeanne Castillo

[3 Commands to Add SSL to 'localhost' for https://localhost on MacOS](https://paulbrowne.xyz/https-localhost?utm_source=frontendfocus&utm_medium=email) tutorial
Paul Browne

[A Look at the Relatively Uncommon 'output' HTML Element](https://css-tricks.com/the-output-element/?utm_source=frontendfocus&utm_medium=email) tutorial
Robin Rendle

[Using Redux When Building Chrome Extensions](https://robots.thoughtbot.com/redux-for-chrome-extensions?utm_source=frontendfocus&utm_medium=email) tutorial
Bruno Antunes

[Emulating CSS Timing Functions with JavaScript](https://css-tricks.com/emulating-css-timing-functions-javascript/?utm_source=frontendfocus&utm_medium=email) tutorial
Ana Tudor

[Getting Around a Revoked Certificate in macOS](https://css-tricks.com/getting-around-revoked-certificate-osx/?utm_source=frontendfocus&utm_medium=email) tutorial
Geoff Graham

[Using ReactJS, ES6 & JSX to Build a UI (the rise of MERN)](https://www.mongodb.com/blog/post/the-modern-application-stack-part-5-using-reactjs-es6-and-jsx-to-build-a-ui-the-rise-of-mern?jmp=cpress&utm_campaign=WW_CP_newsletter_sponsorship_FY17Q3&utm_content=sponsored&utm_medium=display&utm_source=frontendfocus1101) tutorial 
Part 5 of our Modern Application Stack series - Why ReactJS is driving the development of modern apps.
MONGODBSponsor

[The Web Began Dying in 2014, Here's How](https://staltz.com/the-web-began-dying-in-2014-heres-how.html?utm_source=frontendfocus&utm_medium=email) opinion 
_“GOOG and FB now have direct influence over 70%+ of internet traffic.”_
André Staltz

[An Animated Flexbox Playground](https://codepen.io/osublake/full/dMLQJr?utm_source=frontendfocus&utm_medium=email) tools 
A helpful visual reminder of what effect certain Flexbox properties have.
Blake Bowen

[grid-kiss: A PostCSS Plugin to Keep CSS Grids 'Stupidly Simple'](https://github.com/sylvainpolletvillard/postcss-grid-kiss?utm_source=frontendfocus&utm_medium=email) tools
Sylvain Pollet-Villard

[Koa11y: An Open Source Web Accessibility Tool](https://open-indy.github.io/Koa11y/?utm_source=frontendfocus&utm_medium=email) tools 
A desktop app for automatically detecting Web accessibility issues.
Jared Wilcurt

[A Better Focus?](https://codepen.io/AllThingsSmitty/pen/MOYNBO?utm_source=frontendfocus&utm_medium=email) demo 
An attempt at a more ‘visually-pleasing focus for keyboard users’.
CodePen

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/314)

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