Case Study: Building Polymer Applications, Part 3

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. { “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: <dom-module

Case Study: Building Polymer Applications, Part 2

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. <link rel=”import” href=”elements.html”> <dom-module id=”project-menu”> <template> Inside the template we define the styles for our elements. <style> 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

ES6, Babel and You: Exploring the new Javascript

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

abstractions versus underlying structures

Maximiliano Firtman wrote Service Workers replacing AppCache: a sledgehammer to crack a nut 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 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

Application Shells and Service Workers: Links and Resources

General Resources and Concepts Is ServiceWorker Ready Service Workers Sepcification at W3C Instant Loading Web Apps with An Application Shell Architecture Examples and tutorials Jake Archibald Offline Cookbook Simple Service Worker tutorial Making A Service Worker: A Case Study Smashing Magazine Article Accompanying code The Guardian Building an offline page for Guardian.com Jeremy Keith’s Example My first Service Worker Nicolás Bevacqua ServiceWorker: Revolution of the Web Platform Vendor Examples Service Worker Samples (Google) The Service Workers Cookbook (Mozilla) Tools From Google sw-toolbox sw-precache Polymer Web Components platinum-sw platinum-push-messaging Things that sit on top of service workers Background Sync Push Notifications