Forem: Praneet Nadkar

Getting Started with OpenTelemetry in C# - Part 1

Praneet Nadkar — Mon, 03 Mar 2025 09:02:36 +0000

Software applications grow in complexity and monitoring and troubleshooting becomes more critical than developing. OpenTelemetry, an open-source observability framework, provides a common way to collect and export telemetry data, such as traces, metrics, and logs, from your applications.

How We Used to Do It: A Look at the Past

Before OpenTelemetry or other modern observability tools existed, developers had to manually generate correlation IDs for tracking requests across services. This often involved-

Generating a unique ID at the start of a request
Adding it to API response headers
Passing the ID across service calls to track the request flow
Logging the ID manually in different parts of the system

While this approach worked, it required additional effort and was prone to inconsistencies. OpenTelemetry simplifies this by automatically generating trace IDs, propagating them across services, and exporting them in a structured way, making debugging and monitoring much easier.

What is OpenTelemetry?

Like any other telemetry tool, OpenTelemetry provides a set of APIs, libraries, agents, and instrumentation that enables you to capture distributed traces, metrics, and logs from your application.

All you have to do is gain a comprehensive view of your application's behavior, making it easier to detect issues, optimize performance, and troubleshoot in real time.

Why OpenTelemetry then?

Ans - a unified way for ALL !!
You manage observability data from different sources, without vendor lock-in. You can

-Monitor system health and performance
-Detect bottlenecks and reduce downtime
-Trace the flow of requests across microservices
-Ensure seamless integration with popular backend observability -platforms like Prometheus, Grafana etc

What the heck is vendor lock-in?

Vendor lock-in refers to a situation where a customer becomes dependent on a particular vendor's products or services, making it difficult or expensive to switch to another vendor. This dependency is often created because the customer has integrated the vendor's specific technologies, tools, or services into their infrastructure.

Vendor lock-in can occur when
Proprietary Tools
Data Portability Issues
Custom Integrations

Vendor lock-in can be risky for businesses because it limits flexibility, increases long-term costs, and may make it harder to adopt better or more cost-effective solutions in the future. Open standards and open-source tools, like OpenTelemetry, are often used to avoid this issue, as they provide greater interoperability across different platforms and vendors.

Spans and Activities

Each request is associated with a trace, represented as a tree of System.Diagnostics.Activity instances. The first Activity serves as the root, tracking the overall duration and success/failure of the request. Child activities can be created to monitor specific steps, such as database queries, allowing independent tracking of their duration and outcome.

Activities also store metadata, including:

OperationName (type of work)
Tags (descriptive parameters)
Events (timestamped logs)

NOTE: In distributed tracing, these units of work are commonly called Spans, but .NET historically uses the term Activity instead.

Activity IDs and Parent-Child Relationships

.NET uses Activity objects to track operations in distributed tracing. Parent-child relationships are established through unique IDs. .NET supports two ID formats:

Each trace has a globally unique 16-byte trace ID (Activity.TraceId), and each activity within the trace has an 8-byte span ID (Activity.SpanId). Parent-child relationships are defined using Activity.ParentSpanId, allowing tracking across different processes.

A span is the fundamental unit of a trace, representing a distinct part of a distributed system's workflow. Multiple spans form a trace, which is structured like a tree, showing the start and end times of each span.

In .NET, a span is represented by an Activity. The OpenTelemetry client for .NET leverages the existing Activity class, allowing applications to generate OpenTelemetry-compatible traces using the .NET Runtime itself.

To create a span in .NET, an ActivitySource is first defined:

private static readonly ActivitySource Activity = new(nameof(MyBestSideProjectIdeaEver));

Activity Lifecycle

Each thread has a Current activity that flows with synchronous and asynchronous calls.
Starting a new Activity makes it the current activity until it stops, after which the previous activity is restored.
Activities record StartTimeUtc and calculate Duration upon stopping.
Tracking Across Process Boundaries
To maintain trace continuity across services, parent IDs are transmitted via HTTP headers:

W3C TraceContext format uses standard headers. Hierarchical format uses a custom request-id header. .NET automatically encodes and decodes Activity IDs in HTTP requests, reducing the need for manual implementation.

Activity vs ActivitySource

Activity

Represents a single unit of work (span) within a trace.
Tracks operations such as HTTP requests, database calls, or background tasks.
Captures metadata like start time, duration, tags, events, and parent-child relationships.

Example:

using (var activity = new Activity("ProcessOrder"))
{
    activity.Start();
    // Perform work
    activity.Stop();
}

