DEV Community: Jeffrey T. Fritz

Blazor and .NET 8: How I Built a Fast and Flexible Website

Jeffrey T. Fritz — Thu, 22 Feb 2024 15:47:54 +0000

I’ve been working on a new website for my series CSharp in the Cards. I built this website in a way that was easy to maintain, flexible and most importantly would respond quickly to requests from visitors. I knew that Blazor with .NET 8 had a static server rendering feature and decided that I wanted to put it to the test. I recently published a new lesson to the website and included a web assembly component to allow for paging and filtering the list of lessons I was pleasantly surprised when I saw the performance dashboards on azure showing that it was handling requests and responding very very quickly.

Response times of C# in the Cards after the new episode

In this blog post, let’s talk about how I’ve optimized the website for speed and some of the finishing touches that you can put on your Blazor website to make it screaming fast running on a very small instance of Azure App Service.

Static Site Rendering – Its Blazor, but easier

With .NET 8 there’s a new render mode for Blazor and it’s called static site rendering or SSR. This new render mode ditches all interactivity that we previously had with Blazor server side and Blazor Web Assembly and instead favors delivering HTML and other content from the server to browsers in a high speed manner. We can bolt on other techniques that we know from SEO and website optimization to make this even faster and deliver a great experience for our visitors.

@page "/About"
@attribute [OutputCache(Duration = 600)]

<PageTitle>C# in the Cards - About Us</PageTitle>

<HeadContent>
    <link rel="canonical" href="https://csharpinthecards.com/about" />
    <meta name="title" content="C# in the Cards - About Us">
    <meta name="description" content="C# in the Cards is an innovative video training series that teaches the fundamentals of C# programming language using a deck of cards. Join Microsoft instructor and Twitch streamer Jeff Fritz on this exciting journey.">
    <meta name="keywords" content="C#, Programming, Learning, Video Series, Jeff Fritz, Microsoft, Twitch, Education, Coding, Deck of Cards, Interactive Learning">
    <meta name="robots" content="index, follow">
    <meta property="og:title" content="C# in the Cards - About Us" />
    <meta property="og:description" content="C# in the Cards is an innovative video training series that teaches the fundamentals of C# programming language using a deck of cards. Join Microsoft instructor and Twitch streamer Jeff Fritz on this exciting journey." />
    <meta property="og:image" content="https://csharpinthecards.com/img/jeff.webp" />
    <meta property="og:url" content="https://csharpinthecards.com" />
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@@csharpfritz">
    <meta name="twitter:title" content="C# in the Cards - About Us">
    <meta name="twitter:description" content="C# in the Cards is an innovative video training series that teaches the fundamentals of C# programming language using a deck of cards. Join Microsoft instructor and Twitch streamer Jeff Fritz on this exciting journey.">
    <meta name="twitter:image" content="https://csharpinthecards.com/img/jeff.webp">
</HeadContent>

<main>

  <h1>About C# in the Cards</h1>
  ...
</main>

The About page is configured to output a bunch of HTML headers for the SEO folks and the social media pages to be able to present good information about the site. Notice the headers that are added to satisfy the search engines:

a canonical link element that identifies where the page should be served from
a keywords meta element with information about what you can find here
a robots element that tells the search engine crawlers what they can do with the page
open graph and Twitter meta tags that instruct Twitter, Facebook, LinkedIn, Discord, and other sites about the images, titles, and description of the page

That’s fine… but there are two other features to notice:

This is a static page with no data being presented. I’ve tagged it on line 2 with an attribute to allow output caching for 600 seconds (10 minutes). This way the web server doesn’t have to render a new copy when its requested within 10 minutes of a previous request.
The images references are in webp format. Let’s not overlook this super-compressed format for displaying high-quality images. It might be 2024, but every bit we deliver over the network still matters for performance and the 600×600 portrait picture of myself on this page was compressed nicely:

Original	Compressed	# Difference
PNG	WEBP
450kb	30kb	-93.3%

93% savings… that’s crazy good and means that your browser is not downloading an extra 420kb it doesn’t need.

Data is stored in static files on disk

For this simple website I don’t need a big fancy database like SQL Server or Postgres or even MySQL. For this site, I’ve stored all of the data in a simple CSV file on disk. That means that I can edit the list of articles that are available and the metadata that goes with them by just opening the file in Excel and writing new content. This means that when it comes time for me to read data about the list of content that’s available I’m only reading from a very small file on disk and I don’t need to worry about any kind of contention. I also don’t need to worry about any service that’s running to deliver that data because it’s only coming out of a small file on disk that’s read only.

public class PostRepository
{

  public PostRepository(IWebHostEnvironment env, IMemoryCache cache)
  {
    Env = env;
    _Cache = cache;
  }

  public IHostEnvironment Env { get; }

  private const string POST_CACHE_KEY = "post_data";
  private readonly IMemoryCache _Cache;

  private IEnumerable<PostModel> GetPostsFromDisk()
  {

    // open the posts.csv file from the wwwroot folder using linq2csv
    var context = new LINQtoCSV.CsvContext();
    return context.Read<Post>(Path.Combine(Env.ContentRootPath, "wwwroot", "posts", "posts.csv"), new CsvFileDescription
    {
      SeparatorChar = ',',
      FirstLineHasColumnNames = true,
      QuoteAllFields = true,
      UseFieldIndexForReadingData = true,
      IgnoreUnknownColumns = true
    }).Select(p => (PostModel)p)
    .ToArray();

  }

  public PostModel[] GetPosts() 
  {

    return _Cache.GetOrCreate<PostModel[]>(POST_CACHE_KEY, entry => {
      entry.SlidingExpiration = TimeSpan.FromMinutes(30);
      return GetPostsFromDisk().ToArray();
    })!;

  }

}

In this repository class I use the LinqToCSV library to open and read all of the content from the file into a Post object in the first method, GetPostsFromDisk. Later, in a public method called GetPosts, you see where I use the in memory cache feature of ASP.NET Core to fetch data from the cache if its available or get it from disk and store it in cache for 30 minutes. I could probably extend this timeout to several hours or even days since the website doesn’t get any new content without uploading a new version of the site.

The key here is that the meta data about the lessons on the site is loaded and kept in memory. As of episode 9 of the series, the posts.csv file is only 1.4kb so I have no worries about loading its entire contents into memory.

Don’t forget, in order to add the MemoryCache to your ASP.NET Core application, you need to add this line to your site configuration in the Program.cs file:

builder.Services.AddMemoryCache();

I could add other cache options like Redis to the site, but with how small the data I want to cache is, I don’t need that sophistication at this point.

Pre-rendered Interactive Web Assembly Content is fast… REALLY fast

I wanted to add a subset of the lessons to the front page of the website so that you could see the latest six episodes in the video series and scroll back and forth to the other episodes. This should be an interactive component but I still wanted the home page to render quickly and have a fresh speedy response time as you page through and look at the various episodes that are available. The natural way to do this with Blazor is to build a web assembly component that will run on the client and render data as users click on the buttons for that collection of articles.

I wrote a simple pager component that would receive a collection of lesson data and render cards for each lesson. Since we already know that the collection of lesson data is less than 2kb in size I don’t have a problem sending the entire collection of data into the browser to be rendered.

<h2>Recent Lessons</h2>

<PagingPostCollection 
  Posts="Posts" PageSize="6" 
  @rendermode="InteractiveWebAssembly"
  SortAscending="false" />

When I use the @rendermode attribute in this code, it forces the render mode to web assembly and ASP.NET will pre-render as well as cache a version of that component’s resultant HTML with the home page. After viewers download the Web Assembly content it will hand control over to web assembly and it will be a fully interactive component for them to be able to work with.

Lesson Pager on the C# in the Cards website

Blazor lets me build content to be rendered on the web and I get to choose where exactly it should run. It can run in the browser with web assembly it can run statically on the server it can run interactively on the server if I want it to. In this case running as web assembly gives a really nice usability effect that makes it easy for viewers to locate the content they want to watch.

Compress the Content from Kestrel

By default content that’s delivered from the ASP.NET kestrel web server is uncompressed. We can add brotli compression to the Web server and deliver content in a much smaller package to our visitors with just a few simple lines of code in program.cs. This is something that I think everybody should do with their Internet facing websites:

#if (!DEBUG)
builder.Services.AddResponseCompression(options =>
{
options.EnableForHttps = true;
});
#endif

Add response compression configures the server so that it will deliver broadly compressed content. In this application I wrap it with the conditional debug detection because hot reload does not work with compression enabled. When we deliver the website to the production web host it will be running in release mode and compression will be enabled.

Optimize all the JavaScript and CSS

CSS AND JavaScript can be minified and combined to reduce the number and size of downloads for this static content that makes our websites look good. For this website I installed and used the WebOptimizer package available on NuGet. My configuration for this looks like the following:

