Posts

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.e. fish.config, .bashrc or .zshrc. ...

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: ...

Following on from my previous post about dotfiles and my development workflow (WIP), in this post I will go over my operating system. Arch As the name implies I use Linux as my main operating system. I am a big fan of Linux because not only is free and open-source, it provides a great developer experience where I find tools that just work on Linux. It also is a lot more customisable as compared with Windows or MacOS. Finally, I tend to find it more lightweight as well and takes fewer resources to run especially if you are using Docker. ...

I know I recently made a post about my dotfiles but I’ve made a few changes since then, so here are my updated dotfiles. out of date These dotfiles are out of date check out my updated ones here System Overview OS: Arch Linux DE: Gnome Shell: Fish Prompt: Starship Terminal: Alacritty Editor: Neovim (using LazyVim config) Colorscheme: Catppuccin for EVERYTHING!!! Fonts: Mono Lisa Extensions I use the following Gnome extension. You can find the config for the extensions in this massive file here. ...

Workflows Change This post is accurate as of date of publish. But likely will go stale, if I update my workflows I will likely publish another post. In this blog post, I will go over my current development workflow using the above tools namely, fish shell tmux and neovim. I’ll be using the dotfiles found here. I aim to move away from using my mouse as much as possible as it just slows me down when my hands are away from my keyboard. ...

This post is a quick introduction to dotfiles, accurate as of 25th of April 2023. out of date These dotfiles are out of date check out my updated ones here Dotfiles 🏠 My dotfiles setup using Dotbot. Install 🔥 I wouldn’t recommend just blinding using my dotfiles. They are setup for my specific use-case. I think you’re better picking and choosing what you like 😄. git clone [email protected]:hmajid2301/dotfiles.git cd dotfiles make install profile=arch System Overview ...

In this post, I will show you how to get code coverage reports from your Playwright tests in your SvelteKit app. So let’s imagine we are starting with the basic SvelteKit template. First, we need to install: npm i -D vite-plugin-istanbul We need the vite plugin to instrument our code using Istanbul. Istanbul is a tool which allows us to instrument our code such that it can determine which lines were covered by our tests. ...

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 ? Simple! In our job to deploy the site we just need to add public/docker-as-a-dev-tool and public/an-intro-to-pocketbase respectively. Which ever path we provide is that path we will be able to access those slides on. ...

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? You cannot use the same auth file as all the other tests as you will already be logged in. ...

In this post, I will go over how you can use Hugo’s archetypes to quickly create new posts. I have previously used NetlifyCMS to help create new posts, but recently I have found that to be a bit overkill for my blog. So I decided to simplify my workflow by using Hugo’s archetypes 1. Archetypes allow us to create templates markdown files, which is then used to create our blog posts. ...

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. But also deploy my app to a preview environment. Whilst these jobs belong to different stages. ...

Hi everyone, I recently went about setting up notifications about my Netlify deploys in Discord. Netlify does have an official way to do however, you cannot use it on the free tier. So I looked at other solutions, and I eventually discovered a SaaS product called PipeDream. It is a website which allows us to connect different components without needing to write any code. Such as what to do when we receive a webhook. There are 100s of different apps, triggers and actions. What we want to end up with is something like this: ...

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.locals.users variable. However when I deployed this to production in Netlify. This broke my site! Specifically, it wouldn’t let the user log in. ...

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? ...

In this post, I will show you how you can update your GitLab CI pipeline with the status of your Netlify deploys. As it is quite nice to have everything in one place if our CI pipeline passed or failed. I have spoken about this in a previous article, how you might go about setting up merge request preview environments with Netlify. This can be set up to also leave comments as shown above, and notify us if our website deployed successfully. Which will look like so: ...

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: ...

In this post, we will go over how we can auto-sort our imports in our svelte files. To do this we will be using eslint and the eslint-import-plugin plugin. If you’re anything like me you like have ordered imports, rather than random imports that can be hard to make sense of. In Python we have isort in golang we have goimports. In JavaScript we can use eslint with the above plugin. However, we need to set up some specific configuration. ...

In this post, I will go over how you can use the have I been pwned (hibp) API to improve UX 1 in our registration flow in our SvelteKit app. When the user signs up we can check if that password has been compromised in a previous data breach (on another site). Then we can prompt the user to enter another password. This will help avoid users using simple & common passwords like password11. Ideally, our user would be using a password manager to generate secure and strong passwords. You can see us using the hibp website below, of course, in our case, we will want to use the API. ...

In this post, we will go over how you can test your SvelteKit app on your Android device in Firefox. If you’re like me you are building an app that you want users to use on both normal PCs (laptops, Desktop) and their smartphones. But the question arises how can we debug our app on a smartphone? One way to achieve this is to use Firefox and remote debugging, you will need to connect your smartphone via USB to your device running the SvelteKit app i.e. your Laptop. ...

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. You can read more about that here and here. ...

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.json) and add something like: ...

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? ...