Shahzad Khan – Page 3 – My Point of View

.NET Code Analysis with Roslyn Analyzers

NET compiler platform (Roslyn) analyzers inspect your C# or Visual Basic code for style, quality, maintainability, design, and other issues. This inspection or analysis happens during design time in all open files.

Here are the key take aways;

Maintainability index range and meaning

For the thresholds, we decided to break down this 0-100 range 80-20 to keep the noise level low and we only flagged code that was suspicious. We’ve used the following thresholds:

Index value Color Meaning
0-9 Red Low maintainability of code
10-19 Yellow Moderate maintainability of code
20-100 Green Good maintainability of code

Code metrics – Class coupling

“Module cohesion was introduced by Yourdon and Constantine as ‘how tightly bound or related the internal elements of a module are to one another’ YC79. A module has a strong cohesion if it represents exactly one task […], and all its elements contribute to this single task. They describe cohesion as an attribute of design, rather than code, and an attribute that can be used to predict reusability, maintainability, and changeability.”

The Magic Number
As with cyclomatic complexity, there is no limit that fits all organizations. However, S2010 does indicate that a limit of 9 is optimal:

“Therefore, we consider the threshold values […] as the most effective. These threshold values (for a single member) are CBO = 9[…].” (emphasis added)

Code metrics – Cyclomatic complexity

https://learn.microsoft.com/en-us/visualstudio/code-quality/code-metrics-cyclomatic-complexity?view=vs-2022

Cyclomatic complexity is defined as measuring “the amount of decision logic in a source code function” NIST235. Simply put, the more decisions that have to be made in code, the more complex it is.

The Magic Number
As with many metrics in this industry, there’s no exact cyclomatic complexity limit that fits all organizations. However, NIST235 does indicate that a limit of 10 is a good starting point:

“The precise number to use as a limit, however, remains somewhat controversial. The original limit of 10 as proposed by McCabe has significant supporting evidence, but limits as high as 15 have been used successfully as well. Limits over 10 should be reserved for projects that have several operational advantages over typical projects, for example experienced staff, formal design, a modern programming language, structured programming, code walkthroughs, and a comprehensive test plan. In other words, an organization can pick a complexity limit greater than 10, but only if it’s sure it knows what it’s doing and is willing to devote the additional testing effort required by more complex modules.” NIST235

As described by the Software Assurance Technology Center (SATC) at NASA:

“The SATC has found the most effective evaluation is a combination of size and (Cyclomatic) complexity. The modules with both a high complexity and a large size tend to have the lowest reliability. Modules with low size and high complexity are also a reliability risk because they tend to be very terse code, which is difficult to change or modify.” SATC

Putting It All Together
The bottom line is that a high complexity number means greater probability of errors with increased time to maintain and troubleshoot. Take a closer look at any functions that have a high complexity and decide whether they should be refactored to make them less complex.

Code metrics – Depth of inheritance (DIT)

Depth of Inheritance. Depth of inheritance, also called depth of inheritance tree (DIT), is defined as “the maximum length from the node to the root of the tree”.

High values for DIT mean the potential for errors is also high, low values reduce the potential for errors. High values for DIT indicate a greater potential for code reuse through inheritance, low values suggest less code reuse though inheritance to use. Due to lack of sufficient data, there is no currently accepted standard for DIT values.

You can read full article here;

https://learn.microsoft.com/en-us/visualstudio/code-quality/code-metrics-values?view=vs-2022

Add following nuget package in your project;

Microsoft.CodeAnalysis.NetAnalyzers

Integration in Azure DevOps

To integrate in Azure DevOps, follow this article;

https://secdevtools.azurewebsites.net/helpRoslynAnalyzers.html

Front-End Development Trends

When HTML was first created, it was used to present some basic formatting. You could bold certain text, you could underline certain text, etc. Later, this activity became interactive with forms. Over time, these forms became more complicated and AJAX-based tools really unleashed the possibility of what could be possible in a browser. Then, paired with the additional complexity of security and the fact that accessibility has become extremely important and essential, our plain old HTML friend started clearly showing its age. As a result, HTML had to evolve.

These days, the vast majority of new applications are served through the browser. In fact, sit back and think about it: How many new products that have been launched in the last 10 years that you use on your laptop or desktop are not web applications?

Most of these websites have some common features. They all seem to have a header, paragraphs, navigation footers, etc. For the longest time, we’ve been trying to twist tags, like div and span, with some clever CSS to act like a header, paragraphs, navigation footers, etc. Semantic HTML changes that.

