Blog posts RSS Feed

Cost Optimization: Auto Shutdown and Startup of Tagged VMs with Azure Automation

Abhith Rajan — Tue, 30 May 2023 09:26:00 GMT

In today’s cloud computing era, optimizing costs has become crucial for effective resource management. One area where organizations can achieve significant cost savings is by automating the shutdown and startup processes of virtual machines (VMs) in their test environments. Microsoft Azure offers various solutions to help accomplish this goal, and one powerful approach is through Azure Automation.

The Significance of Cost Optimization

Test environments play a vital role in software development and testing processes. However, these environments often remain idle during non-working hours, such as nights and weekends. Continuously running VMs during these periods can lead to unnecessary expenses. By implementing an automated solution that shuts down and starts up VMs based on predefined schedules, organizations can save a substantial amount of money.

Azure Automation: Streamlining Cost Optimization

Azure Automation is a cloud-based service that enables you to automate the management of your Azure resources. It offers a wide range of capabilities for process automation, configuration management, and update management. Through the use of Runbooks, you can schedule the shutdown and startup of VMs based on specific criteria, optimizing costs in test environments.

Runbooks

Implementing VM Shutdown with Azure Automation

Stop VM Runbook

To implement the VM shutdown process, you can utilize PowerShell scripts within an Azure Automation runbook. The following code snippet illustrates how to shut down VMs during weekdays (Monday to Friday) from 10 PM to 6 AM:

# Get the current time in the time zone of your choice
$TimeZone = [System.TimeZoneInfo]::FindSystemTimeZoneById("Arabian Standard Time")
$ScheduledTime = [System.TimeZoneInfo]::ConvertTimeFromUtc([DateTime]::UtcNow, $TimeZone)

# Connect to Azure Account using Managed Identity
$Conn = Connect-AzAccount -Identity

# Weekday Shutdown (Mon-Fri, 10pm-6am)
if (($ScheduledTime.DayOfWeek -ge "Monday") -and ($ScheduledTime.DayOfWeek -le "Friday") -and ($ScheduledTime.ToString("HH:mm") -ge "22:00") -or ($ScheduledTime.ToString("HH:mm") -lt "06:00")) {
   $VMs = Get-AzResource -Tag @{ Availability = "Available 6am-10pm Mon-Fri, Unavailable 10pm-6am Mon-Fri and all day Sat-Sun" } -ResourceType "Microsoft.Compute/virtualMachines"
   foreach ($VM in $VMs) {
       Stop-AzVM -ResourceGroupName $VM.ResourceGroupName -Name $VM.Name -Force
   }
}

This code snippet retrieves the current time in the specified time zone, connects to your Azure account using Managed Identity, and identifies the VMs based on a specified tag “Availability = Available 6am-10pm Mon-Fri, Unavailable 10pm-6am Mon-Fri and all day Sat-Sun”. It checks if the current time falls within the desired shutdown window and proceeds to stop each VM using the Stop-AzVM command.

Schedule for VM Shutdown:

Stop VM Schedule

Implementing VM Startup with Azure Automation

Similarly, you can implement the VM startup process using another PowerShell script within a separate Azure Automation runbook. The script can be scheduled to run during working hours or any other predefined schedule. The code snippet below demonstrates how to start VMs during weekdays:

# Get the current time in the time zone of your choice
$TimeZone = [System.TimeZoneInfo]::FindSystemTimeZoneById("Arabian Standard Time")
$ScheduledTime = [System.TimeZoneInfo]::ConvertTimeFromUtc([DateTime]::UtcNow, $TimeZone)

# Connect to Azure Account using Managed Identity
$Conn = Connect-AzAccount -Identity

# Weekday Start (Mon-Fri, 6am-10pm)
if (($ScheduledTime.DayOfWeek -ge "Monday") -and ($ScheduledTime.DayOfWeek -le "Friday") -and ($ScheduledTime.ToString("HH:mm") -ge "06:00") -and ($ScheduledTime.ToString("HH:mm") -lt "22:00")) {
   $VMs = Get-AzResource -Tag @{ Availability = "Available 6am-10pm Mon-Fri, Unavailable 10pm-6am Mon-Fri and all day Sat-Sun" } -ResourceType "Microsoft.Compute/virtualMachines"
   foreach ($VM in $VMs) {
       Start-AzVM -ResourceGroupName $VM.ResourceGroupName -Name $VM.Name
   }
}

The above code snippet retrieves the current time, connects to your Azure account using Managed Identity, and starts VMs based on the specified criteria. It identifies VMs tagged with “Availability = Available 6am-10pm Mon-Fri, Unavailable 10pm-6am Mon-Fri and all day Sat-Sun” and initiates the startup process using the Start-AzVM command.

Schedule for VM Startup:

Start VM Schedule

Additional Considerations

When implementing Azure Automation for VM shutdown and startup, keep the following points in mind:

Create an Azure Automation account to host your runbooks.
Enable Managed Identity for Azure Automation to securely connect to your Azure resources.
Grant the necessary permissions to the Managed Identity. In this case, assigning the Virtual Machine Contributor role at the resource group level is sufficient for performing the shutdown and startup actions.
Ensure relevant VMs are appropriately tagged for efficient automation.

By following these guidelines and leveraging Azure Automation, you can effectively optimize costs by automating the shutdown and startup of tagged VMs in your test environments. This approach ensures that VMs are active only when needed,thereby reducing unnecessary expenses. Additionally, it streamlines resource management and ensures that resources are available and ready for use during working hours.

Moreover, Azure Automation provides flexibility in scheduling the shutdown and startup processes based on specific criteria. You can customize the schedules according to your organization’s requirements, taking into account factors such as different time zones or varying working hours across teams.

Implementing VM shutdown and startup through Azure Automation offers several benefits:

Cost savings: By automatically shutting down VMs during non-working hours, organizations can significantly reduce costs associated with running idle resources. This optimization can lead to substantial savings over time.
Resource availability: VMs can be automatically started up before working hours, ensuring that the necessary resources are available when the team begins their tasks. This eliminates delays caused by manual startup processes and improves productivity.
Scalability and agility: Azure Automation allows for easy scaling of the solution to accommodate changing needs. As your organization grows or experiences fluctuations in demand, you can adjust the automation processes accordingly, ensuring efficient resource utilization.
Centralized management: Azure Automation provides a centralized platform for managing and monitoring the automated shutdown and startup processes. You can view and track the status of the runbooks, monitor resource utilization, and make adjustments as needed.
Compliance and security: By leveraging Managed Identity and assigning the appropriate permissions, Azure Automation ensures secure access to Azure resources without the need for storing credentials within the automation scripts. This improves compliance with security best practices and reduces potential risks.

In conclusion, automating the shutdown and startup processes of tagged VMs using Azure Automation is a powerful solution for cost optimization and resource management in test environments. By implementing predefined schedules and leveraging the flexibility of Azure Automation, organizations can achieve significant cost savings, improve resource availability, and streamline operations.

Remember, cost optimization is an ongoing process, and regularly reviewing and adjusting your automation schedules based on changing requirements can further enhance your cost-saving efforts.

If you have any questions or need clarification on any part of the post, feel free to leave a comment, and I’ll be glad to assist you.

Discover the power of Azure Automation for cost optimization in Azure environments. Cut unnecessary expenses, optimize resource management, and efficiently manage tagged VMs with automated VM shutdown and startup. https://t.co/bVUXhZ2cwT #Azure #CostOptimization #Automation
— Abhith Rajan (@AbhithRajan) May 30, 2023

How We Use Jira Automation

Abhith Rajan — Sun, 10 Apr 2022 09:26:00 GMT

We use Jira for our issue/task management at work. As a DevOps guy, one of my favorite features of Jira is Jira automation.

For automation starters, the good thing is there are many predefined templates available at the Jira automation template library, which we can use as a reference to create our own with adaptations as per our needs.

Before getting into the automation rules which we use, to get a better picture, better to know about our current workflow.

Workflow

Our current workflow is,

flowchart LR
Backlog --> Todo
Todo --> InDev[In Dev]
InDev --> ReadyForQA[Ready for QA]
ReadyForQA --> InTest[In Test]
InTest --> IsQAPassed{Is QA passed?}
IsQAPassed --> |Yes| ReadyToDeploy[Ready to Deploy]
IsQAPassed -. Yes .-> Done
IsQAPassed --> |No| Todo
ReadyToDeploy --> Done

And, we configured our Jira to have the following two custom fields for issue types, which are,

Developer
Tester

Both of them are of the type User Picker (single user).

This is to retain the developer, and tester information on the issue since the assignee may change during state transition as per the workflow.

Custom fields

Now, let’s jump into the automation rules which we use. They are,

Automation rules

Auto-assign to whoever created the issue
Close duplicate issues
Link issues that are mentioned in the comments
When a commit is created and the status is ‘To do’ → then transition this issue to ‘In Dev’
On Pull Request created → comment the details
On Pull Request merged → comment the details
Comment on Ready for QA items if not assigned to a QA
Assign issue back to Developer once Ready To Deploy
Assign issue back to Developer once Done
When issue is resolved → comment on related issues
Label issues as stale that have not had recent interaction

Automation

I hope the names are self-explanatory. Now let’s dig into each and will try to explain the use case for each,

1. Auto-assign to whoever created the issue

This is very simple automation. When an issue is created without an assignee, automatically assign it to the person who created it.

This ensures that someone is always accountable for an issue by making sure it is always assigned to whoever created it.

Auto-assign to whoever created the issue

And the result will be,

Automation auto assigned to reporter

There’s a template for the same in the Jira automation template library.

👉 Smart auto-assign

2. Close duplicate issues

Sometimes, we have multiple similar issues. We can close the second issue and keep the first issue open just by adding a link to the second issue as,

The second issue duplicates the first issue.

Link issue as duplicates

The automation rule for closing such duplicate is,

Trigger - Close duplicate issues

That will do,

Duplicate issue closed by automation

3. Link issues that are mentioned in the comments

This will help us to link issues that are mentioned in the comments. And, along with the automation rule When issue is resolved → comment on related issues, this is a great way of notifying the related issues and the watchers of the same.

The result is,

Automation links the commented issue

4. When a commit is created and the status is ‘To do’ → then transition this issue to ‘In Dev’

We already connected our GitHub repos to our JIRA cloud. And, this automation will help us to transition the issue to ‘In Dev’ when a commit is created in Github.

You can use the smart commit message to trigger this automation.

👉 Process issues with smart commits | Jira Software Cloud | Atlassian Support

Trigger - When a commit is created and the status is 'To do' → then transition this issue to 'In Dev'

That’s it, automation will take care of the issue transition,

Issue transition

5. On Pull Request created → comment the details

This is to comment on the issue about the details of the pull request so the watchers are informed that there’s some progress on the work item.

Comment - On Pull Request created → comment the details

Then automation will do,

Comments PR details when PR created

6. On Pull Request merged → comment the details

Similar to On Pull Request created → comment the details, this is to comment the details of the pull request on the issue so the watchers are informed that there is more progress on the work item.

Comment - On Pull Request merged → comment the details

Then automation will do,

Comments PR details when PR merged

7. Comment on Ready for QA items if not assigned to a QA

As per our workflow, the dev should assign the task to a QA person when the task is ready for QA. But, if the dev doesn’t assign the task to a QA person, then automation comments on the issue to alert the dev person.

That’s it, automation will notify the developer in case they forgot to assign the task to a QA person.

Automation comment

8. Assign issue back to Developer once Ready To Deploy

Once the QA passed, the QA person should assign the task back to the developer of that work item along with changing the status to Ready to Deploy. But, we observed that most time the QA person forgets to assign the task back to the dev. To avoid this, we are using this automation rule to assign the task back to the dev once the task is ready to deploy.

Change assignee

Now automation will take care of the assignee switching,

Assignee changed

9. Assign issue back to Developer once Done

This is similar to Assign issue back to Developer once Ready To Deploy, but this is to assign the task back to the dev once the task is done.

That is because, once QA passed, QA can either mark it as Done or Ready to Deploy.

As I mentioned in the automation rule 3. Link issues that are mentioned in the comments, this is a great way of notifying the related issues and the watchers of the same.

Comment on related issues

This rule does,

Commented on related issue

11. Label issues as stale that have not had recent interaction

After a period of inactivity (now set to 60d), a stale label will be applied to mark an issue with Todo status as stale and posts a comment to notify contributors that the issue will be closed.

Label issues as stale that have not had recent interaction

Before adding this rule to the automation, I had around ~250 issues assigned to me in the Backlog. Most of them were created by myself since I have a habit of making notes of all work items in the Jira after any work-related discussions. But all of those were sitting there for so long whereas our priorities were wholly different and some were too old and stale of course. And, we recently started to work based on the backlog items so having a long backlog with stale work items is not a good thing and it was hard to prioritize the work too.

So, I decided to add this rule to the automation and it labeled the stale issues.

Stale issues

Then I went around all my stale issues, closed the ones which were not relevant anymore, and the ones which are not stale simply removed the stale label. In the end, I ended up having around ~50 items in the backlog. So, picking up items for the next sprint was easy and I was able to prioritize the backlog items.

Is closing stale issues really a good idea?

In any successful software project, there’s always more work to do than people to do it. As more and more work piles up, it becomes paralyzing. Just making decisions about what work should and shouldn’t get done can exhaust all available resources.

Focusing on issues that are actively affecting humans is an effective method for prioritizing work.

To some, a robot trying to close stale issues may seem inhospitable or offensive to contributors. But the alternative is to disrespect them by setting false expectations and implicitly ignoring their work. This automation makes it explicit: if work is not progressing, then it’s stale. A comment is all it takes to keep the conversation alive.

Planned Improvements

Rule to auto-assign to the tester when transitioned to Ready for QA
Rule to auto-assign to the developer when transitioned to Todo from In Test (QA not passed case)
Close issues that are marked as stale, after a period of inactivity.

Final Thoughts

The Jira automation helps us to manage the work items more efficiently and we are loving it. If you have any questions related to any of the Jira automation rules, or if you have any suggestions, please feel free to post them in the comments 👇

Additional Resources

Most popular Jira automation templates | Atlassian

This is how we use Jira Automation.
https://t.co/uZkdcDGtH2

#jira #projectmanagement
— Abhith Rajan (@AbhithRajan) April 11, 2022

GitHub vs Azure DevOps - For Code

Abhith Rajan — Tue, 01 Feb 2022 09:26:00 GMT

I have been using Azure DevOps as well as GitHub for many years now. All open-source stuff is on GitHub (some private repositories too.), and all work stuff is on Azure DevOps. I love Azure DevOps, but for code management, I prefer using GitHub instead.

Since both are owned by Microsoft, and seeing the recent developments and features all happening on the GitHub side compared to Azure DevOps, my mind is pretty clear on which to choose for the future. It’s not just me, but many people agree on the same. Jump to the 40:20 on the below video and hear yourself.

youtube: https://www.youtube.com/watch?v=K5aO97x2208&start=2420s

So, I would like to see this change (move all our repo to GitHub) in my organization. Currently, we use Azure DevOps for both code & CI/CD pipelines.

Since it is an organization-wide change, I cannot just go and tell my manager about this change. Instead, I have to present what benefits we are getting through this change.

For that, I thought of creating an internal presentation and side-by-side this public blog.

So in this post, I will try to list out things that attract me towards GitHub for code management.

Dependabot

Automated dependency updates built into GitHub.

One of the main attracting factors towards GitHub. Since we have many projects and tracking all the dependencies manually is not possible at all.

👉 Keep all your packages up to date with Dependabot

Dependabot’s automated PRs with updated packages/dependencies help a lot.

Dependabot PRs

And the security alerts,

Dependabot Alerts

Code Scanning

Code scanning is GitHub’s native SAST (Static Application Security Testing) tool, a developer-first approach to SAST that enables vulnerabilities to be found and remediated effortlessly before they reach production.

Here’s what GitHub code scanning can help you do:

Find, triage, and prioritize vulnerabilities in your code.
See security issues in your pull requests as part of your review process.
Prevent new vulnerabilities from making it to production.
Schedule scans for specific days and times, or trigger scans when a specific event occurs in the repository, such as a push.

The CodeQL action part of the code scanning features of GitHub is good even though comes at a price (of course free for open source). And I prefer the security-and-quality query suite for the CodeQL.

Code Scanning Alerts

Marketplace and integrations

Both Azure DevOps and GitHub have many integrations available. But IMHO, GitHub has a better collection, growing too.

JIRA

We manage our work items through Jira. One of the main things we are missing in Azure DevOps is the Jira integration whereas there’s an official integration available between JIRA and GitHub.

Linking work items to code have many benefits.

GitHub issues, boards all are awesome but JIRA is a bit more advanced as well as customizable for software project management, so can’t ask to switch to GitHub at this time (still I prefer GitHub).

GitHub Checks

There are several GitHub apps which is capable of running powerful checks against the code changes in the repository. Apps that perform continuous integration, code linting, or code scanning services and provide detailed feedback on commits.

GitHub Checks

Release Notes

The GitHub releases are a great way to share the latest version of your code. The release notes associated with the release are a great way to share the changes in the code.

Do you know that GitHub can help in making release notes?

Having the release notes part of each release, and helping with making the release notes is another plus side of Github.

Azure Pipelines vs GitHub Actions

Azure Pipelines are way matured compared to GitHub Actions (👈 this may change in the future).

But yes, a complete switch to GitHub from Azure DevOps might be possible by replacing Azure DevOps pipelines with GitHub actions. But people mostly hate change when things are working fine with the current setup. So one step at a time in terms of change.

i.e First code migration, then slowly pipelines. The first candidate for GitHub Actions can be PR builds.

While comparing both, I love the following facts about the GitHub action,

Easy to create by just placing the workflow file in the .github/workflows directory. Whereas Azure DevOps requires you to create a new pipeline in the UI.
Suggestions for the workflow file are provided in the GitHub action UI based on your project’s type.

Mobile Application

GitHub’s mobile application is a great way to manage your code.

You can do PR review,
Merge code,
And so on,

All through the mobile app.

GitHub Mobile App

Azure DevOps doesn’t have such a mobile application but you can access the DevOps portal through the mobile browser, the UI is somewhat responsive, but the experience is still way better in GitHub’s mobile app, and the app is getting new features on every release.

Powerful web-based editor (VS Code on Web)

I never liked "." this much.

We can open any #github repo on #vscode, directly on your browser, by simply pressing "." (no quotes, just that dot).

The repo will open in https://t.co/P2oEcfcGFA, a kind of Visual Studio Code on the browser. pic.twitter.com/ZUFNJe443s
— Abhith Rajan (@AbhithRajan) March 18, 2022

The github.dev and the shortcut ”.”, 👌. I am using it more often, even this blog am maintaining most of the time via the web editor of GitHub.

And

PR review is much better on GitHub. The sticky checkbox on each file is way better than the sidebar static checkboxes in the Azure DevOps.
The GitHub organization landing page with repositories sorted by last updated gives a better insight to the team.
The total number of repositories indicator in GitHub is a good metric, not sure how to find the total number of repositories in the Azure DevOps organization since repositories are kept under projects in the Azure DevOps organization.
The GitHub community. You can follow external projects, and people and can learn from them.

Pricing

Looks complicated on GitHub. In most places, it is like Contact Sales. The change would be an easier task if the billing could be done through an Azure Subscription but it looks like it is not possible at the moment.

Anyway, the free plan offers enough feature sets to start with GitHub.

If you plan to migrate to GitHub, the following sections will help you.

Code Migration From Azure DevOps to GitHub

The code repository migration from Azure DevOps to GitHub is pretty easy.

Import repository
Give your Azure DevOps Repo URL, and fill in the rest.
And on the next screen, it will ask for credentials to access your DevOps repo. Git credentials for the Azure DevOps repo will work fine. You can generate that one on the clone window on Azure DevOps as shown below. Git Credentials" loading="lazy" decoding="async" width="1920" height="929">

That’s it. You will not miss any code history after migration.

Change Azure Pipeline Repository From Azure DevOps to GitHub

Since in our case, we have all pipelines already configured in the DevOps. And don’t want to change any of them other than the repository location. This can be done by following the below steps.

Edit the existing pipeline
In the upper right corner open the … menu
Pick the ⚡ Triggers option
Click the YAML tab
Click the Get Sources option
Reconfigure the source repo to GitHub.

You might need to choose a GitHub connection to pick the repo. For that, better to install the Azure Pipelines GitHub app and give it access to the repository. Which will create a connection back to your Azure DevOps account.

Final Notes

After reading this,

Are you convinced that GitHub is better compared to Azure DevOps for code?
If you are a GitHub pro, did I miss any goodness of GitHub over Azure DevOps in terms of code management?

Let me know in the comments below 👇

Additional Resources

Changelog

2022-07-20

Added the Powerful web-based editor section

2022-07-13

Added the And section

2022-06-07

Added Release Notes and Mobile Application sections.
Updated Azure Pipelines vs GitHub Actions section.

#github vs #AzureDevOps - for code.

Comparing GitHub and Azure DevOps for code management and related features. Hopefully, this post will encourage you to switch to GitHub.https://t.co/ZNnEPhnKgQ
— Abhith Rajan (@AbhithRajan) February 1, 2022

2021 Year In Review

Abhith Rajan — Tue, 25 Jan 2022 09:26:00 GMT

A bit late to review 2021 work-life but “better late than never”, right?

In 2021, my focus was on mainly Cloud Native solutions. And one of my favorites of last year is, Dapr.

Other interesting findings of last year are,

And the list goes on.

Let’s talk about work for now.

More Azure

I’m an Azure guy. Interacting with it almost every working day. My 2021 facts related to Azure are,

Started using more Azure Logic Apps
Used Azure Cosmos DB the first time - it is our event store now.
Integrated Azure maps
Used Azure Cognitive Search
Baby steps with Azure Synapse + Power BI
Azure app configuration + Feature flags - Advocating colleagues to use feature flags.
Release annotation in Azure Application Insights - Want to make it part of CD, TODO for 2022.
Started switching to Azure Managed Identity
Played with ML Studio

Rest of the work

Some of the other notable things I was doing last year are,

Introduced geofence-based solutions - Hoo, the left-hand rule.
Migrated to JIRA cloud and set up some easy JIRA automation.
Now everywhere CloudEvents - I like that spec.
Done CI/CD setup for Java, Angular projects other than .NET.
More into Event-driven architectures.

And yeah, we switched to Postman cloud. The Postman is a good tool but for a microservice guy like me, the tabs are not enough.

Tab groups in #Chrome are so good for devs.
I wish #postman had something similar. pic.twitter.com/QIk22kkjGZ
— Abhith Rajan (@AbhithRajan) June 25, 2021

Pure Work

During this period, I have introduced around 12 RFCs in my workplace out of that 9 got landed in the production already. Rest are on the way. If you wonder what is an RFC, it is where we propose a new feature (major) to be developed, and the way it should be developed, some more deep dives into technical plus user stories on the same.

And I closed almost 263 JIRA work items during the same period.

A major role that I handled last year is to team up with a Java resource where I managed the work. Even though I am not a Java guy, I was reviewing the PRs (even corrected some, 😁). And it went really well, together we delivered 7 java microservice components.

The components term came to me from Backstage

Regarding PRs, previously I was following Gitflow, now switched to GitHub flow. And for release, Release Flow as recommended by Microsoft VSTS Team.

When I switch any of my workflow or tools, I always recommend my colleagues to follow the same by pointing out the benefits. My interest in Backstage is because I care about developer experience too. Always looking for great ways to organize work, improve the workflows.

Plans for 2022

Even though I’m working mostly on the Azure, never went for a certification. This year, I will.
After delivering several components (stable, reliable, and feature-rich) successfully by just managing the work, I realized that way I can contribute more to the work. Feels like time to go up a level, let’s see.
Code migration from Azure DevOps to GitHub: Advocating team about the benefits of GitHub over Azure DevOps for code.

Wish me a good year 😊

Wish me a good year 😊https://t.co/kSgkIfIMyK
— Abhith Rajan (@AbhithRajan) January 25, 2022

ASP.NET Core - OAuth 2.0 Client Access Token Management

Abhith Rajan — Sun, 09 Jan 2022 14:11:27 GMT

In a microservice world, the machine (microservice A) to machine (microservice B) communications can be secured using an OAuth 2.0 compatible token service, IdentityServer in our case. i.e To successfully call microservice B, microservice A needs to get an access token first via client credentials grant type from the IdentityServer with the right scope for the operation.

microservice A calls IdentityServer to get an access token.
microservice A then calls microservice B with the access token in the authorization header (bearer token).
microservice B validates the access token, responds to microservice A with a valid response.

The above steps are fine for a single call, but in case of multiple calls from A to B, A doesn’t need to get an IdentityServer token every time since each token has its validity, so basically, A can reuse the token until it expires.

For the token reusing, you don’t need to implement the caching and refreshing token logic anywhere since some good people who are maintaining IdentityModel.AspNetCore already done that. All we need to do is set up it, and consume it.

The library will take care of the following,

caching abstraction for access tokens
automatic renewal of expired access tokens
token lifetime automation for HttpClient

let’s jump into the setup. Following are our assumptions,

microservice B has endpoints,
- POST /orders and it requires IdentityServer token with orders.write scope to create new orders,
- and to fetch the orders GET /orders endpoint, the scope for that one is orders.read.
microservice A has valid client credentials configured on the IdentityServer with the above scopes added to the allowed scopes. i.e microservice A is allowed to call the microservice B.

So let’s configure microservice A,

Install IdentityModel.AspNetCore package

In the Startup.cs > ConfigureServices

// Setup token management service
services.AddAccessTokenManagement(options =>
{
  options.Client.Clients.Add(AppConsts.StsClientName, new ClientCredentialsTokenRequest
  {
    Address = $"{Configuration.GetValue<string>("Authentication:Sts:BaseUrl")}/connect/token", // Token service (IdentityServer) base URL
    ClientId = Configuration.GetValue<string>("Authentication:Sts:ClientId"),
    ClientSecret = Configuration.GetValue<string>("Authentication:Sts:ClientSecret"),
    Scope = $"{AppConsts.OrdersWriteScope} {AppConsts.OrdersReadScope}" // Any number of scopes, space separated
  });
});

// Adds a named HTTP client for the factory that automatically sends the client access token
services.AddClientAccessTokenClient(AppConsts.StsClientName, AppConsts.StsClientName, client => client.BaseAddress = new Uri(Configuration.GetValue<string>("ApiBaseUrl"))); // microservice B base URL

Here we setup the token management service and a named HttpClient that uses the same. Also you can observe, we moved the static string params to a AppConsts.cs file,

public class AppConsts
{
    public const string OrdersWriteScope = "orders.write";
    public static string OrdersReadScope = "orders.read";
    public static string StsClientName = "microservice_a_api_client";
}

And the configurations like client credentials, token service endpoint, and rest are kept in the appsettings.json or somewhere more private like Azure App Configuration, keyvault, and loaded to the aspnetcore configurations.

  "ApiBaseUrl": "https://microservice-b.com",
  "Authentication": {
    "Sts": {
      "BaseUrl": "https://my-identityserver.com",
      "ClientId": "microservice_a_api",
      "ClientSecret": ""
    }
  },

Configuration is done, now let’s consume the HttpClient. Here I’m using Flurl to make the HTTP request, if you prefer direct HttpClient usage, you can do that way. You don’t need to do anything special to get the access token since it is already taken care of.

using Flurl.Http;

public class GetOrdersQueryHandler : IRequestHandler<SomeInput, SomeOutput>
{
    private readonly IFlurlClient _flurlClient;

    public GetOrdersQueryHandler(IHttpClientFactory httpClientFactory)
    {
        var httpClient = httpClientFactory.CreateClient(AppConsts.StsClientName);
        _flurlClient = new FlurlClient(httpClient);

    }

    public async Task<SomeOutput> Handle(SomeInput request, CancellationToken cancellationToken)
    {
        return await _flurlClient
                .Request($"/orders")
                .GetJsonAsync<SomeOutput>(cancellationToken);
    }
}

As you can see, we use the named httpClient, and that client is already configured to have the access token with the scopes. That’s it. You can use the same way to call the create order endpoint since the client has an access token with both scopes.

Additional Resources

Identitymodel For Workers And Web Apps

Azure Cognitive Search - GeographyPoint to GeoJSON in .NET 5

Abhith Rajan — Sat, 13 Mar 2021 17:11:27 GMT

Azure Cognitive Search Service supported data types includes Edm.GeographyPoint.

While creating index definition using attributes in C#, to specify the field type as Edm.GeographyPoint we can use the GeographyPoint as the type.

using Azure.Search.Documents.Indexes;
using Microsoft.Spatial;

public class RestaurantIndexModel
{
    ...

    [SimpleField(IsFilterable = true, IsSortable = true)]
    public GeographyPoint Location { get; set; }

    ...
}

We need to have the NuGet package Microsoft.Spatial to use the GeographyPoint type.

  <PackageReference Include="Microsoft.Spatial" Version="7.8.3" />

And with that, you can create the index definition,

Index definition

But when you try to index a document with the same type,

restaurant.Location = GeographyPoint.Create(restaurantResult.Value.Latitude, restaurantResult.Value.Longitude);

You may encounter the following issue,

{
  "error": {
    "code": "",
    "message": "The request is invalid. Details: parameters : Invalid GeoJSON. The 'type' member is required, but was not found.\r\n"
  }
}

The way you can fix this is by,

Add the following NuGet package,

  <PackageReference Include="Microsoft.Azure.Core.Spatial" Version="1.0.0" />

And then annotate your index model to use the MicrosoftSpatialGeoJsonConverter as the JsonConverter by,

