My User-Control-Focused Stack

Published: 2024-01-11 by Clayton Hickey

As someone who likes to have control over what they use and dislikes businesses that infringe on rights that I believe users should have, I have sought more open alternatives to software and hardware than the more closed-off alternatives. For those who share similar preferences, I hope the following can help you get started. Mostly, I wrote this practice.

Server Hosting with Linode

Unfortunately, the ISP at my house blocks hosting from ports 80 and 433, so I use Linode. I tried to use AWS, but as a minor at the time of trying, it was too annoying to create an account. Linode is very straightforward which I like. If you want a server, you create a Linode, basically just a cloud-connected computer on the internet. The connection is barebones enough that you can probably install whatever operating system you want. Personally, I run NixOS. On a single Linode, I host nearly every web-connected thing I use.

If you also want to install NixOS on your Linode server, they have a tutorial: https://www.linode.com/docs/guides/install-nixos-on-linode

The base linode plan costs $5/month for 1GB RAM and 25GB storage. This was good enough for everything, but a Minecraft server, so I upgraded to the next tier up at $12/month for 2GB RAM and 50GB storage. I also bought 40GB extended storage for $4/month. You will see that I get good use out of this plan as I explain the services I have running on it.

Operating System/System Manager: NixOS

I use NixOS as my main operating system for both personal and server use. NixOS is cool because it allows you to define all the sys-admin type stuff about your system in a single configuration file. While I more often hear the reproducibility - the ability to copy over to another system or easilily - which is cool, especially if you're doing a serverless/sharded service, what I find most useful is the locality of it. The single config file, in one place, I find, significantly reduces the cognitive load compared trying to keep many disparate config files and programs in line with each other in an distro like Arch or Ubuntu. This makes it easier to set it, leave it, and come back. Instead of struggling to figure out how to sign into the Mastodon user or something, all you have to do is search for "mastodon" in the configuration file and possibly check the Mastodon section of the docs/wiki for config options.

Config for my NixOS server

{ config, lib, pkgs, ... }:
let
  ClaytonXYZ = pkgs.callPackage(import (pkgs.fetchFromGitHub {
    owner = "ClaytonDoesThings";
    repo = "ClaytonXYZ";
    rev = "f377d44c0af6543643e3a0f7d6d436310ac28455";
    sha256 = "sha256-E07tCBbK4KJXlkZEAeYVkLzqAHh8T/fMlF2DqUWLqOU=";
  })) {};
  claytonhickeyme = import (pkgs.fetchFromGitHub {
    owner = "clay53";
    repo = "claytonhickey_me";
    rev = "69d2c5805ef4e969a19999e89e346a9d886bdb7a";
    sha256 = "sha256-L1tFapsXypqQ0j8om2PyavwZ4dr/BVl5NvYymNpzWM0=";
  });
  iloveu = import (pkgs.fetchFromGitHub {
    owner = "clay53";
    repo = "iloveu";
    rev = "2d0145d436d8c43ebabd10fb42b51f629bc75a0a";
    sha256 = "sha256-w0pyF2FQhL9y0pIvhxhl1EgeE7VbpzxYimiQInh+NYw=";
  });
  tutor_engine_org = import (pkgs.fetchFromGitHub {
    owner = "clay53";
    repo = "tutor_engine_org";
    rev = "157728cdcaa59d0ce86ed30955a7e38ad53a0fbc";
    sha256 = "sha256-2c1GAMnJNqUEv2WSobuTlKo16zwmngoQP0xOd3M5FBg=";
  });
  # For latest version of Minecraft server
  unstable = import (builtins.fetchTarball https://github.com/nixos/nixpkgs/tarball/nixos-unstable){
    config.allowUnfreePredicate = pkg: builtins.elem (lib.getName pkg) [
      "minecraft-server"
    ];
  };
