Rodney Lab
I'm Rodney. I create tutorials to help you learn Svelte, SvelteKit and cutting edge tech to build fast, accessible web apps.
Take a look at the latest tutorials and Rodney Lab blog posts.
🧑🏽🎓 Tutorials
- Astro Server-Side Rendering: Edge Search Site: A tutorial on Astro Server-side Rendering: getting started with Astro SSR building a productivity search app with Vitest and Edge geolocation data. Open the Astro Server-Side Rendering: Edge Search Site tutorial.
- Svelte eCommerce Site: SvelteKit Snipcart Storefront: A tutorial on Svelte eCommerce site: how to build a fast, SEO friendly, static eCommerce site using Svelte, Snipcart and Directus. Open the Svelte eCommerce Site: SvelteKit Snipcart Storefront tutorial.
- Get Started with SvelteKit Headless WordPress: A tutorial on Get started with SvelteKit headless WordPress: build an SEO optimized static content site with Svelte speed and Yoast SEO expertise. Open the Get Started with SvelteKit Headless WordPress tutorial.
- Svelte Video Blog: Vlog with Mux and SvelteKit: A tutorial on Svelte Video Blog: SvelteKit tutorial on hosting a fast vlog using Mux Video API in SvelteKit. Includes lazy loading, SEO & web vitals. Open the Svelte Video Blog: Vlog with Mux and SvelteKit tutorial.
- Starting out Svelte and SvelteKit: Beginners’ Tutorial: A tutorial on Starting out Svelte and SvelteKit: build a practical design tool app in this tutorial as you start the journey from beginner to pro Svelte. Open the Starting out Svelte and SvelteKit: Beginners’ Tutorial tutorial.
📱 Get in touch
- Twitter: @askRodney.
- Element Matrix: Jump into the #rodney chat room.
- LinkedIn: ask-rodney.
🧑🏽 News
Sign up for the Newsletter to keep in touch.
- Rodney Lab Newsletter — August 2023: A tutorial on ☑️ SvelteKit form mistakes, 🏖️ lazygit efficient Terminal User Interface for Git and 🦀 Leptos Rust-based web framework. Rodney Lab Newsletter — August 2023 issue.
- Rodney Lab Newsletter — July 2023: A tutorial on 🔎 Modern site search tooling, using 🦀 Rust in your SvelteKit projects and Telescope Vim productivity super powers. Rodney Lab Newsletter — July 2023 issue.
- Rodney Lab Newsletter — June 2023: A tutorial on 🍋 Deno Fresh and Svelte updates, 🧙🏽 SVG sprite optimization wizardry, 📧 NeoMutt text-based user interface email client. Rodney Lab Newsletter — June 2023 issue.
🔩 Projects
- 🔥 sveltekit-blog-mdx — SvelteKit starter blog using MDsveX
- 🤖 sveltekit-seo — example code for setting up SEO on a SvelteKit blog
- 🌤 astro-blog-markdown — Astro Markdown Blog starter
- 🚀 astro — example and demo code from Rodney Lab Astro articles including StackBlitz links
- ☁️ serverless-rust — example and demo code from Rodney Lab Serverless Rust articles
💙 Support Me
You can support me and buy me a coffee, if you are able to.
⌨️ Latest Blog Posts
- SvelteKit Form Example with 10 Mistakes to Avoid 🛟: SvelteKit form example 📝 code to get a contact form working with SvelteKit actions, and 10 tips to avoid common pitfalls 🍀 Read the full article on SvelteKit Form Example with 10 Mistakes to Avoid 🛟.
- Deno Get Client IP Address: Remote User IP 🫱🏾🫲🏼: Get Deno client IP address 🫱🏾🫲🏼 how to get a remote user IP address for 🤖 spam bot detection from your Deno serverless backend or API. Read the full article on Deno Get Client IP Address: Remote User IP 🫱🏾🫲🏼.
- Deno Fresh SVG Sprites: Optimized Icons 🔥: Deno Fresh SVG Sprites 🦿 how you can add an optimized SVG sprite sheet with cache-busting to your Fresh site, reducing bytes shipped. Read the full article on Deno Fresh SVG Sprites: Optimized Icons 🔥.
- Deno Fresh Testing: End-to-end Site Tests ☑️: Deno Fresh Testing ☑️ how you can add end-to-end testing for HTML pages content and API routes to your Deno 🍋 Fresh app. Read the full article on Deno Fresh Testing: End-to-end Site Tests ☑️.
- SvelteKit Session Cookies: going HttpOnly: SvelteKit session cookies: accessing user-specific data in your SvelteKit app use session and HttpOnly cookies for added security. Read the full article on SvelteKit Session Cookies: going HttpOnly.
- Upstash as SvelteKit Real-time Game Database 💿: Upstash as SvelteKit Real-time Game Database 💿 how you can add a serverless database to a multiplayer ♟️ game built with Svelte. Read the full article on Upstash as SvelteKit Real-time Game Database 💿.
- SvelteKit Fontaine: Reduce Custom Font CLS ✍🏽: SvelteKit Fontaine ✍🏽 how to eliminate or reduce font swap cumulative layout shift working with custom, self-hosted fonts in ❤️ SvelteKit. Read the full article on SvelteKit Fontaine: Reduce Custom Font CLS ✍🏽.
- Rust Cloudflare Worker Logging 📋: Rust Cloudflare Worker Logging 🌤️ a quick look at how you can log locally in a dev environment, and in the production using Logtail 📝 Read the full article on Rust Cloudflare Worker Logging 📋.
- Rust Cloudflare Workers: Turnstile Example 🤖: Rust Cloudflare workers ☁️ Turnstile Captcha example of using serverless 🦀 Rust WASM with wrangler on the Cloudflare worker platform. Read the full article on Rust Cloudflare Workers: Turnstile Example 🤖.
- Getting Started with Rust Cloudflare Workers: Getting started with Rust Cloudflare Workers: how you can build your first serverless Rust app including REST requests and sending email. Read the full article on Getting Started with Rust Cloudflare Workers.
- SvelteKit PostCSS Tutorial: use Future CSS Today: SvelteKit PostCSS tutorial 💅 how you can use custom media queries, nesting rules and other 🥏 future CSS features from today. Read the full article on SvelteKit PostCSS Tutorial: use Future CSS Today.
- Svelte Real-time Multiplayer Game: User Presence 🙋🏽: Svelte real-time multiplayer game 👋🏽 see who is online by adding presence or awareness to improve multi-user game 🧑🏽 user experience. Read the full article on Svelte Real-time Multiplayer Game: User Presence 🙋🏽.
- Svelte Login Form Example: Best Practices ✅: Svelte login form example 📝 signup and login forms for your Svelte app with password strength meter 🔐 and strong password auto generation. Read the full article on Svelte Login Form Example: Best Practices ✅.
- Astro PostCSS Example: Future CSS Today 💅: Astro PostCSS Example 💅 how you can add PostCSS to your Astro site and access future CSS features like 📐 custom media queries. Read the full article on Astro PostCSS Example: Future CSS Today 💅.
- Astro Font Fallbacks with Capsize: reduce CLS 📏: Astro Font Fallbacks ☄️ how you can use Capsize to reduce layout shift from font swapping when optimizing your site for 🧑🏽 user experience. Read the full article on Astro Font Fallbacks with Capsize: reduce CLS 📏.
- Astro JS Middleware Example: Request Logging 📝: Astro JS Middleware Example 📝 how you can intercept HTTP requests for logging, modifying content and from your 🚀 Astro JS project code. Read the full article on Astro JS Middleware Example: Request Logging 📝.
- 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. Read the full article on Create a SvelteKit Component Library.
- SvelteKit Ably: Sqvuably Real-Time Game ♟️: SvelteKit Ably: introduction to using Svelte with Ably and building a real-time ♟️ game or instant 💬 chat with serverless WebSockets. Read the full article on SvelteKit Ably: Sqvuably Real-Time Game ♟️.
- SvelteKit Forms: Grammar Check App 📝: SvelteKit forms ❤️ use SvelteKit endpoint APIs to build a spelling, punctuation & grammar check app, with client and server form handling 📝 Read the full article on SvelteKit Forms: Grammar Check App 📝.
- Deno Stylelint: Lint Deno Fresh CSS 🛁: Deno Stylelint 🛁 lint CSS styles in your 🍋 Deno Fresh project using custom or recommended rules and the Deno file and system APIs. Read the full article on Deno Stylelint: Lint Deno Fresh CSS 🛁.
- Deno Fresh Responsive Images: Resize API 🖼️: Deno Fresh Responsive Images 🖼️ how you can use unpic with Deno Fresh to self-host your images with an Imgix compatible resizing API. Read the full article on Deno Fresh Responsive Images: Resize API 🖼️.
- Deno Fresh PostCSS: Future CSS with Deno 💅: Deno Fresh PostCSS 💅 how to use vanilla CSS with 🍋 Deno Fresh and add CSS minification tooling or polyfill future CSS like media ranges. Read the full article on Deno Fresh PostCSS: Future CSS with Deno 💅.
- Deno Fresh HTML lang Attribute: Fresh a11y 🤗: Deno Fresh HTML lang attribute 🍋 how you can set the lang attribute used by screen readers and improve your Fresh site accessibility 🤗 Read the full article on Deno Fresh HTML lang Attribute: Fresh a11y 🤗.
- Matrix Message Relay Bot: API with Deno & Rust 🦀️: Matrix Message Relay Bot 📢 how you can create a serverless API to relay messages to your Matrix chat room using Deno and 🦀 Rust WASM. Read the full article on Matrix Message Relay Bot: API with Deno & Rust 🦀️.
- Creating Whisper Video Captions: OpenAI VTT ✍🏽: Creating Whisper video captions 📺 how you can generate video transcription files for free locally with OpenAI trained transcription 🤖 tech. Read the full article on Creating Whisper Video Captions: OpenAI VTT ✍🏽.
- Astro QR Code Generator: with Svelte Actions 🦸🏽: Astro QR Code Generator 📲 how you create an Astro SSR app for generating QR Codes for free with ❤️ Svelte Actions. Read the full article on Astro QR Code Generator: with Svelte Actions 🦸🏽.
- Astro Cookies API: Cookies on HTTP Requests 🍪: Astro Cookies API 🍪 how you can set and get cookies, passing data between client and server on your 🚀 Astro SSR site. Read the full article on Astro Cookies API: Cookies on HTTP Requests 🍪.
- Astro Comment Form: with Turnstile & Prerender 🚀: Astro Comment Form 🚀 how you can add a comment form to your static Astro app using Hybrid Rendering and a Cloudflare Turnstile Captcha 🤖. Read the full article on Astro Comment Form: with Turnstile & Prerender 🚀.
- Deno Fresh RSS Feed: own your Content 📜: Deno Fresh RSS Feed 📜 how you can set up a resource route in Deno Fresh to serve your XML RSS feed with caching on Markdown blog. Read the full article on Deno Fresh RSS Feed: own your Content 📜.
- Deno Fresh Getting Started: Islands, APIs & Testing 🏝️: Deno Fresh Getting Started 🦕 in this second part of the getting started with Deno Fresh series, we look at Islands of interactivity & testing. Read the full article on Deno Fresh Getting Started: Islands, APIs & Testing 🏝️.
- Deno Fresh WASM: Code Modules in Rust 🦀: Deno Fresh WASM: how you can code your own WASM modules in Rust 🦀 and easily integrate them into your Deno Fresh 🍋 project. Read the full article on Deno Fresh WASM: Code Modules in Rust 🦀.
- Deno Fresh Middleware: HTTP Security Headers 🔐: Deno Fresh Middleware 🔐 how you can add HTTP security headers to your site and score an A on security scans hassle free. Read the full article on Deno Fresh Middleware: HTTP Security Headers 🔐.