Semantic HTML is a way of writing HTML that focuses on the meaning of the content rather than just its presentation. It involves using HTML elements that describe the structure and purpose of the content, making it more readable, accessible, and maintainable. Semantic HTML uses elements that provide meaning to the structure of the web page.

Semantic HTML is a standard, as defined by the World Wide Web Consortium (W3C) and maintained by the WHATWG (Web Hypertext Application Technology Working Group). The HTML specification, which includes the definition of semantic HTML elements, is a standard document that outlines the syntax, structure, and semantics of HTML. This specification is maintained by the WHATWG and is widely adopted by web browsers and other HTML parsers.

The use of semantic HTML elements, such as <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>, and others, is mandated by the HTML specification. These elements provide a standardized way to define the structure and meaning of web content, making it easier for browsers, search engines, and other tools to understand and interpret the content.

Although there may be some flexibility in how semantic HTML elements are used, the specification provides clear guidelines on their usage and meaning.

Semantic HTML in practice means that instead of writing…. this article is continued online. Click here to continue.

Conditional Nested Validation with FluentValidation

This example demonstrating how to conditionally validate nested objects using FluentValidation’s When method.

Scenario

Let’s say we have:

A Person class with an Address property
We only want to validate the Address when HasAddress is true

Model Classes

public class Person
{
    public string Name { get; set; }
    public bool HasAddress { get; set; }
    public Address Address { get; set; }
}

public class Address
{
    public string Street { get; set; }
    public string City { get; set; }
    public string ZipCode { get; set; }
}

Validator Implementation

public class PersonValidator : AbstractValidator<Person>
{
    public PersonValidator()
    {
        // Always validate name
        RuleFor(x => x.Name).NotEmpty().MaximumLength(100);
        
        // Only validate address when HasAddress is true
        When(x => x.HasAddress, () => 
        {
            RuleFor(x => x.Address)
                .NotNull()
                .WithMessage("Address must be provided when HasAddress is true");
                
            RuleFor(x => x.Address.Street)
                .NotEmpty()
                .When(x => x.Address != null)
                .WithMessage("Street is required");
                
            RuleFor(x => x.Address.City)
                .NotEmpty()
                .When(x => x.Address != null)
                .MaximumLength(50);
                
            RuleFor(x => x.Address.ZipCode)
                .NotEmpty()
                .When(x => x.Address != null)
                .Matches(@"^\d{5}(-\d{4})?$");
        });
    }
}

Alternative Approach (Using Child Validator)

public class PersonValidator : AbstractValidator<Person>
{
    public PersonValidator()
    {
        RuleFor(x => x.Name).NotEmpty().MaximumLength(100);
        
        When(x => x.HasAddress, () => 
        {
            RuleFor(x => x.Address)
                .NotNull()
                .SetValidator(new AddressValidator());
        });
    }
}

public class AddressValidator : AbstractValidator<Address>
{
    public AddressValidator()
    {
        RuleFor(x => x.Street).NotEmpty();
        RuleFor(x => x.City).NotEmpty().MaximumLength(50);
        RuleFor(x => x.ZipCode).NotEmpty().Matches(@"^\d{5}(-\d{4})?$");
    }
}

Usage Example

var person = new Person 
{
    Name = "Khan",
    HasAddress = false,
    Address = null
};

var validator = new PersonValidator();
var result = validator.Validate(person); // Won't validate address

Key Points:

The When condition determines whether the nested rules should execute
The nested rules are only evaluated if HasAddress is true
We still need null checks for the address object itself
The second approach using a separate validator is cleaner for complex nested objects

This pattern is useful when you want to validate complex objects only in certain scenarios, reducing unnecessary validation overhead.

Recommended UI Approaches for Azure AI Services Output

When displaying output from Azure AI services (like Cognitive Services, OpenAI, etc.), the UI should be tailored to the specific service and use case. Here are recommended approaches:

1. Text-Based AI Services (Language, Translation, etc.)

Recommended UI Components:

MudBlazor (for Blazor apps):

<MudPaper Elevation="3" Class="pa-4 my-4">
    <MudText Typo="Typo.h6">AI Analysis</MudText>
    <MudText>@_aiResponse</MudText>
    @if (!string.IsNullOrEmpty(_sentiment))
    {
        <MudChip Color="@(_sentiment == "Positive" ? Color.Success : 
                       _sentiment == "Negative" ? Color.Error : Color.Warning)"
                Class="mt-2">
            @_sentiment Sentiment
        </MudChip>
    }
</MudPaper>

For key phrases extraction:

<MudChipSet>
    @foreach (var phrase in _keyPhrases)
    {
        <MudChip>@phrase</MudChip>
    }