builder.Services.AddWebOptimizer(pipeline => {
    pipeline.AddCssBundle("/css/bundle.css", new NUglify.Css.CssSettings
    {
        CommentMode = NUglify.Css.CssComment.None,

    }, "app.css", "css/bootstrap.css", "style.css", 
    "css/plugins.css", "css/colors.css", "css/responsive.css");
    pipeline.MinifyJsFiles("/js/jqueryCustom.js");
});

This script bundles the CSS files that were delivered with my website template and minifies the one JavaScript file that I manage with my project.

Set long cache-control headers for static content

The last thing that I did was set long duration cash dash control headers for static content like images CSS and Javascript files. This is easy to do with just a few more lines of optional configuration when I configure the static file feature inside of ASP.NET Core:

app.UseStaticFiles(new StaticFileOptions()
{
  OnPrepareResponse =
  r => {
    string path = r.File.PhysicalPath;
    if (path.EndsWith(".css") || path.EndsWith(".js") || 
    path.EndsWith(".gif") || path.EndsWith(".jpg") || 
    path.EndsWith(".png") || path.EndsWith(".svg") || path.EndsWith(".webp"))
    {
      TimeSpan maxAge = new TimeSpan(370, 0, 0, 0);
      r.Context.Response.Headers.Append("Cache-Control", "max-age=" + maxAge.TotalSeconds.ToString("0"));
    }
  },
});

Summary

This website’s been easy for me to build because I can rely on my normal HTML skills and the plethora of HTML templates and CSS libraries out there to make my website look good. Blazor helps me to make it interactive render quickly and grow as I add more content to it. my cost in interaction with azure is minimal, as I’m using a Basic-2 instance of Azure App Service running Linux to deliver this site.

I built an Android app on my Linux machine using .NET 7 and MAUI

Jeffrey T. Fritz — Sun, 04 Dec 2022 03:04:08 +0000

I’ve been tinkering and preparing to build a mobile app for the KlipTok website for the past few months. KlipTok is a personal project, and a joy to work on when I have an hour here and there to spend on the site. The most requested feature I have, is for a mobile app to complement the site, and this week I started focusing on that effort… and was even able to build an Android app using .NET MAUI, Blazor, and my Linux laptop. In this post, I’ll describe how I went about getting the development environment working on Ubuntu Linux.

NOTE: Your experience might be different

Every Linux system is different, and I can point you in the direction that worked for me. I cannot guarantee that you will find similar success or answer questions for your configuration.

I started this project on my Twitch stream on Friday December 2nd, and was able to get a simple Blazor MAUI application that played a Twitch clip running on my Windows machine. I used Visual Studio 2022 and the Android emulator that came with it and was happy to have an initial proof-of-concept application running.

I prefer to use my Linux laptop from KFocus when I am not in my home office. It’s a great machine with plenty of power for development. With a quick web search, I found an article where someone was setting up Android development on Linux. I read through those steps, updated to .NET 7, and wrote a few scripts to help with my development. Here’s what I did:

I installed Android Studio from the Ubuntu app repository using the Discover app.
I opened Android Studio and grabbed the SDK folder from the Android SDK Manager tool, depicted below. In my case, its sitting in /home/csharpfritz/Android/Sdk.
Installed the .NET MAUI workload into .NET 7 at the command-line with the command: sudo dotnet workload install maui-android
Installed the Android Debug Bridge (ADB) with sudo apt install adb
Started and ran the emulator from Android Studio, verifying that it was running with adb devices

Now that I have the emulator running, I could build and deploy my application to the emulator with the command:

dotnet build -t:Run -f net7.0-android /p:AndroidSdkDirectory=/home/csharpfritz/Android/Sdk

On first test, it failed miserably and complained about not supporting MacCatalyst and iOS development on Linux. Not a problem, so I updated the csproj file to have supported frameworks like the following:

<TargetFrameworks>net7.0-android;</TargetFrameworks>
<TargetFrameworks Condition="$([MSBuild]::IsOSPlatform('osx'))">
  $(TargetFrameworks);net7.0-ios;net7.0-maccatalyst
</TargetFrameworks>
<TargetFrameworks Condition="$([MSBuild]::IsOSPlatform('windows'))">
  $(TargetFrameworks);net7.0-windows10.0.19041.0
</TargetFrameworks>

When I now build on Linux, just the Android configuration runs. This also means I can drop the -f argument in the command-line. I tried to recompile and got errors about the compiler not finding the Java jar tool. Easy enough, I installed the latest tool with this command:

sudo apt install openjdk-11-jdk-headless

I compiled and was able to deploy to the emulator in 55 seconds! Progress!

Last steps, I wanted to get the app building and recompiling with dotnet watch. This way, I can make changes and the app will reflect those changes in the emulator. My dotnet watch command is:

dotnet watch build -t:Run /p:AndroidSdkDirectory=/home/csharpfritz/Android/Sdk

I found that the app didn’t rebuild and deploy when I made changes to the razor files. Easy enough, I made another addition to my csproj file to include a definition for watching the razor files:

<ItemGroup>
  <Watch Include="**\*.razor" />
</ItemGroup>

With this patched, I was able to build and run the app in watch mode. As I changed razor files, the app would redeploy to the emulator in 6 seconds! That’s such a better development experience. Last thing that I tried, was to add a switch to my script to shut off the analyzers when I’m in watch mode:

dotnet watch build -t:Run /p:AndroidSdkDirectory=/home/csharpfritz/Android/Sdk /p:RunAnalyzers=false

That didn’t give me a big boost in performance, but I feel better without the analyzers running when I’m in watch mode.

Have you tried building an Android app on Linux with MAUI? Do you have any tips or tricks for developers to use in order to have a better experience? Share with us in the comments below

Build APIs for the Web INSTANTLY with ASP.NET Core 6

Jeffrey T. Fritz — Wed, 23 Feb 2022 19:19:19 +0000

I've been building web-based applications for many years, and I always run into the same questions and code that needs to be written again and again. How do we get data into and out of the database for 90% of our interactions? The simple create, read, update, and delete operations... we've simplified those processes over time with ORM tools like NHibernate, Entity Framework, and Dapper. The next question is, how do we get that data into our applications easily? We want to create a repeatable process that is easy to follow and quick to integrate.

Typically, folks have been building some sort of API that a web server responds with. Great, now we have to write ANOTHER layer of code over the database and generate records for all of those things we just exposed to our application with an ORM.

Enter Minimal APIs

In ASP.NET Core 6, we can dramatically simplify the creation of these APIs for interaction with the database by using the new Minimal API approach. Our API code can be delivered in 1 file, referencing the Entity Framework context that connects to the database.

Consider this configuration to expose a Contacts table as a web endpoint that can be accessed with an HTTP GET verb:

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddSqlite<MyContext>(
  "Data Source=contacts.db"
);

var app = builder.Build();

app.MapGet("/api/Contacts", async (MyContext db) => 
  await db.Contacts.ToArrayAsync()
);
app.MapGet("/api/Contacts/{id:int}", async (MyContext db, int id) => {
    var contact = db.Contacts.FirstOrDefaultAsync(x => x.Id == id);
    if (contact == null) return Results.NotFound();
    return Results.Ok(contact);
});

app.Run();

That's still a LOT of boilerplate code to just generate the GET and GET by id actions. We still have 3 more methods to write, and that's just for this first entity.

Generate the code... do it in 1 line

This got me thinking, and I wanted to make this easier to build with sensible defaults. I put together a simple prototype that would generate ALL 5 of the default HTTP actions with a NuGet package and 1 line of code.

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddSqlite<MyContext>(
  "Data Source=contacts.db"
);

var app = builder.Build();

app.MapInstantAPIs<MyContext>();

app.Run();

Now we're talking! This one statement generates the following HTTP endpoints:

GET /api/Contact
GET /api/Contact/{id}
POST /api/Contact
PUT /api/Contact/{id}
DELETE /api/Contact/{id}

I put together a demo discussing this library and showing how it generates the same code that you might write by hand:

This is still just a prototype, but if you would like to learn more, check out our GitHub repository where we are welcoming discussions and pull requests. You can even try out the library yourself by downloading the latest NuGet package.

How are you building APIs for the web? How would you like to see it made easier and more repeatable?

My Favorite C# Features - Part 5: Build for the Modern Web with Blazor

Jeffrey T. Fritz — Fri, 20 Aug 2021 16:15:55 +0000

I've written a bit about the various language features that I really like about C# over the last few months, but today I'm going to pivot slightly and talk about how much fun it is to write web applications with the Blazor web framework.

What is Blazor?

Blazor is a modern component-based web framework that is built on top of the .NET runtime and can run on either a web server OR in a browser using Web Assembly. Blazor was introduced as an experiment by Steve Sanderson at NDC Oslo in 2017:

This initial simple concept for building and running C# and .NET code in the browser as a "new SPA framework" captured the imaginations of .NET developers. After 2 years of experimentation and exploration by the .NET engineering team, Blazor became an official .NET framework with Web Assembly and Server hosted versions available.

