Updates, November 2020


Hi, I wanted to share some things I'm currently working on. Maybe I'll turn this into a monthly thing, who knows. :)

One major goal I set for myself in the upcoming months is to build a SaaS for freelancers. Some features of this will include handling clients, projects and expenses. A thing I'm struggeling with right now it to find a lightweight way to host it. It is currently deployable through docker containers, but I am not 100% satisfied with my current setup. I will give some updates on this in the future. I aim to release a very early alpha version for free soon, so that some people can stress test it extensively. For now, you can of course self-host it. I really don't want to impose subscription fees for it's users, but I will see how it goes. You can find the source code for it [here](https://github.com/garritfra/omega-crm).

Recently, I increasingly gained interested in the [Gemini project](https://gemini.circumlunar.space/). In a nutshell, this is a very minimal alternative to HTTP, with a strong emphasis on simplicity. The maintainers clearly embrace a DIY mindset, which I want to follow. I set myself the rule to only interact with gemini using tools I wrote myself. To achive this, I am currently writing [my own Gemini server called "Taurus"](https://git.sr.ht/~garritfra/taurus) to eventually set up my own geminispace. I have not yet looked deeply into building a client, but I might do this once I'm happy with my server. I admit that I'm currently cheating a bit, by testing my server using a browser recommended by the gemini team ;)
If you are interested in this project, I highly recommend to check out the [gemini specification](https://gemini.circumlunar.space/docs/specification.html), and play around with some geminispaces. Maybe you could set up a server for yourself?


Booleans are wasted memory


A boolean is either `true` or `false`. That translates to `1` or `0`. If you think that one bit is enough to store this information, you'd be wrong.

In order to keep the binary layout of a program simple and convenient, most languages store information in 8 bit (1 byte) blocks.
If you allocate a `bool` in Rust or (most) other languages that are based on LLVM, [it will take up 1 `i1`, or 1 byte of memory](https://llvm.org/docs/LangRef.html#simple-constants). If you allocate a boolean value in C, you will get [an integer constant with a value of either 1 or 0](https://pubs.opengroup.org/onlinepubs/9699919799/basedefs/stdbool.h.html).

If you find yourself having to store multiple boolean states somewhere, you might simply declare those booleans and call it a day:

```c
#include <stdbool.h>
#include <stdio.h>
int main()
{
    bool can_read = true;
    bool can_write = true;
    bool can_execute = false;

    if (can_read)
        printf("read bit set\n");
    if (can_write)
        printf("write bit set\n");
    if (can_execute)
        printf("execute bit set\n");

    // Output:
    // read bit set
    // write bit set
}
```

## We can do better than this

An alternative approach to store boolean values is to share a "chunk" of bits with other values. This is usually done using bitwise operations:

```c
#include <stdbool.h>
#include <stdio.h>

// Define permissions
#define PERM_NONE       0b000
#define PERM_READ       0b001
#define PERM_WRITE      0b010
#define PERM_EXECUTE    0b100

#define PERM_ALL        PERM_READ | PERM_WRITE | PERM_EXECUTE

int main()
{
    // Allocate 1 byte for permissions
    char permissions = PERM_READ | PERM_WRITE;

    if (permissions & PERM_READ)
        printf("write bit set\n");
    if (permissions & PERM_WRITE)
        printf("read bit set\n");
    if (permissions & PERM_EXECUTE)
        printf("execute bit set\n");

    // Output:
    // read bit set
    // write bit set
}
```

This example still wastes 5 bits since we only use 3 out of 8 possible bits of the char type, but I'm sure you get the point. Allocating 3 boolean values independently would waste 7 * 3 = 21 bits, so it's a massive improvement. Whenever you find yourself needing multiple boolean values, think twice if you can use this pattern.

Microcontrollers have a very constrainted environment, therefore bitwise operations are essential in those scenarios. 7 wasted bits are a lot if there are only 4 kb of total memory available. For larger systems we often forget about these constraints, until they add up.

## My Plea
* Be mindful about the software you create.
* Appreciate the resources at your disposal.


Updates, December 2020


It's christmas season! I hope you and your family are safe and sound. My main focus this month is to expand my knowledge about compilers, by [building one from scratch](https://sr.ht/~garritfra/sabre/). It's a compiler for a very simple language, but it gets the job done. So far, you can write [simple algorithms](https://git.sr.ht/~garritfra/sabre/tree/master/examples), and compile them to JavaScript. A more sophisticated C backend is in development, but I still need a plan for expanding the target-specific builtin functions to provide more features in the standard library. An important topic at the moment is the [documentation of the project](https://garritfra.github.io/sabre/). Since the compiler itself has gotten relatively stable, all the language-features now need to be captured and written down. There is also a [contributing guide](https://garritfra.github.io/sabre/developers/contributing.html), if you want to help out, or want to get into compiler design.

Stay home and stay safe!


I closed my Facebook account, and you should too


I know I should have done this a while ago, but with ever-increasing scandals about data privacy surrounding Facebook, I finally decided to get rid of it.

I haven't used the service in a long time anyway, but I always told myself "what if I needed the data later?", or "what if a friend contacted me, and I didn't respond?", "what if I missed the birthday of someone I'm close with?!". Well, according to my facebook inbox, the only messages I received lately were some random links from people I'm not really in touch with anymore. Birthdays? Do you think someone you haven't talked to in over three years will get mad at you, for forgetting their birthday? And regarding your data: you won't loose it! [This guide](https://www.facebook.com/help/212802592074644) describes how you can download a copy of your data as html and/or json.

Go ahead and ask yourself: Is there anything holding you back from deleting your Facebook account? What would you loose? How often do you even use the service? Do the social benefits of Facebook **really** outweigh the negative aspects (privacy concerns, data collection, etc.)?


100DaysToOffload


For some time now, I've seen this #100DaysToOffload hashtag on my social medias. I knew that it was some kind of writing challenge, but I never thought about taking part in it. Since I recently started to blog more frequently though, I think this challenge could be very beneficial to my writing skills, and just jotting my thoughts down in general. So, starting with this entry, I will try to publish 100 (hopefully) useful posts on this blog within one year. My "deadline" for this will be January 11, 2022. I will post every entry to [my mastodon account](https://fosstodon.org/@garritfra).

This is post 001 of [#100DaysToOffload](https://100daystooffload.com/).


Are humans still evolving?


This is by no means a scientifically accurate article. These are my thoughts, and I'd be happy to discuss this topic. Take it with a grain of salt.

Evolution builds upon natural selection. With every generation of a species, there is a slight chance of mutation, possibly giving an individual advantages or disadvantages in the ability to survive and give offspring. Somewhere way up in our evolutionary tree, a microbe might have mutated a gene that allowed it expand and retract a part of its body. As it turns out, this proves useful in fleeing from predators, while other individuals of this species might fall prey on their first day. The microbe has a slightly larger chance to survive and give offspring. On the other hand, mutations might also result in a fatal illness (cancer, in other words). Oftentimes, this individual does not survive long enough to give offspring.

150 years ago, giving birth was literally an act of life and death. Many children died at a young age. They were not tough enough from an evolutionary standpoint, and were therefore "filtered" out by natural selection. Only the strongest survived and gave offspring.

Todays medicine is (fortunately!) very powerful. Very few children die at birth and a lot less people are dying from an illness like the flu. This is an evolutionary anomaly. Natural selection has been defeated to a certain degree. We don't need to run from predators anymore and are less prone to desease. Every one of us is more or less equally able to give offspring. We can't really gain an advantage over others anymore. We are not evolving.

This is post 002 of [#100DaysToOffload](https://100daystooffload.com/).


I joined the 512KB club


JavaScript rules the web, literally. In fact, this website is built with JavaScript (Next.js). I recently started to think about if I really needed this much overhead for a simple site like this. After all, I don't have any fancy user interaction features or complex animation that would justify the JavaScript on this page.

There is a new (no, not that new) philosophy called [the lean web](https://leanweb.dev/). It essentially tries to keep websites tiny and semantically correct. This has many benefits, ranging from less pollution generated by your site to improved SEO, since many search engines favor a semantically correct website over a site that abuses JavaScript to mimic the features, that are baked into html anyway.

In order to get lean, I decided to join [the 512KB club](https://512kb.club/). This website lists sites that are below 512KB in total (uncompressed, with all dependencies). To get below that mark, I had to remove my face from the frontpage (I'm sure you'll miss it😅), since the image itself was roughly 750KB. I'm now just below 500KB, which qualifies me to join the blue team.

[![Blue Team](https://512kb.club/images/blue-team.svg)](https://512kb.club)

I'm not planning to stop here though. I think keeping a website small and simple is an excellent practice. My next step will be to get rid of all the JS junk on this site and only rely on HTML and CSS. I still want to be able to write my posts in Markdown, so I will have to come up with a way to generate pages from them. A safe bet for this would be to use a SSG like [Hugo](https://gohugo.io/). Frankly, [writing my own simple SSG probably wouldn't hurt either](https://erikwinter.nl/articles/2020/why-i-built-my-own-shitty-static-site-generator/). Let's see how high I can climb the ranks of the 512KB club. Care to join me?

This is post 003 of [#100DaysToOffload](https://100daystooffload.com/).


Compiling your own kernel


I'm currently in the midst of fiddling around with the kernel a bit, and I figured I just documented my process a bit. Unfortunately, since I'm using a Mac for day to day work, I have to rely on a virtual machine to run anything Linux-related. VirtualBox doesn't support the most recent kernels (5.9 is the most recent supported one), so there won't be any cutting-edge development happening here. I decided to use ubuntu as my guest system, since it's very easy to set up.

So, the first step is to get the sources. You could simply go ahead and download a specific release from [kernel.org](https://kernel.org/), but since I want to hack on it, I decided to go the git-route. Simply download the sources from [their repo](https://git.kernel.org/pub/scm/linux/kernel/git/torvalds/linux.git/) and check out the tag you want to build.

> **Note**: this might take a while. Their repository is huge! If you want to only need the `HEAD` and want to build on bare-metal (no VirtualBox), you could only clone the latest commit using `git clone git://git.kernel.org/pub/scm/linux/kernel/git/torvalds/linux.git --depth=1`.

Next up, you need to generate a `.config`. This file describes which features you want to compile into your kernel. To make a generic config that only compiles drivers for the hardware of your system, you can run the following commands:

```bash
# Copy the config of your current kernel into the repo
make oldconfig

# Only enable modules that are currently used by the system
make localmodconfig
```

Now, let's get to actually compiling the kernel. In my case, I assigned 4 cores to my VM. The `-j` option tells make to run 4 jobs in parallel.

> **Caution**: Just providing -j will freeze your system, since make will try to launch an infinite amount of processes!

```
make -j4
```

Again, this might take some time. Go for a walk, get a coffee or watch your favorite TV-show. After compilation has finished, we need to install the kernel. To do so, run the following commands:

```
sudo make modules_install
sudo make install
```

In order to boot, we need to tell our bootloader about our new kernel. Run this command to update your grub config:

```
sudo update-grub2
```

And voila! Your new kernel should be ready.

Reboot the system, and grub should pick up the new kernel and boot to it. If that's not the case, you should be able to pick the kernel from the grub menu under `advanced options`.

## Retrospective

I found that building my own kernel is a highly educational and fun experience. Using VirtualBox is a pain in the `/dev/null` to work with, since it has to add a lot of overhead to the system in order to work. You sometimes have to wait over 6 month until the support for a new kernel arrives. This problem should not apply if you compile on bare metal systems.

Thanks for your time!

This is post 004 of [#100DaysToOffload](https://100daystooffload.com/).


6 reasons the Fediverse is better than regular social media


Social media sucks. Platforms like Twitter, Facebook and Instagram are designed to turn your precious free time into money. What we see as a nice way to stay in touch with our friends, in reality are just many hits of dopamine stimulating precise spots in your brain, leading to you spending more time on the platform consuming ads.

But what if I told you that there is a huge ad-free social network out there, not governed by a central authority, full of great people and completely free to use? This place is called the fediverse. Well, it's not really **a** place, it's many places.

## What is the fediverse?

At its core, the fediverse is a mesh of interconnected nodes on the internet, all communicating in the same language. Every instance on the fediverse implements the [ActivityPub](https://activitypub.rocks/) protocol, which allows it to talk to other instances on the network. The phrase "Fedi" comes from "federated", meaning that content on the network is shared and accessible by anyone.

There are many different software projects for the fediverse out there. If you like the concept of Twitter, you could take a look at [Mastodon](https://joinmastodon.org/), a microblogging-platform for the fediverse. There's also [PeerTube](https://joinpeertube.org/), a federated clone of YouTube (PeerTube recently [released support for peer2peer live streaming support](https://framablog.org/2021/01/07/peertube-v3-its-a-live-a-liiiiive/), like what?! 🤯). You like instagram? [Pixelfed](https://pixelfed.org/) got you covered. Of course, there are many other services worth mentioning, so feel free to dig around a bit! As mentioned, the great thing about the fediverse is that all of these services are connected with each other. If I signed up for an account on a mastodon instance, I can subscribe to your posts on Pixelfed, and vice versa. If I want to get notified about your videos on PeerTube, I can just go ahead and follow your account and comment on your videos.

> "This all sounds great, but why should I bother?"

Let me give you 6 reasons why the fediverse is far superior to all other social media platforms out there, and why you should consider signing up for an account on one of the many instances of the fediverse.

## Reason 1: It's decentralized

Regular social media platforms like Facebook have a **single point of failure**. If their servers go down, your content goes down with it. Content on the fediverse on the other hand is scattered around many instances, which means it is very resilient. If your instance dies, you can move to a new instance. This goes hand in hand with the next reason.

## Reason 2: It can't be censored

You probably heard that the Twitter-account of Donald Trump recently got compromised by the owners of the platform. I don't want to engage in any political discussions, but the main flaw with this is the violation of **freedom of speech**. Even if everything someone says is controversial nonsense, it is still in his good right to express his thoughts.

On the fediverse, a scenario like this would certainly not happen, given its decentralized nature. Some instances still moderate their content, meaning that if someone posts inappropriate content, it might get blocked. The twist here is, if that person disagrees with the rules of the instance, he is free to join another instance.

## Reason 3: Free as in freedom

There's this saying, criticizing modern software projects:

> "If it's free, you're the product"

This is not true in all cases. "Free" can be understood in two ways.

**"Free as in beer"** means that something might seem free at first glance (E.g. Free beer at Oktoberfest), but in the end you often leave with less than you came with. In the case of beer, you often buy another beer after the first free one. Therefore, even though you think you've saved the money for one beer, in reality bought an extra beer. In the case of proprietary software, it's a similar story. While you think that a service is free, you give up your privacy and get monetized with ads.

**"Free as in freedom"** on the other hand means that you won't get "screwed over" like this. Most, if not all of the software for the fediverse is **free and open source software** (FOSS). If you don't like how a certain feature works, **you are completely free to change it**. You can look at the source code and propose changes to the main project, or launch your own spin of that product.

Since everyone can openly look at the source code, it is **audited** by many people, including security experts. This vastly improves the security and stability of the product. If the developers would do shady things, they will most certainly get called out by people, as soon as that code enters the main repositories. Proprietary (closed sourced) platforms like Facebook and Twitter can not be audited. The owners can do whatever they want, including spying on their users, or collect and sell the data of their users.

## Reason 4: It respects your privacy

Since the software on the fediverse is audited by a lot of people, you can be almost 100% certain that joining an instance will not collect any of your personal data. If you are still concerned about your privacy though, you can still be part of the network by launching your own instance, with your own rules. There are tutorials out there, explaining how you can set up a small instance for a very cheap price on your local network.

## Reason 5: It's all about the community

I used to spend a lot of time on "regular" social media platforms. From personal experiences, these platforms are all about promoting yourself and building up your follower count. Connecting with your friends is of little importance. In the eye of some people, you are not worthy to talk to if the amount of followers or likes-per-post didn't exceed a certain threshold.

It has now been about 5 months since I created [my mastodon account](https://fosstodon.org/@garritfra). Talking to people on the fediverse is a completely different experience compared to Facebook or Twitter. Almost everyone I talked to is a polite, grounded person, willing to engage in constructive and fun discussions. I met many people who disagree with my views, but instead of leaving a comment saying that this post sucks, all of them took the time to express their alternative opinions. Every member of the fediverse wants to drive the network forward, which is reflected in their posts.

## Reason 6: There's an instance for everyone

Whether you're into Gaming, Painting, or Spanish dancing music, there is an instance for you. If it isn't, you are free to create one and promote it to people of that niche. You won't loose the social aspect by launching your own instance, since you are still available to other people on the network. If you just want to get started with the fediverse, I recommend that you check out one of the many [lists of mastodon instances](https://instances.social/). If you like instagram and want to stay in a familiar environment, take a look at [Pixelfed](https://pixelfed.org/), and join an instance from the list they provide.

I myself am a person who cares a lot about free and open source software, therefore my choice of instance was [fosstodon.org](https://fosstodon.org/), a mastodon instance geared towards awesome like-minded people.

**Note**: This post has generated some interesting discussions on [Hacker News](https://news.ycombinator.com/item?id=25820646).

This is post 005 of [#100DaysToOffload](https://100daystooffload.com/).


Signal-to-Noise, or why nobody cares about your GitHub project


For a very long time, the thought of leaving GitHub and moving to another platform daunted me. Having more users on one platforms means that more people will contribute to my project, right? Wrong.

The problem with GitHub is that there's a lot of things going on around you. How many times have you discovered a cool project on GitHub, starred it and never heard from it again? In essence, this is the same phenomenon as with modern social media. A bombardment of positive stimulants makes the user crave for more, letting them forget about previously consumed content. Sure, if you just want to get your code out there, GitHub might be a great place, but if you are just starting out as a developer and you're looking for contributers and feedback, you will probably be very bummed to find out that nobody cares about your work. Many developers are using the platform because other developers are using it. Your project on GitHub is a drop in an ocean of other projects.

A few months ago, I decided to make the leap and switch most of my development over to [Sourcehut](https://sourcehut.org/), a free and open source code-hosting platform. Besides its great tooling (mailing lists, automated builds, etc.), it has the benefit of a high **signal-to-noise ratio**. Less developers are using the platform, but most of them are very passionate about their work. They care about collaborating with others and they believe in what they are doing, which probably lead them to sign up for this platform in the first place.

Of course, switching away from a platform like GitHub alone does not ensure more contributions. You might be trying to advertise your projects by spamming links on popular newsboards and forums, but this only generates **noise**. Instead, you should intentionally talk about your personal journey with the project in a smaller circle. If other developers in your niche see that you continuously give updates about the project and its improvements, they will eventually start to relate to it. Some of them will look at your project and give feedback, or even contribute patches.

This is post 006 of [#100DaysToOffload](https://100daystooffload.com/).


Using Macros in Vim


For a long time, macros in Vim were a huge mystery for me. I knew they existed, but I didn't know how or why you'd use them. A recent task of mine involved replacing the unsafe operator (`!!`) in a large kotlin codebase with a null-safe operator (`?`). This game me a good opportunity to learn about macros. This is a snippet I encountered numerous times:

```kt
mLeftButton!!.text = "Left"
mLeftButton!!.setOnClickListener(leftListener)
mLeftButton!!.visibility = View.VISIBLE
mRightButton!!.text = "Right"
mRightButton!!.setOnClickListener(rightListener)
mRightButton!!.visibility = View.VISIBLE
```

You could go ahead and change each line individually, or use the IDEs built in "multi-cursor" tool to save you some work. But, let me show you how I automated this using a Vim-Plugin for Android Studio. Not that the plugin matter, it will work in every Vim-like editor.

A macro in Vim works like this:

1. Record any sequence of keystrokes and assign them to a key
1. Execute that sequence as often as you wish

So let's see how we'd do that.

## Recording a macro

To record a macro in Vim, you press `q` (In normal mode) followed by a key you want to assign the macro to. So, if you wanted to record a macro and save it to the `q` key, you'd press `qq`. Vim will notify you that a macro is being recorded. Now, you can press the keystrokes that define your actions. When you're done, press `q` in normal mode again to quit your macro.

Coming back to my task, I would want to do the following:

1. `qq` Record a macro and save it to the `q` key
1. `_` - Jump to the beginning of the line
1. `f!` - Find next occurrence of `!`
1. `cw` - Change word (Delete word and enter insert mode)
1. `?.` - Insert the new characters
1. `<esc>` - Enter normal mode
1. `j` - go down a line
1. `q` - Finish macro

If everything went right, this line:

```
mLeftButton!!.text = "Left"
```

Should now look like this:

```
mLeftButton?.text = "Left"
```

and your macro should be saved under the `q` key.

## Using the macro

In order to use a macro in vim, you press the `@` key, followed by the key the macro is saved under. Since our macro is defined as `q`, we'd press `@q`, and the macro is executed immediately.

Let's take this further. You might have noticed that I went down a line before closing the macro. This becomes handy when you want to execute it many times. In our case we have 6 lines we want to refactor. 1 line has already been altered, so we have to execute it 5 more times. As per usual with vim, you can execute an action n times by specifying a number before doing the action. Let's press `5@q` to execute the macro 5 times. And voila! Our unsafe code is now null-safe.

```kt
mLeftButton?.text = "Left"
mLeftButton?.setOnClickListener(leftListener)
mLeftButton?.visibility = View.VISIBLE
mRightButton?.text = "Right"
mRightButton?.setOnClickListener(rightListener)
mRightButton?.visibility = View.VISIBLE
```

Macros are really satisfying to watch, if you ask me!

This is post 007 of [#100DaysToOffload](https://100daystooffload.com/).


From sudo to doas


You might have heard that there is currently [a pretty significant vulnerability](https://www.qualys.com/2021/01/26/cve-2021-3156/baron-samedit-heap-based-overflow-sudo.txt) affecting `sudo`, the program we all know and love. It is the de facto standard for when you want to run a command as a priviledged user, but that's really it. Under the hood, sudo is a very powerful tool with a lot of features. It can be used to build out complex permission-systems that span across entire clusters of servers. But all of these features come at a price: **complexity**. Last time I checked, the [source code](https://www.sudo.ws/repos/sudo) of sudo had about 330k lines of code (using cloc as a benchmark). This massive complexity plays a large role in its security.

Luckily, there is a **far** more lightweight alternative to sudo called [doas](https://github.com/Duncaen/OpenDoas.git). It essentially does all the things you'd expect from sudo for your average end user. Doas is written in just over 3k lines of code, which, if you think of it, should be more than enough to provide a tool that executes a command as a priviledged user.

## Setup

While there are packages for [some distibutions](https://github.com/slicer69/doas#installation-via-packagesrepositories), I personally had trouble setting it up on arch using yay (for permission reasons, ironically). I recommend going the extra mile and building it from source, which consists of a few commands and some seconds of your time:

```sh
git clone https://github.com/slicer69/doas
cd doas
make
sudo make install
```

Next, you will need to create a config file at `/usr/local/etc/doas.conf`. Paste the following line into it to give your user root access:

```sh
permit alice as root
```

You obviously want to substitute alice with your username. If you have multiple users on your system, simply duplicate that line and substitute the username accordingly. Just restart your terminal window, and you should be able to run programs as root using doas instead of sudo:

```sh
➜  ~ doas id
uid=0(root) gid=0(root) groups=0(root)
```

## Bonus: Save your muscle memory

If you still want to "use" sudo on your machine, you can set up a simple alias in your `.{bash|zsh|fish}rc`. This will also help with compatibility issues of some scripts, if you decide to ditch the actual sudo from your Box entirely. Just paste this line into your corresponding rc file:

```
alias sudo="doas"
```

## Bonus Bonus: Passwordless authentification

You can setup doas to skip the password prompt every time you run a command with it. Simply add the `nopass` option in your doas configuration file:

```sh
permit nopass alice as root
```

I hope you found this useful!

This is post 008 of [#100DaysToOffload](https://100daystooffload.com/).


Notes about BEM (Block Element Modifier)


In the coming weeks, months and years, I will be working on frontend-development as part of my dayjob. These are some personal notes I took during my research about the BEM methodology. If you want to read the official introduction, you should visit [their website](http://getbem.com/).

# Overview - What is BEM?

BEM — Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development. It aims to group css-classes in a meaningful way, making it easier to understand

1. where this class is used
2. what it describes and
3. what state the element is in.

The BEM-notation is divided into three main parts: Blocks, Elements and Modifiers.

## Blocks

A standalone entity that is meaningful on its own. Some examples might be **headers, containers, menus, inputs, checkboxes**, etc.

## Elements

A part of a block that has no standalone meaning and is semantically tied to its block. This could be a **menu item or an input placeholder**.

## Modifiers

A flag on a block or an element. Used to change appearance or behavior. This might be **disabled, checked, fixed, big**, etc.

# Putting it together

A block itself is referenced though its name.

```css
.button {
}
```

To reference elements inside of the block, you add it to the block element with two underscores (`__`):

```css
.button {
}
.button__text {
}
```

If you want to add a modifier to a block or an element, you separate it with two dashes (`--`):

```css
.button {
}
.button--disabled {
}
.button__text--inverted {
}
```

# Benefits of BEM

**Modularity**: Block styles never depend on one another. They can easily be moved to other parts of the app.

**Reusability**: Composing styles in a meaningful way reduces the amount of code duplication.

**Structure**: BEM gives your code a solid structure that is both easy to understand and to expand.

# References

- http://getbem.com/
- https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

This is post 009 of [#100DaysToOffload](https://100daystooffload.com/).


My storage setup (Feburary 2021)


I used to rely on Google Drive and Photos to store my entire data. Now, that [Google has decided to ditch unlimited photo storage in the near future](https://blog.google/products/photos/storage-changes/) and Google basically being the devil himself, I decided to step up my game and get my hands dirty on a DIY storage solution.

## The goal

Before I got started, I thought about the expectations I have towards a system like this. It boils down to these four points (in this order): I want my solution to be **resiliant**, **scalable**, **easy to maintain** and **easy to access**. Looking back, I think I met all of these requirements fairly well. Let me walk you through how I managed to do that.

## Data resiliance

Keeping data on a single device is obviously a really bad idea. Drives eventually fail, which means that your data will be lost. Heck, even my house could burn down, which means that any number of local copies could burn to ashes. To prevent data loss, I strictly adhere to the [3-2-1 backup strategy](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/). A 3-2-1 strategy means having **at least three total copies of your data, two of which are local but on different mediums (read: devices), and at least one copy off-site**. If a drive fails, I can replace it. If my house burns down, I get two new drives and clone my offsite backup to them.

To get an offsite backup, I set up a spare Raspberry Pi with a single large HDD and instructed it to do daily backups of my entire data. I asked a family member if they would be willing to have a tiny computer plugged in to their router 24/7, and they kindly agreed. A Pi and a HDD are very efficient in terms of power, so there is not a lot to worry about.

## Scalability

I currently don't have a huge amount of data. If that were to change (i.e. if I continue to shoot a lot of high-res photos and shove them into my setup), I need a way to simply attach more drives, or ones with more capacity. I looked at different file-systems that allowed to easy extendability while also being resiliant.

An obvious candidate was **ZFS**, but there are a couple of reasons I ditched this idea. First of all, it is really hard to get up and running on Raspberry Pi running Linux, since it's not natively supported by all distributions. This increases the complexity of the setup. Another reason is that I don't like the way it scales. Please correct me if I'm wrong here, since I only did limited research on this. From what I know though, ZFS can only be extended by shoving a large amount of drives in the setup to achieve perfect redundancy.

In the end, I settled on **BTRFS**. For me, it scratches all the itches that ZFS has. It is baked into the linux kernel, which makes it really easy to install on most distributions, and I can scale it to any number of drives I want. If I find a spare drive somewhere with any storage capacity, I can plug it into the system and it will just work, without having to think about balancing or redundancy shenanigans.

## Maintainability

I need my setup to be easy to maintain. If a drive fails, I want to be able to replace it within a matter of minutes, not hours. If my host (a Raspberry Pi) bursts into flames, I want to be able to swap in a new one and still access my data. If I'm out and about and something goes south, I want to be able to fix it remotely. BTRFS helps a lot here. It's really the foundation for all the key points mentioned here. It gives me a simple interface to maintain the data on the drives, and tries to fix issues itself whenever possible.

Exposing random ports to the general public is a huge security risk. To still be able to access the Pi remotely, I set up **an encrypted WireGuard tunnel**. This way, I only have to expose a single port for WireGuard to talk to the device as if I'm sitting next to it.

## Accessibility

Since the data needs to be accessed frequently, I need a simple interface for it that can be used on any device. I decided to host a **Nextcloud** instance and mount the drive as external storage. Why external storage? Because Nextcloud does some weird thing with the data it stores. If I decide to ditch Nextcloud at some point, I have the data on the disks "as is", without some sort of abstraction on top of it. This also has the benefit of allowing access from multiple sources. I don't have to use Nextcloud, but instead can mount the volume as a FTP, SMB or NFS share and do whatever I want with it. From the nextcloud perspective, this has some drawbacks like inefficient caching or file detection, but I'm willing to make that tradeoff.

## In a nutshell

This entire setup cost me about 150€ in total. Some components were scraped from old PC parts. So, what does the solution look like? Here is the gist:

- A Raspberry Pi 4 as a main host and an older Raspberry Pi 3 for offsite backup, both running Raspberry Pi OS
- Two external harddrives in a RAID 1 (mirrored) configuration, running on an external USB3 hub
- A single internal HDD that served no purpose in my old PC, now serving as backup storage
- All drives are using BTRFS
- WireGuard tunnels between main and remote host, as well as most access devices
- Nextcloud on main host, accessible over TLS (if I need to access data from outside the secure tunnel-network)
- SMB share accessible from within the tunnel-network
- Circa 4.5 terabyte total disk size; 1.5 terabyte of usable storage
- Snapper for local incremental backups on main host; BTRBK for remote incremental backups
- Cron jobs for regular backups and repairs (scrub/rebalance)

This is post 010 of [#100DaysToOffload](https://100daystooffload.com/).


Thoughts after 10 Days of 100DaysToOffload


Coming into this, I didn't know what to expect. I'm not a huge writer, but so far I am pleasantly surprised about how relaxing this challenge is.

At first glance, writing a blog post every 3-5 days seems daunting. But the more I write, the more it becomes an enjoyable habit. I'm oftentimes looking forward to writing these posts. Whenever I have something on my mind, I jot it down without a plan or structure. And that's exactly the point of [#100DaysToOffload](https://100daystooffload.com/): **Just. Write.**

So far, these blog posts have helped me get a lot of my thoughts out of my head and onto paper (or on a screen). While writing, I reflect on what I think. I sometimes realize that what I thought is utter nonsense, but this in itself is an important reflection. With each post, I feel like I am getting more confident about the process.

If you're reading this and you don't have a blog yet, I would encourage you to give this technique a try. It doesn't matter that you produce quality content, nor does anyone have to see this. It's not the content that matters, but the process of producing it. Set up your own blog on [write.as](https://write.as/) or simply open your text editor of your choice and **Just. Write.**

This is post 011 of [#100DaysToOffload](https://100daystooffload.com/).


Flutter Web - the Good, the Bad and the Ugly


These are some notes I took for the evaluation of Flutter web for a potential project at work. I decided to build a frontend for [Miniflux](https://miniflux.app/), since I figured it may enclose many pitfalls an application could potentially have. You can find the current prototype [here](https://github.com/garritfra/FlutterFlux).

## The Good

- **Trivial to set up**: Running a Flutter application in a browser, no matter if it is an existing app or a fresh project, can be done by simply specifying the -d chrome flag.

- **Same behavior compared to mobile app**: Since the app is quite literally a mobile application running in the browser, the page looks and feels like a mobile application. It gives the app a consistent look and feel across all devices. I can imagine this coming in handy for web applications that are primarily used on phones and tablets.

- **Browser API integration**: It seems like many of the libraries make use of Web APIs. For example: I was able to get location updates using the location package, and store data using [localstorage](https://pub.dev/packages/localstorage). Whether the Web target is supported, is noted as a flag in the package documentation.

- **Alternative Backends**: There are two [rendering backends](https://flutter.dev/docs/development/tools/web-renderers), both with its own benefits and drawbacks. The HTML renderer optimizes the page for the browser, which improves performance at the cost of consistency. The CanvasKit renderer renders WebGL using WebAssembly. This gives a consistent look and feel across all devices, at the cost of Performance and download size. If auto is specified, the renderer will be determined based on the device type. Here’s a comparison of the same app rendered with both backends:

|           HTML           |         CanvasKit         |
| :----------------------: | :-----------------------: |
| ![](/assets/flutter_web_renderer_html.png) | ![](/assets/flutter_web_renderer_canvaskit.png) |

## The Bad

- **Still in Beta**: Flutter web requires the developer to use the beta channel of Flutter. I didn’t encounter any issues, but it could be that some features are unstable.

- **No native HTML (With an exception)**: Flutter Web renders the application into its own container, which is not using semantic HTML. The resulting application is also not debuggable using standard web-dev tools, but flutters debugging features can be used. There is a workaround though. Using the [easy_web_view](https://pub.dev/packages/easy_web_view) package, I was able to embed html components as flutter widgets. The embedded code is actual HTML code that the browser itself is rendering, not Flutter. This solution is cross-platform, meaning that it also works flawlessly for mobile builds of the application. This might come in handy if the project demands to embed a javascript component like a video player. This approach could technically also improve SEO, but I’m unsure how a full-blown application only using this approach would behave.

## The Ugly

- **Scrolling feels sluggish**: The scrolling behavior is implemented by flutter itself and does not feel as smooth as the native scrolling behavior of modern browsers.

- **SEO nearly impossible**: Since the application is a SPA and it is not using semantic HTML, it’s very difficult to do any kind of SEO. Lighthouse rated the demo application with a perfect 100 for SEO, but this is probably because it is only aware of the html that surrounds the flutter container. I didn’t find a way to Inject Metatags on a per-site basis.

- **Heavy and slow on old devices**: Even a basic application like the Todo app is very heavy and slow when compared to a “regular” website.

## Conclusion

Flutter Web seems to be a viable candidate to build truly cross-platform applications. Adding Web as a target for existing Flutter mobile apps should be relatively easy. The layout will probably need to be optimized to get the full experience. Native Web APIs seem to be well supported and documented.

The resulting web application is a PWA running inside a container. It is relatively heavy and requires much more resources to run, when compared to a “regular” web application.

I hope you found this useful!

This is post 012 of [#100DaysToOffload](https://100daystooffload.com/).


Writing good changelogs


Today, I finally added a proper changelog to [my current project](https://github.com/garritfra/sabre/blob/master/CHANGELOG.md). My obvious first step was to search the web for `changelog.md`, since that's the naming convention many projects are using for their changelog. I was surprised that I was immediately redirected to "[changelog.md](https://changelog.md)", since it is a valid domain name. This website is a great guide on the essense of a good changelog. This is also where I got most of my findings from. Let me walk you through some of the most important ones:

## Changelogs are a vital part of every serious project

The whole point of a changelog is to keep track of how the project evolves over time. When working with multiple people, it helps getting everyone on the same page. Keeping a changelog reduces a possible monopoly of information, since all contributers know what is going on. Of course, users also benefit from your changelog. They will know what changes they can expect when they do an update.

## Entries should have a standardized format

Changelogs are mainly meant to be readable by humans. Here are some important points to watch out for when writing a changelog:

- Every version of your software (major, minor and patch) should have one section and one section only
- Recent releases should be added at the top of the changelog (reverse chronological order)
- Each version _should_ display its release date in ISO format (YYYY-MM-DD) next to the version name

## What types of changes need to be included?

You could just go ahead and throw some changes in a big list and call it a day. To make the changelog more readable though, you should categorize every change by its type. Here's an example of a set of categories that could be included:

- **Features**: New features or additions
- **Fixes**: Bugfixes
- **Security** Important changes regarding holes in your security
- **Documentation**: Changes or additions in your documentation should go here

This is just an example that illustrates how **I** decided to note down my changes. [changelog.md](https://changelog.md) suggests a slightly different convention, but how you're handling it doesn't really matter.

## An example

Here's an example of how a changelog could look like. It's taken from [Sabre](https://github.com/garritfra/sabre), a project I'm currently working on. The full changelog can be found [here](https://github.com/garritfra/sabre/blob/master/CHANGELOG.md).

```md
# Changelog

## v0.4.0 (2021-02-20)

This release introduces the concept of structs, alongside many improvements to the documentation.

**Features**

- Assignment operators (#10)
- Structs (#12)

**Fixes**

None

**Documentation**

- Fixed some typose and broken links
- Document boolean values
- Added this changelog!

## v0.3.0 (2021-02-12)

This release adds type inference to Sabre. There are also a lot of improvements in terms of documentation. The docs are now at a state that can be considered "usable".

**Features**

- Type inference
- The `any` type
- First attempt of LLVM backend

**Fixes**

- Fixed an error when printing numbers

**Documentation**

- Added documentation for for loops
- Added documentation for while loops
- Documented LLVM backend
- Documented comments
- Updated contributing guidelines
```

## Personal recommendations

When releasing a new version, don't just add an entry to your changelog. You should use **git tags** whenever working with versions, to mark the exact commit of the released version.

Read up on **semantic versioning**! This is the most common convention when it comes to versioning your software. ([here](https://www.geeksforgeeks.org/introduction-semantic-versioning/) is a simple guide, [here](https://semver.org/) is the official specification).

I'd also advise you to keep a log of your commits in the description of the tag. Here's a command that does all of this for you:

```
git tag -a <new release> -m "$(git shortlog <last release>..HEAD)"
```

So, if you're releasing version `v0.2.0` after `v0.1.5`, you would run this command to tag your current commit with a good commit history:

```
git tag -a v0.2.0 -m "$(git shortlog v0.1.5..HEAD)"
```

This is post 013 of [#100DaysToOffload](https://100daystooffload.com/).


Strategies to use a terminal alongside (Neo)Vim


One thing that bothered me about vim for a long time, was the lack of a terminal
directly in your editor. If I'm not using Vim, I'm most definetely using VSCode
and its built-in Terminal. After searching the webs for possible solutions, I
came across a couple of strategies to achive this.

## Executing single commands

If you just want to issue a single command without spawning an entire shell,
you can just use the `:!` command:

```
:! printf "Hello Sailor"
```

## Vims builtin terminal

I couldn't believe my eyes when I read this, but Vim ships with a builtin
terminal! Executing `:term` will spawn it in your current buffer. How you 
integrate it in your workflow is up to you. You could use tabs or open a 
horizontal buffer and spawn it there. I must say that it is rather clunky to
use, since its literally a Vim buffer that forwards stdin and stdout to the
buffer, but it's there for you to use.

## Vim x Tmux

Another great alternative is to set up Tmux with two windows, one for Vim and 
one for your terminal, and switch between them. This works great on a minimal
system, but on MacOS for example, it is easier to simply use cmd+1 and cmd+2 to
switch between two tabs of the Terminal application.

## Pausing and resuming Vim

This one is my personal favorite. The idea comes from
[this](https://stackoverflow.com/a/1258318/9046809) stackoverflow answer.

The plan is to pause the Vim process and resume it later. To pause Vim, you 
press `<ctrl>-z`. This sends the process in the background. Then, to resume the
process, simply issue the `fg` command and Vims process resumes in the 
foreground.

## Conclusion

I'm sure there are many more strategies that could be added to this list. I'd be
interested to hear how your setup works! If you liked these techniques, you 
might be interested in 
[@lopeztel](https://fosstodon.org/web/accounts/211905)s 
[cheat sheet](https://lopeztel.xyz/2021/02/21/my-neovim-cheatsheet/) for Vim.




This is post 014 of [#100DaysToOffload](https://100daystooffload.com/).


Git's built-in lifesaver


Everyone was in this situation at some point. You wasted a days worth of work by accidentally deleting a branch. But, all hope is not lost! Git never forgets. 

Every action, be it committing changes, deleting or switching branches, is noted down by Git. To see your latest actions, you can simply run `git reflog` (It's pronounced `ref-log` but `re-flog` sounds just as reasonable):

```
5704fba HEAD@{45}: commit: docs: update changelog
b471457 HEAD@{46}: commit: chore: refactor binop checks in parse_expression
5f5c5d4 HEAD@{47}: commit: fix: struct imports
76db271 HEAD@{48}: commit: chore: fix clippy warning
ac3e11c HEAD@{49}: commit: fix: circular imports
0cbdc88 HEAD@{50}: am: lexer: handle ' or " within the string properly
27699f9 HEAD@{51}: commit: docs: spec: add notation
```

Commits in Git are just data that is not associated by anything. If you accidentally delete a branch, the commits will stay where they are, and you can reference them directly. To recreate your deleted branch, simply run this command:

```
git checkout -b <branch> <sha>
```

And that's it! Your branch is restored. Remember to commit early and often, or prepare to loose your work!

This is post 015 of [#100DaysToOffload](https://100daystooffload.com/).


A pretty good guide to pretty good privacy


In the past week, I've been experimenting with PGP, or GPG in particular. In a nutshell, PGP is an encryption standard with a wide range of use cases. For quite some time, I didn't see the point of keeping a PGP keypair. It seemed like a burden to securely keep track of the key(s). Once you loose it, you will loose the trust of others. But after doing some research on the topic, I found that it's not actually that much of a hassle, while giving you many benefits.

# The Why

The most obvious benefit is encrypting and decrypting messages and files. If you upload your public key, I can encrypt our private conversations. Nobody will be able to read what we're chatting about. If you fear that cloud providers will read through your documents, you can also go ahead and encrypt all of your data with your keypair.

But PGP is not just about encryption. A keypair also gives you a proof of identity. If I see that a piece of work is signed by you, I can be certain that you and only you have worked on this. By signing the keys of people we trust, we build a "chain of trust". A key with many signatures generally has a higher reputation than one without any signatures.

Take Git commits for example. All it takes is a `git config user.email "elon@spacex.com"` and I can publish code under a different identity. But if everyone on the team signed their work, they will quickly see that a commit is missing its signature, because I'm simply not able to sign my work with Elon Musk's keypair. Only if they see a badge like this, they will know that they can trust it.

Your keypair can also come in handy as a SSH key. Before I knew about PGP, I always had to install one key per machine I was working on. With PGP, you only have a single identity, and therefore you only have to install one key on your servers.

# The How

Let's first go over the process of setting up a keypair. For this, we will need the `gpg` command installed on our system. Usually, this is just a `<package manager> install gpg` away. Then, we will have to generate a keypair. The quickest way to get one is to use `gpg --gen-key`, but that will make some quirky assumptions about how you want to use your key.

In PGP, there is this concept of a **keyring**. A keyring has one master key and many subkeys. It is generally a good idea to have one fat master key that never expires and many small subkeys that last about a year or two. The benefit of structuring your keys like this is that you will always have your trusted keychain, and in case something goes south, E.g. your key gets compromised, you can replace that subkey and keep your identity.

With that in mind, let's create our master key. Run `gpg --full-gen-key` and follow the instructions. You probably want to use the `RSA and RSA (default)` option, and a key that is 4096 bits long (remember, this is the fat master key that never expires, so it must be secure). The comment can be left blank, unless you know what you are doing with that field. Enter a strong passphrase! If your private key were to get compromised, this passphrase is your last line of defense. Make it long, hard to crack but still rememberable. If everything went well, your key should be generated. Here's the full example output:

```
root@c6acc9eb4fd1:/# gpg --full-gen-key
gpg (GnuPG) 2.2.19; Copyright (C) 2019 Free Software Foundation, Inc.
This is free software: you are free to change and redistribute it.
There is NO WARRANTY, to the extent permitted by law.

Please select what kind of key you want:
   (1) RSA and RSA (default)
   (2) DSA and Elgamal
   (3) DSA (sign only)
   (4) RSA (sign only)
  (14) Existing key from card
Your selection? 1
RSA keys may be between 1024 and 4096 bits long.
What keysize do you want? (3072) 4096
Requested keysize is 4096 bits
Please specify how long the key should be valid.
         0 = key does not expire
      <n>  = key expires in n days
      <n>w = key expires in n weeks
      <n>m = key expires in n months
      <n>y = key expires in n years
Key is valid for? (0)
Key does not expire at all
Is this correct? (y/N) y

GnuPG needs to construct a user ID to identify your key.

Real name: Foo
Name must be at least 5 characters long
Real name: Foo Bar
Email address: foo@bar.com
Comment:
You selected this USER-ID:
    "Foo Bar <foo@bar.com>"

Change (N)ame, (C)omment, (E)mail or (O)kay/(Q)uit? O
We need to generate a lot of random bytes. It is a good idea to perform
some other action (type on the keyboard, move the mouse, utilize the
disks) during the prime generation; this gives the random number
generator a better chance to gain enough entropy.
We need to generate a lot of random bytes. It is a good idea to perform
some other action (type on the keyboard, move the mouse, utilize the
disks) during the prime generation; this gives the random number
generator a better chance to gain enough entropy.
gpg: key C8E4854970B7A1A3 marked as ultimately trusted
gpg: revocation certificate stored as '/root/.gnupg/openpgp-revocs.d/4E83F95221E92EDB933F155AC8E4854970B7A1A3.rev'
public and secret key created and signed.

pub   rsa4096 2021-04-07 [SC]
      4E83F95221E92EDB933F155AC8E4854970B7A1A3
uid                      Foo Bar <foo@bar.com>
sub   rsa4096 2021-04-07 [E]
```

You could stop here and use this key, but let's instead create some subkeys under that key, to make our lives a bit easier. Take the fingerprint of the key (that large number in the output) and run `gpg --edit-key --expert <your fingerprint>`. Run `addkey` three times to add these three keys:

## Signing key

This key will be used to sign your work (git commits, tags, etc.).

```
gpg> addkey
```

1. Choose option "RSA (set your own capabilities)", which is currently number 8.
1. Toggle E (Encryption) so the "Current allowed actions" only lists Sign and confirm with Q.
1. Choose the keysize 2048 (or whatever you prefer).
1. Choose the key expire date 1y (or whatever you prefer).
1. Confirm twice, then enter your passphrase.

## Encryption key

This key will be used to encrypt and decrypt messages.

```
gpg> addkey
```

1. Choose option "RSA (set your own capabilities)", which is currently number 8.
1. Toggle S (Sign) so the "Current allowed actions" only lists Encryption and confirm with Q.
1. Choose the keysize 2048 (or whatever you prefer).
1. Choose the key expire date 1y (or whatever you prefer).
1. Confirm twice, then enter your passphrase.

## Authentication key

This key will be used for SSH authentication.

```
gpg> addkey
```

1. Choose option "RSA (set your own capabilities)", which is currently number 8.
1. Toggle S (Signing), E (Encryption) and A (Authentication) so the "Current allowed actions" only lists Authenticate and confirm with Q.
1. Choose the keysize 2048 (or whatever you prefer).
1. Choose the key expire date 1y (or whatever you prefer).
1. Confirm twice, then enter your passphrase.

Now you should have one key per use case: signing, encrypting and authentication, each with an expiration date:

```
sec  rsa4096/C8E4854970B7A1A3
     created: 2021-04-07  expires: never       usage: SC
     trust: ultimate      validity: ultimate
ssb  rsa4096/C5F71423813B40A0
     created: 2021-04-07  expires: never       usage: E
ssb  rsa2048/52D4D1D19533D8A5
     created: 2021-04-07  expires: 2022-04-07  usage: S
ssb  rsa2048/072D841844E3F949
     created: 2021-04-07  expires: 2022-04-07  usage: E
ssb  rsa2048/42E4F6E376DD92F6
     created: 2021-04-07  expires: 2022-04-07  usage: A
[ultimate] (1). Foo Bar <foo@bar.com>
```

Save your key, and optionally upload it to one of the many keyservers:

```
gpg> save

$ gpg --keyserver keys.openpgp.org  --send-keys foo@bar.com
```

**Pro tip**: To set a default keyserver (I use `keys.opengpg.org`, but there are many others out there!), simply add it in your `~/.gnupg/gpg.conf` file:

```
keyserver keys.openpgp.org
```

People can now import your public key via `gpg --keyserver keys.opengpg.org --search-keys foo@bar.com`.

We're done with the setup, let's put our keys to use!

## Code Signing

To sign your code, you will have to tell git which key to use. Edit your global git options (`~/.gitconfig`) and add these fields:

```
[commit]
	gpgsign = true
[tag]
	gpgsign = true
[user]
    name = Foo Bar
	signingkey = 52D4D1D19533D8A5      # Use the ID of your signing key
	email = foo@bar.com
```

Now, whenever you add a commit, git will sign it with your key. You will have to let your git hosting provider know that this key is yours. Go to your account settings and look for a tab that says "Manage (GPG) keys". Where this tab is depends on your choice of service. Next, run `gpg --export --armor <your master key id>` and copy the resulting key into the input field of your git hosting service.

Whenever you push a commit, its signature will be checked against that of your account. And that's all the magic!

![A signed commit](/assets/signed_commit.png)

## Encrypting messages

In order to send an encrypted message to someone, you will need his public key. There are numerous ways to obtain a public key of someone. The simplest way is to ask the person for the raw key. If it's in a text file, you can import it like so:

```
cat some_key.txt | gpg --import
```

Oftentimes, people will store their keys on a keyserver, just like you have probably done it. To import someones key, simply search for it on a keyserver. I'll use my key here as an example.

```
gpg --keyserver keys.openpgp.org  --search-keys garrit@slashdev.space
```

Now, your computer should know about my key. To verify that it's actually me you have imported, you can check if the output of `gpg --fingerprint garrit@slashdev.space` matches my actual fingerprint: `2218 337E 54AA 1DBE 207B  404D BB54 AF7E B093 9F3D`.

Optionally, if you trust that the key is actually associated to me, you can sign it. This let's other people know that you trust me, which helps build a so called "chain of trust". A key which has been signed by many people is generally more trustworthy than one that has no signatures.

```
gpg --sign-key garrit@slashdev.space
```

Now, let's encrypt a message that only I will be able to read:

```
printf "If you can read this, you've successfully decrypted this message" | gpg --encrypt --sign --armor -r garrit@slashdev.space
```

Feel free to send this message to my email-address, I'm happy to chat with you!

Decrypting something is as easy as encrypting something. Say the encrypted message lives in `message.txt.asc`. If you are the recipient, all you have to do is to run `gpg --decrypt message.txt.asc`.

## SSH

Your PGP key can also be used as an SSH key to authenticate on your servers.

First we need to add the following to `~/.gnupg/gpg-agent.conf` to enable SSH support in gpg-agent.

```
enable-ssh-support
```

Next, we'll need to tell gpg which key to use. We need to get the so called `keygrip` of your authentication key and add it to the `~/.gnupg/sshcontrol`. The keygrip can be obtained by running `gpg -K --with-keygrip`. Just copy the keygrip of the authentication key and paste it into the `~/.gnupg/sshcontrol` file.

Then, we want the ssh agent to know where to look for the key. Put this in your `.bashrc` file (or corresponding config):

```
export GPG_TTY=$(tty)
export SSH_AUTH_SOCK=$(gpgconf --list-dirs agent-ssh-socket)
gpgconf --launch gpg-agent
```

Then, run `ssh-add -l` to load the key directly. 

To get the public ssh key of your keypair, run this command:

```
gpg --export-ssh-key foo@bar.com
```

and add the output to the `~/.ssh/authorized_keys` file on your server. When signing in, you should be prompted to enter the passphrase of your key and then authenticated.

## Closing thoughts

I hope by now you see the benefits you gain from having a PGP keypair. Whether you find it useful enough to set one up is of course up to you. It is however a good practice to at least sign your git commits as a proof of identity. There are services like [Keyoxide](https://keyoxide.org) that let you keep a "public record" of your key, so that other people can verify your identity more easily. If you set up your key, let me know by sending an encrypted message!

This is post 016 of [#100DaysToOffload](https://100daystooffload.com/).


Docker healthchecks using healthchecks.io


I'm currently in the midst of improving the monitoring of my infrastructure. I
make heavy use of docker and docker-compose for my hosting, so it's vital to add
monitoring for most of the containers.

I'm hosting my own instance of [healthchecks.io](https://healthchecks.io/).
Their solution to monitoring involves **you** having to ping **them**, instead
of the other way around. This let's you add healthchecks to virtually anything
that can ping a http-endpoint.

docker-compose let's you define healthchecks to your config that, when
completing sucessfully, mark the container as "healthy". The process of adding
such a healthcheck is simple. First, create a new check in your healthchecks.io
account and set the ping interval to 1 minute, or a value you prefer. Then, add
this snippet to your docker-compose file:

```yaml
app:
    image: nextcloud
    ports:
        - 127.0.0.1:8080:80
    healthcheck:
        test:
            [
                "CMD",
                "curl",
                "-f",
                "https://app-endpoint.tld",
                "&&",
                "curl",
                "-fsS",
                "-m",
                "10",
                "--retry",
                "5",
                "-o",
                "/dev/null",
                "https://healthchecks.io/ping/<UUID>",
            ]
        interval: 60s
        timeout: 10s
        retries: 6
```

Change the first url to the url of your app. The second URL is the endpoint of
your healthchecks.io instance. You can obtain it from the check you configured
earlier.

This configuration will try to ping your application and, if successful, notify
the healthcheck that the application is healthy. If the app is not reachable or
the container is down, the latter request will not be executed and your service
is marked as "down".

In addition to the healthchecks of my docker containers, I also added basic
healthchecks to my servers cronfiles and its backup-commands.

Do you have any suggestions regarding this topic? Feel free to reach out to me
via Matrix or email!

This is post 017 of [#100DaysToOffload](https://100daystooffload.com/).


Fun with Pen and Paper: Race Cars


I recently came across some fun games that can be played using nothing but a
pen and some paper. One of those games was called "Race Cars" and I wondered
how on earth you would play a racing game on paper, and the answer is: simple
math!

## The core idea

The goal of the game is to cross the finish line of a hand-drawn race track
first without hitting the edge. Race cars have a velocity that can be adjusted
each move. If you're too greedy, you will crash. If you hit the breaks too
early, another player will win.

## How it's played

We start out with a hand-drawn race track. The shape really can be anything you
like. Just be creative!

![A race track on paper](/assets/paperracer/0.jpg)

Next, each player makes a cross on the starting line. This resembles the
players racecar. Right now, none of the cars is moving. They have a velocity of
0 on the x axis and 0 on the y axis.

![Two crosses on the starting line](/assets/paperracer/1.jpg)

Each move, a player can accelerate or decelerate his vehicle by 1 on any axis.
The first move of each player is somewhat obvious. They want to accelerate
straight forward. On our race track, that means accelerate by 1 on the y axis.

![A race car made a move](/assets/paperracer/2.jpg)

Next, we can either keep on accelerating like the red player does, or "turn"
our vehicle left by changing our y velocity from 0 to -1, which gives us a
velocity of -1, 1.

![Paper race cars after two moves](/assets/paperracer/3.jpg)

On a long stretch, the red player wants to overtake blue by keeping his foot on
the paddle. Blue on the other hand plays it safe and hits the breaks.

![Paper race cars on a long stretch](/assets/paperracer/4.jpg)

Soon after, red realizes his mistake. Being so busy trying to turn, he's unable
to hit the breaks. A crash is inevitable. Blue however continues to take the
turn nice and slow. His humble mind brought him victory!

![The red player right before crashing into a wall](/assets/paperracer/5.jpg)

## It's all about fun

The concept of this game is very flexible. You can play it with a friend and
see who's the fastest paper racer, or by yourself and try to beat your record.
Getting tired of just cruising around? Introduce the concept of "items" that
give you a boost or slow down the opponent (think Mario Kart!). If ordinary
tracks are boring, try adding intersections or obstacles. Can you add a third
dimension? The sky is the limit. Get out there and be creative.

This is post 018 of [#100DaysToOffload](https://100daystooffload.com/).


Finally fixing that annoying Cron gotcha


A while ago I went through my server and reworked my [storage
setup](/posts/2021-02-07-storage-setup). As discribed in that blog post, I set
up daily backups to [Backblaze
B2](https://www.backblaze.com/b2/cloud-storage.html) using their amazing CLI
through a cron script. A day went by and I noticed that the
[healthcheck](/posts/2021-05-15-healthchecks-io-with-docker) didn't pass.
Unfortunately I didn't have time to fix this problem immediately, so instead I
executed the command by hand every couple of days. One could argue that this in
total took way more time than the actual fix, but hey, I was lazy. In the end,
I finally dedicated some time to fix this annoying issue.

It turns out that a command executed by cron doesn't run through sh or bash,
but in a minimal environment without your usual environment-variables. As a
result, my `b2` command (and many other commands for that matter) won't run as
expected, if at all. A quick fix is to run your command through bash or sh
explicitly:

```sh
sh -c "mycommand"
```

Alternatively, if you want all your entries to use sh or bash, you can set the
`SHELL` variable at the very beginning of your crontab:

```sh
SHELL=/bin/bash

15 1 * * * some_command
```

[Here](https://askubuntu.com/a/23438) is an answer that goes into more detail
about this. Have a great day!

This is post 019 of [#100DaysToOffload](https://100daystooffload.com/).


Server-Side Caching with Apollo GraphQL


I recently implemented server-side caching for one of our applications at work.
This guide tries to document that I've learned. It assumes that you are using
an apollo server of version 3 or higher.

### What is Server-Side Caching?

The point of server-side caching is to reduce the load of your database by
“remembering” the results of a query for a certain period. If the exact same
query comes in again, that remembered result will be returned.

Caching should be handled with care. You should never enable caching for your
entire application. Instead, you should identify the bottlenecks and develop a
strategy to overcome them.

### Enabling caching on the server

The Apollo Team has done a great job
[documenting](https://www.apollographql.com/docs/apollo-server/performance/caching/)
the caching behavior of their server. To add caching to your existing
Apollo-Server, you first have to add the `responseCachePlugin` to your
configuration as shown
[here](https://www.apollographql.com/docs/apollo-server/performance/caching/#caching-with-responsecacheplugin-advanced):

```js
import responseCachePlugin from 'apollo-server-plugin-response-cache';

const server = new ApolloServer({
  // ...other options...
  plugins: [responseCachePlugin()],
});
```

Then, you have to configure a cache backend. By default, Apollo Server will
store the caches in RAM, but I’d recommend [using
Redis](https://www.apollographql.com/docs/apollo-server/data/data-sources/#using-memcachedredis-as-a-cache-storage-backend)
(or Memcached, if you like), especially if your application is spread across
multiple instances of the same backend.

```js
const { BaseRedisCache } = require('apollo-server-cache-redis');
const Redis = require('ioredis');

const server = new ApolloServer({
  // ...
  cache: new BaseRedisCache({
    plugins: [responseCachePlugin()],
    client: new Redis({
      host: 'redis-server',
    }),
  }),
});
```

> Note that you have to use the ioredis library here. node_redis is deprecated
> as of v2.6.0 of apollo-server-cache-redis.

If everything went well, your server should now know how to cache responses!
This alone won’t get you very far, since it doesn’t know what to cache.

### Telling Apollo what to cache

To make a type cachable, you have to declare **cache hints**. These properties
can either be set in the
[resolver](https://www.apollographql.com/docs/apollo-server/performance/caching/#in-your-resolvers-dynamic),
or
[statically](https://www.apollographql.com/docs/apollo-server/performance/caching/#in-your-schema-static)
in the schema. To keep it simple, this guide will stick to the static method.
Feel free to experiment with the dynamic approach though!

To enable cache hints, simply add the following directive to your schema (you
only have to do this once):

```gql
enum CacheControlScope {
  PUBLIC
  PRIVATE
}

directive @cacheControl(
  maxAge: Int
  scope: CacheControlScope
  inheritMaxAge: Boolean
) on FIELD_DEFINITION | OBJECT | INTERFACE | UNION
```

Now you can add the `@cacheControl` directive to every type that should be cached.

```gql
# This type will be cached for 30 seconds
type Post @cacheControl(maxAge: 30) {
  id: ID!
  title: String
  author: Author
  comments: [Comment]
}
```

For security reasons, these conditions are [very
strict](https://www.apollographql.com/docs/apollo-server/performance/caching/#why-are-these-the-maxage-defaults):

> Our philosophy behind Apollo Server caching is that a response should only be
> considered cacheable if every part of that response opts in to being
> cacheable.

This means that every type needs to explicitly decide how long it should be
cached. According to this note, the example above actually won’t be cached at
all!

Having to specify the `maxAge` of every type would be tedious, so the authors
have come up with the `inheritMaxAge` property, which allows the type to
inherit the settings from its parent. So, in order to make our example
cachable, we have to enable cache control for all its subfields, either by
setting the `maxAge` explicitly or by inheriting it from the parent:

```gql
type Post @cacheControl(maxAge: 30) {
  id: ID!
  title: String
  author: Author
  comments: [Comment]
}

type Author @cacheControl(inheritMaxAge: true) {
  id: ID!
  name: String
}

type Comment @cacheControl(inheritMaxAge: true) {
  id: ID!
  body: String
}
```

Now, whenever you query a `Post`, it will be thrown in the cache. If you query
the type again within 30 seconds, the query resolver won’t execute. Instead, it
will be read from the cache. Keep in mind that cache hints can also be set on
`query` and `mutation` fields. This can be handy if you want to cache the
entire response of a request.

### Gotcha 1: Multiple Response Variations

The use-case where this topic first came up required us to have different
responses based on the type of the logged in user. An `Admin` should see a
different result than a `Visitor`. If you ignore this fact, it could be that a
visitor could see the cache result of a query previously executed by an admin!

This problem can be counteracted by setting extra information in the cache key
via `extraCacheKeyData` (see
[this](https://www.apollographql.com/docs/apollo-server/performance/caching/#configuring-reads-and-writes)
paragraph):

```js
plugins: [
    responseCachePlugin({
        extraCacheKeyData: (ctx) => (
            ctx.context.auth.isAdmin
        ),
    }),
],
```

This example can create two distinct caches: One for users that are marked as
admins, and one for regular users.

### Gotcha 2: User-specific caches

Besides caching for a group of users, you can also cache responses [for every
user
individually](https://www.apollographql.com/docs/apollo-server/performance/caching/#identifying-users-for-private-responses).
You may have noticed that you can also set a `scope` field in the cache control
directive. This will only cache the response if a user is logged in:

```gql
type Post {
  id: ID!
  title: String
  author: Author @cacheControl(maxAge: 10, scope: PRIVATE)
}
```

Apollo determines if a user is logged in or not, based on if the `sessionId`
function has returned a value other than `null`.

```js
import responseCachePlugin from 'apollo-server-plugin-response-cache';
const server = new ApolloServer({
  // ...other settings...
  plugins: [responseCachePlugin({
    sessionId: (requestContext) => (requestContext.request.http.headers.get('sessionid') || null),
  })],
});
```

I’m unsure how effective this pattern is, since every user will receive its key
in the cache. This kind of defeats the purpose of server-side caching, which is
meant to reduce load on the database. If you’re trying to cache fields for
individual users, you might also want to take a look at client-side caching via
[apollo-augmented-hooks](https://github.com/appmotion/apollo-augmented-hooks).

This is post 020 of [#100DaysToOffload](https://100daystooffload.com/).


Quick tip! React useToggle Hook


Here's a useful react hook for situations where you have to keep track of the
state of a dialog, popup, etc.:

```js
import { useState } from 'react';

export default (value) => {
    const [state, setState] = useState(value);

    const setStateActive = () => {
        setState(true);
    };

    const setStateInactive = () => {
        setState(false);
    };

    return [
        state,
        setStateActive,
        setStateInactive,
    ];
};
```

Usage:

```js
const SomeComponent = () => {
    const [isDeleteDialogOpen, openDeleteDialog, closeDeleteDialog] = useToggle(false);

    return (
        <>
            <Button onClick={openDeleteDialog}>Open Delete Dialog</Button>
            <Dialog isOpen={isDeleteDialogOpen} onClose={closeDeleteDialog}></Dialog>
        </>
    );
};
```

This is post 021 of [#100DaysToOffload](https://100daystooffload.com/).



Notes on pruning chinese elms


I recently bought a chinese elm bonsai. To keep it alive and healthy, I devoted
some time to learning how to properly prune it.

Chinese elms are very robust trees with strong growth. Even in the winter
season, I can prune it on a weekly basis. I just watched [this
video](https://www.youtube.com/watch?v=Nsvc2Ll1X2A) which gives some helpful
tips on pruning.

I noticed that the author let the tree grow heavily to develop stronger
branches. Until now, I pruned the branches back to one leaf whenever it had
about 5 leaves. However, a branch should only be cut on its woody parts in order
to develop more shoots, and a branch needs some growth in order to turn to wood.
**Don't prune the branches too early**!

Secondly, I thought that cutting the branches just behind a leaf would lead to
more growth, but I found that this is not true. The branches should be cut just
a bit above the leaf to prevent branch to die back and kill the leaf. It could
also lead to the shoot coming out straight instead of angled, which is not
desired.

Lastly I learned that branches pointing upwards should most likely be pruned,
since they take a lot of energy that the tree could use elsewhere, which is also
pointed out in [this video](https://www.youtube.com/watch?v=93c985zOwhs).

Here's a picture of my chinese elm just how I bought it. You can clearly tell
that it was cheaply imported from china. It needs a lot of work, but I'm having
a lot of fun learning about this tree!

![Chinese Elm](/assets/chinese_elm.jpeg)

This is post 022 of [#100DaysToOffload](https://100daystooffload.com/).


BTRFS on Alpine Linux


I'm currently in the midst of migrating some of my infrastructure from the cloud
to "on prem", aka a local server, aka my old PC. I wanted to try alpine linux as
the host OS to see how it behaves as a lightweight server distro.

So far it stands up quite nicely, it has everything you'd expect from a
linux-based operating system. The only problem I encountered was getting BTRFS
to work out of the box. Here are some things you should know when using BTRFS on
Alpine linux.

### Installing BTRFS

Installing BTRFS is relatively straight forward. Simply install the package and
tell Alpine to load the module on startup:

```
apk add btrfs-progs
echo btrfs >> /etc/modules
```

To load the module right away, you can use the following command:

```
modprobe btrfs
```

### Mounting a volume

If you try mounting a btrfs volume via your fstab, you will get an error. This
is because BTRFS does not know about the drives yet when the filesystems are
mounted. To work around this, you can create an OpenRC service that runs a
`btrfs scan` to detect the drives. To do so, create a service under
`/etc/init.d/btrfs-scan` with the following content:

```sh
#!/sbin/openrc-run

name="btrfs-scan"

depend() {
  before localmount
}

start() {
  /sbin/btrfs device scan
}
```

Make the service executable and register it:

```
chmod +x /etc/init.d/btrfs-scan
rc-update add btrfs-scan boot
```

Now, you should be able to add the volume to your `/etc/fstab`:

```
UUID=abcdef-0055-4958-990f-1413ed1186ec  /var/data  btrfs   defaults,nofail,subvol=@  0  0
```

After a reboot, you should be able to see the drive mounted at `/var/data`.

### Resources

- [Nathan Parsons - "Using BTRFS on Alpine Linux"](https://nparsons.uk/blog/using-btrfs-on-alpine-linux)
- [A bug report about this problem](https://gitlab-test.alpinelinux.org/alpine/aports/-/issues/9539)

This is post 023 of [#100DaysToOffload](https://100daystooffload.com/).


TIL how to get the active language of a browser


Today I learned how to get the selected language of a browser.

It's super simple!

```js
const userLang = navigator.language || navigator.userLanguage;
```

## An interesting discovery

Eventhough I'm using a chromium-based browser, the user-agent and some other
fields of the `navigator` object imply that I'm running Mozilla Netscape 5.0.
This is a relic of the past, where the user agent heavily influenced the look
and feel of a served website. Nowadays, all rendering engines work more or less
equally, but back then, browsers tried to be as good as the market leader, so
they disquised themselves as Netscape. This podcast episode goes into more
detail about how this developed (jump to minute 3 to listen to this topic):

<iframe style="border-radius:12px" src="https://open.spotify.com/embed/episode/71URVFdhF6pcUBRhxerDIV?utm_source=generator&t=190" width="100%" height="232" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"></iframe>

---

This is post 024 of [#100DaysToOffload](https://100daystooffload.com/).

## Resources

- [Stack Overflow Thread on getting the user language](https://stackoverflow.com/questions/8199760/how-to-get-the-browser-language-using-javascript)
- [Full link to the Podcast episode](https://corecursive.com/internet-is-duct-tape/#)





Fixing Traefik Proxy Issues


After changing my proxy from NGINX to Traefik, I noticed that some of my
services started misbehaving.

In particular, my instance of
[BirdsiteLive](https://github.com/NicolasConstant/BirdsiteLive)
([birdsite.slashdev.space](https://birdsite.slashdev.space)) had issues
forwarding tweets to the
[Fediverse](https://garrit.xyz/posts/2021-01-18-reasons-the-fediverse-is-better).

The only difference between my old NGINX and my Traefik config were the headers.
I didn't think that that's what's causing the issue, but after digging around a
bit I figured out what's wrong. I still can't wrap my head around it entirely,
but it has something to do with forwarding external `https` requests to internal
`http` services, since the `x-forwarded-` headers where missing in the forwarded
requests.

In the world of NGINX, we can instruct the proxy to forward _all_ headers using
this directive:

```conf
proxy_pass_request_headers      on;
```

which takes care of the issue. In Traefik, it's a bit more convoluted. Traefik
can use a combination of "Entrypoints" and middleware to route traffic around.
In my setup, I use a `webSecure` entrypoint listening for SSL/TLS traffic, and a
`web` entrypoint that just redirects to `webSecure`:

```yaml
entryPoints:
    web:
        address: :80
        http:
            redirections:
                entryPoint:
                    to: "websecure"
                    scheme: "https"

    websecure:
        address: :443
```

Apparently, some services send requests to the `web` entrypoint, and the
`x-forwarded-for` headers are dropped. To prevent this, you can set the
`proxyProtocol` and `forwardedHeaders` in the `web` entrypoint to `insecure`,
like so:

```yaml
entryPoints:
    web:
        address: :80
        proxyProtocol:
            insecure: true
        forwardedHeaders:
            insecure: true
        # ...
# ...
```

I'm sure there's a reason why this is marked as `insecure`, but it behaves just
like the NGINX counterpart, so I didn't bother digging deeper into the matter.
Maybe one day I'll come back to properly fix this.

If you want to read more, check out
[this](https://medium.com/@_jonas/traefik-kubernetes-ingress-and-x-forwarded-headers-82194d319b0e)
article on Medium. It explains the issue in more detail.

---

This is post 025 of [#100DaysToOffload](https://100daystooffload.com/).


Swapping two Numbers without Temporary Variables


Ever wondered how to swap two numbers without using a temporary variable?

I just found this very old note that I thought is worth sharing. The trick is
quite old and you might already know about this, but when I started out with
programming, it blew my mind.

In school, we get taught to use a temporary
variable to swap two numbers:

```js
let a = 5
let b = 10

let temp = a;

a = b    // a = 10
b = temp // b = 5
```

But by using some arithmetic, we can save us a few bytes of memory:

```js
let a = 5
let b = 10

a = a + b // a = 15 ; b = 10
b = a - b // a = 15 ; b = 5
a = a - b // a = 10 ; b = 5 
```

Please **never** use this in any production code. The less we have to think
about a piece of code, the better it is. It's a fun thought experiment
nevertheless!

---

This is post 026 of [#100DaysToOffload](https://100daystooffload.com/).


Weeknote 16/2022


This is my first (already belated) weeknote. Even though it's the monday of the
next week, I thought I'd reflect on what happened last week. I already tried [a
similar format](/posts/2020-12-18-update-december) on this blog in a monthly
fashion, but didn't stick to it. With these "weeknotes", I will try to sit down
for half an hour each friday. This is heavily inspired by [Doug Belshaw's posts
with the same name](https://dougbelshaw.com/blog/).

## At work

There's currently an effort to integrate a whole new backend into our
application. Fundamental features like user- and role-management will have to be
migrated to this new backend, which is mostly incompatible with our current
one. As I'm currently the only developer on the project, building a concept
and realizing it will mostly be my part. I'm somewhat frightened about this
undertaking, but I think I will learn a whole lot.

I also introduced versioned deployments for our application. To keep it simple,
releases are versioned by date (E.g. `v2022.04.21`). Alongside this, I also
added a changelog describing each release. I'm still unsure whether this gives
us a benefit or if it's just unnecessary work, but time will tell. I'm curious
of what you - the reader - thinks of this. Feel free to reply to this post via
the link at the bottom of the page.

## On this blog

I'm playing around with ideas about comments on this static website. I yanked
out some thoughts in this thread, but I'll have to think about it a bit more:

<iframe src="https://fosstodon.org/@garritfra/108180821665987615/embed"
class="mastodon-embed" style="max-width: 100%; border: 0; height: 21rem" width="400"
allowfullscreen="allowfullscreen"></iframe><script
src="https://fosstodon.org/embed.js" async="async"></script>

## Plants

My girlfriend and I are in love with plants. This week, we went to a nursery and
got ourselves a new member to our family: a Monstera Adansonii.

![Monstera Adansonii](/assets/monstera_adansonii.jpeg)

I also did a little experiment with one of my eucalyptus citriodoras. I cut it
from 50cm back to the first "node" in the trunk, at about 2cm. I'm quite happy
with how it evolved in just about 10 months. It's now time to develop some
branches. Here's it before the pruning:

![Eucalyptus before pruning](/assets/eucalyptus_before_pruning.jpeg)

And this is what it looks like now:

![Eucalyptus after pruning](/assets/eucalyptus_after_pruning.jpeg)

I also made cuttings from the rest of the stem. Not sure if they'll survive, but
what could I lose?

That's it for this week. Thanks for reading!

This is post 027 of [#100DaysToOffload](https://100daystooffload.com/).


Hello to all the new Mastodon users


To everyone who just joined Mastodon following Twitter's aquisition: I wish you a
warm welcome!

Whether you're staying or just testing the waters, you might want to get to know
some awesome people around here. The fediverse might seem intimidating at first.
That's because around here, there's no algorithm telling you whom to follow.

Inspired by [Mike Harley's blog
post](https://obsolete29.com/posts/2022/04/26/hello-to-all-the-new-mastodon-users/),
I want to share some of the people I have been following, talking to, or
generally found interesting over the past ~2 years on this platform. I hope this
will be useful to you!

- Alexey Yerin - https://fosstodon.org/@yyp
- Andreas Gerlach - https://fosstodon.org/@appelgriebsch
- Bascht - https://social.yakshed.org/@bascht
- Benedikt Flöser - https://fosstodon.org/@theDoctor
- Benjamin Hollon - https://fosstodon.org/@benjaminhollon
- Binjamin Green - https://mas.to/@binyamin
- Blueberry - https://fosstodon.org/@blueberry
- Borked - https://masto.borked.sh/@borked
- Chis - https://fosstodon.org/@RyuKurisu
- Conny Duck - https://chaos.social/@ConnyDuck
- Daniel Siepmann - https://fosstodon.org/@daniels
- Daniel Stenberg - https://mastodon.social/@bagder
- Darius Kazemi - https://friend.camp/@darius
- Devine Lu Linvega - https://merveilles.town/@neauoire
- Doug Belshaw - https://fosstodon.org/@dajbelshaw
- Elias Mårtenson - https://functional.cafe/@loke
- Fedops - https://fosstodon.org/@fedops
- FunnyLookinHat - https://fosstodon.org/@funnylookinhat
- Gina - https://fosstodon.org/@Gina
- Gray - https://fosstodon.org/@gray
- Hugo - https://soykaf.org/users/uoya
- Hund - https://fosstodon.org/@hund
- Jan-Lukas Else - https://fosstodon.org/@jle
- Jens Finkhäuser - https://social.finkhaeuser.de/@jens
- Kev Quirk - https://fosstodon.org/@kev
- Klaus Zimmermann - https://fosstodon.org/@kzimmermann
- Luke Harris - https://fosstodon.org/@lkhrs
- Mike Harley - https://indieweb.social/@obsolete29
- Murteza Yesil - https://fosstodon.org/@murtezayesil
- Nicholas Constant - https://social.nicolas-constant.com/users/NicolasConstant
- Nicholas Danes - https://smallcamp.art/@ndanes
- Nikita Karamov - https://fosstodon.org/@kytta
- Nüjtag - https://fosstodon.org/@Nujtag
- Oppen - https://merveilles.town/@oppen
- Paul Lammers - https://eldritch.cafe/@paullammers
- Paul Wilde - https://fosstodon.org/@pswilde
- Rekka Bellum - https://merveilles.town/@rek
- Robby - https://zoinks.one/users/robby
- Ru - https://fosstodon.org/@ru
- Sotolf - https://social.linux.pizza/@sotolf
- Tallship - https://pleroma.cloud/users/tallship
- Tayo - https://fosstodon.org/@Tay0
- TobTobXX - https://fosstodon.org/@tobtobxx
- Tyler Childs - https://smallcamp.art/@tychi
- Yarmo - https://fosstodon.org/@yarmo
- eddiex - https://fosstodon.org/@0xedd1e
- iooioio - https://fosstodon.org/@iooioio
- muesli - https://mastodon.social/@fribbledom
- tdarb - https://fosstodon.org/@tdarb
- xpil - https://fosstodon.org/@xpil

And of course - yours truly: [@garritfra@fosstodon.org](https://fosstodon.org/@garritfra)

## Bonus tip

If you'd like to keep following people from twitter as if they were part of the
fediverse, you might want to check out the
[BirdsiteLIVE](https://fosstodon.org/web/@BirdsiteLIVE) project. I've been using
it for about a year now. No need to be on twitter at all! If you're not into
self-hosting, check out this list of hosted instances:
https://the-federation.info/birdsitelive.

Stay safe, and see you around!

This is post 028 of [#100DaysToOffload](https://100daystooffload.com/).

Weeknote 17/2022


This week was quite ordinary. We enjoyed the weather during walks in the park
and got some chores done.

## At work

A major news this week was that GitLab decided to remove [certificate-based
cluster
access](https://docs.gitlab.com/ee/user/project/clusters/deploy_to_cluster.html#deploy-to-a-kubernetes-cluster-with-cluster-certificates-deprecated)
to Kubernetes clusters sooner as we hoped. We're now fleshing out how to migrate
to the newer
[gitlab-agent](https://docs.gitlab.com/ee/user/clusters/agent/install/index.html).

I also got some refactoring work done. In one of our projects, we're currently
migrating our GraphQL queries away from a HOC-pattern towards React hooks, using
the amazing
[apollo-augmented-hooks](https://github.com/appmotion/apollo-augmented-hooks)
library for additional caching features.

## Sideprojects

I continued to work on a secret side-project of mine, but I don't want to spoil
anything just yet.

BUT! If you're good at writing and would like to help out writing a couple of
paragraphs that can catch the users attention, [I'd love to hear from
you](/contact).

That's it for this week. Thanks for reading!

This is post 029 of [#100DaysToOffload](https://100daystooffload.com/).

Weeknote 18/2022


It's friday, my dudes! Here are some notes on what happened during my week.

## At Work

I wanted to start off my week by looking into migrating our deployment workflow
to a GitLab Agent, as described [last week](/posts/2022-04-29-weeknote-17-2022).
That didn't really go well, since a database from another project bursted into
flames (not literally) for a reason I still couldn't figure out. As a
workaround, I just beefed up the AWS RDS instance size until we find a proper
solution.

While looking through the docs, I also read more about [Aurora
Serverless](https://aws.amazon.com/de/rds/aurora/serverless/), which would be a
match made in heaven, at least for this specific project. Instead of keeping
multiple instances running even without any load, serverless automatically
scales to as many resources as you need. This **drastically** improves
performance (according to the docs it's instantaneous, but I'll have to see that
with my own eyes), while keeping the price at a minimum. Once we're done with
that migration, I'll probably follow up with a blog post on this.

## Home Automation

We recently wanted to configure a light in our bedroom to turn on early and the
morning, stay on for a few hours and then turn off. Same for the evening.

Soo, I ordered two power plugs pre-flashed with
[Tasmota](https://tasmota.github.io/docs/) and yanked HomeAssistant onto an old
Pi. The plugs came as a pair, so I automated another light in our home. I think
this will be the beginning of a deep deep rabbit hole.

We'll be moving to a new flat soon, where humidity is higher than usual. I'm
thinking to monitor this and react with some counter-measures, like air filters.
Sky is the limit, really. More to follow...

## Motorbike Maintenance

I was long due to dust off my motorbike, but I finally did. Also, I did my first
oil change on a vehicle **ever**!

![Motorbike oil change](/assets/posts/2022-05-06-weeknote-18-2022/motorbike_oil_change.jpeg)

Feels great to finally be back on the road.

## Fun Fun Fun

Besides riding my motorbike, we went to a fair in our town. It was the first
time in years that I've been to a fair, and to ride bumper cars.

Also, I met up with a friend I haven't seen in a while. It was great taking a
walk and talking about life.

That's it for this week. Thanks for reading!

This is post 030 of [#100DaysToOffload](https://100daystooffload.com/).

Cloning Windows to a new drive


My grandpa has been using his current computer for about 10 years now. After
such a long time, the system has become quite slow and bulky. Back then it was
relatively normal to use a HDD as a primary hard drive, which adds to the slow
experience. It was time for an upgrade!

> **TL;DR**: Use [Clonezilla](https://clonezilla.org/) on a live usb stick to
create an exact copy of your old drive onto your new one.

I got him a 512 GB SSD, which, conveniently, is the same size of his current
HDD. While installing the new drive alongside his existing one, I thought about
how to copy the existing Windows-installation.

Naïvely, I thought that I could just `dd` the contents of the HDD onto the new
drive would work, since, _every byte is copied as is_, or at least that's what I
thought. Turns out it wasn't that easy. I'm sure it would've worked if I was
more careful, but by default, `dd` just wipes over each byte, not caring if it
made a mistake. After very long 5 hours, I came back to the PC to see that it
finished copying the 512 GB (yes, it's not just copying the data, it's copying
the entire partition!). In a super excited mood, I restarted the PC and selected
the SSD as a boot medium. Aaaaand... nothing. Windows tried to repair some stuff
but it wasn't successful. I fiddled around with the boot partition a bit, but I
had to give up after an hour or so.

## The second attempt

After researching a bit (I should've done that sooner...) I stumbled across
[Clonezilla](https://clonezilla.org/), a Linux distribution custom-built for
this purpose. I flashed it onto a usb-stick and started the cloning process.
After just 20 minutes (!), it was done cloning the existing data. The process is
extremely simple!

Before rebooting, I disconnected the old drive to make sure that there's no
funny business going on. Apparently, Windows had to self-adjust UIDs of the
drives, but after a short "Preparing Windows" animation, the system started up
as expected. **Success**!!

The performance of the new hard drive is amazing, at least compared to the HDD
my grandpa had before. Plus, we can use the existing HDD to take full system
backups every now and then, using the same process.

This is post 031 of [#100DaysToOffload](https://100daystooffload.com/).


Postgres Docker Container Migration Cheat Sheet


I just finished migrating a postgres database to a new host. To remember how to
do it next time, I'm writing down the commands I used here.

I usually just shut down the database and then copy the local directory where
the volume was mounted onto the new host. This time though, I seemed to be
getting some I/O errors, so I had to do it the "right" way.

To be fair, this note is based on
[this](https://www.netguru.com/blog/how-to-dump-and-restore-postgresql-database)
guide. I modified it to fit my workflow with docker.

## Creating a dump

Log into the old host:

```
ssh <user>@host
```

Connect to the postgres-container:

```
docker exec -ti myservice_db_1 /bin/bash
```

Create a dump. You can name your dump as you wish - I'm using dates to
distinguish multiple dumps:

```
pg_dump -U db_user db_name > db_name_20220531.sql
```

Copy the dump to the host machine:

```
docker cp myservice_db_1:/db_name_20220531.sql ~/
```

## Moving the dump to the new host

The easiest way to get the dump off of the old server and onto the new one is to
use your local machine as a middleman.

First, download the dump to your machine:

```
scp <user>@<host>:~/db_name_20220531.sql .
```

Then, do the same thing but reversed, with the new host:

```
scp ./db_name_20220531.sql <user>@<host>:~/
```

## Restoring the dump

First, connect to the new host:

```
ssh <user>@<host>
```

Assuming the docker service is already running on the new host, attach to the
db-container, just like above:

```
docker exec -ti myservice_db_1 /bin/bash
```

This time, we have to do some fiddling on the database, so attach a session to
postgres using their cli:

```
psql -U my_user
```

Before "resetting" the existing DB to apply the dump, we have to connect to
another database. The `postgres` DB is always there, so you can use that.

```
\c postgres
```

Now, we drop the existing DB and re-add it:

```sql
drop database database_name;
create database database_name with owner your_user_name;
```

And now, the moment you've been waiting for! Leave the psql-session and apply
the dump:

```
psql -U db_user db_name < db_name_20220531.sql
```

That's all! You now have the exact copy of production database available on your
machine.

This is post 032 of [#100DaysToOffload](https://100daystooffload.com/).


Here's the tar command you keep looking for


> **Update**: [@kaushalmodi@mastodon.technology](https://mastodon.technology/@kaushalmodi)
> replied to this post with a way more complete cheat sheet. If you don't want
> to hear me rant about tar and actually want to get good at it, go read their
> post instead:
>
> https://scripter.co/disarming-the-tar-bomb-in-10-seconds/

God dammit. I can't tell you how often I had to look up how to create or
extract a tar archive on linux. There are SOO many options!!

![xkcd 1168](https://imgs.xkcd.com/comics/tar_2x.png)

## Let's settle this once and for all

Here's how you create an archive:

```
tar cf archive.tar directory
```

Try to remember "Create File".

And here's how you extract an archive:

```
tar xf archive.tar
```

For this one, try to remember "(e)Xtract File".

And if there's some other compressions in the mix: keep looking it up! A more
comprehensive cheat sheet can be found here:
https://simplecheatsheet.com/linux-tar-files/

Sorry for this dumb post. I'm sure you can relate to my feelings. ;)


This is post 033 of [#100DaysToOffload](https://100daystooffload.com/).


A list of bugs in MacOS


I've been using MacOS for years, and I was always happy with it. However, it
has some really annoying problems that don't seem to get attention by Apple.
This is a list of things that personally bother me. I will try to update it
whenever I encounter new issues.

* When plugging in a external monitor, some native Windows can't be used with a
  mouse anymore. Restart required to fix.
* Dash-to-dock sometimes doesn't work for fullscreen-applications.
* When opening a fullscreen window from the workspace-overview, the dock
  sometimes stays visible. Has to be manually hovered to hide.
* When using a chromium-based browser on an external monitor in
  fullscreen-mode, the menu-bar sometimes doesn't appear when hovered.
* When switching from the internal to an external monitor, the workspace
  alignment is not how I left it.

This is post 034 of [#100DaysToOffload](https://100daystooffload.com/).


The only true answer to 'tabs vs spaces'


I recently dove into a new project at work. We're starting from a blank page,
so of course this classic question came up:

> "So should we use tabs or spaces for our formatting?"

One of my teammates explained to us why the only logical answer to this is
"Tabs", and you'll soon know why.

## The problem

Most formatters, by default, use either two or four spaces for indentation by
default. The [Prettier](https://prettier.io/) formatter does this, and it
somewhat became the norm for JavaScript projects. This has one huge downside
though: everyone on the team has to agree, or live with this standard.

Nowadays, almost all editors come with the ability to change the preferred
indentation settings, which will be overridden by the settings of the
formatter. I prefer an indentation of 4 spaces, which is reflected in all of my
code. If I'm working on a project that uses an indentation of 2 spaces via
prettier, my preference will be overridden when formatting the code.

## Just use tabs

The solution to this problem is simple: Create a `.editorconfig` file and set
the indentation style to tab, without a width:

```editorconfig
root = true

[*]
end_of_line = lf
charset = utf-8
indent_style = tab
```

Almost all editors will be able to pick this file up and configure some
project-wide settings. If your editor is configured to use a indent width of 4,
this setting will be respected. If you're a maniac that indents their code with
8 spaces, you'll be pleased to see that you can finally use this style in your
code, without forcing anyone else to do as you do.

Even GitHub, GitLab and friends are able to respect this setting, giving
everyone the opportunity to view code in their preferred style.

I hope you now know why using a single tab of indendation makes the most sense if
you're working in a team. Let me know your thoughts!

This is post 035 of [#100DaysToOffload](https://100daystooffload.com/).



DIY Software


We often take free software as granted. We think of many programs are a "black box" that are supposed to _just work_. I think, this goes against the very nature of free and open source software.

This is post 004 of [#100DaysToOffload](https://100daystooffload.com/).


The library of babel


What if I told you that everything you ever have said, thought and wrote, and everything you will say, think or write, has already been written down? Let me share my discovery of a construct called the _library of babel_.

The library of babel is a

## Real world use cases

This is post 006 of [#100DaysToOffload](https://100daystooffload.com/).


Fixing nullability issues when migrating to Kotlin


The last couple of days, I had the opportunity to refactor some of the Kotlin code in our massive android project. The app is quite old, and a lot of legacy code has accumulated over the years. At one point, we decided to migrate a lot of our view-logic from Java to Kotlin. Instead of cleaning the code up, this lead to an even bigger buildup of technical debt. The problem was that we mainly used the migration-tools that Android Studio provides, which, at that time where not very sophisticated. Sometimes we had to manually fix some things which, since it is such a massive codebase, we didn't really take the time to clean every converted file up.

Once the number of warnings approached infinity, we finally decided to dedicate a chunk of each sprint to house-cleaning in our codebase. My recent refactoring involved cleaning up unsafe usages, and I want to share some of my approaches to this kind of refactoring.

## Obvious fixes

I encountered this kind of pattern a number of times during my refactoring:

```kt
textView!!.setOnClickListener { showDialog() }
```

If you see something like this, your alarm bells should immediately ring. If textView is `null`, the app would crash. The same behavior is happening with java, so a switch from Java to kotlin would be pointless.

The simple fix is to replace the `!!` operator with a `?`, which only executes the line of code if the element is not null.

```kt
textView?.setOnClickListener { showDialog() }
```

Of course, if the view _is_ null even though you're expecting a value, you should probably do something about this. A simple way to handle this is to add some "sanity checks" to your code. Create an `assert` function that throws an `AssertionError` if a given condition is false. Unfortunately, android does not use the builtin `assert` function that kotlin provides, so you will have to write your own. The neat thing about `assert` is that you can toggle this behavior, meaning you can enable assertion errors in the debug build, but disable it in the final production build to prevent the app from randomly crashing.

```kt
assert(textView != null)
textView?.setOnClickListener { showDialog() }
```

## More complex cases

Let's take a look at this code: ...

This is post 007 of [#100DaysToOffload](https://100daystooffload.com/).


Docker in plain english


Recently I saw some fellow Mastodon-users discussing resources and guides to get
into the docker ecosystem. Given that most of my private infrastructure is built
upon docker and docker-compose, I thought I'd share how **I** use this tool. I
will try to assume no prior container-knowledge, but if anything isn't clear to
you, feel free to [contact me](/contact).

## Docker 101

First up: What on earth is Docker, and why should I use it?

Docker is a _container runtime_. It can be used to isolate system resources in a
reproducible manner, meaning if I containerize an application on my machine, I
can be sure that it will function exactly the same on all machines. The benefits
of this are obvious: You more or less eliminate all dependencies to a specific
environment, like the operating system and other software. As long as it's the
same CPU-architecture, this sentence holds true: If it runs docker, it can run
your application.

Things running in a container also can't break out of this "sandbox". A process
in a container is only aware of the resources around it, not on the host
machine. Each container is kind of like an operating system **inside** your
actual operating system. 

To describe what a container should look like, we need to write a "recipe" for
it. In it, you describe a starting point from which you want to build upon, and
the necessary steps to achieve the desired state. This "recipe" is called a
`Dockerfile`. A very simple Dockerfile might look like this:

```
FROM ubuntu

RUN apt update && apt upgrade -y

CMD ["echo", "Hello World!"]
```

If you now run `docker build -t hello-world .`, docker will take this recipe and
build an **image** called "hello-world". This image is a template that describes
the state of your application. In our case, we take the definition provided by
the "ubuntu" image and simply do a system update. Whenever you spawn a container
from this image, it will always start from exactly this state. Note that the
commands in the Dockerfile do not run every time you launch a container! An
image is the **result** of running the commands. The final instruction, `CMD`,
is the command to run whenever you spawn a container, but more on that later.

Congrats! You just built your very first docker image. To verify that it's
actually there, try running `docker image ls`. This will list all images on your
system:

```
➜  garrit.xyz git:(master) ✗ docker image ls 
REPOSITORY               TAG             IMAGE ID       CREATED          SIZE
hello-world              latest          6e2240011a89   8 minutes ago    109MB
```

An image doesn't really do anything on its own. You need to tell docker to
construct a container out of that image. A container is essentially an
**instance** of that image. Try running this command:

```
docker run hello-world
```

And, as instructed with the `CMD` line, you should see the words "Hello World!"
printed on the screen. You can verify that it's still there by running `docker
ps -a`, which will list all containers on your system, including the one you
just ran:

```
CONTAINER ID   IMAGE                    COMMAND                  CREATED          STATUS                      PORTS                                            NAMES
05415bf66a91   hello-world              "bash"                   3 seconds ago    Exited (0) 2 seconds ago
```

"This isn't really helpful!", I hear you yell. You're right, so let's look at a
real world example.

## Example: A simple Node.js application

A real world use case for a docker container is run your home-built application.
Say we have a basic Node.js app that we wanted to containerize:

```
.
├── app.js
├── package-lock.json
└── package.json
```

And your main setup-workflow for this application looks something like this:

```
npm install
npm start
```

Remember that a Dockerfile is a **recipe** of how an application is built. A
corresponding recipe could look like this:

```Dockerfile
# Declare base image
FROM node:16

# Copy the application into the container
COPY . .

# Install dependencies
RUN npm install

# Launch the application
CMD ["npm", "start"]
```

Like above, you can build this Dockerfile using `docker build -t testapp .`, or
any name you'd like to use.

> **Quick Tip**: You might also want to add a `.Dockerignore` file, which lists
files and directories which should not be copied inside the container, just like
a `.gitignore` file. I usually add `node_modules` since it will be recreated
when building the image, and some files that are not relevant at runtime, like a
README.

Running `docker image ls` should now show the image you just created:

```
REPOSITORY               TAG             IMAGE ID       CREATED             SIZE
testapp                  latest          463e68d86eee   5 minutes ago       857MB
```

You can now "run" the image, which will result in a spawned container. Since
Containers run in their own environment, they won't be able to receive any
keystrokes by default, so you can't stop the application. To fix this, you can
use the `-it` flags, which will establish an interactive session to the process
inside the container. This makes it easier to stop the container after it is
created:

```
docker run -it testapp
```

And voila! You should see the output of your application in the terminal. If
you've done some Node.js, this output might be familiar:

```
➜  testapp git:(master) ✗ docker run -ti testapp

> testapp@1.0.0 start
> node app.js

Example app listening at http://:::8080
```

You'll soon discover that you can't access port 8080 on your machine. Docker has
a powerful networking engine, and each container has its own IP. You _could_
figure out the IP of your container and access it like that. A simpler approach
though is to just bind a port of your host machine to the container.  For
example, let's bind our port 4000 to port 8081 of the container. This can be
done using the `-p` flag of the cli:

```
docker run -p 4000:8081 -it testapp
```

> **Quick Tip**: To remember the order of the container- and the host-port, I
always think of the container as laying on my desk. First, I grab the cable (the
host machine) and then plug it into the container. Weird analogy, I know. But it
really helped me make sense of this!

If you now access `http://localhost:4000` on your host machine, you should see
your application!

## Docker Compose 101

* Volumes
* Networking
* Env Variables

## How I deploy my services

* Walkthrough of a simple deployment (miniflux?)
* Traefik
* Local volumes
* Permissions

## Conclusion

* Image size optimizations

This is post 030 of [#100DaysToOffload](https://100daystooffload.com/).

Fighting Array Functions with ES6


Yesterday, I came across an interesting bug regarding JavaScript Arrays, and I wanted to share my approach to fixing it.
At a basic level, I wanted to pass part of an array to a function, but wanted to use the original array later on.

```js
let arr = [1, 2, 3, 4, 5]
let something = arr.splice(0, 3)
do(something) // []
DoSomethingWithOriginal(arr)
```

Thinking that Array.prototype functions don’t mutate the array directly, I moved on with my day. This lead to a bunch of problems down the line.
Some array methods in the EcmaScript specification are designed to mutate arrays, while others do not.

### Non-mutating functions

- Array.prototype.map()
- Array.prototype.slice()
- Array.prototype.join()
- …

These functions do not mutate the array they are called on. For example:

```js
let arr = [1, 2, 3, 4, 5];
let partOfArr = arr.slice(1, 2);
console.log(partOfArr); // [2, 3]
console.log(arr); // [1, 2, 3, 4, 5]
```

### Mutating functions

- Array.prototype.sort()
- Array.prototype.splice()
- Array.prototype.reverse()
- …

These methods mutate the array directly. This can lead to unreadable code, as the value can be manipulated from anywhere. For example:

```js
let arr = [5, 2, 4];
arr.sort();
console.log(arr); // [2, 4, 5]
```

To me, it is very unclear, which functions do, and which don’t mutate arrays directly. But, there’s a simple trick you can use to stop letting the functions mutate arrays directly, ultimately leading to more readable and reliable code.

## Enter: The ES6 Spread Operator!

![Spread Operator](https://images.unsplash.com/photo-1518297056586-889f796873e0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1225&q=80)

Take a look at this snippet:

```js
let arr = [3, 5, 1, 2, 4];
let sorted = [...arr].sort();
console.log(arr); // [3, 5, 1, 2, 4]
console.log(sorted); // [1, 2, 3, 4, 5]
```

Voilà! We have a sorted array, and the original one is also around. The spread operator(`[...arr]`) is used to create a new array with every value of arr .
You can use this for arrays, as well as objects:

```js
let obj = {
  field: "example",
};
let extendedObj = {
  ...obj,
  anotherField: 42,
};
console.log(extendedObj.field); // "example"
```

## Conclusion

ES6 brought us awesome features like let and const assignments, as well as arrow functions. A more unknown feature however is the spread operator. I hope you now know how to use the spread operator, and that you can adopt it for cleaner and simpler code.


Introducing my new blog - slashdev.space


Hi! Welcome to the new home of my blog. Let me give you a small tour of why I built it, its underlying architecture and my ambitions with this project.

My old blog was based on [Gatsby.js](https://www.gatsbyjs.com/), a static site generator built on React. Back then, I used a quick and dirty blogging template I stole from the Gatsby themes page. Gatsby themes are essentially npm packages, that you throw in your project as a dependency. While it was super easy to set up, I had a hard time configuring it to my likings, since I relied on a framework someone else has provided.

The real turning point came, when I tried to build the blog after a few months of not maintaining it. I wasn't able to compile it, since some dependency of the blog template broke. Of course I could have forked the template and fixed it to my likings, but I didn't want to maintain yet another library until the end of my blogs life. You could draw some parallels to propriotary software, where you don't have the chance to look under the hood and see what's wrong, except in this case, it was just me being lazy.

## A new approach

What I want is a project that I have full control over. I want to be able to customize styling and add features whenever I want to. Gatsby would have been able to give me all of this, but I have the feeling that it sometimes overcomplicates things too much (Having a GraphQL backend is nice, but do you really need that?). I looked at frameworks like [Hugo](https://gohugo.io/) which offers lightning fast compilation, but with it, I would have been tied to "the Hugo way" of templating and configuring the project.

In the end it was [Next.js](https://nextjs.org/) that caught my attention the most, given how simple it is. There's not much configuration involved in the setup process (although getting it to work with github pages was somewhat tedious). Each component in the `pages/` directory corresponds to a full page on the website. The `public/` directory is served statically. That's really all I needed to build a modular webpage.

## Wiring things up

Because Next.js is so minimalistic, there are some parts that you have to set up by yourself. Rendering markdown files for example does not come included, it has to be done manually. Thankfully, there are some packages that can do this for you. All you have to do is write the markdown to the specific pages. It basically boils down to this:

```js
const posts = ((context) => {
  const keys = context.keys();
  const values = keys.map(context);

  const data = keys.map((key, index) => {
    // Create slug from filename
    const slug = key
      .replace(/^.*[\\\/]/, "")
      .split(".")
      .slice(0, -1)
      .join(".");
    const value = values[index];
    // Parse yaml metadata & markdownbody in document
    const document = matter(value.default);
    return {
      frontmatter: document.data,
      markdownBody: document.content,
      slug,
    };
  });
  return data;
})(require.context("../content/posts", true, /\.md$/));
```

Another special case was setting up a RSS feed. I basically had to write a simple script that generates the feed from all posts in the `content/posts` directory, let it run during every build and throws the output in the `public/` directory, so that it can be served as `/rss.xml`. You might argue that this is quite a tedious process for such a feature, but it gives me all the flexibility I want over the features of this project.

## Deployment

I've considered self hosting this blog on my server. While that would have been a fun learning-experience, I wanted to stick to the simple deploy-and-forget workflow I was used to from GitHub Actions. Every push to the master branch triggers a full deployment. No manual work required. Doing it this way, I also save the time and energy to set up SSL encryption, plus it is highly scalable (not that I expect a traffic-explosion, but you never know). Setting Next.js up to deploy to GitHub Pages takes some time, because there are some pitfalls that you have to be aware of. [This article](https://dev.to/jameswallis/deploying-a-next-js-app-to-github-pages-24pn) helped me a lot.

## Ambitions

In the future, I want /dev.space to become more than just a blog. I want it to become a platform for my thoughts and ideas. I'm also playing with the idea to migrate my main website (https://garrit.xyz) over to /dev.space, therefore made sure that my current setup is very future-proof and can be easily extended.

Feel free to dig through the source code for this project. You can find it on my GitHub: https://github.com/garritfra/slashdev.space

Let me know if there is anything that you miss on this blog. Searchable posts? Dark-mode? This is only the beginning of /dev.space!


Quick Tip! Setting up a lightweight Server-Client VPN with wireguard


This blog post has been taken over from my [collection of "Today I Learned" articles](https://garrit.xyz/til).

You can easily set up a private network of your devices. This way you can "talk" to your phone, raspberry pi etc. over an **encrypted** network, with simple IP-addresses.

![](https://images.unsplash.com/photo-1505659903052-f379347d056f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80)

Firstly, install wireguard on all of your systems. Simply install the `wireguard` package from your package manager respectively. Check out [the official installation guide](https://www.wireguard.com/install/) if you can't find the package. If you're on debian, try [this](https://wiki.debian.org/WireGuard?action=show&redirect=Wireguard) guide. There's also an app for Android, iOS and MacOS.

Every participent (Client and server) needs a key-pair. To generate this, run this command first on the server, and on all clients:

```bash
wg genkey | tee wg-private.key | wg pubkey > wg-public.key
```

It might make sense to do this as root. This way you don't have to type `sudo` with every command.

## Server Configuration

You will need to create a configuration for the server. Save this template at `/etc/wireguard/wg0.conf`, and replace the fields where needed:

```conf
[Interface]
PrivateKey = <Server private key from wg-private.key>
Address = 10.0.0.1/24 # IP Address of the server. Using this IP Address, you can assign IPs ranging from 10.0.0.2 - 10.0.0.254 to your clients
ListenPort = 51820 # This is the standard port for wireguard

# The following fields will take care of routing
PostUp = iptables -A FORWARD -i %i -j ACCEPT; iptables -A FORWARD -o %i -j ACCEPT; iptables -t nat -A POSTROUTING -o eth0 -j MASQUERADE
PostDown = iptables -D FORWARD -i %i -j ACCEPT; iptables -D FORWARD -o %i -j ACCEPT; iptables -t nat -D POSTROUTING -o eth0 -j MASQUERADE

# Laptop
[Peer]
PublicKey = <Public Key of Laptop Client>
AllowedIPs = 10.0.0.2/32 # The client will be reachable at this address

# Android Phone
[Peer]
PublicKey = <Public Key of Phone Client>
AllowedIPs = 10.0.0.3/32

# ...
```

Then run `wg-quick up wg0` to start the wireguard interface with the configuration from `/etc/wireguard/wg0`.

## Setting up clients

Setting up clients is very similar to the server setup process. Generate a keypair on each client, save the following config to `/etc/wireguard/wg0.conf` and replace the nessessary fields:

```conf
[Interface]
PrivateKey = <Client Private Key from wg-private.key>
Address = 10.0.0.2/32 # The fixed address of the client. Needs to be specified in the server config as well

[Peer]
PublicKey = <Server Public key>
AllowedIPs = 10.0.0.0/24 # Routes all traffic in this subnet to the server. If you want to tunnel all traffic through the wireguard connection, use 0.0.0.0/0 here instead
Endpoint = <Public Server IP>:51820
PersistentKeepalive = 25 # Optional. Will ping the server every 25 seconds to remain connected.
```

On every client, run `wg-quick up wg0` to start the interface using the config at `/etc/wireguard/wg0.conf`.

This whole proccess might be easier on GUIs like Android or MacOS.

Now, try to ping your phone from your laptop:

```
ping 10.0.0.3
PING 10.0.0.3 (10.0.0.3) 56(84) bytes of data.
64 bytes from 10.0.0.3: icmp_seq=1 ttl=64 time=5382 ms
64 bytes from 10.0.0.3: icmp_seq=2 ttl=64 time=4364 ms
```

### References

- [Official Documentation](https://www.wireguard.com/)
- [https://www.stavros.io/posts/how-to-configure-wireguard/](https://www.stavros.io/posts/how-to-configure-wireguard/)


The Patch-Based Git Workflow


If you have ever contributed to an open source project, chances are you have opened a pull request on GitHub or a similar platform to present your code to the maintainers. While this is a very approachable way of getting your code reviewed, some projects have decided against using pull requests and instead accept patches via email.

## An introduction to patches

A patch is essentially a git commit expressed in plain text. It describes what commit the change is based on, and what has changed. A basic patch looks like this:

```
From 92132241233033a123c4fa833449d6a0d550219c Mon Sep 17 00:00:00 2001
From: Bob <bob@example.com>
Date: Tue, 25 May 2009 15:42:16 +0200
Subject: [PATCH 1/2] first change

---
 test.txt |    1 +-
 1 files changed, 1 insertions(+), 1 deletions(-)

diff --git a/test.txt b/test.txt
index 7634da4..270eb95 100644
--- a/test.txt
+++ b/test.txt
@@ -1 +1 @@
-Hallo Bob
+Hallo Alice!
```

As you can see, it is very readable for both the reviewer and the machine.

## Sending and receiving patches

The easiest way you can generate a patch from a commit is to use `git-format-patch`:

```
git format-patch HEAD^
```

This will generate a `.patch` file, that can be embedded into an email and sent to the maintainers. Oftentimes they will then reply to your mail with some inline comments about your code.

To simplify this process further, git has the `send-email` command, which let's you send the patch directly to someone without needing to embed it manually. I won't go into details about this, but there is a [well written guide](https://git-send-email.io/) on how to set it up.

If you have received a patch from someone, you can apply it to your tree with the `am` (apply mail) command:

```
git am < 0001-first-change.patch
```

check your `git log` to see the patch in form of the latest commit.

## Why even bother

You might think that this is just a silly and outdated approach to collaborative development. "Why not simply open a pull request?" you might ask. Some projects, especially low-level oriented ones like the Linux kernel, do not want to rely on third-party platforms like GitHub to host their code, with good reasons:

1. Everyone can participate! You don't need to register an account on some proprietary website to collaborate in a project that uses a patch-based workflow. You don't even have to expose your identity, if you don't want to. All you need is an email-address, and frankly most of us have one.
2. It's plain simple! Once you get used to generating and applying patches on the command line, it is in fact easier and faster than opening a pull request in some clunky GUI. It doesn't get simpler than plain text.
3. It is rewarding! Once you have submitted a patch to a project, there is no better feeling than getting a simple "Applied, thanks!" response from a maintainer. And if it's a response that contains feedback rather than an approval, it feels even better to submit that reworked code again and get it eventually applied.

## Conclusion

The patch-based workflow is an alternative way to collaborate with developers. If it helps you in your day to day business depends on the projects you are contributing to, but in the end it is always good to have many tools under your belt.


Quick Tip! Sharing terminal output with Termbin


Ever find yourself in a situation where you simply want to save or share the output of a terminal command? Selecting, copying and pasting text from stdout always feels quite tedious, if you just want to share the contents of a file.

A project called [Termbin](https://termbin.com/) tries to simplify this process. Just pipe the command you want to save to the following url on port `9999`, using Netcat:

```sh
echo "Hello, Blog!" | nc termbin.com 9999
```

Instead of showing the output, it will be forwarded to Termbin and show the URL, under which your output will be available:

```sh
➜  blog git:(master) ✗ cat ./some_file.txt | nc termbin.com 9999
https://termbin.com/faos
➜  blog git:(master) ✗
```

Sure enough, after navigating to [`https://termbin.com/faos`](https://termbin.com/faos), we will see the contents of `some_file.txt`. Neat!

### ⚠️Word of Caution⚠️

Do not pipe any personal information, credentials or any other private data into termbin. It will be instantly available to the general public, and theres no quick way to remove it.

Happy Pasting!✨


Testing isn't hard


"I write two tests before implementing a method", "My project has 90% coverage".

I don't know about you, but that's something I don't hear very often. But why is that?

Testing is not even that difficult to do, but yet it is always coming short in my projects. About a year ago, I've tried to implement tests in my React applications with little success, mostly because integrating `enzyme` and configuring it correctly is not that intuitive as a relatively new developer. I want to share my (partly opinionated) approach to JavaScript testing with `jest`, to get you started. In a later post I will demonstrate a way to implement `enzyme` into your React projects.

# The basics of testing JavaScript functions

To get started, you need a npm-project. I don't think I have to explain that, but just in case:

```bash
mkdir awesome-testing-project
cd awesome-testing-project
npm init -y
```

Of course, we need a unit we want to test. What about a method that returns the first element of an array?

```js
module.exports = function firstElement(arr) {
  return arr[1];
};
```

You already spotted a bug, huh? Let's keep it simple for now.

Install and initialize Jest, an open-source testing framework maintained by Facebook. When initializing, you should check every question with `y`.

```bash
npm i --save-dev jest
npx jest --init
```

Next up, we need to define our first test. Conventionally, we create a folder named `__tests__` in the directory of the module we want to test. inside it, there should be a file named `<module>.test.js`. Something like this:

```bash
▶ tree
.
├── package.json
└── src
    ├── __tests__
    │   └── firstElement.test.js
    └── firstElement.js
```

Jest provides global functions that do not need to be imported in a file. A simple test can look like this:

```js
const firstElement = require("../firstElement.js");

test("firstElement gets first element of array", () => {
  expect(firstElement([1, 2])).toBe(1);
});
```

`expect` is another word for `assert`. If you ask me, "Expect firstElement of [1, 2] to be 1" sounds reasonably english, doesn't it? After defining the test, all there is to do left is to run the `npm test` command, which has been created for us by running `npx jest --init` earlier.

```bash
▶ npm test
> jest

 FAIL  src/__tests__/firstElement.test.js
  ✕ firstElement (6ms)

  ● firstElement

    expect(received).toBe(expected) // Object.is equality

    Expected: 1
    Received: 2

      2 |
      3 | test('firstElement', () => {
    > 4 |   expect(firstElement([1, 2])).toBe(1);
        |                                ^
      5 | });
      6 |

      at Object.<anonymous>.test (src/__tests__/firstElement.test.js:4:32)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        1.1s
Ran all test suites.
npm ERR! Test failed.  See above for more details.
```

Whoops! Looks like we have found a bug! Let's fix it by adjusting the index of the return value in the firstElement function:

```js
module.exports = function firstElement(arr) {
  return arr[0];
};
```

And after rerunning `npm test`:

```bash
▶ npm test
> jest

 PASS  src/__tests__/firstElement.test.js
  ✓ firstElement (4ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.666s, estimated 2s
Ran all test suites.
```

Yay, your first unit test! Of course, there is much more to find out about the Jest framework. To see a full guide, read the [official docs](https://jestjs.io/).

I have prepared a [template repository](https://github.com/garritfra/react-parcel-boilerplate) for building react apps. It also uses Jest to run tests, you don't have to worry about a thing! If you found this interesting, consider checking out my other blog posts, and/or check out my [GitHub](https://github.com/garritfra)!


Whom do you trust?


Nowadays, password managers are a necessity if you care even the slightest about your personal belongings on the interwebs. But think about it, do you really want to trust another company to store your most sensitive information?

![](https://images.unsplash.com/photo-1522251670181-320150ad6dab?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2566&q=80)

##### TL;DR

Use a **stateless** password manager like [LessPass](https://lesspass.com/) to access your password without relying on a third party to store your data.

## Why use a password manager in the first place?

Having a single password for multiple accounts is convenient. What's also convenient, is **using** this password on multiple accounts once you have access to a single one. What might be convenient to you, might also be convenient to others. Many people, [especially celebrities](https://web.archive.org/web/20170225163642/http://uk.businessinsider.com/twitter-says-it-wasnt-hacked-passwords-reused-older-hacks-malware-to-blame-2016-6), fall victim to this trap of comfort.

To counteract this, people are (and should be) using different passwords for different accounts. These passwords differ in a single letter or digit (Twitter: `porridge4president`, GitHub: `poridge5president`, etc.), or they don't match at all (Twitter: `porridge4president`, GitHub: `YouWontGuessThisOne`).

The problem that most likely arises from this technique is called _password chaos_ ([Source](https://encyclopedia2.thefreedictionary.com/password+chaos)):

> _"The confusion that arises when users have many unique passwords."_

The aim of a password manager is [to solve this problem by storing all of your passwords in a single place and securing it with an _ultra secure superpassword!_ (©)](https://www.businessinsider.com/how-to-use-password-manager-store-protect-yourself-hackers-lastpass-1password-dashlane-2017-2?r=DE&IR=T). This way, you can use arbitrary passwords - preferebly gibberish that doesn't make sense to humans (nor machines) - without losing them, as long as you have your _ultra secure superpassword!_ (©) - aka your masterpassword. The benefits are obvious: You get rid of the password chaos problem while staying relatively secure. Eventhough password managers are quite benificial, some people (including myself) see a catch in them.

## Relying on a third party

Relying on third party companies doesn't seem like a big deal. After all, you are probably using some form of cloud service to host your photos. Yet there's a lot of trust involved in letting others handle your private data, especially your passwords. In 2017, [a major password manager got hacked, exposing sensitive data including users and their passwords](https://www.zdnet.com/article/onelogin-hit-by-data-breached-exposing-sensitive-customer-data/). This shows the potential for security breaches in an application that inherently seemed safe. But what if I told you that there is an alternative to this? A password manager that does not store your data at all?

## A Stateless password manager

Recently, I stumbled across [LessPass](https://lesspass.com/#/). LessPass is a password manager that is very different from what I have seen so far. Instead of storing passwords that either you or a random password generator came up with, it computes passwords on the fly, given a website, username, your masterpassword and some options.

![LessPass](../assets/lesspass.gif)

The key here is that LessPass uses a **pure function**, i.e. a function that given the same parameters will always give the same result. Using this technique, there's no need to store your password in a database owned by a large company, nor do you have to sync your passwords between your devices ([but there's an app](https://play.google.com/store/apps/details?id=com.lesspass.android&hl=de)). The computation happens right on your machine, and **only** on your machine. If you want to find out more about how it works under the hood, you can check out [the authors blog post](https://blog.lesspass.com/lesspass-how-it-works-dde742dd18a4#.vbgschksh). He goes into great detail on what alorithm is used to compute your passwords and how to utilize every feature of LessPass.

## Conclusion

Being a little privacy nerd myself, I often think twice about what services I want to use, often even looking into self-hosted alternatives to major products. There are multiple products that offer self hosted solutions to store your passwords, however I also don't even trust _myself_ with such sensitive data either. LessPass eliminates the need to have a third party watch over your data, let alone to store it on their servers.
