Posts

Showing posts from 2020

Function vs. Web API.

Image
  I have several projects I have been looking at doing and I have been struggling with whether to use Azure functions or to build APIs and host them as an Azure app service. In this post, I am going to try to figure out what is the best solution based on functionality, reuse, cost, maintenance, and ROI. This post will not cover the in-depth technical difference between functions and web API.  The end result is for me to understand which one will work under a different use case. Advantages of Functions a. Code in the Browser     Not only am I not interested in this one, I think it is a disadvantage.  If you or your team are un-disciplined about your changes, a bad thing can happen. b. Additional languages supported     Not interested in this one either.  There is a side effect, what if a team member coded a function in Python and left the team, that supports it. c. Point and click integration with other Azure services like Blob Storage and Comos     This is the only advantage that I thi

Blazor Hang 'Um

Image
 I found a cute hangman game sample project using javascript so I thought it would a be cool little Blazor application.  The UI was good, but there was a lot of interactivity with the application that would need to be rewritten in C#. The flow of the application is the normal flow of a hangman.  You guess a letter of the word until you either run out of guess and hand the guy or you get the word. In this post, I wanted to highlight the unique parts that I had to do to make if a Blazor application. Steps of the project 1. Create a project 2. Port over the HTML/CSS 3. Get a list of words to use 4. Show the hangman frame 5. Show how many letters in the word 6. Allow the user to guess 7. Show the letter if correct 8. Show a piece of the hangman and show the wrong letter if incorrect 9. Check to see if out of guess, if so end game 10. Did they get the word, if so end game Create a Project You just need to create a normal Blazor project with no authentication.  I choose the server-side Blazo

.Net Conf 2020 Day 3

Image
 Summary I learned my lesson from trying to attend too many sessions yesterday.  Today I am focusing on the Blazor sessions. 1. Application State in Blazor Blazor Train on YouTube - Carl Franklin It was nice to hear Carl again Been a fan since early .Net Rocks App State Instances of objects stored in memory SPAs are stateful Scoped  Create "State Bag" - User Scoped 1 instance per user Class for object reference Use scope service For application instance use Singleton Web Assembly - not needed because there is 1 user Class level Transient Multiple copies of the same data across pages Implement a state bag Cascading Component Scoped Service Hybrid Approach Cascading Component with scope service Add the Hybrid solution at the router level It is like making an observable at the app level In AppState service, he is handling events as opposed to just holding state Saving Application-level state Local Storage 5 Meg limit AppState Persistence Pattern Do it in 1 location On Server use

.Net Conf 2020 Day 2

Image
 Summary Here are my notes on the sessions I attended for day 2.  There were many more I did not attend since the conference ran for 24 hours. My goal for attending these sessions is to get get a high-level overview of the topic and see which ones I want/need to do a deeper drive on. Day 2 Sessions 1. What's new in Visual Studio 2019 Customization Themes CRTL Q Manage Extensions Install Themes After download, Close VS To install Ctrl Q Themes Select the one you want Project Templates Create an existing Project as a Template Export Template Wizard Access New Template File new project Should show in the filter, but not always Exclusive Filters Allows you to filter out projects from your solution based only on the projects you want Check the box on the bottom of the dialog Right-click on only load the projects you want File Nesting Configure your own nesting rules Right-click on section and select file nesting at that level You define a rules file Productivity Tools IntelliCode Team C

.Net Conf 2020 Day 1 Summary

Image
 Here is my summary of the session for day 1 of the .Net Conf 2020 day 1.  This is my notes from each of the session that attended.   Full discloser, I am mainly focused on the Blazor Sessions. Summary: Overall the sessions were good.  Some were a little salesy for me, and some included things that will be in .Net 6.0 which seems out of place in the .Net 5.0 release conference.  I know most of the Blazor changes, posted here , but there were a few that are new.  The sessions on C# 9.0 and Open API were really good.  I will have a deeper post on just those changes.   It is easy to see from my notes which session I really liked. 1. Key Note The big announcement that .Net 5.0 was launching today! Blazor now uses the .Net core CLR They provided a nice list of Open Source Blazor packages Bit Blazor web assembly performance change gRPC has gotten a lot faster Desktop - Added a Chrome-based browser control Desktop - Click once is back C# 9 - Records Win forms now support 4k DPIs The video of

