Since I decided to do an app shell architecture for the project we'll have to split the way we cache content with service worker. We'll use both sw-precachehttps://github.com/GoogleChrome/sw-precache to cache the app shell and sw-toolboxhttps://github.com/GoogleChrome/sw-toolbox to cache the other pages of the application and any associated resources. Yes, we could build the service worker manually but updating becomes more and more complex. You have to remember to update the worker whenever you make a change and that makes it error prone. I don't particularly like using third party libraries to build my code but in this case the advantages far...
> Third in a series. Other two parts are What kind of web do we want?https://publishing-project.rivendellweb.net/what-kind-of-web-do-we-want/ and Who are the next billion users and how do we accommodate themhttps://publishing-project.rivendellweb.net/who-are-the-next-billion-users/ How we build content that will be read wherever and whenever we are regardless of the device we use to access it? Reading for everyone I’ve also found myself in discussions on Medium about Portable Web Publicationshttps://www.w3.org/TR/pwp/ and when I asked what happens to people using existing devices I used Kobo and iBooks as examples I was told that PWP are web applications not ebooks. So what do you do in...
Where are the next billion users for our applications come from? When answering this question we have to be careful. The answer itself is easy, the implications of the answer, not so much. I'll leverage 2 presentations to support the rest of the essay. Tal Oppenheimer from Google's Chrome team made a very interesting and thought provoking presentation about building the web for the next billion users and what we should consider when building our experiences. Bruce Lawson from Opera takes a different view of the next billion users. He warns us about where these users are coming from and...
The web, technology wise, is in a great place. We’ve grown closer to parity with native apps, that’s the gist of progressive web applications, we can have pretty close to the same experience form web apps as we can from native. Javasacript has improved both in terms of speed and interoperability. New HTML5 APIshttp://html5index.org/index.html have contributed to Javascript resurgence and popularity. It’s also new features in ES6 ratified in 2015 like classes, standardized modules and other APIs make it fun and useful to code in vanilla Javascript. CSS has moved forward y leaps and bounds. We can do a lot...
Progressive and Subcompact Books: Technical notes > This is meant as living document. Feedback is appreciated and will be incorporated when appropriate. The idea is to use this and its sister philosophical document as the basis for a proof of concept application Why a progressive web app? I’ll take the original list of attributes Frances and Alex described for a progressive web application and explain why I consider them important for web publications - Responsive: Let’s face it, reflowable ebooks could look much better. I’m not talking about typography but of essential layout and the inability to use modern web...
> 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;...
