Author Archives: Jeff

Introducing DayFrame: Everything I Check All Day, in One Window

Too Many Tabs

Count the things you check before lunch. For me it’s two email accounts, my calendar, a handful of GitHub repositories, Bluesky and Mastodon, some RSS feeds, the weather, and (I’m not proud of this) the stock market and the scores. That’s a browser full of tabs, three or four apps, and a phone I keep picking up to see if anything changed. Most of the time, nothing had.

I wanted ONE window that tells me what’s new before I click on anything. Something with the density of Outlook on the desktop, not a phone app stretched across a 27-inch monitor.

I also wanted it to be mine. I didn’t want another service holding my mail, another account to create, or another app quietly phoning home. If something is going to sit open on my desktop all day, it should work for me and nobody else.

It Started With a Chat Message

On July 23rd I was live on my Twitch and YouTube channels, talking about AI agents and what they could do for us, when Egil Hansen dropped a comment in chat: think about what we could have had if the Windows Phone aggregation of calendar, text, email and photos was still a thing. Here’s the moment, cued up for you:

Egil said Windows Phone. I heard live tiles. If you had a Windows Phone, you remember that Start screen: tiles that flipped over to tell you what was waiting before you ever opened an app. I made the first commit that evening.

The plan was an Outlook-style email client with a navigation pane down the left. Two days later that pane was a rail of live tiles and the email tile had an unread badge. Then I made it flip to show the newest sender. Then I noticed I was reading the tile instead of opening my email. Ok.. so the rail wasn’t navigation anymore. The rail was the product.

So What Is DayFrame?

DayFrame is a Windows desktop app. Down the left side is a rail of live tiles, one for each module. Each tile tells you what’s new: unread mail, your next meeting, the temperature outside, the market close, the score of the game. Click a tile and that module fills the rest of the window.

Live tiles show what’s new before you click

These modules are on from the first start:

Email: Gmail, or any IMAP account (Yahoo, AOL, iCloud, Posteo, Mailbox.org, Zoho or your own
server), with folders, search and a reading pane
Calendar: day, week and month views from Google or any CalDAV server
Contacts: your address book from Google or any CardDAV server
Notes: a folder of Markdown notes with links between them. Point it at your Obsidian vault and
it just works
Time: clocks for the time zones you work across
Weather: forecasts for the places you care about
RSS: your news and blog feeds, with the full article in a reading pane

And these are a click away in Settings when you want them:

GitHub: issues, pull requests and notifications for the repositories you watch
Asana: your tasks. Complete them, comment on them and reschedule them right from DayFrame
Bluesky and Mastodon: your timelines and notifications
Twitch: whether you’re live, who’s watching, your schedule, and which channels you follow are
live right now. Yes, I built this one for me, and it’s on my second monitor during every stream
Market News: quotes, charts and headlines for your watchlists
Sports: scores, schedules and news for your teams

Two more things I love. Boards let you build your own dashboard out of widgets from the other modules: your inbox next to today’s calendar next to the weather next to your open pull requests. Drag them anywhere, resize them, and pin the whole board to the rail as one wide tile. And you can pin any place to the rail: one mail folder, a single feed, a repository, a stock ticker, your favorite team. It gets its own live tile.

Make It Yours!

Here’s where I’ve had the most fun. If you’re going to spend hours a day in an app, you should enjoy looking at it, and that’s been a priority from the very first week.

The basics are all there: light and dark themes (or follow Windows), text size, zoom on each pane, one, two or three columns of tiles, and the tiles in whatever order you drag them into. You can recolor every tile at once, or give each module its own background, text color and flip speed.

But then there are the tile materials. A tile doesn’t have to be a flat square of blue. You can pick a gradient like Ocean, Sunset or Aurora, or a texture: wood grain, marble, brick, cork board, denim, chalkboard, brushed metal, carbon fiber… and then it gets silly. There are six colors of glitter and a Holographic Foil, and a glint catches the light on one of them every couple of seconds. There’s Dragon Scales. And there’s Green Slime, which drips now and then and wobbles when you click it. I regret nothing.

