Rodney Lab HomeHome

Rodney Lab Home


Hello and welcome! I'm Rodney, a web developer based in the UK 🇬🇧 and am available for consultancy work. Read more about me

Rodney from Rodney Lab

Recent blog posts...

Using vanilla-extract with SvelteKit

Using vanilla-extract with SvelteKit: Styles with TypeScript

Using vanilla-extract with SvelteKit: how you can make zero-runtime stylesheets with the new TypeScript freindly preprocessor in Svelte.

Use Vim Keyboard Shortcuts on your Blog

SvelteKit Infinite Scroll: Instagram API Tutorial

SvelteKit infinite scroll: see how you can use Svelte stores and a reactive function to implement an infinite scrolling Instagram feed.

SvelteKit Secure Dev Server

SvelteKit JSON Import: use JSON Data in Svelte

SvelteKit JSON import: how you can use data provided from business apps and ther sources directly in your Svelte site, thanks to Vite.

SvelteKit Image Plugin

SvelteKit Image Plugin: Next-Gen Images in Svelte

SvelteKit Image Plugin: how to use the vite-imagetools plugin to bring responsive images in next-gen formats, like WebP, to your Svelte App.

Use Vim Keyboard Shortcuts on your Blog

Use Vim Keyboard Shortcuts on your Blog

Use Vim keyboard shortcuts on you blog: how to make it easy for Vim users to jump around your Svelte blog site with a keyboard and no mouse!

SvelteKit Secure Dev Server

SvelteKit Secure Dev Server: go HTTPS

SvelteKit secure dev server: see how simple it is to spin up an https dev site using the SvelteKit CLI for developing and testing Svelte apps.

SvelteKit hCaptcha Contact Form

SvelteKit hCaptcha Contact Form: Keeping Bots Away

SvelteKit hCaptcha contact form: see how you can scare bots away from your Svelte site using a privacy focussed captcha service.

SvelteKit GraphQL Type Generation

SvelteKit GraphQL Type Generation

SvelteKit GraphQL type generation: how you can generate TypeScript types automatically from your GraphQL API endpoint using a codegen tool.

Create a SvelteKit Component Library

Create a SvelteKit Component Library

Create a SvelteKit component library: see how easy SvelteKit makes it to create your own custom component library and level up your workflow.

Using uvu for TypeScript API Testing

Using uvu for TypeScript API Testing

Using uvu for TypeScript API testing: we take a look at integrating a fast test runner into your backend continuous integration workflow.

SvelteKit GraphQL Queries

SvelteKit GraphQL Queries using fetch Only

SvelteKit GraphQL queries using fetch only: how you can drop Apollo client and urql dependencies altogether to make your Svelte app leaner.

Create Local PostgreSQL Databases

Create Local PostgreSQL Databases using Supabase CLI

Create local PostgreSQL databases quickly to speed up developing your Prisma, Express or Fastify app or API using the Supabase CLI.

Using Netlify Functions with SvelteKit

Using Rust Cloudflare Workers: Serverless hCaptcha

Using Rust Cloudflare Workers: how to run fast and secure Rust code from a Cloudflare Worker endpoint - hCaptcha serverless function example.

Tracking Page Views in SvelteKit

Tracking Page Views in SvelteKit: Intersection Observer

Tracking page views in SvelteKit: how you can add a view counter to your blog posts using the Intersection Observer API as a view trigger.

Svelte Social Icons

Svelte Social Icons: Easy SVG Logos in SvelteKit

Svelte Social Icons: use this handy package to add and customise beautiful SVG social media brand icons in your Svelte app.

SvelteKit Dynamic Image Import

SvelteKit Dynamic Image Import: Add Images to Templates

SvelteKit dynamic image import: how you can import and cache responsive images into a template on your Svelte app using vite-imagetools.

Using Netlify Functions with SvelteKit

Using Netlify Functions with SvelteKit

Using Netlify Functions with SvelteKit: learn how you can continue using your existing Netlify functions when you move your site to SvelteKit.

SvelteKit Next-Gen Background Image

SvelteKit Next-Gen Background Image

SveleKit Next-Gen Background Image: see how you can automatically generate a Next-Gen background image with a safe fallback in SvelteKit.

Loading iframes in SvelteKit

Lazy Loading iframes in SvelteKit: Ace Core Web Vitals

Lazy loading iframes in SvelteKit: we see how Core Web Vitals from Google make optimising your Svelte site important to rank.

SvelteKit Hosting

SvelteKit Hosting: Free Static Site with Render

SvelteKit Hosting: see how you can host your static SvelteKit site for free with Render taking advantage of their CDN and SSL certificates.

Add Data into Gatsby GraphQL

Add Data into Gatsby GraphQL: Webmentions Example

Add data into Gatsby GraphQL: using Webmentions as an example we see how you can pull in external data and access it via GraphQL in your app.

stylelint for SvelteKit

stylelint for SvelteKit: Keep your (S)CSS Code Consistent

Stylelint for SvelteKit: keep you Svelte code consistent and make sure your CSS and SCSS code follows your team's style guide to the letter!

SvelteKit Blog SEO

SvelteKit Blog SEO: Climb the Search Results Page

SvelteKit Blog SEO: updated template for creating a Svelte in Markdown (MDsveX) blog site with Twitter, Open Graph and SchemaOrg meta.


Fast JS Search on Gatsby

Highlight Search Results using Web APIs in Gatsby

Highlight search results: using a concrete example with a static site generator we highlight site search results to improve user experience.