Tag: how-to
How to: Write a How-To Guide
I wrote this guide to writing how-to guides in Spring of 2026 for a Technical Communications class at Central New Mexico Community College. After receiving incredible feedback and being asked if the professor could use my guide for an example for future classes, I realized this was actually a pretty good guide, so I'm reposting...
Setting up macOS to suck a bit less
Where's my tiling window manager???
headingoffset Is Coming: How to Prepare Today
With headingoffset starting to land in browsers, learn how to prepare now using polyfills, safe CSS fallbacks, and accessibility-first heading styling.
Making Scrollable Code Blocks Accessible
Fix keyboard accessibility gaps in Safari: learn why scrollable code blocks need focus and how a small polyfill makes them accessible for keyboard users.
Shared Tailwind CSS Themes in Svelte Monorepos
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...
Passing data between SvelteKit server and page files
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...
Theme Switching in SvelteKit Updated for daisyUI v5 and Tailwind v4
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...
Scrollbar Styling with Tailwind and daisyUI
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...
The new Svelte (sv) CLI, adding Tailwind is simple now
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 ...
Updating SvelteKit Redirects - A More Robust Approach
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...
Handling Multi-Select Form Data
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...
SvelteKit Page Reaction Component with Upstash Redis
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...
Customising Fonts in Tailwind CSS and daisyUI
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...
Cookie-Based Theme Selection in SvelteKit with daisyUI
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...
SvelteKit Contact Form Example with Airtable
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...
SvelteKit Data Loading, Understanding the load function
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...
Passing SvelteKit +page.server.ts data to +page.ts
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...
How to Implement Redirects for Changed Post Routes in Sveltekit
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.
Finding That Group That Wants to Watch You
Building an audience can be difficult. These are my thoughts as to how you can find those people who want to watch you.
Get document elements from a page
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...
Instagram Image Filters with Tailwind CSS and SvelteKit
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.
Gradient animations with Tailwind CSS and SvelteKit
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...
How to leverage GitHub and semantic release to reduce vulnerabilities in your packages
Have you ever noticed, when you install your project’s dependencies, that npm is reporting known vulnerabilities you just installed?
Data loading in SvelteKit
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.
Use URQL with SvelteKit
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...
Getting set up with Storyblok and SvelteKit
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...
Change Browser Scrollbar Colour with Tailwind CSS
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.
Change Text Highlight Color with Tailwind CSS
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...
How to Fix Windows Update Download Error
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.
How to Configure Git Username and Email
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...
Create Skip To Content With Tailwind CSS
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:
Set up SSH for use with Git
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...
Make a URL Shortener with SvelteKit
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...
Make a Contact Form with SvelteKit and Airtable
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.
Consolidate Chat Sources for Use in OBS with Social Stream
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...
SvelteKit Fetch from GraphQL Endpoint with Variables
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 Svelte with Tailwind CSS
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...
Backup Ubuntu in Windows Subsystem for Linux
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...
Use URQL with Svelte
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!
Get Streaming: How to start streaming on Twitch
Streaming on Twitch seems like an alluring thing, but sometimes it can be incredibly daunting to start. In this series I'm going to call Get Streaming, I'm going to go through some easy steps to get you started to stream on your favorite platform, whether it's Twitch, YouTube or any other platform you might want...
Make an Email Form Submission with SvelteKit
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...
Make a Sitemap with SvelteKit
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...
Make an RSS Feed for your SvelteKit Project
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...
OBS Display Capture from one PC to Another
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...
OBS Fix Display Capture not Working
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.
Raspberry Pi from MacOS via SD Card
How I use get_iplayer to download the latest Gilles Peterson show!
Things You Need To Test Your Web App
Discover essential techniques for testing web apps across devices and browsers. Use DevTools, Lighthouse, and network throttling to ensure reliable performance.
How to display code coverage of a Vue project in Gitlab
One might think that this should be pretty straight forward but there are some hoops you need to jump in order to get it to work.