Code Highlight with Blazor

Previously I had a post on adding code highlight to Blazor websites. In this post I will improve the previous solution by using the Monaco Editor instead of the PrismJS library.

Syntax Highlight

Syntax highlight is used colorize the source code based on each word's category. For example, keywords can be one color or type names and variables can use another font color. In Blazor previously I have shown how PrismJS can be used to highlight source code. Another approach is to use Monaco Editor. Monaco Editor is a code editor that powers VS Code. It has tremendous amount of features, way more than required for code highlighting. Using it for code highlight might sound controversial, but it is the same component as used by one of the most used code editors, so it looks and feels familiar.

The Monaco Editor is a JavaScript based component, so it can be used through JavaScript interop within Blazor. Fortunately, there is already an existing Blazor interop version of Monaco Editor, BlazorMonaco. This version is a community based Blazor component, wrapping the Monaco Editor.

Find out more

What is my carbon footprint?


Global warming is an environmental issue ongoing in the past years. It is about the planet Earth heating up. One major cause of the warming is the greenhouse effect. Certain gases, such as CO2, keep the heat within the Earth atmosphere. These gases get into the air by burning fossil fuels such as coal, oil or natural gas. Fossil fuels contain a lot of carbon, which is when burnt, combines with oxygen to form carbon dioxide.

One of the main solutions to avoid global warming is to replace fossil fuel energy sources with renewables, such as wind, solar, hydropower etc. Another carbon free energy source is nuclear energy, which has a different set of challenges to solve.

To learn more about this visit this article by the National Geographic.

Find out more

Thread Counters for Performance Metrics

In the previous posts I have looked into unit testing custom performance counters and interpreting the built-in CPU counter. In this post I will investigate on using some of the thread related counters. When using dotnet-counters we get a couple of useful counters:

Number of Active Timers                            0
ThreadPool Completed Work Items / sec             17
ThreadPool Queue Length                          703
ThreadPool Threads Count                           9

On the above sample we can see there are 703 work items queued on the ThreadPool, there are 9 threads in the pool, and 17 items has been completed since the last update, ~1 sec. This is a quite long queue compared to the work items completed in the last sec - should raise some concerns. Indeed my test application starts up a 1000 tasks, where each task uses the same lock to request mutual exlcusion for a code path which calls Thread.Sleep(). Another counter shows the contention on the locked object:

Monitor Lock Contention Count / sec               13

Find out more

EventListeners for CPU metrics


EventListeners can be used to subscribe to built-in events of the .net core. In this post I will show how to subscribe to cpu-usage metric, and I will put the value of this event into context on different platforms.

There can be many reasons to subscribe to built-in events, especially to cpu-usage event counter. Although CPU usage can be monitored by a separate application (such as dotnet-counters), we might want to subscribe to this even within the process too. This way we may push the current resource usage periodically to an application metrics monitoring infrastructure (suck as the ELK or TICK stack). The cpu-usage counter measures the system and user time % used by the process.

The previous post has shown how the eventing infrastructure works within dotnet.

Find out more