ActivitySource

Acts as a factory for creating Activity instances in an organized and efficient manner.
Enables filtering and sampling before an Activity is created, reducing unnecessary instrumentation overhead.
Encourages structured tracing by defining named sources for activities.

private static readonly ActivitySource ActivitySource = new("BestEverServiceName");

using (var activity = ActivitySource.StartActivity("ProcessOrder"))
{
    // Work inside this block is recorded in the Activity
}

Attributes

Attributes in OpenTelemetry are key-value pairs that provide additional context to a trace. In .NET, these are referred to as Tags and can be added to an Activity to capture metadata about operations.

activity?.SetTag("user_agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64)");
activity?.SetTag("client_ip", "192.168.1.100");
activity?.SetTag("name", "godzilla");

Collecting Traces

Activities must be collected and stored for later analysis. Tools like Application Insights, OpenTelemetry, or third-party APM solutions help with this.
In order to make a system observable, it must be instrumented: That is, code from the system’s components must emit traces, metrics, and logs.

Using OpenTelemetry, you can instrument your code in two primary ways:
Code-based solutions via official APIs and SDKs for most languages
Zero-code solutions

Code-based solutions allow you to get deeper insight and rich telemetry from your application itself. They let you use the OpenTelemetry API to generate telemetry from your application, which acts as an essential complement to the telemetry generated by zero-code solutions.

Zero-code solutions are great for getting started, or when you can’t modify the application, you need to get telemetry out of. They provide rich telemetry from libraries you use and/or the environment your application runs in. Another way to think of it is that they provide information about what’s happening at the edges of your application.

You can use both solutions simultaneously.

For a deeper dive into OpenTelemetry concepts, refer to the official documentation.

Key Takeaways

OpenTelemetry simplifies observability by providing a standardized way to collect traces, metrics, and logs across distributed applications.
Vendor lock-in is a major challenge with proprietary observability tools. OpenTelemetry ensures flexibility and interoperability.
Before OpenTelemetry, manual tracking was tedious—developers had to generate and propagate correlation IDs themselves. OpenTelemetry automates this process.
Spans (Activities in .NET) are the building blocks of tracing and help track request flows across services.
ActivitySource in .NET provides a structured way to create traces efficiently while reducing unnecessary instrumentation overhead.
Attributes (Tags) enrich traces by adding contextual metadata, making debugging more effective.
Instrumentation can be done via code-based or zero-code solutions, or both for deeper insights into system performance.
OpenTelemetry integrates seamlessly with popular observability platforms like Prometheus, Grafana, Application Insights, AWS Cloudwatch.

Let's now shift our focus to the practical implementation of OpenTelemetry in a distributed .NET environment. In Part 2, we will look at the code in the simplest way and break it down and understand how to do it.

C# Collections - how to choose?

Praneet Nadkar — Mon, 25 Oct 2021 05:41:29 +0000

Cover image source

Collections

C# collections have plenty of options to use. When it comes to simple scenarios and small data handling any of these would work fine or at least give you the desired results. Things start to get messy when you have complex scenarios like multi-threading, huge chunks of data, indexing on collections, searching etc.

The Microsoft documentation on collections is a decent place to get started. One of the key things to note from this documentation is:

There are two main types of collections; generic collections and non-generic collections. Generic collections are type-safe at compile time. Because of this, generic collections typically offer better performance. Generic collections accept a type parameter when they are constructed and do not require that you cast to and from the Object type when you add or remove items from the collection.

This means that, in general, a generic collection should be used. The non generic collections will be stored as Object. This means that they will need casting when you are playing around with data. IMHO, I think this will play a very imp role when it comes to performance.

The MSDN link I added before has an excellent piece of advice that will help us in understanding which collection is to be chosen based on our requirement.

Collection	Generic Option	Non-generic Option	Thread-safe or immutable collection options
Store items as key/value pairs for quick look-up by key	`Dictionary<TKey,TValue>`	`Hashtable`	`ConcurrentDictionary<TKey,TValue>`, `ReadOnlyDictionary<TKey,TValue>`, `ImmutableDictionary<TKey,TValue>`
Access items by index	`List<T>`	`Array`, `ArrayList`	`ImmutableList<T>`, `ImmutableArray`
Use items first-in-first-out (FIFO)	`Queue<T>`	`Queue`	`ConcurrentQueue<T>`, `ImmutableQueue<T>`
Use data Last-In-First-Out (LIFO)	`Stack<T>`	`Stack`	`ConcurrentStack<T>`, `ImmutableStack<T>`
Access items sequentially	`LinkedList<T>`	`No recommendation`	`No recommendation`
Receive notifications when items are removed or added to the collection. (implements `INotifyPropertyChanged` and `INotifyCollectionChanged`)	`ObservableCollection<T>`	`No recommendation`	`No recommendation`
A sorted collection	`SortedList<TKey,TValue>`	`SortedList`	`ImmutableSortedDictionary<TKey,TValue>`, `ImmutableSortedSet<T>`
A set for mathematical functions	`HashSet<T>` ,`SortedSet<T>`	`No recommendation`	`ImmutableHashSet<T>`, `ImmutableSortedSet<T>`