Web Assembly AND Server version?

Blazor gives developers a way to define components and pages using C# with Razor templates. What if you really like the Blazor technology, but don't want to deliver and run the content in the browser using Web Assembly? Maybe you have some code that you need to ensure is run in a validated and protected server-based environment, well you can do that with Blazor Server-Side.

In this model, Blazor pages and components are rendered on the server and delivered to the web browser using web sockets and more specifically the SignalR framework. All interactions in the browser are transmitted to the server over a SignalR connection (typically an abstraction over web sockets) and the rendered HTML is returned and updated by the Blazor Server-Side framework.

How do I get started?

Blazor is part of the .NET toolset. You can get started by headed to https://blazor.net and installing the .NET command-line tools or Visual Studio. I have a new playlist of videos that will walk you through some simple scenarios that you can find on YouTube:

Sample Page

A simple Blazor page that can be used to fetch some data from an HTTP-based API can be queried and its contents displayed with a Blazor page like the following:

@page "/fetchdata"
@inject HttpClient Http

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from the server.</p>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    private WeatherForecast[] forecasts;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json");
    }
}

This is the basic FetchData sample that is delivered in the Blazor templates. It shows the following techniques in building a Blazor page:

Defining that this is a page with an address to be routed to using the @page directive on the first line.
Injecting an HttpClient named Http with the @inject directive on the second line. The HttpClient is later used to get data in JSON format and convert it to an array of WeatherForecast objects to be painted on screen.
Emitting some standard table HTML tags with a for-loop across our collection of weather forecasts. The C# code in a Razor template is denoted by the @ character
Handling the OnInitializedAsync event on the page to load data when the Blazor runtime initializes the page.

Community Support and Interactions

There is a growing and enthusiastic community of Blazor developers, projects, and companies building tools and samples for Blazor. Check out the Awesome Blazor list on GitHub to see more:

AdrienTorris / awesome-blazor

Resources for Blazor, a .NET web framework using C#/Razor and HTML that runs in the browser with WebAssembly.

Awesome Blazor

A collection of awesome Blazor resources.

Blazor is a .NET web framework using C#/Razor and HTML that runs in the browser with WebAssembly.

Contributions are always welcome! Please take a look at the contribution guidelines pages first. Thanks to all contributors, you're awesome and wouldn't be possible without you!

If you need to search on this list you can try this great website: Awesome Blazor Browser Thanks @jsakamoto for this! Source code .

Introduction

What is Blazor?

Blazor is a .NET web framework to build client web apps with C#.

Blazor lets you build interactive web UIs using C# instead of JavaScript. Blazor apps are composed of reusable web UI components implemented using C#, HTML, and CSS. Both client and…

View on GitHub

Summary

Building web applications with Blazor is a great way for developers who enjoy C# and .NET to create interactive web applications. I encourage you to check out the Blazor 101 video series published on YouTube and check out https://blazor.net for more learning materials and the tools to get started with Blazor.

My Favorite C# Features - Part 4: Project Structure

Jeffrey T. Fritz — Wed, 12 May 2021 14:25:36 +0000

I've discussed several of my favorite features of the C# programming language in the previous few posts, but a question that I have heard on my Twitch stream and on Twitter is: "how should we best structure our projects to take advantage of these awesome features?"

Oh the architecture questions. There are many ways to structure your projects and solutions, and that volume of choices is part of what makes C# and .NET in general so amazing: we get to be artists for a bit and design our source code structure in a way to makes us happy.

In this post, I'll share some of the ways that I like to structure my projects and solutions as they evolve. This is NOT a 'best practices' or required set of techniques for anyone to build an application system. This is the way that I build systems that makes me happy, and maybe you'll find some of these techniques valuable in your systems as well.

C# File Structure

The C# language documentation has some great recommendations for standard conventions around naming, layout, and commenting. However, they don't answer the question: "how should I structure the content of my C# code file?"

There is a rule that StyleCop uses that will encourage you to order the contents of your C# files (*.cs) as follows:

Extern Alias Directives
Using Directives
Namespaces
Delegates
Enums
Interfaces
Structs
Classes

Within a class, struct, or interface the elements should be position in this order:

Fields
Constructors
Finalizers (Destructors)
Delegates
Events
Enums
Interfaces
Properties
Indexers
Methods
Structs
Nested Classes or Records

You can add the StyleCop Analyzers to your projects by simply adding a reference to the NuGet package "StyleCop.Analyzers". On every build after installing these analyzers, you will get a report of the recommended changes to your application.

Project Structure

As I start building a new system, the projects that comprise that system are typically all managed within the same solution file. In rare cases, multiple solution files can be used to manage various logical segments of the system.

Project Naming

As a web developer first, I like to typically start a new system by creating my initial application and name it the same as my Solution:



- FritzsCoolApplication.sln
  - FritzsCoolApplication

I've learned over the many applications that I've created that this application is going to grow, shift, and change. I've started postfixing my initial web application names with .Web as they represent the web application that will be delivered.

Additional projects that are added to the solution typically have the same base-name and have a suffix to indicate their purpose. It's common to see projects in my solutions with names like:



FritzsCoolApplication.Web

FritzsCoolApplication.Api

FritzsCoolApplication.BackOffice

FritzsCoolApplication.Common

FritzsCoolApplication.Core

FritzsCoolApplication.Client

FritzsCoolApplication.Communication

FritzsCoolApplication.Proxy

FritzsCoolApplication.Migrate

FritzsCoolApplication.Test

Folder Structure

Folders in some projects are defined with conventions for use in making applications like ASP.NET MVC work without adding configuration. This convention over configuration means the same folders are defined in these projects that we're going to find regardless of the direction of the project. Consider the conventional folders for an MVC project:

The Controllers, Models, and Views folders are where the heart of the MVC application operates. In all ASP.NET Core applications, the wwwroot folder is where static files are kept that are served without server interpretation. The default css, js, and lib folders are a good standard for organizing CSS and JavaScript files. Add an img folder and a fonts folder as needed for images and fonts and you have a great configuration for your web project.

In a Razor Pages project, we see the replacement of the Controllers, Models, and Views folders with a single Pages folder.

Next Folders to introduce

Data interactions in the project typically start with a Data folder and a potential Migrations folder that is maintained by Entity Framework.

If I'm creating a hosted service, that is something that will be running as a background process inside my application, I will create a Services folder in the project to contain these application specific processes.

ViewModels are another concern, as we begin to constrain the contents presented and interacting with our web application. These contents could be stored in a ViewModels folder with appropriate conventions defined for working with user data. This is also a great convention to use for interacting with our Web APIs that we may define in a project, especially if we want to introduce a front-end API framework like gRPC or OpenAPI.

Introducing Unit Testing

When significant business logic enters my application, I start to introduce unit tests. By business logic, I am referring to more than the simple create, read, update, and delete operations with a database. This logic is the programming model that you are introducing to calculate and provide those features that define your application.

I prefer starting a second project next to my initial web application with a Test suffix like FritzsCoolApplication.Test. I'll even go a step further and configure solution folders to place the test project in a location at the bottom of the Solution Explorer in Visual Studio, making it easier for me to find the test project.

Evolving From Folders to Projects

As the complexity of our application grows, we want to introduce interfaces and abstractions to provide for re-use. This is when I begin to introduce new projects that can be shared so that each project is a smaller and more manageable unit.

The first project I typically introduce is a Class Library built with .NET Standard 2.0 named .Core or .Common and contains a collection of shared Enums, Constants, and Interfaces that I might be using across projects. This project typically does not contain any executable code, but rather contains the definitions of cross-cutting features in use throughout the application system.

Why make this project .NET Standard 2.0? These features that I am defining are simple and I want maximum compatibility across all future projects. .NET Standard 2.0 provides all of the flexibility that I need if I want to target Windows, Azure, Xamarin, .NET Core and more.

As the number of resources in each folder of my initial web project grow and additional executables or services need to be hosted, I begin to separate each of those folders into their own projects that new executable or service projects can share.

As new services for business domains are defined and added, I introduce a third segment to my project naming scheme that defines that domain. The below image shows how I would introduce a pair of services that manage the Accounting and Inventory domains for my solution.

Summary... for now

The flexibility with which you can grow your application from a simple website or desktop application into an entire enterprise scale service is only limited by your imagination. A few rules of thumb and guideposts along the way as you grow your application will help prevent project-sprawl with hundreds of little projects that don't add significant re-use or value to your solution, but instead create maintenance headaches.

Don't be afraid to refactor mercilessly. Content that starts to be re-used should move into shared projects and libraries that domains can re-use and end-user applications or websites can consume easily. Your unit-tests are your friend and can help guarantee that your projects continue functioning at a high-level.

How do you grow your applications? What suggestions do you have for a maturing project that needs to grow out of a single folder or a single project?