The same tile rail dressed up in materials: Calendar in purple glitter, Email in wood grain, Notes in dripping Green Slime, RSS in holographic foil, Time in red dragon scales, Weather in turquoise water, GitHub in carbon fiber and Sports in gold glitter

Yes, that tile is made of slime

Boards get the same treatment. Pick a ready-made style like Paper, Midnight, Forest, Mermaid, Dragon, Neon Tokyo or (for those of us who remember Windows 3.1) Hot Dog Stand. Or choose your own fonts, colors, borders and a background image of your own. There’s a Check contrast button that finds any text that would be hard to read against your background, because your board should look great AND be readable.

A board called My Day in the Dragon style, red and black scales behind widgets with red headers and ember-orange borders: a London clock, current conditions at 64°F, recent .NET Blog items, and My scores showing Dallas at Philadelphia at 8:15 PM

A board with the Dragon style applied

Your Stuff Stays Yours

This is the part I care about most:

There is no DayFrame server. The app runs on your PC and talks directly to the services you
connect. No account to create, no telemetry.
Your data stays on your computer. Your sign-ins and everything DayFrame downloads stay on
your machine.
Email and articles are sandboxed. They render in an isolated frame with scripts turned off,
and remote images (including those sneaky one-pixel trackers in marketing email) stay blocked
until you allow them for that one message.

The privacy policy lists every service each module talks to and what it sends.

A Quick Note About Google Sign-In

Google is still reviewing DayFrame. Until that’s done, Google shows an “unverified app” warning on the consent screen (choose Advanced, then Go to DayFrame) and caps the app at 100 users. If you hit that cap, you can still add Gmail as an IMAP account with an app password, and that route has no limit. Calendar and Contacts from Google need the regular sign-in, but any CalDAV or CardDAV server works too.

What’s Next?

1.0 is a starting line, not a finish line. Here’s some of what’s on my list:

Search across everything. One search box that finds that thing you know you saw somewhere,
whether it was an email, a note, a feed article or a GitHub issue.
More email. More than one Google account, a combined “All inboxes” view, and opening the
attachments people send you.
Real Windows notifications that take you straight to the message or event when you click them.
More from Boards. Pop a board out into its own window on your second monitor, switch boards
automatically by time of day, and share a board you’ve built as a pack someone else can import.
More privacy controls. A list of every request DayFrame has made, and an Offline switch that
stops all of them.
New modules. Photos from the cloud libraries you already use, a task list that ties into your
mail and calendar, and more chat and social networks.
Tablets. Yes, really. The work to get DayFrame running on Android tablets and iPads has started.

And of course, more tile materials. I have ideas. Some of them are probably bad ideas. The slime
needs to slosh around when you move the window, for one.

What gets built first is up to you, though. The feedback board at feedback.getdayframe.app is where you can suggest a module or vote on what comes next.

For My Fellow .NET Developers

DayFrame is a .NET MAUI Blazor Hybrid app on .NET 10. The window, the tile rail and the toolbar are native WinUI through MAUI, and every module’s interface is Blazor running in a BlazorWebView, with both halves sharing one dependency injection container. Did I pick Blazor after a careful bake-off? Nope. I know Blazor and I could move fast with it, and I’d make the same call again.

The one rule that made all of this possible: modules never reference each other. Every module
depends only on a shared contracts library, and an architecture test fails the build if that ever
changes. That’s why the newest module costs about as much to add as the fourth one did.

The live tile itself started as Eduardo Gomez’s MIT-licensed TileX.Maui. I’ve extended it a lot, but the tile that flips was his. Thank you, Eduardo!

I want to write more about how DayFrame is put together: the module architecture, testing a Blazor
Hybrid app with Playwright, and building most of it with an AI coding agent that works under some
very strict rules. Which one should I write first?

Get It!

