jfhr's blog

Hi, I write blog posts about software development and little else. If you enjoy this blog, feel free to say hello :)

Latest post:

New Blog Design + Performance Improvements

Tl;dr this blog now has a (slightly) new design, a dark mode, and better loading performance. Also I'm now on tumblr :D

Smart Contracts: a (mildly) practical example

This post is a short introduction to smart contracts: How they work, what you can do with them, and how to develop and interact with one.

Optimizing images with the CSS image-set() function

I previously blogged about optimizing images with the HTML <picture> tag. You can use the image-set() function to get equivalent behavior in CSS.

Optimizing images with the HTML picture tag

If you have a website, you probably want it to be fast. One common reason why websites aren’t fast is because they have a lot of images. Images take time to load. Generally, the browser will load your website, find out that it contains a bunch of images, and start loading those as well. You can optimize that with HTTP/2 Server Push. Another optimization is to simply make your images smaller, without sacrificing quality - that’s what this post is about.

Test Email sending with cypress

At InsiderPie we use our own little email newsletter software. I wanted to write an automated test to make sure that newsletter sending works correctly. In the spirit of full e2e testing, that meant verifying that newsletters are actually sent out, and that the unsubscribe link at the bottom of every email works correctly. Turns out, that's not as easy as it sounds.

HTTP/2 Server Push and Cache-Digest

Server Push is a feature in HTTP/2 that can make websites more efficient. This post is about how it works, how you can implement it - and why it is so rarely used.

Build automation with JavaScript and zx

zx is an open-source tool by google for creating server-side scripts with JavaScript. In this post I'll talk a bit about what it does, and how and why I use it in several projects to automate builds.

The DeconstruCT.F 2021

I played in the DeconstruCT.F 2021 with ps1ttacus! It's a little late, but these are my writeups for the web challenges I solved.

The Down Under CTF 2021

I was spontaneously invited to play on the DownUnderCTF 2021 by ps1ttacus.

The most important thing I learned: CTF's are fun! I'm glad I participated and want to say a big thank you to the organizers. In this post I share writeups of the challenges I solved.

How to really know if your webapp is online

If you search for "check online JavaScript", you'll quickly come across the navigator.onLine property. Unsurprisingly, it returns true if you're online, and false if you aren't. In addition, the window.ononline and window.onoffline events notify you whenever that value changes.

False positives

If it was quite this easy, I wouldn't be sitting here writing a blog post about it. In fact, if we look at the spec, we find the following...

document.designMode

document.designMode = "on";

This single line of JavaScript makes an entire webpage editable. Try it out here...

Mighty

I've recently read about the project Mighty. Tl;dr, it's stadia for the web browser. Mighty runs Chrome on their server and streams it to your device, promising better performance and less battery use. Sounds interesting, and I'll definitely try it once it's available - but there are some things I want to talk about.

Start an app with Angular 12 and Bootstrap 4

Learn how to quickly create a web-app with Angular 12 and Bootstrap 4.

Start an app with Angular 12 and Bootstrap 5

Learn how to quickly create a web-app with Angular 12 and Bootstrap 5.

Light and dark themes with Angular, Bootstrap and SASS

Let's say you have an Angular single-page app and use Bootstrap for styling. You want to let your users choose between multiple themes (e.g. a light and dark theme). You also want the option to use custom SASS for each theme, as well as for all themes at once.

The solution

...