series:TIL

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

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

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

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

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

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