Another important point that can act as a deciding factor is Algorithmic complexity of collections. Before you chose a collection, it is really important that the complexities are taken into account. This can sort out a lot of issues with respect to time complexities before hand.

In addition to this, David Fowler tweeted excellent points on Hashtable, Dictionary, ConcurrentDictionary, ImmutableDictionary
// Detect dark theme var iframe = document.getElementById('tweet-1444467842418548737-778'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1444467842418548737&theme=dark" }

Dictionary
// Detect dark theme var iframe = document.getElementById('tweet-1444467844641484803-856'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1444467844641484803&theme=dark" }
HashTable, ImmutableDictionary
// Detect dark theme var iframe = document.getElementById('tweet-1444467845589454851-698'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1444467845589454851&theme=dark" }
ConcurrentDictionary
// Detect dark theme var iframe = document.getElementById('tweet-1444467843651620866-196'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1444467843651620866&theme=dark" }

The motivation for all of this to put into once place, to keep things handy, came when I was working on one of the scenarios to select a collection. I ran into Scott Hanselman's blog, where he added a few pointers from David's tweet.

I would keep this handy for the next time I have to work on collections.

Authenticating & Calling Google Cloud Function with Service Account

Praneet Nadkar — Mon, 07 Sep 2020 14:47:50 +0000

(Cover Image from here)

The services from Google Cloud have been around for a while. Google Cloud Functions is a serverless, event-driven service within Google Cloud Platform meant to create and implement programmatic functions within Google's public cloud.

All infrastructure resources are provisioned and recovered automatically by Google Cloud Platform (GCP). The GCP also gives a good list of console commands to work with them.

Authenticating Cloud Functions

There are various scenarios which are applicable for authenticating the functions. One such scenario for me for authenticating user Service account.

At this point of time, I am assuming you already have a service account created. For the very first step to start with, add your service account to IAM. For this Navigate to IAM on your GCP, and click on Add

Once you do that, there will be an input for member name. Put your service account name there. Next we will add roles to this service account.

To authenticate a could service using service account, make sure your service account has these roles

Service Account Token Creator
Service Account User
Service Usage Consumer

Click on Save to save your data.

One last setup before we jump to the code for generating token is generating keys for the Service Account. Navigate to the service accounts on your GCP. Under the list, that shows the service accounts, click on the Create Key option. This should download a .json file that will have the key information. This is an imp file that has sensitive information. For more, refer here

Our service account is now setup. Now we need to get an auth token for this service account. This generated token, can then be used to call a GCP service that is using auth as service account. I had used a google cloud function in my scenario. Make sure the service we are trying to access, has the same service account set.

Now lets look the code snippet that will generate a JWT Token for us.

from google.oauth2 import id_token
from google.oauth2 import service_account
import google.auth
import google.auth.transport.requests
from google.auth.transport.requests import AuthorizedSession
import requests

# path to your cloud function or any other service
url = 'https://{region}-{project-id}.cloudfunctions.net/{cloud-function-name}'

# path to you keys file that was downloaded when keys for SA were created
keyFilePath = 'key.json'
creds = service_account.IDTokenCredentials.from_service_account_file
(keyFilePath,
target_audience=url)
# auth session
authed_session = AuthorizedSession(creds)

# make authenticated request and print the response, status_code
resp = authed_session.get(url)

# to verify an ID Token
request = google.auth.transport.requests.Request()
token = creds.token
# print the generated token
print(token)
print(id_token.verify_token(token,request))

This should give you the JWT token which will be required to authenticate the subsequent requests. All you have to do is pass this token in the headers when calling the respective cloud service.

headers = {
'Content-Type': 'application/json',
'Authorization': 'Bearer {token}'.format(token = token)
}

Using these steps we can get a token and then call a service hosted on GCP. The same code and steps can be used to call a GCP cloud function from AWS Lambda or any other HTTP Request.

Daily reads for .NET and programming

