Idea from Bram Stein's Webfont Handbookhttps://abookapart.com/products/webfont-handbook I've discussed font subsettinghttps://publishing-project.rivendellweb.net/subsetting-fonts/ regarding ebooks. This post will review how do we load multiple fonts and how we subset fonts. Loading multiple font-faces This is what my normal font loading CSS looks like. I use 5 @font-face commands to load the fonts. One for the monospace font used in code block examples and 4 for our content font: regular, bold, italics and bold italics. css / Monospaced font for code samples / @font-face { font-family: "notomono"; src: url"../fonts/notomono-regular.woff2" format"woff2", url"../fonts/notomono-regular.woff" format"woff", url"../fonts/notomono-regular.ttf" format"truetype"; font-weight: normal; font-style: normal; } / Regular font / @font-face...
Most modern libraries and frameworks have a command line interface that will make it easier to build your own applications using the particular framework. Look at Angular CLI or Polymer CLI for an idea of what I'm talking about. The idea is that we can create a tool like a Yeoman generator without having to learn the way Yeoman works. Getting started To start create a package.json file. bash npm init We'll install the application's dependencies next. Note that as of NPM 5.0 we don't need to indicate we're saving them as dependecies --save as this is assumed when you...
Text from Google's PWA Checklist used under a Creative Commons Attribution 3.0http://creativecommons.org/licenses/by/3.0/ License. Google's PWA checklisthttps://developers.google.com/web/progressive-web-apps/checklist presents both a basic and an advanced set of requirements for Progressive Web Applications. As I mentioned earlier not all these requirements are technical, some of them have to deal with the performance of your application/site and with best practices in responsive web design. I've grouped them in two categories: Basic and Advanced requirements. I will comment on individual entries as needed. Basic Requirements Serving through HTTPS in a requirement for service workers and most, if not all, modern features available in browsers. Whether...
Before we jump into the PWA checklist we'll talk about APIs we can use in PWAs to enhance performance beyond the basic functionality of PWAs we've discussed so far. Background Sync The background sync API provides tools to create one-of and periodic data synchronization after the content was initially fetched for the application. It accomplishes these tasks by adding events for the service worker and additional functions for the service worker. In the code below we register a service worker and, when we're ready, we register a sync event; The name we register here is important; we'll use it as...
SW-precache and SW-toolbox made creating Service Workers with dynamic caching much easier but there were two separate libraries and SW-precache required a separate file with all the SW-toolbox libraries routes in it. This made it very error prone to edit and update. Workbox.jshttps://workboxjs.org/ is the evolution of Google's Service Worker Libraries. It consolidates all Service Worker build steps into one task Gulp, Webpack and NPM Script versions available and abstracts a lot of the writing and configuration behind the scenes so developers don't need to see the process, only the result. If you want to create specialized routes manually, Workbox...
Jake Archibald's Offline Cookbookhttps://jakearchibald.com/2014/offline-cookbook/the-cache-machine-when-to-store-resources provides additional ideas of when to cache datahttps://jakearchibald.com/2014/offline-cookbook/the-cache-machine-when-to-store-resources and different caching strategieshttps://jakearchibald.com/2014/offline-cookbook/serving-suggestions-responding-to-requests. We'll concentrate in the later and talk about caching strategies. Cache only Use this strategy for resources that are static to the site and that were cached during installation. javascript self.addEventListener'fetch', event => { // If a match isn't found in the cache, the response // will look like a connection error event.respondWithcaches.matchevent.request; }; Network Only I use this strategy for resources that I don't want in the cache like videos, non-GET requests, and others. javascript self.addEventListener'fetch', event => { event.respondWithfetchevent.request; // or simply...
Service Worker Note that this section will make heavy use of arrow functions, let and const, and other ES2015 and newer features. I've chosen to do this because I treat PWAs as progressive enhancements for evergreen browsers. Older browsers will not support PWAs and their features so it's pointless to try and support them. The service worker has to main components: the registration and the service worker itself. We place the registration in the index.html file or whatever we've named our site's entry point and it'll tell the browser whether the browser supports service workers, where to find it and...
Manifest The first, and easier, aspect of a PWA is the manifest. This is a JSON file that holds information about the content and gives supporting browsers hints and instructions for installing the content in the user's homescreen. html The manifest itself is a JSON file that contanins information about the application. The sample manifest below contains the following information: - name: Full name of the application - short name: Short name of the application - description - icons: An array of available icons to use for different aspects of the application - default orientation - start\url: The entry point...
Last year I worked at Google creating ILT curriculum for Progressive Web Applicationshttps://developers.google.com/web/ilt/pwa/. It's a great idea and I think the final product worked well, but it's not complete. If you're getting started you need hand holding but what if you've built PWAs before and want a reference or examples that will do what you want so you can either modify them for your project or copy it as is. I'm making assumpttions that you're already familiar with the technologies that make up a progressive web application so I won't delve too much in the details about what they are....
I have to admit that I'm absolutely lazy when it comes to actually testing and linting my Javascript code. I make sure it works but not to run unit tests or make sure that the code I write follows the coding style I always say I do. Git to the rescue! Git creates hooks when you initialize the repository and you can customize the hooks to perform taks during the life time of the request. There are hooks that we run during the commit process but before the files are actually pushed to the server. We'll take advantage of the...
