I spent some time this weekend rolling the auth credentials for this site (again) after Claude Code doxed my variables! Anyways, whilst I was doing this I noticed my Turso dashboard had 1.3 BILLION row reads. My database was getting absolutely...

I’m currently in the process of migrating a large SvelteKit monorepo from Svelte 4 to Svelte 5 with my team. The UI package is still on Svelte 4 and it’s causing a lot of headaches with svelte-check in CI and the and event delegation (UI package...

Cool! So, coding tools! We all use them right? I’ve been through a few of them! As a team lead working on a large SvelteKit monorepo, I’m constantly evaluating tools that could help the team move faster and write better code. Here’s my honest take...

In this post I’m going to go through converting the SvelteKit minimal template from using and over to using , and . Why? Well, it’s as close to testing components and pages as you can get, rather than relying on the simulated it’s...

Ok, off of the back of an absolutely banger of a post from Ilja, I’m now compelled to write about my own experience at Svelte Summit. I initially drafted this post on the 13th, it’s now the 25th (this post has been sat in my drafts all this time!)...

I first heard about at Svelte Summit from a talk by Dominik G, one of the core maintainers of SvelteKit and Vite. He demonstrated how this new approach lets you test Svelte components in actual browsers instead of mocked environments like . The...

I poisoned the well! 😱 I was reviewing code the other day and saw a pattern that I posted ago! This was a quick “this is how I fixed this issue” kind of post. Thing is, it’s been slurped up by LLM scrapers and is being presented as gospel...

So, since the Model Context Protocol (MCP) was announced at the end of November 2024 I immediately saw the potential that this could offer me. Me being a person that likes to gather information to add to an LLMs context before doing anything. When...

Aight! So, I’ve been using Claude Code for a bit now, and one thing that’s been bugging me is the way you’re supposed to configure MCP tools. If you follow the official approach, you’re stepping through a CLI wizard that forces you to enter...

I used Windsurf for the whole day yesterday, I’m impressed! I’ve been using Cursor as part of my development workflow full time since September last year. There’s many a post on here from me on integrating other tools into my workflow for using “AI”...

Aight! Let’s go over the migration from Tailwind v3 to v4 and daisyUI v3 to v5 in a SvelteKit project, I’ll not go into a massive preamble here on the improvements that Tailwind v4 brings, essentially , it good, it faster, it simpler, with modern...

So, this is my updated Zsh config! To be honest there’s little that’s changed over the years since I originally posted about this a good three years ago now in My Zsh Config. But! The changes are substantial enough for me to justify a new post.

Ok, so, I’ve heard about this CLI tool that allows you to use your preferred LLM provider, Goose, from Block (Square, payment thingy) which I think is officially called codename goose, but we all know everyone is going to refer to it as Goose.

Super quick one I want to document here! I got myself on a side quest, again! No biggie, my ZSH shell was taking ages to load. When I say ages, more like 5+ seconds every time I opened a new terminal, that sort of thing can add up. This is just...

Aight! It happened again! Mysteriously git just straight up stopped working for pulling/pushing on one of my WSL Ubuntu instances! I’ve just gone through setting up a fresh WSL Ubuntu 24.04 install and wanted to detail the process of getting Git...

I first heard about at Svelte Summit from a talk by Dominik G, one of the core maintainers of SvelteKit and Vite. He demonstrated how this new approach lets you test Svelte components in actual browsers instead of mocked environments like . The...

Aight! I’ve been playing around with using and creating my own Model Context Protocol (MCP) tools lately. I also talked myself into giving a talk at the next Svelte London event to share what I’ve learned. It’s a bit of a stretch talking about AI...

In this post, I’ll go through the process of getting a Model Context Protocol (MCP) tool up and running with the Claude desktop app using Node in Windows Subsystem for Linux (WSL). Using WSL allows me to manage my Node versions on WSL...

Real quick one from me on updating a Hetzner VPS with something like . I noticed some weird behaviour today when I wanted to install on my Hetzner box. I was greeted with the following message:

Ok, I don’t usually do a post like this, this site is usually around how to work with a technology or to get something done with it. This time around it’s more of a starter pack on where to start if you want to take back some control over your...

Remember when I wrote about changing scrollbar colour with Tailwind CSS? Good times! 😅 Well, that post was ago and stuff don’t stay the same for long in modern web dev. The sitch: I noticed my scrollbar styles were being applied when the mouse...

Aight! With Svelte Summit Fall 2024 done with we got a load of cool new announcements, Svelte 5 being the big one along with the new site and docs! Beautiful! One of the other big announcements was the new Svelte CLI which combines with the ...

It’s been since I last wrote about implementing redirects for changed post routes in SvelteKit. In that time, SvelteKit has evolved, and so has my approach to handling these redirects. Today, I’m sharing an update on how I’ve improved...

I totally changed up the Svead package again. Svead the SvelteKit head package is used for SEO purposes, and back in May, I wrote a blog post about it and the changes I made to it (behind a flag). I was Quite jubilant because I’d actually managed...

The WSL Cursor setup, debugging your setup before you even code! I initially tried Cursor around 18 months ago when I saw something from Catalin about it. At the time I couldn’t get past launching it with the command. With all the hype going...

I’ve been playing around with Hetzner Cloud for a while now, mainly setting up this site on it using Coolify but it got me thinking about using it for other things too. I’ve used PocketBase before for other projects and documented it for use with...

Ok, it’s high time I write about the Svelte head component I made back in May 15, 2022 ( ago). I called it Svead because Svelte + Head = Svead, right? But after mentioning it to Puru he said it’s like Svelte + Mead 🍺! Much better!! I have previous...

Aight! So, I’ve gone off of Fly.io, great service, I’ll probably come back to it in the future, but, now I’m going to set up my own VPS on Hetzner. There’s threads from Puru on him doing it but he expertly didn’t document what he did, so, I’m going...

I’m currently looking into upgrading a large app where I’m working, to upgrade from Svelte 4 to Svelte 5. The upgrade from 4-5 wasn’t as much of a problem as I thought it would be, there was one issue with another Svelte package that I discovered I...

I’ve been doing more stuff with Fly.io and Turso with SvelteKit. If you’re following my posts you’ll know I’ve got a real nerd boner for using Turso in anything I can cram it into at the moment! Why Fly.io though? Just get a $5 VPS and use that!

Aight! I’ve spent the weekend working out the migration of this site from Vercel over to Fly.io. I’m still not 100% there but think I’ve covered most of it now, one thing that took up a lot of my time doing this is trying to work out why a from...

Ok, so I went over this in this in a post a while back. I was having issues deploying a SvelteKit app to Fly.io. The reasoning behind me wanting to use Fly is so that I can put the projects near where the users are, reducing latency and giving an...

A couple of years ago I wrote a guide on setting up a web development environment on WSL using Fedora 35. I wanted to get an up to date version of Fedora to use in WSL so I went back to my guide and the link for the file was a 404 on the repo...

How to get the array of selected values from a multi-select form input? This is a short post detailing my stupidity and how I overcame it. So, here’s the sitch! I was starting again with the dopedevs.icu project I started over 4 years ago but never...

Real quick! I’m in the process of migrating domains to Cloudflare. I moved scottspence.dev recently and noticed my Fastmail DKIM wasn’t configured correctly. Cloudflare will import your DNS records when you add a domain to your account with their...

This is a post that will go over some of the specifics needed to configure a SvelteKit project using Svelte 5 runes. So this is a dedicated post for the Svelte 5 integration going over the work done in previous posts on setting up a project to use...

So, I’ve got these massive CSV files (some up to 233 thousand rows) that I exported from Fathom Analytics. I want to import them into the Turso DB I use for this site, so, eventually visitors will be able to view the data. I’m lot leaving Fathom, I...

So, you’ve just upgraded to Svelte 5 and are excited to test out your components. But wait, what’s this? You run your tests and hit an error that’s throwing a spanner in the works:

I have the popular posts on this site which are stored in a Turso table, the table is generated from the Fathom Analytics API on this site and you can see them when you get to the bottom of a post or in the footer of the site. Here’s the sitch...

Real quick! I’m going to go through what I did to get a SvelteKit project deployed to Fly.io and how to set up environment variables. The back story is that I wasn’t getting the best response times from the project I deployed to Vercel for Building...

Okedokey, so, I’ve been playing around with Turso DB and SvelteKit and I decided to see if I could record analytics for a project and use Turso to store the data. This was a bit of exploratory work, which I found really interesting as it’s something...

I don’t get it. I’ve used macOS for well over 4 years Windows for the past 20 and I have used Linux for 4 years. I’ve been using all these systems for a long time and sometimes the snark get’s to me. I get it everyone has their preference, but...

I was asking ChatGPT to read some posts from my site and summarise them for me, I was a bit surprised when I got the response “I wasn’t able to directly access the URL you provided due to restrictions on the webpage.” from the bot. It was then that...

What a catchy title! So, I thought it’d be a good idea to completely move away from using Airtable. I used Airtable for my short URL service I created and for various config options for the Let’s Work Together page on my site. I moved them all to...

Real quick one for me! Future me that is!! I had to update the BIOS on my motherboard, now a lot of manufacturers will recommend their software which is usually hot garbage! Every time I try it I’m prompted to install virus protection and other...

Ok, so, back at the start of the year, I switched from Revue (remember that? 😅) to Brevo (Send In Blue at the time) and made a concerted effort to use it as I paid quite a premium for it! There was some fun around setting up DKIM records for the...

Yesterday I switched my URL link shortener from Airtable to Upstash Redis. Airtable is great and I still use it for a couple of features on this site, the contact from being one of them. I am really enjoying using Upstash Redis for a lot of things...

I came across one of those infographic’s today detailing a couple of uses of the HTML tag and decided to dig a bit deeper into the uses for it and was quite surprised to find quite a few I didn’t know of. This is a reference primarily for me...

I made a reactions component in SvelteKit that uses Upstash Redis to store the user reactions. It uses a SvelteKit form action to submit the reaction to the server. It’s a nice example of how to use Upstash with SvelteKit. I’ll go through creating...

Tailwind is awesome n’ all but what do you do when you want to change the default fonts. I’ve spent a bit of time customising this site to use local fonts above the default used in Tailwind CSS. In this post I’ll go over adding in new fonts for...

This guide will cover how to add a cookie-based theme selection to a SvelteKit site using daisyUI. I’ve always liked implementing something in the way of a theme change into my sites. This often meant that I’d have to define my own theme up-front...

Ok, on 2023-06-13 there was an AWS outage and everyone that used AWS East was affected. I use Vercel for hosting and they use AWS for their edge rendering lambdas (in AWSEast) so I was affected. I have some analytics I bring in from Fathom...

This is a how-to guide for adding a contact form to your SvelteKit site using Airtable to store the submissions and notify you when there is a new submission. This is an update to the previous post I did on this, the recent changes to how you...

During a workshop I was hosting at CityJS ( ago) for getting started with Svelte and SvelteKit, I received some valuable feedback from an attendee who was unclear about the role of the load function in SvelteKit. This prompted me to revisit this...

I had a bit of a surprise land in my inbox at the start of the month from my analytics provider Fathom, the subject line “You’ve been quite popular”. Not the good type of surprise though! 😅

I came across this issue when adding real-time analytics to my site, essentially what I wanted to do was get some analytics data from a server endpoint and pass that to the page. In SvelteKit you can have different ways to get data onto a...

I spent a bit of time the other day looking into the Fathom Analytics API, this was something I took a look at around a year ago now, but I didn’t really get around to using it. If you’re looking to implement Fathom analytics on your site...

Here’s a real quick one on making sure you don’t blow your crawl budget on your SvelteKit project JavaScript files. I noticed this ago and didn’t write about it. Tangentially related, I’ve recently been having a bit of a mare with Google indexing...

In this post I’ll be detailing how I implemented redirects for changed post routes in SvelteKit. I initially did this back in the Summer of 2021 but with the SvelteKit v1 release some things have changed. For the Tl;Dr skip to the solution.

If, like me, you’re on the Windows Insider Programme Dev channel and you use Windows Subsystem for Linux (WSL) for your web development then you may have noticed some weird dev server behaviour recently. Behaviour like, starting the dev server...

So, I just found that the SPF record on my Fastmail account for scottspence.com was throwing a verification error. I didn’t really know what the SPF record was for until this point and I had to research why it was failing on Fastmail. So, I did a...

I did what I usually do and made a useless project! I was searching for HTTP codes and went to httpcodes.com to see if anyone had done anything there and it looks like it’s parked. This made me think though, “what about httpcodes.dev?” So, yeah, I...

I had this idea whilst working on a SvelteKit project to see if I could use the Marked package in place of MDSveX. So the idea was that I only need the markdown rendered so I thought why not just load the file into a Svelte page and render...

There were a couple of Tweets I saw in quick succession today along the lines of “Don’t create your own blog, write on someone else’s platform instead”. Now, as someone that has been blogging since April 2010 (since 2016 here) I can tell you it is...

So, I’ve started using Sendinblue for my transactional emails and newsletter. There’s the usual configuration to do with these services to add and configure your domain with them to show it as the sender. I’ve documented that process of Setting up...

I’ve now been using Fastmail for a year now. I was using ProtonMail previously but decided to migrate to Fastmail. I’m going to go into the details of why I switched. This is personal preference and my reasoning behind the switch. For full...

Two situations over the last couple of days I’ve needed to do this and I’ve had to look up the code to do it. So I thought I’d write it down here so I can find it again. This is being left here for me primarily as it’s something I need to do...

Tailwind is cool, right? Really configurable as well, I wanted to add some gradient animation to a project of mine. So did a search and found this awesome post by Victor Yoalli on how to do it! Thanks Victor! I’ve basically taken Victor’s code and...

Real quick! This was a dumb idea I had when I created the repo for this in 2018 and never got around to doing anything with until yesterday! 😂 Tl;Dr: It’s a list of CSS filters that you can apply to an image to see what effect they have.

For 2023 I’m going to note down my goals for the year. I’ll take a look at this quarterly and update it accordingly.

In this post, go over how to add environment variables to your GitHub Actions. I recently added environment variables to one of my GitHub projects recently and it stopped running. In this case it was the environment variables for Fathom...

I recently released a head component that can be used in Svelte projects and I wanted to add tests to it to make sure that it’s working as expected. I decided to use Playwright to test the component as it comes with the SvelteKit CLI as a config...

With the recent changes to SvelteKit which has invalidated a lot of content already out there, I want to make some notes on how to load data in SvelteKit. First up, if you weren’t aware, SvelteKit completely changed how file based routing is done.

I was playing around with Linode recently to try set up a PocketBase instance then I came across this guide on the PocketBase GitHub discussions. The whole thing took around ten minutes and I now have a SQLite database I can read/write to.

In this guide I’ll be going through getting set up with the Universal React Query Library (URQL) in SvelteKit. There’s documentation you can check out for URQL itself if you need to go more in depth. This will be covering initialising the client and...

With SvelteKit in the past if you wanted to use a file secret that you didn’t want exposed on the client there was some additional config you needed to do. Vite exposes all variables contained in the file prefixed with to the client. If you...

I’ve been having a play around with Storyblok this evening and want to make some notes on getting set up with it. With the moving target that is the public beta of SvelteKit there’s a few things that have changed recently which I want to document...

Styling a scrollbar with Tailwind CSS for Chrome, Edge, Safari and Firefox. This is possible with vendor prefixes and pseudo-elements. I touched on the configuration for this in the Change Text Highlight Color with Tailwind CSS post I did recently.

Here’s some of the issues I faced when deploying a SvelteKit project using Prisma to Vercel. I was following along with the awesome guide put together by Matia, on authentication with SvelteKit using cookies. By far the most comprehensive guide...

How to change the highlight color of text on the page? Here’s the situation! I wanted to change the text highlight color to a different colour than the default blue on my site. To change the default text highlight color in a Tailwind CSS...

Quick guide to getting Debian WSL set up for web development. You can install Debian from the Windows Store and get started straight away with using it, but there’s a few things missing.

I’ve started using TypeScript on every new project I start with Svelte. My buddy Jamie Barton has helped me out with getting set up with the GraphQL Code Generator so that data is typed in the project. This is a just so you know kind of guide as...

I have several components that I use across a couple of my SvelteKit projects. I decided to make them into an npm package so that I’m not maintaining them in several places. Here I’m going to go through the process I followed to develop the package...

I’ve had this issue a couple of times now and want to document how to resolve it in most cases. The latest time this happened to me was with the 22H2 insider preview Windows 11 update.

The Git username and email are the bare minimum needed for when working with Git to commit changes. It’s also one of the first things you do after installing Git. The username and email are used to set the author of commits. Version control...

Skip links are internal links that allow you to skip to the main content of the page. So on this page, if you hit the tab key you’ll see a skip navigation button, something like this:

I’ve always bundled in my Zsh config with other guides I’ve done in the past and never a stand alone post. So I’m making this now for my reference. I switched to Zsh around two years ago after being a long time Fish shell user. The reason for the...

Secure Shell (SSH) is a secure way to connect with code repository hosts like GitLab, Bitbucket and of course GitHub. While HTTPS connections require a username and password credentials, SSH instead uses a pair of cryptographically generated...

KitQL is a GraphQL client for Svelte. It is a set of tools to help you query GraphQL APIs. I’ve been using it in a couple of projects now and want to share what I have learned. What better way to do that than the (now) classic re-reaction of the...

URL shorteners, use them for when you want to share an easy to remember link. You can use a service like Bitly or TinyURL or any of the other ones out there already, or you could make it something you’d want to use and have a bit more of a...

In this how-to I’ll be walking through the process of creating a contact form in SvelteKit using Airtable for storing the submissions with no additional dependencies.

Do you ever watch a live stream and wonder how the chat is shown? If you have and you’ve searched online you’d probably have found videos detailing how to do this with services like Streamlabs, or Stream Elements. These involve configuring the panel...

How do you filter a JavaScript object that has duplicate properties? Use reduce! The specific situation I had is a list of objects with duplicate properties. I wanted to filter out the duplicates and return a new object with only the unique...

In this guide I’m going to detail upgrading Ubuntu on Windows Subsystem for Linux (WSL) from the current version 20.04 to 22.04 this the development build of Ubuntu 22.04 which is due to be released on 2022 April 21. You can Tl;Dr and watch...

I’ve now gone through quite a few mechanical keyboards in a relatively short time. The first couple of times were to replace the current faulty one I was using. This time around it was more of a sustainability decision than a replacement. I’ll do a...

This is an updated guide on the post I did at the start of the year for setting up a web development environment on Windows with Windows Subsystem for Linux (WSL). This guide is intended for use to get set up with Fedora 35 on WSL. This is my...

If you want to fetch data from a GraphQL endpoint, you can use the browser fetch API without the need for any third party tools. You can use the browser fetch API in SvelteKit on both the client and the server. In this first example I’m using the...

How to set up Tailwind CSS with Svelte, two examples here of adding Tailwind CSS to a new Svelte project. ℹ️ Please note at the time of writing SvelteKit is not at v1 but this will be the default way to create new Svelte projects when...

I’ve started using Fastmail, here’s how I set it up with Vercel for use with my own domains. If you’re interested in giving Fastmail a go then you can use my referral code for a 10% discount on the first year of Fastmail.

In this guide I’ll go through the configuration needed to get set up with Fathom Analytics in a SvelteKit project. I’ll cover getting set up, tracking goals and creating and using a custom Fathom Domain.

I’ve had to make a copy of my current Ubuntu install for Windows Subsystem for Linux (WSL) and although I have written about this before but this time there were a few gotchas I want to cover here. WSL moves pretty fast so a lot of the...

This guide has now been updated, take a look at Use URQL with SvelteKit for an up to date reference Use the Universal React Query Library (URQL) in Svelte!

Now that Windows 11 has been released I decided to switch from my Windows 11 insiders build and go over to my Windows 10 partition, reset it and start over on a fresh Windows 11 machine! In the past getting set up with Windows Subsystem for Linux...

Six months ago today I started a new job as a developer advocate for GraphCMS. This has taken me by surprise as if feels like I’ve only just started still!

Real quick example of how I used to fetch data from multiple endpoints in SvelteKit. This uses the server side that is part of SvelteKit and is destructured into the function.

I’ve been using Netlify recently to make a project that uses endpoints. Unlike with Vercel where you can use the endpoint to fetch the data dynamically Netlify needs to statically generate the data. There’s some SvelteKit settings that need...

Bit of preamble before I kick this off, subscribers to my newsletter will know that I’ve been through a couple of platforms now (Zoho, SendGrid, Revue then Substack). I settled on Substack because of the editing experience what I didn’t want to...

If you want to rank on Google (and other search engines) you need to be able to tell the world what your site consists of. A sitemap is used by the Googlebot, BingBot, DuckDuckBot and other search engines to tell them what pages are available. This...

Having one place for all your social links is big business! Services like Linktree, ContactInBio, LinkBook, etc all offer the same sort of service. One location for all your social links. This is a nice project as a proof of concept to get you set...

The indie web is alive and well and there are more and more people taking control and owning their online presence and also how they consume other content. One way to help consumers of your site know that there is new content available is by making...

So SvelteKit is super awesome n’ all and the best thing ever but have you ever tried to use a secret that you didn’t want exposed on the client? SvelteKit uses Vite and it has a specific way to reference Env Variables and Modes, you reference a ...

Over the last few weeks, I have been getting familiar with Svelte and SvelteKit in particular. Coming from a React background there are many similarities using Svelte and some that are not. One thing that came up when using Svelte was passing...

I made a starter blog with SvelteKit and GraphCMS, I’ve been doing a couple of small projects with it and I really like it! This will focus mainly on the Svelte and SvelteKit side with not too much emphasis on the GraphCMS side. GraphCMS has a blog...

I came across this issue today when trying to set up OBS on a new machine where trying to add a display capture and there was no output for the screen. I found a fix, apparently this only affects laptops and it’s to do with the video card.

I got my new hardware from GraphCMS today and wanted to stream the setup of a Windows PC for web development. The idea was to do a ‘set up a Windows machine from scratch for web development’ and there would be restarts when installing...

Render is pretty neat! I’m still super early days but I have discovered the files that is the equivalent to the Amazon CDK (Cloud Development Kit). The Amazon CDK is pretty powerful from what I can glean.

The Gatsby offline plugin is really handy right up until you don’t want it any more! I switched my main site over to Toast from Gatsby and hit a bump when it came to removing the old Gatsby site because it used a service worker meant that the new...

I had a play around with Svelte the other day and wanted to make a few notes and comparisons to React, React being a point of reference for me and hopefully others. I’ve found a lot of the examples here on Svelte Mastery

I was tagged into a conversation over on James Q Quick’s Discord about growth over the last year and it wasn’t until I sat down to write about it that I realised I’ve done quite a bit over the last 12 months now. Most of my content is written and...

I have always liked using Windows Subsystem for Linux (WSL), I’d routinely trash installs then reinstall them from the Microsoft store and have become quite adept at setting up new instances with everything I need to get back to coding as quickly as...

When using Tailwind CSS in a Toast project I got a CSS warning when trying to use the Tailwind directive. A quick Google gave me a stackoverflow result for using it in Vue but the solution worked the same in Toast with one last...

I was directed to direnv by Chris Biscardi when I was trying to use some environment variables in my Toast site. In the past I have always reached for dotenv so taking a look at other Toast sites I couldn’t find any that used it so I reached out...

For the past couple of weeks I have slowly been getting a more comfortable with Toast The best way to do that would be to make a project with it, I decided to move my blog to Toast.

In this post I’m detailing how I set up my domain with ProtonMail and Vercel, this is mainly the CLI commands that are needed to get set up with ProtonMail and Vercel. I’ve decided to give ProtonMail a shot, I have lost faith in Google being a...

Ever since I first saw Sara Vieira’s slides form Vue London 2018 I’ve really liked the idea of writing a presentation in MDX. Sara used something called MDX Deck and it’s pretty dope! You write your slides in Markdown and sprinkle in other nice...

A sitemap is an important for Search Engine Optimisation (SEO) because it makes it easier for Google and other search engines to find your site’s pages. Google ranks web pages not just websites. There is no downside of having an XML Sitemap and...

The Logitech G915 Ten Keyless (TKL) has been a bit difficult to get hold of recently. If the feel of the keys on the G815 are anything to go by then this keyboard was on my wish list. I did get one and have been using it for the last week or so...

I’m a bug writing machine, all developers are! We’re only human after all. Playwright

This isn’t a guide, this is me documenting the how and why for a proof of concept project I worked on. So, I started playing around with the GitHub GraphQL API endpoint to do something I’ve been meaning to do for a wile now, that’s to make...

I’ve been using the Windows Terminal now since the summer, it’s great and I now prefer it over Hyper which was my preferred terminal. Windows Terminal comes with a lot of options for configuration and a load more which I’ve only just discovered...

I have been having a blast playing around with configuring Fedora 33 in Windows via Windows Subsystem for Linux, I didn’t know you could straight up import a Linux distro and use it. In this guide I’ll go through the complete setup needed to go...

Fedora Remix for WSL was on sale for £2.51 so I thought I’d have a look see and add it to the rest of the other WSL distros I have installed. As I’m all jazzed about using Cypress in WSL I thought I’d give it a go on Fedora.

This is a specific use case for installing Google Chrome in Ubuntu on WSL. On Ubuntu, Snap is the preferred method to install Chromium and although snap is on the WSL image you get from the Microsoft store it’s not functional. There is a solution...

Ok this is a little snippet I’ve got set up to query data from the GitHub GraphQL API. I use this for getting data to work with in data visualisation tools, I’ve done it a couple of times now with my Gatsby site but now I’m attempting to do it in a...

Create a Video overlay with React hooks. I had to create a video overlay for a project I was working on. This example use a portal to render the player with .

For the past couple of weeks now I have been getting familiar with Preact and the Preact CLI. It’s great, it’s similar to React

Create a simple Node API on Vercel Serverless functions in under 20 minutes. But first some preamble! A while back (3 years ago now!) I made a Positivity API, it was a really simple array of positive quotes that’s used in the #100DaysOfCode twitter...

As a developer you spend a lot of time in the terminal so it’s important to be happy and as productive as possible whilst you’re in there. This is why I’m a big fan of the Fish Shell in particular. The Fish Shell is a user friendly shell with...

So I had a play around with the openSUSE Leap 15.2 you can get on the Windows store and after familiarising myself with it decided to see if I could use it for web development. Well, yeah, you can, that’s it, that’s the post!

So this post started off with me getting GUI apps running on my Windows WSL install of Pengwin, but has now turned into doing it without the need to fork over the readies for Pengwin as now you can do it with Ubuntu or Debian (possibly others) which...

Sooooooo, so, so, so, Zsh is pretty neat, right? I’ve been a long time fan of the Fish shell, but I recently had to go full on with a Zsh shell and decided to give it a proper go.

The Gatsby File System Route API was announced recently and I have been having a play around with it. If you’re not familiar with it, it’s something like the dynamic routing you get with Next.js. If you’re not familiar with that either then it’s a...

Ok, so this is another one of those “let’s use a new CSS-in-JS library on a Gatsby default starter project” post. In this case it’s Chakra UI, it’s recently gone v1 and I’m keen to use it.

This is a very specific issue myself and anyone that uses Gatsby and React router for navigating between headers in their Gatsby sites. The issue has been documented several times now and the advice I have followed is to add a resolutions to my ...

I have delivered this talk several times now but not actually written about it.

I started adding videos to my YouTube channel in November 2018, this was mainly intended as an accompaniment to the blog post I did to Get your GraphCMS data into Gatsby. A the time I was using a web cam I’d bought off of Amazon for around £17, the...

Here it is kids! All I know about Markdown. First! The standard preamble… Before that though! Some of the possible titles I came up with before writing this:

I recently started monetising my blog, (don’t worry there’s no paywall!) this isn’t a new thing as I originally did something similar with Brave and the Basic Attention Token (BAT) back in 2018 on scottspence.me. So what is web monetisation? It’s...

Yo! It’s that time again!! This is an opinionated guide on setting up a development environment for web development in widows that will use the requisite tools, Bash, Node, Git, VS Code etc…

For as long as I have been learning web development () I have been taking notes. Partly notes to help clarify my understanding of something and partly for future me. That’s why I have my digital garden, an online collection of my learning over the...

I switched from Ubuntu to Manjaro Linux, here’s how it went. So for a while now I’ve been using Ubuntu, from when my old Asus Transformer Pro decided that it didn’t like running windows any more.

Unprecedented times, 2020 has been something else, and hopefully something none of us will have to live through again. I’ve decided to take a few notes on what I’ve been doing in these unprecedented times.

My list of VS Code extensions I use in my daily development workflow. I’ll detail the package name to search for in the VS Code extensions tab.

My beloved HAVIT KB395L keyboard left Ctrl key has started cutting out intermittently. As a developer all my coding revolves around that key saving changes and copy pasting. This means that my code now breaks with a random in there where I thought...

This is a follow up on the post I did about Getting Started with Linaria The starter I worked on last time I made into a template so it can be used as the base of this project.

Now that Windows Subsystem Linux has finally arrived I think it’s time to refresh my notes on it from the last post I did back at the end of 2018. https://docs.microsoft.com/en-gb/windows/wsl/install-win10

Fathom Analytics, a great tool to use for your site analytics without the compromise of giving your visitors data to Google. I’ve written about How to Track Custom Events with Fathom in the past but since then Fathom have changed their...

Virtual Box Guest Additions can be a bit of a pain to set up sometimes. My current PC setup for some reason wouldn’t show a VM in the full resolution.

I had a work colleague introduce me to Linaria last week and I’ve used it on a project and I quite like it. Linaria is like styled-components but different as in there’s no runtime cost and some other gotchas I’ve found along the way.

I built my first PC, here’s how it went and what I learned. Up until recently I was very happy with my home computer, which was an ASUS Transformer Pro T304UA.

A curated list of hints and tips for using styled-components. Breakpoints

This is a collection of some handy snippets and resources I collected which I’m going to be documenting here, it’s probably going to be a mess but it mainly for my reference. Big thanks to Steve Schoger and Adam Wathan 🙏

Use the same frontmatter block all the time for your blog posts? I do, so I’ve created a VS Code snippet to pre-populate the block with some default tags and today’s date.

I found an opportunity to improve the npm package for the font I like to use here and in my text editor (much to peoples horror when they see it)! It was a simple fix to add to the css file in the dist package.

Here’s some of the reasoning and detail that went into making the React SEO Component. There wasn’t a great deal I knew about Search Engine Optimization before I set about writing the Build a coding blog from scratch with Gatsby and MDX guide that...

I used CSS variables to make a theme switch, light and dark, I’ve done this in the past using styled-components but not attempted it via the CSS variables route. With styled-components you defined your colour schemes or themes in a object then use...

I am a massive fan of both Vercel’s Now.sh platform and the Netlify platform. This post has been in my drafts since the beginning of March 2019. At that time it was titled ‘Moving from Now to Netlify’ and it was mostly me being salty about the...

I’ve spent a while today trying to bring down the size of this project, I have several posts that are particularly large so I wanted to work out a way to reduce that. I’m an Ubuntu user and wanted to see if there was a way I could identify the...

I recently purged all the cover images from this site to reduce the overall size of the project, plus they don’t really add to the content. The only real plus for having a cover image was to that I could get the sweet preview cards you get when...

I spent a couple of days now questioning how and what I write after reading a post from Richard Haines. In his post he mentioned how he stumbled across the Digital Garden idea. Richard’s post led me to Chris Biscardi’s thoughts on that and in turn...

Quite a while ago now I was introduced to dependency update tools like Renovate and Greenkeeper, at the time I thought they were awesome, keeping your projects patched and secure so I went and used them in every project I made. Busy work

In this guide I’m going to cover the configuring of your custom domain with Vercel’s Now platform using the Now CLI. I’ll be primarily covering the steps you take after setting up an account with an email provider, the email provider I’m using is...

Remember services like Bitly and TinyURL? Yeah, they still exist, shortening your URLs for you, they’ve been around for a long time too. Bitly founded in 2008 and TinyURL founded in 2002 😱

I’m talking Fathom Analytics again, this time about tracking link clicks in my Markdown. I have written about how to track custom events with Fathom previously and this is really an extension to that post.

Fathom Analytics recently added a really neat feature for custom domains with their service. What does that mean then? Well it’s for bypassing ad-blocking extensions, not that Fathom wants to collect all your data, far from it.

If you’re having issues with the clicks not scrolling to link IDs see Not scrolling to ID The main purpose for me documenting this is to demonstrate implementing a table of contents with smooth scroll to the anchors in a Gatsby project using MDX.

I’m going to go over globally styling the Gatsby Default Starter with styled-components v5, I’ve done this in the past with styled-components v4 but I’ve changed my approach and want to document it. I’ll be swapping out the styles included with a...

In this guide I’m going to detail upgrading a Windows Subsystem Linux (WSL) Ubuntu install from the current version 18.04 to 19.10 this is an intermediary release before Ubuntu 20.04 is released on 2020 April 23. I have documented this process in...

In this guide I’m going to go through how to track custom events in a Gatsby site using Fathom analytics. Preamble

React Advanced London going deep! Here’s my recollection of my attendance at React Advanced London 2019 supported with videos from the event.

I have been a Gatsby user since around v0 May 2017, at that time was using a template called Lumen and it was just what I needed at the time. Since then I have have gone from using a template to creating my blog. Over the years I have made my own...

Do you use Google Analytics (GA) for any of your sites? I’ve used it in the past and it gives quite good information about

Stand back everyone, I’m doing pontification! I’ve had a couple conversations with my new found developer buddies about fitness, more along the lines of gym going and nutrition actually.

I’ve been wanting to go to a JAMstack conf since the first one was scheduled for October 2018. This year when it was announced there would be one in London I was super excited to get the opportunity to go. The conference was across two days with...

This is a dump of all the snippets I have collected over the last 18 months or so, that I’m going to document here so it’s probably going to be a mess but it’s mainly for my reference so 😛 Arrays

In this guide we’re going to cover converting the Gatsby default blog starter to use MDX. All the cool kids are using Gatsby and MDX in their blogs these days. If you already have a blog that uses Gatsby but want to move onto the new hotness then...

Already use WSL with Ubuntu? Want an Upgrade?? This is a guide that will cover upgrading Windows Subsystem Linux (WSL) from the current LTS version to the latest ‘normal’ version 18.10.

Hooks ahoy! Ok, let’s get it on with the new hotness in React-land, React Hooks! This is a guide covering using the Gatsby custom React hook for which it is now replacing with .

Moving to the new hotness!! I’ve now moved this blog over to Gatsby MDX. You can see all the changes on my repo here.

Over the past couple of weeks now I have set up several development machines at work and have had to also use two git accounts, GitHub and Bitbucket. To connect to both I use SSH as a preference, I have been using SSH in place of HTTPS for quite...

From scratch to Create React App on Windows An opinionated guide on setting up a web development environment on Windows 10

Cliffs/TL;DR I made a recruiter FAQ on my personal site for recruiters and created an online CV.

Let’s go through getting styled-components working with the Gatsby default starter.

Let’s set up Gatsby to pull data from GraphCMS.

Let’s use the React Context API to change theme in an app! This is what it will look like by the end of this post:

Don’t save the yak! But put in the work so you’re not wasting time.

I thought I’d set up this blog with some sort of build pipeline, the intention was to have a good Continuous Integration pipeline so that if there were any issues when building the site that I wouldn’t push a broken build. No one wants to see that...

I’m a bit late to the party using the new React Context API, I did get to use it the other day at work, I also made a snippet to scaffold out a component for it. I had followed a couple of guides explaining how to use it and neither of them as good...

We’re going to style the basic create react app with styled-components to look something like this: This is what it will look like by the end of this post:

Life moves pretty fast. If you don’t stop and look around once in a while, you could miss it. — Ferris Bueller. I’m going to go over steps I have taken the help me with learning to code (again)

I’m a Windows user, I have been a Linux user as well but I have found that Windows is a bit less neck beardy for me, both have their pros and cons. One of the big cons with Windows for me was when I started learning web development. That was until...

How to combine two separate unrelated Git repositories into one with single history timeline. Just adding a quick note on this…

Speed up your git workflow with git aliases, this is a brief introduction on using aliases 🚀👍 The more you work with Git the more familiar you become with the commands used in your every day workflow for your projects or your team’s projects.

No doubt you have heard of Git or GitHub for source control, but what is source control? “Revision control (also known as version control, source control or (source) code management (SCM)) is the management of multiple revisions of the same unit of...

How to build and deploy a multifunctional Twitter bot! This is a reference for me and anyone else that’s interested in Twitter bots in JavaScript.

Just some rationalisation of what I’m currently doing. Recently I have decided that I’m going to improve my current skill set. To do this I’m studying with freeCodeCamp for a full stack developer certification, I’m also trying to learn as much as I...

Want to get set up with your very own Twitter bot quickly and easily, with this guide you can be set up in under 30 minutes. But first, why should you want to build a Twitter bot? There are some really useful Twitter bots out there that do...

I know why Linus called it that now! If you’re reading this there’s a good chance you know at least the basics of Git but if like me and you are the only person making changes to your repos then there’s a good chance that you just use to move your...

I must say this was great to do and a nice little introduction to node and npm. I got to doing this from finding it on GitHub I think I was looking for the Twitter icon in bootstrap whilst working on my Random Quote Generator I stumbled across the...

Since setting up this blog I haven’t really bothered with Jekyll any more than just forking Barry Clarke’s repo of Jekyll Now and adding these posts as and when the feeling takes me. So I got to checking out Barry’s blog and his Jekyll Now...

This is basically a rant about the job market, I was laid off back in August, this is a terrible time of year to be looking for work, everyone is on holiday so things are generally pretty slow so when this happened to me I did the same and went on...

I’m a published developer! sort of Well that was a bit painful, well not actually I mean from the documentation I feel I was a bit mislead.

I have seen the same situation many times now in my career as a VBA Developer about how source code control is managed with VBA projects. Source control on VBA has long been a bit of a nonsense, there isn’t any really. When I started my first...

Ok, I have recently discovered and started doing freeCodeCamp(🔥) which so far I’m really enjoying. Since being out of work I have had some time to start exploring different programming languages and technologies but I haven’t found any courses...

My first post using Jekyll, all I have done really is fork the awesome jekyll-now repo from Barry Clark and rename the repo and adjusted the file.