Praneet Nadkar — Thu, 11 Jun 2020 09:16:37 +0000

image source: Photo by [Kevin Ku] on Unsplash

Technologies are changing, evolving and deprecating every day. One needs to be well versed with the jargon like open-source, architecture, programming model or buzzwords like AI, ML.

To keep yourself updated with these trends, reading and exploring is imperative. When I start my day and before I jump onto my work, I go through some posts, blogs and articles. The internet is flooded with content so here is my recommendation for beginners.

Dew Drop
This is my favorite link and I never miss on reading this one everyday. The best part is that it is regularly updated with great content to explore.

Discover Dot
My second most favorite and an another brilliant web-page to visit daily. A unified place that has new NuGet packages information, blogs, links and videos to go through.

Channel 9
An extensive channel to go through .NET videos.

Dev.to
Obviously, how can I forget Dev.to :)

The Morning Brew
Another blog post that gets updated on a daily basis is this one. This too has some useful references to go through.

This is my list of top 5 links that I usually follow and read whenever I get time. Also, Twitter is another good source that gives you a lot of content to explore. A great microblogging and social networking service where I follow many tech evangelists.
If there is an amazing data or blog that I am not aware of, feel free to update these in the comments section.

Understanding Server-Sent Events

Praneet Nadkar — Thu, 23 Jan 2020 10:58:27 +0000

Since a last few weeks I have been checking this with a lot of dev(s) that I know, if they are aware of server-sent events. Surprisingly a very few of them know what is a server-sent event. Let us understand this term.

What is SSE?

As the name suggests, an event that is sent or initiated by a server, and this is exactly what it does.
According to the wiki page, Server-Sent Events (SSE) is a server push technology enabling a client to receive automatic updates from a server via HTTP connection.
This is standardized as the part of HTML5. The server-sent event is an API that is operated through the EventSource interface

A client subscribes to a “stream” from a server and the server will send messages (“event-stream”) to the client until the server closes the stream.
It is the server that decides when and what to send the client and when to end the stream.

Why should you know about SSE?

Since the applications and their users are becoming more real-time oriented, you need Server-Sent Events. Displaying the last data updates to your users may change their actions.

Why SSE? I have Websockets.

WebSockets indeed is a long awaited evolution in client/server web technology. They allow a
single TCP socket connection to be established between the client and server which allows for bi-directional, full duplex, messages to be instantly distributed. Now there is a catch, if you read this meticulously, you would definitely notice that WebSockets are bi-directional. So if I need only unidirectional, WebSockets will cause great latency issues.

SSE is single directional (server to client) which surely would improve the latency issues. If we are looking from a server load point of view, SSE can be a way much better option than WebSockets.

Fields

As per the MDN, an event stream is a simple stream of text data which must be encoded using UTF-8. Messages in the event stream are separated by a pair of newline characters. A colon as the first character of a line is in essence a comment, and is ignored.

Each message received has some combination of the following fields, one per line:

event

A string identifying the type of event described. If this is specified, an event will be dispatched on the browser to the listener for the specified event name; the website source code should use addEventListener() to listen for named events. The onmessage handler is called if no event name is specified for a message.

data

The data field for the message. When the EventSource receives multiple consecutive lines that begin with data:, it will concatenate them, inserting a newline character between each one. Trailing newlines are removed.

id

The event ID to set the EventSource object's last event ID value.

retry

The reconnection time to use when attempting to send the event. This must be an integer, specifying the reconnection time in milliseconds. If a non-integer value is specified, the field is ignored.

click here for MDN Docs

Examples

To use the server-sent events, we need to call an API from a client and then the server will keep on sending the events, till the stream is closed.

.Net Core

Create a controller with any route. Add the following code to the controller.

        [HttpGet]
        public async Task Get()
        {
            var response = Response;
            response.Headers.Add("Content-Type", "text/event-stream");

            for (var i = 0; true; ++i)
            {
                await response.WriteAsync($"data: Controller {i} at {DateTime.Now}\r\r");

                response.Body.Flush();
                await Task.Delay(5 * 1000);
            }
        }

In this implementation we are using the WriteAsync method in from the Microsoft.AspNetCore.Http namespace. The writeAsync method will write the given text to the response body with the UTF-8 encoding.

HTML

<html>

