Tag Archives: webdev

Components and Concerns

Jeremy Keith, on Separation of Concerns and how that comes into play where one’s dealing with Component based design: My point is this: Separating structure, presentation, and behaviour is a good idea. Separating an interface into components is a good … Continue reading

Elsewhere , , Leave a comment

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 … Continue reading

Elsewhere , , Leave a comment

ngrok – Public URLs for exposing your local web server

To make a local server available to the outside world you could use a service like xip.io. Only problem is that xip.io doesn’t play that nice with firewalls and stuff like that. Recently I used ngrok to solve just that. … Continue reading

Elsewhere , , 2 Comments

Jake Archibald: “In The Loop” — Taking a close look into the browser’s Event Loop

Talk by Jake Archibald, as brought at JSConf.Asia 2018, taking a close look into the browser’s Event Loop: This talk looks at the browser’s event loop, the thing that orchestrates the main thread of the browser, which includes JavaScript, events, … Continue reading

Elsewhere , , , Leave a comment

Everything Easy is Hard Again

Frank Chimero was out of the loop for 3 years when it comes to developing websites. Coming back he was put off by the complexity of how things have gotten. Take layouting for example, where we went from tables to … Continue reading

Elsewhere , , Leave a comment

Create a timelapse of your web development with tlapse

This one’s quite fun: tlapse is a tiny utility that takes periodic screenshots of your site while you develop. Combine all generated screenshots and you can get a sequence like this: The interval to take screenshots is configurable, and duplicates … Continue reading

Elsewhere , , , Leave a comment

Lazy Loading images with IntersectionObserver

Extensive article on using the aforementioned IntersectionObserver to lazy load image assets on your page. First explains the difference between a regular Event and an Observer, before diving into the IntersectionObserver. const images = document.querySelectorAll('[data-src]'); const config = { rootMargin: … Continue reading

Elsewhere , , , , Leave a comment

Automatic visual diffing with Puppeteer

A few years ago we got Wraith and Huxley to perform visual regression testing. Monica Dinculescu has created a likewise thingy, powered by Puppeteer: I did a little song-and-dance that sets up Puppeteer, takes screenshots of your app (like, all … Continue reading

Elsewhere , , , Leave a comment

On “Secure Contexts” in Firefox, HTTPS for local development, and a potential nice gesture by Chrome

👋 This post also got published on Medium. If you like it, please give it some love a clap over there. Earlier today, in a post entitled Secure Contexts Everywhere, it was announced on the Mozilla Security Blog that Firefox … Continue reading

Original Content , , , , 1 Comment

SQIP – SVG-Based Image Placeholder

In an in-depth analysis on how Medium loads up their images, José M. Pérez explains how their “blur-up technique” works: Display a resized version of the original at the original size, with a blur filter on top to hide the … Continue reading

Elsewhere , , , , Leave a comment