Coding With David

  Vibe Coding 101 TL;DR: Vibe coding isn’t just about “letting AI code for you.” It’s a new rhythm of building — intuitive, conversational, and fast. Three YouTube videos by Tina Huang and others break it down beautifully: from fundamentals to mindset to a full app build. 💡 What Is Vibe Coding? Vibe Coding is a modern approach to software development where you collaborate with AI tools to create applications through iterative, conversational prompting — rather than writing every line yourself. It’s not “no-code.” It’s “less manual, more guided, more iterative.” You describe what you want. AI builds it. You refine. Repeat. Instead of rigid specifications and long dev cycles, vibe coding prioritizes responsiveness, flow, and intuition. The feedback loop is short — you see results immediately, adjust quickly, and let the design and logic co-evolve. To demonstrate this: Start with a simple PRD (Product Requirements Document) and evolve it through multiple small iter...

  AI-assisted coding has taken the software world by storm. You’ve probably already experimented with tools like Copilot, Claude, or Cursor. Maybe you’ve even tried “vibe coding” — typing vague prompts and letting the AI fill in the gaps. But as these tools evolve, so must our approach. The future isn’t just vibe coding. It’s Prompt Driven Development (PDD) — a structured, intentional way to guide AI coding assistants. Let’s walk through what that shift looks like, why it matters, and how you can start practicing it today. From Vibe Coding to Prompt-Driven Development 1. Vibe Coding At first, AI-assisted coding felt like magic. You typed a few words or half a thought, and the AI tried to complete it. Sometimes it nailed it, other times it wandered. Strengths: Fast experiments, fun discovery. Weaknesses: Inconsistent results, lack of repeatability, and hard to debug later. Think of it like jamming on a guitar: it’s creative, but messy. 2. Prompt Coding The next step forwar...

AI Generated by ChatGPT  With all the buzz around AI-driven development, it’s easy to think that productivity gains only come from smart tools, Copilot prompts, or automated code generation. But the truth is, some of the simplest wins still come from leveraging native HTML elements that Blazor fully supports. These underused tags can save time, improve accessibility, and create richer user experiences—without a single line of JavaScript or third-party library. Let’s walk through some overlooked gems and see how they help Blazor developers ship faster and smarter. <mark> : Highlight Text Like a Pro The <mark> tag highlights text with a yellow background by default. In a Blazor app, this is perfect for search results, field validations, or dynamic emphasis . For example, in a search component, you could wrap matching terms in <mark> to instantly improve clarity without custom CSS. <details> : Create Collapsible Sections The <details> and <summary...

  Image Generated by ChatGPT For years, developers working with JavaScript frameworks like React and Next.js have been able to lean on AI tools like Copilot, Claude, or Cursor to rapidly spin up applications. In those ecosystems, “vibe coding” – letting the AI take a prompt and generate a surprisingly functional application – is a real and tangible experience. But what about Blazor? Could you vibe code in a .NET environment where structure, conventions, and configuration matter far more than in lightweight JavaScript apps? The short answer: yes, you can. It’s not the same as working in Cursor with React, where you can drop in a one-liner prompt and have a complete working skeleton in minutes. With Blazor, you can absolutely use AI to accelerate your workflow – but you need to do some of the setup yourself. Once you’ve got that foundation, Copilot becomes a surprisingly capable “junior developer” that saves hours of coding and testing time. Let’s walk through exactly what I ...

  AI Generated I’ve been curious about what it would feel like to “vibe code” — to spin up small projects quickly with AI assistance and see how different stacks handle it. So I decided to set up a challenge for myself: build six mini projects twice, once in JavaScript/HTML/CSS and once in Blazor/C# . I wasn’t aiming to declare a winner, just to see where each stack shines, where it struggles, and how AI fits into the process. The surprising part? The whole experiment only took hours, not days. The Six Projects 1. Hangman JavaScript/HTML/CSS: Worked on the first try, with a functional UI and smooth gameplay. Blazor: The first attempt had errors and a poor UI. After converting the JavaScript version with ChatGPT and debugging with Copilot, it compiled and ran, though the UI still needed work. Screenshot: JavaScript Hangman (clean UI) Screenshot: Blazor Hangman (after fixes) 2. Blur Landing Page JavaScript/HTML/CSS: Ran perfectly on the first try, with a polishe...

  Why Is It So Hard to Find "Just One" Blazor Component? Blazor is a fantastic framework. It lets C# developers build interactive web UIs without touching a single line of JavaScript. But as the framework matures, a common frustration is bubbling to the surface: the state of its UI component libraries. While there are many powerful options available, they often present a frustrating, all-or-nothing dilemma. Why can't you just grab a single, well-made component without buying into an entire ecosystem? Your observation is spot on. Unlike the React world, where developers can easily find and install individual components—from a simple tooltip to a complex data grid—the Blazor landscape feels different. It's an issue of walled gardens. The "All-or-Nothing" Problem Most major Blazor UI libraries, both paid and free, are built as comprehensive suites. They provide dozens of components, from buttons and inputs to charts and schedulers. This is great if you're s...