in
{
  imports =
    [
      ./hardware-configuration.nix
    ];

  boot.loader.grub.enable = true;
  networking.hostName = "loadedskypotato"; # Define your hostname.
  networking.networkmanager.enable = true;  # Easiest to use and most distros use this by default.
  networking.usePredictableInterfaceNames = false;
  networking.useDHCP = false;

  time.timeZone = "America/New_York";

  services.openssh = {
    enable = true;
    settings.PermitRootLogin = "yes";
  };

  # List packages installed in system profile. To search, run:
  # $ nix search wget
  environment.systemPackages = with pkgs; [
    neovim
    wget
    inetutils
    mtr
    sysstat
    htop
  ];

  systemd.services = {
    ClaytonXYZ = {
      wantedBy = [ "default.target" ];
      description = "claytondoesthings website";
      environment = {
	STATIC_DIR = "${ClaytonXYZ}/s";
	DOMAIN = "https://claytondoesthings.xyz";
      	ROCKET_PORT = "5000";
      };
      serviceConfig = {
        Type = "simple";
	ExecStart = ''${ClaytonXYZ}/bin/clayton_xyz'';
      };
    };
    iloveu = {
      wantedBy = [ "default.target" ];
      description = "iloveu server";
      serviceConfig = {
        Type = "simple";
	ExecStart = ''${iloveu.server}/bin/iloveu-server --address 127.0.0.1:5001 --password "nonononononono" --transactions-dir /Block/iloveu'';
      };
    };
  };

  services.nextcloud = {
    enable = true;
    package = pkgs.nextcloud27;
    extraApps = {
    	contacts = config.services.nextcloud.package.packages.apps.contacts;
    	calendar = config.services.nextcloud.package.packages.apps.calendar;
    	tasks = config.services.nextcloud.package.packages.apps.tasks;
	listman = pkgs.fetchNextcloudApp rec {
		url = "https://dalliance.net/listman/listman-27.1.3.tar.gz";
		sha256 = "sha256-zHGOHtHq4GFj0HYlk/EV8ATsgclXPYuIBD3eU6W2Mpg=";
	};
	news = pkgs.fetchNextcloudApp rec {
		url = "https://github.com/nextcloud/news/releases/download/25.0.0-alpha3/news.tar.gz";
		sha256 = "sha256-AENBJH/bEob5JQvw4WEi864mdLYJ5Mqe78HJH6ceCpI=";
	};
    };
    extraAppsEnable = true;
    hostName = "nextcloud.claytondoesthings.xyz";
    https = true;
    maxUploadSize = "16G";
    config.adminpassFile = "${pkgs.writeText "adminpass" "nonononononono"}";
    config.adminuser = "clay53";
    home = "/Block/nextcloud";
  };

  services.mastodon = {
    enable = true;
    localDomain = "cdt.social";
    configureNginx = true;
    smtp.fromAddress = "clayton@claytondoesthings.xyz";
    extraConfig.SINGLE_USER_MODE = "true";
    mediaAutoRemove.enable = false;
  };

  services.vaultwarden = {
    enable = true;
    config = {
      DOMAIN = "https://bitwarden.claytonhickey.me";
      SIGNUPS_ALLOWED = false;
      ROCKET_PORT = 5002;
    };
  };

  services.minecraft-server = {
    enable = true;
    eula = true;
    jvmOpts = "-Xmx1024M -Xms512M";
    dataDir = "/Block/mc-server";
    package = unstable.papermc;
    openFirewall = true;
  };

  services.nginx = {
    enable = true;

    recommendedProxySettings = true;
    recommendedTlsSettings = true;

    virtualHosts."claytondoesthings.xyz" = {
      enableACME = true;
      forceSSL = true;
      locations."/" = {
        proxyPass = "http://127.0.0.1:5000";
      };
    };

    virtualHosts."claytonhickey.me" = {
      enableACME = true;
      forceSSL = true;
      locations."/" = {
      	root = "${claytonhickeyme}";
      };
    };

    virtualHosts."tutorengine.org" = {
      enableACME = true;
      forceSSL = true;
      locations."/" = {
      	root = "${tutor_engine_org}";
      };
    };

    virtualHosts."iloveu-api.claytonhickey.me" = {
      enableACME = true;
      forceSSL = true;
      locations."/" = {
        proxyPass = "http://127.0.0.1:5001";
      };
    };

    virtualHosts."iloveu.claytonhickey.me" = {
      enableACME = true;
      forceSSL = true;
      locations."/" = {
      	root = "${iloveu.yew}";
      };
    };

    virtualHosts."${config.services.nextcloud.hostName}" = {
      forceSSL = true;
      enableACME = true;
    };

    virtualHosts."bitwarden.claytonhickey.me" = {
      enableACME = true;
      forceSSL = true;
      locations."/" = {
        proxyPass = "http://127.0.0.1:5002";
      };
    };
  };

  security.acme = {
    acceptTerms = true;
    defaults.email = "clayton@claytondoesthings.xyz";
  };

  networking.firewall.allowedTCPPorts = [
    80
    443
  ];

  system.copySystemConfiguration = true;

  system.autoUpgrade.enable = true;

  system.stateVersion = "23.05";
}

