Every semester is the same story. You want to search for some courses to plan out your semester, you open the Course Catalog (VVZ), and then sluggishly jump through page after page until you finally find a few potential candidates for your next semester. Every single click makes you tediously wait. And personally, it also pains me to see a website being so slow in this day and age. Though, it's still somewhat impressive for VVZ to still be running with minimal (frontend) changes since 25 years.

Students are not satisfied with VVZ. Want proof? In the past years, almost every VIScon hackathon has had a task related to creating an improved VVZ or course planning tool. Seemingly, I keep coming back to VVZ, even having worked on a course planning tool in two separate VIScon hackathons. Creating such a tool presents two major hurdles. On one hand, it is a large undertaking to create a tool that can correctly keep track of every requirement for all the different study programmes. But even if you choose to forgo that aspect, there is still the looming question of how to even get the data for all the courses. You might only be interested in the course name, number, and credits, but maybe you also want access to the course description and exam information.

But how can you get the actual course data? VVZ has an internal API, but it requires authentication, so it is a no-go if you just want to quickly play around with data to see if your tool even makes sense. So there is only one other option: You will have to resort to scraping the raw HTML pages of VVZ and then tediously extracting all the relevant data. While not the most difficult task imaginable, it does impose a challenge, especially in the likely case that you don't know the full structure of VVZ and what all the values can be or how everything gets displayed. So even with an AI agent speeding up the work of writing all the scraping logic, you will inevitably stumble upon something new that you didn't expect or handle. Luckily, you can assume that the actual structure of the HTML will probably not change anymore, allowing for any scraping tool to be quite heavily hard-coded.

And don't even try to make any assumptions about the structure of VVZ. Anything that you believe suuuurely doesn't exist, actually does exist. Did you know there can be two courses with the same number (000-0000-00L type number) in the same semester, or that credits don't have to be integers? Credits can theoretically have up to four decimal places. Luckily, the most I've stumbled upon only uses one decimal place. For example, "151-0055-10L  Ingenieur-Tool: Planung menschlicher Arbeit" in the 2024 Winter semester gives you 0.4 credits. You can take some 2.6 credit course to even it out.

There's no reason why it should be so hard to build tools on top of VVZ. I fall in with the open-source and unix ethos of creating modular tools that can easily work together. For most applications, it becomes exponentially hard to account for all features anybody would ever want. It therefore often makes sense to instead allow for easy interoperability. If people want some specific niche features, they can build their own third-party tools. People who don't want those features don't have to wade through and explicitly disable everything. In the simplest form, that usually means creating a REST API that can allow for third-parties to, on one hand, access the data, but on the other, also perform operations if required.

Before, when you wanted to use course catalog data, you might have been able to find some random script on GitHub somebody cooked up to quickly scrape a few things from VVZ. The problem is that basically all of these tools all only require a subset of the catalog data, and hence if you need something they don't scrape, you had to figure out and rewrite a large part of the code. You were usually better off just quickly writing your own scraper to fit your needs and tech-stack instead.

To aid in that, in the past months, I worked on creating an API that makes the full VVZ data available over a simple REST API. My two main goals were to first replicate all the data available, including the past semesters and all the information I doubt a lot even notice (have you ever looked at the "Competencies" section?). Most of the data will probably never be used, but it's all there if ever needed. And second, to make the API easy-to-use while allowing for the same filtering capabilities (and more) as VVZ.

The API

The website can be found under vvzapi.ch. It initially started out as a bare-bones API-only website, but I've recently added a frontend that allows you to unleash the power-user in you and search using all sorts of operators (heavily inspired by scryfall). You can add AND/OR clauses or filter by certain keywords, credits, and even by the coursereview rating if the course has one. Interestingly, but also understandably, the search itself is used by a magnitude more than the actual API endpoints.

My goal with VVZAPI wasn't to create the next course planning tool everyone should be using. I wanted to make the course data more easily accessible and generally also just be faster in response times. I want the API to enable new projects and tools to sprout. Often the best ideas never come to light, simply because too there are too many obstructions that have to be worked around with. With VVZAPI, I intend to at least make the data gathering step a lot easier.

Do you have an idea for a course tool, but were hesitant because the data-gathering step deemed itself too big of a hurdle? No need to fret, use the API endpoints on vvzapi or even just download the sqlite database dump (around 250MB), so you have all the data at your fingertips without even having to send out a single request.

And of course, the fine print, VVZAPI isn't an official ETH tool, and I also don't guarantee that the data is always correct and up to date. Don't blame me for misplanning your semester :)

Additionally, in as soon as 2 years, VVZ will get a completely new overhaul when PAKETH takes effect. At that point VVZAPI will probably be taken offline and some new solutions have to be sought after.

For common tasks like tracking expenses or managing TODOs, a large part is how to make it easy and friction-less to use to incorporate it into your daily life. That is why I want to share not only how I store all my finances, but also how I made it very easy to add expenses from my phone using iOS shortcuts.

Sheets

There are a lot of finance tools. Some self-hosted, some overly expensive, and some with barely any features. But all have a common flaw. They are often extremely inflexible. I want to foremost track my finances in an easy and minimal manner. If at a later point I decide I want to now add a cronjob that, for example, automatically adds my monthly subscriptions, I have to hope that whatever finance tool I'm using already supports subscriptions. And if not, hopefully it's open source so I can maybe contribute the subscription feature or at least hack it together for my personal use. But the subscriptions feature was just one example. There are a bunch of finance tracking apps that already support subscriptions. Replace it with some other feature X that you feel is very important or some graph representation Y that would make your finances so much easier to view. Very quickly you'll reach a point where all the apps that support your desired feature set either simply don't exist, or are way too complicated/expensive for a little personal finance tracking. Such a flexible finance tracking app sounds almost impossible. Luckily there's already a 40 year old solution for simple finance tracking:

It's Excel. Or at least, the whole spreadsheet system introduced with Excel 40 years ago. Of course, I don't use Excel myself though. I want to be able to edit my spreadsheets anywhere and on any device. Google Sheets fills that gap just perfectly for me.

Google sheets allows me to keep track of my finances with minimal effort. If I want a specific type of graph to visualize my spendings, I can simply insert and design the chart however I want. If I want to add a way for my subscriptions to automatically be added, I can simply vibecode a little script and have it trigger on a daily basis (called Apps Script in GSheets). If I ever have the urge to move away from Google Sheets, I can simply download the whole sheets as an excel, ods, or csv file. So I'm not vendor-locked in any way.

Adding entries

Then there's the question of how to insert entries. In theory, I could always open up my sheet and add the entries. Only downside is that Google Sheets takes a while to load. It might be negligible at first, but I know myself enough that this sort of friction will have me stop tracking my finances down the line as I can't be bothered anymore.

Google also provides Google Forms, which allows you to directly add form submissions into a google sheet. And a little undocumented trick is that you can submit form submissions using a GET request, which can be done by basically any sort of tool. Below is a quick guide on how to set it up.

To determine that link:

1. Create your Google Form. Add any inputs you desire. The actual answer type does not matter. You could also just keep them all as "Short answer text".
2. Head to the "Pre-fill form" page.
3. Enter some arbitrary values.
4. Click "Get link"
5. Click the "COPY LINK" which gets you a forms link along the lines of (split up into lines to make the components clearer):

   https://docs.google.com/forms/d/e/aSBs...OlA
   /viewform?usp=pp_url
   &entry.1975411869=420&entry.278177584=prostate+exam&entry.453701871=2200-04-01&entry.816962894=13:37
   

6. The entry.<id> are what fill in each of the inputs. Now replace the middle /viewform?usp=pp_url part with /formResponse?submit=Submit. You should now have:

   https://docs.google.com/forms/d/e/aSBs...OlA
   /formResponse?submit=Submit
   &entry.1975411869=420&entry.278177584=prostate+exam&entry.453701871=2200-04-01&entry.816962894=13:37
   

7. Done! Visiting this in your browser (or sending a GET request to this) will now immediately submit a form entry.

iOS Shortcuts

I use an iPhone, on which you can make use of the iOS shortcuts. I've never really used these before, but you can generally do quite a lot of useful things with them. Whether you actually want to spend a lot of time making these (on mobile) is another question though. The Shortcuts app is a valid contender for the "top 10 most dogwater mobile UX apps". The drag and drop that sometimes breaks in addition with some variables not showing up unless you restart the app make it extremely infuriating to develop. But at least once it works, it works. Not that that is an entirely high bar to reach.

You can download the shortcut here if you want to use it. It requires the google forms URL and the above four entry.ids from above to set up fully. There are multiple ways to launch it. You could create a homescreen icon or a widget on your lockscreen. Or alternatively, you can assign a gesture (like clicking the lock button three times) to launch the shortcut.

As for how I actually use it, I don't have an all too strict system for naming my payments. Luckily I'm not an accountant and it's all just for my own two eyes. If I go to IKEA and buy a green chair for my room, I'd probably add it under "green chair ikea". A small hint so that a few months or maybe a year down the line I can look at my expenses and be reminded of how I spent 200.- for that green clothes hanger in the corner of my room.