DayFrame 1.0 runs on Windows 10 (version 1809 or later) and Windows 11, on x64 and ARM64.

Get DayFrame from the Microsoft Store, or search for “DayFrame” in the Store app. The Store keeps it up to date for you.

If something breaks, Application → About → Copy diagnostics puts everything I need on your
clipboard (without any of your account details) so you can paste it into a bug report.

So… what would you put on your rail? Let me know in the comments below!

Come hang out and watch the next feature get built, live on Twitch.

Adding Antivirus to .NET Aspire Systems

The idea

I stumbled on a medium article by Jeroen Verhaeghe where the ClamAV antivirus scanner was introduced in combination with the nClam library from Ryan Hoffman. Jeroen shows us how the ClamAV scanner can be run in a Docker container, and in reading that I thought – why not let .NET Aspire manage the container and its communications for us?

The Proof of Concept Code

ClamAV publishes a self-maintaining docker container that updates itself with latest malware definitions. We know that containers can be added to a .NET Aspire project, so I wrote a quick resource that shared an HttpEndpoint:

Now we’re talking! We can now reference a ClamAV container resource easily in our .NET Aspire AppHost project and pass it to our website like this:

.NET Aspire Dashboard showing the ClamAV antivirus resource

We can now scan our uploaded files with the nClam library like this:

That’s pretty easy to get started with… and there’s a lot more that we can do with this to help make our public file uploads secure by default.

Get the Code!

I’ve published my sample code, showing a Blazor application uploading files to a minimal API endpoint where ClamAV inspects the content and reports back whether malware was detected. You can find it on my GitHub at https://github.com/csharpfritz/AspireAntivirus

What do you think? Is this something that I should spend some more time wrapping and making easier to use? Create an issue on the GitHub repository if there’s something I can improve or a comment below to let me know what you think.

Seamless Navigation in .NET MAUI Hybrid Apps – My .NET MAUI Hybrid Journey (part 1)

I’ve always wanted to build a native application with all the insight and expertise that I’ve accumulated in building web applications, it’s felt like a big jump for me to get into native mobile or desktop applications. A long time ago I used to build windows forms applications for my employer, and I haven’t worked a desktop application since.

With the advent of .NET MAUI and the ability to build Blazor applications for a website and share their pages and components for use in a native application felt like a real possibility for me. I haven’t really stepped into building and working working with this application model yet… until now.

This is the first of what I expect will be a series of blog posts describing things that I’ve discovered, challenges that I’ve overcome, and features as I migrate the TagzApp application to run as a native desktop application.

Menus – Not as Easy as They Look

The first feature that I wanted to bring over was going to be the layout of the application. In TagzApp I have a very simple layout with a header menu bar with a couple of options to allow you to navigate to other areas of the application. It’s not too complex but it felt like an easy piece to migrate over to the hybrid application.

In doing some research and thinking more about how I want to represent a menubar inside of a native application it felt like it made more sense to turn this into a native menubar and not an HTML menubar that lived inside of my Blazor application. I started doing some research about how to create a menubar in .NET MAUI and found a few examples that showed how to use a tab bar to create and use multiple BlazorWebView components to represent different sections of the application. This felt clumsy to me because it meant that I would be spinning up multiple browsers to run inside of my application just to access and work with other parts of the application. I knew that that would mean more resources used by the computer when this application is running, and that felt a little irresponsible for me as a developer.

I wanted to actually have a menu bar with items that you would click and it would navigate inside of my Blazor application. Looking at the documentation for the BlazorWebView, there is no direct access to the NavigationManager or an ability to reset the location of the browser component. I set about to make the NavigationManager inside of Blazor accessible to the .NET MAUI application.

In the demos on this post, I’ll start with the default Blazor Hybrid template application and turn the vertical NavBar element into a native menu. Completed source code for this sample is available on my GitHub. I also have recorded a video where I talk through this demo:

The default experience inside a Blazor Hybrid application with .NET 8

Configuring the Shell and Menu Items

