> This is meant as living document. Feedback is appreciated and will be incorporated when appropriate. The idea is to use this and its sister technical document as the basis for a proof of concept application One of the first web reading experiences I saw was Craig Mod’s Art Space Tokyo. I use the term experience deliberately as it was one of the first efforst to create a consistent experience or as much as possible between the physical book and the different online versions available to the user. They all share the same illustrations the same basic structure and layout....
I’ve been reading the different positions in the debate started when the International Digital Publishing Forum and the W3C started talking about merging. I’ve also purposefully stayed quiet as I digest the conversations and try to understand the rationale of such a merger. This is my understanding of and position regarding the whole situation. IDPF is moving towards an HTML experience for their users. Looking at the EPUB 3.1 changes from EPUB 3.0.1http://www.idpf.org/epub/31/spec/epub-changes.html shows a move away from what has been traditionally part of the EPUB specification. From the W3C side we can see their interest in publishing by how...
> Thanks to Ada Rose Edwardshttps://twitter.com/LadyAdaKing for pointing me to rollup.js and providing examples of how to configure it. I’ve always struggled to understand the differences between modules and classes and I’m still not 100% sure I understand the differences but I think I do well enough to write up about it. Where a class has to be instantiated using the new constructor and is an all or nothing proposition, either you use the entire class or none of it, you cannot extend some methods of the class and not others. With Modules you have to explicitly export the elements...
project-list The project-list element is the meat of the application and uses some interesting techniques I've learned from working on creating Polymer elements. This is an example of the JSON model used on their element. It has been redacted for length. javascript { "description": "The VR/AR web seems to be the latest buzz word in the web community.", "name": "Moving 2D content to a 3D world", "notes": "", "stage": "Idea", "type": "Code", "url": { "code": "", "other": "", "writeup": "" } } Knowing the structure of the JSON data will help make sense of the data bindings I used below:...
project-menu project-menu is a presentational element that only contains icons, links and linkable icon elements. It’s a good example of how we can compose custom elements with regular HTML content. As will all out elements we import elements.html to make sure we have everything we need to get started. We then define our dom-module to be project menu by assigning its ID. markup Inside the template we define the styles for our elements. markup body { margin: 0; font-family: 'Roboto', 'Noto', sans-serif; background-color: eee; } :host { display: block; --iron-icon-width: 48px; --iron-icon-height: 48px; } paper-item { --paper-item: { cursor: pointer;...
One of the first applications I created with Polymer 0.5 was a project viewer that would list all project ideas I was working on. It had 2 versions with different backends: a JSON file and a Firebase enabled one. At some point the Firebase version stopped working so I decided to revisit the JSON backend to update; it was also time to put all the lessons I’ve learned about Polymer 1.x to work. The application is built around 3 components: - project-app is the shell for the application containing layout elements. This could have been done as an autobinding template...
I haven’t been this excited about Javascript in a long time. Javascript is becoming fun again with better aync support in Promises and async/await code, better modularity and reusability with classes and modules and a consistent, concise syntax for anonymous functions with arrow syntax and, better support accross Node.js and browsers. Until support for ES6 also known as ES2015 is complete accross major browserss we still need to transpile the code to ES5, the version that is currently supported accross browsers. There are two tables that list compatibility tables that guide you on native support for different features across ECMAScript...
Maximiliano Firtman wrote Service Workers replacing AppCache: a sledgehammer to crack a nuthttps://medium.com/@firt/service-workers-replacing-appcache-a-sledgehammer-to-crack-a-nut-5db6f473cc9b.l9dpx76am where he makes a case for Service Workers not being ready to replace AppCache, regardless of how broken it is. I happen to disagree with it for the same reasons Jake Archibald listed in Application Cache is a Douchebaghttp://alistapart.com/article/application-cache-is-a-douchebag and for reasons having to do with the extensible web. I tried to create an Application Cache for making some of my content offline. I’ll kindly say I failed because App Cache did not deliver on what it promised. What good is it to have an offline experience...
- General Resources and Concepts - Is ServiceWorker Readyhttps://jakearchibald.github.io/isserviceworkerready/ - Service Workers Sepcificationhttps://www.w3.org/TR/service-workers/ at W3C - Instant Loading Web Apps with An Application Shell Architecturehttps://developers.google.com/web/updates/2015/11/app-shell - Examples and tutorials - Jake Archibald - Offline Cookbookhttps://jakearchibald.com/2014/offline-cookbook/ - Simple Service Worker tutorialhttps://github.com/jakearchibald/simple-serviceworker-tutorial - Making A Service Worker: A Case Study - Smashing Magazine Articlehttps://www.smashingmagazine.com/2016/02/making-a-service-worker/ - Accompanying codehttps://github.com/lyzadanger/serviceworker-example - The Guardian - Building an offline page for Guardian.comhttps://www.theguardian.com/info/developer-blog/2015/nov/04/building-an-offline-page-for-theguardiancom - Jeremy Keith’s Example - My first Service Workerhttps://adactio.com/journal/9775 - Nicolás Bevacqua - ServiceWorker: Revolution of the Web Platformhttps://ponyfoo.com/articles/serviceworker-revolution - Vendor Examples - Service Worker Sampleshttps://github.com/GoogleChrome/samples/tree/gh-pages/service-worker Google - The Service Workers Cookbookhttps://serviceworke.rs/ Mozilla - Tools...
Building a ServiceWorker using Google libraries Google provides an abstraction layer over Service Workers called sw-toolbox that hides a lot of the complexities of a Service Worker without sacrificing functionality. The example below uses sw-toolbox to create a serviceworker that precaches the application shell and treats everything else as a default with a network-first strategy. global => { 'use strict'; // Load the sw-toolbox library. importScripts'bowercomponents/sw-toolbox/sw-toolbox.js'; // List of files to precache. This should be automated. const FILESTOPRECACHE = 'index.html', 'js/app.js', 'css/main.css', '/images/logo.svg', 'offline.html' ; // Turn on debug logging, visible in the Developer Tools' console. global.toolbox.options.debug = true; //...