And that is how I have my finance/expenses tracking set up using just a Google Sheet for storing all the data, while having a shortcut on my phone to quickly add entries. I've since also created a few more shortcuts, albeit simpler. You can have them trigger when you open an app, so I have one that turns my screen grey when I open instagram, and then makes it colorful again when I close it. I leave the implementation as an exercise for the reader though (btw, the releavnt action is called "Set Color Filters"). Curious if you have any other shortcuts you use.

Over time my mentality on what is important in a system has changed a lot. I used to enjoy procrastinating studies by spending absurd amounts of time configuring Neovim or my previous NixOS setup. But I now don't enjoy that anymore as it also distracts from the actual work I want to do (on my projects). I now only want things that "just work" with mostly the default settings. I want to be able to get to work and not have to configure random things all the time. But I enjoy having the option to still customize my system however I want without having the OS restrict me.

Table of Contents

• Table of Contents
• System Setup
  • Systems
  • OS / Distro
  • Package Management
  • Development Tools
  • Dotfiles
  • Editor
  • Version Control
• Conclusion
• Footnotes

System Setup

Systems

I use two systems: A Tuxedo laptop and a full AMD CPU+GPU self-built desktop gaming PC.

On both systems I have 64GB ram. It's personally the minimum amount of RAM that I now get for my systems, not because I need the RAM, but because it was a relatively cheap (before the RAM price spike) upgrade you could do to your PC and then it's a resource that you will never struggle with or be bottlenecked by. Granted I also don't do any ML.

I am fully satisfied with my desktop. I haven't done a single bit of ML since I have it so I can't tell you how good cuda(-replacements) are nowadays. But as for daily use and gaming the only issues I've had which were due to it being AMD were that the GPU sometimes crashed for three specific games. Underclocking the GPU to 95% fixed any crashes.

