Posts

Blazor Is Still the Web: Building Beautiful Menus with HTML, CSS, and C#

-
Image
When building a Blazor application, it is easy to reach for a heavy component library every single time you need something visual on the screen. Component libraries certainly have their place, but they are never a hard requirement for building clean, attractive user interfaces. Blazor lets us use the exact same HTML and CSS that power the rest of the web. We can build robust layouts with CSS Grid, arrange content cleanly with Flexbox, animate navigation panels with CSS transitions, and rely on ordinary buttons, links, and images. Then, we wire up the interactions using C#. To prove this out, I put together a small .NET 10 Blazor WebAssembly application featuring three distinct examples: A slide-out navigation menu. A custom multi-select control. A responsive restaurant menu complete with food photography. None of these examples relies on a third-party UI component library. Their visual presentation comes purely from HTML and CSS, while their application behavior is...
Post a Comment
Read more

Semantic HTML in Blazor Server

-
Image
Say what it is, not how it looks How meaningful markup makes Blazor applications more accessible, maintainable, resilient, and understandable. Blazor lets us build interactive web applications with C# and Razor components. That changes how we write application logic, but it does not change what the browser receives: HTML. That last detail matters. A polished Blazor application can look correct while still being difficult to navigate with a keyboard, confusing to assistive technology, hard for search engines to interpret, and unnecessarily complicated to maintain. Semantic HTML helps solve these problems by giving content a clear purpose. Instead of describing how an element should look, semantic HTML describes what the element is. <!-- Describes presentation through class names --> <div class="top-navigation">...</div> <div class="page-content">...</div> <!-- Describes purpose through native elements --> <nav aria-la...
Post a Comment
Read more

Picture-in-Picture in Blazor: Using Browser APIs Without Fighting Blazor Server

-
Image
When we need a new UI feature in Blazor, our default reflex is often to hunt down a NuGet package, a third-party component library, or write an elaborate C# wrapper. But modern browsers already handle many of these capabilities natively—often much better than a custom abstraction would. Picture-in-Picture (PiP) is a classic example. Whether you are floating a video feed or creating an always-on-top dashboard monitor, the browser provides direct APIs to manage these detached windows. However, wiring PiP into a Blazor Server application reveals a subtle architectural trap: browser user-activation requirements . Here is how the Picture-in-Picture APIs work, why standard Blazor @onclick handlers break them, and how to structure JavaScript interop so the browser and server cooperate cleanly. The Blazor Server SignalR Trap Most browser features that affect windowing or OS integration require transient user activation . The browser will only execute methods like video.requestPictureInPictur...
Post a Comment
Read more