</MudChipSet>

2. Computer Vision/Image Analysis

Recommended UI:

<div style="position: relative;">
    <img src="@_imageUrl" style="max-width: 100%;" />
    @foreach (var obj in _detectedObjects)
    {
        <div style="position: absolute; 
                   left: @(obj.BoundingBox.Left * 100)%; 
                   top: @(obj.BoundingBox.Top * 100)%;
                   width: @(obj.BoundingBox.Width * 100)%;
                   height: @(obj.BoundingBox.Height * 100)%;
                   border: 2px solid red;">
            <span style="background: white; padding: 2px;">@obj.ObjectProperty</span>
        </div>
    }
</div>

3. Chat/Conversational AI (Azure OpenAI)

Recommended UI:

<MudContainer MaxWidth="MaxWidth.Medium">
    <MudPaper Elevation="3" Class="pa-4" Style="height: 60vh; overflow-y: auto;">
        @foreach (var message in _chatHistory)
        {
            <MudCard Class="my-2" Elevation="1">
                <MudCardHeader>
                    <MudAvatar>@(message.Role == "user" ? "U" : "AI")</MudAvatar>
                    <MudText Typo="Typo.subtitle2">@message.Role</MudText>
                </MudCardHeader>
                <MudCardContent>
                    <MarkdownString Value="@message.Content" />
                </MudCardContent>
            </MudCard>
        }
    </MudPaper>
    
    <MudTextField @bind-Value="_userMessage" 
                 Label="Type your message" 
                 Variant="Variant.Outlined"
                 FullWidth
                 Class="mt-4">
        <Adornment>
            <MudButton OnClick="SendMessage" 
                      Icon="@Icons.Material.Filled.Send"
                      Disabled="@_isProcessing" />
        </Adornment>
    </MudTextField>
</MudContainer>

4. Form Recognizer/Data Extraction

Recommended UI:

<MudTable Items="@_extractedData" Hover="true">
    <HeaderContent>
        <MudTh>Field</MudTh>
        <MudTh>Value</MudTh>
        <MudTh>Confidence</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd>@context.FieldName</MudTd>
        <MudTd>@context.Value</MudTd>
        <MudTd>
            <MudProgressLinear Value="@(context.Confidence * 100)" 
                              Color="@(context.Confidence > 0.9 ? Color.Success : 
                                     context.Confidence > 0.7 ? Color.Warning : Color.Error)"/>
        </MudTd>
    </RowTemplate>
</MudTable>

5. Custom Decision/Recommendation Services

Recommended UI:

<MudGrid>
    @foreach (var recommendation in _recommendations)
    {
        <MudItem xs="12" sm="6" md="4">
            <MudCard Elevation="5" Class="h-100">
                <MudCardHeader>
                    <MudAvatar Color="Color.Primary">@recommendation.Score.ToString("P0")</MudAvatar>
                    <MudText Typo="Typo.h6">@recommendation.Title</MudText>
                </MudCardHeader>
                <MudCardContent>
                    @recommendation.Description
                </MudCardContent>
                <MudCardActions>
                    <MudButton Variant="Variant.Text" Color="Color.Primary">View Details</MudButton>
                </MudCardActions>
            </MudCard>
        </MudItem>
    }
</MudGrid>

Best Practices for Azure AI UI

Visual Feedback:

Show loading states during API calls

<MudProgressCircular Indeterminate="true" Color="Color.Primary" 
                    Visible="@_isLoading" Class="my-4" />

Error Handling:

@if (!string.IsNullOrEmpty(_errorMessage))
{
    <MudAlert Severity="Severity.Error" Variant="Variant.Filled">
        @_errorMessage
    </MudAlert>
}

Confidence Indicators:

Visualize confidence scores for uncertain predictions

<MudTooltip Text="@($"Confidence: {_confidence:P2}")">
    <MudIcon Icon="@(_confidence > 0.9 ? Icons.Material.Filled.CheckCircle : 
                    _confidence > 0.7 ? Icons.Material.Filled.Warning : 
                    Icons.Material.Filled.Error)"
            Color="@(_confidence > 0.9 ? Color.Success : 
                   _confidence > 0.7 ? Color.Warning : Color.Error)" />
</MudTooltip>

Interactive Exploration:

Allow users to refine/correct AI outputs

<MudTextField @bind-Value="_correctedText" 
             Label="Correct the AI output"
             Visible="@_showCorrectionField" />

Responsive Design:

Ensure UI works across devices