The Tuxedo laptop is a bit of a mixed bag. Performance is great, but the touchpad is actually ass and sometimes starts becoming a bit unresponsive on fine movements (reloading the touchpad kernel module fixes it but I haven't been able to pinpoint where this issue comes from exactly and how to fix it. If you have an idea please hit me up.). The battery is not the best, but to be honest I can just charge it wherever I am so it's not really something I mind a lot. I don't do any very long trips without a power bank on hand or a plug available in the train.

OS / Distro

Both on my laptop and desktop I daily-drive Linux. On both I've installed EndeavourOS. Here, I'll say it, EndeavourOS is the best Linux distro out there if you just want a working system without straight up bloating your system. On my desktop I used to run Windows. I've now replaced it with EndeavourOS running KDE Plasma and it all works without having to endlessly configure anything. Everything you need is preinstalled and the feel is extremely familiar if you come from Windows. Everything you expect to just work from an OS just works; printers, drivers, usable settings UI, etc. The install processes is a straightforward UI where you easily click yourself through.

As a note, I mainly use my systems for programming and gaming, while most general work I do is in browsers (photopea, google docs, etc.) and therefore OS-agnostic. I don't really work with excel/docx files locally (other than maybe having to read one once in a blue moon) and mainly use google sheets and docs if required. Installing Steam and playing some games all just worked with no hiccups on my desktop.

EndeavourOS is Arch-based, so you have the powerful AUR (package repository) at your fingertips, which is superior to homebrew or Nix (Nix theoretically has more packages if you only look at the numbers, but if you've used Nix you'll know that it can often happen that some random library or tool simply doesn't exist on Nix yet, while on Arch you practically never face the problem of a package not existing.).

As for my laptop, I'm a big advocate for tiling window managers on laptops. On my desktop I would never install a tiling window manager. I have two monitors and a gaming mouse that I use to flick-shot all my windows to the correct positions. On a laptop, the screen real estate is a lot more limiting though and I also only ever use my laptop with the touchpad as I'm not going to carry around a mouse everywhere. There, I want a system that saves me the work of having to tediously move around windows with the touchpad. The solution? A tiling window manager!

Out of the box, EndeavourOS can install standard window managers like Sway/i3. By "standard" I mean the type of tiling window managers that simply split your screen and allows you to move around and resize them on the screen using keybinds (i3/sway/hyprland). My main gripe with such window managers though is the annoyance that comes when all the windows are constantly resizing when a browser or something like Anki opens a new temporary window and it is then closed again. If I have a browser open and am on some website that cares too much about the size of my browser, the moment I try to add a new card to Anki (which opens a new window), all my windows, including the browser, are then squished and messed up until I fix up the layout of my screen.

The solution to that is a different type of tiling window manager. The one I use is called Niri. It is a tiling window manager that provides infinite horizontally-scrolling workspaces. Opening a new window will never resize any of the other windows on the workspace. Instead, it simply shifts over the workspace as if you are on an infinitely long strip of windows.

So I instead also installed EndeavourOS with KDE on my laptop just to have a working system for the start. But I then used DankMaterialShell (DMS) to install both Niri and pre-configured Quickshell to have all the fancy status bars and widgets out of the box. It's quite a whack name, but it's an insane project and flies quite under the radar. People be glazing Omarchy while being completely unaware of the EndeavourOS+DMS combo. DMS provides the desktop feel with an easy-to-use settings-UI while supporting Niri out of the box.

Package Management

Using NixOS for a few years got me used to keeping my system clear of random packages everywhere. I don't install development tools globally. I hate cluttering my global paths and system with random packages and libraries. I instead only install development tools specifically into the projects I need them in (more on that in the next section).

For globally installed packages, like editors or other general apps, I use paru (pacman-helper) to install them. I additionally often use paruz [1], a fuzzy package finder, to find the correct package if I'm unsure about the exact name of it.

Sometimes I install something just to quickly test it out, but I don't actually need it lying around. Or sometimes I install certain tools I only require for a course and would like to delete after the course is finished. That is where aconfmgr comes in. I already have a blogpost on it here. But tl;dr: It keeps track of what packages I install and forces me to organize my installed packages so I know why I installed some package and I can also quickly glance over certain categories to see what packages I could clean up and remove. The process of organizing can be done at a later point though, so if I just want to quickly install some package without having to fiddle around with my system config like with NixOS, I can just do that.

For example, this semester I had a 35-course-modules.sh that included the specific programs two of my courses required:

# Applied Security Lab
AddPackage --foreign kathara # A lightweight container-based network emulation tool.
# Security of Wireless Networks
AddPackage gnuradio-companion # Signal processing runtime and signal processing software development toolkit (GUI)

At the end of the semester I could then simply delete these knowing I don't need them for anything else. Having my list of packages organized and commented like this is a lot easier to manage than simply looking at the list of all explicitly installed packages with pacman -Qe or similar.

Development Tools

The workflow of not installing development packages globally is something I picked up and been doing religiously ever since I started using NixOS. I have a blogpost on how I used to use shell.nix for my development tools. I've noticed that Nix is way too overkill for me and has the negatives of being too overcomplicated and pedantic for even the most minor tasks. I want to be developing my projects, not my devtool setup. The fact that I couldn't even execute some quick uvx command on NixOS because the binary it tried to execute used dynamic linking, which doesn't work on NixOS, is what eventually got me to ragequit and change to EndeavourOS after almost 3 years of using Nix.

The main requirement is that I want to be able to work on multiple projects with maybe overlapping tools (albeit with different versions) and I don't want a change in one project to affect the tooling in another project. For example, I might have an older project that requires nodejs 18 to run but want to use nodejs 24 on a newer project simultaneously. For node, I could use nvm or n to select the correct version manually every time I work on a specific project. But I need the same for any type of development tool or language. I don't want to have to install tens of tools for managing the versions of all my devtools. And I also don't want to constantly have to remember to switch around the tool versions when I switch over to another project. So I need a way to set up project-specific environments and I want a single tool to manage all my tools.

A third requirement is that I want to be able to easily clean up tools that I don't need anymore.

For quite a few months I've been trying to get devcontainers to work. And while devcontainers are quite a nice way to set up a clean dev environment, it brings with it a lot of negatives like permission problems, making it unnecessarily hard to use my shell and tool configurations, slow startup when opening the project, as well as actual feature development being quite stale. I eventually switched over to using podman for devcontainers, because it didn't change ownership of all my files in a directory to root. This way I could at least continue to use git outside of the devcontainer without having to constantly chown -R my project directory.

After enough annoyances with devcontainers, I finally decided to try out mise. I had a few doubts at first, but they were quickly swept away when I started using it and noticed how it can somehow just do everything I need it to. To start using mise, after entering a project directory, you can simply execute e.g. mise use node@24, which adds node@24 to the local mise.toml configuration as well as also installing node itself with the right version into the current shell environment. Extremely pain-free and fast. You can also install packages directly from cargo (with mise use cargo:...), npm, go, git, or even just install binaries directly. All while not being overly pedantic about EVERY. SINGLE. THING.

PS: If you don't want to push the mise.toml file and don't want to add it to the .gitignore, you can add it to your .git/info/exclude. But you can also for example push the mise.toml with the devtools everybody needs, and then create a mise.local.toml which is in the gitignore, with solely your own local devtools.

If you have mise set up in your shell config with mise activate, it will automatically download and add tools your shell environment when you enter a project directory, while removing them again when you leave the directory. My workflow when setting up a new project with mise is to simply enter the directory, type mise use zig@, tap tab twice for autocomplete to kick in, up arrow to jump to the most up to date version, and then I simply select whatever new version I want. For languages, I'll fixate the version (to at least the major version), while for less important tools like just I'll use @latest.

PS: Mise also allows for setting environment variables either one-by-one or by directly giving the path to an environment variable file. Extremely nice when you're working on a project that has a local docker-compose setup with a lot of docker-network specific environment variables, but you also want to be able to develop locally outside of the docker network, meaning you would need to change some environment variables like POSTGRES_HOST from postgres to localhost. Mise allows you to read a docker environment file (let's call it .env.docker), but then simply override a few of those variables without any hassle:

[env]
_.file = ".env.docker"
POSTGRES_HOST = "localhost"

If you're interested, you can view this exact example more concretely on the VIS Community Solutions repo.

To summarize, I personally find mise one of the best devtools and a must-have if you tend to work on multiple projects with different tech-stacks.

Dotfiles

Managing my config files (dotfiles) is something I still can see a lot of improvement in. At first I used a --bare git repository. It is very simple to set up and use. But it quickly becomes messy, since I have some dotfiles (like aconfmgr config files) that are vastly different on my KDE desktop and my DMS/Niri laptop. That forced me to maintain two separate branches of my dotfiles, which then makes it extremely annoying to share dotfiles between the two systems.

Because of that, I instead use dotter to manage my dotfiles. It has two main features I need:

1. By default any config files you manage are symlinked to whatever path you define. This then allows you to store your dotfiles repository wherever you want, while allowing you directly (or something like a settings app) to edit the original (~/.config/...) path as normal.
2. It allows for adding dotfiles conditionally as well as template any files you define. I use this to split what dotfiles are installed on my desktop and laptop. For example, I don't need any Niri or DankMaterialShell config on my desktop running KDE. Or since I use aconfmgr on both devices, I template the aconfmgr files to allow me to conditionally install certain programs, like Steam, solely on my desktop while not installing it on my laptop. Templating uses handlebars allowing for operations like so:

# {{#if laptop}}
AddPackage thunar
AddPackage niri
# {{#else if desktop}}
AddPackage dolphin
AddPackage steam
# {{/if}}

I don't have my dotfiles repository public as of now though, since I have some secrets and slightly confidential files (ssh, kubectl, etc.) that I don't want to publish without first encrypting. I'm still on the lookout for a clean solution for that and open for any suggestions. Or another alternative is to simply keep the repository private as it is now.

Editor

I use Zed, LazyVim, VSCode (in order of usage) as my editors. Zed is currently my main editor I use for any project. It has some flaws. Like being quite uncustomizable, having bad UX surrounding extensions/LSPs, as well as sometimes having some visual bugs on my laptop. But it is extremely fast, has a minimalistic UI fully controllable with the keyboard whenever desired, git diff viewer, and a debugger (which I frankly haven't used yet). I also use it mostly with all default settings, other than a few keybinds like switching tabs or opening/closing the terminal [3].

For smaller things and anything in the terminal, I use Neovim with LazyVim. Again going along with the "no-setup" route since I really don't want to be spending my time configuring Neovim anymore. I once forced myself to only use Neovim for half a year for all my coding. I set everything up from scratch and had it be basically everything I wanted, but at the end of the day mouse support is still bad and it being in the terminal drastically restricts it with any UI/UX choices. I now solely use vim for all my quick terminal file edits and lazyvim is a nice way to quickly have a bunch of small must-haves and nice visuals.

The sole settings I've added to lazyvim is the <leader>y keymap to copy something into my system clipboard instead of the vim register. Same goes for paste and delete.

vim.opt.clipboard = ""
vim.keymap.set("n", "<leader>y", '"+y')
vim.keymap.set("v", "<leader>y", '"+y')
vim.keymap.set("n", "<leader>d", '"+d')
vim.keymap.set("v", "<leader>d", '"+d')
vim.keymap.set("n", "<leader>p", '"+p')
vim.keymap.set("v", "<leader>p", '"+p')

VSCode is currently my backup editor for when I need some specific feature I can't seem to find on Zed or generally when I need an editor I know just works. I'm a fan of how powerful VSCode extensions are, but when working with a lot of different tools and languages, each requiring a different set of extensions, it quickly slows down VSCode itself. You can choose to only install extensions on a per-project basis, but that feature is still quite clunky and quite an afterthought. I wish I could have an almost empty VSCode with only a handful of global extensions, and then define in a file in the project directory what extensions should be used/installed when working in this directory. Devcontainers allow for that, but as mentioned previously that brings with itself all other sorts of problems. That is why I'm fond of Zed right now, because while the extensions themselves are somewhat limiting, they're written in rust and don't slow down the startup and editor so much.

One thing with the mise workflow is that for the environment to be properly accepted by the three editors, you need to first enter the specific project directory and activate the mise environment, before then launching the editor of your choice. I don't open my editor and afterwards proceed to open the directory from there, since that does not set up the environment correctly. But I also don't want to have to tediously always have to open a terminal, navigate to the project and run nvim ./code ./zeditor .. For that I have a popup that launches with Super+P. I can then select the project directory I want, it cds into the directory, executes mise x -- zeditor . and lets me correctly use the the environment in my editor [2]. More details on the popup thing can be found in my popup blogpost. I've configured the keybind and popup to work on both my KDE and Niri systems.

Terminal

For my terminal I use kitty. A simple and fast terminal. I don't use the features like tabbing or window splitting. I have my tiling window manager for that.

As for my shell, I use fish which looks and behaves very nicely right out of the box. I have my terminal set up with three key features to aid in my productivity:

• For quickly jumping to any directory I use fzf. With Alt+C I get the fzf popup allowing me to search and instantly jump to any directory. Alternatively I can also use Ctrl+T in the middle of writing a command to fill in a filename using fuzzy matching.

  # .config/config.fish
  fzf --fish | source
  set -gx FZF_ALT_C_COMMAND 'fd --type d'
  

• One of the greatest tools I've added to my tool box is atuin. It allows me to synchronize my terminal history between my laptop/desktop while also providing a fancier way to fuzzy search my commands history with Ctrl+R. I have it disabled so it doesn't trigger on arrow-up, as that messes with the "command context" I keep of my terminal windows where I expect arrow-up to only use the local history.

  # .config/config.fish
  atuin init fish --disable-up-arrow | source
  

• On kitty I also have a slight change. With Super+Shift+Enter I can instantly open up another shell in the same directory or ssh connection.

  # .config/kitty/kitty.conf
  map super+shift+enter new_os_window_with_cwd
  

Version Control

I don't use the standard git CLI anymore and have been exclusively using jj (jujutsu) the past weeks. Steve's Jujutsu Tutorial is a great place to learn how to use it.

The main thing about jj is that it's a different workflow and way of thinking about git, while being fully compatible with the git backend. This allows you to easily use jj in place of git without everyone else in a project also having to immediately swap. jj makes jumping between commits and branches extremely easy and never requires you to ever explicitly git stash. It also makes rebasing a breeze and if you ever mess something up, you can look at a long log of all operations you executed and revert any change you want.

I've always thought that git isn't the perfect version control system and there's room for improvement. jj also isn't perfect, since it also uses the git backend after all, but it is a nice upgrade. jj can handle the same operations (if not more) as git, while being simpler to use. And in the case you need a git-specific feature, like adding tags (doesn't make sense in the jj sense), you can still always just use specific git commands interchangeably with jj.

Conclusion

The post turned out a bit wordier than I'd hoped. But I hope I could maybe motivate you to try out some new tool or set up your system to allow for a more seamless workflow.

Footnotes

[1] Paruz used to be available on the AUR. But the repository has been removed on Github and the version still available on AUR uses a broken paru version. I instead use the following fish function which allows for the same fuzzy matching of packages, but simply keep the name because it's fitting:

function paruz
    set -l pkgs (
      paru -Sl |\
      sed -e "s: :/:; s/ unknown-version//; /installed/d" |\
      fzf --multi --ansi --preview "paru -Si {1}"
    )
    if test -z "$pkgs"
        return
    end
    echo $pkgs | awk '{print $1}' | xargs -ro paru -S
end

[2] The following fish function is what allows me to fuzzy match the directory I want to enter (using fzf) and then instantly open the editor in it with the mise environment tools loaded (if existing, the editor still opens even if no mise.toml is located in the given directory).

function zed_open
    set -l directory (
      fd . --type d ~/Documents |\
        xargs ls -td |\
        sed 's|/$||' |\
        sed 's|^/home/mark/Documents/|~/D/|' |\
        awk -F/ '{OFS="/"; last=$NF; $NF="\033[1;34m"last"\033[0m"; print}' |\
        fzf --ansi --prompt="Zed Recent> "
    )
    if test -n "$directory"
        set -l clean_dir (string replace -ra '\e\[[0-9;]*m' '' -- "$directory")
        set -l formatted (echo "$clean_dir" | sed 's|^~/D/|/home/mark/Documents/|')
        sh -c "cd '$formatted' && mise x -- zeditor ."
    end
end

[3] Because of browsers I'm used to Ctrl+Tab moving across tabs in the order they're open. Editors like VSC/Zed default to Ctrl+Tab switching tabs by recency which I find quite annoying/unintuitive. In Zed I now use these keybinds:

{
  "context": "Pane",
  "bindings": {
    "ctrl-tab": "pane::ActivateNextItem",
  },
},
{
  "context": "Pane",
  "bindings": {
    "ctrl-shift-tab": "pane::ActivatePreviousItem",
  },
},
{
  "context": "Workspace",
  "bindings": {
    "ctrl-tab": null,
  },
},
{
  "context": "Workspace",
  "bindings": {
    "ctrl-shift-tab": null,
  },
}

For those in the unknown, it is an extremely powerful way to find something on The Great Internets. I use it extensively for finding apps, libraries, or even just book recommendations for further reading. The report it generates I couldn't give a rats ass about. It's just some AI slop report after all and there's little I hate more than overconfidently wrong and overly-wordy LLM slop. But the real and slightly hidden power is when you look at the sources and the "Thinking" steps ("Seven Thinking Steps" type vibe).

Instead of having to endlessly google keyword after keyword and looking through reddit posts trying to see what makes sense, I hand that part completely over to Gemini and have it nicely gather all links that are even just slightly relevant. Gemini finds me the needles in the haystack, but I'll take it from there and determine what is actually good and what is not.

To end this somewhat long preamble, this has now often been my approach for finding tools, libraries, or even interesting books to read.

Super Productivty

That is how I then stumbled upon Super Productivity, an insanely well-made open source and free todo-management app.

TL;DR: I use it for all my todos. End of blogpost.

But why?

In the past years, I've always used Google Tasks. I had the Tasks app on my phone, which allowed me to have a homescreen widget (iOS) to quickly see and add any todos I had. Or alternatively, I also added any (project) ideas I had for future me to hopefully implement someday.

You can create different tabs to slightly separate your todos, but at the end of the day, it's quite a basic way of managing todos. I am always trying to slightly optimize different things in my life, so there was always the looming question if this is really the best way to do it.

On my phone, I have the RSS reader app (Reeder) set up to show me posts from hacker news, lobste.rs, and my Github feed to maybe stumble upon cool articles or interesting projects. One morning while sipping my horribly failed latte art, I stumbled upon a really interesting blogpost.

My productivity app is a never-ending .txt file talks about how the author has been using a text file the past 14 years for his daily todos. A lil' too hardcore for me. But for me, the real gold of the article was one key point:

• Using a calendar for all todos and ideas.

Assign a date

Have a new todo or idea? Don't just throw it on an endless list of todos you can't be assed to complete. Instead, assign a date to the todo for when you want to work on it or even just think of it again.

To cut to the chase, I knew I needed to reform my todo management. After a little digging with big brother Gemini, I then stumbled upon Super Productivity. It supports a bunch of features to make it extremely easy to oversee a lot of todos. And it also supports keybinds and shortcuts for the poweruser addicts.

I've added it as my home website when I open my browser to always see my todos there and I also added it as a homescreen PWA on my phone to add ideas while I'm out and about.

Workflow for new todos

Whenever I remember I need to do something or I generally just have an idea, I follow these steps:

1. Create a task and put a short description of what it is I wanna do. More details are better than too short and cryptic messages. If I see the todo a few weeks down the line and dunno what it's about, the effort of adding it was for nothing.
2. Add a date for when I want to work on the task or generally just think about it again. I usually throw my todos a few days into the future when I think I have time again. I'll often look at my todos for the upcoming days in the "Planner" tab and reorganize/spread them out a bit so my todos for a day are actually feasible. A shortcut for adding a date when creating a task is typing something like @tmr or @26feb.
3. Assign a project to the task. I currently have four projects (not including the default "Inbox"). The projects consist of "general ETH stuff", "general programming stuff", "VIS related stuff", and for bigger tasks with a lot of todos I might create a separate project (have one for ABR). Things not in those categories, like reminders for me to do Steuererklärung, I leave uncategorized, which implicitly places them into the separate "Inbox" project. A shortcut for adding a project is to type +prog or +eth.
4. Add an estimate of how long the task will take me. This helps a lot in gauging when and where I can fit this task into my day. It also helps me sometimes get over the bump of not wanting to work on a task I dislike, knowing that it only takes 20 minutes, so I might as well do it now. Adding 2.5h or 5m anywhere in the task creation text adds a time estimate. As a small tip, you will probably massively underestimate how long you take at tasks at first. No harm in over-estimating or refining the estimate later on.
5. Sometimes, if it's related to some article or requires a bit more information, I'll add the link as an attachment to the task and/or add some more details to the task in the notes section.
6. Sync/save the changes so I don't lose them.

Workflow for getting into a working flow

When I open SUP, I'll be greeted with all the tasks I assigned myself for today. Usually, I'll start with the task I vibe most with, while maybe reassigning some tasks to other days if I know I won't be working on those today anyway.

I've also been trying to use the in-app time tracking feature so I can better measure how long I actually take to complete tasks. This has made me realize that I massively misjudge how long I take for tasks, but slowly my estimates are starting to be more realistic.

At the end of the day, I'll try to use the "Finish Day" feature, which cleans up old tasks, as well as allows me to see what's coming up the next day.

Programming TODOs Example

For example, these are some todos I have for my programming project. I also have five todos in the backlog (at the very botom) which are just generally ideas that I'll eventually and maybe do, but don't have a date fixed for, nor do I actually expect to do them anytime soon.

I don't really make use of tags. I find it easier to just maybe add a small prefix like (vvz: for VVZ API), which is just enough for me to easily identify what programming project the idea is for.

Finito

Thanks for reading another one of my rambles. Mainly just wanted to share my discovery of the goated SUP with you. Hope I may have inspired you to check out Super Productivity (or maybe the Deep Research mode on Gemini).

I use Niri as my window manager. It's an amazing window manager I've really taken a liking to the past months. For some reason I have not released my blog post about it yet. So stay tuned. For this blog post, all you need to know is that Niri is a tiling window manager with some additional benefits I'll not go into here. In basics, that means that the window manager automatically splits up the screen so that each open window has a space somewhere. But you can also add a filter for certain types of programs to float around and not automatically get tiled. We'll use this to create our popup.

What I found was that it's extremely easy to create a quick CLI tool that pops up and allows you to select something. This saves me having to open the terminal and using a command there for things I just want to quickly execute and then have gone again. Let me give you an example.

Install packages quickly

If I want to quickly install a package, what I can do, is simply press Super+P, which then opens my fuzzy finding package manager terminal window as a popup in the middle of my screen. I can now search for any packages I want with fuzzy matching. Additionally I also get all the relevant information like URL, author, last updated at, etc. to make sure I'm downloading the right package. Once the download is complete the popup nicely disappears and I can go on with my work.

You can create most of this without any third-party dependencies, using just pacman/yay/paru. I'll also mention how to below. In the screenshot above, and because of straight-up laziness, I myself use paruz (the github repo has since been removed so I use my own function as shown below).

Launch VSC Workspaces

But why stay at only using it for installing packages? I'm a VSCode user, and on this system I use devcontainers for basically every project. I have more than enough RAM to handle Docker and it allows me to neatly manage all the dependencies without cluttering my whole system or having to write nix files.

Now one of the problems is, that when I want to open a specific devcontainer workspace, I first have to open VSCode and wait for it to load into the project. Probably I had some other devcontainer open, so I have to first wait until VSCode finishes initializing the dev docker container, before I can properly switch over to the workspace (using Ctrl+R) I was intending to go to.

So my task was to create some terminal script that allowed me to launch VSCode in a workspace. But now that always requires me to first open the terminal just to then open VSCode. So why not expand that into a popup just like I did with the package manager above.

Now I can simply run Super+P and open a nice popup that allows me to pick the VSCode workspace I want to resume.

Quick How-to

The config files I'll show are for my setup, so might have to be setup and translated (with gpt) into whatever you use:

• WM: Niri
• Terminal: Kitty
• Shell: Fish

WM

Add a window rule so that any apps opened with the ID floating-popup are not automatically tiled, but instead initially opened as a floating window:

// .config/niri/config.kdl
window-rule {
    // floating terminal popup (like paruz and vscode workspace finder)
    match app-id="floating-popup"
    open-floating true
    default-window-height { fixed 400; }
    default-column-width { fixed 700; }
}

Then we add the keybinds to launch our scripts:

// .config/niri/config.kdl
Mod+P hotkey-overlay-title="Pacman Install" { spawn "bash" "/home/user/.../paruz-popup.sh"; }
Mod+T hotkey-overlay-title="VSCode Workspace Launcher" { spawn "bash" "/home/user/.../vscode-popup.sh"; }

Fish

Now we come to the scripting part. Make sure to swap out the kitty terminal for whatever you use.

In the paruz-popup.sh I simply have the following:

kitty --class floating-popup -e bash -c 'paruz' &

Alternatively, you can create your own "paruz" using pacman/yay/paru. Here's my fish function for it:

function paruz
    set -l pkgs (
      paru -Sl |\
      sed -e "s: :/:; s/ unknown-version//; /installed/d" |\
      fzf --multi --ansi --preview "paru -Si {1}"
    )
    if test -z "$pkgs"
        return
    end
    echo $pkgs | awk '{print $1}' | xargs -ro paru -S
end

And now we're already finished. With Super+P we can easily install what we want.

For the VSCode workspaces, you can find all the recent workspace paths in your .config directory:

find ~/.config/Code/User/workspaceStorage -type f \
	-name "workspace.json" \
	-exec jq -r .folder {} +

Then using a fish function, the base directory is extracted and shown in the fzf menu:

# .config/fish/functions/vscode_recent.fish
function vscode_recent --description "Open recent VSCode workspace via fzf"
    # 1. Finds all workspace files
    # 2. Turn slashes into tabs (for better formatting in fzf)
    # 3. Add spaces to 'file:' to align results with 'vscode-remote:'
    # 4. Add color to remote/file type
    # 5. Show with fzf (only show uri type + basedir)
    # 6. Remove spaces
    # 7. Turn tabs back into slashes
    find .config/Code/User/workspaceStorage -type f -name "workspace.json" \
        -exec jq -r .folder {} + \
        | sed 's/\//\t/g' \
        | sed 's/file:/file:         /g' \
        | sed -E 's/(.+:)/\x1b[1;34m\1\x1b[0m/g' \
        | fzf --ansi --delimiter=\t --with-nth=1,-1 --prompt="VSCode Workspaces > " \
        | sed 's/ //g' \
        | sed 's/\t/\//g' \
        | read -l uri

    if test -n "$uri"
        code --folder-uri $uri
    end
end

Placing this function into .config/fish/functions/vscode_recent.fish will allow you to execute it in the terminal and test it. Lastly, we just add the sh file that will launch it as a popup.

kitty --class floating-popup -e fish -c 'vscode_recent' &

Looking back

Now having written this blogpost, I just realized that both of the shell scripts are so short, I could just put them directly into the niri config without additional files. But oh well, that's for you to then do.

But also remember that fzf basically just takes in a list and allows you to fuzzy match over it. You can use this for anything you can think of that uses text.

Wait what, don't I use nix?

As some might know, the past years I was an avid NixOS user. I was attracted by the whole idea of configuring your system using some config files. The Nix language allows you to split up and organize your files however you wanted, which meant I had a separate modules.nix file just listing all my installed packages. Anytime I wanted to install something system-wide*, I had to add it to my modules.nix. This forced me to think about anything I wanted to install on my system with maybe a comment on why I installed it (i.e. required for X to work), so when I do my occasional pruning I knew if I could remove it.

This made me quite conservative on what I installed and hence mostly relied on installing packages only for a shell session instead of system-wide. Read my more than two year old blogpost about this here. But this whole ordeal with a config file OS also forced me to be tidy about what resides on my system. My system was basically in a permanent clean state with no garbage packages anywhere.

I have recently started using a new laptop and with that I felt it was time to change things up again. I was also starting to get annoyed at simple things like binaries with shared libraries not working out of the box on NixOS (only took me almost 3 years). I initially went for an immutable fedora, but that wasn't able to fulfill the itch I was looking for. Upon stumbling upon the aforementioned tool, I knew exactly what distro I had to run.

The itch fulfilled

I was looking for nix alternatives in terms of package management, curious to see what was out there. I knew about ansible and was even close to writing my own specific package management that automatically installed and exported packages in distroboxes using ansible, but luckily didn't pull through with it.

I then stumbled upon aconfmgr. The basics are, it creates a diff of expected and installed packages and files which is all outputted into a new "unsorted" config file.

The Workflow

The idea with aconfmgr is "install first, worry and sort later", which is a nice change to NixOS's approach of "worry and sort first, install later".

So I install what I want as normal. Oh, I need X for this course. I can quickly install it and start using it. But let's say it didn't quite work and i also have to install the dependency D for X to work.

Afterwards I can then run aconfmgr save in the terminal and it will generate a "unsorted" config file which will then list X and D. The config file looks like this:

# 99-unsorted.sh
AddPackage X
AddPackage D
AddPackage SomeGarbagePackage

I can then take X and D and sort them into one of my other config files together with a quick description of why I need it:

# 40-course-modules.sh

# Required for course Y HS2025
AddPackage X
AddPackage D

I can also see that I seem to have installed some SomeGarbagePackage. I don't need it so I can either just delete it manually using my package manager or simply not sort it into any of my module files.

After sorting my packages I would then delete the unsorted config file (99-unsorted.sh) and then upon running aconfmgr apply, aconfmgr will automatically delete any packages I don't have in my config.

I then also add my aconfmgr config files to my gitified dotfiles so I can also see when I committed which line.

And there's more

aconfmgr apply doesn't only remove unlisted packages, it also adds uninstalled but listed packages. It also doesn't only track packages, but it also keeps track of files (like the config files in /etc).

So in theory you can use it to backup your system state and if you ever decide to reset your system, you can hop back with the correct packages and files.

But I don't really use it for that and mainly use it to nicely keep track of my packages.

Another con is that it only works for arch-based distros. I was open to distro-hopping anyway, so this fit quite well. So yes, I'm on Endeavour OS now.

Have a go, try out aconfmgr and see if it also clicks for you like it did for me. A must-have if you want to keep your system clean of random packages.

Fast forward three years and I'm 150 days deep, tapping through my digital flashcards, 10 minutes on average per day. Must have lost my mind somewhere in those three years it seems. Maybe ETH has something to do with that.

My first years in bachelor I just continued my old habits of cramming in all the information before the exam. Only difference to matura being, here it was a few weeks before instead of hours or days. Third year comes around and while talking about some inner workings of the good ol' computer during a lunch in the better mensa, I realize I've forgotten so many of the cool terms I learned in my first year systems course. Detrimental. I study for half my 20's and in the end I forget all the cool things I crammed in for the exams? I needed a solution.

Over the years I've often overheard people using Anki and simply thought of it another flashcard app for nerds. Especially with the amount my Anki addicted friends hustled through it, it looked like so much pain and was confused why anyone would ever hurt themselves like that. After settling with the fact that I'm also a nerd and having an upcoming exam that required a lot of learning by heart, I gave Anki a chance. Oh boy did that spark a new world.

First thing you see when using Anki, apart from the trashy looking Qt UI, is the system with how cards are evaluated. Coming from only knowing Quizlet, which has a basic "Right" or "Wrong" for flashcards [1] , I was quickly immersed in Anki's system.

Anki in its basic form is just a simple flashcard app. Your cards have two sides. You are shown the first side and upon tapping you see the other side of the card. You are then given four buttons: "Again", "Hard", "Good", "Easy". It's up to you to determine how well you knew the card. Everyone has their own special system they follow, but the "standard" way is that you tap "Again" if you didn't know the answer, "Hard" if you knew the answer but it took some time, "Good" if you knew the answer well, and "Easy" if the answer was so obvious you're wondering why you even made this card.

It all bases on the concept of spaced repetition. Basically, you learn the most effectively for the long term if you see a card just before you forget it. And the duration between seeing the same card again almost doubles every time. First time you see the card in maybe 2 days, then in 4, and before you know it the card is spaced months away. Can really recommend reading more into how spaced repetition works. It's basically magic.

My first deck was one I got from somebody else, but I quickly learned that making your own decks is where the main power of Anki comes to light. Usually all I do for lectures is read through the slides or script and anything I deem important to know I clap into Anki. Simply shortcuts like Ctrl+N for choosing the card type and Ctrl+Enter for adding the card really help here. A key ingredient I always go with is to make my cards very small and bite-sized. I rather go through 20 small cards each taking 5 seconds than 20 each making me think and write down something for a minute straight. I got places to be. My toilet breaks already take long enough because of Anki, no need to make them so long I won't be able to walk for days.

Very early on I noticed that Anki is like cheating. You want to remember something with as little effort as possible? Just make a small Anki card out of it and eventually you'll know it by heart. I knew that anything I put into Anki, no matter how small, Anki will eventually get me to know the card by heart.

It was also in these early days, when I started adding random things to Anki that had nothing to do with ETH. I felt like learning countries and flags, so I just downloaded an Anki deck and went through those. I had terminal commands I wanted to remember and clapped those in. When I saw a word I didn't know I threw it in. Random language I wanted to learn? -> Anki. Everything I wanted to know long-term landed in Anki. It was so low effort, but so effective which was so golden for my lazy ass. I could quickly throw in cards and in my morning train ride I quickly studied everything I wanted for 10 minutes.

The magic of Anki is that anything you put in, you will eventually learn. It is very ineffective for learning things short-term, but for learning things across months it is the most effective system I have stumbled upon in all my wise years of traversing the web.

There are quite a few things I've added and used that I feel make the Anki experience just so much better. The number in the parentheses is the add-on ID if you want to try it.

• FSRS (Free Spaced Repetition Scheduler) (759844606): For new Anki users it won't make much sense, but for Anki veterans this is a must-have. It uses your history to make a scheduler which is suited just for you. It will reduce the amount of cards you review and instead show you the cards you need to look at. New cards on which you instantly did "Good" twice will show up a lot further down the line than cards you struggled to remember and had to press "Hard" a few times.
• Cloze overlapper plugin (1784155610): Clozes on a line basis and extremely customizable. Lists are the enemy of Anki, but sometimes you just have to learn them. This is perfect for that.
• Image Occlusion (1374772155): This is an add-on I often use to cheat and be lazy. I sometimes take pictures of some slides and just draw boxes around everything I feel like I should learn.
• Clozes: Allows you to make cloze (Lückentext) cards. Helps break down big cards where the context might be helpful.

You are a nerd, embrace it, download Anki.

[1] I haven't looked at Quizlet in years. So no shade at them, maybe they have a better system now.

Backstory

To give some backstory, a few months ago I started upping the amount of time I spend at a keyboard on a daily basis by starting an internship. I started getting pain in my arms by all the typing I was doing. I had already gotten this during my studies, but it was at this point that it finally clicked for me; if I'm going to be typing so much in the future, I need to find a more ergonomic setup. Otherwise it might not just be a little pain that passes after a few days anymore. Speed was never a goal and I already knew my speed would take a big hit anyway.

Layout

The first thing I looked at was a different keyboard layout. A layout determines how the keys are laid out on a keyboard. The most common layout is QWERTY (or QWERTZ).

Below are heat maps showing the most frequent letters in English. Take note of how empty the home row is. The home row is the middle row where your fingers should be resting. With your index fingers being on F and J. So basically most of the time you're typing on QWERTY your fingers are not on the home row and instead reaching to some other key. Also notice how your left hand is doing most of the work. While there are a lot of theories about why QWERTY came to be, it's a known fact that it sucks and is easy to improve on.

Over the years, I've gotten really fast at typing on QWERTY, being in the 98th percentile on typeracer. I have to admit though, my typing form is some 6 finger Frankenstein-technique which also doesn't help with reducing finger strain. I thought I might as well switch to a better layout if I plan to relearn typing.

A layout I've started my journey on is colemak-dh. It is very similar to the colemak layout shown above with some slight modifications to make it even better. Most notably D and H are moved underneath T and N, with the idea that moving fingers down is easier and more comfortable than moving the fingers laterally. The idea behind colemak is to keep a lot of special keys in the same or similar locations (Q, Z, X, C, etc.) to allow for an easier transition from QWERTY while making the whole layout ergonomic to use.

During my first month in May I aimed to spend at least 30 minutes to practice the layout on keybr.com, a website which improves typing by slowly introducing letters and having you focus on your weakest letter.

keybr introduces letters in the order of how frequent the letter is. On QWERTY the letters will be all over the place. On more ergonomic layouts like colemak you'll see that the letters are at first all on the homerow and any new letters introduced are in comfortable to reach positions. The amount you can write without even moving your fingers away from home row is quite surprising coming from having used QWERTY all my life.

This first month I only ever practiced at home after work. I didn't want to go cold turkey and write a whole two lines of code all day, because of how slow I was. I didn't yet learn where all the letters were, let alone where the symbols were. I tried to limit myself to use the keyboard wherever else I could though; for example to chat on Discord. It was a completely different experience from getting my thoughts out as a message in an instant to having around 15 WPM and slowly tapping away my letters and almost losing my train of thought while I search for the letters and fix my typos.

But I need QWERTY

QWERTY is so deeply ingrained everywhere it's almost impossible to get rid of it completely. One of the biggest fears of people learning a new layout is that they fear they lose their ability to type on QWERTY. What happens if you're on another system or you don't have your "colemak keyboard" with you? Then you suddenly can't type anymore.

That should not be the cause of any worry though. You can learn multiple layouts without forgetting how to use QWERTY. One very effective strategy is to only use an alternative layout on a different keyboard. That is also how I'm doing it. I only use colemak on my split column-staggered keyboard. I probably couldn't even use colemak on a regular row-staggered keyboard. This helps with the separation of layouts.

This does mean I have to carry around my keyboard wherever I wanna go, but realistically I only type a lot in two places anyway: At home and at work. Another bonus is that my keyboard is basically pocket-sized so not difficult to bring anywhere.

For gaming, every game has a lot of keybindings. Changing the keybindings of every game I open would be a nightmare, so instead I just my usual keyboard and QWERTY for that. My split keyboard wouldn't work for gaming anyway because of the layers and the homerow modifiers.

Keyboard

Ergonomic keyboards can quickly lead to a deep research rabbit hole. Something all ergonomic keyboards share is that they aim to avoid the angling of hands. They achieve this by either having both halves of the keyboard be angled to allow for straight arms or by simply splitting the keyboard in two. Having a split keyboard allows for your arms to be straight respective to your shoulders. This avoids your arms from aiming inwards and then the arms having to angle back out (ulnar deviation), which puts a lot of strain on the arms.

In my split keyboard research I first stumbled upon ergonomic keyboards like the Kinesis Advantage 360 or Glove 80. These are off the shelf products, but I didn't feel like shelling out half a grand for a keyboard.

To my surprise, there's a huge community behind ergonomic split keyboards. Lots of different variations making it easy to choose exactly what suits you. In the end I decided on a choc crkbd (corne keyboard) which leaves me with 42 keys.

The above is my crkbd. It is intended for your hand to nicely rest on the home row. Your thumbs, the strongest fingers, handle the three special keys on the bottom instead of both being wasted on a huge space bar. This frees up your pinky from having to do finger gymnastics to reach uncomfortable far away keys.

A major problem on standard keyboards is that the layout makes no sense. One of the most common keys, the backspace, is out of reach for most people, since it was an afterthought. Typewriters had no backspace. Have a look at your hands while typing. How much do you have to readjust your hands just to reach certain keys? I don't have the smallest hands yet I can't say I can comfortably reach all the keys without having to move my hand back and forth. Then come the modifier keys like CTRL, ALT, CMD, and FN. Your pinky, the weakest finger, is responsible for reaching all around. I'm honestly still unsure which finger is supposed to click CMD on a mac keyboard. Too far for the pinky, so I usually use my thumb or move my whole hand around. Then comes the row staggered keyboard layout. The only reason keyboards are row staggered is because of how a typewriter used to have levers and it made it easier to assemble. There are no ergonomic benefits and it's completely inferior to column staggered keyboards.

With the crkbd your fingers at most have to move one key up or down. With the exception of the pinky and index which additionally have to move one left or right respectively. Add this with the combination of having a column staggered layout, where the columns are shifted slightly up and down depending on what finger is on that column. For example, the middle finger column is the highest up allowing all your fingers to be at a comfortable position without having the middle finger cramp up too much or the pinky stretch too much. In my setup, I don't even use the corner pinky keys on the far top left/right and bottom left/right, because even those keys make me have to stretch my pinky over. Also lets me say I use a sub 40 key keyboard.

Layers

42 keys??? Where are the numbers? How do I write symbols? It for sure doesn't have F-keys.

Less keys means you have to use layers for achieving certain keys. For example I have three layers that I currently use. My first layer is the letter layer. I don't use a system level colemak, but instead just have the keys in a colemak layout and then use EurKey or US on whatever system I'm on. Less of a hassle, since I want to be able to write on Colemak no matter what system I plug my corne into.

The second text underneath is the key that is pressed if I hold the key for long enough or hold it together with another key. That means if I hold A and then press T I can open a new tab in the browser since that turns into Ctrl+T. These are called homerow modifiers, and are a really cool way to use modifiers without having to dedicate a special key for them. These keys are also one of the main reasons I don't use this keyboard for gaming. In the rare cases I need to spam a character which has a second key, I can tap and then hold the key to simulate a long key press.

The notable thumb keys are the &cmo 2 and &cmo 4 keys which are a modified version of the zmk "momentary layer" which bring me into the second and fourth layer while holding them. I technically only have three layers, but I like to swap GUI (Win key/CMD) and CTRL when working on a mac which I solved by simply duplicating my relevant layers.

Notably I also have my backspace on the left where caps lock usually is. It actually amazed me how natural it feels to be there. It is currently the only key I mispress on standard keyboards nowadays.

My second layer consists of my symbols on the left side and the navigation keys on my right. This is reached when I hold my left thumb layer-switch key. My QWERTY typing form was so illegal, that when using VIM I actually rest my fingers on hjkl instead of jkl;, so I just got used to having the "arrow" keys be on my home row. And below the arrow keys I have the corresponding faster movements Home, PgDown, PgUp, End.

My third layer the one I reach when pressing the right thumb layer-switch key. In this layer I have a whole numpad on my right hand. I find a numpad so much superior to writing numbers. Also helps me get high scores in the Monkeytype accountant mode. And on the left side I just have all my F-keys jumbled in as well as my shift is a caps lock. Not that I've actually ever really needed the caps lock since I started using this keyboard.

Conclusion

Learning a new keyboard (or layout) is one of the nerdy things you should be doing as computer scientist. You are in a job direction where you'll spend thousands of hours typing on a keyboard in the future. Look into ways to make it healthy.

Since I started writing this post almost three months ago I have improved a lot on my keyboard. I now use it everyday for work, know where my symbols and special keys are. Have reached around 70 wpm on monkeytype and see no end in having it improve yet.

I severely underestimated how long this whole journey would take. If I spent a bit more time typing and was less scared to use it at work my progress might've been a bit faster.

Hope I was able to inspire you to also explore this part of keyboards. When are you switching to a corne?

Every language I know now I learned during my past 3.5 years at ETH. 95% of it, if not more, I learned outside the usual study schedule. I want to introduce you to why you should learn new languages and how you can do it effectively to not forget it all a week later.

Why you should learn a new language

You'll often hear that instead of learning ten programming languages very roughly, you should stick to one language to learn it more in-depth. I fully agree with this point. You shouldn't try to quickly force in ten different programming languages just so you can make your CV look good at a rough glance. Take every language you learn one at a time so you can dive into it and fully learn it. That doesn't mean you should only stick to the one language you love. Be open to learning and checking out a new language! Just don't rush the learning process too much.

The main strength I see behind learning a new language is that every language has its unique way of thinking and approaching problems. This helps extremely with widening your horizon. Different languages have different ways of how projects are structured. Learning new languages makes you think differently about projects and languages you work with. New ways of thinking from one language can most often be transferred to other projects and languages. It helps understand different code bases better and with every language you properly learn, any additional language becomes even easier to learn because there are always some similarities (just like with spoken languages).

Some examples from my experience include learning Haskell, which opened up a new world of functional programming. I've started to think more about functional programming when writing in any other language and always making the conscious decision if for example a global variable is actually required or if I can approach the problem in a purely functional way.

Alternatively, learning Go and Zig opened me up to the concept of returning errors as values. Previously with Python and Java I always felt like errors had to be raised and caught in a bulky try/catch syntax. Go and Zig both introduced returning errors as values from functions (Sidenote: C also theoretically returns errors as values, but there it is not an integral part of the language). That is a new way of thinking which I've lately been enjoying a lot. With Go and Zig, it is also interesting to see how much they differ and how much is similar.

How to learn a new language

There is no one true way to learn a language and every language is different, which is why I'm not going to go fully in detail on how you should learn a language step by step.

There are two key steps I recommend for anyone learning a new language to follow:

1. Learn the basics of a language so you get the hang of the syntax. I've tried multiple methods for learning a language. I'd recommend you try the different methods to see what you enjoy the most.

   • For Zig I used ziglings (also exists for Rust: rustlings). This is a new way of learning a language for me which I tried out the first time for Zig. In this method, you get a lot of exercises with some code already prewritten for you. The code is buggy or broken and you have to fix it. Then there's always an explanation of the concept that is introduced or what is going on in the program. This helps a lot with becoming good at reading code you didn't write as well as learning to understand the compiler errors. This was one of the most effective ways to learn a language for me. I also didn't have to set up a project to create some practice files and could dive straight into using the language while learning about it.
   • For Go I followed the book "Get Programming with Go" by Nathan Youngman & Roger Peppé. This was my first time learning a language using a book and this book was perfect. It introduces the language slowly with humor and slowly turns you into a proper Gopher by teaching you the right etiquette.
   • For my earlier languages like Python, I learned using an app. Sadly the app I used to use has gone completely haywire with in-app purchases and I wouldn't recommend it anymore.

   An important point is that no matter how you learn a language, it is important that you not only learn the language theoretically but also apply the knowledge by playing around with the language and coding in it.

2. The next step to learning a language is to use the language in a project. Austin's Blog Post goes over some cool in-depth project ideas if you're looking for some. But a project can be of any scale and simply anything that interests you. Here also comes a point I find extremely important. Don't try to use a single language for everything. See a language as a tool and use the right language for the right job. If your goal is to create websites, you'll need to learn HTML and JS. By creating webassembly websites using Rust you're just shooting yourself in the foot. Or if you want to learn a systems language, find a project which allows you to focus on system-level aspects. Creating a discord bot with C is a nice project, but almost a bit too high level for C and results in a lot of pain. By using a language for something it isn't intended for, you learn more about the language, but it isn't necessarily the most effective way since you're trying to force the language to your use case.

   For example, a good project for higher-level languages and if you're a Discord addict, is to create a Discord bot. Gives you a lot of insights into handling user input while allowing you to dive more in detail for any feature you want your bot to have (image processing, web scraping, high-performance computing, etc.).

Conclusion

I learn languages not to fill my CV, but to get more insights into how different languages approach problems. I find learning about the different approaches quite enjoyable and can dearly recommend you to also have a look at new languages. You should also not rush learning a new language. Take your time with new languages and create projects to properly learn the language (projects also show you have proper experience with a language on your CV).

I'm curious how you approach learning a new language. Or do you avoid learning new languages? Why?

Sidenote: I tried to make a Zig propaganda post, but somehow resulted in writing a more general language post. Don't fret though, the Zig propaganda will come in a future post.

What we'll be building:

What is htmx?

htmx' motto is to stay simple. Instead of throwing huge chunks of JavaScript at a user, we only work with the actual required HTML. Using htmx we can make buttons responsive and replace elements on the website without reloading the website. The basics are, that when we click a button that should modify the site, we send a request to the backend server. The backend then doesn't return JSON, but the direct HTML which will be used to place wherever defined.

Base project layout

The project source code is available on GitHub. It is intended to be followed along starting with the template branch. The final branch has the full code of how it will look in the end. If you're ever lost when following along, you can check out the final branch to see how it should look when complete.

Sidenote: Styling seemed to be broken on Safari when I last tried it. It works on other browsers though.

Go

This project has a small amount of Go code. main.go is the whole web server. For handling requests we use chi which is a lightweight HTTP library. It allows for some nice features like easily adding middleware and getting values from routes.

The other file is internal/todo_type.go and this file only defines a single type definition. Go doesn't allow for circular dependencies and we need it in both main.go and the templ templates.

Templ

We're building a template-driven web server (similar to Django). Go has a template library out of the box (template/html), but it is not as clean as it could be. Instead for this project, we'll be using templ. Templ goes in the direction of components, similar to React. Like in the code snippet below, we can easily create a component (like Hello) and then easily use that wherever we want (using @Hello()). This gives a lot of freedom for how to use our components and it allows for a very clear structuring of the website. The syntax is also basically Go (with the same types), but we sprinkle in some HTML. Templ will generate Go code which then can be imported in main.go. It is important to make sure the generation runs and works.

package main

templ Hello(name string) {
  <div>Hello, { name }</div>
}

templ Greeting(person Person) {
  <div class="greeting">
    @Hello(person.Name)
  </div>
}

Tailwindcss

For styling everything, we use Tailwindcss. It's a must-have for designing a website. It allows you to more easily write and use CSS. For this project, most of the tailwindcss should already be added to components though, so you don't have to touch it. To make the main part of the code easier to understand and not bloated as much, all Tailwindcss has been thrown into static/tw.css.

Code along workshop

Part 1: Getting familiar with templates

Currently the main.go file is very barebones. It includes a single GET endpoint which returns our main.css file so that we have some styling on the website. The r.Get syntax is the afore-mentioned chi library and it'll also be how we can add endpoints for POST requests later on (r.Post).

I already prepared a base template which is located in components/base.templ. This file includes the htmx installation (the simple script tag) and the styling for the upcoming parts of the todo app. Using tailwind we set the background to a dark blue-grey, text to white and create a div that fully centers all its items. The { children... } tag allows the Base template to surround any other components we want.

components/todo.templ will be the file you'll also be editing. This file will contain all the todo-specific component structures.

The first thing we'll do is update our main.go with an endpoint that shows an index page:

// Handles all GET requests to /
r.Get("/", templ.Handler(components.Index()).ServeHTTP)

Now visit http://localhost:3000 and you'll see "Hello World".

We're missing the dark background though. Our Base is missing! Let's add that:

templ Index() {
    @Base() {
        <p>
            Hello World
        </p>
    }
}

This wraps our Index component inside of our Base component at the spot where we had { children... }.

Let's update our todo.templ to be more like an actual todo list though. We create a new component called TodoList which will be a component containing a list of all our todos. The id="todo-list" is what gives it some predefined styling. Don't forget it!

// The list of all todos. Basically the whole page functionality
templ TodoList() {
    <div id="todo-list">
        <h1>Todo List</h1>
        <form>
            <p>
                First Todo
            </p>
        </form>
    </div>
}

Then update the Index() component to use the TodoList template:

templ Index() {
    @Base() {
        @TodoList()
    }
}

Now we want to add a component for a single todo item called todoItem. This will be our component for a single todo item. Because our todo list is a two wide grid, each todo item will have two elements. The text on the left and an X button on the right to delete the todo.

// A single todo item
templ todoItem() {
    <p>
        Todo text placeholder
    </p>
    <div class="flex justify-end">
        <button type="button">
            X
        </button>
    </div>
}

Then update the TodoList to use a few of these components:

templ TodoList() {
    <div id="todo-list">
        <h1>Todo List</h1>
        <form>
            @todoItem()
            @todoItem()
        </form>
    </div>
}

Part 2: Adding variables to templates

Okay, at this point it looks quite good already. Now comes a big step. Let's make the components use some variables we can pass in. For this, we'll use the internal.Todo struct defined in internal/todo_type.go.

1. Create a todo array in main.go:

   import "coding-weekend/internal" // add import
   ...
   var todos = []internal.Todo{} // all todos are stored in a global array
   ...
   func main() {...
   

2. Import the same in todo.templ at the top:

   import "coding-weekend/internal"
   

3. Adjust todoItem to take a todo as an argument:

   templ todoItem(todo internal.Todo) {...
   

4. Adjust TodoList to take an array of todos as argument:

   templ TodoList(todos []internal.Todo) {...
   

5. Adjust Index to also take an array of todos as argument and pass it to TodoList:

   templ Index(todos []internal.Todo) {
       @Base() {
           @TodoList(todos)
       }
   }
   

   We won't be touching this Index component anymore.
6. Update our route handler in main.go to pass in the created todo array:

   r.Get("/", templ.Handler(components.Index(todos)).ServeHTTP)
   

7. Last step is to modify our TodoList to create a todoItem for every todo. For this, we add a Go for-loop:

   templ TodoList(todos []internal.Todo) {
       <div id="todo-list">
           <h1>Todo List</h1>
           <form>
               for _, t := range todos { // IMPORTANT: the first value (underscore) is the index in Go. We can ignore it
                   @todoItem(t)
               }
           </form>
       </div>
   }
   

8. All errors should be gone now. Let's finish todoItem by making it use the passed-in todo struct:

   templ todoItem(todo internal.Todo) {
       <p>
           { todo.Text } // add this
       </p>
       ...
   

9. Now when we visit the site, we have an empty todo list. Let's add some mock data in main.go to our todo list:

   var todos = []internal.Todo{
       {Text: "drink mate"},
   }
   

   Yay, if we visit our site we now have our first dynamic todo there.

The last thing we want to add to this part is to add a way to add new todos. For that, we create a new component in todo.templ. We call the component todoInput as it will be a text input field for adding new todos.

// The input field for adding new todos
templ todoInput() {
    <input
        placeholder="Enter todo here..."
        name="text"
        type="text"
        required
    />
    <button type="submit">
        Add
    </button>
}

Then below our for loop in TodoList add the input component:

...
    for _, t := range todos {
            @todoItem(t)
        }
    @todoInput() // add this
</form>
...

We won't be touching this todoInput anymore.

We can now visit our site and we'll see the following. This concludes all the base templating we'll be doing. When you click a button nothing happens right now except that the site refreshes. In the third part, we'll look into how to make it dynamic and function correctly using htmx.

Part 3: Making the site dynamic using htmx

1. The first thing we'll look at is adding new todos when we click "Add". You might have noticed we're using a form. By creating a form we can define the different input fields we want which will then be returned as values in a POST request using htmx.

   For the next steps to work, make sure you have name="text" in the todoInput() text input. This will be they key for getting the value out of the POST body in the backend.

   Head to TodoList where we have the <form> and add the following hx-post tag:

   templ TodoList(todos []internal.Todo) {
       ...
           <form hx-post="/todo"> // add this
       ...
   }
   

   This basically says, "Send post request to /todo with the form values on submit". If you try and add an item now, you'll notice the website doesn't reload anymore, but in the networks tab we get a 404:

   

2. Head back to main.go and we'll implement the handling of the POST method now. Basically, we want to parse the form values and get the "text" value out.

   // Handles all POST requests to /todo made by htmx
   r.Post("/todo", func(w http.ResponseWriter, r *http.Request) {
   	r.ParseForm() // REQUIRED for the r.PostFormValue to get filled with values
   	text := r.PostFormValue("text")
   	log.Printf("text = %s", text)
   })
   

   Let's add a new todo on the website. If the website seems to just disappear, it's all working as intended until now. We should also see our text being printed in the webserver console.

3. The site seems to disappear because htmx is by default expecting us to return the new HTML. As of now, we're not returning anything though resulting in htmx just removing the element. In that case, let's update our todos-list by adding the new todo to our array and returning the required HTML for the updated todo-list:

   r.Post("/todo", func(w http.ResponseWriter, r *http.Request) {
   	r.ParseForm() // REQUIRED for the r.PostFormValue to get filled with values
   	text := r.PostFormValue("text")
   
   	todos = append(todos, internal.Todo{Text: text}) // update todos list with new todo
   
   	templ.Handler(components.TodoList(todos)).ServeHTTP(w, r) // write html result
   })
   

4. Now let's try it out and see if it works... Okay, this is confusing, what is happening when I click the submit button?

   

   That is because by default htmx replaces the inner HTML of the component that sent the request. Meaning when we submit, the outer form that sent the request will stay, but it'll replace all its contents inside with the result of our r.Post function above. Let's fix that by simply swapping out the whole Todolist with the new content.

   Note the id="todo-list" on the outer most div inside templ TodoList.

   We do that by adding the hx-target="#todo-list" to have it target our whole todo list and hx-swap="outerHTML" to make it replace the full target, instead of simply the contents inside. Here's how our TodoList looks now:

   templ TodoList(todos []internal.Todo) {
       <div id="todo-list">
           <h1>Todo List</h1>
           <form
               hx-post="/todo"
               hx-target="#todo-list"
               hx-swap="outerHTML"
           >
               for _, t := range todos {
                   @todoItem(t)
               }
               @todoInput()
           </form>
       </div>
   }
   

   With this, we can now add new todos and it works without refreshing the whole page.

   TodoList is also fully done now. We won't be touching it anymore.

5. We now have the problem, that when we refresh the page, we suddenly only have our base example of drink mate. That is because our current r.Get("/") route only creates the template once when we start up the Go application. Let's fix that by making it recreate the template on each request:

   r.Get("/", func(w http.ResponseWriter, r *http.Request) {
   	templ.Handler(components.Index(todos)).ServeHTTP(w, r)
   })
   

   Refreshing the page now gives us the correct list of todos.

6. We have almost everything done already. We just need a way to clean up todos now. For that, we want to have it so clicking on the X button sends a delete request to /todo/{id} with the correct todo ID. The backend then deletes the corresponding ID and sends back the correct updated HTML for the todo list. Theoretically, htmx allows you to delete HTML elements, but to keep it simple we'll be replacing the whole todo list.

   Just as before, set hx-target="#todo-list" to have it target the whole todo list and hx-swap="outerHTML" to have it replace the whole HTML tag. To have htmx create a DELETE request, we'll use hx-delete and we use Go's fmt library to build an URL using the todo ID:

   import "fmt"
   ...
   
   templ todoItem(todo internal.Todo) {
       <p>
           { todo.Text }
       </p>
       <div class="flex justify-end">
           <button
               type="button"
               hx-delete={ fmt.Sprintf("/todo/%d", todo.ID) }
               hx-target="#todo-list"
               hx-swap="outerHTML"
           >
               X
           </button>
       </div>
   }
   

   All our components are now fully done. We won't have to modify them anymore.

7. Time to add the delete handler in main.go. Chi allows us to have arbitrary routes using regex. Here we only listen to routes of the form /todo/{id} where id is some number. We then convert the string parameter from the URL into an int and using slices.DeleteFunc we iterate over our todos array and delete all the elements that match the given ID.

   // Handles all DELETE requests to /todo/{id} where id is some number
   r.Delete("/todo/{id:\\d+}", func(w http.ResponseWriter, r *http.Request) {
   	// make sure the argument is a valid int (not too large for example)
   	id, err := strconv.Atoi(chi.URLParam(r, "id"))
   	if err != nil {
   		http.Error(w, "invalid id", http.StatusBadRequest)
   		return
   	}
   	todos = slices.DeleteFunc[[]internal.Todo](todos, func(t internal.Todo) bool {
   		return t.ID == id
   	})
   	templ.Handler(components.TodoList(todos)).ServeHTTP(w, r)
   })
   

8. Last course of action. We have to add a unique ID to each todo so we can then also delete the correct one properly. We'll be doing this very simply and not thread-safe for simplicity sake.

   1. Add a todoCounter which we'll increase every time a todo item is added. This is what we'll use for assigning IDs. Additionally, remove the hardcoded example from the array.

      var (
          todos       = []internal.Todo{} // all todos are stored in a global array
          todoCounter = 0                 // used for assigning todo ids
      )
      

   2. Add the ID to created todos in our r.Post function and increment the counter:

      todos = append(todos, internal.Todo{Text: text, ID: todoCounter})
      todoCounter++
      

With that, the workshop is concluded! Your site should now be in a working state where you can add and remove todo items.

User-specific todo list

The next step to how you would make this site more production-ready.

The site works as of now, but as soon as you start having more users, you'll quickly notice a problem: The todo list is shared by all users since it's completely server-side in a single slice. You'll then want to start looking into storing data on a per-user level. In the simplest terms, this can be done by creating a map with the keys being a user's hostname and the value being their list of todos. Gorilla sessions allow this to be implemented in a more secure way.