Posts

Showing posts from 2022

Git Actions with Blazor

Image
I have had “Learn Git Actions” on my to-do list for quite some time. I attended some virtual conferences about Git Actions. After the last publishing issue, I had an Azure Publish Error, and I figured it was time to invest the time to learn it. I first looked at Azure Dev-Ops, I have used it for a while. I review the cost and features available. There is a free tier, with limitations but it is very feature-rich. What I was looking for was a quick and effortless way to build a CI/CD, Continuous Integration / Continuous Delivery, system for my Blog projects. Azure Dev Ops seemed overkilled for this since I am already using Jira for project management. Jira has a free trier as well that is more than enough to manage my Blog and side projects. I did about a 30-minute research on Git Actions, and I was hooked. I was so surprised at how easily Microsoft has made it. I have used Git Actions before, Static Web Site Deployment. It was easy there as well. This post is going to cover a Server-Sid

Blazor with Google Analytics

Image
This is not a post about how to use Google analytics. There are hundreds of books and thousands of articles on that subject. I am going to explain my experience of implementing Google analytics into a Blazor Server application and a Blazor Web Assembly application. The applications are remarkably similar, but there are slight differences that I will point out. I have implemented Google analytics with HTML/CSS/JavaScript applications in the past. It is straight forward implementation; you place a script on your pages to trigger the events you are interested in tracking. On the main page of the application, you add a script and your Google key to associate the events to your account. Since a Blazor application is a SPA, Single Page Application, it is a little more involved to set the trigger points in order to log the analytics. Lucky for use there is a NuGet package that will help us with the heavy lifting. NuGet Package The package is Blazor-Analytics. It is popular. It adds a componen

Publish to Azure Error

Image
  I recently ran in to an issue I have not seen before. I was trying to publish to Azure App Services from my local Visual Studio 2022 and it failed with an error of:      " Error 706 Web deployment task failed. (Could not connect to the remote computer ("xxx.scm.azurewebsites.net") using the specified process ("Web Management Service") because the server did not respond. Make sure that the process ("Web Management Service") is started on the remote computer. Learn more at:http://go.microsoft.com/fwlink/?LinkId=221672#ERROR_COULD_NOT_CONNECT_TO_REMOTESVC.)" It took me a couple of hours to troubleshoot and resolve this issue. This post is to document what I did to fix the error so next time I run into this error; I have documentation on how to resolve it. Process Followed I have always published my blog post sample code to Azure App Services from my local machine for a number of years. I think this might have been the first time using Visu

Jump to the top of a web page

Image
While I am surfing the web for research, fun or even work, I keep an eye out for cool looking UI elements. I recently found one that is so simple, yet so useful. I was on a site, like most sites these days, which had an exceedingly long home page. I am so accustomed to these long pages that I just scroll to the top without thinking about it. This web site had a non-assuming icon at the lower right in the footer. There was no label or tooltip to explain what it was for. They might want to change that part, but it is fun to find these hidden treats. When you clicked the icon, it jumped the page back up to the top of the page, nice and smooth. I thought it was cool. I kept going to the bottom and clicking on it.   How did they do it? When I looked at the code, I was surprised at how simple it was:       onclick=`window.scrollTo({top:0, behavior:`smooth`})` That was it! My next thought was, can I do this in Blazor?   Blazor Implementation Good news, sort of, it works th

Jumped feet first with Blazor and TailwindCss

Image
   I watched an incredibly good presentation by Chris Sanity on using Tailwindcss with Blazor. Chris had it look so quick and easy. I was so impressed that I decided right then I had to learn how to use it. This post is about the experience that I went through to learn Tailwindcss and whether I still think it is worth the effort. Spoiler Alert:   It is very worth it.   So, to show that I could use Tailwindcss on a real application, I took the standard Blazor Server template and created an application. There are three pages, Index, Counter, and Fetch Data. I then removed all references to Bootstrap. I wanted to start with just the HTML code. I have broken this post out into "Lessons Learned", "Pros and Cons" and "Style changes I made between Bootstrap and Tailwindcss.    Lessons Learned If you do not understand native CSS, you should not use Tailwindcss. Since Tailwindcss is a set of utility classes, you must understand the underly

The Bestest Browser Dev Tool

Image
  I was recently working on a new application and I was researching different color schemes.   In the past I have used the browser dev tools to see what colors I web site I like was using.  I would get the usual display of a list of colors.   Once you are in Dev tools, you select the "Elements" tab top of the screen.  Then select "Styles" on the right side panel.  This will show a wide range of colors and style used on the web site.  This works, but you basically have to inspect each separate element and take note of the color and font used.  Time consuming, but it will get the job done. I was following this process in several different browsers, Chrome, Edge and Vivaldi, I often use multiple browsers, when I came across a new tool in Edge. I was in Edge, Version 103.0.1264.62 (Official build) when I noticed a new tab: It does show this as an experimental feature.  I clicked on it and I was amazed with what it showed. If you notice, to shows a lot of really cool inf

Updating Common Library

Image
I have had a project I call "CommonLib" that I have been using with my .Net projects since before .Net 1.0 was released.  It started out as a collection of helper functions for algorithms and functions that were missing from the .Net system. With new long term support version of .Net, I try to upgrade the library by removing any outdated functions and any functions now supported by the new .Net release.  I update any existing functions with new or improved methods from the .Net system, like pattern matching.  I will add any new features from the new .Net release that meet the requirements to be included in the common library. Changes made for this Release Changes made with this latest release 1. Upgrade to .Net 6 2. Switch to Global Using 3. Turned Nullable support on 4. Removed outdated and duplicate functions 5. Increment the version 6. Updated the assembly properties Common Lib Requirements The requirement to have a function placed in the common lib is:      "The func

Datetime Blazor Component with dynamic Styling

Image
  I wanted to build a component that would utilize a dynamic class for styling.  I came across a nice component that displays the date and time and this post is how I created a Blazor component from it that uses a dynamic style.  We want to be able to do this so we are not changing the component code everything we using.  This is very helpful if the component is part of a UI library. The code in this post was built on .Net 6 using Visual Studio 2022 Project break down Basic control The first step was to just build the control as part of a regular page.  The index page was used.  The HTML is fairly straight forward:           <div class="datetime">                <div class="time">@DateTime.Now.ToShortTimeString()</div>                <div class="date">@DateTime.Now.ToLongDateString()</div>           </div> I am just using the DateTime function to generate both the date and the time.  We can use the ToString formatting to