<body>
    <script type="text/javascript">
        if (!!window.EventSource) {
            var source = new EventSource('https://localhost:44317/api/sse');
            source.addEventListener('message', function (e) {
                console.log(e.data);
            }, false)

            source.addEventListener('open', function (e) {
                console.log(e);
            }, false)

            source.addEventListener('error', function (e) {
                if (e.eventPhase == EventSource.CLOSED)
                    source.close()
                if (e.target.readyState == EventSource.CLOSED) {
                    console.log("Disconnected");
                }
                else if (e.target.readyState == EventSource.CONNECTING) {
                    console.log("Connecting...");
                }
            }, false)
        } else {
            console.log("Your browser doesn't support SSE")
        }
    </script>
</body>

</html>

When I ran the HTML, this is how the output was showing up in the console.

Call AWS AppSync API from JS

Praneet Nadkar — Thu, 17 Oct 2019 11:55:26 +0000

AppSync can do everything GraphQL specifies and also has additional features like authentication, authorization, filtering the data you return and the operations that the clients can perform, depending on which user is in.

AppSync supports Cognito, API Key, IAM permissions, and Open ID Connect and even provides support for DynamoDB, AWS Lambda, Elasticsearch, HTTP, and RDS as data sources.

Now to call this AppSync api, it also provides a code generator command with the AWS Amplify CLI which will generate a client code to call the API for you with the AWS Configuration file.

To integrate your app with the client, make sure you have AWS Amplify CLI installed. You can install it using this command:

npm install -g @aws-amplify/cli

And then finally

amplify add codegen --apiId <API_ID_HERE>

This will generate a .ts file which will make you reach pretty much there to integrate.

However, what if you want to call the API using JS only. I started to dig at many places but didn't find anything concrete. Here is my approach to call the AWS AppSync API using fetch()

var configText = '';

const configuration = 'awsconfiguration.json';

/**
 * API module for calling the AWS AppSync GraphQL API
 * @module API
 */

/**
 * Call this if a mutation has to be run for the GraphQL API.
 * This method will call AWS AppSync GraphQL API with the mutation sent as a parameter.
 * The mutationQuery parameter should be of proper format, else the API call will fail. 
 * @module mutation
 * @param { mutationQuery } mutationQuery This is the mutation that has to be called for in GraphQL
*/
function mutation(mutationQuery) {
    callAPI(mutationQuery);
}

/**
 * This method will call AWS AppSync GraphQL API with the query sent as a parameter
 * The getQuery parameter should be of proper format, else the API call will fail 
 * @param { getQuery } getQuery This is the query that has to be called for in GraphQL
*/
function query(getQuery) {
    callAPI(getQuery);
}

/**
 * This method calls the AWS AppSync GraphQL API. The path and options to call the API
 * is read via the AWS Config file.
 * @param { query } query This is the query, mutation or subscription that has to be called for in GraphQL
 * @throws {UnauthenticatedError} When the user is authentication to AWS fails.
*/
function callAPI(query){
    readAwsConfiguration(configuration); 
    // this obj will have all the configurations for AWS AppSync
    var obj = JSON.parse(configText);    

    // if the jwt is null, then the user authentication has not happened
    // in such a case, we will raise an errot that the user auth is required
    if(localStorage.getItem('jwt') === null)
    {
        throw new Error('User authentication is required to access the API. ');
    }

    const opts = {
        method: 'POST',
        headers:
        {
            'Content-Type': 'application/json',
            'aws_appsync_region':  obj.AppSync.Default.Region,
            'aws_appsync_authenticationType': obj.AppSync.Default.AuthMode,
            Authorization:  localStorage.getItem('jwt')
        },

        body: query
    };

    const url = obj.AppSync.Default.ApiUrl;

    fetch(url, opts)
        .then(res => res.json())
        .then(console.log)
        .catch(console.error);
}

/**
 * This method reads the aws configuration file. The config file has the AppSync URL,
 * Auth type and region details for the API
 * @param { file } file This is the file path from where the file has to be read
*/
function readAwsConfiguration(file) {

    var rawFile = new XMLHttpRequest(); // XMLHttpRequest (often abbreviated as XHR) is a browser object accessible in JavaScript that provides data in XML, JSON, but also HTML format, or even a simple text using HTTP requests.
    rawFile.open('GET', file, false); // open with method GET the file with the link file ,  false (synchronous)
    rawFile.onreadystatechange = function () {
        if (rawFile.readyState === 4) // readyState = 4: request finished and response is ready
        {
            if (rawFile.status === 200) // status 200: "OK"
            {
                var allText = rawFile.responseText; //  Returns the response data as a string
                configText = allText;
            }
        }
    }

    rawFile.send(null); //Sends the request to the server Used for GET requests with param null
}

