Posts

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. So if you scrolled to the right to see the rest of the code it would not be highlighted. ...

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>'. Give it a name like shortcodes. ...

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

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. So let’s see how we can automate that. Else the post won’t be visible until I next make a commit to my main branch. ...

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: First go to your Goatcounter site i.e. haseebmajid.goatcounter.com Then go to Settings Then Domain settings > Custom domain Add your domain i.e. stats.haseebmajid.dev Press the Save button on the bottom left Domain Finally, we need to go to our domain management tool, such as namecheap and add a new entry: ...

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.8)", }); }); </script> The highlighted line may need to change depending on how your blog is setup. For my blog using the PaperMod theme. This gets all the images on the page .post-content img. ...

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. In my example, it will be at layouts/partial/analytics.html. However, you can call and place your file where ever you want, just remember it for later. ...

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. It was a great way to learn React, TailwindCSS and a bunch of other technologies. ...

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.e. work email [email protected] not my personal email. So I was wondering how could I do that; one way would be to change the file locally and just not commit it. But of course, that is not ideal. ...

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. It shows that there wasn’t a tutorial or an easy example I could follow. So then I usually decide to write my own, to make it easier for others. It also has a nice side effect of helping me remember the topic better. ...

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. We can automate some of this with Dotbot and its plugins. ...

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. Such as adding TODO to the comment will turn the comment orange. See the image below: ...

If you’re like me you find yourself moving between multiple systems. Whether that be between my personal desktop and my work laptop or distro hopping on Linux. See relevant meme below: What are dotfiles? Many tools/program store their configuration files as files on your machine. On Linux you will often find these in ~/.config directory. Some common examples of dotfiles: - .vimrc - .bashrc - .gitconfig I wanted to find an easy way to manage my dotfiles and share them between mutiple systems. I also wanted a easy way to install software/tools I used between my systems. Introducing DotBot, a tool that provides an easy way to manage our dotfiles using VCS (git). ...

Shameless plug: This is related to a EuroPython 2022 talk I am giving, My Journey Using Docker as a Development Tool. For most of my common dev tasks, I’ve started to rely on docker/docker compose to run commands locally. I have also started using vscode’s .devcontainers, to provide a consistent environment for all developers using a project. The main reason for this is to avoid needing to install dependencies on my host machine. In theory, all I should need is a Docker daemon and a CLI (docker CLI) to interact with that Daemon. This also makes it far easier for any new developer to start working on my project and get set up. ...

In this article I will show you how you can have separate modules for your Socketio event handlers. Rather than keeping them all in the same file. Hopefully this should be a relatively short article, lets get into it Main In this example I will be using SocketIO alongside FastAPI, but you can easily change this code to be SocketIO only. I also will be using a uvicorn to run the server. ...

Background This will be a slightly shorter article. In this article I will show you how I’ve managed to do some end-to-end testing with Gitlab CI services. I’m building a browser-based multiplayer game called Banter Bus. Banter Bus consists of three main components, gui: A SvelteKit based frontend the user will interact with to play the game core-api: A Socketio API written in Python management-api: A simple RESTful API written in Python (FastAPI) Now say I want to write some e2e Cypress tests, that will test all of these components interacting with each other. Which mainly will look something like gui -> core-api -> management-api. ...

In this article I will show you how you can test an async Socketio application in Python, where the ASGI server we are running is uvicorn. I will be referring to these tests as integration tests, though depending on who you ask they could be called E2E tests, system tests, slow test etc. What I am referring to is simply testing out the entire “flow” of a socketio event i.e. emitting an event from a client, then receiving it on the web service and for my actual projects interacting with an actual database. ...

In this blog post, we will go over how we can automatically test a Gatsby site end-to-end (e2e), using Cypress on Gitlab CI. Introduction Gatsby Gatsby is a static site generator (SSG) built upon React. It allows us to create “blazing” fast websites. In this example, we will use a simple blog starter template available and add a Cypress test. Cypress Fast, easy and reliable testing for anything that runs in a browser. - Cypress README ...

Background A bit of background before we start the article. When I develop a Python web service I use the Connexion library created by Zalando. It’s a great library which is built on top of Flask. It uses an OpenAPI Specification (OAS) file to handle input validation and routing for you. Therefore reducing the boilerplate code you need to write. The main advantage of this is that we have a design-first approach to developing our API. We fully define the OAS then develop the code/web service. This also keeps the OAS up to date, helping to mitigate the issue of the code/documentation getting out of date. Especially when you share the OAS with other people (clients) to use. The last thing you want to do is give them an out-of-date file. ...

Recently I’ve been working on a new personal project called Banter Bus, a browser-based multiplayer game. I’ve been working on a REST API to add new questions to the game. The API is built in Golang and uses MongoDB as the database. Since Golang is a strongly typed language, we will need to specify the structure of the data we expect from the database. This can get tricky if the data varies, such as one field changing. ...

In this article, we will go over what the yield keyword is used for. We will also cover how you can use a yield with a pytest fixture to allow us to “teardown” tests, after all of our tests have run. A common job being removing test data from the database, so that next time your run the tests your tests won’t fail. Due to the database being in a different (unexpected) state. ...

A lot of people, I included, are using Gatsby to build their own blogs. One of the things I wanted to add to my blog was a table of contents (ToC) 📝. A ToC will show you all the headings of an article and when you click on a heading it’ll take you directly to that heading. It’s a nice little feature to have on your blog, which makes it easier for users to navigate and find the information they are looking for. ...