Visual Regression Testing with Playwright

How do you test 3D transformations? In my last project I had this problem and the only viable way that I found were visual regression tests. I played with visual testing a couple of years ago, using Selenium and other tools. Now I wanted to find out how well it works with the latest of the testing-frameworks: Playwright.

Internal Nextcloud on a Raspberry PI with SSL

I have replaced my old server "Merlin" with a Raspberry 5 a 2TB NVMe disc and Nextcloud. And since it wants to use HTTPS by default, and I cannot use LetsEncrypt in my local network, I created a tiny CA based on shell scripts.

Restart mdadm and lvm on usb device after disconnect

A note to my future self, when it has forgotten the commands to do this. With a multi-disc usb case, a soft-raid with lvm, how do I fix the connection after disconnecting the cable?

Wooden Enterprise D (Transfer paint on wood)

How did I manage to transfer the laser-printed cutting lines onto wood? I tried different things. Here is my conclusion.

Wooden Enterprise D (Aligning decks)

I cleaned up a lot of stuff and made a 3d-model. And I published my sources, but not as Open Source (yet)

Wooden Enterprise D (Approach)

Holiday projects are nice. And this one does not have to do much with programming. I am going to build an Enterprise D lamp from 4mm wood sheets. This is about planning and fist steps.

Vite, TypeScript, bundle-size

In this post, I want to share some interesting conclusions from my attempt to write the baa-lexer. How can I reduce the bundle-size of my TypeScript project, without sacrificing modularity? Which compiler-settings create boilerplate code that can be omitted?

I wrote my own lexer

"Small" does not have to mean "dirty". For my "handlebars-ng" project, I rewrote an existing JavaScript lexer from scratch and despite my focus on readable code and a concise architecture, it turned out to be smaller than the original and slightly faster.

Privacy-aware web tracking and "small-tech"

I am now tracking site-usage of various sites. But I am not tracking you. How does that work? A short glance in into the world of small tech-companies that do not sacrifices their values for profit..

Solid.js, the best of Vue and React

I recently created a new website and came across SolidJS, a relatively new web-framework. What amazed me was the fact that it combines the good things from React and Vue, leaving away the bad parts. For future projects, if it's my decision alone, I will consider it as a replacement for React.

Self hosted GitLab-Runner in VirtualBox and k3s

When I ran out of CI/CD minutes on gitlab.com, I had to find a solution to run my own GitLab-Runner, preferably so that I didn't have to pay for the computing time. I decided to run it on my own computer.

Tools for testing with msw.js

This article shows two tools that help you write tests with the mock-service-worker library.

Middleware for the mock-service-worker

The mock-service-worker can be used to mock backends. You can use it in tests, but also in demos. Unlike real http-server frameworks like express.js, the mock-service-worker does not have that notion have "middleware", and I struggled a bit my mock-authentication for the Gachou demo implemented... Here is a solution, and may be feature-suggestion for the Mock Service Worker team.

Type-safe mock-backends with Mock Service Worker and OpenAPI

We can convert OpenAPI specs to TypeScript clients. We can create mock-APIs with the mock-service-worker library. How about converting an OpenAPI spec to TypeScript types for the Mock Service Worker library. It's magic...

Mocking the backend

End-to-end tests tend to be slow and flaky. So how about using a mock backend to test your frontend. The "mock-service-worker" library helps you create such backends. And you can use it for more than just testing.

Type-safe API clients for web-frontends

Many backend frameworks, independent of the language in use, can automatically generate OpenAPI specifications the server code. We can use this specification to build documentation and a user-interface for testing. But we can also use it to generate client code for our web-frontend. Here are some code-generators.

You don't need husky for git-hooks!

When going mono-repo, I noticed that the Node.js package "husky" can actually be replaced by a single line of code. And it works for people that do not have Node.js installed.

Git: Merging multiple repositories into a mono-repo

How I converted my project of three repositories into one monorepo - without losing the git history!

My frontend tools odyssey

I actually wanted to use Preact for my pet project. Several build-tools and frameworks later, I stuck with the things that I know mostly. Read on, if you are interested in a non-comprehensive evaluation...

End-to-End testing with GitLab CI/CD

End-to-End tests require the whole application to be running. This includes backend and database - which have to talk to each other. I thought it was not possible to do such a setup in GitLab CI/CD. Now I know better.

Setup test-data for Quarkus integration tests

In Spring-Boot, creating test-data was easily done via the `@SqlGroup`. Quarkus does not support this feature. Even worse: If you want to run Quarkus-tests against a native image, you don't have access to the internals of the project at all. This article describes my way of solving the issue of providing predictable test-data to integration tests.

Clean Architecture With Quarkus

For my pet-project Gachou, I decided to use Java and Quarkus to implement the backend. And since I have used clean-architecture at work for a couple of years now, I decided to use the same thing here. A pity, that we always used Spring Boot and Quarkus has some quirks of its own in this respect. Read on, if you want to know how I solved the exercise...

Typed routes

The obvious benefits of TypeScript is type-safety in function calls, variables assignments and so on. This post describes use-cases that are not obvious, but can still help you with your typings.

Preact project setup with formatting and linting

This article describes the basic project setup of the Gachou frontend in more detail.

Gachou: Frontend Setup

Gachou Revival