Posts

Showing posts with the label Javascript

HTML Invoker Commands in Blazor

Image
  Stop Using JS for Things the Browser Already Handles Blazor makes handling UI events in C# almost effortless. Because of that, it’s tempting to default to @onclick , component state flags, conditional rendering, and JS Interop for every basic interaction. But modern HTML has caught up. The browser now handles many of the small UI toggles we used to build manually. One of the most useful recent additions to web standards is HTML Invoker Commands . Invoker Commands allow an HTML element (usually a button) to declaratively tell another element to perform an action. For example, opening a modal: HTML < button commandfor = "detailsDialog" command = "show-modal" > View Details </ button > Notice what’s missing here: No JavaScript event listeners No Blazor @onclick handlers No bool _isOpen flags tracking visibility No JS Interop calls The browser manages the interaction directly. For Blazor developers, this brings up an important architectural ques...

Vibe Coding Experiment: Building Six Projects in JavaScript and Blazor

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