Did you know, I host a weekly live stream on the Visual Studio Twitch channel teaching the basics of C#? Tune in on Mondays at 9a ET / 1300 UTC for two hours of learning in a beginner-friendly Q+A format with demos and sample code you can download.

Looking to get started learning C#? Checkout our free on-demand courses on Microsoft Learn!

My Favorite C# Features - Part 3: Nullability

Jeffrey T. Fritz — Fri, 09 Apr 2021 19:57:37 +0000

I'm a practical programmer. I don't like to over-optimize my code, and I want to make it very readable for the next person who needs to work with something that I wrote. Consequently, I sometimes leave alternate interpretations and access patterns into my code that might not always work as expected. A great example of this is the ability to pass null into C# methods and trigger a different behavior. This can lead to errors in future code where you are now accessing something that inadvertently is a null object.

In C# 8, the langauge designers introduced a feature called Nullable Reference Types that allows you to define which variables could be null and which variables should NEVER be null.

In this article, and as an effort to help make myself a better programmer, we're going to review the nullable Reference Types feature of C# and discuss why it is an important feature that we should start using by default in our applications.

Why null?

As an object oriented language, C# has always had the concept of null in code. null is the absence of an object, its synonymous with "nothing" and is an easy concept for folks to understand when you declare a variable. However, this can (and most likely WILL) lead to the dreaded NullReferenceException, an error that indicates a null object was acted on unexpectedly.

PRO TIP: Sometimes, you'll hear C# programming folks refer to a NullReferenceException as an NRE.

Logger myConsoleLogger = default(ILogger);
myConsoleLogger.LogInformation("Processed the data");

In the sample above, the myConsoleLogger object is declared and assigned its default value (which is null). This would trigger a NullReferenceException because myConsoleLogger was never assigned an instance of an object. This is a simple mistake, but it would be really nice if the compiler caught this before we even tried to run the code. Consider a scenario like this array:


string[] values = new string[3];
string firstValue = values[0];
Console.WriteLine(firstValue.ToLower());

This is going to throw a NullReferenceException also, because the values array is declared but never assigned values. The firstValue variable is initialized with a null value on line 2 and the ToLower() method is then attempting to operate on a null object. Once again, a simple error because the values array is never assigned values.

Nullable Contexts and Compiler Warnings to the Rescue!

Some folks fear the compiler. There's a feeling that the compiler throwing errors or emitting warnings is an intimidating practice. I see it the other way: The compiler is my friend telling me when I made a mistake before I attempt to run my application. In this case, I want the compiler to tell me when I might work with a null object because the variables weren't initialized properly. Let's get some help to ensure that our objects in our code are being used correctly.

By default in C#, any reference type can be assigned the null value. With C# 8 and .NET Core 3.0 and later, we can define contexts in and around our projects where the compiler will perform nullability checks and raise warnings if we are potentially going to throw a NullReferenceException.

We can enable nullable checking on a segment of code by wrapping it with a compiler pre-processor #nullable with a setting the indicates how it should behave. Let's add nullability checking to the Hat class I introduced in the previous post in this series:

#nullable enable

    public class Hat {

        public string Name { get; set; }

        public int AcquiredYear { get; set; }

        public string Theme { get; set; }

    }

#nullable restore

There are two pre-processor commands present in this code: #nullable enable and #nullable restore. The enable command tells the compiler to check for variables that could be inadvertently assigned null and raise a compiler warning if there are any. Sure enough, in the Hat class, the string properties Name and Theme need to be initialized according to these compiler warnings:

warning CS8618: Non-nullable property 'Name' must contain a non-null value when exiting 
constructor. Consider declaring the property as nullable. 
warning CS8618: Non-nullable property 'Theme' must contain a non-null value when exiting constructor. Consider declaring the property as nullable.

This are easy fixes as I can default the values for these two properties to string.Empty:


#nullable enable
public class Hat {

  public string Name { get; set; } = string.Empty;

  public int AcquiredYear { get; set; }

  public string Theme { get; set; } = string.Empty;

}
#nullable restore

The compiler warnings go away, and I am a happy developer. If I try to define a Hat and assign null to these fields, will the compiler catch it?

var newHat = new Hat { 
  Name="Phillies 80's Maroon", 
  AcquiredYear=1985, 
  Theme=null 
};

This code DOES compile with no warnings. Why? The #nullable compiler directive is set on the Hat class, not the construction of the newHat variable. In order to protect more of our code, we need to expand the nullable check's scope to include more of our code.


#nullable enable

var newHat = new Hat { 
  Name="Phillies 80's Maroon", 
  AcquiredYear=1985, 
  Theme=null 
};

#nullable restore

This raises the appropriate compiler warning:

warning CS8625: Cannot convert null literal to non-nullable reference type.

Let's review quickly: these are ONLY compiler warnings. In fact, this code will run and not produce any errors.

Declaring a Reference Type as Nullable

I can also tell the compiler that it's ok if one of these reference values is assigned null by attaching a ? to the end of it's variable declaration:


public class Hat {

  public string? Name { get; set; }

  public int AcquiredYear { get; set; }

  public string Theme { get; set; } = string.Empty;
}

With this change, the Name of the hat is allowed to be assigned null regardless of the Nullable context around the class.

Project-wide Nullable Checking

What if I want to roll-out this compiler interaction across my ENTIRE project. You can add an entry to your project file that indicates nullable checking should be enabled with the Nullable element:

<Project Sdk="Microsoft.NET.Sdk">

  <PropertyGroup>
    <OutputType>Exe</OutputType>
    <TargetFramework>net5.0</TargetFramework>
    <Nullable>enable</Nullable>
  </PropertyGroup>

</Project>

We can now remove the #nullable directives from the Hat class and I'll receive the same compiler warnings without writing more code.

Disable Nullable Checking

What if I have an application that is configured with the Nullable entry in the project file, and I want to relax the checking on various sections of my application?

Similar to before, we can add a processor directive to our code that disables null checking:


#nullable disable

var newHat = new Hat { 
  Name="Phillies 80's Maroon", 
  AcquiredYear=1985, 
  Theme=null 
};

#nullable restore

Now we're talking... I can enforce the better developer behavior by adding the Nullable check to my project file, and those developers that want to take the risk of assigning and working with null can wrap their code with the processor to remove the warnings.

The Final Step

Warnings are just silly yellow text the compiler emits that tells us we MIGHT have a concern in our project. Did you know that you can turn up the importance of this warnings, converting them to errors the compiler emits and ensuring that you write better code? Add the TreatWarningsAsErrors element to your project file and those pesky warnings become a real problem that blocks your project from compiling properly:

<Project Sdk="Microsoft.NET.Sdk">

  <PropertyGroup>
    <OutputType>Exe</OutputType>
    <TargetFramework>net5.0</TargetFramework>
    <Nullable>enable</Nullable>
    <TreatWarningsAsErrors>true</TreatWarningsAsErrors>
  </PropertyGroup>

</Project>

Now our project team will be forced to treat null values with more respect.

Summary

The ability to assign and work with the null value is valuable in C#, but can be misused and lead to errors in our running applications. Let's get some help from the compiler to make handling of null values easier and clearer when we're building our projects.

Looking to get started learning C#? Checkout our free on-demand courses on Microsoft Learn!

My Favorite C# Features Part 2: LINQ

Jeffrey T. Fritz — Wed, 10 Mar 2021 15:04:16 +0000

Working with collections in any programming language always ends up with some sort of loop structure and ugly code to find an object, work on several objects, and exit the loop. This is why I really enjoy using LINQ with C# -- all of this looping and aggregation code is hidden from me by the compiler and I can focus on writing the code that I actually need to get and work with data in a collection. In this post, I'll review some of my favorite LINQ features that make me more productive in working with collections of data.

Throughout the samples below, we'll work with this collection of Hat objects. It's a real collection, and yes I do have these hats IRL. You can see a large selection of my hat collection at https://hats.csharpfritz.com

public class Hat {

  // A name I've assigned to the hat
  public string Name { get; set; }

  // The year I acquired the hat
  public int Year { get; set; }

  // Theme of the hat: Sports, Movies, Tech, etc
  public string Theme { get; set; }
}

public static class HatCollection {
  public static readonly Hat[] Items = new Hat[] {
    new Hat { Name="Camp Crystal Lake", Year=2020, Theme="Movies" },
    new Hat { Name="Marauder's Map", Year=2020, Theme="Movies" },
    new Hat { Name="Super C#", Year=2018, Theme="Tech" },
    new Hat { Name="Dunder Mifflin", Year=2018, Theme="TV" },
    new Hat { Name="Space X", Year=2019, Theme="Tech" },
    new Hat { Name="Phillies 2008 World Series", Year=2008, Theme="Sports" },
    new Hat { Name="The Flash", Year=2021, Theme="TV" }
  };
}

Fritz's The Flash hat

Where - Find Some Data and Return It

