Latest posts

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

• Function Components vs React.FC in TypeScript: Eine sachliche DiskussionVerstehen der Entwicklung der TypeScript-Typisierung in React-Komponenten
• Einen Boid bauen: Tiefenbewusste Flocking-Animation in ReactFlüssige, parallax-unterstützte Vogelsimulationen erschaffen, die lebendig wirken
• Füttere das Biest: Ein Entwicklerleitfaden zur Datenvorbereitung und Mega-Prompting für KI-CodeassistentenDenn selbst die cleverste KI braucht eine gut gefüllte Brotdose
• Jenseits von Next.js: Der Stand der Full-Stack-JavaScript-Frameworks im Jahr 2025Ein umfassender Blick auf moderne Full-Stack-JavaScript-Frameworks
• 80/20 Engineering: Wie ich meine Website an einem Wochenende neu aufgebaut habeDie Kraft der Planung vor dem Coden
• Erstellung einer Tiefenbewussten Boids-Animation in ReactGrazil im Schwarm (mit Parallax-Effekt!)
• Civet, eine funktional orientierte Programmiersprache als Superset von TypeScriptEine Auseinandersetzung mit den Syntax-Erweiterungen von Civet und seinem Integrationsökosystem, um seine echten Vorteile und potenziellen Herausforderungen zu bewerten
• Wie ich flaming.codes von Next.js auf Qwik migriert habeMeine zweitägige Erfahrung der Migration von flaming.codes von Next.js auf Qwik und Qwik City
• Windows 95 und seine Relevanz in der ComputergeschichteWas Windows 95 festlegte, ist bis heute gültig
• Denken Sie an alles mit Rewind.ai: Verwenden Sie es für die ArbeitWie Rewind.ai Ihnen helfen kann, sich an Dinge zu erinnern, die Sie bereits vergessen haben
• Arc-Browser für Webentwicklung und -verwaltungWie die UX des Arc-Browsers den Workflow für Entwickler verbessert
• Hintergrundgeräusche in iOS und macOSSo verwenden Sie Hintergrundgeräusche, um unter iOS und macOS eine beruhigende Umgebung zu schaffen
• Barrel-Dateien in JavaScriptDie Vor- und Nachteile der Verwendung von Barrel-Dateien in JavaScript
• Github Copilot LabsEine experimentelle Erweiterung zur Verbesserung von Github Copilot
• PWA-Screenshot-VorschauSo zeigen Sie Screenshots in der Installationsaufforderung Ihrer PWA an
• Paketunabhängige Skripte mit Node.jsSo vereinfachen Sie das Ausführen von Skripten in NPM, Yarn und PNPM
• Der 'erfüllt'-Operator in TypeScriptÜberprüfen Sie, ob der Typ eines Ausdrucks mit einem Typ übereinstimmt, ohne den resultierenden Typ dieses Ausdrucks zu ändern
• Leitfaden für Anfänger in Node.js und NPMSo starten Sie mit Node.js und dem Node Package Manager
• Steuern Sie externe Monitore unter WindowsSo verwenden Sie eine kostenlose App, um die Helligkeit für alle Monitore zu steuern
• Die vielen Unterschiede zwischen Unix und LinuxWie sich zwei der beliebtesten Betriebssysteme voneinander unterscheiden.
• Eine einfache Einführung in TypescriptEine kurze Einführung in einige Konzepte von Typescript
• Das Symbol in JavascriptLernen Sie Symbole kennen: Der eindeutige Datentyp für Objekteigenschaften
• DOM TreeWalker-APIDie TreeWalker-API: Ein leistungsstarkes Tool zum Durchlaufen des DOM-Baums.
• Bessere Dokumentation in TS & JSSo schreiben Sie bessere Dokumente in Javascript mit umfangreichen Metadaten
• Typen für die Tailwind-CSS-KonfigurationVerwendung von Typescript-Typen für Tailwind-CSS
• Dunkler Modus für Github Markdown-BilderSo verwenden Sie verschiedene Bilder in Markdown für den hellen oder dunklen Modus
• So bestimmen Sie das Betriebssystem im BrowserVerwenden Sie moderne APIs, um Informationen über das Hostsystem Ihrer Webanwendung abzurufen
• Starten Sie einen bestimmten iOS- oder iPadOS-SimulatorSo verwenden Sie das Terminal, um einen installierten Simulator auszuwählen und zu starten
• Neue AnsichtsfenstergrößenWie svh, lvh und dvh Ihr responsives Design verbessern können
• MSW im SvelteKitSo implementieren Sie MSW für die lokale Entwicklung in SvelteKit
• Gitpod-IDE in der CloudKurzlebige Arbeitsbereiche, alles in der Cloud
• Lizenzgenerator in SvelteKitErstellen Sie eine Liste der Abhängigkeiten für Ihr SvelteKit-Projekt
• Faule Lademodule in SvelteSo importieren Sie Ihre Komponente bei Bedarf
• Benutzerdefinierter lib-Ordner in SvelteKitSo erstellen Sie einen Pfadalias in SvelteKit
• AfterDark-Bildschirmschoner für macOSSo installieren Sie einen der besten Bildschirmschoner aller Zeiten
• Richten Sie HMR für SvelteKit mit Gitpod einSo verwenden Sie Hot Module Reload mit SvelteKit und Gitpod
• Bündeln Sie Schriftarten in Ihrer Web-AppWie Fontsource Schriftarten bereitstellt, die mit Ihrer App ausgeliefert werden
• Generieren Sie SVG aus Google FontsSo verwenden Sie eine Web-App, um beliebigen Text in SVG umzuwandeln
• Leichte Alternative zu AxiosVerwenden von Redaxios anstelle von Axios als kleine Alternative
• Code Reviews: So verbessern Sie Ihre FähigkeitenWarum Code-Reviews das mächtigste Werkzeug sind, um ein besserer Entwickler zu werden
• Raycast für macOSEin vielseitiges Tool zur Steuerung einer Vielzahl gängiger Aufgaben
• Github-CodesucheSo verwenden Sie die Fuzzy-Suche von Github für Ihre Repositorys
• Steuern Sie die Helligkeit auf externen macOS-DisplaysSo verwenden Sie die App MonitorControl zum Ändern der Bildschirmhelligkeit
• 'CSS-Übersicht' in den DevTools von ChromiumSo analysieren Sie Ihr CSS mit DevTools
• Typoskript-Vorlagen-String-Typen als DiskriminantenVerbesserte Vorlagenliteraltypen mit Typescript 4.5
• Integrierte Node.js-Module ladenEine etwas spezielle Import-Syntax für eingebaute Module
• Codieren in VRWarum Quest 2 (und mehr) von Meta ein Meilenstein in der virtuellen Realität ist
• Entfernen Sie ignorierte Dateien in gitEin Befehl zum Entfernen ignorierter Dateien, die eingecheckt sind
• Fehler in Promise.all abfangenEine sichere Alternative zu Javascripts Promise.all
• Das leistungsstärkste SSH-TerminalSo verwenden Sie VS Code als Ihr tägliches SSH-Terminal
• Arbeiten mit Github CopilotWie eine KI Ihre Codierungsgeschwindigkeit drastisch verbessern kann
• Github-BefehlspaletteSo suchen Sie nach Repositorys und schnellen Aktionen auf Github
• UX-Fallstudie einer Blog-Post-SeiteWie ich die Artikelseite für diese Web-App gestaltet habe
• Was ist der „Navigator“ in progressiven Web-Apps?Wie der 'Navigator' eine schrittweise Verbesserung Ihrer Web-Apps ermöglicht
• Einfache animierte analoge Uhr in Tailwind.cssSo erstellen Sie eine sehr einfache analoge Uhr mit Animation nur in Tailwind.css
• UX-Fallstudie einer Portfolio-SeiteDie Gedanken, die das Design meiner persönlichen Portfolio-Seite beeinflusst haben
• UX-Fallstudie einer ÜbersichtsseiteWie ich die Übersichtsseite für alle Post-Kategorien gestaltet habe
• Spezielle Netzwerkfunktion für Analysedaten im BrowserSo verwenden Sie 'sendBeacon', um kleine Datenblöcke zuverlässig zu übertragen
• Schreiben eines xbar-Plugins für Plausible.ioWie ich ein JS-Plugin für die xbar-App geschrieben habe, um die aktuelle Besucherzahl zu sehen
• React.js-PortalDie Magie des Renderns von Elementen außerhalb des eigenen DOM-Baums
• iPhone-Bildschirmfreigabe auf dem MacSo zeigen Sie Ihren iOS-Bildschirm auf Ihrem Mac an
• Next.js NPM-LizenzgeneratorSo erstellen Sie Lizenzen aus Ihrem package.json
• Gestapelte Updates reagierenSo kombinieren Sie Statusaktualisierungen in einem einzigen Renderaufruf
• Netzwerkinformations-API für PWAsSo ermitteln Sie echte Netzwerkdaten in Ihrer Web-App
• DaisyUI - Tailwind-KomponentenDas Bootstrap-Äquivalent für Tailwind-Dienstprogrammklassen
• JSXDas Javascript XML-Synax
• Eine PWA namens DevToolsDer beste Freund eines Entwicklers ist eigentlich eine Progressive Web App, direkt in Chromium
• Supabase - Backend als ServiceEine echte Open-Source-Alternative zu Firebase
• Inkrementelles Android-FSWie ein virtuelles Dateisystem in Android viel schnellere Spielstarts ermöglicht
• Github-Benutzer pro ProjektumfangSo verwenden Sie einen anderen Github-Benutzer für verschiedene Projekte
• SEO ohne Google Analytics?Können Sie die Spitzenplätze bei Google erreichen, ohne dass Analytics aktiviert ist?
• Node.js-Fehler mit KontextSo fügen Sie in V8 9.3 und höher eine Fehlerursache zu Würfen hinzu
• Android Studio auf Ubuntu mit NVMSo richten Sie NVM unter Ubuntu richtig ein, um mit Android Studio zu arbeiten
• ES6-Import mit ParameternSo übergeben Sie Parameter beim Importieren an ein ES6-Modul
• Fix für Webkits 100vh in TailwindSo beheben Sie das 100vh-Verhalten in Tailwind
• Ersetzen Sie Material-UI durch Tailwind.cssFallstudie zum Ersetzen von Material-UI durch Tailwind.css
• Template-Strings mit Typoskript-TagsSo verwenden Sie Vorlagenzeichenfolgen als Funktionen
• Cloudflare-MitarbeiterSchnelle serverlose Funktionen, gehostet von Cloudflares CDN
• AndroidEnvEine Schnittstelle für Reinforcement Learning für den Zugriff auf das Android-Betriebssystem
• Chrome & Edge DevTools-BefehlsmenüSo navigieren Sie durch die DevTools wie ein Power-User
• Next.js-config mit TypprüfungSo verwenden Sie die Typprüfung für Ihre next.config.js
• Android-LeistungsklasseWie jede Android-Version ihr Leistungsniveau definiert
• Fortgeschrittenes try/catch/finally in Javascript und TypescriptWerfen Sie einen detaillierten Blick auf die Implementierung eines Try-Catch-Finally-Blocks
• Typoskript-TupeltypenSo geben Sie Tupel in Typescript 4.2 und höher am besten ein
• Was ist AuthN und AuthZEine einfache Anleitung zum Unterschied zwischen Autorisierung und Authentifizierung
• Eigenschaften der Typescript-PrivatklasseTypescript unterstützt private Eigenschaften für Klassen
• Typoskript-Vorlagen-String-TypenSo grenzen Sie String-Typen mit dem Template-String-Mechanismus ein
• API für Web-App-LogosSo verwenden Sie ein Badge für Ihre installierte PWA
• Google ZX - Shell-Skripte mit JavascriptSo schreiben Sie Shell-Skripte mit Javascript und Node.js
• Typoskript-Pipeline-BetreiberVerkettete Funktionsaufrufe in Typescript schreiben
• Codespaces von GithubIDE als Service, verfügbar in Ihrem Browser
• Firestore-DatenpaketeEine neue Implementierung für zwischengespeicherte Firestore-Dokumente
• Websperren-APIKoordinieren Sie die Arbeit und den Einsatz von Ressourcen zwischen verschiedenen Prozessen
• Android-Emulator auf Apple M1So verwenden Sie den Emulator für Android auf Apple Silicon-Geräten
• PWA im Microsoft App StoreSo veröffentlichen Sie Ihre PWA im Microsoft App Store
• Mediensitzungs-APIBereitstellung von Media-Metadaten und Callbacks in Ihrer PWA
• Mikrodaten für die WebsemantikSo erweitern Sie Ihre Seiten mit mehr semantischen Informationen
• Miller-SäulenEin großartiges Layoutkonzept, das die Benutzeroberfläche für Dateisysteme verändert hat
• PlasmaEin WYSIWYG-Web-App-Builder
• Cypress Component Test RunnerKomponententests von Komponenten für React
• Wenn Ihre PWA zu sprechen beginntVerwenden von WaveNet zum Hinzufügen von Sprachsynthese für Artikel
• Aufgeladener Github-MarkdownSehen Sie, wie vielseitig der Markdown von Github sein kann
• Was ist ein UI-Muster?Ein Blick auf einen neuen Aspekt im UI-Design
• Digitale MorphogeneseDas interdisziplinäre Feld der natürlichen Muster in der digitalen Berechnung
• Vertrauenswürdige WebaktivitätenSo validieren Sie Ihre Web-App – und erstellen daraus eine Android-App
• Grundlegende AufmerksamkeitsmarkeEin neues Umsatzmodell für das Web
• Wie ich 12 Sprachen gelernt habe - in einer NachtMit den neuesten Erkenntnissen aus dem maschinellen Lernen und cleverem Caching
• Webfreigabe-APISo verwenden Sie die native Share-API des Webs
• Öffnung ≠ ÖffnungFormen, Chancen und Nachteile von Open Science
• AC600 unter UbuntuSo installieren Sie die AC600-Treiber von Netgear unter Ubuntu
• Firebase Functions-DomainSo verwenden Sie eine benutzerdefinierte Domain für Firebase Functions
• Was ist XaaS?Alles als Service und mehr
• PWA-Vibrations-APILassen Sie uns den Navigator verwenden, um Ihr Gerät zu schütteln
• UX-Studie: in Zwischenablage kopierenSo entwerfen Sie eine Aktion zum Kopieren in die Zwischenablage in Ihrem UX
• Mobiles Webkit 100vh reparierenvDie Handhabung von 100vh durch das mobile Webkit erfordert möglicherweise mehr Aufmerksamkeit
• Umzug in eine neue WohnungSo ziehen Sie in eine neue Wohnung, wenn Sie bis zu 12 Stunden am Tag arbeiten
• IntelliJ für Apple M1Die komplette IntelliJ-Suite ist für Apples M-Prozessoren verfügbar
• Leiter Remote WorkSo halten Sie alle und alles synchron
• Bereitstellung von RSSDiese PWA bietet einen RSS-Feed
• Die Disney-MethodeKreativer sein, indem man systematischer vorgeht
• Privacy-First-AnalyticsWie Sie Ihre Benutzer respektieren und trotzdem die Leistung überwachen
• Kickscale-PlanerDie Gmail-Erweiterung, um automatisch kostenlose Meetings zu finden
• Durchdachte CodierungWarum Codierung mehr ist als das Aneinanderreihen von Symbolen
• Feuercode mit mirEs ist Zeit, Code in Brand zu setzen!