How to Setup Netlify Deployment Notifications on Discord with Pipedream

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

TIL: How to fix `structuredClone` to work on Netlify SvelteKit Site

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

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

How Can We Update GitLab CI on the Status of the Netlify Deploy Part I

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

TIL: How Includes, Extends work with TS Config (with SvelteKit)

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

How to Autosort our SvelteKit Imports

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

How to add Have I Been Pwned to Your Registration Flow in SvelteKit

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

How to Remote Debug your SvelteKit on an Android Device in Firefox

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

TIL: How to Setup Netlify, Gitlab And Sentry

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

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

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

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

How to Setup OAuth2 with SvelteKit and Pocketbase

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. PocketBase will handle authentication for us, creating new users, and storing the password securely. You know things all apps need, that we don’t want to spend a lot of times building ourselces. To learn more about authentication with SvelteKit I recommend checking out the web there are some fantastic tutorials available 2. ...

How to use DotBot to personalise your VSCode Devcontainers

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

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

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

How to Update a Project using a Copier Template

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

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

My Workflow To Create a New Post Using Hugo, NetlifyCMS, Netlify and Gitlab Together

In this post, I will go over my new workflow for creating articles/posts that I now use with my new (Hugo) blog. Though I’m sure much of this will apply to other JAM stack sites as well. Hugo Site Before carrying on, this post assumes you have an existing Hugo blog. My Hugo blog setup looked something like this: ├── archetypes ├── config.yml ├── content ├── docker-compose.yml ├── Dockerfile ├── go. ...

My Useful Vim Commands (with VS Code)

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

How to use copier to create project templates

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

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

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

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

How to Add Page Views to your Hugo Blog Posts Using Goatcounter

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