What good is a collection of data if you can't search through it quickly with just a 1 line command? The Where method can be used to quickly find the subset of items that meet your condition.

Given the collection of hats, we could return just those hats that were acquired in 2020 with this command:

var twentyTwentyHats = HatCollection.Items.Where(h => h.Year==2020);

// Returns "Camp Crystal Lake" and "Marauder's Map" hat objects

The contents of the Where method are called a lambda expression. You define a lambda with a variable that will capture one of the items in the collection, add a 'fat arrow' and then the operation you want to process on that item. In the case of a Where method, we are testing for a condition and returning a true or false boolean value to indicate if the item should be returned.

In this case, we are testing if the Year property of the Hat is 2020.

Are ANY of these Hats from before 2010?

The Any method is a simple check to return a true or false boolean value indicating if a condition is met. If we want to search the collection for hats that are from before 2010, we could use this expression:

var olderThanTwentyTen = HatCollection.Items.Any(h => h.Year < 2010);

// Returns true due to the presence of the 2008 Phillies hat

The Any method can operate quickly as it will stop looping through the collection as soon as the condition is met.

Count those hats

Aggregate methods are available that allow you to count, sum, min, max, and average values inside the collection. In addition to simply counting all of the items in the collection, we can provide a test method to count only those items that pass that test.

var totalHats = HatCollection.Items.Count();

// This returns 7.. but honestly, 
// Fritz's hat collection is more than 100

var techHatsCount = HatCollection.Items.Count(h => h.Theme == "Tech");

// This will return 2 for "Super C#" and "Space X"

Sorting done simply

Sorting is one of those computer science gotcha questions that ALWAYS comes up in an interview and nobody likes it. When it comes to sorting collections in memory, I just let the experts who built .NET do it for me by using the OrderBy and OrderByDescending methods. Simply provide a selector method that returns the property or value to order by and LINQ will return to you a collection of your objects in the order desired:


var newestHatsFirst = HatCollection.Items.OrderByDescending(h => h.Year);

var orderByTheme = HatCollection.Items.OrderBy(h => h.Theme);

Did you know, you can chain these sort method together, or even connect them with a Where method to create a more interesting query?

var techHatsNewestFirst = HatCollection.Items
    .Where(h => h.Theme == "Tech")
    .OrderByDescending(h => h.Year);

// This returns the "Space X", "Super C#" hat objects

Project your output with Select

Just like in SQL, there is a Select method that can be used with LINQ to transform our collection from one object to another. Perhaps we just want an array of the hat names... easy:

var hatNames = HatCollection.Items.Select(h => h.Name);

You can use select to convert to another type, an anonymous type, or tuples. Use Select to give you the shape and format of the data you need.

Group By FTW!

It's nice to be able to sort and filter your data, but the real power comes in when you summarize a collection. Let's use the GroupBy feature to summarize the number of hats in the collection by theme:

var totalByTheme = HatCollection.Items
    .GroupBy(h => h.Theme)
    .Select(g => new {Theme=g.Key, Count=g.Count() });

foreach (var item in totalByTheme)
{
  Console.WriteLine($"Theme: {item.Theme}, Count: {item.Count}");
}

/* 
Outputs:

Theme: Movies, Count: 2
Theme: Tech, Count: 2
Theme: TV, Count: 2
Theme: Sports, Count: 1

*/

This GroupBy delivers a collection of grouped objects with a Key property that contains the value grouped by, in this case the Theme property. We can then chain the Select method to project these groupings into a summary collection with the themes and the count of hats that belong to each theme.

Summary

This is just the beginnings of the cool things you can do with LINQ. Put together with an object-relational mapper tool like Entity Framework and you have a very cool way to query your database.

Did you know, I host a weekly live stream on the Visual Studio Twitch channel teaching the basics of C#? Tune in on Mondays at 9a ET / 1400 UTC for two hours of learning in a beginner-friendly Q+A format with demos and sample code you can download. I recently had an episode about LINQ that you can find on YouTube:

Looking to get started learning C#? Checkout our free on-demand courses on Microsoft Learn!

My Favorite C# Features - Part 1: Strong-types, Implicit-types, Anonymous-types, and Target-types

Jeffrey T. Fritz — Fri, 19 Feb 2021 16:10:15 +0000

I've been a long-time developer and fan of the C# programming language. Heck, I even named my blog and took the nickname csharpfritz One of my favorite capabilities of the language is the immediate compiler checking and tooling support for type-checking. The instant check can save time and prevent a number of bugs in writing code quickly. With the latest updates in C# 9 and .NET 5, we now have ultimate flexibility in how types are declared and interacted with in our code. Let's review the easy ways to declare and initialize types with C#.

In the beginning, there was explicit-typing

The original versions of C# required explicit declaration of every type in your code, and it felt so redundant to type the same names over and over again:

Sandwich myBLT = new Sandwich();
myBLT.Toppings.Add("Bacon");
myBLT.Toppings.Add("Lettuce");
myBLT.Toppings.Add("Tomato");
myBLT.Bread = "Gluten-Free";

Sandwich yourSandwich = new Sandwich();
// prep your sandwich as you'd prefer

Whether you are declaring the variable or initializing it with a class, you must explicitly declare the type assigned to the variable. Both myBLT and yourSandwich were required to have the type declaration Sandwich preceding them.

This syntax has been valid since C# v1 and is still valid today.

Enter Implicit-Typing and Initializers

The language was simplified a bit with C# 3 in 2007 when the var keyword and implicit typing was introduced. The compiler would use this keyword to infer variable types when they were initialized. The C# team also introduced initializers in C# 3, a feature that would allow you to assign properties at declaration time.

var myBLT = new Sandwich {
  Toppings = new[] {"Bacon", "Lettuce", "Tomato"},
  Bread = "Gluten-Free"
};

Sandwich yourSandwich = new Sandwich();
// prep your sandwich as you'd prefer

The var keyword delivers no performance hit to your running code, nor does it add to compile time. It is strictly a bit of 'syntactic sugar' that makes it easier to initialize and declare variables. I've demonstrated an initializer in the above sample by setting the Bread value to "Gluten-Free" and I've introduced another feature that arrived with C# 3: an implictly-typed array of strings assigned to the Toppings property of mySandwich. The compiler determines that the array is an array of strings and assigns the type appropriately.

Types aren't for me - Anonymous Types

At the same time Implicit-Typing was introduced, the anonymous type was added to C#. With this feature, you can declare a type with a set of read-only properties.

var myBLT = new Sandwich {
  Toppings = new[] {"Bacon", "Lettuce", "Tomato"},
  Bread = "Gluten-Free"
};

Sandwich yourSandwich = new Sandwich();
// prep your sandwich as you'd prefer

var ourLunchOrder = new {
  MyItem = myBLT,
  YourItem = yourSandwich
};

We can now inspect the outLunchOrder variable and read the properties. While anonymous types are convenient for prototyping, they shouldn't be used across namespace or memory boundaries, preferring instead to deliver a clear API to your interacting methods.

Welcome to 2021 - Target-Types

Implicit-typing forced the definition of types to the right of the equals sign when initializing a variable. Perhaps you'd prefer to keep the types on the left of the equals sign, so that all types are in the same location in your code. With C# 9 and .NET 5, this feature is now available to you and it's called Target-Typing. Let's rewrite our lunch order using this syntax:

Sandwich myBLT = new() {
  Toppings = new[] {"Bacon", "Lettuce", "Tomato"},
  Bread = "Gluten-Free"
};

Sandwich yourSandwich = new Sandwich();
// prep your sandwich as you'd prefer

var ourLunchOrder = new {
  MyItem = myBLT,
  YourItem = yourSandwich
};

Additionally, when calling methods and passing in new objects you can use the new() keyword to create an object of the expected type:

IceCreamSundae myDessert = new();
myDessert.Toppings.Add(new() { Flavor="Chocolate" });

Summary

The C# programming language is so flexible and allows you to take advantage of the multitude of resources in the .NET frameworks easily and in the way you want. With a smart compiler that provides access to alternate syntax that gives you the freedom to write code so that it is readable for you, I'm happier than ever to be using C#.

Over the next few weeks, I'm going to write additional entries in this series about my favorite features of C#. What do you like about the language? What do you want to see some discussion and samples of? I'll be back next week with more C# features to discuss.

Looking to get started learning C#? Checkout our free on-demand courses on Microsoft Learn! Every Monday, check out my C# with CSharpFritz live-video training series on Twitch and archived on YouTube

Top 7 OBS Studio Tricks for 2020 – and you won’t believe #4

Jeffrey T. Fritz — Thu, 23 Jul 2020 13:38:44 +0000

I’m writing this blog post live on stream on July 23, 2020 with about 100 folks watching over my shoulder. We’re discussing some of the techniques that I use to assemble and broadcast my regular Twitch stream, and I wanted to share some of those links and features with you.

Let’s start with OBS plugins and tricks that I use.