using System.Text.Json.Serialization;
using Azure.Core.Serialization;
using Azure.Search.Documents.Indexes;
using Microsoft.Spatial;

public class RestaurantIndexModel
{
    ...

    [JsonConverter(typeof(MicrosoftSpatialGeoJsonConverter))]
    [SimpleField(IsFilterable = true, IsSortable = true)]
    public GeographyPoint Location { get; set; }

    ...
}

That will do.

Indexd document

Additional Resources

NDepend - The Best-in-class Static Code Analyzer for Dotnet

Abhith Rajan — Wed, 09 Dec 2020 15:11:27 GMT

If you check my about page, I have mentioned that,

My role involves prototyping, developing backend as well as front end apps with modern workflows, frameworks. Keeping an eye on the patterns and organized code.

To keep the code organized and to make sure the quality is met, I depend on NDepend.

NDepend is the best-in-class static code analyzer for dotnet. And the best come with a price too, i.e it’s a PAID tool. Someone was kind enough to send me a licensed version.

When I tried NDepend the first time, it was overwhelming, the amount of information it throws out after analysis was too much 😲. Still am exploring many sides of the information it shares. In this post, I will share how I use it and the areas where it helps.

Initial Setup

Once you download the package, getting started is easy. Run the app and its Start page got everything you need to get started,

Start Page

In my case, I installed the visual studio extension. With that, you can easily attach a new or existing NDepend project with the opened solution.

Eh, what is an NDepend project?

This is mentioned in their getting started docs.

👉 Getting Started with NDepend

A NDepend project can be attached to several Visual Studio solutions.
This is useful if you wish to analyze several .NET assemblies compiled with several Visual Studio solutions.
A benefit will be the possibility to navigate across several Visual Studio solutions opened in several Visual Studio instances.

Once the initial setup and first analysis of the project are done, you will be presented with the analysis report. And it will be part of its dashboard.

Dashboard

I love metrics and staring at them is one of my hobbies. So do I love the NDepend dashboard since it shows all the metrics nicely.

Dashboard Metrics

Want to check how the code evolved compared to a previous date? Just choose the baseline to any previous analysis date.

Different Baseline Metrics

Want some charts?

Here we go. Following are the default ones ready for you to see the trend.

Dashboard Trend Charts

Noticed the Create Trend Chart?

We can create more trend charts as per our needs and metrics can be selected from a categorized list. In which one category I like is the Third-Party Usage,

Third-Party Usage Trend

So far, I just scratched the surface of the Ndepend tool only. More about it is on the way.

In the meantime check out these great articles about NDepend, which share a lot (really, a lot) about its features.

Azure Logic Apps - Get Application Insights/Azure Monitor Logs Query Result on Microsoft Teams

Abhith Rajan — Tue, 17 Nov 2020 22:11:27 GMT

I love to monitor things. Application Insights is one of my favorite tools in this category. Checking Failures and Performance sections on the Application Insights were my first thing in the morning for some time in the past. Since some apps especially built by third parties lack Application Insights integration, we check Application Gateway access logs too.

Instead of manually checking every day, to ease the process what I did is configured a couple of logic apps to send a message on the Teams channel with a list of results from Application Insights and Azure Monitor Logs.

The configured daily reports include,

Application Insights - Performance
Application Gateway - Failures

The steps involved in configuring these are almost similar.

First, you need to define the query, in the logs section of each service try out your query and see if the expected results coming. Then we need to design an Adaptive card for teams. This can be easily done on adaptivecards.io.

Adaptive Cards

Adaptive Cards are platform-agnostic snippets of UI, authored in JSON, that apps and services can openly exchange. When delivered to a specific app, the JSON is transformed into native UI that automatically adapts to its surroundings. It helps design and integrate light-weight UI for all major platforms and frameworks.

Adaptive Cards

The easiest way to design the adaptive card is to pick the matching sample from the adaptivecards.io website and edit it in the live designer there itself to adjust it to your needs.

Couple of cards which I designed that suited my needs shared below,

Simple card

A simple adaptive card

The schema of the same given below,

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.2",
  "speak": "<s>Order update.</s>",
  "body": [
    {
      "type": "ColumnSet",
      "columns": [
        {
          "type": "Column",
          "width": "stretch",
          "items": [
            {
              "type": "TextBlock",
              "text": "Order Update",
              "horizontalAlignment": "right",
              "isSubtle": true
            },
            {
              "type": "TextBlock",
              "text": "@{triggerBody()?['Label']}",
              "horizontalAlignment": "Right",
              "spacing": "None",
              "size": "Large",
              "color": "Attention"
            }
          ]
        }
      ]
    },
    {
      "type": "ColumnSet",
      "spacing": "Medium",
      "separator": true,
      "columns": [
        {
          "type": "Column",
          "width": 1,
          "items": [
            {
              "type": "TextBlock",
              "text": "Order",
              "isSubtle": true,
              "weight": "Bolder"
            },
            {
              "type": "TextBlock",
              "text": "@{json(base64ToString(triggerBody()?['ContentData'])).OrderId}",
              "spacing": "Small"
            }
          ]
        }
      ]
    }
  ],
  "actions": [
    {
      "type": "Action.OpenUrl",
      "title": "View",
      "url": "https://my-website.com/path/to/resource"
    }
  ]
}

The above card is used to notify when there is a new message in an Azure Service Bus Topic and the @{triggerBody()?['Label']} is used to get the Message Label.

Similarly, @{json(base64ToString(triggerBody()?['ContentData'])).OrderId} is used to get the OrderId from the message body.

Our focus in this article is on a card with a list of items.

Card with a list of items

Initial design with a single row of information will look like,

Card with single row

And it’s schema,

{
  "type": "AdaptiveCard",
  "body": [
    {
      "type": "Container",
      "style": "emphasis",
      "items": [
        {
          "type": "ColumnSet",
          "columns": [
            {
              "type": "Column",
              "items": [
                {
                  "type": "TextBlock",
                  "size": "Large",
                  "weight": "Bolder",
                  "text": "**Performance (App Insights)**"
                }
              ],
              "width": "stretch"
            }
          ]
        }
      ],
      "bleed": true
    },
    {
      "type": "Container",
      "spacing": "Large",
      "style": "emphasis",
      "items": [
        {
          "type": "ColumnSet",
          "columns": [
            {
              "type": "Column",
              "spacing": "Large",
              "items": [
                {
                  "type": "TextBlock",
                  "weight": "Bolder",
                  "text": "Operation Name"
                }
              ],
              "width": "stretch"
            },
            {
              "type": "Column",
              "items": [
                {
                  "type": "TextBlock",
                  "weight": "Bolder",
                  "text": "Count"
                }
              ],
              "width": "auto"
            },
            {
              "type": "Column",
              "items": [
                {
                  "type": "TextBlock",
                  "weight": "Bolder",
                  "text": "Avg",
                  "horizontalAlignment": "Right"
                },
                {
                  "type": "TextBlock",
                  "text": "Percentiles 50 / 99",
                  "horizontalAlignment": "Right"
                }
              ],
              "width": "stretch",
              "horizontalAlignment": "Right"
            }
          ]
        }
      ],
      "bleed": true
    },
    {
      "type": "Container",
      "items": [
        {
          "columns": [
            {
              "items": [
                {
                  "text": "some operation",
                  "type": "TextBlock",
                  "wrap": true
                },
                {
                  "size": "Small",
                  "text": "my app cloud role name",
                  "type": "TextBlock",
                  "wrap": true
                }
              ],
              "spacing": "Large",
              "type": "Column",
              "width": "stretch"
            },
            {
              "items": [
                {
                  "horizontalAlignment": "Right",
                  "separator": true,
                  "text": "321 ",
                  "type": "TextBlock"
                }
              ],
              "type": "Column",
              "width": "auto"
            },
            {
              "items": [
                {
                  "color": "Attention",
                  "horizontalAlignment": "Right",
                  "text": "123ms",
                  "type": "TextBlock"
                },
                {
                  "horizontalAlignment": "Right",
                  "size": "Small",
                  "text": "456 / 789",
                  "type": "TextBlock"
                }
              ],
              "type": "Column",
              "width": "stretch"
            }
          ],
          "type": "ColumnSet"
        }
      ],
      "separator": true
    }
  ],
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.2",
  "fallbackText": "This card requires Adaptive Cards v1.2 support to be rendered properly."
}

In the schema, there are three Container,

First one contains the main heading
Second column headings
The last one with the data.

We will be dynamically populating the third container items. And the result looks like,

Card with rows

And for a reference, A slightly altered design also given below,

Card with a row of data

And the schema for this one is,

{
  "type": "AdaptiveCard",
  "body": [
    {
      "type": "Container",
      "style": "emphasis",
      "items": [
        {
          "type": "ColumnSet",
          "columns": [
            {
              "type": "Column",
              "items": [
                {
                  "type": "TextBlock",
                  "size": "large",
                  "weight": "bolder",
                  "text": "**Application Gateway - Failed Requests**"
                }
              ],
              "width": "stretch"
            }
          ]
        }
      ],
      "bleed": true
    },
    {
      "type": "Container",
      "spacing": "Large",
      "style": "emphasis",
      "items": [
        {
          "type": "ColumnSet",
          "columns": [
            {
              "type": "Column",
              "spacing": "Large",
              "items": [
                {
                  "type": "TextBlock",
                  "weight": "Bolder",
                  "text": "URL"
                }
              ],
              "width": "stretch"
            },
            {
              "type": "Column",
              "items": [
                {
                  "type": "TextBlock",
                  "weight": "Bolder",
                  "text": "Status",
                  "horizontalAlignment": "Right"
                }
              ],
              "width": "auto"
            },
            {
              "type": "Column",
              "items": [
                {
                  "type": "TextBlock",
                  "weight": "Bolder",
                  "text": "Count",
                  "horizontalAlignment": "Right"
                }
              ],
              "width": "auto"
            }
          ]
        }
      ],
      "bleed": true
    },
    {
      "type": "Container",
      "items": [
        {
          "columns": [
            {
              "items": [
                {
                  "text": "/path/to/resource",
                  "type": "TextBlock",
                  "wrap": true
                },
                {
                  "color": "Attention",
                  "size": "Small",
                  "text": "demo.myapp.com",
                  "type": "TextBlock",
                  "wrap": true
                }
              ],
              "spacing": "Large",
              "type": "Column",
              "width": "stretch"
            },
            {
              "items": [
                {
                  "horizontalAlignment": "Right",
                  "separator": true,
                  "text": "404 ",
                  "type": "TextBlock"
                }
              ],
              "type": "Column",
              "width": "auto"
            },
            {
              "items": [
                {
                  "horizontalAlignment": "Right",
                  "separator": true,
                  "text": "123 ",
                  "type": "TextBlock"
                }
              ],
              "type": "Column",
              "width": "auto"
            }
          ],
          "type": "ColumnSet"
        }
      ],
      "separator": true
    }
  ],
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.2",
  "fallbackText": "This card requires Adaptive Cards v1.2 support to be rendered properly."
}

When fed with data, the result is,

Application Gateway - Failed Requests

Once we are done with adaptive card design, it’s time to move on to Logic App designer.

Logic App

The only tricky part of the Logic app was to generate the rows of items. The other steps are pretty much straight forward. And the overall steps are,

All steps

Let’s go through each step.

1. Recurrence trigger

Configured it to trigger daily.

Recurrence trigger

2. Getting a query result

For Application Insights query results, use the Application Insights connector and action Run Analytics Query

Run Analytics Query

Query to get performance metrics from Application insights

let dataset=requests
| where timestamp > ago(1d);
dataset
| summarize count_=sum(itemCount), avg(duration), percentiles(duration, 50, 99) by operation_Name, cloud_RoleName
| union(dataset
| summarize count_=sum(itemCount), avg_duration=avg(duration), percentiles(duration, 50, 99)
| extend operation_Name="Overall")
| top 30 by avg_duration desc

And in case of Application Gateway access logs, we need to use the Azure Monitor Logs connector and it’s Run query and list results action, details here.

Run query and list results

Note: Diagnostic setting for Application Gateway should be configured to feed access log data to the log analytics workspace before.

Query to get failed requests summary from Application Gateway

AzureDiagnostics
| where ResourceProvider == "MICROSOFT.NETWORK" and Category == "ApplicationGatewayAccessLog"
| where httpStatus_d >= 400
| where TimeGenerated > ago(1d)
| summarize count_= count(httpStatus_d) by httpStatus_d,requestUri_s, host_s
| order by count_ desc
| top 30 by count_

3. Initialize an array variable

Since we are expecting a list of rows from the above query, to map it to rows in the Teams card message, we use this.

Initialize an array variable

4. For each row in the query result, we map the result item to an Adaptive card row.

For each

Here the value is an array of query results from step 2. And for each item in the array, we are appending the JSON object that represents the row of data in the adaptive card (under the third Container items).

5. Append the rows to the rest of the Adaptive card schema in the Teams connector channel.

Initialize an array variable

The full Message is,

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "Container",
            "style": "emphasis",
            "items": [
                {
                    "type": "ColumnSet",
                    "columns": [
                        {
                            "type": "Column",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "size": "Large",
                                    "weight": "Bolder",
                                    "text": "**Performance (App Insights)**"
                                }
                            ],
                            "width": "stretch"
                        }
                    ]
                }
            ],
            "bleed": true
        },
        {
            "type": "Container",
            "spacing": "Large",
            "style": "emphasis",
            "items": [
                {
                    "type": "ColumnSet",
                    "columns": [
                        {
                            "type": "Column",
                            "spacing": "Large",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "weight": "Bolder",
                                    "text": "Operation Name"
                                }
                            ],
                            "width": "stretch"
                        },
                        {
                            "type": "Column",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "weight": "Bolder",
                                    "text": "Count"
                                }
                            ],
                            "width": "auto"
                        },
                        {
                            "type": "Column",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "weight": "Bolder",
                                    "text": "Avg",
                                    "horizontalAlignment": "Right"
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "Percentiles 50 / 99",
                                    "horizontalAlignment": "Right"
                                }
                            ],
                            "width": "stretch",
                            "horizontalAlignment": "Right"
                        }
                    ]
                }
            ],
            "bleed": true
        },
        {
            "type": "Container",
            "items": @{variables('rows')},
            "separator": true
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.2",
    "fallbackText": "This card requires Adaptive Cards v1.2 support to be rendered properly."
}

Notice the @{variables('rows')}, that’s where the magic happens. So the array we prepared in the previous step gets appended here, and hence we get to see the multiple rows in the adaptive card. To understand better, cross-check the above one with the original schema mentioned in the very beginning here.

That’s all. Run the logic app and see a message popping up on Teams.

