Blog

Maybe you can relate to the following scenario:

You are a web developer and want to set up a simple web page, perhaps a blog, a portfolio site or really anything else that is mostly static content. You look around to find a suitable way for setting it up. Being a web developer you could of course fire up a Next.js stack and build everything from scratch but since you don’t want to do anything fancy this soon seems like a lot of overkill.

When I installed an irrigation system in my yard quite some years ago it was clear to me that I wasn’t going with the “official” controller. It was expensive, didn’t come with WiFi out of the box (that would have cost a hefty premium), thus was difficult or even impossible to integrate and it just wasn’t flexible enough.

Setting up your own private VPN got so much easier with the rise of WireGuard. Let me show you how it’s done!

I’m sure there are numerous reasons why you would set up a VPN yourself. In my particular case, I wanted to be able to connect to my home network remotely. This enables me to maintain and occasionaly fix things without the need to be physically present. Sure, for a lot of the services running on my network I could have simply just set up port forwarding to log into directly but a self-hosted VPN provides a whole lot more security and doesn’t affect usability all too much besides clicking one more button to connect (apart from the initial setup process, of course).

I wrote about Let’s Encrypt SSL certificates before on this blog but I recently discovered an even better way of doing things!

Apart from actually having a domain that you could issue a certificate for, all you need for this to work is a (free) Cloudflare account to manage your DNS records as well as have Docker installed on your server.

This is an update to my previous article on how to set up TailwindCSS with Angular 10. Apparently, packages since got updates, which change some of the steps required. Also I’ll show you a hassle-free one-line-solution that takes care of all the configuration. Amazing content coming up!

The easy way

First let me show you the lazy man’s solution. From within your project folder simply call:

IMPORTANT UPDATE: Since the release of this article, some things changed, so the solution described below will very likely no longer work. But don’t worry, I got you covered with my follow-up article!

Some time ago I started using Tailwind CSS to style my web projects. But while Tailwind is a pleasure to use, it was a major pain to get it to work nicely with Angular.

Using a CSS framework makes the life of a web developer a whole lot easier. There are a bunch of them out there, most of you probably know about Twitter’s Bootstrap, which I’ve been using for the past decade or so. But there’s a new kid on the block: Tailwind CSS.

I’ve been playing around developing some simple games (pun intended^^) from time to time, just for the fun of it. To do that I very often come across some kind of collision detection. I thought I’d show you an easy way of detecting collisions in JavaScript!

What is a collision?

Before we even start coding, we need to think about what it actually is that we want to detect. We need some conditions. For this example I’m assuming the two objects colliding are both rectangles. They have x- and y-coordinates as well as a width and a height. So far, so good. That was easy enough. Now the far more important part: how do we know if two rectangles collided?

CSV files (short for Comma-Seperated Values) are a great way to exchange tabular data in a plain text file.

This is what it might look like:

name,age,location
john,36,chicago
pierre,31,paris
james,27,newcastle

The first row of this file is called the header, telling us what each column is about. The rest of the rows are just data.