In just 215 lines, I have been able to setup:

a Nextcloud instance with a calandar, tasks, mailing list, file storage and sharing, and an RSS aggregator
a Mastodon instance
a custom blog website
a custom (depracted) project hosting website
a website for my girlfriend and I to store pictures and videos
a Minecraft server
a dedicated website for my language learning app
and a Vaultwarden/Bitwarden all reverse proxied through NGINX with automatic HTTPS certificate renewal through ACME.

File Storage/Backup with Nextcloud

While I don't have many UX qualms with Google Drive, I like to use Nextcloud file storage to reduce my reliance on Google. This keeps a folder on my desktop, laptop, server, and partially phone, in sync. If you notice on my GitHub, I don't push to public repositories very often. This is because I just have all my code sync through Nextcloud. I didn't like the experience of accidentally forgetting to commit and push when switching devices, so now I just have it always in sync with Nextcloud. Nextcloud files also allows me to automatically backup photos and videos I take on my phone. It also allows me to share and host the files anywhere with the ability to optionally password lock them.

Calendar and Tasks with Nextcloud

I used to do my calendaring and tasking with Obsidian. However, I found the system too cumbersome to use and not really the right system for it. So, I turned on Nextcloud Calandar and Tasks. Through this, I get all the power of Google Calendar, but managed on my own system. I keep my contacts and calendar in sync with my phone through DAVx⁵. Tasks are kept in sync with jtx Board.

To turn these services on, I just had to add calendar = config.services.nextcloud.package.packages.apps.calendar; and tasks = config.services.nextcloud.package.packages.apps.tasks; to services.nextcloud.extraApps = {...}.

Contact syncing with Nextcloud

I didn't want Google have access to all my contacts, so I turned on Nextcloud Contacts.

To turn this service on, I just had to add contacts = config.services.nextcloud.package.packages.apps.contacts; to services.nextcloud.extraApps = {...}.

Password Management with Vaultwarden

I host my own Vaultwarden, a Rust rewrite of Bitwarden, instance to host my passwords. I have so far experienced no problems with it. It required adding 2 sections to my NixOS config:

services.vaultwarden = {
  enable = true;
  config = {
    DOMAIN = "https://bitwarden.claytonhickey.me";
    SIGNUPS_ALLOWED = false;
    ROCKET_PORT = 5002;
  };
};

enables Vaultwarden

virtualHosts."bitwarden.claytonhickey.me" = {
  enableACME = true;
  forceSSL = true;
  locations."/" = {
    proxyPass = "http://127.0.0.1:5002";
  };
};

sets up reverse proxy and HTTPS certs when added to services.nginx = {...}

Decentralized Social Media with Activity Pub/Mastodon and RSS/Nextcloud News

I have found that what I'm most interested in on social media is more article/blog-post style content. While the hot takes and shitposts that can be found on 𝕏 are sometimes funny, there is almost no utility to them or the follow-up replies. A lot of the times, it feels like there's almost no real conversation occuring on 𝕏. Sometimes people go back and forth, but usually not productively and either way, I will probably never "see" that person/bot ever again.