Here I am reading the AWS Configuration from the file awsconfiguration.json
This file has the AWS Configuration with the AppSync URL, Region, AuthMethod etc.
In case if you are wondering from where one should get the configuration json file, you can download it from your AppSync API page.

Please note that the I have added a header named 'Authorization'. This has the JWT which will be used for authentication.

Note: If you are using the AWS Cognito, this value should be fetched from

signInUserSession.accessToken.jwtToken

Finally, to call the API, all we have to do is this:

const mutationQuery = JSON.stringify({
        query: `mutation {
            updatePost(input: {postId:"asd97jd-kjd78-alfd"                  
                  authoredBy:"Sam"
                  editedBy:"Jonathan" }) {
              postId
              authoredBy
              editedBy              
            }
          }
          `
    });

    mutation(mutationQuery);

Create your own multi date picker using JQuery/Javascript

Praneet Nadkar — Thu, 25 Jul 2019 06:13:42 +0000

I know this is the era of Vue, Angular, React etc, but there are still applications running on old JQuery and javascript code. Recently I had a task to create or use a multidates picker from JQuery. I ran into the JQuery UI's multidatepicker and it was pretty nice. But I had a lot of issues and challanges customizing it. I then thought of why not creating one like I want.

Well I am no expert in front-end or scripting, but I still thought it was worth a try.

Though I was thinking to convert it to a plugin, here is a pure html and jquery code that I did for the multidatepicker. Here is my attempt:

Use bootstrap to create a HTML Skeleton

I have used bootstrap to create a HTML skeleton for the calendar that I will build dynamically.

<input type="text" id="selectedValues" class="date-values" readonly/>
        <div id="parent" class="container" style="display:none;">
            <div class="row header-row">
                <div class="col-xs previous">
                    <a href="#" id="previous" onclick="previous()">
                        <i class="fa fa-arrow-left" aria-hidden="true"></i>
                    </a>
                </div>
                <div class="card-header month-selected col-sm" id="monthAndYear">
                </div>
                <div class="col-sm">
                    <select class="form-control col-xs-6" name="month" id="month" onchange="change()"></select>
                </div>
                <div class="col-sm">
                    <select class="form-control col-xs-6" name="year" id="year" onchange="change()"></select>
                </div>
                <div class="col-xs next">
                    <a href="#" id="next" onclick="next()">
                        <i class="fa fa-arrow-right" aria-hidden="true"></i>
                    </a>
                </div>
            </div>
            <table id="calendar">
                <thead>
                    <tr>
                        <th>S</th>
                        <th>M</th>
                        <th>T</th>
                        <th>W</th>
                        <th>T</th>
                        <th>F</th>
                        <th>S</th>
                    </tr>
                </thead>
                <tbody id="calendarBody"></tbody>
            </table>
        </div>

I have added the Bootstrap, Font-awesome(for the previous and next arrows) and JQuery in my html.

I have added some styles as well to this. The css file can be accessed from here

Now the crux of the script is generating the dates based on the days. Here is my attempt on it:

Script to load the calendar

