How to display a “new version available” for a Progressive Web App

Dean Hume: I’ve built a number of Progressive Web Apps that simply update the service worker silently for the user in the background, but I really like the approach where you get a popup notification that suggests that there is a new version of the site available like Google’s Inbox provides – especially for an …

10x Performance Increases: Optimizing a Static Site

Use case by JonLuca De Caro in which he optimised the page load speed of a static site. Before optimisation the site weighed 1MB (at 20 requests) with DOMContentLoaded at 3.74s. After optimisation the site weighed only 267kB (at 9 requests) with DOMContentLoaded at 197ms. 10x Performance Increases: Optimizing a Static Site →

JavaScript asyncawait: Resolving Promises in parallel

Recently I saw a colleague implement some functionality in which he required two results from an API using async–await. The piece of code looked something like this: The code looks fine, is syntactically correct, and works … but there’s one big problem with it: the calls are made sequentially. To run these calls – which …

Resilient, Declarative, Contextual

I enjoyed reading this piece by Keith J. Grant on three key characteristics of CSS that set it apart from conventional programming languages. I want to look at three key characteristics of CSS that set it apart from conventional programming languages: it’s resilient; it’s declarative; and it’s contextual. Understanding these aspects of the language, I …

Harry Roberts: FaCSSt – CSS and Performance

A Frontend United I was lucky to see Harry Roberts give this talk on CSS and Performance. You can watch it to, as the recording has been published to YouTube Ahh… CSS and performance. Two of my favourite things! But how well do they play together? It depends… In this very matter-of-fact talk, we’ll be …

How CSS works: Parsing and painting CSS in the critical rendering path

Insightful post by the folks over at LogRocket on the rendering pipeline: If your site takes forever to load, chances are your users aren’t gonna wait for it to finish, even if there’s valuable content to be found there. Some studies have shown that up to 50% of users leave a page after 3 seconds …

Implementing Web Push Notifications

Alexander Zlatkov from SessionStack on how to implement Web Push Notifications: There are three general steps to implementing a push: The UI — adding the necessary client-side logic to subscribe a user to a push. This is the JavaScript logic that your web app UI needs in order to enable the user to register himself to push …

yett – A small webpage library to control the execution of (third party) scripts like analytics

In order to provide GDPR compliant consent-first-analytics (and other stuff), you can use yett: Blocking execution of analytics script (until consent is given) can be done manually, but the problem is that analytics providers often provide minified code embeds that you have to include in your html as they are. If you want to exercise …

Tips for improving performance of React Native apps

While researching a performance issue in a React Native app by doing a deep dive into the bridge, I stumbled upon this nice list of tips by jamsch. The list – which touches react-navigation, the types of lists one can use, etc. – was originally posted as a comment on a Github Issue, but deserves …