I broadcast and produce video using OBS Studio, a free and open-source project. They have a patreon available to support the development of this valuable tool that so many streamers use. I encourage you to support their project with a donation.

1. Closed Captioning in the Cloud

Everyone who tunes in to your stream should be able to participate, especially those folks who might not be able to hear you or people who don’t primarily speak your language. There are a number of different plugins and extensions that will provide closed captioning for you, but they have accessibility issues EXCEPT for the Twitch video player closed captioning.

Twitch’s video player has a keyboard accessible closed-captioning button and it also allows the viewers to change font and color. Importantly, screen readers can access this content AND the captions persist in the video archive.

I recommend using the Cloud Closed Captions plugin from ‘ratwithacompiler’ and available on GitHub. Once added to OBS, you can easily configure an audio source to monitor and create captions from. This allows you to isolate just your microphone from any music so that JUST your voice is transcribed.

Configuration of the Cloud Closed Caption plugin in OBS Studio

2. NewTek NDI Plugin

I connect OBS Studio to output video to Skype, Microsoft Teams, and other communication software as well as to bring video in from other video sources on my local network. NewTek makes their NDI video streaming technology available for free and you can connect it OBS with the OBS-NDI plugin and run the NDI Tools to begin piping video into and out of your favorite communication applications.

NDI Output Settings from OBS Studio

Installation of the OBS-NDI Plugin allows you to both export video as a streaming video source, and also consume a NDI streaming video as a source in your production. This screenshot above allows you to configure your output from OBS.

The ‘Add Source’ dialog with NDI Source now available

When you add an NDI Source to a scene, you can choose the streaming source and configure it in a screen like the following:

Configuring an NDI Video Source for a scene in OBS

The ‘Source Name’ is the name of the NDI streaming video that you want to capture. Bandwidth and Sync effect the connection speed and delay in your video. I highly recommend pushing this to ‘Highest Bandwidth’ and ‘Source Timing’ for real-time video interactions.

Finally, when you embed one of these NDI sources in OBS, you must use the ‘fit to frame’ and Scale to Inner Bounds features to ensure any reduction in bandwidth does not skew the size of your video. Right-click on the video-source, choose Transform – Edit Transform and set the ‘Bounding Box Type’ to ‘Scale to inner bounds’. You can also use the Ctrl+F hotkey to force this behavior.

3. Custom Transitions

I recently re-themed my stream with new backgrounds and a cool custom transition (or stinger as folks in the TV biz call it). My friend Jaynius Gaming put together these assets and I am now able to configure a webm movie file to display as my transition between scenes.

You can add a video file to be used as a transition by clicking the + underneath the ‘Scene Transitions’ header in OBS Studio and configuring in this screen:

Custom Transition Configuration screen

I have added my transition animation and specified the exact frame when the screen is completely covered to change from one scene to the next. For my transition, which doesn’t have any audio, I do not want any audio changes or fading between scenes. I can click the ‘Preview Transition’ button to test the animation.

My new custom transition in OBS

4. Move Transitions

Fade and cut transitions in OBS Studio are simple but not too elegant. I’ve learned how to make my scene transitions look a little more fluid by using the Move Transition plugin. With this plugin, any matching video sources from one scene to the next will gracefully move to their new locations when changing scenes.

Configuration of the Move transition

There are a bunch of options here, but I use it with the default configuration to allow my content to move around the screen as I change scenes. You’ll see this when I transition between the various full-screen background scenes.

Sample of the Move transition at work on my stream

5. Multiple Actions in StreamDeck

The next technique is a trick to make several animations appear as one fluid transition without having to press a bunch of buttons and manually trigger interactions with OBS Studio. The StreamDeck software has the ability to trigger multiple actions from one button press. Here is the set of actions that I trigger for the animated GIF above:

The Multiple Actions configuration in StreamDeck

Under the ‘StreamDeck’ actions section you can choose ‘Multi Action’ and configure one button to trigger multiple OBS Scenes. In the above Multi Action, I hide the sources that I don’t want to appear and start activating with a timer each of the scenes the compose the overall animation. The timer is set to the duration of each animation segment.

6. Transition Override Matrix Plugin

With all of these new techniques to animate and transition between scenes in OBS Studio, we will want a little more control over how each transition animation activates between scenes. The Transition Override Matrix pluginallows you to specify the exact animation to be used from one specific scene to another.

The transitions for my stream to effect the various animation and my custom stinger

The scenes listed down the left side, in the rows are the source scenes or where you will be transitioning FROM and the columns are the scenes that you will be transitioning to. Right-click on a box to set a specific transition to show when changing between those two scenes.

7. Featured.Chat

The chat room on Twitch is a phenomenal resource and when we’re in Ask Me Anything mode, I want to be able to highlight the current question and answer it clearly on video. Featured.Chat allows me to review the chatroom content and queue up messages to appear nicely on screen.

Featured.Chat message on screen

Featured.Chat is maintained by Slevinth Heaven, and is embedded in OBS as a browser source. I can select messages and put them live on screen using their chat console in another browser:

The Featured.Chat Administration console

I have mine configured with a notification bell so that if a moderator puts a message live on screen, I will hear and recognize it.

Summary

These are techniques that I’ve used in 2020 to make my video production look unique and appear more professional for my viewers. There are tons of OBS Plugins that you can download and try out for recordings or live streams. What are some of your favorite tips for getting more out of OBS Studio? Let me know in the comments below.

Minimal March – Part 2 : .NET on a Chromebook

Jeffrey T. Fritz — Wed, 04 Mar 2020 14:32:23 +0000

After writing my previous post in this Minimal March series, it was pointed out to me that my approach is still a little bit of ‘gatekeeping‘. I was using a very expensive machine with lots of memory and drive space in a virtual machine. What about those folks that don’t have access to these resources? Let’s knock down those doors and show that ANYONE ANYWHERE can be a .NET developer.

I set the following parameters for myself, to ensure that I was getting a computer that just about anyone could acquire:

Purchase a laptop at my local discount retail shop, a Walmart in my case.
Spend less than $200
It must be a Chromebook – this is now very common in high-schools here in the US
Configure it with .NET developer tools and work on productive software on my Twitch stream

… and it worked.

Watch Minimal March PIVOT! Live Coding .NET on a Chromebook !coffee from csharpfritz on www.twitch.tv

Urban Dictionary defines Gatekeeping as the following:

When someone takes it upon themselves to decide who does or does not have access or rights to a community or identity.

Urban dictionary

I’ve seen this in our technical and software development communities on Twitter, Reddit, in-person, and even at conferences. Teens and college graduates are again and again told that they can’t be considered a ‘real developer’ unless they use technology X where X is the “cool” or “hip” tools to use this month. How many developers do you see in the San Francisco area that DON’T carry Mac laptops? At Microsoft technology events, how many presenters are carrying a Surface Book?

For a developer presentation at an event, it is GOOD to have a fast, brand-name machine so that your demos work quickly and you can get access to spare parts easily should something go wrong. If you’re someone interested in getting started in software, there is NO NEED to spend $3,000 on that fully-loaded Mac Book, Alienware, or Surface Book. Let’s get started with something simple, something you can access without taking out a loan.

Yes, we could build a machine around a Raspberry Pi. That would require some technical knowledge, acquiring a display, adding a keyboard and mouse and not being at all practical for students or developers to carry with them to school, the local coffee shop, or the office.

The Walmart Challenge

Walmart has a great cross-section of technology at their retail stores. You can find iPhones, Playstation 4, XBox, laptops and other expensive systems right next to very inexpensive Android phones, tablets, and Chromebooks. Every town in North America has at least one Walmart, and I visited my local store on Monday evening this week in search of a bargain.

// Detect dark theme var iframe = document.getElementById('tweet-1234634393429381123-498'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1234634393429381123&theme=dark" }

I did a quick walk through the computer section and looked at the candidates. Here is what I found:

Shopping for $200 Chromebooks at Walmart

… and I settled on this HP Chromebook 14, saving $50 off the list price and coming in JUST under my $200 budget.

4GB of RAM and 32GB of drive space with an AMD A4. This would be a tight fit, but we should be able to write code and build web applications on it.

Installing Linux

“Installing” is probably the wrong term and “Activating” is the better term now. With the latest versions of ChromeOS, Google now has instructions for installing Linux on your Chromebook available. I couldn’t believe that it would be THIS easy:

Installing Linux on a ChromeBook - It's THAT easy

After a few minutes, I had a terminal running that had ALL of the Linux features I wanted. I couldn’t believe it was that easy… but there are some limitations:

That Linux instance is running inside of a container
It’s named ‘penguin’ and as much as you might want to rename it, that penguin name is going to come back
Interactions with the Chrome UI aren’t easy
Forget about fonts

Those last two items were a little hard for me. I have a set of fonts that I like to use while developing, and I fought the good fight.

Fonts, Developer Mode and Bricks