function loadControl(month, year) {

    addMonths(month);
    addYears(year);

    let firstDay = (new Date(year, month)).getDay();

     // body of the calendar
    var tbl = document.querySelector("#calendarBody");
    // clearing all previous cells
    tbl.innerHTML = "";


    var monthAndYear = document.getElementById("monthAndYear");
    // filing data about month and in the page via DOM.
    monthAndYear.innerHTML = months[month] + " " + year;


    selectYear.value = year;
    selectMonth.value = month;

    // creating the date cells here
    let date = 1;

    selectedDates.push((month + 1).toString() + '/' + date.toString() + '/' + year.toString());

    // there will be maximum 6 rows for any month
    for (let rowIterator = 0; rowIterator < 6; rowIterator++) {

        // creates a new table row and adds it to the table body
        let row = document.createElement("tr");

        //creating individual cells, filing them up with data.
        for (let cellIterated = 0; cellIterated < 7 && date <= daysInMonth(month, year); cellIterated++) {

            // create a table data cell
            cell = document.createElement("td");
            let textNode = "";

            // check if this is the valid date for the month
            if (rowIterator !== 0 || cellIterated >= firstDay) {
                cell.id = (month + 1).toString() + '/' + date.toString() + '/' + year.toString();
                cell.class = "clickable";
                textNode = date;

                // this means that highlightToday is set to true and the date being iterated it todays date,
                // in such a scenario we will give it a background color
                if (highlightToday
                    && date === today.getDate() && year === today.getFullYear() && month === today.getMonth()) {
                    cell.classList.add("today-color");
                }

                // set the previous dates to be selected
                // if the selectedDates array has the dates, it means they were selected earlier. 
                // add the background to it.
                if (selectedDates.indexOf((month + 1).toString() + '/' + date.toString() + '/' + year.toString()) >= 0) {
                    cell.classList.add(highlightClass);
                }

                date++;
            }

            cellText = document.createTextNode(textNode);
            cell.appendChild(cellText);
            row.appendChild(cell);
        }

        tbl.appendChild(row); // appending each row into calendar body.
    }

    // this adds the button panel at the bottom of the calendar
    addButtonPanel(tbl);

    // function when the date cells are clicked
    $("#calendarBody tr td").click(function (e) {
        var id = $(this).attr('id');
        // check the if cell clicked has a date
        // those with an id, have the date
        if (typeof id !== typeof undefined) {
            var classes = $(this).attr('class');
            if (typeof classes === typeof undefined || !classes.includes(highlightClass)) {
                var selectedDate = new Date(id);
                selectedDates.push((selectedDate.getMonth() + 1).toString() + '/' + selectedDate.getDate().toString() + '/' + selectedDate.getFullYear());
            }
            else {
                var index = selectedDates.indexOf(id);
                if (index > -1) {
                    selectedDates.splice(index, 1);
                }
            }

            $(this).toggleClass(highlightClass);
        }

        // sort the selected dates array based on the latest date first
        var sortedArray = selectedDates.sort((a, b) => {
            return new Date(a) - new Date(b);
        });

        // update the selectedValues text input
        document.getElementById('selectedValues').value = datesToString(sortedArray);
    });


    var $search = $('#selectedValues');
    var $dropBox = $('#parent');

    $search.on('blur', function (event) {
        //$dropBox.hide();
    }).on('focus', function () {
        $dropBox.show();
    });
}

I have added a button panel to the bottom of the dates panel. It has two buttons, Reset and Done.

Also, to set the dates to be pre-selected on load, add your dates to the selectedDates array.

This is how the control looks:

I have been trying to improve my code here as I am not a JS or a frontend expert.

You can download the whole working sample from here

It is extremely easy to create your own controls and use them using simple HTML and JQuery/Javascript codes.

Using "Reload" options in Chrome

Praneet Nadkar — Thu, 06 Jun 2019 07:29:41 +0000

One of the most popular browsers with the best debugging tools is Google Chrome. When working with CSS or JS, the dev tools in chrome are of great help. Chrome definitely makes the dev work easier. On the same lines, while working on the front end things and editing CSS or JS, refreshing is one of the things we are ought to do.

Let us explore what chrome offers on this little but very important thing.

Whenever you are working chrome, try this:

Press F12 and open the developer tools.
On the refresh button, on the top left of the browser window, do a right click.
You will see three options.

Normal Reload

This is as good as clicking the refresh button or pressing F5.
This will use the cache but re-validate everything during page load. The browser will avoid re-downloading cached JavaScript files, images, text files, etc.

Hard Reload

In this option, the browser will not use anything from the cache when making the request. This can also be done using Ctrl+Shift+R option we don't need to open the Developer Console for this. This forces the browser do re-download every JavaScript file, image, text file, etc. Here the cache will still remain as is.

Empty Cache and Hard Reload

Use this option if the cache is to be emptied and we want the page to be hard reloaded. Note that here, the browser's cache will not be cleared, it is the page cache which will be cleared. This will force the browser to re-download everything with respect to the page.
This is the best option to use if you really want to reload a web page completely.

Code formatting in SSMS

Praneet Nadkar — Thu, 23 May 2019 11:58:39 +0000

I am big fan of the code formatting that happens in Visual Studio. It does help. Really, there are times when it makes it easier to just format it and you feel good and nice and think that it is readable. Sometimes, someone else's formatted code is obviously more readable.
The other day, I was trying to find something similar for SQL Server and found this: The Poor Man's Sql Formatter
The Poor Man's Sql Formatter. It is indeed helpful and works smooth as an add-on for SQL Server Management Studio.

You can install it and try it. Is there anything else similar to this that anyone knows?

git cherry-pick is bliss. More than the git merge

Praneet Nadkar — Mon, 20 May 2019 08:46:53 +0000

When you are working on separate branches with separate teams in parallel there are immense no of check-ins that we all do. The next big thing is to merge the code on git. I have started to feel that this becomes extremely easy if each functionality as a whole has a single check-in, which in-turn will have a commit id. It then makes it really easier to merge by cherry-pick rather than the whole branch merge. It also gives a power to pick just one part of the code base and not as a whole.