Simplifying work by automating routine tasks 🧑‍💻#azurelogicapps
+
( #azuremonitor || #applicationinsights)
👇
#microsoftteams https://t.co/ZyZc7Kh85i
— Abhith Rajan (@AbhithRajan) November 23, 2020

Microsoft Clarity - Setting Up with GatsbyJS & First Impressions

Abhith Rajan — Wed, 04 Nov 2020 00:00:00 GMT

I’m impressed. From a long-term Google Analytics user point, Clarity provides more info about the actual user interactions on the website.

Getting started was pretty easy.

Sign-up here, it’s FREE.
Create a Clarity project for your website.
Integrate with your website.

There are already some direct integrations available. In my case, I have opted for the Install tracking code manually.

Integrating Microsoft Clarity with GatsbyJS website

Official plugin

Step 1 Navigate to the root of your Gatsby project.

Step 2 Open your preferred command line and run one of the following commands.

npm install gatsby-plugin-clarity

yarn add gatsby-plugin-clarity

Step 3 Navigate to gatsby-config.js.

Step 4 Add the following to your plugins array

{
    resolve: `gatsby-plugin-clarity`,
    options: {
      // String value for your clarity project ID
      clarity_project_id: YOUR-CLARITY-PROJECT-ID,
      // Boolean value for enabling clarity while developing
      // true will enable clarity tracking code on both development and production environments
      // false will enable clarity tracking code on production environment only
      enable_on_dev_env: true
    },
}

The Clarity tracking code is now installed.

Legacy way of installing [DEPRECATED]

It is very similar to adding Google AdSense as described in my older post here,

👉 GatsbyJS - Add Google AdSense

All you have to do is, update your gatsby-ssr.js with the below code (if there is no gatsby-ssr.js file on your project directory then create one at the root).

import React from "react";

export const onRenderBody = ({ setHeadComponents, setPostBodyComponents }) => {
  const pluginOptions = {
    head: true,
  };
  if (process.env.NODE_ENV !== `production`) {
    return null;
  }

  const setComponents = pluginOptions.head
    ? setHeadComponents
    : setPostBodyComponents;
  return setComponents([
    <script
      async
      type="text/javascript"
      dangerouslySetInnerHTML={{
        __html: `
      (function(c,l,a,r,i,t,y){
        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "<YOUR-CLARITY-PROJECT-ID>");
      `,
      }}
    />,
  ]);
};

Replace <YOUR-CLARITY-PROJECT-ID> with your Clarity project ID. The embedded script you can view at Clarity Project > Settings > Setup > Install tracking code manually.

onRenderBody is a Gatsby SSR API, called after every page Gatsby server renders while building HTML so you can set head and body components to be rendered in your html.js.

👉 SSR APIs | GatsbyJS

Build the project (gatsby build) and see whether the AdSense snippet is present in the build output HTML (gatsby serve). You can also refer to the same used in my repo itself.

👉 abhith/abhith.net

Once you have done the integrations and if the site is live, after a few minutes you will start seeing the metrics getting populated in the Clarity Dashboard.

Dashboard

It is pretty clean and minimal. And it looks like,

Dashboard

Recordings

It’s a dope feature. Exactly what each user did, like actual screencast of user interactions on that page with clicks and all. There is a sound indication for mouse clicks as well, Nice.

Recordings

It will help website managers to understand how the user is interacting with each element/section on the web page.

Also, sensitive data masking and other privacy concern are taken care of by Clarity automatically.

Heatmaps

As the name suggests, most interacted areas will be visualized here.

Heatmaps

If you are concerned about the data it collects, privacy, etc, one fact is that it is an opensource project. So you can have a look at it,

👉 GitHub-microsoft/clarity

I’m impressed with Microsoft Clarity. It’s not(yet) a replacement for Google Analytics, but I would recommend you to try it out and see how you can make use of it.

Additional Resources

Clarity Documentation

Microsoft Clarity - I'm impressed
https://t.co/JqYbcIZlwz #Analytics #MicrosoftClarity
— Abhith Rajan (@AbhithRajan) November 3, 2020

Azure Application Gateway - List of Failed Requests

Abhith Rajan — Sat, 19 Sep 2020 15:11:27 GMT

Azure application gateway serves an important role in our infrastructure. All the public inbound traffic happening through Application Gateway.

Part of monitoring, a year ago, I asked the following question in SO,

“We can see the failed request count in Azure application gateway but how can we see the list of failed requests in the Logs section? All the logs enabled in Diagnostics settings of Application Gateway. We need to see at least the requested path (URL) and the response code for the failed requests in the Logs section in the Application Gateway. Because of the way access log stored in the storage account (folder structure), it is a bit difficult to access the required data through the storage account.”

At that time there was no good solution for that. But that changed.

List of failed requests

AzureDiagnostics
| where ResourceProvider == "MICROSOFT.NETWORK" and Category == "ApplicationGatewayAccessLog"
| where httpStatus_d >= 400
| project httpStatus_d, requestUri_s, TimeGenerated

List of failed requests

Also, you can include other fields like host_s in the query which will be useful if you have multiple domains configured in the Application Gateway.

You can do much more with the data. In our case, we added a widget to our Azure dashboard where it displays the summary of failed requests per hour. And the query for the same given below,

AzureDiagnostics
| where ResourceProvider == "MICROSOFT.NETWORK" and Category == "ApplicationGatewayAccessLog"
| where httpStatus_d >= 400
| summarize count(httpStatus_d) by httpStatus_d,requestUri_s, bin(TimeGenerated, 1h)
| order by count_httpStatus_d desc
| project httpStatus_d, requestUri_s, TimeGenerated, count_httpStatus_d

And the result looks like (highlighted one),

Application Gateway Azure Dashboard

In fact, Azure made all this easy. When you navigate to the logs section of application gateway, the example queries by default include a similar query,

Application Gateway Logs

// Errors by URI
// Number of errors by URI.
AzureDiagnostics
| where ResourceType == "APPLICATIONGATEWAYS" and OperationName == "ApplicationGatewayAccess" and httpStatus_d > 399
| summarize AggregatedValue = count() by requestUri_s
| sort by AggregatedValue desc

Azure DevOps - CI/CD Pipeline involving Helm 3, ACR & AKS

Abhith Rajan — Tue, 18 Aug 2020 15:11:27 GMT

Azure is my favorite cloud provider. We use Azure for most of the infra & services. Our code goes to Azure DevOps, we use Azure Container Registry (ACR) to host our docker container images and our Kubernetes clusters running in Azure Kubernetes Service (AKS).

We configured the CI/CD pipelines in Azure DevOps. In my case, we have a monorepo that contains several ASP.NET Core microservices and the folder structure looks like below, which we inherited from eShopOnContainers.

- build
  - azure-devops
    - common
      - ci-steps-template.yml
      - ci-vars-template.yml
    - project-one
      - ci-pipeline.yml
    - project-two
- deploy

  - azure-devops
    - common
      - cd-steps-template.yml
      - cd-steps-template-prod.yml
      - cd-vars-template.yml
    - project-one
      - cd-pipeline.yml
    - project-two
  - k8s
    - helm
      - project-one
      - project-two

- src
  - Services
    - Project-One
    - Project-Two

One of the great articles that helped me to initial setup the CI/CD is given below. Its kind of outdated now since it is using az acr helm commands which were deprecated later. But it is still worth reading. So definitely check it out.

👉 Tutorial: Using Azure DevOps to setup a CI/CD pipeline and deploy to Kubernetes

CI Pipeline

The CI pipeline does the following,

Build a Docker image and push to ACR
Build Helm chart and push to ACR

Prerequisites

Helm chart for your project. Here my chart directory is located at deploy > k8s > helm. To create a new chart for your project, refer Helm Create.
acr-connection-name: ACR service connection in Azure DevOps. You can add it under Azure DevOps > Project > Project Settings > Service Connections.

The ACR credentials I stored in the Azure DevOps Variable Groups (acr-variable-group).

Name	Value
registryName	Your ACR name
registryLogin	ACR login
registryPassword	ACR password

Variable group definition

Common

ci-vars-template.yml

parameters:
  projectName: ""
  dockerRegistryServiceConnectionName: ""
  dockerfile: ""
  buildContext: ""

variables:
  helmVersion: 3.2.3
  HELM_EXPERIMENTAL_OCI: 1
  registryServerName: "$(registryName).azurecr.io"
  dockerRegistryServiceConnectionName: ${{ parameters.dockerRegistryServiceConnectionName }}
  dockerfile: ${{ parameters.dockerfile }}
  buildContext: ${{ parameters.buildContext }}
  projectName: ${{ parameters.projectName }}
  imageName: ${{ parameters.projectName }}
  imageTag: $(build.sourceBranchName)
  helmChartVersion: $(build.sourceBranchName)
  helmfrom: $(Build.SourcesDirectory)/deploy/k8s/helm
  helmto: $(Build.ArtifactStagingDirectory)/deploy/k8s/helm

Few things to note here,

HELM_EXPERIMENTAL_OCI is to enable OCI support in the Helm 3 client. Currently, this support is experimental.
build.sourceBranchName as the image tag and chart version is handy if you are following Gitflow (which we follow) or similar git branching convention, so each release (eg, refs/tags/project-one/2.2.6) will generate Docker image and Helm chart with the same version.

ci-steps-template.yml

steps:
  - task: Docker@2
    displayName: Build and push an image to container registry
    inputs:
      command: buildAndPush
      repository: $(imageName)
      dockerfile: $(dockerfile)
      containerRegistry: $(dockerRegistryServiceConnectionName)
      buildContext: $(buildContext)
      tags: |
        $(imageTag)

  - task: HelmInstaller@1
    displayName: "install helm"
    inputs:
      helmVersionToInstall: $(helmVersion)
  - bash: |
      echo $(registryPassword) | helm registry login $(registryName).azurecr.io --username $(registryLogin) --password-stdin
      cd deploy/k8s/helm/
      helm chart save $(helm package --app-version $(imageTag) --version $(helmChartVersion) ./$(projectName) | grep -o '/.*.tgz') $(registryName).azurecr.io/charts/$(projectName):$(imageTag)
      helm chart push $(registryName).azurecr.io/charts/$(projectName):$(helmChartVersion)
      echo $(jq -n --arg version "$(helmChartVersion)" '{helmChartVersion: $version}') > $(build.artifactStagingDirectory)/variables.json
    failOnStderr: true
    displayName: "helm package"
  - task: CopyFiles@2
    inputs:
      sourceFolder: $(helmfrom)
      targetFolder: $(helmto)
  - publish: $(build.artifactStagingDirectory)
    artifact: build-artifact

The steps in the CI pipeline we moved to a common template file ci-steps-template.yml so that we can reuse it on other pipelines as well, and the steps include,

Build and push the docker image
Installs Helm client
A series of script which does
- Authenticate to ACR
- Creates and push Helm chart to ACR.
- Creates variables.json which contain the newly created Helm chart version. Which we will use to fetch the right chart version during CD.
Copy some additional files to the artifact. Which we can use to override Helm chart values.

ci-pipeline.yml

trigger:
  branches:
    include:
      - refs/tags/project-one/*
  paths:
    include:
      - src/Services/ProjectOne/*

pr: none

pool:
  vmImage: "ubuntu-latest"

variables:
  - group: acr-variable-group
  - template: ../common/ci-vars-template.yml
    parameters:
      projectName: "project-one"
      dockerRegistryServiceConnectionName: "acr-connection-name"
      dockerfile: "src/Services/Project-One/Dockerfile"
      buildContext: "$(System.DefaultWorkingDirectory)"

steps:
  - template: ../common/ci-steps-template.yml

If everything went well, you will have two repositories under your ACR.

project-one which contains the Docker image
chart/project-one for the Helm chart

CD Pipeline

The CD pipeline will install the Helm chart on AKS. The CD pipeline stage requires following details,

Name	Value
aks	AKS name
rg	AKS resource group
aksSpTenantId	Subscription tenant id
aksSpId	Service principal Id
aksSpSecret	Service principal password

These credentials I stored in another varible group named aks-variable-group.

Helpful commands

Service principal credentials

Create new service principal aks-name-deploy by

az ad sp create-for-rbac -n aks-name-deploy --scopes aks-resource-id --role "Azure Kubernetes Service Cluster User Role" --query password -o tsv

Where aks-resource-id is,

az aks show -n $aks -g $rg --query id -o tsv

The above command will output service principal password aksSpSecret.

To get service principal id aksSpId,

az ad sp show --id http://aks-name-deploy --query appId -o tsv

Also we need to attach ACR with AKS so that AKS can pull our private docker images from our ACR.

Attach ACR with AKS

az aks update -g $rg -n $aks --attach-acr acr-resource-id

Where acr-resource-id is the output of,

az acr show -n $registryName -g acr-resource-group-name --query id -o tsv

Get Azure Tenant Id

To get tenantId aksSpTenantId,

az account show --query tenantId -o tsv

Now lets explore the pipeline YAML files.

Common

cd-vars-template.yml

parameters:
  projectName: ""

variables:
  helmVersion: 3.2.3
  HELM_EXPERIMENTAL_OCI: 1
  registryServerName: "$(registryName).azurecr.io"
  projectName: ${{ parameters.projectName }}

cd-steps-template.yml

steps:
  - checkout: none
  - task: HelmInstaller@1
    displayName: "install helm"
    inputs:
      helmVersionToInstall: $(helmVersion)
  - download: ci-pipeline
    artifact: build-artifact
  - bash: |
      az login \
           --service-principal \
           -u $(aksSpId) \
           -p '$(aksSpSecret)' \
           --tenant $(aksSpTenantId)
       az aks get-credentials \
           -n $(aks) \
           -g $(rg)
       echo $(registryPassword) | helm registry login $(registryServerName) --username $(registryLogin) --password-stdin
       helmChartVersion=$(jq .helmChartVersion $(pipeline.workspace)/ci-pipeline/build-artifact/variables.json -r)
       helm chart pull $(registryServerName)/charts/$(projectName):$helmChartVersion
       helm chart export $(registryServerName)/charts/$(projectName):$helmChartVersion --destination $(pipeline.workspace)/install
       helm upgrade \
           --namespace $(k8sNamespace) \
           --create-namespace \
           --install \
           --wait \
           --version $helmChartVersion \
           --set image.repository=$(registryServerName)/$(projectName) \
           -f $(pipeline.workspace)/ci-pipeline/build-artifact/deploy/k8s/helm/app.yaml \
           -f $(pipeline.workspace)/ci-pipeline/build-artifact/deploy/k8s/helm/inf.yaml \
           $(projectName) \
           $(pipeline.workspace)/install/$(projectName)
    failOnStderr: true
    displayName: "deploy helm chart"

The common CD steps include a series of script which does,

Authenticate to Azure using the service principal credentials
Set the specified AKS cluster as the context.
Authenticate ACR with the ACR credentials (The same credentials we used in CI pipeline defined in the acr-variable-group)
Extract the Helm chart version that need to install
Pulls the Helm chart and installs (or upgrade) it. Here we are overriding the chart image repository to our ACR repository and some additional common values (app.yaml & inf.yaml).

cd-pipeline.yml

trigger: none
pr: none

# define variables: registryName, registryLogin and registryPassword in the Azure pipeline UI definition
variables:
  - group: acr-variable-group
  - template: ../common/cd-vars-template.yml
    parameters:
      projectName: "project-one"
  - name: k8sNamespace
    value: myteam

resources:
  pipelines:
    - pipeline: ci-pipeline
      source: "project-one-ci"
      trigger:
        enabled: true
        branches:
          include:
            - refs/tags/project-one/*

# define 5 variables: aks, rg, aksSpId, aksSpSecret and aksSpTenantId in the Azure pipeline UI definition
stages:
  - stage: test
    displayName: test
    jobs:
      - deployment: test
        variables:
          - group: aks-variable-group
        displayName: deploy helm chart into AKS
        pool:
          vmImage: ubuntu-latest
        environment: test-$(projectName)
        strategy:
          runOnce:
            deploy:
              steps:
                - template: ../common/cd-steps-template.yml
  - stage: production
    displayName: production
    jobs:
      - deployment: production
        variables:
          - group: aks-prod-variable-group
        displayName: deploy helm chart into AKS
        pool:
          vmImage: ubuntu-latest
        environment: production-$(projectName)
        strategy:
          runOnce:
            deploy:
              steps:
                - template: ../common/cd-steps-template-prod.yml

In the CD pipeline above, I have defined two stages, one for TEST and one for PROD. The main difference between them is in the variable group used. aks-variable-group has the TEST cluster values and you guessed right, aks-prod-variable-group has the PROD cluster values. And the difference between cd-steps-template.yml and cd-steps-template-prod.yml is that prod file has some additional chart value overrides with respect to our PRODUCTION environment.

cd-steps-template-prod.yml

steps:
  - checkout: none
  - task: HelmInstaller@1
    displayName: "install helm"
    inputs:
      helmVersionToInstall: $(helmVersion)
  - download: ci-pipeline
    artifact: build-artifact
  - bash: |
      az login \
           --service-principal \
           -u $(aksSpId) \
           -p '$(aksSpSecret)' \
           --tenant $(aksSpTenantId)
       az aks get-credentials \
           -n $(aks) \
           -g $(rg)
       echo $(registryPassword) | helm registry login $(registryServerName) --username $(registryLogin) --password-stdin
       helmChartVersion=$(jq .helmChartVersion $(pipeline.workspace)/ci-pipeline/build-artifact/variables.json -r)
       helm chart pull $(registryServerName)/charts/$(projectName):$helmChartVersion
       helm chart export $(registryServerName)/charts/$(projectName):$helmChartVersion --destination $(pipeline.workspace)/install
       helm upgrade \
           --namespace $(k8sNamespace) \
           --create-namespace \
           --install \
           --wait \
           --version $helmChartVersion \
           --set image.repository=$(registryServerName)/$(projectName) \
           -f $(pipeline.workspace)/ci-pipeline/build-artifact/deploy/k8s/helm/app.yaml \
           -f $(pipeline.workspace)/ci-pipeline/build-artifact/deploy/k8s/helm/inf.yaml \
           -f $(pipeline.workspace)/ci-pipeline/build-artifact/deploy/k8s/helm/inf-prod.yaml \
           -f $(pipeline.workspace)/ci-pipeline/build-artifact/deploy/k8s/helm/$(projectName)/values-prod.yaml \
           $(projectName) \
           $(pipeline.workspace)/install/$(projectName)
    failOnStderr: true
    displayName: "deploy helm chart"

Few more Notes

CD pipeline is also YAML based (You gonna like it), hence create it like a regular pipeline (Not as RELEASE) in the Azure DevOps, and choose the cd-pipeline.yml after choosing to create pipeline based on Existing Azure Pipelines YAML file.
Once you create the CD pipeline, check the Environments under Azure DevOps Pipelines. There will be two environments as per the above example, test-project-one and production-project-one. Inside each, you can configure the approvals and more for the respective CD stages.

A sample reference source code is also pushed to here.

If you have any grey area in this article, feel free to shoot it in the comments below 👇, I will try to shed some light on that part.

Setup Continuous Integration in Azure DevOps which push Docker image, Helm 3 chart to Azure Container Registry(ACR), and Continuous Deployment pipeline that deploys the chart to Azure Kubernetes Service (AKS).https://t.co/S96mzQXn4M #AzureDevOps #helm #Kubernetes
— Abhith Rajan (@AbhithRajan) August 21, 2020

Cloudflare and AspNet Boilerplate

Abhith Rajan — Sat, 18 Jul 2020 11:26:00 GMT

I am an early adopter of aspnetboilerplate. I learned AngularJS as part of developing aspnetboilerplate project and it all started by reading an awesome blog post Introduction to ASP.NET Boilerplate by Halil ibrahim Kalkan. Since then I always recommended using the paid aspnetzero template for all the major projects in my workplace. And I used the free aspnetboilerplate template for some of the projects including my side project, piggyvault, a family finance management app, and its APIs is built on aspnetboilerplate.

Similarly, I use Cloudflare for most of the hosted websites as a firewall-cum-CDN. Recently after hosting the aspnetboilerplate project on SmarterASP.net, I started to face a login issue where it was working fine on local (as always 😆). The traffic to the PROD app was routed via Cloudflare.

Later the troubleshooting journey ended up here.

Cloudflare strips any header that contains dots (.) from origin web server responses. For example, the origin web server header test.header:data is removed by Cloudflare’s proxy.

By default, ABP uses Abp.TenantId header as the TenantIdResolveKey, and Cloudflare strips it resulting in null value always. Thankfully, aspnetboilerplate provides an option to change the TenantIdResolveKey. To change,

In the CoreModule,

// Enable this line to create a multi-tenant application.
Configuration.MultiTenancy.IsEnabled = PiggyvaultConsts.MultiTenancyEnabled;
Configuration.MultiTenancy.TenantIdResolveKey = "Piggy-TenantId"; // your key without "."

It resolved the login issue.

Additional Resources

ASP.NET Core - Using Mutliple Authentication Schemes

Abhith Rajan — Sat, 11 Jul 2020 19:26:00 GMT

In some use cases, you might want your endpoints to be authorized using multiple schemes. In my case, I had to allow some of the endpoints for authorized clients (using Identity Server) as well as for requests with a custom token which is generated by a custom service for authorized users.

To achieve this, we need to create the custom AuthenticationScheme and configure a policy to use our custom scheme as well as JwtBearer.

Custom AuthenticationScheme

Creating a custom authentication scheme will validate the custom token using the [Authorize] attribute.

To create a custom authentication scheme, we need to define the following,

CustomAuthenticationDefaults
CustomAuthenticationHandler
CustomAuthenticationOptions

Let’s start with the defaults, where we describe the name of the scheme.

public static class CustomAuthenticationDefaults
{
    public const string AuthenticationScheme = "Custom";
}

Next AuthenticationSchemeOptions,

using Microsoft.AspNetCore.Authentication;

public class CustomAuthOptions : AuthenticationSchemeOptions
{
    public string UserInfoEndpoint { get; set; }
}

To validate the custom token, I need to send an HTTP request to an endpoint and the URL for that endpoint needs to be configurable. By defining AuthenticationSchemeOptions, we can pass these values while setting up the scheme in the Startup.

Let’s move on to AuthenticationHandler, which validates the token.

using Flurl.Http;
using Microsoft.AspNetCore.Authentication;
using Microsoft.Extensions.Logging;
using Microsoft.Extensions.Options;
using System;
using System.Collections.Generic;
using System.Security.Claims;
using System.Text.Encodings.Web;
using System.Threading.Tasks;
...


public class CustomAuthenticationHandler : AuthenticationHandler<CustomAuthOptions>
{
    public CustomAuthenticationHandler(
        IOptionsMonitor<CustomAuthOptions> options,
        ILoggerFactory logger,
        UrlEncoder encoder,
        ISystemClock clock
        )
        : base(options, logger, encoder, clock)
    {
    }

    protected override async Task<AuthenticateResult> HandleAuthenticateAsync()
    {
        if (!Request.Headers.ContainsKey("Authorization"))
            return AuthenticateResult.Fail("Unauthorized");

        string authorizationHeader = Request.Headers["Authorization"];
        if (string.IsNullOrEmpty(authorizationHeader))
        {
            return AuthenticateResult.NoResult();
        }

        if (!authorizationHeader.StartsWith(CustomAuthenticationDefaults.AuthenticationScheme, StringComparison.OrdinalIgnoreCase))
        {
            return AuthenticateResult.Fail("Unauthorized");
        }

        string token = authorizationHeader.Substring(CustomAuthenticationDefaults.AuthenticationScheme.Length).Trim();

        if (string.IsNullOrEmpty(token))
        {
            return AuthenticateResult.Fail("Unauthorized");
        }

        try
        {
            return await ValidateTokenAsync(token);
        }
        catch (Exception ex)
        {
            return AuthenticateResult.Fail(ex.Message);
        }
    }

    private async Task<AuthenticateResult> ValidateTokenAsync(string session)
    {
        // getting user info using HTTP request made using Flurl
        var user = await Options.UserInfoEndpoint
            .WithHeader("some-id", session)
            .GetJsonAsync<User>();

        if (user == null)
        {
            return AuthenticateResult.Fail("Unauthorized");
        }

        var claims = new List<Claim>
        {
            new Claim(ClaimTypes.Name, $"{user.Name} {user.Surname}"),
            new Claim(ClaimTypes.GivenName, $"{user.Name}"),
            new Claim(ClaimTypes.Surname, surname),

            new Claim("scope", "orders:write"),
            new Claim(ClaimTypes.NameIdentifier, user.id)
            new Claim(ClaimTypes.Role, "User")
        };

        var identity = new ClaimsIdentity(claims, Scheme.Name);
        var principal = new ClaimsPrincipal(identity);
        var ticket = new AuthenticationTicket(principal, Scheme.Name);
        return AuthenticateResult.Success(ticket);
    }
}

In the AuthenticationHandler, you can use your way to validate your tokens.

Now we need to configure our project to use the custom authentication, for that, in the ConfigureServices of startup.cs,

services
    .AddCustomAuthentication(Configuration);

public static IServiceCollection AddCustomAuthentication(this IServiceCollection services, IConfiguration configuration)
{

    // Identity Server Configuration
    var identityUrl = configuration.GetValue<string>("Authentication:IdentityServerBaseUrl");
    services.AddAuthentication(options =>
    {
        options.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
        options.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
    }).AddJwtBearer(options =>
    {
        options.Authority = identityUrl;
        options.RequireHttpsMetadata = false;
        options.Audience = "your_api";
    });

    // Custom Authentication configuration
    services.AddAuthentication(CustomAuthenticationDefaults.AuthenticationScheme)
        .AddScheme<CustomAuthOptions, CustomAuthenticationHandler>(CustomAuthenticationDefaults.AuthenticationScheme,
        o => o.UserInfoEndpoint = configuration.GetValue<string>("Authentication:Custom:UserInfoEndpoint"));

    // we define policies here where we configure which scheme or combinations we need for each of our policies.
    services.AddAuthorization(options =>
    {
        // authorize using custom auth scheme only
        options.AddPolicy("UserRole", policy =>
        {
            policy.AuthenticationSchemes.Add(CustomAuthenticationDefaults.AuthenticationScheme);
            policy.RequireRole("User");
        });

        // authorize using custom auth scheme as well as identity server
        options.AddPolicy("OrdersWrite", policy =>
        {
            policy.AuthenticationSchemes.Add(JwtBearerDefaults.AuthenticationScheme);
            policy.AuthenticationSchemes.Add(CustomAuthenticationDefaults.AuthenticationScheme);
            policy.RequireClaim("scope", "orders:write");
        });
    });

    return services;
}

You can have different combinations in the policy defined above like based on scheme, claim, etc.

The configuration in the appsettings.json look like,

"Authentication": {
    "Custom": {
      "UserInfoEndpoint": "https://yourcustomauthwebsite.com/user-info-path"
    },
    "IdentityServerBaseUrl": "https://url-of-idserver"
}

Done, let’s enable the multi authorization to our endpoint. In the controller action,

[Authorize(Policy = "OrdersWrite")]
public async Task<ActionResult<OrderResult>> CreateOrder(OrderRequest orderRequest)
{
    var clientIdClaim = HttpContext.User.FindFirst("client_id"); // identity server client
    var userIdClaim = HttpContext.User.FindFirst(ClaimTypes.NameIdentifier); // user authenticated using custom auth handler.
    ...
}

Now we can invoke our create order endpoint with valid bearer token as well as with our custom token. The general format for authorization header is,

Authorization: <type> <credentials>

So bearer token request header looks like,

Authorization: bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

And our custom token request header looks like,

Authorization: custom abcasdjasdjlaksdjlasjdlasjd

Additional Resources

Serilog - Console Sink Themes

Abhith Rajan — Sat, 20 Jun 2020 19:17:00 GMT

Serilog is my favorite logger. The sinks I was using are ApplicationInsights, File, and Seq (for local). I was not using Console sink but when we switched to docker, I thought it is nice to have Console too.

I was checking the colored output for Console and I realized that the serilog-sinks-coloredconsole is retired and the Serilog.Sinks.Console by default has the colored output. There were few color themes listed on the readme so I want to see how each looks like, and see it for yourself below.

Built-in Themes

SystemConsoleTheme.Literate (Default)

.WriteTo.Console()

.WriteTo.Console(theme: SystemConsoleTheme.Literate)

SystemConsoleTheme.Literate

ConsoleTheme.None

.WriteTo.Console(theme: ConsoleTheme.None)

ConsoleTheme.None

SystemConsoleTheme.Grayscale

.WriteTo.Console(theme: SystemConsoleTheme.Grayscale)

SystemConsoleTheme.Grayscale

AnsiConsoleTheme.Literate

.WriteTo.Console(theme: AnsiConsoleTheme.Literate)

AnsiConsoleTheme.Literate

AnsiConsoleTheme.Grayscale

.WriteTo.Console(theme: AnsiConsoleTheme.Grayscale)

AnsiConsoleTheme.Grayscale

AnsiConsoleTheme.Code

.WriteTo.Console(theme: AnsiConsoleTheme.Code)

AnsiConsoleTheme.Code

Final Notes

In the above list, my favorite so far is the default one. I didn’t try any custom themes yet. if you know any good looking custom themes, let me know in the comments 👇

Additional Resources

serilog/serilog-sinks-console

Best FREE Form Provider for Static Websites

Abhith Rajan — Wed, 10 Jun 2020 09:17:00 GMT

If you have a static website like a portfolio without a contact form then you are missing so many opportunities. I realized it after adding a contact form on my website here.

Now you might be thinking about how difficult it is to add a form to your website, and I can tell you that it is easier than you think. Without any backend codes, we can consume some of the awesome FORM BACKEND as a Service providers. Some of them I explored yet are listed here.

Services

Getform

Form backend platform for designers and developers

My current contact form is powered by Getform. Their free plan details given below,

Getform pricing

~~It indicates 100 Submissions in the FREE plan which I thought renews every month but the FAQ says it’s not. That triggered me to search for another provider who offers a better FREE plan.~~

The pricing model of Getform changed and I am happy with the change.

If you want to check how I created the contact form in this Gatsby website using Getform, check my commit here

👉 Getform.io | Easy form endpoints for your forms

Kwes forms

It looks like Kwes offers more features and a generous 50 submissions per month for FREE.

Kwes pricing

👉 Kwes forms | Form Endpoint Service

SmartForms

SmartForms also offers 50 submissions per month for free.

SmartForms pricing

👉 SmartForms - Powerful and easy to setup form backend that alerts you on E-email, Slack and Telegram!

formcarry.

If you want more submissions per month for FREE, look for formcarry. It offers 100 submissions per month for FREE.

formcarry pricing

👉 Formcarry. | Hassle-Free Form Backend

formsubmit

If you want unlimited submissions for FREE, Formsubmit is the one.

Formsubmit sends all your form submissions to your email without having a need for any coding or a backbend. SignUp (optional) to get additional advantages.

And they don’t even have a pricing page to show 💙

👉 Formsubmit

Conclusion

I didn’t switch from Getform yet and am still reviewing other services. I will update this article whenever I find better solutions. If you know any good services in this category, let me know in the comments 👇

Additional Resources

2020 Pluralsight Free April Month Review

Abhith Rajan — Sat, 02 May 2020 09:26:00 GMT

I completed the #FreeApril of Pluralsight and it was very productive. In this one month, I completed around 16 courses, and they are,

Completed Courses

And I tested my Skills IQ,

Skills IQ

And there are many other courses which I started watching but yet not finished,

History

Also, you can check my public profile on Pluralsight,

👉 Abhith Rajan | Pluralsight Profile

Extending Pluralsight Subscription For Another One Free Month

I extended my Pluralsight subscription for one more month by activating the Visual Studio Dev Essentials benefit, its FREE.

Visual Studio Dev Essentials Benefits

If you don’t have an account on Visual Studio Dev Essentials, join on the link below, its also free and have many other benefits like shown above,

👉 Visual Studio Dev Essentials

Discounts

If you have enough budget, you can signup for their paid subscription, and get some DISCOUNTS by using my referral,

👉 Pluralsight Referral - Abhith

What is the plan, After Subscription Expiry

After this extra free month of Pluralsight, I plan to start the free month of LinkedIn Learning and will compare the course quality with Pluralsight, then I might switch to a paid plan on either of these two platforms.

I know many companies provide access to these e-learning platforms to their employees, if you are getting such a benefit from your firm, let me know in the comments 👇

.NET Core - NuGet Packages CI & CD Using GitHub Actions

Abhith Rajan — Thu, 02 Apr 2020 00:11:27 GMT

I always likes to automate the repeatative part of my work. At work, Azure DevOps taking care of the most of the CI & CD. I do maintain a small Class Library project in GitHub which has some helpers and stuffs you know like we reuse on most projects. And is been published to NuGet so that it can be consumed easily.

Recently I added one more project to the same repo which has some common stuff for ASP.NET Core projects. Previously I used to manually upload the .nuget pack file to NuGet since the releases were not that frequent. But now, the number of projects doubled, and sometime we need to deploy both packages since the ASP.NET Core project depends on the other library. So I did automated the whole process using GitHub actions. Here is how I did that,

You can check my repo where you can find the GitHub Actions configuration yml files under the .github/workflows/ directory.

👉 Abhith/Code.Library

I have two actions,

CI
Release to NuGet

CI

The CI (Continuous Integration) action basically runs on every commit to the master branch as well as for every PR to master.

And the jobs are pretty self-explanatory,

Setting up dotnet on the Linux
Builds the solution file
Run tests

# This is a basic workflow to help you get started with Actions

name: CI

# Controls when the action will run. Triggers the workflow on push or pull request
# events but only for the master branch
on:
  push:
    branches: [master]
  pull_request:
    branches: [master]

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  build:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      - uses: actions/checkout@v2
      - name: Setup .NET Core
        uses: actions/setup-dotnet@v1
        with:
          dotnet-version: 3.1.101
      - name: Build with dotnet
        run: dotnet build --configuration Release
        working-directory: ./src
      - name: Test
        run: dotnet test
        working-directory: ./src

Continuous Integration

Release to NuGet

This action runs on every new release. And the jobs include,

Setting up dotnet on the Linux
Create the .nupkg files
Uploads artifacts
Upload the Nuget packages

# This is a basic workflow to help you get started with Actions

name: Release to NuGet

# Controls when the action will run. Triggers the workflow on push or pull request
# events but only for the master branch
on:
  release:
    types: [published]

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  build:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      - uses: actions/checkout@v2
      - name: Setup .NET Core
        uses: actions/setup-dotnet@v1
        with:
          dotnet-version: 3.1.101
      - name: Create NuGet Package
        run: dotnet pack -c Release /p:Version=${{ github.event.release.tag_name }} /p:PackageReleaseNotes="See https://github.com/Abhith/Code.Library/releases/tag/${{ github.event.release.tag_name }}"
        working-directory: ./src
      - name: Archive NuGet Package
        uses: actions/upload-artifact@v1
        with:
          name: Code.Library
          path: ./src/Code.Library/bin/Release/Code.Library.${{ github.event.release.tag_name }}.nupkg
      - name: Archive NuGet Package
        uses: actions/upload-artifact@v1
        with:
          name: Code.Library.AspNetCore
          path: ./src/Code.Library.AspNetCore/bin/Release/Code.Library.AspNetCore.${{ github.event.release.tag_name }}.nupkg
      - name: Publish Nuget Package
        run: dotnet nuget push **/*.nupkg --api-key ${{ secrets.nuget_api_key }} --source https://api.nuget.org/v3/index.json --no-symbols true

Release to NuGet

You can see that I am pushing 2 NuGet packages and both have the same version number, which is same as my release tag on GitHub.

During Create NuGet Package stage, initially it was failing with following error

.dll' to be packed was not found on disk

This was because, in one of the project, it had following Settings in the .csproj file

<GeneratePackageOnBuild>true</GeneratePackageOnBuild>

Once I removed the above, everything went well. You can see a similar issue posted here.

And the “Publish NuGet Package” job requires an API key from NuGet. You can get the API key from NuGet by logging into your NuGet account, create a new API key.

NuGet API Key

And I stored the key under my repo secrets.

Manage Secrets in GitHub Repository

To manage secrets, on your repo go to the “Settings” tab, under that “Secrets”. There I added a secret with name “nuget_api_key” and we can access those secrets inside actions like ${{ secrets.nuget_api_key }}.

Best Visual Studio Extensions

Abhith Rajan — Tue, 17 Mar 2020 17:50:10 GMT

During my work, I spend the most time with Visual Studio. Now because of VSCode, Visual Studio is getting little more free time. There was a time when I just thought that I couldn’t be productive without ReSharper for Visual Studio. But those times changed since Visual Studio is getting better with every new release. The number of extensions in the marketplace also helps. The following are my favorite tools and extensions for Visual Studio 2022.

Free Tools

CodeMaid VS2022

CodeMaid VS2022 is an open source Visual Studio extension to cleanup and simplify our C#, C++, F#, VB, PHP, PowerShell, R, JSON, XAML, XML, ASP, HTML, CSS, LESS, SCSS, JavaScript and TypeScript coding.

EF Core Power Tools

EF Core Power Tools adds useful design-time DbContext features to the Visual Studio Solution Explorer context menu.

Productivity Power Tools 2022

Productivity Power Tools 2022 installs the individual extensions of Productivity Power Tools 2022

This is an extension pack installer will install each of the individual components of Productivity Power Tools for Visual Studio 2022.

The following components will be installed:

Align Assignments 2022
Double-Click Maximize 2022
Copy As Html 2022
Fix Mixed Tabs 2022
Match Margin 2022
Middle-Click Scroll 2022
Peek Help 2022
Shrink Empty Lines 2022
Solution Error Visualizer 2022
Time Stamp Margin 2022

Tweaks 2022

Tweaks 2022 contains collection of minor fixes and tweaks for Visual Studio to reduce the paper cuts and make you a happier developer.

WakaTime (For VS2022 Preview)

WakaTime does metrics, insights, and time tracking automatically generated from your programming activity. This extension will be replaced by WakaTime when VS 2022 is officially released.

xUnit.net.TestGenerator2022

xUnit.net.TestGenerator2022 adds xUnit.net Test Generator extensions for Visual Studio 2022. Creates Unit tests with xUnit.net 2.0 framework. Works on Visual Studio 2022.

Visual Studio 2019

Following are the ones which I previously used with Visual Studio 2019. Those are not brought to the upper list due to any of the following reasons,

Incompatibility with VS 2022
Not tried myself in VS 2022 (Especially the paid ones)

Free Tools

Better Comments

Better Comments is a Visual Studio extension that gives you the ability to customize the font and opacity of your comments independently of the editor’s font settings. It also adds four additional comment classifications, each classification with its own customizable foreground.

BuildVision

BuildVision visualize the building process in a table format.

Open in Visual Studio Code

Open in Visual Studio Code adds a menu command that lets you open any solution, project, folder and file in Visual Studio Code.

Roslynator 2019

Roslynator 2019 is a collection of 500+ analyzers, refactorings and fixes for C#, powered by Roslyn.

The Essentials

The Essentials is an extension pack for Visual Studio 2019 containing extensions no developer should be without. These extensions will add important functionality that will make you more productive and a happier developer.

Extensions

Trailing Whitespace Visualizer

Trailing Whitespace Visualizer keeps your code files clean by making it easier than ever to identify and remove any trailing whitespace.

Visual Studio IntelliCode

Visual Studio IntelliCode(IntelliCode) is a set of AI-assisted capabilities that improve developer productivity with features like contextual IntelliSense, argument completion, code formatting, and style rule inference.

IntelliCode augments existing developer workflows with machine-learning services that provide an understanding of code and its context. It’s applicable for C#, C++ (in preview), JavaScript/TypeScript (in preview), and XAML code today, and will be updated in the future to support more languages.

Visual Studio Spell Checker (VS2017 and Later)

Visual Studio Spell Checker (VS2017 and Later) is an editor extension that checks the spelling of comments, strings, and plain text as you type or interactively with a tool window. It can also spell check an entire solution, project, or selected items. Options are available to define multiple languages to spell check agains…

Web Essentials 2019

Web Essentials 2019 is the easiest way to set up Visual Studio for the ultimate web development experience.

Extensions

After installing the Web Essentials and restarting Visual Studio, the following extensions will be installed:

Paid

NDepend

NDepend is a Visual Studio and Azure DevOps/TFS extension that makes it easy to manage Code Quality on large and complex .NET code base

NCrunch for Visual Studio

NCrunch for Visual Studio is Distributed continuous build and test runner. Persistent Inline Code Coverage, Performance Metrics. Navigation + more!

OzCode

OzCode is a revolutionary debugging extension which complements Visual Studio and supercharges the C# debugging experience!.

ReSharper

ReSharper is a legendary .NET productivity tool: find and fix errors and code smells; navigate and refactor; run unit tests and write quality code faster.

Older Visual Studio Extensions List

Visual Studio 2010

Did I miss something? If you think so, drop a line with the extension name in the comments below 👇. I will be updating this post whenever I find a good extension for Visual Studio.

Changelog

2022-01-16

VS 2022 extensions added

2020-11-14

Added EF Core Power Tools

2020-08-20

Added The Essentials

2020-08-09

Added Open in Visual Studio Code
Moved NDepend to Paid

2020-04-08

Added xUnit.net.TestGenerator

2020-03-20

Added Roslynator 2019.

2020-03-18

Added Better Comments.

Style Guide - SQL Server Auditing Column Names

Abhith Rajan — Wed, 05 Feb 2020 08:26:00 GMT

For most of the tables in our DB will have some kind of auditing fields. Following are the column names I used to use for those auditing fields.

Creation Audited

Column Name	Type	Nullable	Description
CreationTime	datetime2(7)	NOT NULL	eg. 2019-09-15 13:56:13.8955178
CreatorUserId		NULL

Modification Audited

Column Name	Type	Nullable
LastModificationTime	datetime2(7)	NULL
LastModifierUserId		NULL

Soft Delete

Column Name	Type	Nullable
IsDeleted	bit	NOT NULL
DeleterUserId		NULL
DeletionTime	datetime2(7)	NULL

If you have worked with ABP before, you know from where I adopted the naming convention.

When I work on a non-ABP project, I used to follow the same column names.

Let me know what you used to name for auditing columns in the comments. 👇

Additional Resources

datetime2 (Transact-SQL) - SQL Server

Azure DevOps - GatsbyJs Build Pipeline

Abhith Rajan — Tue, 04 Feb 2020 15:11:27 GMT

For long I was using Netlify to do CI/CD for this website and was using their free plan. But when they introduced the build minutes limit, I had to switch to another option.

Bad news 📰 in the morning
New limit on #netlify build minutes.
Looking for alternative options! pic.twitter.com/W12MwlyOcn
— Abhith Rajan (@AbhithRajan) December 17, 2019

I already have a paid account with SmarterASP.NET where I host Piggy and is very much suitable for personal side projects since it is very cheap. So I thought of moving back to SmarterASP.NET and for CI/CD Azure DevOps Build & Release Pipelines since am using the same at work.

Build Pipeline

We used the YAML based pipeline and steps are self-explanatory.

trigger:
  - master

pool:
  vmImage: "ubuntu-latest"

steps:
  - task: NodeTool@0
    inputs:
      versionSpec: "10.x"
    displayName: "Install Node.js"

  - script: |
      npm install -g gatsby-cli
    displayName: "Install gatsby-cli"

  - script: |
      yarn install
    displayName: "Install dependencies"

  - script: |
      yarn build
    displayName: "Gatsby build"

  - task: CopyFiles@2
    inputs:
      sourceFolder: "public"
      contents: "**"
      targetFolder: "$(Build.ArtifactStagingDirectory)"
      cleanTargetFolder: true
    displayName: "Copy built site"
    condition: and(succeeded(), ne(variables['Build.Reason'], 'PullRequest'))

  - task: PublishBuildArtifacts@1
    inputs:
      PathtoPublish: "$(Build.ArtifactStagingDirectory)"
      ArtifactName: "drop"
      publishLocation: "Container"
    condition: and(succeeded(), ne(variables['Build.Reason'], 'PullRequest'))
    displayName: "Publish Build Artifacts"

This pipeline will run for pull request as well. In those cases we don’t need to build the artifacts. That’s why we put the below condition for CopyFiles@2 and PublishBuildArtifacts@1 tasks.

condition: and(succeeded(), ne(variables['Build.Reason'], 'PullRequest'))

And a successfull build looks like,

Azure DevOps Build Pipeline for Gatsby

Release Pipeline

Once we configured our build pipeline, created a release pipeline.

Build pipeline vs Release pipeline

A build is a pipeline that has no side-effects, it only takes in code and puts out compiled “artifacts”. A release is a pipeline that has side-effects, it takes in artifacts and publishes or deploys them to environments.

For the release pipeline, in case of SmarterASP.NET, the stage contain one job and it has only one task, the FTP Upload.

Release Pipeline for Gatsby

And the yml for the same look like below,

steps:
- task: FtpUpload@2
  displayName: 'FTP Upload to SmarterASP.NET'
  inputs:
    credentialsOption: inputs
    serverUrl: '$(FTP.ServerUrl)'
    username: '$(FTP.Username)'
    password: '$(FTP.Password)'
    rootDirectory: '$(System.DefaultWorkingDirectory)/_Abhith.abhith.net/drop'
    remoteDirectory: /sitefolder/
    preservePaths: true
    trustSSL: true
  condition: and(succeeded(), ne(variables['Build.Reason'], 'PullRequest'))
``

Notes

All the $(---) are pipeline variables
rootDirectory can be browsed through the … button near to the Root folder text input (check the comments below)

Even though I have successfully configured the CI/CD. But the time it took to complete the deployment was too long since the artifact size was high. The gatsby-images generate so many versions of the image files resulting increase in the artifact size. So the FTP upload takes so much time to finish.

Tried #AzureDevOps to do the build and FTP upload task to push the artifact to @smarterasp, it worked fine but the time took to complete the release is almost 2 hrs. (artifact is around 500 MB in size & number of files 📂 around 3k). pic.twitter.com/wcltxbObRj
— Abhith Rajan (@AbhithRajan) December 27, 2019

Because of this, I searched for another hosting provider and found out Render. They have a free plan for static sites and offers almost similar experience when comparing to Netlify.

If you know any better hosting solution for GatsbyJs website, let me know in the comments. 👇

Azure DevOps Build - Could not locate the assembly

Abhith Rajan — Thu, 23 Jan 2020 06:59:27 GMT

We were configuring CI/CD for one of our .NET Core 3.1 API project in the Azure DevOps. When trying dotnet build from our local workstation, it was successfull but when CI triggered the build on the Azure DevOps, it was failing.

The Azure Pipeline yml looks like,

pool:
  vmImage: "windows-latest"

variables:
  buildConfiguration: "Release"

steps:
  - task: DotNetCoreCLI@2
    displayName: "dotnet build $(buildConfiguration)"
    inputs:
      command: "build"
      projects: |
        path/to/project/*.csproj
      arguments: "--configuration $(buildConfiguration)"

The build step successfully restored the NuGet packages which we can see in the logs,

Restore completed in 14.41 sec for d:\a\1\s\path\to\project\Project.Name.csproj.

But the step was failing with the following reference missing error.

C:\Program Files\dotnet\sdk\3.1.100\Microsoft.Common.CurrentVersion.targets(2106,5): warning MSB3245: Could not resolve this reference. Could not locate the assembly “System.ComponentModel.Annotations”. Check to make sure the assembly exists on disk. If this reference is required by your code, you may get compilation errors. [d:\a\1\s\path\to\project\Project.Name.csproj]

Azure DevOps Build Error

When checked the project reference, found out that the reference to System.ComponentModel.Annotations was added from assembly instead of Nuget. Fixed it by removing the assembly reference and adding the NuGet package of System.ComponentModel.Annotations.

DotNet Core Reference Fix

Commited the changes and initiated a hotfix release. Tada, the build succeeded.

GatsbyJS - Add Google AdSense

Abhith Rajan — Sun, 05 Jan 2020 17:00:00 GMT

One of the major strengths of Gatsby is its evolving plugins catalog. And there are a couple of plugins found for Google AdSense integration but don’t seem to be maintained for so long. But peeking into the source code of the one pave the path to do the same without any plugins.

All you have to do is, update your gatsby-ssr.js with the below code (if there is no gatsby-ssr.js file on your project directory then create one at the root).

import React from "react";

export const onRenderBody = ({ setHeadComponents, setPostBodyComponents }) => {
  const pluginOptions = {
    googleAdClientId: `ca-pub-XXXXXXXXXXXXXX`, //TODO: Replace with your client-Id
    head: true, // Set to false if you prefer to have your adsense script loaded at the end of body instead of head.
  };

  if (process.env.NODE_ENV !== `production`) {
    return null;
  }
  if (pluginOptions.googleAdClientId === undefined) {
    return null;
  }
  const setComponents = pluginOptions.head
    ? setHeadComponents
    : setPostBodyComponents;
  return setComponents([
    <script
      async
      type="text/javascript"
      src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
    />,
    <script
      key={`gatsby-plugin-google-adsense`}
      dangerouslySetInnerHTML={{
        __html: `
        (adsbygoogle = window.adsbygoogle || []).push({
            google_ad_client: "${pluginOptions.googleAdClientId}",
            enable_page_level_ads: true
        });
        `,
      }}
    />,
  ]);
};

onRenderBody is a Gatsby SSR API, called after every page Gatsby server renders while building HTML so you can set head and body components to be rendered in your html.js.

👉 SSR APIs | GatsbyJS

Build the project (gatsby build) and see whether the AdSense snippet is present in the build output HTML.

You can also refer the same used in my repo itself.

👉 abhith/abhith.net: Personal website running on Gatsby

.NET Core API Gateway Ocelot - Logging HTTP Requests & Response Including Headers & Body

Abhith Rajan — Thu, 26 Dec 2019 17:11:27 GMT

We have many microservices running under one umbrella on production which is Azure Application Gateway and has only one endpoint for all. We are using path-based rules to route to each service.

During development, we may need to simulate the same experience, i.e one endpoint instead of we referring separate URL endpoint for each service.

For the microservices, I used to refer dotnet-architecture/eShopOnContainers. And I read about the Ocelot API gateway from there. So I set up a local API gateway using Ocelot, for that

Created a new ASP.NET Core 3.1 web application and choose the Empty template.
Added the following NuGet packages

<PackageReference Include="Ocelot" Version="13.8.0" />
<PackageReference Include="Serilog" Version="2.9.0" />
<PackageReference Include="Serilog.AspNetCore" Version="3.2.0" />
<PackageReference Include="Serilog.Sinks.File" Version="4.1.0" />

Updated the Program.cs

using System.IO;
using Microsoft.AspNetCore;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.Hosting;
using Microsoft.Extensions.DependencyInjection;
using Serilog;
using Serilog.Events;
using Ocelot.DependencyInjection;
using Ocelot.Middleware;
using Microsoft.AspNetCore.Builder;
using OcelotApiGw.Middlewares;

namespace OcelotApiGw
{
    public class Program
    {
        public static IWebHost BuildWebHost(string[] args)
        {
            var builder = WebHost.CreateDefaultBuilder(args);

            // Ocelot configuration file
            builder.ConfigureAppConfiguration(
                          ic => ic.AddJsonFile(Path.Combine("configuration",
                                                            "configuration.json")))
                    .ConfigureServices(s =>
                    {
                        s.AddSingleton(builder);
                        s.AddOcelot();
                    })
                    .UseStartup<Startup>()
                    .UseSerilog((_, config) =>
                    {
                        config
                            .MinimumLevel.Information()
                            .MinimumLevel.Override("Microsoft", LogEventLevel.Warning)
                            .Enrich.FromLogContext()
                            .WriteTo.File(@"Logs\log.txt", rollingInterval: RollingInterval.Day);
                    })
                    .Configure(app =>
                    {
                        app.UseMiddleware<RequestResponseLoggingMiddleware>();
                        app.UseOcelot().Wait();
                    });

            var host = builder.Build();
            return host;
        }

        public static void Main(string[] args)
        {
            BuildWebHost(args).Run();
        }
    }
}

Here we are configuring the Ocelot middleware as well as Serilog for logging. The Ocelot configuration file is added under “configuration” folder in the root directory.

A sample Ocelot configuration file looks like this.

configuration.json

{
  "ReRoutes": [
    {
      "DownstreamPathTemplate": "/{version}/{everything}",
      "DownstreamScheme": "http",
      "DownstreamHostAndPorts": [
        {
          "Host": "localhost",
          "Port": 5010
        }
      ],
      "UpstreamPathTemplate": "/d/{version}/{everything}",
      "UpstreamHttpMethod": ["POST", "PUT", "GET"]
    },
    {
      "DownstreamPathTemplate": "/b/{everything}",
      "DownstreamScheme": "http",
      "DownstreamHostAndPorts": [
        {
          "Host": "localhost",
          "Port": 5011
        }
      ],
      "UpstreamPathTemplate": "/a/b/{everything}",
      "UpstreamHttpMethod": ["POST", "PUT", "GET"]
    },
    {
      "DownstreamPathTemplate": "/{everything}",
      "DownstreamScheme": "http",
      "DownstreamHostAndPorts": [
        {
          "Host": "localhost",
          "Port": 5013
        }
      ],
      "UpstreamPathTemplate": "/c/{everything}",
      "UpstreamHttpMethod": ["POST", "PUT", "GET", "OPTIONS"]
    }
  ],
  "GlobalConfiguration": {
    "BaseUrl": "https://localhost:44390"
  }
}

Apart from that, we are also adding one custom middleware RequestResponseLoggingMiddleware and its purpose is clear from its name, log request and response.

The Logging Middleware

This is a slightly modified version of middleware mentioned in the article, Using Middleware in ASP.NET Core to Log Requests and Responses.

using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.Logging;
using System.IO;
using System.Text;
using System.Threading.Tasks;

namespace OcelotApiGw.Middlewares
{
    public class RequestResponseLoggingMiddleware
    {
        private readonly ILogger<RequestResponseLoggingMiddleware> _logger;
        private readonly RequestDelegate _next;

        public RequestResponseLoggingMiddleware(RequestDelegate next, ILogger<RequestResponseLoggingMiddleware> logger)
        {
            _next = next;
            _logger = logger;
        }

        public async Task InvokeAsync(HttpContext context)
        {
            context.Request.EnableBuffering();

            var builder = new StringBuilder();

            var request = await FormatRequest(context.Request);

            builder.Append("Request: ").AppendLine(request);
            builder.AppendLine("Request headers:");
            foreach (var header in context.Request.Headers)
            {
                builder.Append(header.Key).Append(':').AppendLine(header.Value);
            }

            //Copy a pointer to the original response body stream
            var originalBodyStream = context.Response.Body;

            //Create a new memory stream...
            using var responseBody = new MemoryStream();
            //...and use that for the temporary response body
            context.Response.Body = responseBody;

            //Continue down the Middleware pipeline, eventually returning to this class
            await _next(context);

            //Format the response from the server
            var response = await FormatResponse(context.Response);
            builder.Append("Response: ").AppendLine(response);
            builder.AppendLine("Response headers: ");
            foreach (var header in context.Response.Headers)
            {
                builder.Append(header.Key).Append(':').AppendLine(header.Value);
            }

            //Save log to chosen datastore
            _logger.LogInformation(builder.ToString());

            //Copy the contents of the new memory stream (which contains the response) to the original stream, which is then returned to the client.
            await responseBody.CopyToAsync(originalBodyStream);
        }

        private async Task<string> FormatRequest(HttpRequest request)
        {
            // Leave the body open so the next middleware can read it.
            using var reader = new StreamReader(
                request.Body,
                encoding: Encoding.UTF8,
                detectEncodingFromByteOrderMarks: false,
                leaveOpen: true);
            var body = await reader.ReadToEndAsync();
            // Do some processing with body…

            var formattedRequest = $"{request.Scheme} {request.Host}{request.Path} {request.QueryString} {body}";

            // Reset the request body stream position so the next middleware can read it
            request.Body.Position = 0;

            return formattedRequest;
        }

        private async Task<string> FormatResponse(HttpResponse response)
        {
            //We need to read the response stream from the beginning...
            response.Body.Seek(0, SeekOrigin.Begin);

            //...and copy it into a string
            string text = await new StreamReader(response.Body).ReadToEndAsync();

            //We need to reset the reader for the response so that the client can read it.
            response.Body.Seek(0, SeekOrigin.Begin);

            //Return the string for the response, including the status code (e.g. 200, 404, 401, etc.)
            return $"{response.StatusCode}: {text}";
        }
    }
}

Usually, the request body can be read only once. Here we are making use of the new EnableBuffering extension method to read the request body multiple times. You can read more about the feature here, Re-reading ASP.Net Core request bodies with EnableBuffering().

That’s it, run your projects, make some requests and then check the logs directory.

This logging middleware can be used in any other ASP.NET Core project.

Here we used in the Ocelot API Gateway so that we don’t need to check the logs of each microservices.

Bonus

I am using a free tool Tailviewer to go through my logs. Check it out, it is small in size also an opensource project.

SQL Server - Delete Duplicate Rows

Abhith Rajan — Wed, 04 Dec 2019 20:00:00 GMT

Deleting rows from a SQL Server table is no big deal. But it becomes a little complicated when we are in a situation like a table with no primary keys or unique column and it has duplicate records which we need to delete.

When tried to delete rows using the context menu in the Microsoft SQL Server Management Studio, it failed with an error message indicating the action affects multiple records. But if you try Azure Data Studio to do the same, it will delete all the similar rows, not just the one you choose to delete.

So, in this case, we can use a query like below,

 WITH CTE AS(
   SELECT [Col1]
      ,[Col2]
      ,...
      ,ROW_NUMBER() OVER(PARTITION BY [Col1] ORDER BY [Col1]) AS RN
   FROM [dbo].[Table]
)
SELECT * FROM CTE

In the above query, we are using a CTE to list the data along with an additional column RN which will have a value higher than 1 for the duplicate entries.

It is always a good idea to “SELECT” and double-check the data before doing a hard “DELETE”

So first run the above query and inspect the rows with RN>1, Once you are okay with the results, execute the delete.

 WITH CTE AS(
   SELECT [Col1]
      ,[Col2]
      ,...
      ,ROW_NUMBER() OVER(PARTITION BY [Col1] ORDER BY [Col1]) AS RN
   FROM [dbo].[Table]
)
DELETE FROM CTE WHERE RN > 1

Angular - Add Custom Font

Abhith Rajan — Tue, 12 Nov 2019 12:59:27 GMT

To add custom fonts to your Angular project, put the font files under src.

Here I am following the folder pattern which I found on ABP Zero boilerplate.

In my case src > assets > fonts > fontname > font-files (.woff).

Then create a CSS file, src > assets > fonts > fonts-fontname.css.

And on the CSS, add the font-face referring to our new font-flies, an example is given below.

@font-face {
  font-family: "fontname";
  src: url("./fontname/fontname.woff");
}

@font-face {
  font-family: "fontname-Medium";
  src: url("./fontname/fontname-medium.woff");
}

@font-face {
  font-family: "fontname-Light";
  src: url("./fontname/fontname-light.woff");
}

Once the CSS file is ready, now we have to include that too in the angular build. To do that, update the angular.json to have references to our new CSS file like in below example,

{
 ...
  "projects": {
    "project-name": {
     ...
      "architect": {
        "build": {
          ...
          "options": {
            ...
            "styles": [
              ...
              "src/assets/fonts/fonts-fontname.css",
              ...
            ],
            ...
          },
          ...
        },
        ...,
        "test": {
          ...
          "options": {
            ...
            "styles": [
              ...
              "src/assets/fonts/fonts-fontname.css",
              ...
            ],
            ...
          }
        },
        ...
      }
    },
}

Note: the above code is tried and tested on Angular 8

Once we updated the angular.json, start a new build and see the new font applied in the places where it is used.

C# - Convert DateTime to Long and Vice Versa

Abhith Rajan — Tue, 29 Oct 2019 18:26:00 GMT

Story behind this post is when I started working with an existing MSSQL DB, I had to convert the DateTime to long since action auditing fields such as CreationTime, LastUpdated etc was stored as numeric.

eg, 20191028091320.

First of all, I don’t like storing DateTime in numeric format like above, which brings so much overhead during dealing with the same field, like querying based on date, formatting for displaying etc.

The way I handled these conversions given below,

DateTime to Long

long.Parse(DateTime.UtcNow.ToString("yyyyMMddHHmmss"))

Long to DateTime

The below code can handle 14 digits (eg. 20191028091320), 16 digits (eg. 2019102809132000 ) and 8 digits (eg. 20191028).

private static DateTime? GetDateTimeFromInt(long? dateAsLong, bool hasTime = true)
{
    if (dateAsLong.HasValue && dateAsLong > 0)
    {
        if (hasTime)
        {
            // sometimes input is 14 digit and sometimes 16
            var numberOfDigits = (int)Math.Floor(Math.Log10(dateAsLong.Value) + 1);

            if (numberOfDigits > 14)
            {
                dateAsLong /= (int)Math.Pow(10, (numberOfDigits - 14));
            }
        }

        if (DateTime.TryParseExact(dateAsLong.ToString(), hasTime ? "yyyyMMddHHmmss" : "yyyyMMdd",
                                  CultureInfo.InvariantCulture,
                                  DateTimeStyles.None, out DateTime dt))
        {
            return dt;
        }
    }

    return null;
}

Gatsby - See All Generated Pages

Abhith Rajan — Sat, 05 Oct 2019 20:00:00 GMT

If you want to see the list of pages generated by Gatsby, you can use the GraphiQL playground part of the Gatsby Dev (usually served on http://localhost:8000/___graphql).

Run the below query and you will be presented with the list of pages,

query MyQuery {
  allSitePage {
    edges {
      node {
        path
      }
    }
  }
}

Azure - Configuring End-to-End SSL for IIS Website by using Application Gateway

Abhith Rajan — Tue, 24 Sep 2019 09:26:00 GMT

For most cases we do SSL offloading at the Application Gateway end. i.e, HTTPS traffic between public and application gateway, HTTP traffic between application gateway and websites hosted under it. But in some cases we need end to end SSL. In our case, it was for the Identity Server.

So lets start, We pointed the domain to the Application Gateway Public IP and We assume you purchased the SSL for your domain and we need the SSL certificate in two formats.

PFX format for application gateway HTTPS listener.
CER format for application gateway HTTP Settings.

Now we need to do the following,

Add an HTTPS listener for that domain with the Certificate.
Create a backend pool with the VM where we will publish the website in the IIS.
Add an HTTP Settings with the Certificate as shown in the picture.

Application Gateway HTTP Settings

Create a rule which connects the listener (1) and backend pool(2) via the newly created HTTP settings (3).

Once all this done, user will be able to hit Application Gateway with HTTPS and probably will see 404 since the VM not responding to the requests. So lets configure the VM to accept the traffic through 443 port. In the VM,

Install the SSL certificate.
Configure the HTTPS website in the IIS with that certificate and the hostname (domain).

After this done, check whether you are able to reach the website successfully. If you are getting any 502 errors, check the following

In the Application Gateway, check the unhealthy backend pools.
If our backend pool with the HTTPS HTTP settings name is in that unhealthy list, that indicates the VM in the backend pool not responding 200 back to the health probe check.
By default health probe check for HTTPS will sent health check requests to the VM’s IP on 443 port, and in the IIS, no website will be listening for 443 port (Without any hostname specified).
To overcome, all we have to do is, on the default website (if there is no default site, add another binding to our site) as shown below,

IIS default 443 port binding

Once this done, watch the unhealthy backend pools and you may notice that our backend pool is healthy now (It will take at least 30 seconds to update). Now application gateway will route traffic to our VM over HTTPS and the VM will serve the website and we are done.

Additional Resources

Quickstart - Configure end-to-end SSL encryption with Azure Application Gateway - Azure portal | Microsoft Docs

C# - Get Last N characters from a string

Abhith Rajan — Sun, 22 Sep 2019 19:26:00 GMT

In C#, Substring method is used to retrieve (as the name suggests) substring from a string. The same we can use to get the last ‘N’ characters of a string.

String.Substring Method

As described in String.Substring Method (System) | Microsoft Docs, Substring method has two overloads,

Overload	Description
Substring(Int32)	Retrieves a substring from this instance. The substring starts at a specified character position and continues to the end of the string.
Substring(Int32, Int32)	Retrieves a substring from this instance. The substring starts at a specified character position and has a specified length.

With the starting position only overload, we can do.

mystring.Substring(mystring.Length - N);

But the above code will fail in case mystring length is lower than the ‘N’. So considering that case, lets have an extension method,

public static string GetLast(this string source, int numberOfChars)
{
    if(numberOfChars >= source.Length)
      return source;
    return source.Substring(source.Length - numberOfChars);
}

And you can use the above like,

mystring.GetLast(5)

This extension method is now part of the Code.Library Nuget package.

ASP.NET Core - Return 500 (Internal Server Error) or any other Status Code from API

Abhith Rajan — Mon, 16 Sep 2019 19:26:00 GMT

HTTP response status codes have so much importance in REST API’s. In any case if you want to return a status code from your ASP.NET Core API, all you have to do is in your controller method,

return  StatusCode(StatusCodes.Status500InternalServerError);

StatusCode is from Microsoft.AspNetCore.Mvc.ControllerBase.StatusCode and StatusCodes from Microsoft.AspNetCore.Http.StatusCodes. The above code will return a 500 status code. Similar way, you can return any other status code. For the complete list,

👉 StatusCodes Class (Microsoft.AspNetCore.Http) | Microsoft Docs

HTTP status code 5xx indicates server error. 5xx series includes,

Status Code	Description	ASP.NET Core 2.2
500	Internal Server Error	Status500InternalServerError
501	Not Implemented	Status501NotImplemented
502	Bad Gateway	Status502BadGateway
503	Service Unavailable	Status503ServiceUnavailable
504	Gateway Timeout	Status504GatewayTimeout
505	HTTP Version Not Supported	Status505HttpVersionNotsupported
506	Variant Also Negotiates	Status506VariantAlsoNegotiates
507	Insufficient Storage	Status507InsufficientStorage
508	Loop Detected	Status508LoopDetected
510	Not Extended	Status510NotExtended
511	Network Authentication Required	Status511NetworkAuthenticationRequired
599	Network Connect Timeout Error

You can also return some additional data along with the status code. Here is an example,

[Route("{code}")]
[HttpGet]
[ProducesResponseType(typeof(Merchant), 200)]
public async Task<ActionResult> GetMerchant(string code)
{
    var input = new EntityRequestDto<string>
    {
        Id = code
    };

    var result = await _merchantService.GetMerchant(input);

    if (result.IsSuccess)
    {
        return Ok(result.Value);
    }

    _logger.LogError("FAILED: GetMerchant - ${result.Error}");
    return StatusCode(StatusCodes.Status500InternalServerError, result.Error);

}

If another service which is a client of the above API, they can get the additional info by,

public async Task<MerchantPreviewDto> GetMerchant(string merchantCode)
{
    try
    {
        var merchant = await $"{_apiBaseUri}/api/v1/merchants/{merchantCode}"
            .WithOAuthBearerToken(...)
            .GetJsonAsync<Merchant>().ConfigureAwait(false);

        return ObjectMapper.Map<MerchantPreviewDto>(merchant);
    }
    catch (FlurlHttpException ex)
    {
        var error = await ex.GetResponseStringAsync();
        throw new UserFriendlyException("Oops! There is a problem!", error);
    }
}

Bonus

On the client service, I am using Flurl, which is my favorite HTTP client.

Flurl is a modern, fluent, asynchronous, testable, portable, buzzword-laden URL builder and HTTP client library for .NET.

Which one is your favorite HTTP client library for .NET?

C# - Get Web.Config Connection String in a Class Library

Abhith Rajan — Sun, 15 Sep 2019 19:26:00 GMT

This is relatively old topic but looks like still relevant. You need to know why?

Story

Recently one of our vendor deployed an app in one of our environment and when tested, found that the some of the entries going to wrong DB. Checked the connection strings in Web.Config, everything was fine. Due to the lack of proper logging in the application, we planned to hook up Microsoft Azure Application Insights, and we did discovered something, thanks to AI.

Application Map in the #Azure #applicationinsights saved us.

We were able to catch a wrong connection string hardcoded in a vendor dll by checking the Application Map in the AI.@AppInsights 👏 👏 👏
— Abhith Rajan (@AbhithRajan) September 14, 2019

Hard coding something like Connection String is a BAD PRACTICE, things like that should come as a parameter to the class library methods. Since we are not in a position to rewrite everything, what we did was, we replaced the hard coded connection string with the actual connection string value from the web.config.

using  System.Configuration;
...

public static string ConnectionString
{
  get { return ConfigurationManager.ConnectionStrings["Default"].ConnectionString; }
}

In the above code, Default is the connection string name in the web.config.

Using AutoMapper in a .NET Core Class Library

Abhith Rajan — Wed, 11 Sep 2019 12:59:27 GMT

AutoMapper is a handy helper library to do mapping between objects. In most scenarios, you might have an Entity Class and you want to map it to some DTO class or vice versa. With minimal configuration, AutoMapper can do this mapping without you creating a method where you map each field one by one.

Suppose I have to map Entity class to EntityDto and they look like,

public class Entity
{
  public string Name {get;set;}
  public Guid Id {get;set;}
  public string CurrencyCode {get;set;}
  public decimal CurrencyValue {get;set;}
}

public class EntityDto
{
  public string Name {get;set;}
  public Guid Id {get;set;}
  public Currency Currency {get;set;}
}

public class Currency
{
  public string Code {get;set;}
  public string Value {get;set;}
}

using AutoMapper;
...

public class SomeService : ISomeService
{
  private IMapper _iMapper;

  public SomeService()
  {
    // One time configuration
      var config = new MapperConfiguration(cfg =>
      {
          cfg.CreateMap<Entity, EntityDto>().ForMember(dto => dto.Currency, map => map.MapFrom(source => new Currency
          {
              Code = source.CurrencyCode,
              Value = source.CurrencyValue.ToString("0.00")
          }));
      });

      _iMapper = config.CreateMapper();
  }
...
}


public async Task<DtoClass> GetAsync(Guid id)
{
    Entity entity = await GetEntityByIdAsync(id);

    // using auto mapper to do the mapping
    var dto = _iMapper.Map<DtoClass>(entity);

    return dto;
}

In the mapping configuration, we didn’t specify anything related Id, Name properties. AutoMapper will map them automatically since the source and destination property name matches for those.

In the above, we defined the mappings in the same class, a better solution would be a common place where we define all the mappings. Let’s do that,

public static class ObjectMapper
{
    private static readonly Lazy<IMapper> Lazy = new Lazy<IMapper>(() =>
    {
        var config = new MapperConfiguration(cfg =>
        {
            // This line ensures that internal properties are also mapped over.
            cfg.ShouldMapProperty = p => p.GetMethod.IsPublic || p.GetMethod.IsAssembly;
            cfg.AddProfile<CustomDtoMapper>();
        });
        var mapper = config.CreateMapper();
        return mapper;
    });

    public static IMapper Mapper => Lazy.Value;
}

All the mapping configuration goes to,

public class CustomDtoMapper : Profile
{
    public CustomDtoMapper()
    {
        CreateMap<Entity, EntityDto>().ForMember(dto => dto.Currency, map => map.MapFrom(source => new Currency
          {
              Code = source.CurrencyCode,
              Value = source.CurrencyValue.ToString("0.00")
          }));

        // All other mappings goes here
    }
}

And use the ObjectMapper where ever you wanted,

var dto = ObjectMapper.Mapper.Map<DtoClass>(entity);

Read more about the AutoMapper configuration on the official website of AutoMapper.

Additional Resources

Lazy Class (System) | Microsoft Docs

Changelog

2020-03-15

Added common configuration model (ObjectMapper).

Dapper - Execute Multiple Stored Procedures

Abhith Rajan — Thu, 05 Sep 2019 12:59:27 GMT

Dapper is my preferred ORM for performance constraint applications. It is one of the best solution in case of a database first approach as well as when there is already a database in place. Dapper works with SQL Server as well as so many other DB’s and I have tried Oracle DB apart from SQL Server.

Dapper have so many features/extension methods, the documentation of these features can be accessed here.

👉 Dapper Dapper Tutorial | Dapper Tutorial and Documentation .

To execute multiple stored procedures or multiple SQL statements, we can use the QueryMultipleAsync extension method. See the sample code below,

using Dapper;
...

public async Task<SomeClass> GetAsync(Guid someId, Guid anotherId)
{
    using (var connection = new SqlConnection(_settings.ConnectionString()))
    {
        connection.Open();

        const string sql = @"exec uspTableOneAction @someId;
                             exec uspTableTwoAnotherAction @anotherId;";

        using (var multi = await connection.QueryMultipleAsync(sql, new { someId, anotherId }))
        {
            var firstTableItem = multi.Read<TableOneItem>().First();
            var secondTableItem = multi.Read<TableTwoItem>().FirstOrDefault();
           ...
        }

        ...
    }
}

In the above code, my stored procedure are,

uspTableOneAction
uspTableTwoAnotherAction

The naming convention which we follows for stored procedures are,

usp{TableName}{Action}

eg: uspUserInsert, uspUserUpdate

And in the above example, first stored procedure expects a parameter @someId. And the second stored procedure expects @anotherId. We passed these args by

new { someId, anotherId }

The same can be written as,

new { someId = someId, anotherId = anotherId }

Why we omitted the right hand side part in the example is because of the arguments name matching the parameter.

Just in case if both stored procedures expecting same parameter, say @someId. Then our args will look like,

new { someId }

That’s it. You have the result of the two queries.

Additional Resources

IIS - Disable CORS

Abhith Rajan — Wed, 14 Aug 2019 16:54:00 GMT

For any reason you wish to disable CORS for any website hosted on IIS, one way you can do this by allowing all origins. To do that,

Make sure you installed IIS CORS Module on the server.
Update the Web.Config of the website to have the cors section as given below,

Note: code tested on IIS 10

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <cors enabled="true" failUnlistedOrigins="true">
          <add origin="*">
            <allowHeaders allowAllRequestedHeaders="true" />
          </add>
        </cors>
    </system.webServer>
</configuration>

As you can see, we are allowing all origin’s by specifying * as the origin.

After just allowing all origins alone, if you encounter error like,

Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

To solve that, we are setting allowAllRequestedHeaders="true" in the allowHeaders for all the origins.

Remember: CORS is a security feature. Disable only if the resource is totally public.

Additional Resources

CORS Module Configuration Reference | Microsoft Docs

Azure Web App - Web Deploy to a Sub-folder

Abhith Rajan — Tue, 30 Jul 2019 15:11:27 GMT

I always recommends Microsoft Azure. Recently, We needed to deploy an ASP.NET Core app to a sub-folder inside Azure Web App (App Service).

By default Azure provides publish profiles for the Web App (To put files to the root of the domain). In our case, We wanted to deploy inside a sub-folder.

Suppose our web app name was demo-site and we want to web deploy the app under demo-site\folder\sub-folder. To do that,

Download the publish profile
Import in Visual Studio
Edit the web-deploy profile(Normally the publish profile will have Web Deploy as well as FTP profile)
- Change Site Name from demo-site to demo-site\folder\sub-folder
- Change the Destination URL from http://demo-site.azurewebsites.net to http://demo-site.azurewebsites.net/folder/sub-folder
Publish

But the publish failed with error,

System.TypeLoadException: Method ‘get_Settings’ in type ‘Microsoft.Web.LibraryManager.Build.HostInteraction’ from assembly ‘Microsoft.Web.LibraryManager.Build

This is specific to our application and may not have anything to do with your app, so can skip this part.

After referring a similar issue posted in GitHub aspnet/LibraryManager, We resolved the issue by updating Microsoft.Web.LibraryManager.Build Nuget package in my project.

Now next error,

Error - Web Deployment failed ERROR_NOT_SUPPORTED

More details about web deployment error can be found from here. In order to solve that,

Go to portal > demo-site App Service > Configuration > Path Mappings > Virtual applications and directories. And add the following,

Virtual path	Physical Path	Type
/folder	site\wwwroot\folder	Folder
/folder/sub-folder	site\wwwroot\folder\sub-folder	Application

Now publish from Visual Studio. If you only need to publish to a first level folder, i.e to demo-site\folder, then all you have to do is, change the Type to Application in the Path mappings for /folder, and skip the sub-folder entry since you don’t need it. And correct the Site Name and Destination URL in the publish profile accordingly.

Azure Web App - Missing MIME types

Abhith Rajan — Thu, 11 Jul 2019 12:59:27 GMT

When you deploy an app to Azure app service (Web App), you may notice that the custom font isn’t showing up or some specific files is getting 404 even if they exist on the right place.

This is because of the missing Mime type definitions.

Mime Types

Its definition is,

A media type (also known as a Multipurpose Internet Mail Extensions or MIME type) is a standard that indicates the nature and format of a document, file, or assortment of bytes.

And if you want to know why it is causing the 404, read this article.

Missing Mime Types

Font Files

  <mimeMap fileExtension="woff" mimeType="application/font-woff" />
  <mimeMap fileExtension="woff2" mimeType="application/font-woff" />

Json

  <mimeMap fileExtension=".json" mimeType="application/json" />

SVG

  <remove fileExtension=".svg"/>
  <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />

  <mimeMap fileExtension=".webmanifest" mimeType="application/manifest+json" />
  <mimeMap fileExtension=".webp" mimeType="image/webp" /> <!-- Not all browser supports webp />

Sample web.config file

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <staticContent>
            <remove fileExtension="woff"/>
            <mimeMap fileExtension="woff" mimeType="application/font-woff" />
            <remove fileExtension="woff2"/>
            <mimeMap fileExtension="woff2" mimeType="application/font-woff" />
            <remove fileExtension=".json"/>
            <mimeMap fileExtension=".json" mimeType="application/json" />
            <remove fileExtension=".svg"/>
            <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
         </staticContent>
    </system.webServer>
</configuration>

Curious about remove fileExtension ? MimeMap collection inherits but it won’t allow duplicate entries. If a duplicate mimeMap definition is added, it will result,

IIS7 Error: cannot add duplicate collection entry of type ‘mimeMap’ with unique key attribute ‘fileExtension’

So for the safe side, we are removing the global definition for that extension before changing it.

Best Laptop for Programming Under $2500 Dollars 2019

Abhith Rajan — Sat, 08 Jun 2019 22:50:00 GMT

For the past month, I have been in the search for the best laptop, that will help me to do things faster. Best in the sense which worth every penny and yet strong in specs, not a high-end gaming machine.

History

Laptops I used earlier are,

Dell Inspiron (Exact series don’t remember)
HP Pro Book
Lenovo Y520 (256 SSD)
Lenovo G40

In the above list, none of them owned by myself, first 3 out of the 4 was given by my ex-company during the employment period and the other is rented out from my brother-in-law. Out of all Lenovo Y520 was my favorite just because of its specs and speed.

Minimum Requirements

Right now its time to own a machine, and the minimum features am looking for are,

Thunderbolt 3 support.
SSD
Intel i7-9750H processor
RTX 2060 Graphics card
Fingerprint sensor

Shortlisted Laptops

The main YouTube channels which I rely for laptop reviews are,

And After watching tons of reviews and all, my shortlisted items are,

AERO 15

Model Name: WA-7US5130SP Official Website

On the pro side, it ticks all my requirement 5/5.

Cons

Web Camera position
Thermal throttling

youtube: https://www.youtube.com/watch?v=W64J7_Md1I4

Purchase AERO 15

Amazon

ThinkPad X1 Extreme (2nd Gen) (15.6”) Laptop

Official Website

Acer Predator Triton 500

Model Name: PT515-51-73EG Official Website

Watch the reviews,

youtube: https://www.youtube.com/watch?v=pXkE0BlTBmI youtube: https://www.youtube.com/watch?v=rOCiNSZIhmM youtube: https://www.youtube.com/watch?v=qwGTHLeG2dY

On the pro side, it matches my requirement 4/5. But on the con side, it is not easily upgradable because of its inverted motherboard construction. See the below video,

youtube: https://www.youtube.com/watch?v=6-PmEaytJOA

Other than that, Only zoned RGB keyboard, NO per key RGB.

Couldn’t find the exact one in Amazon but similar spec with intel 8750H found here.

HP Omen 15 (Latest)

Check out the below review.

youtube: https://www.youtube.com/watch?v=EloUckKqAKc

Its the cheapest in this list. And it got a bit more gaming look.

Any Refurbished WORKSTATION

To save some bucks.

Skipped Laptops

Acer Helios 300 (2019) - Lack of thunderbolt support.
Lenovo Y740 - Big Charger and small battery.
Asus ROG Zephyrus S GX701 - Lack of thunderbolt support.
ASUS ROG Zephyrus S GX502GW - Lack of thunderbolt support.

2019 Laptop Awards

youtube: https://www.youtube.com/watch?v=O8zcB_EcAyY youtube: https://www.youtube.com/watch?v=icRz80kKZBA

Conclusion

And my search ended when I found a good deal on Dell Precision 7720. Even though it only ticked 2 out of my 5 requirements, am pretty satisfied with it.

Create SQL Server Database From a Script in Docker-Compose

Abhith Rajan — Tue, 21 May 2019 14:55:00 GMT

In one of our project which using Microsoft Orleans, We used ADO.NET clustering with SQL Server. When we tried to containerize the application suite, we need a SQL Server instance in a container (for development environment) with a database initialized with some tables and all.

Note: The below setup is not recommended for a PRODUCTION environment.

For that solution, our docker-compose.yml looks like below,

version: '3.4'

services:
  other.service:
    ...
    environment:
      - ConnectionString=Data Source=CONTAINER_NAME_OF_db;Initial Catalog=DB_NAME;User Id=sa;Password=Your_password123;Pooling=False;Max Pool Size=200;MultipleActiveResultSets=True
    depends_on:
      - db
  db:
    image: my/db/image/name
    build:
      context: .
      dockerfile: data/Dockerfile
    # ports:
    #   - "1444:1433"
    volumes:
     - mssqldata:/var/opt/mssql

volumes:
  mssqldata:

In the above, the other.service can be anything (WEB App/Console App etc) that requires the sql server db instance. We marked the dependency between these services properly using depends_on in the docker-compose.yml.

The volumes is specified in the docker-compose.yml in-order to persist the SQL Server data.

In the same directory where docker-compose.yml is, there is a data folder which contains following,

Dockerfile
entrypoint.sh
setup.sql

Dockerfile Which basically get the latest image of mcr.microsoft.com/mssql/server (linux) and configures the SQL Server container.

FROM mcr.microsoft.com/mssql/server

ENV ACCEPT_EULA=Y
ENV SA_PASSWORD=Your_password123

COPY ./data /

ENTRYPOINT [ "/bin/bash", "entrypoint.sh" ]
CMD [ "/opt/mssql/bin/sqlservr" ]

Entry point in the Dockerfile is pointed to a custom shell entrypoint.sh which is,

#!/bin/bash
set -e

if [ "$1" = '/opt/mssql/bin/sqlservr' ]; then
  # If this is the container's first run, initialize the application database
  if [ ! -f /tmp/app-initialized ]; then
    # Initialize the application database asynchronously in a background process. This allows a) the SQL Server process to be the main process in the container, which allows graceful shutdown and other goodies, and b) us to only start the SQL Server process once, as opposed to starting, stopping, then starting it again.
    function initialize_app_database() {
      # Wait a bit for SQL Server to start. SQL Server's process doesn't provide a clever way to check if it's up or not, and it needs to be up before we can import the application database
      sleep 15s

      #run the setup script to create the DB and the schema in the DB
      /opt/mssql-tools/bin/sqlcmd -S localhost -U sa -P Your_password123 -d master -i setup.sql

      # Note that the container has been initialized so future starts won't wipe changes to the data
      touch /tmp/app-initialized
    }
    initialize_app_database &
  fi
fi

exec "$@"

And the setup.sql contains all the SQL statements to generate the DB and all. An example given below,

CREATE DATABASE DB_NAME;
GO
USE DB_NAME;

...

Microsoft SQL Server Guy Trying Oracle Database

Abhith Rajan — Wed, 08 May 2019 15:11:27 GMT

I have worked with Microsoft SQL Server for the past 7 years and still enjoying working with SQL Server. Now I got a chance to explore Oracle Database and here is my experience.

Noticed Differences

There is NO DATABASE NAME, instead there is this user or schema wise separation.
Preferred IDE is Oracle SQL Developer
After executing query, you need to commit in order to retain the changes.
SELECT TOP N is not that easy compared to SQL Server.

Docs

Tablespaces

An Oracle database consists of one or more logical storage units called tablespaces, which collectively store all of the database’s data.

VARCHAR vs VARCHAR2

VARCHAR is reserved by Oracle to support distinction between NULL and empty string in future, as ANSI standard prescribes.

VARCHAR2 does not distinguish between a NULL and empty string, and never will.

If you rely on empty string and NULL being the same thing, you should use VARCHAR2.

Problems

Show Line Numbers in Oracle SQL Developer

This can be done easily by right clicking the line number section in the IDE, then Toggle Line Numbers.

Create User

CREATE USER <UserName> IDENTIFIED BY <Password>;
GRANT CONNECT , RESOURCE, DBA TO <UserName>;

VARCHAR to BLOB

We can use the inbuilt function utl_raw.cast_to_raw which transforms a varchar2 into a BLOB value,

utl_raw.cast_to_raw('SOME_STRING')

Update BLOB via Query

Update TABLE_NAME SET COL_NAME = utl_raw.cast_to_raw('SOME_STRING');

Oracle localhost connection string for an ASP.NET CORE & Dapper project

private readonly string ConnectionString = @"Data Source = (DESCRIPTION = (ADDRESS_LIST = (ADDRESS = (PROTOCOL = TCP)(HOST = localhost)(PORT = 1521)))(CONNECT_DATA = (SERVER = DEDICATED)(SERVICE_NAME = XE))); user id = YOUR_USER_ID; Password= YOUR_USER_PASSWORD";

using (var dbConn = new OracleConnection(ConnectionString))
{
  ...
}

Replace YOUR_USER_ID and YOUR_USER_PASSWORD with appropriate values.

ORA-00933: SQL command not properly ended

This is happened when my query contained semicolon ”;” at the end. Removing the semicolon ”;” from the end of the query solved the problem.

Conclusion

I just started exploring Oracle Database, so this post can be considered as a draft for now, more coming.

Docker - SQL Error on ASP.NET Core Alpine

Abhith Rajan — Tue, 07 May 2019 09:26:00 GMT

My ASP.NET Core app was running fine on mcr.microsoft.com/dotnet/core/runtime:2.2-stretch-slim on my linux container. And the build image size was 195MB. In order to reduce the file size, I switched to mcr.microsoft.com/dotnet/core/sdk:2.2.203-alpine3.9 and the new image size was 98.6MB. WOW !!!

But then there came this problem,

System.InvalidOperationException: Internal connection fatal error

The SQL client was having trouble in this build. After the regular research, find out that in the alpine image

The microsoft/dotnet Alpine images are purposefully configured to use the .NET Core 2.0 Globalization Invariant Mode. This is done to reduce the size of the image substantially. It seems as though the SqlClient does not support running with the Globalization Invariant Mode.

If you are thinking what is .NET Core 2.0 Globalization Invariant Mode,

.NET Core 2.0 Globalization Invariant Mode enables you to remove application dependencies on globalization data and globalization behavior. This mode is an opt-in feature that provides more flexibility if you care more about reducing dependencies and the size of distribution than globalization functionality or globalization-correctness.

But there is a small catch,

The drawback of running in the invariant mode is applications will get poor globalization support.

So solution for this was to add the following in Dockerfile just before the ENTRYPOINT,

RUN apk add --no-cache icu-libs
ENV DOTNET_SYSTEM_GLOBALIZATION_INVARIANT=false

In the first step, we are adding the icu-libs Alpine linux package, which is the international components for unicode library (libraries) and in the next step, we are setting DOTNET_SYSTEM_GLOBALIZATION_INVARIANT to false to enable the globalization support.

Additional Resources

.NET Core 2.0 Globalization Invariant Mode

Gatsby - Cookbook

Abhith Rajan — Fri, 26 Apr 2019 20:00:00 GMT

I 💟 Gatsby. This article contains some recipes which will be useful if you are into Gatsby for your next static site. Recipes are,

Using Google fonts in Gatsby
Using icons like Font Awesome in Gatsby
Disqus integration in a Gatsby website

Using Google fonts in Gatsby

Import the font css on your site main css file.

Using gatsby-plugin-prefetch-google-fonts.

Install the plugin gatsby-plugin-prefetch-google-fonts

yarn add gatsby-plugin-prefetch-google-fonts

Modify gatsby-config.js. Inside the plugins array, add

{
  resolve: `gatsby-plugin-prefetch-google-fonts`,
  options: {
    fonts: [
      {
        family: `Oswald`,
        subsets: [`latin`],
      },
      {
        family: `Open Sans`,
        variants: [`400`, `700`]
      },
    ],
  },
}

You can change the font family and variants or number of fonts in the above configuration according to your website needs.

Using icons like Font Awesome in Gatsby

Using react-icons.

Add it to your packages.

npm install react-icons --save

And in your react component

import { FaBeer } from "react-icons/fa";

class Question extends React.Component {
  render() {
    return (
      <h3>
        {" "}
        Lets go for a <FaBeer />?{" "}
      </h3>
    );
  }
}

Disqus integration in a Gatsby website

Since Gatsby is built on top of React, we can use the React package for Disqus.

yarn add disqus-react

And in your post component

import { DiscussionEmbed } from "disqus-react";

Define the Disqus configuration like

const disqusConfig = {
  shortname: `yourDisqusShortName`,
  config: { identifier: slug, title },
};

Here identifier is the unique id for your post, it can be anything.

And now you can render the Disqus section by adding

<DiscussionEmbed {...disqusConfig} />

More recipes will be added as I explore Gatsby.

ASP.NET Core - Handling Custom Header on Request/Response

Abhith Rajan — Thu, 25 Apr 2019 12:11:27 GMT

You can access the request headers or modify the response headers easily inside the controller in your ASP.NET Core applications.

Add custom header to response

 Response.Headers.Add("your-custom-header-id", custom_header_value);

Get a request header value

 var yourHeader = Request.Headers["your-custom-header-id"].FirstOrDefault();

Get bearer token value

Another example where we get the bearer token from the Authorization header,

var authHeader = Request.Headers["Authorization"].FirstOrDefault();

if (authHeader != null && authHeader.StartsWith("Bearer", StringComparison.OrdinalIgnoreCase))
{
    var loginToken = authHeader.Replace("Bearer ", string.Empty, StringComparison.OrdinalIgnoreCase);
}

Microsoft Orleans - Run Multiple Silos from a .NET Core Console App

Abhith Rajan — Wed, 24 Apr 2019 12:11:27 GMT

My Silo Host project Program.cs Main method looks like below,

private static async Task Main(string[] args)
{
    int siloPort, gatewayPort;
    try
    {
        siloPort = int.Parse(args[0]);
        gatewayPort = int.Parse(args[1]);
    }
    catch (Exception)
    {
        siloPort = 11111;
        gatewayPort = 30000;
    }

    var invariant = "System.Data.SqlClient"; // for Microsoft SQL Server
    var connectionString = "Data Source=.;Initial Catalog=OrleansCluster;Integrated Security=True;Pooling=False;Max Pool Size=200;MultipleActiveResultSets=True";

    var siloBuilder = new SiloHostBuilder()
                    // Clustering information
                    .Configure<ClusterOptions>(options =>
                    {
                        options.ClusterId = "dev";
                        options.ServiceId = "ServiceApp";
                    })
                    .UseAdoNetClustering(options =>
                    {
                        options.Invariant = invariant;
                        options.ConnectionString = connectionString;
                    })
                    .ConfigureEndpoints(siloPort: siloPort, gatewayPort: gatewayPort)

                    .ConfigureLogging(logging => logging.AddConsole());

    using (var host = siloBuilder.Build())
    {
        await host.StartAsync();
        Console.ReadLine();
    }
}

To run multiple Silo, we need to specify different set of ports for each. Here we are achieving the same via parsing the args.

Now you can run a Silo by executing following command on the Silo project root directory

dotnet run <siloPort> <gatewayPort>

eg,

dotnet run 11111 30000
dotnet run 11112 30001
dotnet run 11113 30002

Best Visual Studio Code Extensions

Abhith Rajan — Tue, 12 Feb 2019 17:50:10 GMT

If you ask which is my favorite IDE, it is Visual Studio Code a.k.a vscode. One major strength of vscode is its extensions. And these are my favorites,

Favorites

Angular Snippets (Version X)

Angular Snippets (Version X) by John Papa

Angular Snippets (Version X)

The version in the title of this extension keeps changing as new Angular version releases, and that happens more frequently than I update this article, so keeping it as X.

Auto Close Tag

Auto Close Tag automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text. From VS Code 1.16, it has built-in close tag support for HTML, Handlebars and Razor files. This extension is enabled for other languages like XML, PHP, Vue, JavaScript, TypeScript, JSX, TSX and so on. It is configurable.

Auto Close Tag

Import Cost

Import Cost display import/require package size in the editor

Import Cost

Package Json Upgrade

Package Json Upgrade shows available updates in package.json files. Offers quick fix command to update them and to show the changelog.

Package Json Upgrade

colorize

colorize is a vscode extension to help visualize css colors in files.

colorize

indent-rainbow

indent-rainbow makes indentation easier to read. This extension colorizes the indentation in front of your text alternating four different colors on each step.

indent-rainbow

Todo Tree

Todo Tree show TODO, FIXME, etc. comment tags in a tree view.

Todo Tree

Prettier - Code formatter

Prettier - Code formatter is the VS Code plugin for prettier/prettier

Better Comments

Better Comments improves your code commenting by annotating with alert, informational, TODOs, and more!

Better Comments

VSCode Great Icons

VSCode Great Icons contains a big pack of icons (200+) for your files.

VSCode Great Icons

VSCode Great Icons is my current favorite icon set. What’s your favorite? https://t.co/RhHVKtv94b
— Abhith Rajan (@AbhithRajan) July 25, 2022

Markdown Preview Mermaid Support

Markdown Preview Mermaid Support adds Mermaid diagram and flowchart support to VS Code’s builtin markdown preview.

A mermaid diagram in VS Code's built-in markdown preview

GistPad

GistPad manage your code snippets and developer notes using GitHub Gists and repositories.

GistPad

Git Graph

Git Graph lets you view a Git Graph of your repository, and perform Git actions from the graph.

Git Graph

HTML End Tag Labels

HTML End Tag Labels labels HTML end tags in VSCode.

HTML End Tag Labels

Hungry Delete

Hungry Delete is to delete an entire block of whitespace or tab, and reduce the time programmers need to press backspace.

Hungry Delete

Inline Parameters for VSCode

Inline Parameters for VSCode does function parameter annotations displaying inline in VSCode.

Inline Parameters for VSCode

Project Manager

Project Manager lets you easily switch between projects.

Project Manager

Regex Previewer

Regex Previewer is the regex matches previewer for JavaScript, TypeScript, PHP and Haxe in Visual Studio Code.

Regex Previewer

Markdown All in One

Markdown All in One is All you need to write Markdown (keyboard shortcuts, table of contents, auto preview and more)

Markdown All in One

GitHub Copilot

GitHub Copilot is your AI pair programmer.

Subscription

GitHub Copilot requires a subscription. It is free for verified students and maintainers of popular open source projects on GitHub.

Other Extensions I Use

Azure

Azure Account

Azure Account is a common Sign-In and Subscription management extension for VS Code.

Azure Resources

Azure Resources is an extension for viewing and managing Azure resources..

Bridge to Kubernetes

Bridge to Kubernetes enables rapid Kubernetes development for teams.

Kubernetes

Kubernetes enables VS Code to develop, deploy and debug Kubernetes applications.

Debuggers

Dapr

Dapr makes it easy to run, debug, and interact with Dapr-enabled applications.

Microsoft Edge Tools for VS Code

Microsoft Edge Tools for VS Code enables you to use the Microsoft Edge Tools from within VS Code to see your site’s runtime HTML structure, alter its layout, fix styling issues as well as see your site’s network requests.

Programming Languages

.NET Core Test Explorer

.NET Core Test Explorer is the test Explorer for .NET Core (MSTest, xUnit, NUnit).

C&#35

C# for Visual Studio Code (powered by OmniSharp)..

Docker

Docker makes it easy to create, manage, and debug containerized applications.

ESLint

ESLint integrates ESLint JavaScript into VS Code.

JavaScript Booster

JavaScript Booster enables you to boost your productivity with advanced JavaScript/TypeScript refactorings and commands

MDX

MDX Provides syntax highlighting and bracket matching for MDX (JSX in Markdown) files.

PowerShell

PowerShell enables you to develop PowerShell scripts in Visual Studio Code!

SQL Server (mssql)

SQL Server (mssql) enables to develop Microsoft SQL Server, Azure SQL Database and SQL Data Warehouse on VS Code.

Vetur

Vue tooling for VS Code

Snippets

Document This

Document This automatically generates detailed JSDoc comments in TypeScript and JavaScript files.

ES7 React/Redux/GraphQL/React-Native snippets

ES7 React/Redux/GraphQL/React-Native snippets contains simple extensions for React, Redux and Graphql in JS/TS with ES7 syntax

Icon Fonts

Icon Fonts contains snippets for popular icon fonts such as Font Awesome, Ionicons, Glyphicons, Octicons, Material Design Icons and many more!

Surround

Surround is a simple yet powerful extension to add wrapper templates around your code blocks.

Other

Auto Rename Tag

Auto Rename Tag as the name suggests, auto rename paired HTML/XML tag.

CodeTour

CodeTour allows you to record and playback guided tours of codebases, directly within the editor.

Highlight Matching Tag

Highlight Matching Tag highlights matching closing or opening tag

Live Server

Live Server launch a development local Server with live reload feature for static & dynamic pages

markdownlint

markdownlint provides Markdown linting and style checking for Visual Studio Code.

Markdown Shortcuts

Markdown Shortcuts provide Shortcuts for Markdown editing.

npm Intellisense

npm Intellisense is a visual Studio Code plugin that autocompletes npm modules in import statements

Peacock

Peacock subtly change the workspace color of your workspace. Ideal when you have multiple VS Code instances and you want to quickly identify which is which.

Search node_modules

Search node_modules enables to quickly search the node_modules folder.

Turbo Console Log

Turbo Console Log enables automating the process of writing meaningful log messages.

Bookmarks

Bookmarks enables you to mark lines and jump to them

Code Spell Checker

Code Spell Checker is a spelling checker for source code

Git History

Git History enables you to view git log, file history, compare branches or commits

Git History

Path Intellisense

Path Intellisense is a Visual Studio Code plugin that autocompletes filenames.

Additional Resources

Changelog

2022-07-27

Rewritten after cross checking with what is actually installed on my side currently.

2022-04-18

Added Package Json Upgrade.

2022-03-31

Added Markdown Preview Mermaid Support.

Project management - Organize issues using labels

Abhith Rajan — Wed, 06 Feb 2019 00:00:00 GMT

Labels are a good way to categorize the tasks. But having too many in an unorganized way results more clutter. Here is my way of labeling issues/tasks. This is the way I organize my tasks in GitHub, GitLab and in Jira.

Area

Indicating the area to which issues belong.

Label	Description	Color
optimization	Fine tuning works	`#8bd9e5`
security
ux	User experience	`#ccbef7`

Priority

Used to prioritize the issues.

Label	Description	Color
P0	Requires immediate attention	`#d93f0b`
P1	Requires attention soon
P2	Does not require immediate attention
P3	Low priority items	`f5f5f5`

Previously I was using,

Label	Description	Color
priority/high	Requires immediate attention	`#d93f0b`
priority/medium	Requires attention soon
priority/low	Does not require immediate attention

Stage

Indicating the current stage of the issue.

Label	Description	Color
awaiting-response	Potential fix was proposed; awaiting response	`#FFD700`
backlog	Prioritized to be picked up in current sprint
blocked	Work that is currently impeded or unable to progress due to external factors or dependencies	`#FF0000`
blocking	This issue is blocking the progress of other related tasks	`#FFA500`
in-test	Deployed to TEST environment
investigating	Someone is looking into this
needs-information	Tasks or issues that lack essential information and require additional details before proceeding	`#FF9900`
needs-investigating	Someone needs to look at this
needs-qa-review	The feature branch is ready for QA	`#FFD700`
qa-in-progress	QA testing is currently in progress for this feature branch	`#FFA500`
ready-for-merge	The branch has passed QA and is ready to be merged into the main branch	`#2E8B57`
needs-review	Work done but needs review
pending-release	Works associated with this issue is done but not deployed
proposal	No work has been done of this issue
ready-for-work	The issue is reproducible and in scope
wontfix	Does not regard this as an issue or will not implement this feature
work-in-progress	Someone is working on it	`#68db1c`

Stage labels like in progress, backlog etc can be skipped in GitHub if you linked the issue to a project which has relevant columns matching these stages.

Kind

Used to categorize the issues.

Label	Description	Color
breaking	Breaking change	`#91085D`
bug	Something isn’t working	`#ee0701`
chore	Work is required w/ no deliverable to end user	`#2C4B5A`
comment	Comments created via utteranc.es	`#893aff`
documentation	Improvements or additions to documentation	`#5F6D58`
dependencies	For managing project dependencies	`#6cc644`
duplicate	This issue already exists	`#cfd3d7`
feature	New feature that does not currently exist	`#62fcbe`
enhancement	Requested enhancement of existing feature	`#6550ba`
question	Further information is requested	`#d876e3`
test	This tests something	`#926342`

Label	Description	Color
dependent	This issue is dependent on the resolution of another issue	`#D619AD`
proactive	Tasks deliberately chosen from backlog, utilizing available time within the current sprint	`#40D256`
stale	Issues with no activity for long time
unplanned	Work that has arisen unexpectedly and requires immediate attention or action	`#FF5733`

If you are a colorful person 😉 , suggest me some colors for these labels in the comments 👇

Changelog

2024-10-17

Added needs-qa-review, qa-in-progress, ready-for-merge

2022-07-21

Labels changed to non-prefix format.

GitLab - Clone a repository when 2FA enabled

Abhith Rajan — Wed, 19 Dec 2018 00:00:00 GMT

I love services which provide extra security. One way to provide such a level security is by using Two Factor Authentication (2FA). GitLab provides 2FA, and I enabled it. After that, cloning a repository will not work in the usual mode,

    git clone https://gitlab.com/username/projectname.git

It will result

Cloning into 'projectname'...
remote: HTTP Basic: Access denied
remote: You must use a personal access token with 'api' scope for Git over HTTP.
remote: You can generate one at https://gitlab.com/profile/personal_access_tokens
fatal: Authentication failed for 'https://gitlab.com/username/projectname.git/'

As the response suggest, we need to create a personal access token.

Creating a personal access token

Log in to your GitLab account.
Go to your Profile settings.
Go to Access tokens.
Choose a name and optionally an expiry date for the token.
Choose the desired scopes (api access).
Click on Create personal access token.
Save the personal access token somewhere safe. Once you leave or refresh the page, you won’t be able to access it again.

Once you have created your personal access token, try cloning by

    git clone https://oauth2:PERSONAL_ACCESS_TOKEN@gitlab.com/username/projectname.git

Replace ‘PERSONAL_ACCESS_TOKEN’ with the token you have generated.

Additional Resources

Personal access tokens | GitLab

Filtering, Paging and Sorting in SQL Server 2008

Abhith Rajan — Thu, 22 Nov 2018 00:00:00 GMT

Stored procedure to achieve paging, sorting and filtering in SQL Server 2008 is given below.

CREATE PROCEDURE [dbo].[uspTableNameOperationName] @Query      NVARCHAR(50) = NULL,
                           @Offset     INT          = 0,
                           @PageSize   INT          = 10,
                           @Sorting    NVARCHAR(20) = 'ID DESC',
                           @TotalCount INT OUTPUT
AS
  BEGIN
    SET NOCOUNT ON;
    SET @Query = LTRIM(RTRIM(@Query));
    SELECT @TotalCount = COUNT([Id])
    FROM [dbo].[TableName]
    WHERE IsDeleted = 0
        AND (@Query IS NULL
           OR [ColumnOne] LIKE '%' + @Query + '%'
           OR [ColumnTwo] LIKE '%' + @Query + '%');
    WITH CTEResults
       AS (SELECT Id,
            [ColumnOne],
            [ColumnTwo],
            [ColumnThree],
            ROW_NUMBER() OVER(
            ORDER BY CASE
                   WHEN(@Sorting = 'ID DESC')
                   THEN [Id]
                 END DESC,
                 CASE
                   WHEN(@Sorting = 'ID ASC')
                   THEN [Id]
                 END ASC,
                 CASE
                   WHEN(@Sorting = 'COLUMNONE ASC')
                   THEN [ColumnOne]
                 END ASC,
                 CASE
                   WHEN(@Sorting = 'COLUMNONE DESC')
                   THEN [ColumnOne]
                 END DESC,
                 CASE
                   WHEN(@Sorting = 'COLUMNTWO ASC')
                   THEN [ColumnTwo]
                 END ASC,
                 CASE
                   WHEN(@Sorting = 'COLUMNTWO DESC')
                   THEN [ColumnTwo]
                 END DESC) AS RowNum
         FROM [dbo].[TableName]
         WHERE IsDeleted = 0
            AND (@Query IS NULL
              OR [ColumnOne] LIKE '%' + @Query + '%'
              OR [ColumnTwo] LIKE '%' + @Query + '%');
    SELECT *
    FROM CTEResults
    WHERE RowNum BETWEEN @Offset + 1 AND(@Offset + @PageSize);
  END;
GO

In the above query, we are using CASE to do the conditional sorting. And with help of a common table expression (CTE), we do the paging. For filtering (here only string comparison), we are using LIKE.

If you are using SQL Server 2012 or later, then you have other options to do paging like by using OFFSET FETCH.

Story in short

During this post is written, I was working on an Angular 6 + ASP.NET Core 2.1 web app. The DB provided was a SQL Server 2008. Used Dapper to do the repository level coding.

Additional Resources

.netstandard2.0 Project - DocFX MSBuild Error

Abhith Rajan — Tue, 20 Nov 2018 00:00:00 GMT

I tried to generate documentation for a .netstandard2.0 project using DocFX.

Installed DocFX using chocolatey package.
Created a sample project using command line.

docfx init

Updated the docfx.json w.r.t the folder structure.
Build the website using command line.

docfx --serve

The DocFX site builded but project specific documentation not generated. And there were some warnings like

Warning:No metadata is generated for ProjectName

SDK “Microsoft.NET.Sdk” not found

Solution

Set environment variable MSBuildSDKsPath pointing right to the SDK path. In my case,

C:\Program Files\dotnet\sdk\2.1.500\Sdks

After setting the environment variable, closed the command line (VS Code) and re opened. Tried building the DocFX again and it worked.

Additional Resources

DocFX implementation on .netstandard2.0 project Code.Library - Refer the “docs” folder

Docker: Cookbook

Abhith Rajan — Sun, 28 Oct 2018 18:35:00 GMT

This article is my own reference for Docker development, contains solutions for problems I have faced while working with Docker and some helpful external resources.

Problems

1. docker: “build” requires 1 argument. See ‘docker build —help’

Most probably you missed a dot, need to add it, example

docker build -t docusaurus-doc .

It means you use the Dockerfile in the local directory

2. “read-only file system” error running Docker Toolbox in Windows 7

Try restarting the docker machine by following below steps:

First, you need to find the name of your docker machine

 docker-machine ls

Then with your machine name, run the command

docker-machine restart <name>

3. Docker for windows - Mapping docker to localhost

You can do it by configuring your Virtualbox. Follow below steps,

VirtualBox -> Your BOX -> Settings -> Network ->
Choose NAT
Open Advanced
Click Port Forwarding
Add a new rule to map the desired port you need from host to guest
Ok/Save
Stop Box
Start the Box

4. COPY failed: CreateFile

In my visual studio solution, containing a .NET Core Console app, I enabled Docker support using Visual studio container tools on Windows.

Visual studio container tools on Windows

And it generated a Dockerfile inside the selected project but when i tried to build an image from inside the project directory using the docker command

docker build -t myimagename .

It failed with following exception,

COPY [“ProjectDirectory/ProjectName.csproj”, “ProjectDirectory/”] COPY failed: CreateFile \?\C:\ProgramData\Docker\tmp\docker-builder366701720\ProjectDirectory\ProjectName.csproj: The system cannot find the path specified.

This was because I tried to run this from inside the ProjectDirectory. Why I tried to run from there was because the while enabling docker support via Visual Studio 2019 context menu, the Dockerfile generated inside that project directory, not in the root directory of solution.

So inorder to fix this, I moved the same Dockerfile to the root directory of the solution. It can be done via Powershell command

mv Dockerfile ../Dockerfile

Then cd into the root directory of the solution where now the Dockerfile is, and run the build command, and it worked.

5. Force Docker for a clean build (not using cache)

Using --no-cache in your build command.

docker build --no-cache -t myimagename .

6. Rename a Container

Using the docker rename command.

docker rename CONTAINER_ID my_new_container_name

7. $‘\r’: command not found

This is occurred when I tried to run some sh file in my linux container. That sh file was saved in CRLF end of line sequence, changing it to LF solved the problem.

If you wonder what is End of line sequence,

The End of Line (EOL) sequence ( 0x0D 0x0A , \r\n ) is actually two ASCII characters, a combination of the CR and LF characters. It moves the cursor both down to the next line and to the beginning of that line.

If you are using Vscode, switching EOL is easy, on the bottom right corner, you can find the current EOL sequence of the editing file, by clicking on it, Vscode will present you a dropdown to choose from. Select the LF in this case, and save file.

8. Copy docker image from one host another

By using docker save command, we can export docker image as a .tar file.

docker save -o /path/image_name.tar image_name

The above will create an image_name.tar file in the path specified. Copy it to the new host, then you can import the image to the new host by using docker load like below,

docker load -i <path to image tar file>

9. Dotnet core build error when building docker image - Missing Newtonsoft.Json

In my case, When used JsonProperty in a class,

Visual Studio intellicode auto-filled,

using Newtonsoft.Json;

Then during docker build,

warning MSB3245: Could not resolve this reference. Could not locate the assembly “Newtonsoft.Json”. Check to make sure the assembly exists on disk.

When I checked, found out that the Visual Studio added an Assembly Reference to Newtonsoft.Json (you can find this by expanding Dependencies node in the solution explorer in Visual Studio). And I was using Linux images.

So in order to solve this, I removed the Assembly Reference, and added nuget package Newtonsoft.Json, then the docker build was successful.

Questions

1. Difference between docker `run` and `start`

In short,

run : runs an image. i.e it will create a container from that image first and then starts the container. All in one command.
start : starts the specified container.

So if you created a container from an image using the create command, then you can use start command to start that container. Or you can start a container from the image by using the run command.

2. How to change the default docker image name using VS2019

By adding <DockerfileTag/> to project property group like given below,

  <PropertyGroup>
    <TargetFramework>netcoreapp3.1</TargetFramework>
    ...
    <DockerDefaultTargetOS>Linux</DockerDefaultTargetOS>
    <DockerfileTag>custom.image.name.here</DockerfileTag>
  </PropertyGroup>

CLI

docker-compose

Build the images, do not start the containers

docker-compose build

Build the images if the images do not exist and start the containers

docker-compose up

Force `docker-compose` to build from scratch, no cache

docker-compose build --no-cache

Force to build the images even when not needed

docker-compose up --build

Run multiple containers of the same image

docker-compose up --scale <SERVICE_NAME>=n

Replace the <SERVICE_NAME> with the appropriate service listed in the docker-compose.yml and n with the number of containers you want, in order to create that number of containers of that service.

Build single container using docker-compose

docker-compose build <SERVICE_NAME>

Replace the <SERVICE_NAME> with the appropriate service listed in the docker-compose.yml.

External Resources

How to Connect to Your Local SQL Server From Inside Docker — Jack Vanlightly

Changelog

2020-06-10

Added solution for “How to change the default docker image name using VS2019”

Pad a number with leading zeros in SQL to make uniform char length

Abhith Rajan — Mon, 01 Oct 2018 18:43:00 GMT

When you are in need of transforming a number to have zeros prefixed, use the below query. In order to prefix with zeros, we need to convert the number to a varchar.

SELECT REPLACE(STR(n,x),’ ’,‘y’)

STR function in SQL returns character data converted from numeric data. In the query, ‘n’ is the number to be transformed. ‘x’ is the number of chars to be returned and ‘y’ is the character to be prefixed with the number ‘n’ in order to make the specified length ‘x’.

eg. SELECT REPLACE(STR(9,5),’ ’,‘0’) will return “00009”

Additional Resources

STR (Transact-SQL) | Microsoft Docs

The Best Extensions for Visual Studio 2010

Abhith Rajan — Sun, 30 Sep 2018 19:17:00 GMT

You may think why such a post in 2018. This is because I recently moved to another firm where I have to support some legacy apps. Few of them are built using Visual Studio 2010 and they have no plan to upgrade so far. After working so long in VS2017 with ReSharper and all, working with VS2010 is not so pleasant. But in order to improve the default experience VS2010 offering, following extensions helped me so far.

I Hate #Regions

Regions Suck. You need this.

devColor

devColor underlines the colors in stylesheets and contains a color picker.

Brace Completer

Brace Completer automatically adds closing braces after typing an opening brace and pressing Enter.

Highlight all occurrences of selected word

Highlight all occurrences of selected word extends the editor to highlight all occurrences of a selected word and place a glyph on the left margin.

Go To Definition

Go To Definition make ctrl+click perform a “Go To Definition” on the identifier under the cursor. Also, when the ctrl key is held down, highlight identifiers that look like they have definitions to navigate to.

Productivity Power Tools

Productivity Power Tools is a set of extensions to Visual Studio Professional (and above) which improves developer productivity.

AllMargins 2012

AllMargins 2012 extension contains the OverviewMargin and several other extensions of that margin.

DPack

DPack is a FREE collection of Microsoft Visual Studio tools. DPack is designed to greatly increase developer’s productivity, automate repetitive processes and expand upon some of Microsoft Visual Studio features.

ASP.NET Core - Starting the web server is taking longer than expected

Abhith Rajan — Sun, 13 May 2018 09:26:00 GMT

One of our recent projects is on ASP.NET Core, and we are using aspnetboilerplate ASP.NET Core 2.x + Angular free (and one of the best) boilerplate for the same. One of the requirement is to have the social login. ABP free template doesn’t have built-in social login feature like ABP ZERO paid template, but we can integrate it after spending few hours on google.

In order to test the social login, like facebook, we need to have https (even for localhost). So I updated the Host project settings to use https. After making the site https (localhost), when I debug, there comes the message window, saying

Starting the web server is taking longer than expected

I spend some time staring the screen but nothing happened, a little google for the same pointed that it was because of the new localhost SSL related. I did accepted the certificate while project settings updated but somehow this issue. To solve it,

Browse the https website from IISExpress in the taskbar icon tray.

That will open the website and the rest was fine and never faced the problem again.

Flutter Cookbook

Abhith Rajan — Mon, 30 Apr 2018 19:22:00 GMT

Most of the solution implementations mentioned below can be found in my repo https://github.com/Abhith/piggy-flutter.

Move to a new screen without back

An example of this use case is the login page. When a user successfully logged in, we redirect the user to another page, and in most case, we don’t want a back button to go back to the login page. This can be easily done using Navigator.pushReplacement

    Navigator.pushReplacement(
            context,
            MaterialPageRoute(builder: (context) => HomePage()),
    );

State Management

Bloc

As a rookie in the flutter, one of the biggest challenges I faced was state management. Started with StatefulWidget’s setState, but sooner understood that it is not enough (state persistence was the tough part). After a long search, found that there are many ways to do it in flutter including Redux, Scoped Model, BLoC etc. I don’t like Redux too much, I tried it for React Native app earlier and moved to mobx-state-tree instead.

One I got excited about was Streams and BLoC (business logic components). But first found tutorials was not enough and heavily confusing (for a rookie). But tried them one by one and my solutions get better after each commit.

Now in my view, the best way to do it is by using the bloc package and the best part of it is, this one is very well documented with example applications. It also has an extension for VSCODE to ease the usage.

Build

Build failed - null value in entry: outputFile=null

Recently my machine shutdown unexpectedly during a build in progress. After that, all the build is failing with this error.

Removing the .gradle directory in the root project directory will fix the problem.

Error importing package:http/http.dart

After long time, when I tried to build, I got this error. To resolve,

Go to your pubspec.yaml file , and add the http dependency:

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.2
  http: any

Then run the following,

flutter packages get

If you are using VS Code as the IDE, the above will be automatically executed once you save the pubspec.yaml file. (If you installed the Flutter extension for VS Code).

SocketException: OS Error: Connection refused, errno = 111 when trying to connect to localhost

My ASPNET Core API’s where running on localhost and I was trying to request against the same using the Android emulator, then your server endpoint should be 10.0.2.2:PORT_NUMBER instead of localhost:PORT_NUMBER as AVD uses 10.0.2.2 as an alias to your host loopback interface (i.e) localhost.

More than one file was found with OS independent path ‘META-INF/proguard/androidx-annotations.pro’

Adding following in the android > app > build.gradle fixed the build error,

android {
     packagingOptions {
         exclude 'META-INF/proguard/androidx-annotations.pro'
     }
 }

Disable Null Safety Check

Include a version prior to 2.12 in the pubspec.yaml file to disable null safety.

environment:
  sdk: ">=2.11.0 <3.0.0"

Changelog

2022-03-09

Added solution for “Disable Null Safety Check”

2020-03-11

Added solution for “More than one file was found with OS independent path ‘META-INF/proguard/androidx-annotations.pro’""

React Native - Build APK

Abhith Rajan — Tue, 24 Apr 2018 19:34:00 GMT

First

react-native bundle —dev false —platform android —entry-file index.js —bundle-output ./android/app/build/intermediates/assets/debug/index.android.bundle —assets-dest ./android/app/build/intermediates/res/merged/debug

Second

cd android

Final

./gradlew assembleDebug

Once all three commands executed successfully. You can find the generated APK on

Project root directory > android > app > build > outputs > apk > app-debug.apk

As the name suggests, this is not a release version. But still, you can share it with testers. I use hockeyapp to do the distribution.

IIS - OPTIONS Requests Returns 404

Abhith Rajan — Thu, 19 Apr 2018 19:29:00 GMT

The best way to figure out what is happening is to check the IIS logs. That should be the first thing to do in a similar situation. If you notice something like “Rejected-By-UrlScan”, you need to check the URLScan configurations located in

Windows drive (C: most probably) > Windows > system32 > inetsrv > urlscan > UrlScan.ini

Open the above file in a text editor and look for [AllowVerbs] section. If OPTIONS not specified in the [AllowVerbs] section along with others (GET, POST etc), add OPTIONS. To do that, you may need to open the file in a text editor with administrative privileges and save. That’s it.

Story Behind

Recently we installed URLScan on our front-end servers for one of SharePoint project in order to redirect 404 URL’s to the relevant pages, to improve the SEO. But after the deployment, another Web API project hosted in the same machines failed to serve OPTIONS request.

When checked the browser console errors, we thought of CORS issue and tried custom header appending etc in the web.config but nothing worked out, and later we find out the issue with URLScan. When we checked the URLScan configuration, by default only GET, PUT and POST are included in the [AllowVerbs] section. So our OPTIONS request where not even reached our website and being rejected by the URLScan module. Once we added OPTIONS in the [AllowVerbs] section, everything resumes working fine.

Additional Resources

Rejected-By-UrlScan 404 Errors

.NET Interview Questions and Answers

Abhith Rajan — Thu, 12 Apr 2018 00:00:00 GMT

Following are some of the questions which I faced during interviews (don’t remember all of them).

General

Self-introduction (*)

Knowledge

Difference between WCF and Web API
Delegates
ASP.NET Page Life Cycle (5)
Session-State Modes
How to find out whether it is a post back in the web form

Other

IIS version you are using

Practical Level

Query the second most salary from a table of salaries using SQL
Write a simple Angular 5 app which list data from a REST API. Include some action on the list like delete row.

Noticed the count/* beside some questions? It indicates that the question was asked on multiple occasions.

Self-introduction

No matter what kind of interview you are going to attend, prepare for this question.

Difference between WCF and Web API

WCF enables building services that support multiple transport protocols (HTTP, TCP, UDP, and custom transports) and allows switching between them.
Web API is HTTP only. The first-class programming model for HTTP. More suitable for access from various browsers, mobile devices etc enabling wide reach.
WCF enables building services that support multiple encodings (Text, MTOM, and Binary) of the same message type and allows switching between them.
Web API supports a wide variety of media types including XML, JSON etc.
WCF supports building services with WS-* standards like Reliable Messaging, Transactions, Message Security.
Web API uses basic protocol and formats such as HTTP, WebSockets, SSL, JSON, and XML. There is no support for higher level protocols such as Reliable Messaging or Transactions.
WCF supports Request-Reply, One Way, and Duplex message exchange patterns.
HTTP is request/response but additional patterns can be supported through SignalR and WebSockets integration with Web API.
WCF SOAP services can be described in WSDL allowing automated tools to generate client proxies even for services with complex schemas.
There is a variety of ways to describe a Web API ranging from auto-generated HTML help page (eg. Swagger) describing snippets to structured metadata for OData integrated APIs.
WCF ships with the .NET framework.
Web API ships with the .NET framework but is open-source and is also available out-of-band as an independent download.

Additional Resources

WCF and ASP.NET Web API | Microsoft Docs

Delegates

A delegate is a type that represents references to methods with a particular parameter list and return type.

Delegates allow methods to be passed as parameters.
Delegates can be used to define callback methods.
Delegates can be chained together.

Additional Resources

Delegates (C# Programming Guide) | Microsoft Docs

ASP.NET Page Life Cycle

When an ASP.NET page runs, the page goes through a life cycle in which it performs a series of processing steps. These include initialization, instantiating controls, restoring and maintaining state, running event handler code, and rendering. It is important for you to understand the page life cycle so that you can write code at the appropriate life-cycle stage for the effect you intend.

General Page Life-Cycle Stages

In general terms, the page goes through the stages outlined in the following table.

Stage	Description
Page request	The page request occurs before the page life cycle begins. When the page is requested by a user, ASP.NET determines whether the page needs to be parsed and compiled (therefore beginning the life of a page), or whether a cached version of the page can be sent in response without running the page.
Start	In the start stage, page properties such as Request and Response are set. At this stage, the page also determines whether the request is a postback or a new request and sets the IsPostBack property. The page also sets the UICulture property.
Initialization	During page initialization, controls on the page are available and each control’s UniqueID property is set. A master page and themes are also applied to the page if applicable. If the current request is a postback, the postback data has not yet been loaded and control property values have not been restored to the values from view state.
Load	During load, if the current request is a postback, control properties are loaded with information recovered from view state and control state.
Postback event handling	If the request is a postback, control event handlers are called. After that, the Validate method of all validator controls is called, which sets the IsValid property of individual validator controls and of the page. (There is an exception to this sequence: the handler for the event that caused validation is called after validation.)
Rendering	Before rendering, view state is saved for the page and all controls. During the rendering stage, the page calls the Render method for each control, providing a text writer that writes its output to the OutputStream object of the page’s Response property.
Unload	The Unload event is raised after the page has been fully rendered, sent to the client, and is ready to be discarded. At this point, page properties such as Response and Request are unloaded and cleanup is performed.

Life-Cycle Events

Within each stage of the life cycle of a page, the page raises events that you can handle to run your own code.

Page Event	Typical Use
PreInit	Raised after the start stage is complete and before the initialization stage begins. Use this event for Checking the IsPostBack property to determine whether this is the first time the page is being processed, The IsCallback and IsCrossPagePostBack properties have also been set at this time, Create or re-create dynamic controls, Set a master page dynamically, Set the Theme property dynamically and Read or set profile property values.
Init	Raised after all controls have been initialized and any skin settings have been applied. The Init event of individual controls occurs before the Init event of the page. Use this event to read or initialize control properties.
InitComplete	Raised at the end of the page’s initialization stage. Only one operation takes place between the Init and InitComplete events: tracking of view state changes is turned on. View state tracking enables controls to persist any values that are programmatically added to the ViewState collection. Until view state tracking is turned on, any values added to view state are lost across postbacks. Controls typically turn on view state tracking immediately after they raise their Init event. Use this event to make changes to view state that you want to make sure are persisted after the next postback.
PreLoad	Raised after the page loads view state for itself and all controls, and after it processes postback data that is included with the Request instance.
Load	The Page object calls the OnLoad method on the Page object, and then recursively does the same for each child control until the page and all controls are loaded. The Load event of individual controls occurs after the Load event of the page. Use the OnLoad event method to set properties in controls and to establish database connections.
Control events	Use these events to handle specific control events, such as a Button control’s Click event or a TextBox control’s TextChanged event.
LoadComplete	Raised at the end of the event-handling stage. Use this event for tasks that require that all other controls on the page be loaded.
PreRender	Raised after the Page object has created all controls that are required in order to render the page, including child controls of composite controls. (To do this, the Page object calls EnsureChildControls for each control and for the page.) The Page object raises the PreRender event on the Page object, and then recursively does the same for each child control. The PreRender event of individual controls occurs after the PreRender event of the page. Use the event to make final changes to the contents of the page or its controls before the rendering stage begins.
PreRenderComplete	Raised after each data bound control whose DataSourceID property is set calls its DataBind method. For more information, see Data Binding Events for Data-Bound Controls later in this topic.
SaveStateComplete	Raised after view state and control state have been saved for the page and for all controls. Any changes to the page or controls at this point affect rendering, but the changes will not be retrieved on the next postback.
Render	This is not an event; instead, at this stage of processing, the Page object calls this method on each control. All ASP.NET Web server controls have a Render method that writes out the control’s markup to send to the browser. If you create a custom control, you typically override this method to output the control’s markup. However, if your custom control incorporates only standard ASP.NET Web server controls and no custom markup, you do not need to override the Render method. For more information, see Developing Custom ASP.NET Server Controls. A user control (an .ascx file) automatically incorporates rendering, so you do not need to explicitly render the control in code.
Unload	Raised for each control and then for the page. In controls, use this event to do final cleanup for specific controls, such as closing control-specific database connections. For the page itself, use this event to do final cleanup work, such as closing open files and database connections, or finishing up logging or other request-specific tasks.

Additional Resources

ASP.NET Page Life Cycle Overview | MSDN

Session-State Modes

ASP.NET session state supports several different storage options for session data.

Mode	Description
InProc	which stores session state in memory on the Web server. This is the default.
StateServer	which stores session state in a separate process called the ASP.NET state service. This ensures that session state is preserved if the Web application is restarted and also makes session state available to multiple Web servers in a Web farm.
SQLServer	stores session state in a SQL Server database. This ensures that session state is preserved if the Web application is restarted and also makes session state available to multiple Web servers in a Web farm.
Custom	which enables you to specify a custom storage provider.
Off	which disables session state.

Additional Resources

Session-State Modes | MSDN

How to find out whether it is a post back in the web form

By checking Page.IsPostBack Property, Gets a value that indicates whether the page is being rendered for the first time or is being loaded in response to a postback.

Additional Resources

Page.IsPostBack Property | MSDN

Query the second most salary from a table of salaries using SQL

SELECT TOP 1 * FROM TABLENAME WHERE SALARY < (SELECT MAX(SALARY) FROM TABLENAME) ORDER BY SALARY DESC

Of course there is another better solution, which is using SQL OFFSET-FETCH clause, which is

SELECT * FROM TABLENAME ORDER BY SALARY DESC OFFSET 1 ROWS FETCH NEXT 1 ROWS ONLY

Questions with link to answers

SQL

ASP.NET MVC

Other

CLR
Generics

Non-Technical

Why leaving current organization (3)
Difficult people you have been in touch with during work (Manager, Stakeholder or Colleagues) and how you dealt with them
How you responded when a drastic change is requested by the client after all the work done
Which project you think that doesn’t achieved its reach and why that happened
Explain entire lifecycle of a project that you handle (2)

Umbraco

Did your Umbraco sites backoffice is publicly accessible?
Archetype
What is the alternative for Archetype ?
Packages you have worked with
Custom Data Type
How to show custom error for media upload if file size exceeds the limit ?
Events
Experience with Umbraco Forms
Difference between surface controller and a normal mvc controller?
API Controller
Built authorized pages?

.NET

Boxing and Unboxing
Serialization & Deserialization
by reference vs. by value
C# supports multi-inheritance?
How to stop inheritance?
For Ajax calls, what is the lifecycle of a WebForm
Can we return view from Web api? - NO

JavaScript

getElementsByName, getElementById
Cloning
by reference vs. by value
How can we access a WCF

AngularJS

Modules (2)
Controllers

Angular

Why chosen Angular over ReactJS
What is Polyfills.js
Pure/Impure Pipes
ViewChild
Template driven forms
NgOnChanges, NgDirty
What is @Input and @Output
How to deploy Angular project and what is dist folder
How Angular works in browser
What is AOT
How to write Custom Pipes and how will name

Xamarin

How to reduce apk size
Why using Xamarin forms over native application?
Architecture of xamarin forms project

Drafts

Server side paging via entity framework
Entity framework approaches
Entity framework versions you have worked with?
PCL
How PCL compiled
Difference between PCL and shared projects (Xamarin)
What is MVC
How model is validated MVC?
Some components annotations
How to differentiate Web API controllers from MVC controllers if they have same name
What can be done in wcf which cannot done in Web API?
Oauth
Oath flow
Odata
Session in MVC
Bundling
What’s inside app data folder
Cache advantages
How can we define Cache expiry
How an old SQL project can be moved to entity framework in less time
Mvc project architecture (2)
What’s inside MVC areas folder
Routing in MVC (2)
Attribute routing in MVC (2)
Routing priority
Razor
Tag helpers in MVC
Tag helpers or html helpers you use and why
Dependency injection
CORS
Advantages of Razor
How to retrieve data posted in MVC controller
Azure
Override method in a class
Worker types in azure
Iaas Azure
Difference between MVC 5 and 6
CRUD in entity framework
Redis
Lazy loading in EF
IEnumerable vs List
Polymorphism in OOP
Interface vs Abstract classes
Is there abstract methods
Reporting tools you have used
How to reuse a certain view section in multiple places
Why you choose Angular over KnockoutJs
Oracle DB Experience (3)
What is the purpose of Global.Ascx
In Web forms, in which page lifecycle method we can toggle element visibility
REST vs SOAP
Mobile API security guidelines (Sensitive data handling techniques)
Complex system deployment automation tools and techniques
Microservices
DML and DDL in SQL
Transactions in SQL
Process vs Task
AppDomain
SOAP
What is SPA
How can we convert WCF to a REST service

As you can see, this a long list so will take time to format the questions as well as include answers. Consider this as a draft for now.

Enable Click-Jacking Protection - Umbraco

Abhith Rajan — Sat, 07 Apr 2018 07:21:00 GMT

Umbraco makes it easy to protect your site from clickjacking by providing an option to the user to turn on the protection in its backoffice. If you navigate to the Developer section of Umbraco backoffice, Where you can find Health Check tab, in which one of the section is “Security”, Inside security, there is one section for Click-Jacking Protection. If you check the security group and you can see the warning related to Click-Jacking, and you can enable protection from there itself with the click of a button, which basically adds following to your system.webServer section in web.config ,

<httpProtocol>
  <customHeaders>
    <remove name="X-Powered-By" />
    <remove name="X-Frame-Options" />
    <add name="X-Frame-Options" value="sameorigin" />
  </customHeaders>
</httpProtocol>

Setting X-Frame-Options to sameorigin make the page can only be displayed in a frame on the same origin as the page itself. Also, we can set it to DENY if wanted but then we have to exclude umbraco path since umbraco backoffice have iframes.

Also, make sure you have updated web.config in your source code (version control) if you enabled clickjacking protection via backoffice. Otherwise on your next web deploy, the web.config on the host server will be overwritten with the source code version.

Additional Resources

Fix: Web deploy - could not verify the server certificate

Abhith Rajan — Fri, 06 Apr 2018 07:49:00 GMT

Today when I tried to deploy my new ASP.NET CORE 2 app to SmarterASP.NET, the deployment failed with a message

Web deployment task failed. (Connected to the remote computer (“xxxxxxxxx”) using the specified process (“Web Management Service”), but could not verify the server’s certificate. If you trust the server, connect again and allow untrusted certificates.

I got the publish profile from the SmarterASP.NET control panel and when I opened the PublishSettings using VS Code, it had AllowUntrustedCertificate=“True” which I imported to the project but when I checked the Publish Profile under my project ( Project > Properties > xxx.pubxml), there was no entry of AllowUntrustedCertificate.

So, in order to fix the issue, inside PropertyGroup just added

<AllowUntrustedCertificate>True</AllowUntrustedCertificate>

That solved the issue with web deploy.

Fetch Row Count for All Tables in a SQL SERVER

Abhith Rajan — Sun, 11 Mar 2018 20:00:00 GMT

Just execute the below query in the database to see the list of tables and number of records in each table.

SELECT t.name, s.row_count
FROM sys.tables t
    JOIN sys.dm_db_partition_stats s
ON t.object_id = s.object_id
    AND t.type_desc = 'USER_TABLE'
    AND s.index_id IN (0,1)

Download file using WCF REST Service

Abhith Rajan — Wed, 07 Mar 2018 08:55:00 GMT

Recently, We deployed a web application in a load balanced environment. And one of the features in the app was to download some data as excel and it was working fine in DEV (as usual) but keep failing in the PROD. When I checked it on the individual servers, all worked fine but not under SLB (Software Load Balancing).

So I reviewed the code and found out that there are two requests being sent, one after another, one for generating the file in the server and another one for fetching the generated file. Pretty bad implementation, right? When is under load balanced environment, the first request may be served from one server and the second from another server. And there was no shared storage space (we used OSS). No sticky session either. So file generated in one server and it is being requested in another server which leads to 404.

To solve, We had to combine both, i.e generate the file and serve it on the same request. To do that, our code look like this,

Service Contract Interface

[WebGet(UriTemplate = "{cultureName}/download/{someId}")]
[OperationContract]
Stream GetReportByDate(string cultureName, string someId);

Of course it is a HTTP GET method. And the implementation looks like below,

public Stream GetReportByDate(string cultureName, string someId)
{
    try
    {
        ...
         // Generate file the usual way
        var filePath = SomeWayGenerateFileAndReturnFilePath();
        if (WebOperationContext.Current != null)
        {
            WebOperationContext.Current.OutgoingResponse.Headers["Content-Disposition"] =
        "attachment; filename=" + fileNameWithExtension;
             WebOperationContext.Current.OutgoingResponse.ContentType = "application/octet-stream";
        }
        return File.OpenRead(filePath);
    }
    catch (Exception exception)
    {
        throw new WebProtocolException(HttpStatusCode.InternalServerError, $"ERROR: Operation faild. {exception.Message}", exception.InnerException);
    }
}

Here ContentType can be whatever it is, if you know it. application/octet-stream is appropriate for entitites whose sole intended purpose is to be saved to disk. If you only generates say PDF, then the content type part can be changed to,

WebOperationContext.Current.OutgoingResponse.Headers["Content-Disposition"]
  = "attachment; filename=MyFileName.pdf";
WebOperationContext.Current.OutgoingResponse.ContentType
  = "application/pdf";

That’s it.

Vue.js List Rendering : Limit items in v-for

Abhith Rajan — Tue, 27 Feb 2018 18:25:00 GMT

Today I had to render 200+ items in a bootstrap table which didn’t appear to be user-friendly. So I planned to show first 20 of them on load, and if the user wanted, show full items.

To do that, my Vue app code looks like this,

var app = new Vue({
  el: "#app",
  data: {
    countries: [],
    isLoadingCountries: false,
    showLessCountries: true,
  },
  methods: {
    getCountries: function () {
      app.isLoadingCountries = true;
      app.$http
        .get("some-url")
        .then(function (response) {
          if (response.data) {
            if (response.data.isSuccess) {
              app.countries = response.data.countries;
            }
          }
        })
        .then(function () {
          app.isLoadingCountries = false;
        });
    },
  },
  created: function () {
    this.getCountries();
  },
});

Basically, it contains an array, one flag to indicate the data fetch operation is ongoing or not, one flag to indicate whether the full list is showing or fewer items, and a function to fill the data in the array. I hope the naming convention in the code is pretty self-explanatory.

And my markup,

<table class="table" v-if="!isLoadingCountries">
  <thead>
    <tr>
      <th scope="col">Country</th>
    </tr>
  </thead>
  <tbody v-if="showLessCountries">
    <tr v-for="country in countries.slice(0, 20)">
      <td><h5>{{country.name}}</h5></td>
    </tr>
  </tbody>
  <tbody v-else>
    <tr v-for="country in countries">
      <td><h5>{{country.name}}</h5></td>
    </tr>
  </tbody>
</table>
<button
  v-if="!isLoadingCountries"
  @@click="showLessCountries = !showLessCountries"
>
  {{showLessCountries===true? "Show All Countries" : "Show Less"}}
</button>

Here, Using Array.slice(), we get a new array with the limited number of items from the original array. And we show the new sliced array items or the original array full items based on the flag. And a button to toggle the flag. If you wonder why I used **@@**click in Vue, is because my markup was written in Razor (.cshtml).

Update 1 - Sep 6, 2018

As Andrew Butler pointed out in the comments, we can avoid the markup duplication by using a computed property. And the code becomes,

var app = new Vue({
  el: "#app",
  data: {
    countries: [],
    isLoadingCountries: false,
    showLessCountries: true,
  },
  computed: {
    countriesToDisplay: function () {
      if (this.showLessCountries) {
        return this.countries.slice(0, 10);
      } else {
        return this.countries;
      }
    },
  },
  methods: {
    getCountries: function () {
      app.isLoadingCountries = true;
      app.$http
        .get("some-url")
        .then(function (response) {
          if (response.data) {
            if (response.data.isSuccess) {
              app.countries = response.data.countries;
            }
          }
        })
        .then(function () {
          app.isLoadingCountries = false;
        });
    },
  },
  created: function () {
    this.getCountries();
  },
});

And the markup,

<table class="table" v-if="!isLoadingCountries">
  <thead>
    <tr>
      <th scope="col">Country</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="country in countriesToDisplay">
      <td>
        <h5>{{country.name}}</h5>
      </td>
    </tr>
  </tbody>
</table>
<button
  v-if="!isLoadingCountries"
  @@click="showLessCountries = !showLessCountries"
>
  {{showLessCountries===true? "Show All Countries" : "Show Less"}}
</button>

If you know a better way to do the same, let me know.

Additional Resources

Sitefinity Development - Problems and Solutions

Abhith Rajan — Fri, 19 Jan 2018 00:00:00 GMT

Through this post, am sharing some of the problems I encountered during development in a Sitefinity project.

We were customized the navigation template to match up with our design, and our menu layout had up to 2 levels. The problem was, only first level menu’s being displayed. It was actually a simple configuration which we missed, on the navigation widget settings, make sure to check the level to display. In our case, it was 1. So no child items are shown. After setting it to 2, the child items shown fine. Simple thing but wasted an hour on this.

Caching issue for pages with NO CACHING profile

I wrote another article just for this. Check it out here

Localization not reflecting in when resource files are updated

Restart the website or recycle the app pool associated with the website in the IIS in order to see the localization updates.

Forgot password email not triggered

Go through the KB article with directions on what needs to be configured and an example screencast ( http://www.screencast.com/t/EF0N2LSiwV ) . Also, the KB describes how to configure smtp4dev so you can test the set-up.

Progress Customer Community knowledgebase.progress.com

Note that this is an example for forms notifications, so in your case, you do not need to follow 3. Enable Forms notifications.

However, please make sure that Password Recovery is configured correctly. EnablePasswordReset needs to be set to true and enablePasswordRetrieval should be set to false. Please, check this documentation:

Configure the password recovery link progress.com

Configure password recovery for the Sitefinity CMS application, including SMTP settings and parameters for forgotten password.

Also, note that restart of the application is required.

ASP.NET Web Forms - Manually Trigger Client Side Validation

Abhith Rajan — Mon, 15 Jan 2018 23:32:28 GMT

Lets say you have a web form with one more serverside controls like one below,

<asp:TextBox
  ID="txtEmail"
  runat="server"
  class="txtBoxLarge textSmall"
  placeholder="Enter Email Address"
></asp:TextBox>

<asp:RequiredFieldValidator
  ID="rfvEmail"
  runat="server"
  ErrorMessage="Enter Email"
  Display="None"
  ControlToValidate="txtEmail"
  ValidationGroup="groupName"
></asp:RequiredFieldValidator>

And you need to do some client side operations along with client side validation, the button triggering the whole operation will be like,

<asp:Button
  ID="btnSubmit"
  CssClass="blueBtnLarge"
  runat="server"
  Text="Continue"
  ValidationGroup="groupName"
  OnClick="btnSubmit_Click"
  OnClientClick="ClientSideClick(this)"
  UseSubmitBehavior="False"
/>

Here OnClick will send request to server side and OnClientClick will execute on client side before control passed to server. OnClick only will be triggered if OnClientClick returned true.

And the client side JavaScript function we call on OnClientClick will be like below,

<script type="text/javascript">
  function ClientSideClick(myButton) {
    // Any operation before validation goes here

    // Client side validation
    if (typeof window.Page_ClientValidate == "function") {
      if (window.Page_ClientValidate("groupName") === false) {
        document.getElementById(
          "someDivElementWithErrorExplanation"
        ).style.display = "block"; // Showing error on validation, modify to your needs
        return false;
      }
    }
    document.getElementById(
      "someDivElementWithErrorExplanation"
    ).style.display = "none";

    // Any operation after client side validation passess goes here.

    return true;
  }
</script>

That’s it. Also, don’t forget to notice the usage of the ValidationGroup all over the code above.

Best Font for Visual Studio

Abhith Rajan — Mon, 15 Jan 2018 09:17:00 GMT

Unlike the default user, most programmers do care about the font they are using, so do I. The most used IDEs in my case are the brothers, Visual Studio, and the Visual Studio Code. In both, I use the same font which is Cascadia Code.

Cascadia Code

After reading this article, I switched to Cascadia Code.

The Cascadia Code font is an open-source font developed to improve the readability of program text in plain-text editors such as in the Windows Terminal, Microsoft Visual Studio, and Visual Studio Code.

👉 GitHub - microsoft/cascadia-code: This is a fun, new monospaced font that includes programming ligatures and is designed to enhance the modern look and feel of the Windows Terminal.

Previously Used

JetBrains Mono

Try JetBrains Mono in your IDE. Its simple forms and attention to every detail make coding a nice experience for developers’ eyes, no matter which IDE you choose. Check out the official website. The website itself is MARVELLOUS.

👉 JetBrains Mono: A free and open source typeface for developers

VS Code Settings

"editor.fontFamily": "JetBrains Mono, Fira Code",
"editor.fontSize": 13,
"editor.fontLigatures": true,
"editor.letterSpacing": 1.2,

Fira Code

Monospaced font with programming ligatures.

👉 GitHub: tonsky/FiraCode

All the instructions to install the font and configuring it in the IDE’s including Visual Studio and Visual Studio Code is documented in the wiki.

Fantasque Sans Mono

Fantasque Sans Mono is my choice for the past two years. You need to try it to see how good it is.

A programming font, designed with functionality in mind, and with some wibbly-wobbly handwriting-like fuzziness that makes it unassumingly cool.

👉 GitHub: belluzj/fantasque-sans

How to install the new font (windows)

Download the font from here
In the ttf folder, double-click each font file, click “Install font”; to install all at once, select all files, right-click, and choose “Install”.
Open Visual Studio settings. Tools > Options > Environment > Fonts and Colors > Choose Fantasque Sans Mono from the font list > OK.

Let me know which one is your favorite in the comments below 👇

Additional Resources

IP Security - Configure IP address restrictions in Web.Config on IIS

Abhith Rajan — Tue, 09 Jan 2018 09:22:00 GMT

When your website is using some kind of proxy/firewall just like Sucuri to increase the security, you need to make sure that only the allowed ones are accessing the site directly, so that all the requests to the site is going through the firewall.

To ensure this, we use the IP security feature in IIS, in which we can configure which IP’s are allowed.

<system.webServer>
  ...
  <security>
    <ipSecurity allowUnlisted="false">
      <clear />
      <add ipAddress="-.-.-.-" subnetMask="-.-.-.-" allowed="true" />
      <add ipAddress="-.-.-.-" subnetMask="-.-.-.-" allowed="true" />
      <add ipAddress="-.-.-.-" subnetMask="-.-.-.-" allowed="true" />
      <add ipAddress="-.-.-.-" subnetMask="-.-.-.-" allowed="true" />
    </ipSecurity>
    ...
  </security>
</system.webServer>

In the above code, we set allowUnlisted attribute to false to prevent access to all IP address unless they are listed. And then we add the allowed IP addresses one by one. eg.

<add ipAddress="192.168.134.0" subnetMask="255.255.254.0" allowed="true" />

Additional Resource

IP Security

2017 Year In Review

Abhith Rajan — Mon, 01 Jan 2018 09:26:00 GMT

Last year on my appraisal form, under objectives for next year (2017), I put the following,

[ ] Work on projects using technology .NET CORE, Angular 2, Typescript 2
[ ] Get a new designation (Senior Software Engineer / Project Manager / DevOps Manager)
[ ] Learn product management
[x] Mentor more
[x] Contribute more to Open Source

Work on projects using technology .NET CORE, Angular 2, Typescript 2 - Inconclusive

I did work on Angular 2 & Angular 4 and Typescript a little as part of my side project which is in Ionic. But that isn’t enough and I didn’t find time for .NET Core, basically, I was giving time to let it get mature enough since initially SignalR etc weren’t supported. Now I really need to focus on it since am a C# guy.

Apart from the above, I did learn/tried some other, some of which are

Umbraco
Vue
Xamarin Forms
React Native
Sitefinity
AWS

Umbraco

In my knowledge, Umbraco is the best free cms in the .Net platform, and yeah, I am using it for this website. Last year or so when my manager asked me to update our existing custom CMS for the upcoming projects, I suggested to try Umbraco since one of my colleagues have experience in it, and he agreed. That was a turning point for the company. Now for most of the small-scale projects, we use Umbraco.

Blogged : My favorite list of Umbraco packages https://t.co/p9De8FSmOx #umbraco #best-series
— Abhith Rajan (@AbhithRajan) August 24, 2017

Vue

Vue is our number one choice when it comes to client-side programming. It is because of its easiness to use, structured code etc. Some of our flagship products are built using Vue including Digital raffle draw and Socialboard.

Even on sick leave (eye infection) I can't close my eyes against .@maxedapps .@vuejs course, it's so exciting.#VueJS
— Abhith Rajan (@AbhithRajan) February 2, 2017

Xamarin forms

Learning Xamarin forms was just personal and we don’t use it in the company since my current company focused on Web for now.

#Ionic guy going to try #Xamarin
— Abhith Rajan (@AbhithRajan) April 4, 2017

I had a personal project piggyvault.in, and for its mobile application, I used ionic. The app built so faster since ionic was very easy because of the knowledge I had in AngularJS. After few months, I fall for Xamarin because of its native nature And I tried Xamarin Android first,

Learning async tasks in detail just to rescue my hello world #Xamarin #Android app from deadlock.
— Abhith Rajan (@AbhithRajan) April 27, 2017

it was tough but I did little of my ionic app in xamarin android, then I tried Xamarin Forms, it was also little tough at the beginning but later I got the rhythm and I managed to build around 20% my ionic app and I was really impressed with the look and performance of my Xamarin Forms app but the downside was, when comparing it to the Ionic, the amount of code we had to write to make it work, and the build time to see the output in a simulator and few other which I mentioned in one of my post here (also I didn’t have a powerful machine), it was so much time consuming compared to ionic and when we do it in the free time we had, the time counts. So I moved to react native.

React Native

Initially, I thought React Native is like ionic, but I was wrong after I realized the native nature of React Native. I started learning it and along with it started working on my react native version of my piggy app and now it is around 30% done compared to the Ionic version. Learning React Native, redux etc was tough since I was new to react even. But I picked the pace once I figured out the component nature of it’s and it’s really cool. And things like EXPO are so cool that, when we start to try with the expo, we will figure out how much time did we wasted in Xamarin to build and see the output in an emulator, wherein expo we see the instant result in our own device. Also now there is live loading app for Xamarin forms which I tried during my Xamarin forms time but didn’t work for me the way expo worked. Later I ejected from expo to have OneSignal integration in my react native app. Using OneSignal for push notifications is so easy, all the mobile apps Ionic, Xamarin Forms and now React Native have OneSignal integration and it won’t take much time to integrate.

I never thought push notifications on #Ionic2 is so easy with @onesignal, all done under 15min, hoo. And it's pricing actually blow my mind pic.twitter.com/M179m1h5dX
— Abhith Rajan (@AbhithRajan) January 4, 2017

Sitefinity

After we tried Umbraco, it becomes the primary cms solution, and we used it for most of the websites last year, and custom cms for complicated applications. But we received a requirement to built one website in Sitefinity and yes we did. So far I like Sitefinity more than Umbraco, and yes Umbraco is good for small-scale projects. I loved the easiness to localize pages and things in Sitefinity and there is a ton of configurations and all, still learning. The project which we worked now on UAT stage, so far good.

AWS

We used to host most of the apps we make in Microsoft Azure or other third-party hosting providers, never AWS and last year for a client we had to host in AWS and we did. Honestly speaking, the name of things and UX experience of AWS is too low compared to Azure. My comparison of AWS and Azure experience is in the draft, will publish soon.

Get a new designation (Senior Software Engineer / Project Manager / DevOps Manager) - NA

I wasn’t able to achieve this since there are no such positions in my current company. And the one above me is the IT DIRECTOR.

Learn product management - inconclusive

Apart from some video tutorials, and reading knowledge. Nothing more I learned. But I am doing it with my knowledge, for Socialboard, raffle, and for other projects. I want to learn it properly so that I can do it properly.

Mentor more

I learn/try first and pass it to the colleagues. In case of Vue, AWS, Sitefinity and all, the same happened. I like to do things in the more organized way,

My new daily office work board at #trello
A card for each day with a checklist of to-dos. Keep it simple, right :) pic.twitter.com/rCSFUKVU1R
— Abhith Rajan (@AbhithRajan) July 24, 2016

we initially used Asana for task management,

New board layout in @asana is awesome. pic.twitter.com/zQaF3f9vXN
— Abhith Rajan (@AbhithRajan) November 16, 2016

Slack for group communication, Skype for vocal communications and that’s too many tabs in the browser. Now we use Bitrix24 for all, it has task management, group communications, and vocal/video calls and more. I introduced it to the company after trying myself and it was a good change. I always appreciate people for their goodness. My colleagues make fun of me for saying thanks to them for the little things they have done for me. It’s part my nature. And the same way sharing my experiences and thoughts with my colleagues, when they are in a mess, they seek my advice and I tend to have a solution in every situation. In the middle of last year, I started PR reviews, and now it’s part of our workflow for major projects and no comments received for any of my code and I did correct/improvise my colleague’s codes and did appreciate when I see the good code.

Contribute more to Open Source

If you count the stars I have given in GitHub for others projects, that’s too much contribution in some way to courage them to continue their good work. Other than that, this blog is one of my initiatives.

My site (https://t.co/uEYEWL312U) contents copied into a #github repo for better #collaboration https://t.co/oeammZOWKG #community #matters
— Abhith Rajan (@AbhithRajan) August 31, 2017

Apart from the above, there is a couple of things. One of our flagship products digital raffle draw system went live. The other product Socialboard is getting its momentum, and the feedback app also went live.

Last year I received (1000/6000) *100=(1/6)*100 = 16.6667 % raise. And I did perform well. Our team delivered around 8 new projects including two new products and maintained around 20 old projects. Talking about the experience in the company, it was floating, lows and highs. My working time is 10 am to 6 pm, Sunday to Thursday and 10 am to 2 am, on Saturdays. The Saturday half day work is the most annoying since I believe developers need 2 days off so that they can sharpen their axes and get a fresh start from the next week. And the startup nature of the company, ie too many works, few resources. Time, quality, cost at which time is the main constraint for the projects we got, that way controlling cost. But we have to deliver quality as well. As everyone knows, these will not work well and so the work pressure. Handling minimum of two-three projects 95% of days for the past year.

Today I touched around 8 projects, managed some, coded some, even talked to the client for some. This is how my normal office day looks like
— Abhith Rajan (@AbhithRajan) July 12, 2016

It needs to change, hoping for a miracle.

And that’s that.

Sitefinity - Caching issue for pages with NO CACHING profile

Abhith Rajan — Mon, 18 Dec 2017 09:17:00 GMT

ISSUE

In our Sitefinity project, we have a page “Application” for which we set view permission to allow only users having role “USERS”. (i.e only USERS can access the page).

Once USERS logged in, we are redirecting them to the Application page, once they are logged out, we are redirecting them back to the homepage.

The problem is after log out and they redirected to the homepage, if they hit BACK button in the browser, the Application page is still accessible (from CACHE), and if we reload, then only it redirects to the login page.

The Application page caching is set to NO Caching in the Sitefinity but still this behavior.

The expecting behavior is once user logged out and if they hit back button, we need to redirect to the login page.

Solution

You must go to the No Cache profile’s parameters, to do that go to

Administration > Settings > Advanced > System > Output Cache Settings > Page Cache Profiles > No Caching > Parameters and click Create new. (see the picture on top)

On the page that loads enter:

Key: setNoStore
Value: True

Then Save changes.

Now click on the No Caching Profile, scroll to the bottom of the page and click the “Enabled” checkbox, then Save changes.

Now Sitefinity must be restarted.

This should fix the issue you are having.

Sitefinity - Read localized resource labels in MVC widget

Abhith Rajan — Thu, 07 Dec 2017 00:52:55 GMT

In your Razor View,

@Html.Resource("ResourceLabel", "ResourceName")

In the above code, replace ResourceLabel with the key and ResourceName with the type, you used to create the label in the Sitefinity CMS. Make sure Telerik.Sitefinity.Frontend.Mvc.Helpers namespace is imported in the view. i.e

@using Telerik.Sitefinity.Frontend.Mvc.Helpers;

Sample usage

<li><a href="/">@Html.Resource("Home", "PageResources")</a></li>

Visual Studio keeps crashing - First Aid

Abhith Rajan — Mon, 20 Nov 2017 11:46:59 GMT

Yesterday when I was working on a Sitefinity project in my Visual Studio 2017 (VS) community edition, the VS just hanged for few seconds and crashed. Ok, maybe because the file I tried to open was little big and CodeMaid may be tried to format it and so crashed, this was my initial thought. So I tried to open the Visual Studio from the Sitefinity Project Manager, and boom, it crashed during opening solution. Next, I tried to open Visual Studio directly without opening any solution and boom, it crashed again. i.e unable to open Visual Studio.

Assuming that the crashes caused by any of the extensions that I installed (so many extensions installed to increase the productivity), I wanted to clear the cache of Visual Studio. To do that, I followed below steps,

Close Visual Studio
Press Win + R and type %localappdata% and press Enter
Navigate to Microsoft -> Visual Studio -> 15.0_[randomnumber] -> ComponentModelCache
Delete everything in the above folder

I have ReSharper installed, to clear its project cache, followed the steps below

Make sure Visual Studio is closed
Press Win + $ and type %localappdata% and press Enter
Navigate to JetBrains -> Transient -> ReSharperPlatformVs15 -> v09_[randomnumber] (folder name depends on the ReSharper version installed).
Delete ShellCaches and SolutionCaches folder

And opened Visual Studio, it worked and I continued my work. But after some time, the same problem, VS hanged and crashed, and unable to open after. While I was trying to figure out what causes the issue, the boss called me to inform that I have a project demo for the Sitefinity project that I am working on to the client in 30min.

Now it’s a real problem, How to run and demo the Sitefinity project when Visual Studio not working?

Plan A: Fix VisualStudio in 20 min. (10min for demo preparations).
Plan B: Sitefinity project can run without VS by using its Project Manager.

I sticked with Plan A, tried the initial solution by cleaning cache and it didn’t worked this time. Next tried to open Visual Studio in Safe mode. To do that, followed below steps,

Open Command Prompt
Run command cd C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\Common7\IDE
Run command Devenv.exe /SafeMode

/SafeMode command is to start Visual Studio in safe mode, loading only the default environment and services. And in safe mode, VisualStudio worked fine, so I uninstalled CodeMaid and some other extensions and closed VS to complete the uninstallation. Then I opened VS in normal mode and everything seemed fine.

I opened the Sitefinity project and run build, prepared for the demo, and the demo went well. But when the client left, and I started to continue my work, the problem occurred again. So this time I tried to uninstall more extensions by going in SafeMode. And the problem keeps coming, sooner or later. And when I checked the ActivityLog.xml for the visual studio in “C:\Users{username}\AppData\Roaming\Microsoft\VisualStudio\15.0_[randomnumber]”, the errors reported is by the GitHub extension and so next time I tried to revert the GitHub extension (Cannot uninstall since its part of VS 2017) and disabled automatic updates.

Now after did everything above, My Visual Studio running fine. So if you are troubling with any such situation, first check the ActivityLog.xml. Hopefully, you will figure out whats going wrong with Visual Studio from the log.

Additional Resources

Markdown - Link within document

Abhith Rajan — Mon, 06 Nov 2017 09:39:53 GMT

I use markdown as the writing language for my blog posts on this website. It is clean and minimal so I prefer it over HTML.

Today I updated some content in one of my blog posts, Xamarin development - problems and solutions and in which, there is a summary of issues listed on the top and the solutions for each of them explained below one by one and there wasn’t any link between the list items and the explanations.

So for better usability, I had to link them, I know how to do it in HTML and now I learned how to do it on Markdown.

To create the link,

[Link text](#some-id)

And add anchor point the target area by,

# <a name="some-id"></a> DETAIL SECTION

Notice the usage of “some-id” in both. You can replace “some-id” with any proper text.

As you can see, we are adding an anchor tag (HTML element) to the Markdown to make it work. Having HTML in markdown file is not that nice and some linters will complain about the same, this as a dirty hack.

Update 1 - 2nd May 2019

If you are using some kind of markdown transformer, there might be an option to make the header links automatically. Like gatsby-remark-autolink-headers in case of Gatsby.

JavaScript - Determine if user is on mobile device

Abhith Rajan — Wed, 25 Oct 2017 00:00:00 GMT

In the responsive design era, you may want to do some extra operations if the user is on mobile, like something I mentioned in my last post where my colleague wanted to remove some specific classes if the user is on mobile.

To do that, you can check the navigator.userAgent value. And with the help of regex you can do,

var isMobile = /android.+mobile|ip(hone|[oa]d)/i.test(navigator.userAgent);

As you can see, we are matching against few of the major mobile user agents. But keep in mind that there are too many devices variants so user agents too, so if you need a more accurate result may be this answer on SO will be helpful.

Remove specific class from all elements - jQuery

Abhith Rajan — Mon, 23 Oct 2017 10:16:21 GMT

Code first, talks later

$(".class-name").removeClass("class-name");

In the above code, we are finding all the elements that do have the class and removing it.

Story behind this post

Today my colleague asked me whether they can remove some specific class from whole elements who do have the class. Not just that, this has to be done only on mobile devices (post about Determine if the user is on the mobile device is coming next). This post is to make his day a little easier.

Update

The post Determine if the user is on the mobile device is live now.

Sitefinity Rookie Guide : Get Users in a Custom Role

Abhith Rajan — Sat, 21 Oct 2017 08:58:00 GMT

I am pretty new to Sitefinity and started learning since one of the upcoming projects is need to be done in the Sitefinity.

Now spent few days in a POC, in which one requirement is to list users in a custom role that we created. And it can be achieved easily using below code,

var roleMngr = RoleManager.GetManager("Default");
var usersInCustomRole = roleMngr.GetUsersInRole("CustomRole");
foreach (var user in usersInCustomRole)
{
    var userProfileManager = UserProfileManager.GetManager();
    var sitefinityProfile = userProfileManager.GetUserProfile<SitefinityProfile>(user);

    ...
}

Replace the CustomRole with the role name which you have created, in my case, it was Reviewer. Since we want users in a custom role (i.e role which we created), we need to use the Default provider.

The custom roles you created are part of the Default Provider.

In case of built-in roles, use AppRoles as the provider name to get the role manager.

Git branch not showing in Visual Studio Team Explorer

Abhith Rajan — Wed, 11 Oct 2017 00:00:00 GMT

In our company, all the projects source code is under source control, which is Visual Studio Online (VSO). And most of them are using GIT as the version control (VSO supports Git as well as TFS).

Last year I initiated to follow Git Flow method as the branching model for the new projects and it’s going well. Colleagues are getting used to it.

Recently when I created a feature branch in the VSO online interface, I checked the Visual Studio manage branches window in the Team Explorer to checkout the new branch but couldn’t find it there under Remote Branch. The refresh button on the top of Team Explorer had no effect on the branches.

Workaround

Until visual studio provides a better solution, you can use the SYNC option in the Team Explorer, which will also fetch the new branch list.

Useful

If you want to know more about Git Flow, read this post.

Hunting security bugs in an old web application

Abhith Rajan — Mon, 09 Oct 2017 00:00:00 GMT

Recently one of our old (~4 years or so) website faced a big security challenge. A similar situation we faced for the same website a long time ago when it initially deployed to the production server, that time the site was hosted in GoDaddy. Due to that incident, we moved the site to a custom VPS server with a third party company (where I worked during that time) and everything was fine after that.

This year we moved the website to Everleap and then recently the same problem happened, but after it happened, we brought the site back online within 5 minutes. Scheduled database backups and file backup were configured for the same which we do for all the sites we manage. Everleap have a cloud backup service which will take care of the periodic backup of files as well as the databases.

The site was configured to use Sucuri firewall but we didn’t have access to its portal, the client had. And IP security was enabled for the site so that only Sucuri IP’s are allowed to access the site. And the site content was managed by a custom CMS built by us in the old days, which hosted in a separate domain. After the issue stricken, we did couple of things,

Changed DB password.
Cms access denied.
Enabled all the Diagnostics modules in the Everleap control panel. (HTTP Logging, Detailed Error Logging, Failed Request Tracing).

We blocked the CMS access to identify whether the CMS or the site is being compromised. Then the next day evening, the same thing happened. So we concluded that the website is being compromised. Next steps,

Changed DB password again.
Code review

Code review

Code review went okay, the application was built on top of Web forms. And there were 3 areas where user input is taken,

Search
Email Subscription
Contact form

In which Contact form input didn’t touch database since only email alert configured. So for the other two server-side input validation tightened. And we tried some ethical hacking attempts but all of them blocked by Sucuri.

Checked the site security status in the Asafaweb and the result screenshot is given below, And did the recommended changes for the Request Validation. All the updates deployed but in the same evening, it again happened.

Next steps

Since the project was kind of outdated, the manager asked us to estimate for the project migration into Umbraco since we couldn’t find anything suspicious in the coding, YET. So I delegated the estimation task to my colleague and started to look in the HTTP log downloaded from the Everleap.

Turning point

The log file contained 10k+ lines, my first search was for “POST” requests. While navigating through search results I noticed a get request with parameter contains web.config. The log for the same was,

2017-09-24 16:44:10 1990-15390 GET /PDF/DownLoad.aspx fileName=../web.config&X-ARR-LOG-ID=1c936dd2-8679-42ad-b77c-da8a938059a4 80 xx-xxxxx-x-x-x-x-x—xx—x-x

The above request was handled by the PDF download handler module, its intended function was to provide the requested PDF file.

So I checked the request handler and its code given below,

protected void Page_Load(object sender, EventArgs e)
{
    string fileName = Request.QueryString["fileName"].ToString();
    Response.ContentType = "application/octet-stream";
    Response.AddHeader("Content-Disposition", "attachment;filename=" + fileName);
    Response.TransmitFile( fileName);
    Response.End();
}

The above code is doing its intended function very well but it can do unintended function as well if you know what I mean. To prove my point, I tried to invoke the same handler with the suspicious input and boom, here comes the requested file.

Final steps

Removed the request handler, changed DB password again. After the bug patched, I checked the HTTP log again in the next day and found out that there is an exact same request but this time instead of 200, a 404 response. And now weeks passed, website working fine, so far so good.

Get/Set hidden field value using jQuery

Abhith Rajan — Sun, 01 Oct 2017 00:00:00 GMT

When we can achieve the same thing using many ways, with different frameworks, we tend to forget one or two such ways. Same thing happened to me. The task is simple, to set and get hidden field value in client side in a SharePoint project.

Like I mentioned, it can be done easily using jQuery,

SET

$("#hiddenFieldControlId").val(valueToBeAssigned);

GET

var hiddenFieldValue = $("#hiddenFieldControlId").val();

That’s it. Replace the hiddenFieldControlId with the id attribute value of your hidden field and make sure jQuery referenced in the page.

Redirect HTTPS requests to HTTP using IIS Rewrite rule in Web.Config

Abhith Rajan — Thu, 28 Sep 2017 00:00:00 GMT

The below-given rewrite rule which redirects all the HTTPS request to its HTTP URL. Redirecting HTTPS to HTTP isn’t recommended considering many factors. If you don’t have SSL purchased for your website, there are some cool options, like Cloudflare, it has a free package where it adds security to your site as well as provides free SSL, will write about it in a separate post.

<rewrite>
  <rules>
    <rule name="Redirect to HTTP" stopProcessing="true">
      <match url="(.*)" />
      <conditions>
        <add input="{HTTPS}" pattern="^ON$" />
      </conditions>
      <action type="Redirect" url="http://{HTTP_HOST}/{R:1}" redirectType="Permanent" />
    </rule>
  </rules>
</rewrite>

Redirect HTTP to HTTPS using Web.Config in IIS

Abhith Rajan — Mon, 25 Sep 2017 00:00:00 GMT

No Stories, just add the below rewrite rule in your Web.Config under system.webServer section so that IIS will take care the redirection of HTTP requests to HTTPS. Since we are about to add a rewrite rule in the IIS,

Before adding the rewrite rule, make sure that you installed the URL Rewrite module in the IIS.

<rewrite>
  <rules>
    <rule name="httpsredirect" stopProcessing="true">
      <match url="(.*)" />
      <conditions>
        <add input="{HTTPS}" pattern="off" ignoreCase="true" />
      </conditions>
      <action type="Redirect" redirectType="Permanent" url="https://yourdomain.com/{R:1}" />
    </rule>
  </rules>
</rewrite>

Replace the yourdomain.com with the actual domain name and you are good to go.

Redirect WWW to Non-WWW using Web.Config in IIS

Abhith Rajan — Tue, 19 Sep 2017 00:00:00 GMT

Code first, talks later.

<rewrite>
  <rules>
    <rule name="Redirect to non-www" stopProcessing="true">
      <match url="(.*)" negate="false"></match>
      <action type="Redirect" url="https://yourdomain.com/{R:1}"></action>
      <conditions>
        <add input="{HTTP_HOST}" pattern="^yourdomain\.com$" negate="true"></add>
      </conditions>
    </rule>
  </rules>
</rewrite>

Replace the “yourdomain” with your domain name and add it under the system.webServer section in the Web.Config, and that’s it.

Some people prefer www domain and some non-www. I personally prefer www URLs. One important point to remember is never to allow both accessible at the same time. Read my article REDIRECT NON-WWW URLS TO WWW URLS to know why. It will be better if you add the rule on the Web.Release.config with a slight modification. Read more about it on my article INSERTING REWRITE RULE IN RELEASE CONFIG.

Determine Total Number of Open/Active Connections in MS SQL Server

Abhith Rajan — Sat, 16 Sep 2017 00:00:00 GMT

This article contains a SQL query which can be used to determine the total number of open/active connections in MS SQL Server. Also explains, how to solve the error “Timeout expired. The timeout period elapsed prior to obtaining a connection from the pool. This may have occurred because all pooled connections were in use and max pool size was reached.”

Recently we migrated one of our application from one VPS server to another. Initially, everything was fine. After a day or so here comes a strange error.

Timeout expired. The timeout period elapsed prior to obtaining a connection from the pool. This may have occurred because all pooled connections were in use and max pool size was reached.

The connection string doesn’t have any custom value set for Max Pool Size. So the maximum pool size for the application was the default, i.e 100. To check whether the DB have this much open connection, we run the following query in the SQL Management Studio,

SELECT
    DB_NAME(dbid) as DBName,
    COUNT(dbid) as NumberOfConnections,
    loginame as LoginName
FROM
    sys.sysprocesses
WHERE
    dbid > 0
GROUP BY
    dbid, loginame

This will list all the DB’s and its number of open connections grouped by login name. For us, the number of open connection for the DB was ~100 that’s why the error. So we updated the connection string to have Max Pool Size=200. And the application worked fine. Sample connection string with Max Pool Size given below,

<add connectionString="Server=YOUR_SERVER;Database=YOUR_DB_NAME;User Id=YOUR_DB_USER_ID;Password=YOUR_DB_USER_PASSWORD;Max Pool Size=200;" name="Default" providerName="System.Data.SqlClient" />

Few things to remember in this kind of situations are,

In your code, make sure all the connections are closed when finished usage.
Don’t set Max Pool Size to a very large value unless it is necessary.

Check if string is Arabic - C#

Abhith Rajan — Wed, 06 Sep 2017 00:00:00 GMT

I have pretty good experience in bilingual web app development, especially in English & Arabic languages. The challenge with switching website page from English to Arabic is not just the content translation, the whole layout needs to be changed and the text direction for all need to be RTL whereas for English it needs to be LTR.

We developed this one app socialboard which aggregates content from social media and displays in a single place. Initially, we focused only on English content so everything in LTR even though some aggregated content was in Arabic. But then we got some clients whose primary language is Arabic. i.e most of the content of their social media was in Arabic.

So we had to do some changes, the UX team prepared the RTL layout for displaying content. The development team had to classify content (i.e to flag them isRTL or not) during creation and use proper layout based on isRTL field value of the content.

To classify, or to check whether the given content language is Arabic or not, we used the following extension method,

/// <summary>
/// To check whether the given string is Arabic.
/// </summary>
/// <param name="input"></param>
/// <returns>Returns True if Arabic</returns>
public static bool IsRtl(this string input)
{
    return Regex.IsMatch(input, @"\p{IsArabic}");
}

And it is now part of my Code.Library package ValidationHelper module.

If you know any better way to check if the string is Arabic in C#, let me know in the comments.

Xamarin development - problems and solutions

Abhith Rajan — Sat, 02 Sep 2017 09:58:00 GMT

Following are the list of problems I am addressing here.

#1: ~~No resource found that matches the given name “Theme.AppCompat.Light” and similar 100+ errors during build.~~
#2: ~~Couldn’t able to sign into my Xamarin account from visual studio 2017 preview.~~
#3: ~~Packaging error - “jarsigner.exe” exited with code 1~~
#4: ~~Project not selected to build for this solution configuration~~
#5: ~~GoogleServicesJson BuildAction missing~~
#6: ~~App runs in debug mode, crashes in release mode~~
#7: ~~Input string was not in a correct format - XAML~~

The strikethrough indicates that I have found solutions for them. Solutions that worked for me explained below,

Solution for #1: No resource found that matches the given name “Theme.AppCompat.Light” and similar 100+ errors during build.

To solve this, I deleted the Xamarin directory in this path C:\Users\username\AppData\Local\ then opened the solution, rebuild and it worked.

Additional Resources

No resource found that matches the given name “Theme.AppCompat.Light”

Solution for #2: Couldn’t able to sign into my Xamarin account from visual studio 2017 preview.

I was trying login in VS 2017 Preview 15.4.0 and it wasn’t working. After adding the Xamarin related feature pack to my 15.3.3 stable VS 2017, I tried the login in it and it worked. Then checked the login status in VS preview and that was also in the same state as in the stable.

Update 1:

I reported the problem #2 to VisualStudio developer community and here is the link

Solution for #3: Packaging error - “jarsigner.exe” exited with code 1

Updated Xamarin.Forms from 2.3.4.247 to 2.3.4.270. Restarted visual studio. Changed configuration to Release. Tried to deploy and it worked. Switched back to Debug configuration and rerun. And it too worked.

Solution for #4: Project not selected to build for this solution configuration

Found the solution, check your configuration manager and make sure that the “Deploy” box is checked for your target platform. The configuration manager can be found by selecting it from the drop-down arrow next to “Debug”.

Additional Resources

Skipped Deploy: Configuration: Debug Any CPU Project not selected to build for this solution conf..

Solution for #5: GoogleServicesJson BuildAction missing

This is the second time I came across this problem. When adding Firebase crash reporting component to our Xamarin forms app, we need to add the google-services.json file to the project as well needs to set its build action to “GoogleServicesJson”. But after adding the file, when checked the available build actions for the file, there is no “GoogleServicesJson”. In that case, unload the project and then edit the “.csproj” file and add the following.

<ItemGroup>
  <GoogleServicesJson Include="google-services.json" />
</ItemGroup>

Then reload the project. That’s it. Check the build action for the file and you can see that it is set to GoogleServicesJson.

Solution for #6: App runs in debug mode, crashes in release mode

When this issue occurred to me, I thought it is because of any configuration mistakes in my Release configuration but the issue solved by a simple process which is Clean the solution and rebuild.

Additional Resources

App runs in debug mode, crashes in release mode

Solution for #7: Input string was not in a correct format - XAML

This was purely my mistake but it took time to figure it out, especially when your XAML contains more elements. The issue was, the parameter I passed to one of the element’s attribute was wrong, i.e more specifically, I passed some hashcode value of some color to one element HeightRequest attribute which should be an integer. There is no warning or anything in VisualStudio to indicate the syntax error and the error during the build is just “Input string was not in a correct format” pointing to the file.

Additional Resources

Input string was not in a correct format

Best Umbraco Packages

Abhith Rajan — Thu, 24 Aug 2017 22:23:43 GMT

There are so many free/paid packages available for Umbraco. Following are few of them which really suits our needs.

Diplo Trace Log Viewer
Url Tracker
Articulate
Robots.txt Editor
Analytics
Diplo Audit Log Viewer
RankOne - SEO Toolkit

Diplo Trace Log Viewer

diplo trace log viewer

Whenever you have issues with Umbraco websites, you first check its logs. To get logs, you need access to the hosting server and you open the log file in some editor and Ctrl+F for “Error”. We too did the same before we found Diplo Trace Log Viewer.

After installing Diplo Trace Log Viewer, viewing logs is so easy. You sign in to Umbraco, there in the developer tree like in the picture you get a new menu “Trace Logs”. There you can find all the logs, and the filters are so easy so that no more Ctrl+F.

Find the package and read about its features here

Url Tracker

url tracker

Url Tracker is so helpful to manage the URLs in your Umbraco website. Before we aware of the Url Tracker, we used to write redirect rules in the IIS and it is not easy and it sometimes leads to “too many redirects”.

Once we add Url Tracker package, we can add redirect rules from Umbraco interface, also the module keeps tracks of 404 requests, later you can add redirect rules based on these records as well.

The 404 module is so helpful when you are migrating an old website to Umbraco hence the routing definitions changed, so old website links end up in 404. Which you are tracking and later you can map it to the new link in the site using the URL tracker.

Find the package and read about its features here

Articulate

articulate

One of the best blog engine you can attach to your Umbraco website. Install it and modify any of the included themes to your taste and that’s it. Features include categories, tags, markdown support etc.

You can modify every part of it according to your needs, just like I did for this website. Now it available as a NuGet package.

Find the package and read about its features here.

Robots.txt Editor

robots-txt

Another Developer tree module which enables you to edit your robots.txt inside from your Umbraco section.It adds a basic robots.txt file during installation if your site doesn’t have any.

Find the package and read about its features here

Analytics

analytics

If you want to keep track of your google analytics inside from your Umbraco site, this is the package you are looking for. It retrieves your site analytics data from Google analytics.

Installing the package will add a new section in your Umbraco. Make sure to check user permissions if you don’t see the new section. The section contains a menu tree with various analytics data including some charts and so on.

Find the package and read about its features here

Diplo Audit Log Viewer

audit log viewer

If your Umbraco site has multiple users, to see whats going on, this is the best option. It will list the activities of the CMS users so that you can oversee.

You will find the audit logs menu under the developer section once you install the package.

Find the package and read about its features here

RankOne - SEO Toolkit

rankone

This package has a collection of SEO tools. It contains a doc type composition contains the title, meta description, and meta keywords. Adding that composition to any of the existing document types adds a new SEO tab for the document type. It also includes a partial view where you can see the code to get the meta data for the content.

What I did was, after installed, added the composition to my home and about pages. And added the code from the partial view to my master page. And it working fine.

The package also adds a dashboard section in the content home. Where you can evaluate the existing pages SEO metrics and it will list improvement points.

Find the package and read about its features here.

Paid Tools

While the packages above are free, there are also some paid tools that might be worth considering for your Umbraco projects.

ByteEditor.net

ByteEditor is a premium visual website builder designed specifically for Umbraco CMS, offering a robust set of features to enhance the website creation process. With its drag-and-drop interface, extensive template library, it provides a feature-rich editing experience that goes beyond traditional code editors. The platform caters to both Umbraco developers and non-technical users, allowing for the creation of professional websites without the need for coding. While I haven’t personally reviewed this yet, it has been recommended as a potential option for Umbraco developers. If you’re looking for a more feature-rich editing experience and don’t mind paying for it, this might be worth exploring.

I will continue updating this list and this is the first post in my Awesome Lists topic.

Set selected option by value via jQuery

Abhith Rajan — Sat, 19 Aug 2017 00:00:00 GMT

In one of my projects, there is a search page which has few filters including linked selects, i.e the options displayed in a child select is dependent upon the option selected in another (parent). (like when we choose a country (parent), we have to show the states under the selected country in the child.)

After selecting both select, when we submit the search, it loads search result page with same filters above. The problem is that the child select value is not retained. Since when we assign the parent select selected value, it will trigger an ajax call and its response is bound to the child select.

To retain the filters as users selected, we had to set the selected value in the child select also. My child select is (Razor)

@Html.DropDownList("childSelectName", items, new { @name = "someName" })

And inside my ajax call on parent select on change, after binding all the available option to the child select,

if (selectedChildItemId) {
  $("#childSelectName").val(selectedChildItemId);
}

In short,

$("#Controls_ID").val(value);

Replace the Controls_ID with your select tag Id and value with the selected item value.

Umbraco Get Current Page in Partial View

Abhith Rajan — Fri, 18 Aug 2017 10:02:00 GMT

In my website, the header section is a partial view which basically contains the header menus. The menus initially were same for all the pages across my site but I thought to hide some menu in case the current page is not the homepage.

To do that, I needed to get the current page and check whether the current page is the homepage or not, in the header partial.

To get the current page in partial view,

@inherits UmbracoTemplatePage

@{
    var currentPage = Umbraco.Content(umbraco.NodeFactory.Node.GetCurrent().Id);
}

And to check whether it is home page or not, I decided to compare against DocumentTypeAlias as shown below,

@if (currentPage.DocumentTypeAlias == "home")
{
     // some code

And it works.

Event tracking with Google Analytics

Abhith Rajan — Thu, 17 Aug 2017 00:00:00 GMT

I hope you have already added google analytics tracking script in your master page. If not see the page source of this page and check at the bottom of the page, there you can see some script which is provided by google analytics when we add a website (property) to our account in Google analytics which will track the page views etc for the whole website.

To add event tracking, we need to trigger the following function,

ga(
  "send",
  "event",
  [eventCategory],
  [eventAction],
  [eventLabel],
  [eventValue],
  [fieldsObject]
);

In which,[eventCategory] and [eventAction] are required fields.

Example usage follows,

<a
  href="tel:1800123456"
  onclick="ga('send', 'event', 'Phone Call', 'Click/Touch', 'Contact Page');"
  >1800123456</a
>

The above code will track user interaction with the phone number. As you can see, here the eventCategory is “Phone Call”, and eventAction is “Click/Touch”. We can use the eventLabel field to improve the metrics by like here is assigned with value “Contact Page” so that we knows how much triggered from that page itself. And for other pages, we can have different eventLabel.

Inserting Rewrite rule in Release Config

Abhith Rajan — Sat, 12 Aug 2017 10:48:30 GMT

My Web.config’s system.webServer section initially looked like this,

<system.webServer>
....
<!--If you wish to use IIS rewrite rules,
see the documentation here:https://our.umbraco.org/documentation/Reference/Routing/IISRewriteRules-->
 <!--<rewrite>
  <rules></rules>
     </rewrite> -->
</system.webServer>

And my Web.Release.config looked like this,

<?xml version="1.0" encoding="utf-8"?>

<!-- For more information on using web.config transformation visit https://go.microsoft.com/fwlink/?LinkId=125889 -->

<configuration xmlns:xdt="http://schemas.microsoft.com/XML-Document-Transform">
  <!--
    In the example below, the "SetAttributes" transform will change the value of
    "connectionString" to use "ReleaseSQLServer" only when the "Match" locator
    finds an attribute "name" that has a value of "MyDB".

    <connectionStrings>
      <add name="MyDB"
        connectionString="Data Source=ReleaseSQLServer;Initial Catalog=MyReleaseDB;Integrated Security=True"
        xdt:Transform="SetAttributes" xdt:Locator="Match(name)"/>
    </connectionStrings>
  -->
  <system.web>
    <compilation xdt:Transform="RemoveAttributes(debug)" />
    <!--
      In the example below, the "Replace" transform will replace the entire
      <customErrors> section of your web.config file.
      Note that because there is only one customErrors section under the
      <system.web> node, there is no need to use the "xdt:Locator" attribute.

      <customErrors defaultRedirect="GenericError.htm"
        mode="RemoteOnly" xdt:Transform="Replace">
        <error statusCode="500" redirect="InternalError.htm"/>
      </customErrors>
    -->
  </system.web>
</configuration>

Now I have to add a rule which redirects all non-www requests to www route. I accomplished the same by modifying the Web.config to,

<system.webServer>
....
<!--If you wish to use IIS rewrite rules,
see the documentation here:https://our.umbraco.org/documentation/Reference/Routing/IISRewriteRules-->
   <rewrite>
      <rules></rules>
    </rewrite>
</system.webServer>

And my Web.Release.Config to,

<?xml version="1.0" encoding="utf-8"?>

<!-- For more information on using web.config transformation visit https://go.microsoft.com/fwlink/?LinkId=125889 -->

<configuration xmlns:xdt="http://schemas.microsoft.com/XML-Document-Transform">
  <!--
    In the example below, the "SetAttributes" transform will change the value of
    "connectionString" to use "ReleaseSQLServer" only when the "Match" locator
    finds an attribute "name" that has a value of "MyDB".

    <connectionStrings>
      <add name="MyDB"
        connectionString="Data Source=ReleaseSQLServer;Initial Catalog=MyReleaseDB;Integrated Security=True"
        xdt:Transform="SetAttributes" xdt:Locator="Match(name)" />
    </connectionStrings>
  -->
  <system.web>
    <compilation xdt:Transform="RemoveAttributes(debug)" />
    <!--
      In the example below, the "Replace" transform will replace the entire
      <customErrors> section of your web.config file.
      Note that because there is only one customErrors section under the
      <system.web> node, there is no need to use the "xdt:Locator" attribute.

      <customErrors defaultRedirect="GenericError.htm"
        mode="RemoteOnly" xdt:Transform="Replace">
        <error statusCode="500" redirect="InternalError.htm" />
      </customErrors>
    -->
  </system.web>
  <system.webServer>
    <rewrite>
      <rules>
        <clear />
        <rule name="Redirect Non WWW" stopProcessing="true" xdt:Transform="Insert">
          <match url=".*" />
          <conditions>
            <add input="{HTTP_HOST}" pattern="^(?!www)(.*)$" />
          </conditions>
          <action type="Redirect" redirectType="Permanent" url="https://www.{C:1}/{R:0}" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

Noticed the xdt:Transform=“Insert” in the line,

<rule name="Redirect Non WWW" stopProcessing="true" xdt:Transform="Insert">

Which will add the rule to the Web.config automatically during publishing.

This article is part of my daily google series. And this is the very first post in this category.

Cover photo by Caspar Rubin

Redirect non-www urls to www urls

Abhith Rajan — Sat, 12 Aug 2017 06:32:00 GMT

When considering SEO, either you have to stick with www prefixed url or non-www urls. Having both accessible for a domain is a bad practice.

After I setup my website, when I checked google for my site status, it was like below,

google search

If you wonder why I searched like site:mydomain on google, this will list all the search results under the domain we specified.

See the highlighted section. If we search again to see the omitted results. We will see search result like this,

As you can see, both the url get indexed and one is omitted since it isn’t relevant.

So what next,

You have to choose which pattern you gonna stick to. I initially thought to go with non-www but then read the article SETTING UP UMBRACO TO ALWAYS USE WWW LINKS and decided to go with www.

And to redirect non-www to www version, I added the rewrite rule as mentioned in the article. My Code look like this,

<system.webServer>
    <rewrite>
      <rules>
        <clear />
        <rule name="Redirect Non WWW" stopProcessing="true" xdt:Transform="Insert">
          <match url=".*" />
          <conditions>
            <add input="{HTTP_HOST}" pattern="^(?!www)(.*)$" />
          </conditions>
          <action type="Redirect" redirectType="Permanent" url="https://www.{C:1}/{R:0}" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>

Noticed the xdt:Transform=“Insert” in the line,

<rule name="Redirect Non WWW" stopProcessing="true" xdt:Transform="Insert">

That is because I added this rule in my Web.Release.config, Which will add the rule to the Web.config automatically during publishing. The reason for which is explained in one of my article INSERTING REWRITE RULE IN RELEASE CONFIG.

Hello World

Abhith Rajan — Fri, 11 Aug 2017 00:00:00 GMT

Hi! Welcome to my very first blog :)

First of all, a little bit about myself. For the last five years or so I have been developing websites for others so recently thought of why don’t build one for myself?

Now here I am.

Here I wish to share my knowledge, experience and more. All the content will be my own and the images published will be either I made, like the one in this post (it is my visual studio), or will be from unsplash.

This is a work in progress website so you may notice some broken parts but I will fix em as per my free time.

Blog posts RSS Feed

Cost Optimization: Auto Shutdown and Startup of Tagged VMs with Azure Automation

The Significance of Cost Optimization#

Azure Automation: Streamlining Cost Optimization#

Implementing VM Shutdown with Azure Automation#

Implementing VM Startup with Azure Automation#

Additional Considerations#

How We Use Jira Automation

Workflow#

Automation rules#

1. Auto-assign to whoever created the issue#

2. Close duplicate issues#

3. Link issues that are mentioned in the comments#

4. When a commit is created and the status is ‘To do’ → then transition this issue to ‘In Dev’#

5. On Pull Request created → comment the details#

6. On Pull Request merged → comment the details#

7. Comment on Ready for QA items if not assigned to a QA#

8. Assign issue back to Developer once Ready To Deploy#

9. Assign issue back to Developer once Done#

10. When issue is resolved → comment on related issues#

11. Label issues as stale that have not had recent interaction#

Is closing stale issues really a good idea?#

Planned Improvements#

Final Thoughts#

Additional Resources#

GitHub vs Azure DevOps - For Code

Dependabot#

Code Scanning#

Marketplace and integrations#

JIRA#

GitHub Checks#

Release Notes#

Azure Pipelines vs GitHub Actions#

Mobile Application#

Powerful web-based editor (VS Code on Web)#

And#

Pricing#

Code Migration From Azure DevOps to GitHub#

Change Azure Pipeline Repository From Azure DevOps to GitHub#

Final Notes#

Additional Resources#

Changelog#

2022-07-20#

2022-07-13#

2022-06-07#

2021 Year In Review

More Azure#

Rest of the work#

Pure Work#

Plans for 2022#

ASP.NET Core - OAuth 2.0 Client Access Token Management

Additional Resources#

Azure Cognitive Search - GeographyPoint to GeoJSON in .NET 5

Additional Resources#

NDepend - The Best-in-class Static Code Analyzer for Dotnet

Initial Setup#

Dashboard#

Azure Logic Apps - Get Application Insights/Azure Monitor Logs Query Result on Microsoft Teams

Adaptive Cards#

Simple card#

Card with a list of items#

Logic App#

1. Recurrence trigger#

2. Getting a query result#

Query to get performance metrics from Application insights#

Query to get failed requests summary from Application Gateway#

3. Initialize an array variable#

4. For each row in the query result, we map the result item to an Adaptive card row.#

5. Append the rows to the rest of the Adaptive card schema in the Teams connector channel.#

Microsoft Clarity - Setting Up with GatsbyJS & First Impressions

Integrating Microsoft Clarity with GatsbyJS website#

Official plugin#

Legacy way of installing [DEPRECATED]#

Dashboard#

Recordings#

Heatmaps#

Additional Resources#

Azure Application Gateway - List of Failed Requests

List of failed requests#

Azure DevOps - CI/CD Pipeline involving Helm 3, ACR & AKS

The Significance of Cost Optimization

Azure Automation: Streamlining Cost Optimization

Implementing VM Shutdown with Azure Automation

Implementing VM Startup with Azure Automation

Additional Considerations

Workflow

Automation rules

1. Auto-assign to whoever created the issue

2. Close duplicate issues

3. Link issues that are mentioned in the comments

4. When a commit is created and the status is ‘To do’ → then transition this issue to ‘In Dev’

5. On Pull Request created → comment the details

6. On Pull Request merged → comment the details

7. Comment on Ready for QA items if not assigned to a QA

8. Assign issue back to Developer once Ready To Deploy

9. Assign issue back to Developer once Done

10. When issue is resolved → comment on related issues

11. Label issues as stale that have not had recent interaction

Is closing stale issues really a good idea?

Planned Improvements

Final Thoughts

Additional Resources

Dependabot

Code Scanning

Marketplace and integrations

JIRA

GitHub Checks

Release Notes

Azure Pipelines vs GitHub Actions

Mobile Application

Powerful web-based editor (VS Code on Web)

And

Pricing

Code Migration From Azure DevOps to GitHub

Change Azure Pipeline Repository From Azure DevOps to GitHub

Final Notes

Additional Resources

Changelog

2022-07-20

2022-07-13

2022-06-07

More Azure

Rest of the work

Pure Work

Plans for 2022

Additional Resources

Additional Resources

Initial Setup

Dashboard

Adaptive Cards

Simple card

Card with a list of items

Logic App

1. Recurrence trigger

2. Getting a query result

Query to get performance metrics from Application insights

Query to get failed requests summary from Application Gateway

3. Initialize an array variable

4. For each row in the query result, we map the result item to an Adaptive card row.

5. Append the rows to the rest of the Adaptive card schema in the Teams connector channel.

Integrating Microsoft Clarity with GatsbyJS website

Official plugin

Legacy way of installing [DEPRECATED]

Dashboard

Recordings

Heatmaps

Additional Resources

List of failed requests

CI Pipeline

Prerequisites

Common

ci-vars-template.yml

ci-steps-template.yml

ci-pipeline.yml

CD Pipeline

Helpful commands

Service principal credentials

Attach ACR with AKS

Get Azure Tenant Id

Common