Posts

Showing posts from March, 2024

Dark Theme Switcher with Bootstrap 5.3

Image
  A few years ago I posted an article on how to make a CSS theme switcher using CSS and I had a post on how to switch modes when using TailWinds.   With Bootstrap 5.3 there is a quick and easy way to change the application theme from light to dark and vice versa. You can still use the CSS method and it does give you more flexibility, but you have to do all the CSS styling yourself. In the CSS model, you would dynamically change the overall style sheet.  While with the Tailwinds solution, you had to set a dark attribute on the elements to control the theme. In Bootstrap 5.3 and beyond, you just use a new data attribute on the body element in App.razor:                <body data-bs-theme:"dark"> With Bootstrap, you have to use JavaScript to do the actual switching of the data attribute. These are the parts you have to implement to have just switch the dark mode on and off:      1. Service to handle the state if dark mode is on or off and to call the Javascript      2. Yo
Post a Comment
Read more

MLB Daily Game Notification Service

Image
  I wanted to get notified when my 2 favorite MLB teams, Diamondbacks and Braves, play each day.   I tried doing it through my AI assistance but the applications I found could only tell me about the games once I asked.   I wanted to be notified via email and/or text messages. I wanted to provide this service for friends and family as well. An additional requirement is that any service I use must be free.   I don’t want to have a monthly fee to use this service.   Process I created a data file that contains the user, phone number, and email address plus the team the user wants to be notified about. If they want email notifications, they provide an email address.   If they want a text message, they provide a phone number. File format: ID, User Name, email address, phone number, team abbreviation, time offset from est. Steps 1. Read in Users 2. Get the team information from the API 3. For each user’s team      a. Get the daily game for today      b. Build the data
Post a Comment
Read more

Custom 404 Error Page Update

Image
  In an earlier publication, I discussed the process for developing and configuring a 404 error page within the Blazor framework. Following the release of .NET 8, the methodology for redirecting to the 404 error page has undergone significant changes. Previously, under versions before .NET 8, configuring the routing for a 404 error page involved appending it within the <NotFound> element of the Router component in the router.razor file. This method is no longer applicable. New Configuration Approach The current procedure necessitates the integration of a middleware service into the application pipeline, specifically within the Program.cs file:              app.UseStatusCodePagesWithRedirects("/CustomErrorPage"); The custom error page must be established as a Razor page, incorporating the @page directive to facilitate its functionality. Upon encountering a "page not found" error, the application will redirect to the "CustomErrorPage". The creation of
Post a Comment
Read more

Blazor Tip - Upgrade Bootstrap

Image
  The current Blazor templates ship with the Bootstrap version v5.1.0, the current version is v5.3.  It may not seem like a big difference, but it is nice to get the latest version when you start a new project. You could use NPM or Nuget to upgrade your bootstrap, but there is an easier way.   We will be using the CDN link for our bootstrap.  This has several advantages that will help us. 1. Loads faster 2. Loads even faster if it is already cached in the browser. 3. Remove the download of the files from your server. 4. You can delete the old bootstrap files from your project. There are a couple of simple steps to do this upgrade. 1. Goto "https://getbootstrap.com"  2. Find the "Include via CDN" link and copy it. 3. In the Blazor app replace this line:      <link rel="stylesheet" href="bootstrap/bootstrap.min.css" /> with:      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="styles
Post a Comment
Read more

A Better Console Application in .Net Core

Image
  In the old .Net framework 4.X, building a console application was fairly straightforward.  You would simply use the console project template.  This would give you pretty much what you needed. Then came .Net core with its goal of allowing the developer to only use what they needed and to make things modular.  If you use the current Console Project template in Visual Studio 2022, you get this:           // See https://aka.ms/new-console-template for more information           Console.WriteLine("Hello, World!"); This is short and to the point, which is what, n.Net core is all about.  But what if you want to log, use app settings, or leverage dependency injection for your application?  If you want these things, you have to add them yourself.  Every similar to how the other .Net core applications are built. I have dug in and developed 9 steps you need to take to build a great console application that you can use in production.  The following are the steps defined.  While the pro
Post a Comment
Read more