Coding With David

NOTE: This applies to .Net 6.0 Only   I have continued to keep an eye out for a quick and easy database access layer database for use with my test projects and my blog projects.  I thought I had found one with SupaBase, but I quickly ran into limitations with the free version.  Mainly the number of databases you can have (2).  So I am back with another find. I will be trying the free tier of the Azure Cosmos database.  Microsoft announced a free version of Cosmos about a month ago.  Then with .Net 6, they added support for EntityFramework and Cosmos DB. The free tier does have some limitations of course: 1. Only 1 free tier DB per subscription 2. Upto 1000 RUs 3. Upto 25 containers.  All the containers pull from the same 1000 RUs 4. No free tier for serverless  Any free DB system will have limitations, these seem acceptable thus far. Project to build We will be building a simple sample application that will just add records to the cosmos DB. ...

 I like using step wizards in my applications, sign-up forms, shopping cart checkout, and complex data entry, but I had not been able to find a wizard step indicator that I liked so I built this one. As it turned out, it was not as hard as I thought it would have been.  There are a couple of key parts you have to keep in mind when using a step wizard, such as: 1. What step am I on? 2. Should the "Prev" / "Next" buttons be enabled or disabled on this step? 3. What kind of visual clues do I show the user? I will walk you through how we answer these questions in this sample project.   HTML The main container has a div that holds the progress divs, one div for each "step" of your process.  Below that we have our "Prev" and "Next" buttons We will need to wire in the on-click events for the two buttons.  The buttons will need to be able to be disabled and enabled via CSS class settings.           <div class="container">   ...

  I came across a fun application that provides a list of current movies, provides an overview of the movie, allows the user to search for a title, and shows a color-coded rating from IMDB.  I thought it would be cool to build in Blazor.  I was right it was cool to build. HTML The HTML contains a container div that has a header and main section.   The header is for the search component.  The main section contains a for loop that spins through a collection of movies and builds out the data.  It has an image element, a div that holds an H3 for the movie title, and a span for the IMDB rating. That's pretty much all you need. CSS The CSS is just as straightforward.  We set the background color,  set the location and sizing of the "movie card" and the movie "data". We use a transformation on the movie card so when the user hovers over the movie image we see the data details.  This is a nice visual effect. The one extra styling we do is to col...

  This is a pretty cool trick if you like using placeholder text but don't like that the "text" goes away once the user starts to type.  What this does is simply moves the "placeholder" text up to a label when the input gets focus.  The cool part is it will move the "placeholder" text back once the input loses focus if there is no data in the input.  We are using actual text not the placeholder attribute.  This provides it with a cute but functional visual effect.  See live demo HTML The HTML is just s normal log-in form.  There is a form container, a form, and 2 form controls.  Both inputs are required and the password element is of type password so it will mask the input values.  Each input element also has a label that is used to let the user know the input needed. CSS Most of the CSS is to just set the layout and make it look nice.  The CSS trick we are using is to have a couple of classes to handle the moving of the text,  "foc...

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

  I was working on a project the other day and I came across a need to fake/mock an IConfigutration object. Tried MOQ I started with MOQ.  This is always quick and easy to use.  I have used this in the past but this time I needed to change the values within the configuration.  Which is totally possible but the more I dig into how to do that the more of a pain it became. Since I am lazy, I figured there has to be a better way. Simpler Method I quickly discovered, there was an easier way.  There is a class in .Net called ConfigurationBuilder.  With this class, you can easily create an in-memory configuration collection with whatever settings you want. 1. Create a dictionary of values                var inMemorySettings = new Dictionary<string, string>()             {                 { "Location", "TestLocation"}         ...

 I came across an article that said you can actually style the file upload button, so I decided to apply styling to my new File upload project. As it turns out, this is quite easy:      input[type=file]::file-selector-button {          border: 2px solid #6c5ce7;          padding: .2em .4em;          border-radius: .2em;          background-color: #a29bfe;          transition: 1s;      }      input[type=file]::file-selector-button:hover {          background-color: #81ecec;          border: 2px solid #00cec9;      } As you can see you just use the input[type=file] CSS selector to select the upload button.  Once you have the element selected, just like any other HTML element, you apply your styling. [source]

  With the release of .Net 5.0, a new Blazor file upload component was released.  I wanted to replace my old file upload component that I published way back in Oct of 2019, post  with the new 5.0 one. This post is working with the Blazor Server side, but this will work with Web Assembly except you will need a server API to do the actual file upload. Changes I started by updating my Blazor project to /net 5.0.  That part was easy.  My next step was to replace the component.  As it turned out, my old component was named the same as the new one:           <InputFile OnChange="@HandleSelection" /> For the selection handler, I had to make a couple of changes.  The changes were 1. Switched the agreement from IFileListEntry to InputfileChangeEventArg 2. The collection of files that were selected changed from FileListEntry to IBrowserFile.   Working with IBrowser file object does change the information that we have...