Latest posts

flaming.codes hosts technical articles and tutorials by Tom Schönmann, with a focus on Full Stack development and Generative AI.

• Building a Boid: Depth-Aware Flocking Animation in ReactCreating fluid, parallax-enabled bird simulations that feel alive
• Feeding the Beast: A Developer's Guide to Data Prep and Mega-Prompting for AI Code AssistantsBecause even the smartest AI needs a well-packed lunchbox
• Beyond Next.js: The State of Full-Stack JavaScript Frameworks in 2025A Comprehensive Look at Modern Full-Stack JavaScript Frameworks
• 80/20 Engineering: How I Rebuilt My Site in a WeekendThe Power of Planning Before Coding
• Creating a Depth-Aware Boids Animation in ReactFlocking with Style (and Parallax!)
• Civet, a functional programming oriented language as superset of TypescriptDelving into Civet's syntax enhancements and integration ecosystem to evaluate its real advantages and potential challenges
• How I migrated flaming.codes from Next.js to QwikMy two-week journey of migrating flaming.codes from Next.js to Qwik and Qwik City
• Windows 95 and its relevance in computer historyWhat fatures Windows 95 established that are still valid today
• Remember everything with Rewind.ai: using it for workHow Rewind.ai can help you remember things you already forgot
• Arc Browser for Web Development & ManagementHow the Arc Browser's UX improves the workflow for developers
• Background sounds in iOS and macOSHow to Use Background Sounds to Create a Calming Environment on iOS and macOS
• Barrel files in JavaScriptThe Benefits and Disadvantages of Using Barrel Files in JavaScript
• Github Copilot LabsAn experimental extension to enhance Github Copilot
• PWA Screenshot PreviewsHow to show screenshots in your PWA's installation prompt
• Package-agnostic scripts with Node.jsHow to simplify running scripts in NPM, Yarn and PNPM
• The 'satisfies'-operator in TypeScriptValidate that the type of an expression matches some type, without changing the resulting type of that expression
• Guide for beginners into Node.js and NPMHow to start with Node.js and the Node Package Manager
• Control external monitors on WindowsHow to use a free app to control the brightness for all monitors
• The Many Differences Between Unix and LinuxHow two of the most popular operating systems differ from each other.
• A simple introduction to TypescriptA brief introduction to some concepts of Typescript
• The Symbol in JavascriptGet to Know Symbols: The Unique Data Type for Object Properties
• DOM TreeWalker APIThe TreeWalker API: A powerful tool for traversing the DOM tree.
• Better documentation in TS & JSHow to write better docs in Javascript with rich metadata
• Types for Tailwind-CSS configHow to use Typescript types for Tailwind-CSS
• Dark mode for Github Markdown imagesHow to use different images in Markdown for light or dark mode
• How to determine OS in browserUse modern APIs to retrieve information about the host system of your web app
• Start a specific iOS or iPadOS simulatorHow to use the Terminal to select and launch any installed simulator
• New viewport sizesHow svh, lvh and dvh can improve your responsive design
• MSW in SvelteKitHow to implement MSW for local development in SvelteKit
• Gitpod IDE in the cloudEphemeral workspaces, it's all-ops in the cloud
• License generator in SvelteKitCreate a list of dependencies for you SvelteKit-project
• Lazy loading modules in SvelteHow to import your component on demand
• Custom lib-folder in SvelteKitHow to create a path alias in SvelteKit
• AfterDark Screensaver for macOSHow to install one of the best screensavers ever
• Setup HMR for SvelteKit with GitpodHow to use Hot Module Reload with SvelteKit and Gitpod
• Bundle Fonts in your web appHow Fontsource provides fonts to ship with your app
• Generate SVG from Google FontsHow to use a web app to transform any text to SVG
• Lightweigt alternative to AxiosUsing Redaxios instead of Axios as a small alternative
• Code Reviews: How to level up your skillsWhy code reviews are the most powerful tool to become a better developer
• Raycast for macOSA versatile tool control a huge set of common tasks
• Github Code SearchHow to use Github's fuzzy-search for your repositories
• Control brightness on macOS external displaysHow to use app called MonitorControl for screen brightness changes
• 'CSS Overview' in Chromium's DevToolsHow to analyze your CSS with DevTools
• Typescript Template String Types as DiscriminantsImproved template literal types with Typescript 4.5
• Load Node.js builtin modulesA slightly special import-syntax for builtin modules
• Coding in VRWhy the Quest 2 (and more) from Meta is a milestone in virtual reality
• Remove ignored files in gitOne command to use for removing ignored files that are checked-in
• Catch errors in Promise.allA safe alternative to Javascript's Promise.all
• The most powerful SSH-terminalHow to use VS Code as your daily SSH-terminal
• Working with Github CopilotHow an AI can improve your coding speed drastically
• Github Command PaletteHow to search for repositories and quick actions on Github
• UX case study of a blog post pageHow I designed the article page for this web app
• What is the 'navigator' in progressive web apps?How the 'navigator' enables progressively enhancing your web apps
• Simple animated analog clock in Tailwind.cssHow to create a very simple analog clock with animation only in Tailwind.css
• UX case study of a portfolio pageThe thoughts that influenced the design of my personal portfolio page
• UX case study of an overview pageHow I designed the overview page for all post-categories
• Special network function for analytics data in browserHow to use 'sendBeacon' to reliably transmit small data chunks
• Writing an xbar plugin for Plausible.ioHow I wrote a JS-plugin for the xbar-app to see the current number of visitors
• React.js PortalThe magic of rendering elements outside the own DOM-tree
• iPhone screen sharing on MacHow to show your iOS screen on your Mac
• Next.js NPM license generatorHow to create licenses from your package.json
• React Batched UpdatesHow to combine state updates in a single render call
• Network Information API for PWAsHow to determine real network data in your web app
• DaisyUI - Tailwind componentsThe Bootstrap equivalent for Tailwind utility classes
• JSXThe Javascript XML sytnax
• A PWA called DevToolsA developer's best friend is actually a Progressive Web App, right in Chromium
• Supabase - Backend as a serviceA truly open source alternative to Firebase
• Android Incremental FSHow a virtual file system in Android allows for much faster game starts
• Github user per project scopeHow to use a different Github-user for different projects
• SEO without Google Analytics?Can you reach Google's top ranks without Analytics enabled?
• Node.js error with contextHow to add an error cause to throws in V8 9.3 and later
• Android Studio on Ubuntu with NVMHow to correctly setup up NVM on Ubuntu to work with Android Studio
• ES6 import with parametersHow to pass parameters to an ES6 module when importing it
• Fix for Webkit's 100vh in TailwindHow to fix the 100vh behavior in Tailwind
• Replace Material-UI with Tailwind.cssCase study about replacing Material-UI with Tailwind.css
• Typescript Tagged Template StringsHow to use template strings as functions
• Cloudflare WorkersFast serverless functions hosted by Cloudflare's CDN
• AndroidEnvAn interface for Reinforcement Learning to access the Android OS
• Chrome & Edge DevTools Command MenuHow to navigate the DevTools like a power user
• Next.js-config with type checkingHow to use type checking for your next.config.js
• Android Performance ClassHow each Android version defines its level of performance
• Advanced try/catch/finally in Javascript and TypescriptTake a detailed look at the implementation of a try-catch-finally-block
• Typescript Tuple TypesHow to best type tuples in Typescript 4.2 and later
• What is AuthN and AuthZA simple guide about the difference between Authorization and Authentication
• Typescript Private Class PropertiesTypescript supports private properties for classes
• Typescript Template String TypesHow to narrow down string types using the template string mechanism
• Web App Badging APIHow use a badge for your installed PWA
• Google ZX - shell scripts with JavascriptHow to write shell-scripts with Javascript and Node.js
• Typescript Pipeline OperatorWrite chained function calls in Typescript
• Codespaces by GithubIDE as a service, available in your browser
• Firestore Data BundlesA new implementation for cached Firestore documents
• Web Locks APICoordinate work and the use of resources among different processes
• Android Emulator on Apple M1How to use the Emulator for Android on Apple Silicon devices
• PWA in Microsoft App StoreHow to publish your PWA in the Microsoft App Store
• Media Session APIProviding media meta data and callbacks in your PWA
• Microdata for web semanticHow to enhance your pages with more semantic information
• Miller ColumnsA great layout concept that changed the UI for filesystems
• PlasmicA WYSIWYG web app builder
• Cypress Component Test RunnerBuilding unit component tests for React
• When your PWA starts to speakUsing WaveNet to add speech synthesis for articles
• Supercharged Github MarkdownSee how versatile Github's Markdown can be
• What is a UI pattern?Taking a look at a new aspect in UI design
• Digital morphogenesisThe interdisciplinary field of natural patterns in digital computation
• Trusted Web ActivityHow to validate your web app - and create an Android app from it
• Basic Attention TokenA new revenue model for the web
• How I learned 12 languages - in one nightUsing the latest from machine learning and some clever caching
• Web Share APIHow use the web's native share-API
• Opening ≠ openingForms, opportunities and disadvantages of open science
• AC600 on UbuntuHow to install Netgear's AC600 drivers on Ubuntu
• Firebase Functions domain How to use a custom domain for Firebase Functions
• What's XaaS?It's everything as a service, and more
• PWA vibration APILet's use the navigator to shake your device
• UX study: copy to clipboardHow to design a copy-to-clipboard action in your UX
• Fix mobile webkit 100vhMobile Webkit's handling of 100vh might need more attention
• Moving to a new flatHow to move to a new flat when you're working up to 12 hours a day
• IntelliJ for Apple M1The complete IntelliJ-suite is available for Apple's M-processors
• Head of Remote WorkHow to keep everyone and everything in sync
• Providing RSSThis PWA provides an RSS feed
• The Disney MethodHow to be more creative by being more systematic
• Privacy-First AnalyticsHow to respect your users and still monitor performance
• Kickscale SchedulerThe Gmail-extension to automatically find free meetings
• Thoughtful CodingWhy coding is more than the stringing together of symbols
• Fire Code With MeIt's time to set some code on fire!