Smaller HTML Payloads with Service Workers

Philip Walton on how to progressively enhance your site by leveraging Service Workers to fetch partial HTML content and replace it in the DOM: On this site, after a user visits once and the service worker is installed, that user will never request a full HTML page again. Instead the service worker will intercept requests …

Full-stack apps with Apollo, a tutorial

The Apollo docs sports a very complete tutorial, combining TypeScript, GraphQL, and Apollo (of course): In this tutorial, we’ll build an interactive app for reserving a seat on an upcoming SpaceX launch. Think of it as an Airbnb for space travel! All of the data is real, thanks to the SpaceX-API. To populate the views, …

Alpine.js – A rugged, minimal framework for composing JavaScript behavior in your markup.

Caleb Porzio‘s “Project X” recently got its official name: Alpine.js. Alpine.js offers you the reactive and declarative nature of big frameworks like Vue or React at a much lower cost. You get to keep your DOM, and sprinkle in behavior as you see fit. It, like Vue which was one of its sources of inspirations, …

Smooth Scrolling Sticky ScrollSpy Navigation

Yesterday evening I was working on a documentation page. The page layout is quite classic, as it consists of a content pane on the left and a sidebar navigation on the right. Looking for a way to make the page less dull I decided to add a few small things to it: Smooth Scrolling when …

Snowpack – build modern web apps without a bundler

Must say I’m quite excited about Snowpack (formerly known as @pika/web, which I covered here) which just got released. With Snowpack you can build modern web apps (with React, Vue, etc.) without a bundler (like Webpack, Parcel, Rollup). No more waiting for your bundler every time you hit save. Instead, changes are ready in the …

IsoCity – A Isometric City Builder in JavaScript

A simple JavaScript city builder with no simulation at all. No budget, no goals. Just build your tiny city. This would work on a phone, but it wasn’t designed with phones in mind. I especially like that the URL changes while drawing, so your designs are immediately shareable. IsoCity – A isometric city builder in …

Enterprise React in 2020

Viacheslav Luschinskiy goes over the utils and libraries they use for building React apps. It is the opinionated set of libraries and technical approaches to quickly build scalable enterprise class applications in React. It also comes with the small demo app which can be used as a bootstrap kit. It includes all the mentioned libraries …

JavaScript: var vs let vs const

Nice Doodle by Abhishek Kumar explaining the difference between JavaScript’s var, let, and const: Good to see hoisting is also explicitly mentioned by name. 💁‍♂️ I personally always start with const. Only if I need to reassign a variable’s value (for example: a counter in a loop) I use let. I see no good reason …

ESNext: Replace all occurrences of a piece of text in a string with String.prototype.replaceAll

UPDATE June 2020: This feature has advanced to Stage-4 and will be part of the ES2021 Specification! 🎉 An ECMAScript Language feature that’s currently in Stage-3 is String.prototype.replaceAll, a handy way to replace all instances of a piece of text in a string. ~ The Problem If you ever needed to replace a piece of …