My videos
Optimering af NextJS-applikationen ved hjælp af Cline og Sonnet 3.7
Jeg har en forkærlighed for at bruge AI-værktøjer til at hjælpe mig med at refaktorere kode, og i denne video viser jeg, hvordan jeg bruger Cline i VS Code med Sonnet 3.7 til at optimere en NextJS-applikation. Videoen starter med en udfordring, jeg ofte møder: en side i min NextJS-app var blevet en smule rodet med useClient og al logik samlet i én komponent. For at skabe en bedre arkitektur beder jeg Cline om at refaktorere koden, så den følger best practices for React server components og client components. I projektet har jeg defineret nogle design rules, som AI'en er blevet trænet til at følge. En af de vigtige regler er at implementere det rette skeleton loading pattern, hvor: 1) Siden bruger en Suspense-komponent 2) Indeholder et elegant skeleton layout 3) Loader data korrekt 4) Bruger klienten til at rendere det faktiske indhold Det mest imponerende er, hvordan Cline automatisk genererer skeletons, der faktisk ligner datastrukturen i det endelige komponent uden at jeg behøver at specificere detaljerne. Den bryder koden ned i mere vedligeholdelsesvenlige dele: en page-komponent der wrapper en Suspense, og derunder forskellige komponenter der håndterer data loading og visning. For at kunne se skeletons i aktion under udvikling, tilføjer jeg et lille delay på 5 sekunder til data loaderen - selvfølgelig kun i udviklingsmiljøet. Dette giver mig mulighed for at vurdere brugeroplevelsen under loading. Det er fascinerende at se, hvordan AI-værktøjer nu kan hjælpe med at implementere komplekse arkitekturmønstre, der tidligere ville kræve meget manuel kodning og omtanke. Det viser virkelig styrken ved "vibe coding" tilgangen, hvor AI assisterer med at implementere best practices, mens jeg kan fokusere på det større billede.
Vibe Coding: Leveraging Visual Context for Efficient Code Updates
In this quick tutorial, I demonstrate the power of "vibe coding" - using screen captures to communicate design intent to AI coding assistants. Watch as I transform a locale selection UI by sharing both a text prompt and a screenshot of the current interface. My goal was to create a collapsible locale selector that only expands when needed, saving valuable screen space. While the AI initially struggled with a syntax error, I show how human intervention at the right moment can keep development flowing smoothly. See how combining visual context with text prompts creates a more intuitive development experience, resulting in cleaner code and a more user-friendly interface - all with minimal effort! #VibeCoding #AIAssistants #UIDesign #DeveloperTips