Out of date This article maybe a bit out of date as PocketBase is adding new features and deprecating old functions. If you encounter an issue with the setup see this issue by Dominick Hi everyone, I’ve been building a new bookmarking app, using SvelteKit and PocketBase. PocketBase, is an open-source backend, that we need to self-host 1. It is written in Golang, think of it similar to Firebase or Supabase. ...
Devcontainers This article assumes you are already familiar with dev containers. You can read more about devcontainers here. In this article, we will go over how you can personalise your dev containers. Devcontainers allow us to create consistent development environments. One of the main advantages of dev containers is we can provide a “one button” setup for new developers. We do this by using a container (Docker), and we end up developing inside a container. ...
TIL: How to Use Prettier with Hugo/Golang Templates If you try to use prettier on a (Hugo) Golang HTML template you may get something that looks like this: {{- if or .Params.author site.Params.author }} {{- $author := (.Params.author | default site.Params.author) }} {{- $author_type := (printf "%T" $author) }} {{- if (or (eq $author_type "[]string") (eq $author_type "[]interface {}")) }} {{- (delimit $author ", " ) }} {{- else }} {{- $author }} {{- end }} {{- end -}} into this ...
TIL: How to Deploy a SvelteKit site on Netlify So you have a SvelteKit site you want to deploy to Netlify how can we do that? First, go about setting up a site like normal! In my case, I am going to import an existing site from Gitlab. Netlify In the build settings we want the following settings: Branch Adjust the branch to whatever your main branch is i.e. the branch you want to deploy from. ...
In this article, I will show you how you can update a project, that was created from a copier template. In my previous article, we learnt how we can create a project template. I listed the only reason I choose to use copier over say cookiecutter was that it provided an “easy” way to update downstream projects. Existing Repository From here on out we will assume you have a template repository that uses copier. ...
TIL: How to Separate our Golang Tests Sometimes we want to be able to run our unit tests and integration tests separately. In Golang we can do this using build tags, build tags are used to tell the compiler important information when we run go build 1. Let say we have a file called package_test.go. By adding // +build integration to the top of the file without any whitespace. This test file will only be run when we specify the tags in our test command go test --tags=integration. ...
Netlify CMS Deprecated Since I have written this post Netlify CMS has been deprecated in favour of decap-cms. Thanks to @roneo for raising this issue. So the Netlify CMS part of this article is no longer relevant. I also no longer use this workflow, I instead just create articles locally using a script now!!! In this post, I will go over my new workflow for creating articles/posts that I now use with my new (Hugo) blog. ...
In this post, I will show you some useful and perhaps not as well-known Vim commands I use with VS Code. As per this previous post, I use this extension for Vim emulation in VS Code. My keybindings.json file. I will repeat some of the settings I showed there for posterity. Useful Commands xp: To swap two characters around i.e. ab -> ba (cursor on a) ctrl + enter: Creates a new line below and stays in NORMAL o: Will do the same but put you in insert mode ctrl + shift + enter: Creates a new line above and stays in NORMAL O: Will do the same but put you in insert mode dtx: Deletes everything up to x character dfx: Delete everything including x character yi": Yank everything between quotes " vi""+p: Replace everything between quotes with what is yanked va{Vy 1: Yank the entire function assuming the language uses braces like golang or C "_dd 2: Delete without adding to register "aY 2: Yank into named register a "ap 2: Paste from named register a %x``df( 3: Deletes surrounding function i. ...
Hi 👋 everyone, in this blog post I’m going to over how we can use Copier to create templates for our repositories. Why create a template repo ? I’m sure some of you are wondering why do we even need templates ? Well for a few reasons, one it gives you a consistent way to create new services from a repository. For my personal project Banter Bus I have a FastAPI Template, which I use to create new FastAPI services from. ...
TIL: How you can Verify Your Hugo Blog on Mastodon Mastodon is an open-source social media website gaining a lot of traction at the moment, thanks in part to what is happening at Twitter. On Mastodon, we can verify a link on our profile is owned by us by linking back to Mastodon with a rel="me". Go to settings/profile In my case, it is this, https://hachyderm.io/settings/profile Find the verification link It will look something like <a rel="me" href="https://hachyderm. ...
TIL: How to Fix “Overflowing” Highlights in Hugo Code Blocks I am using the PaperModX theme, or at least a theme that is very close to that theme. I noticed an issue when I would try to highlight my code in code blocks. For example, if we had the following: ```js {hl_lines=[1]} const images = Array.from(document.querySelectorAll(".post-content img")); \``` It would highlight line number the first line in the code block but just up to the width of the code block. ...
TIL: How to Add Hugo Shortcode Snippets in VSCode Hugo shortcodes are a great way to add functionality to our Hugo blog. However, I find them fiddly to add. So let’s see how we can leverage VSCode snippets to make it easier to add shortcodes to our markdown files. First, open the command palette, then select Snippets: Configure User Snippets. In my case, I want to add snippets specific to this project so I select New snippets file for '<project>'. ...
In this post, we will go over how we can add a page view “counter” 👀 to our Hugo blog, so we can see how many views each of our posts have had. We will do this using Goatcounter Analytics. Here is an example of what it may look like: Goatcounter Set Up This post assumes you have already created a Goatcounter account, more information here. And you have added Goatcounter analytics to your blog, see this post for more information Page Views Partial First, create a new file in your partial folder, in my case, it will be layouts/partials/page_views. ...
TIL: You Can Schedule Posts on Your Hugo Blog using Netlify and Gitlab CI This post in fact will be a scheduled post I’m writing it on the 20th of November but it will be published on the 23rd of November. Assuming we are using Netlify to deploy our website, what we will need to do is trigger a rebuild of our site every day using Gitlab CI. Since Hugo builds a static site to publish our content after a set date we will need to rebuild our site. ...
TIL: You can add a custom domain to your Goatcounter site When you create an account on Goatcounter and add a new site, you can view the analytics by going to [sitecode].goatcounter.com. For example, haseebmajid.goatcounter.com. However, we can use a custom domain, to view your analytics. Custom Domain You will need a domain, that you can control the DNS of to do the following! Goatcounter We can do this by: ...
TIL: How You Can Zoom in on Photos in your Hugo Posts You can see what we want to achieve in the GIF below: How? Add the following code to your Hugo blog in my case using the Papermod theme I add it to the layouts/partials/extend_footer.html. <script src="https://cdnjs.cloudflare.com/ajax/libs/medium-zoom/1.0.6/medium-zoom.min.js" integrity="sha512-N9IJRoc3LaP3NDoiGkcPa4gG94kapGpaA5Zq9/Dr04uf5TbLFU5q0o8AbRhLKUUlp8QFS2u7S+Yti0U7QtuZvQ==" crossorigin="anonymous" referrerpolicy="no-referrer" ></script> <script> const images = Array.from(document.querySelectorAll(".post-content img")); images.forEach((img) => { mediumZoom(img, { margin: 0 /* The space outside the zoomed image */, scrollOffset: 40 /* The number of pixels to scroll to close the zoom */, container: null /* The viewport to render the zoom in */, template: null /* The template element to display on zoom */, background: "rgba(0, 0, 0, 0. ...
TIL: How you can add goatcounter to your Hugo blog In this TIL post, we will go over how you can add Goatcounter to your Hugo Blog. Goatcounter is an open-source privacy-friendly analytics tool, an alternative to Google Analytics. Goatcounter Account This post assumes you have already created a Goatcounter account, more information here. Luckily it is very easy to add Goatcounter to our blog. First, create a new partial HTML file. ...
TIL you can use yq to mass edit markdown files yq yq is a tool similar to jq except it allows you to edit, JSON, XML and YAML. It has a very similar syntax to parse and edit files as jq does. I was recently adding new open graph images to all of my blog posts. After creating these images and storing them next to the post, where the structure looks like: ...
About This Site This site was built with hugo and the PaperModX Theme (using a fork of a fork at the moment). I decided to go with an existing theme rather than creating my own this time, to one save time but also to give the site a more consistent feel. I am no designer and I felt my last website (v3), really felt like a bunch of different websites thrown together. ...
TIL you can hash None in Python Recently I saw some Python code which looked something like: d = { None: "value", "another_key": "another_value", } It had never really occurred to me you could use None (null) as a key to a dictionary before. What this also meant is that None must be hashable as only hashable objects can be keys in a dictionary. These objects include strings, tuples, sets but don’t include lists as they are mutable and not hashable. ...
TIL you can have conditional sections in your .gitconfig As some of you may know, I keep my dotfiles in a git repo. The problem with this approach is that my email in my .gitconfig is set to [email protected]. Where my config looks something like this: [user] email = [email protected] name = Haseeb Majid # ... However, when I am at work I need to use a different email to commit i. ...
What is a TIL post? TIL - Stands for today I learnt. These posts will be shorts summaries of something I learnt “today”. The TIL posts have a low barrier to entry and are a lot easier to write. Therefore they should encourage me to post more often. In all my blog posts I try to post about things that I struggled to do. If I struggled to implement a feature or build something. ...
Previous article This article assumes you are familiar with dotfiles and Dobot. If you want to know more about Dotbot click here In this article I will show you how you can use Dotbot plugins. We can use Dotbot plugins to run new directives such as apt. So we can use the apt package manager, so install packages. Tip One useful use case is when we setup on a new system we may want to make we have some packages installed like vim or make. ...
Previous article This article assumes you are familiar with dotfiles and Dobot. If you want to know more about Dotbot click here If you are like me you have devices, such as personal desktop and a work laptop. These devices share some dotfiles but also have specific program and applications. For example: Personal Desktop: Linux Work Laptop: Windows (WSL) On Linux I use alacritty and in Windows I use Windows terminal I could copy all my dotfiles over and not worry about which programs exist on which systems. ...
Today I will go over my current VSCode setup covering both extensions and settings. Out of date This article may be out of date, by the time you are reading this. It is accurate as of 16th October 2022. Extensions Here we will go over some extensions I find very useful: Full list of my plugins here Better Comments Link: Better Comments As the name implies it improves your comments. Makes them look nicer if you add certain annotations. ...