To start with, I configured the App.xaml file to have a Shell embedded directly and contain the BlazorWebView for my application. This would allow me to add a Menubar to the Shell.

<Application.MainPage>
  <Shell>
    <ShellContent>
      <ShellContent.ContentTemplate>
        <DataTemplate>
          <ContentPage>
            <BlazorWebView x:Name="blazorWebView1" HostPage="wwwroot/index.html">
              <BlazorWebView.RootComponents>
                <RootComponent Selector="#app" ComponentType="{x:Type local:Components.Routes}" />
              </BlazorWebView.RootComponents>
            </BlazorWebView>
          </ContentPage>
        </DataTemplate>
      </ShellContent.ContentTemplate>
    </ShellContent>
  </Shell>
</Application.MainPage>

I also removed the call inside App.xaml.cs to set MainPage = new MainPage(); Since we’re specifying our own MainPage inside the XAML markup, there’s no need to instantiate another page. I could run the application now, and I’d get the same user experience as the previous image.

Ok.. next steps…

Adding a MenuBar component

In .NET MAUI, the MenuBar component is added when you introduce MenubarItems. No problem, I added a MenuBarItem and 3 MenuFlyoutItems for the 3 base pages inside the default application. This code was added just inside the ContentPage element in App.xaml

<ContentPage.MenuBarItems>
  <MenuBarItem Text="Content">
    <MenuFlyoutItem Text="Home" Clicked="MenuItem_Clicked"></MenuFlyoutItem>
    <MenuFlyoutItem Text="Counter" Clicked="MenuItem_Clicked"></MenuFlyoutItem>
    <MenuFlyoutItem Text="Weather" Clicked="MenuItem_Clicked"></MenuFlyoutItem>
  </MenuBarItem>
</ContentPage.MenuBarItems>

Notice that I set each of the menu items to trigger the same event, MenuItem_Clicked All of these menu items do the same thing, but vary in the location they target. We’ll write this method in a little bit, because we need to first make the NavigationManager available

Enabling the NavigationManager in .NET MAUI

The Blazor NavigationManager isn’t directly accessible in .NET MAUI. You can’t inject it or reach into the BlazorWebView and interact with it. Instead, we need to create a service that will allow us to capture the NavigationManager and interact with it. The curious part of this is that both parts of the application model, .NET MAUI and Blazor use the same dependency injection services. So…. we can exploit this to allow our service to be injected into both Blazor AND .NET MAUI.

No problem, I can whip up a little bit of code that allows both application models to work with the Blazor NavigationManager:

public class NavigatorService
{

  internal NavigationManager NavigationManager { get; set; }

}

I can then register this NavigatorService with the service locator in .NET MAUI with this line in the MauiProgram.cs file:

builder.Services.AddSingleton<NavigatorService>();

I want this Navigator service on every page in my Blazor application, so I’ll inject it and configure the NavigationManager we’ll use inside the MainLayout.razor file:

@inherits LayoutComponentBase
@inject MauiApp1.NavigatorService NavigatorService
@inject NavigationManager NavigationManager

<div class="page">
...
</div>

@code {

  protected override void OnInitialized()
  {

    NavigatorService.NavigationManager = NavigationManager;

  }

}

Finally, I’ll add the NavigatorService to my App.xaml.cs code so that it is injected and stored as a property for use later:

public partial class App : Application
{
  public App(NavigatorService navigatorService)
  {
    InitializeComponent();
    NavigatorService = navigatorService;
  }

  internal NavigatorService NavigatorService { get; }

  private void MenuItem_Clicked(object sender, EventArgs e)
  {
  }
}

Connecting and Navigating from the MenuBar

Now, we can use a switch statement to configure the navigation of the BlazorWebView. Let’s add that switch inside the Menuitem_Clicked method:

private void MenuItem_Clicked(object sender, EventArgs e)
{

  var menuItem = (MenuItem)sender;
  var url = menuItem.Text switch
  {
    "Counter" => "/counter",
    "Weather" => "/weather",
    _ => "/"
  };
  NavigatorService.NavigationManager.NavigateTo(url);

}