I'm not sure how Mastodon is supposed to solve the problems with 𝕏, but it at least allows users to own their own profile - unless they're on a multi-user instance, which I don't think they should be.

To create a mastodon instance, I just added these 8 lines to my NixOS config:

services.mastodon = {
    enable = true;
    localDomain = "cdt.social";
    configureNginx = true;
    smtp.fromAddress = "clayton@claytondoesthings.xyz";
    extraConfig.SINGLE_USER_MODE = "true";
    mediaAutoRemove.enable = false;
};

I also had to create my user profile, which is a single command described on the NixOS Wiki: https://nixos.wiki/wiki/Mastodon.

I have found the Tusky on F-Droid as a nice mobile Mastodon client. I just use the website on desktop.

I've always wondered how people keep up-to-date with blogs and stuff, but now it seems obvious: they use RSS (specification)! I've heard of RSS bascially since I started using YouTube, but I never understood what it really was or how to use it. RSS is a simple, somewhat bloated IMO (but who cares), universal standard for sharing "feeds" (a list of items/posts). To create an RSS feed on your website, all you have to do is create and maintain a single file. A lot of site generators like Wordpress will do (and probably already have) it for you. Even YouTube has RSS feeds. With that, you can even do what I've always wanted on YouTube: subscribe to a playlist, but not the channel.

There are a bunch of weird, closed-off, RSS aggregators (a program/service that caches RSS feeds) that I saw you can use, but like, why would you...? Anyway, if you want to just subscribe to RSS feeds on your phone, Aggregator on F-Droid seems to work perfectly. Of course, I want all my devices to keep in sync, so I use Nextcloud News and the Nextcloud News app on F-Droid (costs money on the Google Play Store).

To enable Nextcloud News, I added these 4 lines to services.nextcloud.extraApps = {...} in my NixOS config:

news = pkgs.fetchNextcloudApp {
    url = "https://github.com/nextcloud/news/releases/download/25.0.0-alpha3/news.tar.gz";
    sha256 = "sha256-AENBJH/bEob5JQvw4WEi864mdLYJ5Mqe78HJH6ceCpI=";
};

