Coding With David

  This provides a cool look that can be used for displaying products, pictures, or a wide range of items to your users. For our sample, we will be using images, set the background image.  It makes a nice demo. HTML It turns out this is effect fairly easy to implement.  You have a container and a DIV for each card that you want.      <div class="container">          <div class="panel">              <h3>Explore The World</h3>          </div>          <div class="panel">              <h3>Wild Forest</h3>          </div>          <div class="panel">              <h3>Sunny Beach</h3>          </div>          ...

  I was working on a project and wanted an original way of showing the user the application was loading besides using the normal "Loading...." text.  I came across a website page and thought I could refactor that into what I was looking for. When my application starts, it displays a full-screen image with a count down while the page loads.  As a special effect, I want to unblur the image the closer it gets to the applicaiton finishing loading.  Once the teh count down is done, we pause for 1 sec, for effect, then proceed to the application.  I think it turned out pretty cool.  See the demo here . I used the server side Blazor project template in my example, but the code should work on any Blazor template. Template changes 1. Rename the original Index.razor page to "home".  Besure to change the routing at the top of the page as well.      @page "/home" 2. Create a new Index.razor page     a. Add routing      ...

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

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

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

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

  I came across an article about HTML lightboxes.  I did a quick search and I could not find a lightbox control for Blazor.  So I decided to create one.  As it turns out, the Blazor part was educational. For those not familiar with what a Lightbox control is.  It is a control that displays images and videos by filling the screen and dimming out the rest of the web page. HTML and CSS Doing a quick search I found a lightbox on Codepen source.  The HTML consists of a couple of anchor tags.     <!-- thumbnail image wrapped in a link -->     <a href="#img1">       <img src="https://picsum.photos/seed/9/500/300">     </a>     <!-- lightbox container hidden with CSS -->     <a href="#" class="lightbox" id="img1">       <span style="background-image: url('https://picsum.photos/seed/9/900/450')"></span>     </a> The CSS cons...