Now, when we click the various items in the native MenuBar, the browser navigates appropriately.

For completeness, I removed the side navigation from the MainLayout.razor file so that the application felt more native and didn’t have 2 MenuBars.

Summary

This is just one creative way to connect our Blazor application to .NET MAUI and reuse the code we’ve already built in Blazor. The complete source code for this sample is available on my GitHub. I’m working through an entire application for TagzApp, and will share more of my findings in the weeks ahead.

Have you tried using Blazor content in .NET MAUI, WPF, or Windows Forms? What was your experience? Let me know in the comments below

From IoT to the Cloud: A .NET Ecosystem Showcase with GitHub, Raspberry Pi, and Azure

Step 0: Configure an Azure Container Registry

I already have one of these at `fritzregistry.azurecr.io`. It was easy enough to configure and deploy with credentials required to access the content. Alternatively, you can also use the GitHub package repository features and store containers there.

Step 1: Configured Docker on the Raspberry Pi

These instructions originally appeared at: https://raspberrytips.com/docker-on-raspberry-pi/

On the Raspberry Pi, I downloaded Docker with this command when running as root:

curl -sSL https://get.docker.com | sh

I then added myself to the `docker` group by running this as my standard user `jfritz`:

sudo usermod -aG docker $USER

To get connected with the Azure registry, I logged in with this command and specified the registry name, the user id and password displayed on the Access Keys panel:

Azure Portal and identifying the Access Keys for a container registry

I could then login to the registry with these credentials on my Raspberry Pi by executing

docker login

This generated a `/home/.docker/config.json` file that will be used to login to my private Azure registry.

Step 2: Configured Docker-compose

For this system, I want to use Watchtower to monitor the container registry and install updates automatically. In order to configure this with those dependencies, I needed Docker-componse. The prerequisites for Docker-Compose are installed with these commands:

sudo apt-get install libffi-dev libssl-dev
sudo apt install python3-dev
sudo apt-get install -y python3 python3-pip

I completed the installation of Docker-Compose with a pip3 install command:

sudo pip3 install docker-compose

Step 3: Configure Watchtower

Watchtower is a container that will watch other containers and gracefully update them when updates are available. I grabbed the watchtower image for ARM devices using this docker command on the Raspberry Pi:

docker pull containrrr/watchtower:armhf-latest

I built a `docker-compose.yml` file with my desired watchtower configuration:

The `command` argument instructs watchtower to check for updated images every 30 seconds, and the `restart` argument instructs the container to start at startup and always restart when the watchtower stops. More details about how to configure a Docker-compose file are available in their documentation.

Step 4 : Customize the Dockerfile to build for ARM32

The device I have for this scenario is a Raspberry Pi 3B and has an ARM32 processor. That can throw a little wrinkle into things because most systems now target ARM64 processors by default. Not a problem, because there is still support for ARM32 available and we just need to specify it in our deployment scripts.

The application that I will be running on the device is a simple ASP.NET Core application that counts the number of times the screen has been touched. In a more complete scenario, there might be a sensor connected or some kiosk screen wired up that presents information and collects data.

I wrote a Dockerfile for ARM is called `Dockerfile-ARM32` with the following content:

There’s an interesting bit in the middle where I copied in the `.git` folder. This allows my application to grab the latest git SHA hash as a bit of a version check for the source code. That SHA is made availalble on the assembly’s `AssemblyInformationalVersionAttribute` attribute value.

We can then build the container for my ASP.NET Core application to run on the Pi from my Windows workstation using this command:

docker build --platform linux/arm -f .\Fritz.DemoPi\Dockerfile-ARM32 . /
-t fritz.demopi:4 /
-t fritz.demopi:latest /
-t fritzregistry.azurecr.io/fritz.demopi:4 /
-t fritzregistry.azurecr.io/fritz.demopi:latest

and then push to my remote registry with:

