Error handling for failed network requests with service workers

Most service worker code samples show only the happy path where the fetched resource will eventually be available, eg: self.addEventListener('fetch', event => { // Skip cross-origin requests, like those for Google Analytics. if (event.request.url.startsWith(self.location.origin)) { event.respondWith( caches.match(event.request).then(cachedResponse => { if (cachedResponse) { return cachedResponse; } return caches.open(RUNTIME).then(cache => { return fetch(event.request).then(response => { // Put … Continue reading Error handling for failed network requests with service workers

The Model-View-Presenter-Controller pattern

In this post I'll talk about the MVPC (Model-View-Presenter-Controller) design pattern I use in client applications such as progressive web apps and mobile clients. It can be best understood as an evolution of the MVC (model-view-controller) pattern past the MVP (model-view-presenter) pattern. The basics: MVC and MVP You might want to skip this section if … Continue reading The Model-View-Presenter-Controller pattern

Book of dark arts: storing data in the view

Pentagram, source Wikipedia. Towards the end of the year I'll indulge in the dark arts, join the goblins and leave my white architect hat under the Christmas tree where it belongs. I'm helping a friend (a technically minded, non-programmer) write his first mobile app . We wanted to keep everything simple: use technologies which can … Continue reading Book of dark arts: storing data in the view

HTTP compression and incremental rendering

TL;DR: HTTP compression can delay rendering of web resources HTTP permits content to be served with different encodings, some of which can be used to compress [1] the data volume transferred over the network, which has become a frequent suggestion [2] towards optimising websites for performance. It turns out that the deflation phase of the … Continue reading HTTP compression and incremental rendering

Equal height HTML elements in a container with CSS

Task: create HTML elements that contain other elements and adjust their height to surrounding container. No Javascript allowed. That's surprisingly hard; height:100% won't work; elements generally wrap their contents tightly and don't extend to their parents height dimension. Illustrating the problem: three elements inside a surrounding container Css-tricks lists several ways [1] to get this … Continue reading Equal height HTML elements in a container with CSS

AngularJS, Internet Explorer 9 and watch error

While working on an enterprise project (of course...) I run into an error with Angular (1.3.13), Internet Explorer 9 and $watch-ing a scope when programming a directive:   TypeError: Object doesn't support property or method 'watch' I'll never find out what the reason is. The collective wisdom of Angular users claims that including JQuery solves … Continue reading AngularJS, Internet Explorer 9 and watch error

Replacing social sharing buttons with javascript-less alternatives

Social sharing widgets slow down page loading For every public facing site there comes the moment where its content has to be shared in social media. We all know the dreaded "Like" or "Tweet" buttons on many sites or blogs. They not only compete for the reader's attention but also for screen real estate and … Continue reading Replacing social sharing buttons with javascript-less alternatives

On URL accuracy, versioning and the immutable-redirect pattern

So you have this requirements: serve content (might be a static file or a dynamic page) under a URL make it cacheable by defining appropriate HTTP expiration headers yet, the content might change - serve it under a new URL the old URLs should still be valid but show the new content In my current … Continue reading On URL accuracy, versioning and the immutable-redirect pattern