What I learned this week

Image
 One of the great things I like about the software development profession is that you can never learn everything and there's always something new to learn.  I started thinking that I needed to keep track of the new things I learned.  I decided I'm going to start posting every time I have three or four new things that I have learned.  I normally have a goal trying to learn at least one new thing per day, some days it's hard some days it's easy to get more than a few.  I have multiple sources that I use to learn new fun and exciting things from social media, blogs, virtual conferences, YouTube and news do company events.  For this week I have learned how to make the background of an image transparent, how to get a color palette from an image, and that there is a difference in Blazor JSON serialization.  Transparent Image To be able to make an image with a transparent background you need a software package that will remove the background color.  There is a lot of image sof

.Net 5.0 Blazor Goodness

Image
  With the release of .Net 5.0 quickly approaching it is time to take a look and see what kind of goodies are include for Blazor. .Net 5.0 is aimed at unifying the .Net platform by commuting all the different aspects of the platform into a single release set.  But they have including a lot of upgrades and new features for Blazor.  To see these new features you have to be using at least Visual Studio 2019 16.8 Preview 3 and have .Net 5.0 install on your machine. Here are the new features that I have found exciting.  See the linked source code to see them in action. CSS isolation Input Radio Component UI Focus Support File Input Component On-toggle Event Support  CSS Isolation With this feature, you can now include separate style sheets that are scoped just for your components.  This will allow you to provide the styling you want for your component libraries or just your individual component. This is implemented by convention.  You provide a CSS file named the same as your component razo

Sign In best practices, Blazor Style

Image
  When you think about it, application sign-in forms would seem fairly straight forward and simple to do, considering that most applications have them.  Make a form, add a couple of labels and inputs with a button and you are good to go. When you stop and think about it though, there is a lot that goes into making a good sign in form.  We are going to take a look at 5 best practices you can use when creating your next sign-in form.  The key concept to keep in mind is to make it simple.  You have to always consider that your users are not as computer savvy as you are.   The sample project that focuses on the sign-in form HTML and Blaozr code.  There is no real authentication for the application.  Any email and password, that meets the validation, will allow the user to get to the home section of the application.  Please note this code will work on either server-side Blaozr of web assembly Blazor We will look at each of the 5 best practices but from a Blazor standpoint. 5 Best Practices

Blazor Hosting Cost Analyst

Image
  I have spent some time looking at if Server-Side Blazor App is better than the Client-Side Blazor App, Blazor Hosting Models  post.  I decided to look at it from a cost position and see if there is any benefit of one way over the other.   I took a simple Blazor Application that I wrote Inspirational Quotes  and create both a server-side application and a client-side application.  I then deployed each.  For the server-side application, I deployed as an Azure app service, free trier.  For the cient-side application, I deployed that with Azure blob storage statice web site.  The goal was to just focus on the cost of each deployment. After the deployment I had several users access each web site several times a day.  This was to simulate a light usage, such as a sample app from a blog or portfolio would get.  I monitored the sites for 30 days. Actual Cost I was a little surprised to see the cost for each deployment and utilization for 30 days was $0.00 ! Other Interesting Findings Even th

1 Line CSS Positioning Blazor Style

Image
I found a really good YouTube video  from Google Chrome Developer channel that I am piggybacking off of for this post.  I found the content very interesting and I wanted to see what it would take to first port it s Blazzor application, then how to implement the layouts in a Blazor component library where I can use them in any project.   Please note, even though I am a fan of Bootstrap and other CSS frameworks, I have been on a push lately to write my own CSS.  These layouts are pure HTML and CSS. I won't cover the details of the 10 different layouts and the 1 kay line that makes them work, I do highly recommend you watch the video, it is very educational on CSS layouts. To demonstrate the 10 layouts, I have created a razor page to display the layout.  You can review the source code provided for the details 10 Layouts: 1. Center - All child content is centered within the parent container                              2. Clamping - Clamps child content within the parent container