There currently is no way to install fonts on ChromeOS through the native menu and user-interface. After some searching online, I found some instructions about rebuilding the hard drive in 'developer mode'. The steps for this are not hard to follow, but require you to change the drive partition that ChromeOS boots from. Furthermore, developer-mode requires you to use a Ctrl+d keystroke to activate the machine at boot time. When you configure developer-mode you will be presented this screen:

With Developer Mode activated, you can read and write to the entire disk. Brilliant! I can copy my fonts into an appropriate folder and activate them. After placing them in the /usr/local/share/fonts folder and fighting with font utilities for about an hour, I shut down the machine and went to dinner.

When I returned, I accidentally pressed the spacebarINSTEAD ofCtrl+d to activate my Chromebook… and this happened:

Uh oh…

Fortunately, there is a very well documented system restore process for ChromeOS. After restoring the OS, I decided to abandon Developer Mode going forward.

FiraCode in the ChromeOS Terminal

The ChromeOS terminal is actually more akin to a web page that you can format with CSS. It’s not, in my exploration, able to see into the files and folders on your Linux container running in the terminal. However, you can configure it with some custom CSS to use fonts that are available on the web.

The folks working on the FiraCode font made directions available to add their font as a font-family and CSS markup to enable it in the terminal. It’s not perfect, but now my eyes are more at rest with the font-ligatures and fixed-width text for coding.

Adding my Linux Configuration

I took my previous configuration from my last blog post and stashed it on my GitHub as a repository called dotfiles that I could download to any machine with a git client. I added my current .bashrc, .vimrc, and wallpapers to the repository and copied the git commands from my previous blog post into a series of scripts to help me fetch and configure the plugins for vim.

Once the repository was cloned locally, I ran the scripts in the /bin folder and I had Omnisharp, EditorConfig, and the NERDTree plugins installed along with my fonts downloaded, and the git features for my prompt configured.

Installing the .NET SDK

The .NET SDK was just as easy to install as it was in my previous blog post, and the same instructions from my installation in a Linux VM worked again. This time, instead of getting a 64-bit version of the SDK, I got an AMD 64-bit optimized version. I can write the same code, target the same .NET Core libraries, and the appropriate runtime for my Chromebook would execute the code for me.

Performance

Performance, well this is where things start to slow down. This machine has a dual-core processor running at 1.8 GHz. Compiling and running my Blazor project and unit tests took a very long 20-30 seconds instead of the snappy 3 seconds that I was used to in the Linux VM.

It WORKED, and that’s the important part, but I think we can do better. I’m going to work on optimizing some build scripts to make this run quicker going forward.

Summary

I’m going to continue to work with this Chromebook for the rest of this week and probably next week as well. Let’s see how much performance we can squeeze out of this little machine and maybe even generate some scripts to help other developers who are working with similar machines and configurations.

Minimal March – Part 1: Getting Started with .NET and C# at the Command-line

Jeffrey T. Fritz — Mon, 02 Mar 2020 15:56:55 +0000

I wrote this tweet roughly a week ago about the state of .NET development that I was seeing on Twitter:

// Detect dark theme var iframe = document.getElementById('tweet-1231216659077181440-601'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1231216659077181440&theme=dark" }

I see ‘Minimal March’ as a developer challenge for me, I’m someone who has spent the majority of the last 15 years working in a version of Visual Studio and C#. Let’s take away those comfortable and productive tools and expose me to more operating systems and more ways that folks can write applications. In this post, I’m going to outline the parameters of this .NET development event and show my initial configuration on Linux. I built this configuration live on Twitch stream on March 1, 2020.

Watch Minimal March begins! .NET and Blazor development with text editors and command-line tools. !coffee from csharpfritz on www.twitch.tv

The Parameters

This event is all about using the smallest, least expensive, and most customizable tools to build .NET applications that are NOT provided by Microsoft. To that end, I’m starting with the following configuration:

This configuration provides minimal ‘big productivity’ features out of the box, but allows us to build console and server applications easily with just a terminal window and a browser.

Snapshot of my configuration at the conclusion of this article

Installation Steps

I followed the instructions on the .NET website to install the .NET SDK v3.1.2 and command-line tools using a package manager on my fresh Linux VM. After adding the required Microsoft repository configuration from those linked directions, I was able to run the following command to install .NET:

sudo apt-get install dotnet-sdk-3.1

I love seeing a very Linux-friendly way to work with .NET, right from the start.

Next, I wanted to enable syntax highlighting and type-ahead for my *.cs source code in vim. Fortunately, there is the community-owned Omnisharp project that provides support for vim. BUT… its not as simple as an apt-get command to install.

Preparing vim

vim (not vi, I made that mistake) is EXTREMELY versatile and can do many things, including running plugins when a plugin-manager is installed. For my configuration, I was able to use the built-in package manager for vim and just clone some files into my local directory to activate these plugins. First up was adding the Omnisharp plugin with a simple command to fetch from GitHub:

git clone git://github.com/OmniSharp/omnisharp-vim ~/.vim/pack/plugins/start/omnisharp-vim

Next, I wanted a file-browser in vim. For this, I was recommended to try out NERDTree and installed that with this command:

git clone https://github.com/preservim/nerdtree.git ~/.vim/pack/vendor/start/nerdtree

Finally, I wanted to add the ability to enforce my EditorConfig settings using the .editorconfig configuration from the project folder. Fortunately, there’s an editorconfig plugin to handle this too:

git clone https://github.com/editorconfig/editorconfig-vim.git ~/.vim/pack/local/start/editorconfig-vim

I created my first .vimrc file with the following entries to make it a little easier to get around:

set nocompatible
filetype indent plugin on

map <C-n> :NERDTreeToggle<CR>
set number " show line-numbers
set tabstop=2 " tab width is 2 spaces

I can now use Ctrl+n to open and close my “file-explorer”, the NERDTree. I’ve also turned on line numbers and set my tab-width to my preferred two spaces so that I can fit more code on screen during screencasting.

On-screen keystrokes

I normally use Carnac on Windows to show my hotkeys and interactions with the Visual Studio editor while screencasting on Twitch or giving presentations. For my minimal approach on Linux, I added screenkey to handle this task for me:

sudo apt-get install screenkey

I tuned the configuration slightly, primarily to ensure that it only showed the keystrokes that included modifier keys like Ctrl, Shift, or the Windows key. This helps prevent me from showing the world my password as I type it in.

screenkey configuration on my machine

Git command-prompt

In Windows, I use the excellent posh-git to tell me the current start of my git repository when I’m working in a folder that has git-managed assets. For Linux, I installed the bash-git-prompt from magicmonty to improve the look of my terminal:

git clone https://github.com/magicmonty/bash-git-prompt.git ~/.bash-git-prompt --depth=1

I then added this entry to my ~/.bashrc configuration for the terminal:

if [-f "$HOME/.bash-git-prompt/gitprompt.sh"]; then
    GIT_PROMPT_ONLY_IN_REPO=1
    source $HOME/.bash-git-prompt/gitprompt.sh
fi

Done. Now I have my source code status at the command-line. It could look cooler, but for a default configuration it works for me.

tmux

Next, I started using tmux, the terminal multiplexer. This allows me to split my terminal window so that I can have multiple command-line experiences on-screen at once. I’m not too familiar with the configuration of tmux yet, and I know I can customize tmux to run the way that I want it to with the panels and colors tuned for me… but that’s a separate blog post.

To get started, I launched tmux with the tmuxcommand and used the default configuration. I added two vertical panels to the right with the following keystrokes:

Ctrl+b %
Ctrl+b "

I then was able to shrink my right panel by hitting Ctrl+b and HOLDING the Ctrlkey while I pressed the right-arrow key several times to make the panel the width I desired. See the image at the top of the article for the width I set mine to. This operation is tedious, and I really want to save it to a configuration file so that tmux just looks RIGHT to me when I start it next time.

I can move around the panels in tmux by using the Ctrl+b <arrow-key> keystrokes in the direction I want to move the cursor. Note that you do NOT hold the Ctrl key when you press the arrow keys when executing this gesture.

Panel Configurations

In my configuration, I set the larger left-panel for my code editing experience. The top-right panel will run my webserver with the dotnet watch run command so that I can see the logs and I can restart it without impacting the rest of my configuration.

The lower-right panel will run my unit-tests with the dotnet watch test command. This way, as I change my code in the left panel, my tests automatically re-run and I know if I broke anything.

I think I need some scripts to automate these panels and I may change their font-size as well as move them around a little to make it easier to see all of the logs.

Next Steps

I’ve got a serviceable configuration at this point. I can build and run .NET Core, Blazor, and ASP.NET Core applications in Linux all at the command line. There are so many things that I can configure to automate and make my development easier, but at this point I feel like I have assembled my very own “Command-Line Visual Studio”.

I want to archive the git commands that I used to fetch my vim plugins and store my .vimrc on GitHub so that I can fetch them on other machines that I want to replicate this experience on.

