Blazor Initializing State

Problem

Using WebAssembly based Blazor is one great technology to create static websites using C# and mono. Unfortunately search engines are not yet good enough to index WebAssembly based websites. A way to overcome this issue is to create a Host service which only does pre-render and serve the files for the static website. This way search engines can load the pre-rendered HTML page, and index that.

When the webassembly based, client side, static page is fully loaded and initialized, the same state must be re-created as the pre-rendered page had during rendering. If initiating this state includes an async operation, such as fetching data from a service, the Blazor client might finish the first render before the required data is available. Without data, the first render will render an empty page. Once the state initialized a new render will re-create the same (or similar) DOM as the pre-rendered page had. Having these 2 renders results a huge 'flash' like experience for the user, where an empty page is rendered for a moment.

Proposal

Find out more


Missing Number Performance Tests 2

A couple of weeks ago, I had a post about a tipical interview question: finding a missing number from an unordered array.

The task goes as follows:

Given an array with integers from 1 to N. The order of the integers is unknown. One of the randomly chosen number is replaced with 0. Create a method that receives the array as an input and returns the replaced number.

I am not going into the details of edge cases, input validation, error handling, etc. This post purely checks the performance aspects of some of the possible solutions. I also assume that N=x*8.

Find out more


Combining hashcodes of objects

Getting a hashcode of an object in C# is not difficult. All objects has a method (defined by Object type) that can get a hashcode for the user: GetHashCode.

It has its own type of knowledge on how and where to use it, or when creating custom types, how to override this. All should be clarified on the documentation linked above.

In this post however, I want to point out that if you have two objects, how you can combine their hashcodes.

Manually

Find out more


Reading List #2

Let me continue my list of favorite books:

  • Windows Runtime via C#, By: Jeffrey Richter and Maarten van de Bospoort

  • Programming Microsoft Azure Service Fabric, By: Haishi Bai

  • Programming Reactive Extensions and LINQ, By: Jesse Liberty; Paul Betts

  • Pro .NET Performance, By: Sasha Goldshtein; Dima Zurbalev; Ido Flatow

  • Writing High-Performance .NET Code, By: Ben Watson

  • Pro .NET Memory Management, By: Konrad Kokosa

Find out more


Using Blazor and Code Highlight

Code highlight or syntax highlight is a feature that displays text as source code. It is using different fonts and colors, that matches with the syntactical meaning of the code constructs. For examples keywords such as public or if are colored blue, while method names such as Main() can be colored to green. Highlighting code on an HTML website is a relatively easy task if one is using an existing syntax highlighter.

Integrating an existing code highlighter with Blazor is a one step more complex though. In this post, I am going integrate a Blazor site with Prism, which is a lightweight extensible code highlighter.

Getting started

The first step with prism is to choose a theme, additional languages and plugins. Prism will generate a CSS file and a Javascript file, which can be downlaoded from their website. Both files then should be added to the wwwroot folder of the Blazor project.

Find out more