Coding With David

  This is a cute little application that will allow the user to click a button and play a sound in a Blazor application. How it works We started with the 6 sounds, see image.  We added those mp3 files to our web application so we can access them from the application. We generated a list of the names of the sounds we will be supporting:     List<string> sounds = new List<string>()     {         "applause", "boo", "gasp", "tada", "victory", "wrong"     }; HTML Tags For this application we will need an audio tag for each sound and a button for each sound:     <audio id="boo" src="/sounds/boo.mp3"></audio> For the button:         <button type="button"              Boo          </button> Normally we would have 6 each of these tags, but with Blazor we can do a couple of for loops, We'll need a method to build the path for the mp3 file.      @foreach (var s in sounds)

  Here is another fun Blazor project to try.  You take an image, an animated gif works best, and divide it up into 16 boxes.  You give the boxes a 3d look.  You add a button that switches between the nine boxes and a single box.  View it live here , it looks pretty cool. Implementation There are a couple of Blazor coding items that we have to be able to do.   1.  Add on click event handler 2. Use inline logic to set a style 3. Use a method call to set a style The Click Handler For the button that starts, and switches between views, we need a click event handler.  We have done this many times before, so it is very straightforward: <button id="btn" class="magic" @onclick="ShowBoxesInDisplay">Magic 🎩</button> What is cool about this, is including the image for the button right in the source code. Inline Logic to set a style For the container of the image, we need to add a style called big if we want the 16 boxes, we need to remove the style.  All

  I have been looking for a cheap (free) database or database as a service solution I can use for my learning and sample projects.  I had looked at Azure, AWS, MySQL, Cosmos, Firebase, Goole Sheets, flat files, and many others.  After all that research, I could not find anything I liked.  Until now. I have found Supabase !!! They are marketing Supabase as an alternative to Firebase, but it is not as feature-rich as it needs to be to complete with Firebase, but it has more than enough features right now for me to be very excited about it.    From their Github : " How it works Supabase is a combination of open-source tools. We’re building the features of Firebase using enterprise-grade, open-source products. If the tools and communities exist, with an MIT, Apache 2, or equivalent open license, we will use and support that tool. If the tool doesn't exist, we build and open-source it ourselves. Supabase is not a 1-to-1 mapping of Firebase. Our aim is to give developers a Firebase-

  I found another small control I wanted to include in my UI component library.  It is a banner control that you can place on the top of a page.  The banner can be used to alert the user to take action, to let the user know about a system issue, or even to use ads. On the initial page load, we display the banner with its messaging.  We provide a close button to allow the user to dismiss, as shown in the image above. HTML and CSS The HTML is just a couple of divs and some text.          <div class="banner">          <div class="banner__content">            <div class="banner__text">              <strong>Reminder:</strong> Coding with David is fun and exciting            </div>            <button class="banner__close" type="button">              <span class="material-icons">                close              </span>            </button>          </div>        <