TIL: How to Use fzf.fish History Search
I use Fish Shell with fzf and fish fzf plugin. I installed fzf using nix and home-manager:
{ programs.fzf = { enable = true; enableFishIntegration = false; }; } It adds fzf-history-widget script, which is bound to ctrl+r, shell reverse history search. Which we can see when we run this: bind | grep -e fzf-history-widget -e fzf-file-widget
Whereas I wanted to use the _fzf_search_history which is made available by that fish fzf plugin.
...
TIL: How to Check if Another Option Is Set in Home Manager (Nix)
Recently I was adding sway to my nix config (setup via home-manager). I already had Hyprland config, I wanted both sway and Hyprland to use my waybar config with some slight differences. So basically I want to check if the current host machine is using Sway or Hyprland (I am assuming we will only use one).
The main reason for using Sway is my work laptop uses Ubuntu 22.
...
TIL: How to Access System in Home Manager Using Flakes
Recently I needed to install devenv using flakes in home-manager. One of the things I needed to pass to was the type of system to install on i.e. "x86_64-linux".
So as I temp hack I had something like: inputs.devenv.packages."x86_64-linux".devenv.
However I was able to access the system using the pkgs attribute like so:
{ inputs, pkgs, ... }: { home.packages = [ inputs.
...
TIL: How to Fix tmux-resurrect on NixOS
When I moved to NixOS I noticed that tmux-resurrect stop restoring some applications such as man and nvim. Like it used to on my Arch machine. I recently found a solution to my problem (thanks to a lovely chap on the nixos discourse).
By adding the following lines to our tmux config:
resurrect_dir="$HOME/.tmux/resurrect" set -g @resurrect-dir $resurrect_dir set -g @resurrect-hook-post-save-all 'target=$(readlink -f $resurrect_dir/last); sed "s| --cmd .
...
TIL: How to Colour Neovim Line Numbers
Recently I was trying to configure my own neovim config. I wanted the current line I was onto be coloured slighty differently and also the line number to be white. So it’s easier to see the line number and which line I was on.
It was not immediately obvious how to do this and took me long to work out than I’d like to admit 😅.
...
TIL: How to Setup Neovim for Nixlang
I have been recently using NixOS/home-manager and I have been writing a lot of nixlang. To have my system state declaratively set up. I have been doing most of this editing in neovim. It took me a bit of time to work out how to get it set up so there is some basic LSP support and auto-formatting. I created a file called nix.
...
TIL: How to Fix VIA Permission Issues on Linux
Recently I have been trying to configure my newish Keychron keyboard using VIA. To add a key to be able to take print screens, making use of the layers provided, as my Keychron Q1 PRO doesn’t have a dedicated print key 😓.
However, when I opened the app or the website, I would get the following error.
If we go to chrome://device-log you should be able to see something like this: Failed to open '/dev/hidraw9': FILE_ERROR_ACCESS_DENIED.
...
TIL: How to get Kanshi to work on NixOS and Hyprland
I have been using Kanshi to setup my monitor setups automagically depending on which monitors are plugged i.e. if my laptop is docked or not. If it is docked I want my laptop display to be off, when not docked I want it to be on. So my kanshi config file ~/.config/kanshi/config to look something like:
I use the name of my monitors as the ports they are plugged into my vary.
...
TIL: How to use NUR with Home-Manager & Nix Flakes
NUR is the Nix user repository like the Arch user repository (AUR). It exists so that:
The NUR was created to share new packages from the community in a faster and more decentralized way. - https://github.com/nix-community/NUR
If we want to install packages from NUR in our home manager config which is set up using Nix Flakes. Assuming you build your home manager like
...
TIL: How to Declaratively Setup Mullvad VPN with NixOS
I have recently moved to NixOS, one of the great features of NixOS is that you can set up your entire machine from a single git repo. We can do this declaratively, what we mean by this is we tell nix what we want the state to be and nixos will work out how to get there.
For example, we can install Mullvad set various options already.
...
TIL: How to Add Vim Navigation FZF
FZF is an amazing fuzzy finder tool, that is super flexible and you can create some cool cli one-liners with it. For example, I use it with the fish shell plugin to search through my command history (CTRL + R).
In this post, I will show you how vim style navigation to the FZF pop-up preview. All we need to do is add the following to the relevant file i.
...
TIL: How to change the fish greeter
In this post I will show you how you can change your fish shell greeter from the default
Welcome to fish, the friendly interactive shell Type `help` for instructions on how to use fish To something custom, this will run every time you open a new shell!
To do this, go to your fish_greeter.fish file which can usually be found at ~/.config/fish/functions/fish_greeting.fish. Where mine looks like:
...
I use VS Code as my text editor, one of the features I really like about VS Code is that it will format our file on save. Which saves needing to run a CLI tool to do it. For example, running prettier. As part of the formatting on save you can set an option to organise your imports as well.
If you open your settings.json, you can add a section like this:
...
I have a repo which I use to store all of my conference and similar talks. This repo includes any code examples and most importantly the slides.
At the moment all the slides are RevealJS “sites”, which means it’s a presentation built in HTML. Now I would like to have all my talks deployed to single GitLab pages site. For example something like:
https://hmajid2301.io/talks/an-intro-to-pocketbase/ https://hmajid2301.io/talks/docker-as-a-dev-tool/ So how can we do this ?
...
TIL: How to Mock Classes Using Vitest
Recently I have been creating a SvelteKit app, when creating a new SvelteKit app you get a choice of different things you can add. Such as using vitest for unit testing.
I needed to spy on/mock a method in a class, to see if it was called when a button was pressed and, it was called with the correct arguments.
Let’s say we have a Button component which looks like this:
...
TIL: How to Load Authenticate State in Playwright
In this post, I will quickly show you how you can reduce boilerplate code to log in to your app in Playwright tests. Log in to our app is a very common action that will likely be required in most of our tests.
You can read this documentation here, which will explain how you can set this up. However, what do you do if you want to say test the login flow or the register flow?
...
TIL: How to Set a Relationship on Golang Pocketbase
Pocketbase is a backend as a service, it is very nice because it is written in Golang it can compile down to a single binary. It also allows us to extend it using Golang and use it as a framework. In my case, I needed some extra logic before adding data to the database so I decided to extend Pocketbase and write some of my business logic.
...
TIL: How to Run Parallel Jobs on Gitlab CI (Different Stages)
If you are familiar with Gitlab CI you probably know that jobs in the same stages will run in parallel. However you can also run jobs in different stages at the same time. Let’s see our .gitlab-ci.yml looks like this:
stages: - test - deploy format: stage: test script: - task format lint: stage: test script: - task lint deploy:preview: stage: deploy only: - merge_request image: docker script: - task deploy So for my use case when a user creates a merge request, I want to run some tests against the code, such as linting and formatting.
...
TIL: How to fix structuredClone to work on Netlify SvelteKit Site
Recently I was working on my SvelteKit site and added some code like so to my hook.server.ts:
try { if (event.locals.pb.authStore.isValid) { await event.locals.pb.collection("users").authRefresh(); event.locals.user = structuredClone(event.locals.pb?.authStore.model); } } catch (err) { console.log("failed to refresh auth", err); event.locals.user = undefined; event.locals.pb.authStore.clear(); } I needed to add the structuredClone function so that only POJO (plain old javascript objects) would get stored in the event.
...
TIL: How to Autofocus on Inputs in Svelte
In this post, I will show you how you can autofocus on input that is in a child component. So in my use case, I want the user to click a button to add a “collection” and then it will show the input and immediately focus on it. Which looks something like this:
So how can we do this?
Let’s say we have a child component called Input.
...
TIL: How Includes, Extends work with TS Config (with SvelteKit)
I have recently been creating an app with SvelteKit and Typescript. I noticed all of a sudden Typescript and VS Code not playing nice with each other. It wouldn’t show me the types of variables that I knew it was showing me before. So I started to investigate and work out what was wrong. I was getting locals with a type any:
...
TIL: How to Setup Netlify, Gitlab And Sentry
I will show you in this post how you can integrate Gitlab, Netlify and Sentry. I may do a more detailed post in the future.
GitLab -> Sentry To connect Gitlab and Sentry follow this guide. Then add the repos you want to monitor in Sentry. In my case, it is the Bookmarkey GUI.
Netlify -> GitLab This integration is pretty simple just go through the normal Netlify setup process to add a new site.
...
TIL: How To Add Custom Syntax Highlighting Rules in VS Code
The other day (a few months ago) I was comparing Goland and VS Code for Golang development. I noticed Goland by default seemed to have nicer syntax highlighting, so I started looking at what I could do in VS Code to do this.
Before
After
It turns out we can do this with our own custom rules using editor.tokenColorCustomizations. To do this go to our settings (settings.
...
TIL: How to Connect PocketBase and BackBlaze S3
By default PocketBase uses the local file system to store uploaded files. If you have limited disk space, you could optionally connect to a S3 compatible storage. - PocketBase
Why BackBlaze ? Simple the prices are generally cheaper as compared with other S3 compatible storage platforms. How can we set up BackBlaze as our S3 bucket to store uploaded files such as user avatars?
...
TIL: How to Use DinD, localhost & Gitlab CI
In this post, I will go over how you can use docker-compose and Gitlab CI. In this example, we will be running playwright tests directly on the Gitlab runner. The tests will start a SvelteKit server also running on the Gitlab runner. The SvelteKit server will connect to PocketBase (backend) running in docker-compose.
So essentially we need a way for something running locally to connect to something running in docker in Gitlab CI (on a runner).
...