<MudGrid>
    <MudItem xs="12" md="6">
        <!-- Input controls -->
    </MudItem>
    <MudItem xs="12" md="6">
        <!-- AI output -->
    </MudItem>
</MudGrid>

For enterprise applications, consider adding:

Export capabilities (PDF, CSV)
Audit trails of AI interactions
User feedback mechanisms (“Was this helpful?”)
Explanation components for AI decisions

Sharing a Single Model Across Multiple Child Components in Blazor WebAssembly

There are several effective ways to share a single model (data object) between multiple child components in Blazor WebAssembly. Here are the best approaches:

1. Cascading Parameters (Best for hierarchical components)

<!-- ParentComponent.razor -->
@page "/parent"

<CascadingValue Value="@SharedModel">
    <ChildComponent1 />
    <ChildComponent2 />
</CascadingValue>

@code {
    private MyModel SharedModel { get; set; } = new MyModel();
}

<!-- ChildComponent1.razor -->
@code {
    [CascadingParameter]
    public MyModel SharedModel { get; set; }
}

<!-- ChildComponent2.razor -->
@code {
    [CascadingParameter]
    public MyModel SharedModel { get; set; }
}

2. Component Parameters (Best for direct parent-child relationships)

<!-- ParentComponent.razor -->
@page "/parent"

<ChildComponent1 Model="@SharedModel" />
<ChildComponent2 Model="@SharedModel" />

@code {
    private MyModel SharedModel { get; set; } = new MyModel();
}

<!-- ChildComponent1.razor -->
@code {
    [Parameter]
    public MyModel Model { get; set; }
}

<!-- ChildComponent2.razor -->
@code {
    [Parameter]
    public MyModel Model { get; set; }
}

3. State Management Service (Best for app-wide sharing)

// SharedModelService.cs
public class SharedModelService
{
    private MyModel _model = new();
    
    public MyModel Model 
    {
        get => _model;
        set
        {
            _model = value;
            NotifyStateChanged();
        }
    }
    
    public event Action OnChange;
    
    private void NotifyStateChanged() => OnChange?.Invoke();
}

builder.Services.AddSingleton<SharedModelService>();

Use in components:

@inject SharedModelService ModelService

@code {
    protected override void OnInitialized()
    {
        ModelService.OnChange += StateHasChanged;
    }
    
    private void UpdateModel()
    {
        ModelService.Model.Property = "New Value";
    }
}

4. EventCallback Pattern (For parent-child communication)

<!-- ParentComponent.razor -->
@page "/parent"

<ChildComponent1 Model="@SharedModel" ModelChanged="@HandleModelChanged" />
<ChildComponent2 Model="@SharedModel" ModelChanged="@HandleModelChanged" />

@code {
    private MyModel SharedModel { get; set; } = new();
    
    private void HandleModelChanged(MyModel updatedModel)
    {
        SharedModel = updatedModel;
        StateHasChanged(); // Refresh all components
    }
}

<!-- ChildComponent1.razor -->
@code {
    [Parameter]
    public MyModel Model { get; set; }
    
    [Parameter]
    public EventCallback<MyModel> ModelChanged { get; set; }
    
    private async Task UpdateModel()
    {
        Model.Property = "New Value";
        await ModelChanged.InvokeAsync(Model);
    }
}

5. Fluxor/Redux Pattern (For complex state management)

// Install package
dotnet add package Fluxor.Blazor.Web

// Define state
public record MyModelState
{
    public MyModel Model { get; init; } = new();
}

// Define actions
public record UpdateModelAction(MyModel Model);

// Create reducer
public static class Reducers
{
    [ReducerMethod]
    public static MyModelState ReduceUpdateModelAction(MyModelState state, UpdateModelAction action)
        => state with { Model = action.Model };
}

Use in components:

@inject IState<MyModelState> ModelState
@inject IDispatcher Dispatcher

<p>@ModelState.Value.Model.Property</p>

<button @onclick="UpdateModel">Update</button>

@code {
    private void UpdateModel()
    {
        var updatedModel = ModelState.Value.Model with { Property = "New Value" };
        Dispatcher.Dispatch(new UpdateModelAction(updatedModel));
    }
}

For simple parent-child relationships: Use Component Parameters
For deep component trees: Use Cascading Parameters
For app-wide state: Use State Management Service or Fluxor
For complex applications: Consider Fluxor/Redux pattern
Immutable models: When sharing models, consider making them immutable or implementing proper change notifications

Performance Considerations

Avoid excessive re-rendering by implementing ShouldRender
Use [Parameter] public MyModel Model { get; set; } carefully as it can cause unnecessary renders
For large models, consider using view models or DTOs instead of full domain models