what do you guys prefer while merging? I would love to know and learn.

Generating a fake data in .Net Core API

Praneet Nadkar — Tue, 14 May 2019 07:10:46 +0000

Well, the other day, I was working on something where I needed some fake data or some random data to be generated in my .net core web API. On searching I ran into many blogs and links and I am sure there are many who have run into this scenario where we have to generate a fake data for some or the other reason.

Well there is a simple and easy way to do it, add a loop, create a new object of a class and add it to a list. Return the list.

Well all of us are aware of this. However, it is was pain in the neck to add this new and loops every time. I searched and found Genfu which generates the test data. I am like wow! Most of my work is done now. If you look at it, I will have to call a method from this GenFu package which is

GenFu.GenFu.ListOf<T>()

But again, I was thinking, I will have to write it at too many places. What else can be done here?

I was thinking to write a service for this, add it in the startup, and use it through DI in every controller. I somehow managed to do this. Here is my interface and the service that I am using for DI.

    public interface IDataGenerator<T> where T : class
    {
        /// <summary>
        /// Generates a collection of type T based on the properties in T
        /// </summary>
        /// <returns>List<T></returns>
        List<T> Collection();

        /// <summary>
        /// Generates the collection of type T of size = length 
        /// </summary>
        /// <param name="length">The size of the collection to be passed</param>
        /// <returns>A collection of type T based on the length passed</returns>
        List<T> Collection(int length);

        /// <summary>
        /// Generates an object of type T with data
        /// </summary>
        /// <returns>T with data based on the properties in T</returns>
        T Instance();
    }

And here is my class inheriting the interface.

    public class DataGeneratorService<T> : IDataGenerator<T>
        where T : class, new()
    {
        /// <summary>
        /// Generates a collection of type T based on the properties in T
        /// </summary>
        /// <returns>List<T></returns>
        public List<T> Collection() => GenFu.GenFu.ListOf<T>();

        /// <summary>
        /// Generates the collection of type T of size = length 
        /// </summary>
        /// <param name="length">The size of the collection to be passed</param>
        /// <returns>A collection of type T based on the length passed</returns>
        public List<T> Collection(int length) => GenFu.GenFu.ListOf<T>(length);

        /// <summary>
        /// Generates an object of type T with data
        /// </summary>
        /// <returns>T with data based on the properties in T</returns>
        public T Instance() => GenFu.GenFu.New<T>();
    }

Here, there can be many methods that can be added. GenFu gives way lot of things. I have shown a couple of them here. You can always try and play with them.

The method Collection will give me a list of type T and Collection(int length) will give me a list of size which is passed to the method.

Now here, don't forget to add the package Genfu. You can add it using package manager console like this:

install-package GenFu

That's it, now the only thing that remains is adding this to the startup. Since this is a generic thing, I have added this to the startup like this:

In your ConfigureServices method:

services.AddSingleton(typeof(IDataGenerator<>), typeof(DataGeneratorService<>));

Now before going to DI, consider a class like a Contact. This is a model class for which the data will be generated.

    public class Contact
    {
        public int Id { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string EmailAdress { get; set; }
        public string PhoneNumber { get; set; }
    }

Now, I have a values controller, in which there is a HttpGet, that will give me a fake data for these contacts.

[Route("api/[controller]")]
public class ValuesController : Controller
{
    private readonly IDataGenerator<Contact> _contactsGeneratorService;

    public ValuesController(IDataGenerator<Contact> dataGeneratorService)
    {
        _contactsGeneratorService = dataGeneratorService;
    }

    // GET: api/<controller>
    [HttpGet]
    public IEnumerable<Contact> Get()
    {
        var data = _contactsGeneratorService.Collection(100);
        return data;
    }
}

That's it ! I have a service ready. Whenever I need any fake data, I will just inject into my controller and run it.

What are developers looking for? A good tech or a good manager

Praneet Nadkar — Mon, 22 Apr 2019 06:12:36 +0000

I always wonder if everyone is happy as a developer. I have always thought that many, either look for a good manager or a good tech or if you are lucky, you get both. In cases where even if you have a pretty old tech to work on, if you have good people's company, it works out.

If you have a good tech or a project with an impeccable architecture, you should be happy, as you have loads to dig in to and learn. Learning is everything. A good tech guy or a dev is one who is always learning. (I am assuming that :) )

Some are really lucky to get both.

How does that work for you guys !?
What are you looking for.