The color and font themes in my console are not the most appealing to me. I’d really like to install Cascadia Code, a fresh vim color theme, and get that tmux configuration under control. The command-line for git could look better and I’d like to see some other status information on the tmux status bar. But that… is another blog post and Twitch session.

What’s Old is New Again – Web Forms meets Blazor

Jeffrey T. Fritz — Mon, 06 Jan 2020 20:55:15 +0000

BLAZOR!

I live for these types of conversations: “Hey, is there a way to upgrade my application to the new framework?” The answer is almost ALWAYS no, because the person asking me has already searched the web and is looking for some secret upgrade technique from me. This time, this conversation, well it was a bit more interesting.

“Hey Jeff, Blazor Server-Side and ASP.NET Web Forms are pretty similar in concepts. They both render code on the server and both have a component-based model. Is there a way we could somehow re-use markup between the two frameworks?” That question not only got my interest, but also started some interest with my colleague Dan Roth. We were planning to go on stage at Microsoft Ignite 2019 and talk about Blazor for Web Form developers… when Dan had the idea: “What if we had a shim, a component library that LOOKED and rendered HTML like the original ASP.NET controls? That could help with migration.”

The Concept

The idea is simple: ASP.NET Web Forms is not available to develop with .NET Core, but Blazor is. What if we could make it as simple as possible to copy your ASPX markup into a Blazor project and get the same markup delivered to the browser? We don’t want to enable developers to continue to develop with the same model, but to get their applications using the same UI, the same presentation that they’ve been using for years and a path forward. That is the goal.

This would require some components, some shims and maybe some trickery to make the default components from the Web Forms framework work. With that, we set out to try to make something simple as a proof of concept.

The Proof of Concept

Dan and I talk about the Blazor framework and what it means for Web Forms developers in a segment starting at 2:03:00 from Microsoft Ignite Live 2019

There are MILLIONS of ASP.NET Web Forms applications out there, and in our sample we showed an application with a few controls in use, but targeted this implementation (original source available):

<asp:ListView ID="productList" runat="server" 
    ItemPlaceholderID="itemPlaceHolder" ItemType="eShopLib.CatalogItem">
    <EmptyDataTemplate>
        <table>
            <tr>
                <td>No data was returned.</td>
            </tr>
        </table>
    </EmptyDataTemplate>
    <LayoutTemplate>
        <table class="table">
            <thead>
                <tr class="esh-table-header">
                    <th></th>
                    <th>Name</th>
                    <!-- SNIP -->
                </tr>
            </thead>
            <tbody>
                <asp:PlaceHolder runat="server" ID="itemPlaceHolder"></asp:PlaceHolder>
            </tbody>
        </table>
    </LayoutTemplate>
    <ItemTemplate>
        <tr>
            <td>
                <image class="esh-thumbnail" src='/Pics/<%#:Item.PictureFileName%>' />
            </td>
            <td><%#:Item.Name%></td>
            <!-- SNIP -->
        </tr>
    </ItemTemplate>
</asp:ListView>

This is a ListView being used to present a table of products with Edit, Details, and Delete links on the side. (For this article, I’ve trimmed the width of the table for readability.) Dan replicated the capabilities of this control using a custom Blazor component, also called ListView and we used this code to present the same UI but with Blazor (original source):

<ListView Items="Model.Data" TItem="CatalogItem">
    <EmptyDataTemplate>
        <tr>
            <td>No data was returned.</td>
        </tr>
    </EmptyDataTemplate>
    <TableHeader>
        <tr class="esh-table-header">
            <th></th>
            <th>Name</th>
            <!-- SNIP -->
        </tr>
    </TableHeader>
    <RowTemplate Context="catalogItem">
        <tr>
            <td>
                <img class="esh-thumbnail" src="@($"/Pics/{catalogItem.PictureFileName}")">
            </td>
            <td>
                <p>@catalogItem.Name</p>
            </td>
            <!-- SNIP -->
        </tr>
    </RowTemplate>
</ListView>

The tags are similar, the inner templates behave the same but have different names, and the formatting of the content inside the templates is ALMOST identical save for the change from <% %> notation to @( )

What If…

What if we could make this conversion even closer? I took some next steps and improved the capabilities of the ListView component so that we could now have this code output the same content as above:

<table class="table">
    <thead>
        <tr class="esh-table-header">
            <th></th>
            <th>Name</th>
            <!-- SNIP -->
        </tr>
    </thead>
    <tbody>
      <ListView @ref="productList" runat="server" Context="Item"
          ItemPlaceholderID="itemPlaceHolder" ItemType="eShopLib.CatalogItem">
          <EmptyDataTemplate>
                  <tr>
                      <td>No data was returned.</td>
                  </tr>
          </EmptyDataTemplate>
          <ItemTemplate>
              <tr>
                  <td>
                      <image class="esh-thumbnail" src='/Pics/@Item.PictureFileName' />
                  </td>
                  <td>@Item.Name</td>
                  <!-- SNIP -->
              </tr>
          </ItemTemplate>
      </ListView>
    </tbody>
</table>

Now we’re talking! By moving the LayoutTemplate content outside the ListView component, the rest of the ItemTemplate looks very similar. Almost all of the attributes on the ListView component are the SAME, with the only exception is the id attribute being renamed to @ref. The only addition is the Context attribute so that the Item object could be used in our templates.

What Next?

We think there’s an opportunity to make open source components to help facilitate this type of copy and paste conversion from simple Web Forms and controls. We’re just at the beginning of this process, but have opened a project on GitHub to analyze and work through these controls. This is NOT a Microsoft supported project, but rather a concept that I and my community of friends are working through to see what benefit it could have.

I have been diligently working on these components live on my Twitch stream, and have taken time off camera to work on documentation, samples, and some general clean up work.

The LiveView, Repeater, and DataList are all under construction as of the writing of this article. Simple ModelBinding to read and present data, data binding by specifying a DataSource all works with these controls. We’ve even added obsolete warnings if you copy over code that contains ViewState or runat="server" references.

The components are packaged using Azure DevOps and deployed NuGet as the Fritz.BlazorWebFormsComponents package If this is something that you are interested in seeing grow and give these older applications new life, please open some issues or send a pull request.

DEV Community: Jeffrey T. Fritz

Blazor and .NET 8: How I Built a Fast and Flexible Website

Static Site Rendering – Its Blazor, but easier

Data is stored in static files on disk

Pre-rendered Interactive Web Assembly Content is fast… REALLY fast

Compress the Content from Kestrel

Optimize all the JavaScript and CSS

Set long cache-control headers for static content

Summary

I built an Android app on my Linux machine using .NET 7 and MAUI

NOTE: Your experience might be different

Build APIs for the Web INSTANTLY with ASP.NET Core 6

Enter Minimal APIs

Generate the code... do it in 1 line

My Favorite C# Features - Part 5: Build for the Modern Web with Blazor

What is Blazor?

Web Assembly AND Server version?

How do I get started?

Sample Page

Community Support and Interactions

AdrienTorris / awesome-blazor

Resources for Blazor, a .NET web framework using C#/Razor and HTML that runs in the browser with WebAssembly.

Awesome Blazor

Contents

Introduction

What is Blazor?

Summary

My Favorite C# Features - Part 4: Project Structure

C# File Structure

Project Structure

Project Naming

Folder Structure

Next Folders to introduce

Introducing Unit Testing

Evolving From Folders to Projects

Summary... for now

My Favorite C# Features - Part 3: Nullability

Why null?

Nullable Contexts and Compiler Warnings to the Rescue!

Declaring a Reference Type as Nullable

Project-wide Nullable Checking

Disable Nullable Checking

The Final Step

Summary

My Favorite C# Features Part 2: LINQ

Where - Find Some Data and Return It

Are ANY of these Hats from before 2010?

Count those hats

Sorting done simply

Project your output with Select

Group By FTW!

Summary

My Favorite C# Features - Part 1: Strong-types, Implicit-types, Anonymous-types, and Target-types

In the beginning, there was explicit-typing

Enter Implicit-Typing and Initializers

Types aren't for me - Anonymous Types

Welcome to 2021 - Target-Types

Summary

Top 7 OBS Studio Tricks for 2020 – and you won’t believe #4

1. Closed Captioning in the Cloud

2. NewTek NDI Plugin

3. Custom Transitions

4. Move Transitions

5. Multiple Actions in StreamDeck

6. Transition Override Matrix Plugin

7. Featured.Chat

Summary

Minimal March – Part 2 : .NET on a Chromebook

The Walmart Challenge

Installing Linux

Fonts, Developer Mode and Bricks

FiraCode in the ChromeOS Terminal

Adding my Linux Configuration

Installing the .NET SDK

Performance

Summary

Minimal March – Part 1: Getting Started with .NET and C# at the Command-line

The Parameters

Installation Steps

Preparing vim