Posts

Showing posts from 2025

🦇 Building Drag & Drop in Blazor — Villain Edition

Image
  Blazor WebAssembly lets .NET developers build rich, interactive web apps entirely in C# . To showcase its power, I built a fun demo where users can drag and drop “villains” between containers and reorder them in a list — all without a single line of JavaScript. 🎯 What You’ll See This app demonstrates two kinds of drag-and-drop experiences: Container Drag & Drop — Move items between “Available Villains” and “Active Threats.” List Reordering — Reorder items by dragging them up or down. Each shows how Blazor manages state, events, and dynamic UI updates in real time. 🧩 Project Setup Tech stack: Blazor WebAssembly (.NET 9) C# 13 Bootstrap 5 for responsive UI HTML5 drag & drop API No JavaScript required! Key components: Home.razor – Container-based drag and drop VillainList.razor – Single-list reordering Villain.cs – Data model Scoped CSS for component-level styling ⚙️ Blazor Event Handling Blazor supports native HTML5 drag events ...

The Invisible Path of Vibe Coding: Why Infrastructure Must Come Before the Fun Stuff

Image
  If you’ve ever vibe-coded your way through an app — riding that creative high as AI generates your UI in real time — you know the rush. Buttons appear, data binds instantly, the app feels alive . It’s addictive. But here’s the uncomfortable truth: most developers who embrace vibe coding (AI-assisted, flow-state, rapid-prototype development) fall into the same trap. They build what looks like a complete application — beautiful, interactive, even feature-rich — only to discover when it’s time to deploy that the invisible path has been completely neglected. And that’s when reality hits. The Illusion of Progress Vibe coding thrives on visible feedback. You type a prompt or tweak a line, and the screen responds instantly. You see results, get dopamine, and keep going. The problem? What you see is not what you’ll deploy. Under the hood, your app might be missing: Logging Monitoring Error handling Configuration management Authentication and authorization Envir...

Vibe Coding: The Future of AI-Assisted Software Development

Image
  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...

Prompt Driven Development: Moving Beyond Vibe Coding

Image
  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...

Beyond AI: Why HTML Elements Still Boost Productivity in Blazor

Image
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...

Yes, Virginia, You Are Able to Vibe Code in Blazor

Image
  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 ...