Tailwind Typography in vanilla-extract
Learn how you can replicate Tailwind CSS Typography styles in vanilla-extract
Lennart Jörgens - Software Engineer
Lennart is a product-focused full stack engineer with years of experience in building large-scale projects and shipping high-quality work to millions of users. Adept at building delightful, inclusive, and well-documented solutions to customers' needs.
Latest posts
Using Nginx Proxy Manager on Unraid
Learn how I use Nginx Proxy Manager (NPM) on Unraid to access all my services with a custom domain instead of their IP address
How to Add llms.txt to Docusaurus
Generate llms.txt files for your Docusaurus documentation
Obsidian Travel Planning
How I plan my travels inside Obsidian, showcasing templates and bases.
How to Turn Any List Into Google My Maps
Learn how AI can assist in turning unstructured lists into functional Google My Maps files.
From MDX to Interactive Sandboxes with remark-sandpack
Learn how remark-sandpack transforms simple code blocks in MDX into interactive Sandpack playgrounds. No manual JSX required for live code examples.
Modern CSS with SvelteKit & PostCSS
Discover how to use postcss-preset-env with SvelteKit to write cutting-edge CSS today while maintaining compatibility across all browsers.
Replacing ls with eza
How to use eza, the modern maintained alternative for ls. It's a fork of exa with better features, bug fixes, and improved defaults for file listing in your terminal.
tsdown: Excluding Files From the Build
Learn how to exclude test files and unwanted files from your tsdown build output using negative glob patterns. Keep your dist folder clean and production-ready.
How I Use Home Assistant on Unraid
A collection of notes and thoughts for running Home Assistant on Unraid. Learn about installation with HomeAssistant_inabox, USB passthrough, and essential add-ons.
My Unraid Settings
An overview of the Unraid settings I chose while setting up my first server. Learn about disk settings, Docker configuration, and network setup for optimal performance.
Fuzzy Search for Your Git Repository
Use the power of fzf-git to fuzzy search files, branches, tags, commits, and more inside your Git repository from your terminal with beautiful previews.
How to Write Unit Tests for Valibot
Learn how to use Valibot's parse and safeParse functions to unit test your Valibot schemas with Vitest. Test both successful validation and error handling.
How to Send Notifications From Duplicati to Discord
Learn how to send notifications for your Duplicati backups to Discord through webhooks. Set up a Cloudflare worker to proxy Duplicati's HTTP notifications to Discord.
Essential Unraid Apps
Apps that I will always install when setting up a new Unraid server. From backup tools to performance tweaks and monitoring apps to keep your server running smoothly.
My First Unraid Server
My journey from a Synology NAS to building my first Unraid server, detailing my initial hardware and software choices.
How to Use MDX Shortcodes in Astro
Make MDX components automatically available in MDX files without importing them each time. Pass custom components to the Content renderer in Astro pages.
How to Test CLI Output in Jest & Vitest
Guide on how to assert the logs and exitCode of your CLI program when using Jest & Vitest. Create custom matchers and invoke helpers for clean test assertions.
How to Use Vale With MDX
Learn how you can configure Vale to lint your MDX files. Install Vale as an npm package and configure it to properly parse MDX syntax in your documentation.
tsup: Excluding Files From the Build
A short explainer on how you can exclude test files and other unwanted files from your tsup build output using negative glob patterns in the entry field.
Creating a Spacer Component
How to create a Spacer component in plain React, Chakra UI, and vanilla-extract to manage spacing without using margins on individual elements.
Publishing a Rust CLI on npm
Learn how you can publish your CLI written in Rust on npm through napi-rs. Make your Rust tools accessible to Node.js developers without extra toolchains.
5 Reasons Why You Should Hire Me
From maintaining Gatsby to mastering technical writing, here are 5 compelling reasons why you should hire me for your next React or open-source project.
Effortless Web Scraping With Cloudflare Workers
Do you need up-to-date information from a website that doesn't have an API? You can use a web scraper powered by Cloudflare Workers to get your data.
Using Duplicati for Your Backups
Duplicati is a free and open-source backup software that enables you to securely and regularly backup your data to any destination you could imagine. It's my preferred backup tool and you should use it, too.
How to Turn TypeScript Enums Into String Literal Types
Do you need to turn TypeScript enums into string literal types, e.g. for public facing types? Then you can use template literal types to achieve that.
How to Write Theme-Aware Styles With vanilla-extract
Learn how to use a utility function to author conditional tokens in vanilla-extract. You can use these theme-aware styles both in selectors or in globalStyle.
Writing Performant CSS With vanilla-extract
Learn how to build a Tailwind UI component from scratch by writing performant and type-safe CSS with vanilla-extract. The component will support multiple variants and themes.
Generating READMEs From Gatsby's pluginOptionsSchema
Tired of manually writing and updating READMEs for Gatsby plugins? You can automatically generate the plugin's API/options section from the pluginOptionsSchema API.
My Favourite Hiking Apps
An overview of my favourite hiking apps for the Alps. Learn about Bergfex for trip planning, WorkOutDoors for tracking on Apple Watch, and PhotoPills for photography.
Creating a Figma Plugin With Svelte
Learn how to use Svelte, TypeScript, and Rollup to create a lean & fast Figma Plugin. You'll access the Unsplash API to fetch a random image.
Testing Gatsby's Head API With Vitest & Playwright
Learn how to use Gatsby's Head API with Vitest & Playwright the right way. You'll have unit tested and E2E tested your components in no time.
Cleaning Up Stale Branches
Showcase of the handy CLI tool called git-removed-branches. It automatically detects and removes local branches that have been deleted from the remote repository.
Replacing ls with exa
ls is a file-listing command that ships with Unix and Linux. exa is an improved file lister with better defaults, git integration, and colors. Here's how to use it.
Using Package Exports to Define Multiple Entrypoints
Ever run into the error 'Module parse failed' while working on an ESM package? Learn how to use the 'exports' field in 'package.json'.
Using Deferred Static Generation With Analytics Tools
Only want to build out the most popular pages as static pages? No problem, you can use your analytics tool to control the usage of Deferred Static Generation in Gatsby.
How to Add Plausible Analytics to Gatsby
Learn how to add Plausible Analytics to your Gatsby site. Also read how to add TypeScript types for Plausible and 404 page tracking.
How to Build an Advanced Multipart Component With Chakra UI
Chakra UI has a powerful theming system that includes component styles. Learn how to create a custom made container component that supports light/dark mode, variants, sizes, and color schemes.
Running Cypress Tests With GitHub Actions in Parallel
Explanation on how you can run multiple Cypress tests in parallel using GitHub actions. You'll use the matrix feature and don't need to use Cypress Cloud.
Smooth Shadows for Images Using Their Dominant Color
Neumorphism and other current websites really like super smooth shadows for its elements. Learn how to generate smooth shadows from the dominant color of an image (powered by Gatsby).
Generating QR Codes From Any String in Gatsby
QR codes were dead, right? But with Covid they are everywhere again. Learn how to generate QR codes from your Gatsby GraphQL data and add it to the schema.
Python: Comprehensions
Comprehensions are probably the feature I currently love most about Python coming from JavaScript. Writing concise code for a common thing: Iterating over a list.
Python: Data Types
A short showcase of Python's data types and interesting differences I discovered coming from JavaScript. Explore numbers, strings, lists, and helpful functions.
What is a Digital Garden?
What even is a Digital Garden? For me it's a collection of free form, interconnected & evolving ideas that grow over time — just like plants in a real garden.
Introducing the Theme UI Plugin for Figma
The Theme UI plugin for Figma allows for a workflow where Theme UI is the starting point both for design & development.
Adding Line Numbers and Code Highlighting to MDX
Explore how to add line numbers and specific line highlighting to your existing code blocks in MDX. You'll be using some properties that prism-react-renderer gives you already.
Filter Future Posts on a Gatsby Blog
Learn how to add a 'TODAY' variable to your Gatsby GraphQL schema so that you can filter out any elements that are in the future. This is really helpful when you want to write things in advance but don't want to publish it just yet.
Adding Support for Multiple Authors in Gatsby
Ever wanted to display multiple authors to a blog post in Gatsby? Learn how to link author data from YAML files to your posts and display their information.
Creating Your Own Status Dashboard With Gatsby
You probably know the status dashboards that bigger companies have, right? Well, you can build your own for your Netlify deployments & CircleCI runs with gatsby-theme-status-dashboard!
Adding a Draft Feature to Gatsby
Learn how to use Gatsby's schema customization feature to add default values to your GraphQL schema. Through this you'll add a draft feature to your posts to hide work-in-progress content.