(You may want to get the latest version from https://apps.nextcloud.com/apps/news/releases)

Enhanced Usage of YouTube and other video services with YouTube ReVanced and Grayjay

I hate watching ads, so on my browser I use Firefox with UBlock Origin. However, the browser experience on YouTube leaves much to be desired. Luckily, there's YouTube Revanced, which blocks ads and allows background playback.

Screenshot of https://revanced.app (that official - hopefully not compromised - website for YouTube ReVanced; download from https://github.com/ReVanced/revanced-manager if you want to be safe)

If you long for the ability to use multiple platforms including YouTube, PeerTube, Odysee, Twitch, Kick, Rumble, SoundCloud, Patreon, and Nebula at the same time, you can use Grayjay.

Eventually, I hope to replace YouTube ReVanced with GrayJay, but currently, I rely on YouTube recommendations for generating music mixes, which Grayjay does not support.

I do feel bad for blocking ads on creators that I watch's videos as they definitely do lose revenue from it, but I don't know what to do about it. My desire to not give Google money/personal data is about equal to my desire to give money to creators. I also don't follow sponsor links because they're usually not interesting/too expensive for me or donate (enough) because I do not have "donating money".

Note taking with Obsidian?

I still use Obsidian for notes, but I've been wanting to switch. Generally, the only thing that's keeping me on Obsidian is not feeling like sorting out an alternative.

I found this video: "Simple, Non-Commercial, Open Source Notes" by "By Default" the best for comparing note taking apps, which I might go back to.

I used to think that cross-linking notes was a killer feature, but I find it infinitely easier to just do a fuzzy search to find a specific note. So, now that I've adopted that my mindset, the options in the video make more sense.

Framework Laptop

I follow Louis Rossman and the Right To Repair Movement, so when he recommended the Framework Laptop as the most respective of your rights and I needed something more powerful than my Samsung Chromebook 3, I purchased one.

Motorola Phone; Possibly Pinephone Pro?

When my first phone, a Samsung Galaxy S7 died after 7 years (the last ~1.5 of which being with an open back), I just accepted its fate and let it die. However, I was not about to buy another $1k phone when I don't really care about having a top-of-the-line camera and the performance being practically irrelevant unless I wanted to play Genshin Impact or something. So, the cheapest, reasonably good (had the cellular bands I needed), was a Motorola G Stylus 2021. The camera isn't that bad and it feels just as fast as my friend's iPhones while having infinitely more freedom and being 1/5 of the price. The battery also lasts all day without issue. Sometimes, it can last 2 days when I forget to charge it at night even after 2 years of use.

For Christmas last year, I asked for a Pinephone Pro with the note that it was a completely unreasonable purchase for me to make myself because it was worse than the phone I already had in almost every way and was double the price. Surprisingly, I still received it. Oddly, iirc, it came pre-installed with Sailfish OS, a closed-source Linux distro. To be fair, it did however, have more things working out of the box than NixOS. I may work on improving NixOS support so I can use the phone (lacking GPS, camera, and MMS), but I don't know what I'm doing in that space.

Checking the time with Pine Time

I use a Pine Time watch as my main watch. It's pretty good, but not really featureful. I'm really disappointed that it does not currently support displaying Japanese text. However, my Pebble Time has been having trouble, so I'm sticking with it for now.

Code editing with NeoVim

I'm not that against using VSCodium, but it stopped working for a bit about a 8 months ago. So, since I was watching The Primeagen at the time, I switched to NeoVim and haven't looked back. I store my Neovim config within my NixOS config, which is a little scuffed tbh but it works.

vim.opt.guicursor = ""

vim.opt.nu = true
vim.opt.relativenumber = true

vim.opt.tabstop = 4
vim.opt.softtabstop = 4
vim.opt.shiftwidth = 4
vim.opt.expandtab = true

vim.opt.smartindent = true

vim.opt.wrap = false

vim.opt.swapfile = false
vim.opt.backup = false
vim.opt.undodir = os.getenv("HOME") .. "/.vim/undodir"
vim.opt.undofile = true

vim.opt.hlsearch = false
vim.opt.incsearch = true

vim.opt.termguicolors = true

vim.opt.scrolloff = 8
vim.opt.signcolumn = "yes"

vim.opt.updatetime = 50

vim.g.mapleader = " "

vim.opt.wrap = true
vim.opt.linebreak = true
vim.opt.breakindent = true
    
-- better past behavior
vim.keymap.set("x", "<leader>p", "\"_dP")

-- separate vim/global clipboard
vim.keymap.set("n", "<leader>y", "\"+y")
vim.keymap.set("v", "<leader>y", "\"+y")
vim.keymap.set("n", "<leader>Y", "\"+Y")

vim.keymap.set("n", "<leader>d", "\"_d")
vim.keymap.set("v", "<leader>d", "\"_d")

    -- apparently it gets you to bad place
vim.keymap.set("n", "Q", "<nop>")

-- open file browser  
vim.keymap.set("n", "<leader>pv", vim.cmd.Ex)

    local telescope = require("telescope.builtin")
vim.keymap.set("n", "<leader>pf", telescope.find_files, {})
vim.keymap.set("n", "<C-p>", telescope.git_files, {})
vim.keymap.set("n", "<leader>ps", function()
      telescope.grep_string({ search = vim.fn.input("Grep > ") });
end)
    
vim.cmd.colorscheme("catppuccin") 
vim.api.nvim_set_hl(0, "Normal", { bg = "none" })
vim.api.nvim_set_hl(0, "NormalFloat", { bg = "none" })

require("toggleterm").setup()

require'nvim-treesitter.configs'.setup {
  highlight = {
    enable = true,
    additional_vim_regex_highlighting = false,
  },
}

require("treesitter-context").setup {
  
}

local mark = require("harpoon.mark")
local ui = require("harpoon.ui")
vim.keymap.set("n", "<leader>a", mark.add_file)
vim.keymap.set("n", "<C-e>", ui.toggle_quick_menu)
vim.keymap.set("n", "<C-h>", function () ui.nav_file(1) end)
vim.keymap.set("n", "<C-t>", function () ui.nav_file(2) end)
vim.keymap.set("n", "<C-n>", function () ui.nav_file(3) end)
vim.keymap.set("n", "<C-s>", function () ui.nav_file(4) end)

vim.keymap.set("n", "<leader>u", vim.cmd.UndotreeToggle)

    vim.keymap.set("n", "<leader>gs", vim.cmd.Git)

    local cmp = require("cmp")

cmp.setup({
  snippet = {
    expand = function(args)
      require("luasnip").lsp_expand(args.body)
    end
  },
  mapping = cmp.mapping.preset.insert({
        ['<C-b>'] = cmp.mapping.scroll_docs(-4),
        ['<C-f>'] = cmp.mapping.scroll_docs(4),
        ['<C-Space>'] = cmp.mapping.complete(),
        ['<C-e>'] = cmp.mapping.abort(),
        ['<CR>'] = cmp.mapping.confirm({ select = false }), -- Accept currently selected item. Set `select` to `false` to only confirm explicitly selected items.
        ['<C-CR>'] = cmp.mapping.confirm({ select = true }), -- Accept currently selected item. Set `select` to `false` to only confirm explicitly selected items.
      }),
      sources = cmp.config.sources({
        { name = 'nvim_lsp' },
        { name = "luasnip" },
      }, {
        { name = 'buffer' },
      })
    })

    -- Set configuration for specific filetype.
    cmp.setup.filetype('gitcommit', {
      sources = cmp.config.sources({
        { name = 'git' }, -- You can specify the `git` source if [you were installed it](https://github.com/petertriho/cmp-git).
      }, {
        { name = 'buffer' },
      })
    })

    -- Use buffer source for `/` and `?` (if you enabled `native_menu`, this won't work anymore).
    cmp.setup.cmdline({ '/', '?' }, {
      mapping = cmp.mapping.preset.cmdline(),
      sources = {
        { name = 'buffer' }
      }
    })

    -- Use cmdline & path source for ':' (if you enabled `native_menu`, this won't work anymore).
    cmp.setup.cmdline(':', {
      mapping = cmp.mapping.preset.cmdline(),
      sources = cmp.config.sources({
        { name = 'path' }
      }, {
        { name = 'cmdline' }
      })
    })
    
local capabilities = require('cmp_nvim_lsp').default_capabilities()
local lspconfig = require("lspconfig")
    lspconfig.rust_analyzer.setup {
      capabilities = capabilities
    }
lspconfig.tsserver.setup {
      capabilities = capabilities
}
    lspconfig.cssls.setup {
      capabilities = capabilities,
  cmd = { "css-languageserver", "--stdio" },
}
lspconfig.jsonls.setup {
      capabilities = capabilities,
  cmd = { "json-languageserver", "--stdio" },
}
    lspconfig.html.setup {
      capabilities = capabilities,
  cmd = { "html-languageserver", "--stdio" },
}
lspconfig.bashls.setup {
  capabilities = capabilities
}
lspconfig.marksman.setup {
  capabilities = capabilities
}
lspconfig.phpactor.setup {
  capabilities = capabilities
}
lspconfig.nil_ls.setup {
  capabilities = capabilities
}
lspconfig.ocamllsp.setup {
  capabilities = capabilities
}

-- require("copilot").setup({})

    -- Use LspAttach autocommand to only map the following keys
    -- after the language server attaches to the current buffer
    vim.api.nvim_create_autocmd('LspAttach', {
      group = vim.api.nvim_create_augroup('UserLspConfig', {}),
      callback = function(ev)

        -- Buffer local mappings.
        -- See `:help vim.lsp.*` for documentation on any of the below functions
        local opts = { buffer = ev.buf }
        vim.keymap.set('n', 'gD', vim.lsp.buf.declaration, opts)
        vim.keymap.set('n', 'gd', vim.lsp.buf.definition, opts)
        vim.keymap.set('n', 'K', vim.lsp.buf.hover, opts)
        vim.keymap.set('n', 'gi', vim.lsp.buf.implementation, opts)
        vim.keymap.set('n', '<C-k>', vim.lsp.buf.signature_help, opts)
        vim.keymap.set('n', '<space>wa', vim.lsp.buf.add_workspace_folder, opts)
        vim.keymap.set('n', '<space>wr', vim.lsp.buf.remove_workspace_folder, opts)
        vim.keymap.set('n', '<space>wl', function()
          print(vim.inspect(vim.lsp.buf.list_workspace_folders()))
        end, opts)
        vim.keymap.set('n', '<space>D', vim.lsp.buf.type_definition, opts)
        vim.keymap.set('n', '<space>rn', vim.lsp.buf.rename, opts)
        vim.keymap.set({ 'n', 'v' }, '<space>ca', vim.lsp.buf.code_action, opts)
        vim.keymap.set('n', 'gr', vim.lsp.buf.references, opts)
        vim.keymap.set('n', '<space>f', function()
          vim.lsp.buf.format { async = true }
        end, opts)
      end,
    })

vim.keymap.set('n', '<space>e', vim.diagnostic.open_float)
    vim.keymap.set('n', '[d', vim.diagnostic.goto_prev)
    vim.keymap.set('n', ']d', vim.diagnostic.goto_next)
    vim.keymap.set('n', '<space>q', vim.diagnostic.setloclist)

My NeoVim config

Development Environment with Nix Shell

I heard other developers use Docker to create reproducable development environments. Luckily, when I was using Arch, I couldn't get Docker to work. When I started using NixOS, I found I could also use nix-shell. When I run nix-shell, it reads the shell.nix file in my current working directory and creates shell with the specific tools and dependencies I need to develop whatever I'm working on. No more messing with Node Version Manager or pyenv for me.

{ pkgs ? import <nixpkgs> {} }:
pkgs.mkShell {
    buildInputs = with pkgs; [
        nodejs_20
        nodePackages.typescript-language-server
        nodePackages.vscode-css-languageserver-bin
        nodePackages.vscode-json-languageserver-bin
        nodePackages.vscode-html-languageserver-bin
        nodePackages.bash-language-server
    ];

    shellHook = '''';
}

An example shell.nix file used to install NodeJS 20 and linters for Neovim

nix-shell files (and other Nix stuff) can also be used on other Linux distributions and operating systems including MacOS and Windows (with WSL).

Personal Website with Web Components (aka: raw HTML and JS)

I've used many of the fun JavaScript, Rust, and even PHP web frameworks (albeit, just an outdated version of Laravel/Blade), but none have made me as happy as just writing raw HTML and JS. When I first started web development, I looked for exactly what Web Components are, a way to create reusable components of a website: like a nav bar. Unfortunately, Web Components were just being introduced as a concept at the time. Now, they exist, and they do everything I ever wanted React to do.

After learning about them in "WebComponents Will Outlive Your JavaScript Framework | Prime Reacts" by The Primeagen, who was reading "Web Components Will Outlive Your JavaScript Framework" by Jake Lazaroff, I put Web Components in the back of my mind.

Previously, I created this site with a specialized static site generator I made in Rust. Unfortunately, it kind of sucked and I hated working with it. So, when I wanted to update my portfolio (what the homepage of this site is), I decided I would switch to Web Components. Now, I am much happier with the development and actually updating this site again. While it is slower than it was when I generated it with Rust, I decided I didn't care and justified by decision by recalling the Free Software Foundation saying that a website's JavaScript should be readable (which it is because this site isn't compiled at all). That argument doesn't make any sense because before, the website didn't have any JavaScript, but oh well. If I were to make it better, I think the only thing that would make me happier would be to make it with the programming language I'm "developing".

Anyway, I'll show the MastodonComments component for this site, which I learned how to create from https://blog.thms.uk/2023/02/mastodon-comments, as an example:

class MastodonComments extends HTMLElement {
    constructor() {
        super();
    }

    connectedCallback() {
        const shadow = this.attachShadow({ mode: "open" });
        const style = document.createElement("style");
        style.innerHTML = `@import "/common.css";`;
        shadow.appendChild(style);
        const container = document.createElement("div");

        const postURL = this.getAttribute("post-url");

        if (postURL) {
            const header = document.createElement("h2");
            const headerA = document.createElement("a");
            headerA.href = postURL;
            headerA.innerText = "Comments from the Fediverse";
            header.appendChild(headerA);
            container.appendChild(header);

            const commentsURL = postURL.replace(/@.+\//, "api/v1/statuses/")+"/context"; 
            fetch(commentsURL).then(response => {
                if (!response.ok) {
                    container.innerText += "\nBad response when fetching comments";
                    response.text().then(text => container.innerText += "\n"+text);
                    return;
                }
                response.json().then(data => {
                    if (data.descendants.length === 0) {
                        container.innerHTML += `<a href="${postURL}">Be the first to comment</a>`;
                    }
                    const comments = document.createElement("div");
                    for (const descendant of data.descendants) {
                        const comment = document.createElement("div");

                        const userLine = document.createElement("div");
                        userLine.style = "display: flex; align-items: center;"

                        const avatar = document.createElement("img");
                        avatar.style = "width: 3em; border-radius: 10%;";
                        avatar.src = descendant.account.avatar_static;
                        userLine.appendChild(avatar);

                        const userA = document.createElement("a");
                        const userDisplay = document.createElement("strong");
                        userDisplay.innerText = descendant.account.display_name;
                        userA.appendChild(userDisplay);
                        userA.append(` @${descendant.account.username}@${new URL(descendant.account.url).hostname}`);
                        userA.href = descendant.account.url;
                        userLine.appendChild(userA);

                        comment.appendChild(userLine);

                        const content = document.createElement("div");
                        content.innerHTML = descendant.content;
                        comment.appendChild(content);

                        comments.appendChild(comment);
                    }
                    container.appendChild(comments);
                }).catch(e => container.innerText += `Failed to parse comments response: ${e}`);
            }).catch(e => container.innerText += `Failed send comments request: ${e}`);
        } else {
            container.innerHTML = "<h2>Comments have not yet been set up for this post</h2>";
        }

        shadow.appendChild(container);
    }
}

customElements.define("mastodon-comments", MastodonComments);

MastodonComments component code. The final line registers the class MastodonComments as the html element mastodon-comments.

To use it in an HTML file, make sure it's imported: <script src="/mastodonComments.js"></script>. Then, just add <mastodon-comments post-url="https://cdt.social/@clayton/111678761831022044"></mastodon-comments> (change the post-url to point to the correct comment thread on Mastodon) anywhere you want.

Language Learning with Tutor Engine and Polygloss

I have not been fully satisfied by any language learning app other than language exchanges (though, I no longer wish to dedicate to 1:1 foreign exchanges). However, I've recently found Polygloss to be fun and actually helpful in actually practicing output. I would still call Polygloss good-ish (I'm very critical of language learning apps). Only "conversing" with those who are also just learning the language is probably not the best. Therefore, I am still developing Tutor Engine. It is not ready for public release, but in developing it, I have experienced rapid improvement in Japanese.

Screenshot of the latest development version of the Tutor Engine Flashcarder

What I still need to do

While I do have my email on a custom domain, I still use Google to receive and send emails with it. I would prefer not to rely on Google for my email, but I have not yet had the energy to actually switch. Now that my Linode server uses NixOS, it may be easier to just slap yet another service on it (I think it may also be a Nextcloud app).

Title: 題名：My User-Control-Focused Stack
Authors: 作家・Clayton Lopez Hickey
Published: 著した日付：Sun, 11 Feb 2024 00:32:00 EST

MLA Citation:MLA引用：
Hickey, C. L. (2024, February 11). My User-Control-Focused Stack. Clayton Hickey. https://claytonhickey.me/blog/my-user-control-focused-stack/.