docker push fritzregistry.azurecr.io/fritz.demopi -a

Step 5: Configure Docker on the Pi to run the website

By default ASP.NET Core configured port 8080 for the website inside the container. I wrote a quick `docker-compose.yml` script to run my .NET application with all of the configuration I would need:

To ensure that the SignalR bits of my demo would work, I removed a privacy extension from the Chromium browser that comes with the Raspberry Pi device.

Step 6: Configure the Pi to boot into Chromium for the website

In order to configure the Pi device to boot directly into a browser and my application running in the container, I added a file at `~/.config/lxsession/LXDE-pi` called `autostart` with this configuration:

@lxpanel --profile LXDE-pi
@pcmanfm --desktop --profile LXDE-pi
#@xscreensaver -no-splash
point-rpi
@chromium-browser --start-fullscreen --start-maximized http://localhost/

Additional options and the instructions I started with are at https://smarthomepursuits.com/open-website-on-startup-with-raspberry-pi-os/?expand_article=1 where I learned how to write this script.

Step 7: Prepare a GitHub action

I configured a GitHub action to checkout my code and build in ARM32 format with the Dockerfile established previously. This would also publish the resultant container to my Azure container registry:

Success!

Summary

As changes are made to the GitHub repository, the GitHub action will rebuild the image and deploy it to the Azure Container Registry. Watchtower identifies the update and automatically stops the existing application on the Pi and then deploys a new copy with the same settings. With a little SignalR work, the UI updates seamlessly.

Blazor and .NET 8: How I Built a Fast and Flexible Website

2 Replies

I’ve been working on a new website for my series CSharp in the Cards. I built this website in a way that was easy to maintain, flexible and most importantly would respond quickly to requests from visitors. I knew that Blazor with .NET 8 had a static server rendering feature and decided that I wanted to put it to the test. I recently published a new lesson to the website and included a web assembly component to allow for paging and filtering the list of lessons I was pleasantly surprised when I saw the performance dashboards on azure showing that it was handling requests and responding very very quickly.

Response times of C# in the Cards after the new episode

In this blog post, let’s talk about how I’ve optimized the website for speed and some of the finishing touches that you can put on your Blazor website to make it screaming fast running on a very small instance of Azure App Service.

Static Site Rendering – Its Blazor, but easier

With .NET 8 there’s a new render mode for Blazor and it’s called static site rendering or SSR. This new render mode ditches all interactivity that we previously had with Blazor server side and Blazor Web Assembly and instead favors delivering HTML and other content from the server to browsers in a high speed manner. We can bolt on other techniques that we know from SEO and website optimization to make this even faster and deliver a great experience for our visitors.

The About page is configured to output a bunch of HTML headers for the SEO folks and the social media pages to be able to present good information about the site. Notice the headers that are added to satisfy the search engines:

a canonical link element that identifies where the page should be served from
a keywords meta element with information about what you can find here
a robots element that tells the search engine crawlers what they can do with the page
open graph and Twitter meta tags that instruct Twitter, Facebook, LinkedIn, Discord, and other sites about the images, titles, and description of the page

That’s fine… but there are two other features to notice:

This is a static page with no data being presented. I’ve tagged it on line 2 with an attribute to allow output caching for 600 seconds (10 minutes). This way the web server doesn’t have to render a new copy when its requested within 10 minutes of a previous request.
The images references are in webp format. Let’s not overlook this super-compressed format for displaying high-quality images. It might be 2024, but every bit we deliver over the network still matters for performance and the 600×600 portrait picture of myself on this page was compressed nicely:

Original	Compressed	# Difference
PNG	WEBP
450kb	30kb	-93.3%

93% savings… that’s crazy good and means that your browser is not downloading an extra 420kb it doesn’t need.

Data is stored in static files on disk

For this simple website I don’t need a big fancy database like SQL Server or Postgres or even MySQL. For this site, I’ve stored all of the data in a simple CSV file on disk. That means that I can edit the list of articles that are available and the metadata that goes with them by just opening the file in Excel and writing new content. This means that when it comes time for me to read data about the list of content that’s available I’m only reading from a very small file on disk and I don’t need to worry about any kind of contention. I also don’t need to worry about any service that’s running to deliver that data because it’s only coming out of a small file on disk that’s read only.

In this repository class I use the LinqToCSV library to open and read all of the content from the file into a Post object in the first method, GetPostsFromDisk. Later, in a public method called GetPosts, you see where I use the in memory cache feature of ASP.NET Core to fetch data from the cache if its available or get it from disk and store it in cache for 30 minutes. I could probably extend this timeout to several hours or even days since the website doesn’t get any new content without uploading a new version of the site.

The key here is that the meta data about the lessons on the site is loaded and kept in memory. As of episode 9 of the series, the posts.csv file is only 1.4kb so I have no worries about loading its entire contents into memory.

Don’t forget, in order to add the MemoryCache to your ASP.NET Core application, you need to add this line to your site configuration in the Program.cs file:

builder.Services.AddMemoryCache();

I could add other cache options like Redis to the site, but with how small the data I want to cache is, I don’t need that sophistication at this point.

Pre-rendered Interactive Web Assembly Content is fast… REALLY fast

I wanted to add a subset of the lessons to the front page of the website so that you could see the latest six episodes in the video series and scroll back and forth to the other episodes. This should be an interactive component but I still wanted the home page to render quickly and have a fresh speedy response time as you page through and look at the various episodes that are available. The natural way to do this with Blazor is to build a web assembly component that will run on the client and render data as users click on the buttons for that collection of articles.

I wrote a simple pager component that would receive a collection of lesson data and render cards for each lesson. Since we already know that the collection of lesson data is less than 2kb in size I don’t have a problem sending the entire collection of data into the browser to be rendered.

When I use the @rendermode attribute in this code, it forces the render mode to web assembly and ASP.NET will pre-render as well as cache a version of that component’s resultant HTML with the home page. After viewers download the Web Assembly content it will hand control over to web assembly and it will be a fully interactive component for them to be able to work with.

Lesson Pager on the C# in the Cards website

Blazor lets me build content to be rendered on the web and I get to choose where exactly it should run. It can run in the browser with web assembly it can run statically on the server it can run interactively on the server if I want it to. In this case running as web assembly gives a really nice usability effect that makes it easy for viewers to locate the content they want to watch.

Compress the Content from Kestrel

By default content that’s delivered from the ASP.NET kestrel web server is uncompressed. We can add brotli compression to the Web server and deliver content in a much smaller package to our visitors with just a few simple lines of code in program.cs. This is something that I think everybody should do with their Internet facing websites:

#if (!DEBUG)
builder.Services.AddResponseCompression(options =>
{
options.EnableForHttps = true;
});
#endif

Add response compression configures the server so that it will deliver broadly compressed content. In this application I wrap it with the conditional debug detection because hot reload does not work with compression enabled. When we deliver the website to the production web host it will be running in release mode and compression will be enabled.

Optimize all the JavaScript and CSS

CSS AND JavaScript can be minified and combined to reduce the number and size of downloads for this static content that makes our websites look good. For this website I installed and used the WebOptimizer package available on NuGet. My configuration for this looks like the following:

This script bundles the CSS files that were delivered with my website template and minifies the one JavaScript file that I manage with my project.

Set long cache-control headers for static content

The last thing that I did was set long duration cash dash control headers for static content like images CSS and Javascript files. This is easy to do with just a few more lines of optional configuration when I configure the static file feature inside of ASP.NET Core:

Summary

This website’s been easy for me to build because I can rely on my normal HTML skills and the plethora of HTML templates and CSS libraries out there to make my website look good. Blazor helps me to make it interactive render quickly and grow as I add more content to it. my cost in interaction with azure is minimal, as I’m using a Basic-2 instance of Azure App Service running Linux to deliver this site.