DEV Community: Shahzada Fahad Ashraf

Silly Javascript, says true when asked if (0 == -null); here's why...

Shahzada Fahad Ashraf — Thu, 01 Feb 2024 06:42:04 +0000

JavaScript is a versatile programming language known for its flexibility, but this flexibility sometimes leads to interesting behaviors.

For instance, try running the following code in your dev console.

Strange, right? Well, JavaScript behaves this way due to a concept called type coercion.

Type Coercion

Type coercion is the automatic conversion of one data type to another, often performed in JavaScript during operations involving different types. The loose equality operator (==) triggers type coercion, attempting to make the operands comparable.

In the given expression, the left operand is the number 0, while the right operand involves coercing null to a number. When null is coerced to a number, it results in the value 0. Therefore, the expression essentially becomes 0 == 0.

This outcome might seem surprising at first glance, as one might expect the comparison to be false due to the explicit difference between 0 and -0. However, it is essential to recognize that -null is not equivalent to negative zero but rather zero.

But, why exactly?

Understanding the mechanics behind this behavior requires insight into JavaScript's type coercion rules. The language attempts to find a common type between the operands, prioritizing numeric values. In this case, the coercion of null to a number yields 0, aligning both sides of the equality check.

While this behavior may be convenient in certain scenarios, it highlights the importance of caution when using loose equality (==) in JavaScript. Developers often prefer the strict equality operator (===), which compares both value and type, avoiding unexpected type coercion and promoting more predictable code.

Conclusion

The expression 0 == -null in JavaScript showcases the language's type coercion mechanisms. Through automatic conversion, JavaScript aligns the operands by coercing null to a number, resulting in the equality check 0 == 0. This example serves as a reminder of the nuanced aspects of JavaScript's loose equality operator and the importance of understanding type coercion for writing robust and predictable code.

JavaScript's Single-Threaded Bliss: Because Who Needs Multithreading Anyway

Shahzada Fahad Ashraf — Wed, 31 Jan 2024 08:15:53 +0000

JavaScript is a single-threaded, non-blocking, and asynchronous programming language. This means that it has only one execution thread, but it can handle asynchronous operations efficiently without blocking the execution of the entire program. This is achieved through a mechanism called the event loop.

Event Loop:

The event loop is a crucial part of JavaScript's concurrency model. It continuously checks the execution queue (also called the message queue) for new messages and processes them one by one.
The execution queue is a data structure that holds messages or events with their associated callback functions.

Callback Queue:

When an asynchronous operation completes (such as a network request, a file read, or a timer), a message containing the associated callback function is placed in the callback queue.

Execution Stack:

The execution stack is a stack data structure that keeps track of the currently executing functions. When a function is called, it is pushed onto the stack. When it completes, it is popped off the stack.

Non-Blocking Nature:

JavaScript is non-blocking, meaning that while an asynchronous operation is in progress, the program doesn't wait for it to complete. Instead, it continues to execute other tasks.

JavaScript relies heavily on event-driven programming. Events, such as user interactions or the completion of asynchronous operations, trigger the execution of associated callback functions.

Here's a simple example to illustrate the event loop in action:

console.log("Start");

// Asynchronous operation (simulated with setTimeout)
setTimeout(function () {
  console.log("Async operation completed");
}, 2000);

console.log("End");

In this example, the "Start" and "End" messages will be logged immediately, and the asynchronous operation in setTimeout will be scheduled. The event loop will continue running, and after approximately 2 seconds, the callback function inside setTimeout will be pushed into the message queue and executed, logging "Async operation completed."

Conclusion

(Illustration taken from https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif)

This mechanism allows JavaScript to efficiently handle asynchronous tasks without blocking the main thread, making it suitable for tasks like handling user interactions, making network requests, and managing I/O operations.

Tackling React's Most Loathed Interview Question - Diffing and Reconciliation Unveiled

Shahzada Fahad Ashraf — Tue, 30 Jan 2024 07:23:14 +0000

In this article series where we focus on some of the most asked React Interview questions, is about time we discussed whatever the heck the Diffing Algorithm is!

React is a popular JavaScript library for building user interfaces, of course, this we already knew.
However, to efficiently update the DOM and ensure optimal performance, React employs an algorithm that is responsible for detecting any changes made to the DOM and running a process called the "reconciliation process" that reflects these changes on the DOM. This algorithm is called the "Diffing Algorithm".

Diffing Algorithm:

At the core, React's diffing algorithm is responsible for determining the difference between the current Virtual DOM (representing the UI state) and the updated Virtual DOM after a state change. This process helps React identify the minimal set of changes needed to update the actual DOM, thereby enhancing performance.

The algorithm follows a strategy known as "tree reconciliation." It traverses the Virtual DOM trees and performs a depth-first search to identify differences between corresponding elements. React's reconciliation algorithm aims to minimize the number of DOM manipulations required to reflect the updated state, making the UI update process more efficient.

Key Steps in the Diffing Algorithm:

Element Identification:
React assigns a unique key to each element in the Virtual DOM, aiding in efficient identification during the diffing process.
Tree Comparison:
The algorithm compares corresponding elements in the old and new Virtual DOM trees, looking for differences.
Component-Level Reconciliation:
React optimizes the process by understanding the structure of components. It prioritizes updating components over individual elements to minimize unnecessary changes.
Reordering Elements:
When elements are reordered, React efficiently updates the order in the actual DOM rather than re-rendering each element.

Reconciliation Process:

Once the differences are identified through the diffing algorithm, React initiates the reconciliation process to update the actual DOM. The goal is to make the actual DOM mirror the updated Virtual DOM with minimal modifications.

Key Aspects of Reconciliation:

DOM Updates:
React updates only the parts of the DOM that have changed, avoiding unnecessary re-renders and promoting a more efficient rendering process.
Lifecycle Methods:
React invokes lifecycle methods like componentDidUpdate or in the modern versions, certain hooks, such as useEffect to allow developers to perform additional logic after a component updates.
Keyed Elements:
Properly utilizing keys for elements enhances the efficiency of the reconciliation process, preventing unnecessary re-renders and ensuring accurate updates.

Conclusion

Understanding React's diffing algorithm and reconciliation process is crucial for optimizing performance in React applications. By efficiently identifying and updating only the necessary parts of the DOM, React ensures a smooth and responsive user interface, making it a powerful choice for building dynamic web applications.

React's Virtual DOM: Unveiling the Engine Behind Lightning-Fast Web Applications

Shahzada Fahad Ashraf — Mon, 29 Jan 2024 11:08:43 +0000

Understanding the Virtual DOM in React

React, a popular JavaScript library for building user interfaces introduces a concept called the Virtual DOM, which plays a crucial role in optimizing performance and improving the efficiency of web applications. For someone with little to no experience with React, understanding the Virtual DOM is key to grasping the framework's inner workings.

What is the Virtual DOM?

In traditional web development, whenever there is a change in the data that needs to be reflected in the user interface, the entire HTML structure is regenerated. This process is resource-intensive and can lead to slower performance, especially in complex applications.

React addresses this issue by introducing the Virtual DOM. The Virtual DOM is a lightweight, in-memory representation of the actual DOM (Document Object Model). Instead of directly manipulating the real DOM, React creates and manipulates this virtual representation first.

How does it work?

When the state of a React component changes, React doesn't immediately update the DOM. Instead, it first updates the Virtual DOM. This Virtual DOM is a tree structure mirroring the actual DOM. React then compares the previous Virtual DOM with the updated one, identifying the specific changes that occurred.

Once React determines the changes, it calculates the most efficient way to update the real DOM and applies only those necessary changes. This process is known as "reconciliation." By updating only the parts of the DOM that have changed, React minimizes the performance impact, resulting in faster and more efficient updates.

Benefits of the Virtual DOM

Performance Optimization: The Virtual DOM significantly reduces the amount of direct manipulation of the real DOM, leading to faster rendering and improved application performance.
Efficient Updates: React's ability to calculate and apply only the necessary changes to the DOM reduces the overall workload, especially in large and complex applications.
Declarative Syntax: React's declarative syntax, where developers describe the desired outcome rather than the step-by-step process, works seamlessly with the Virtual DOM, making code more readable and maintainable.
Cross-browser Consistency: React abstracts away the differences in browser implementations, providing a consistent development experience across various browsers.

Conclusion

In summary, the Virtual DOM in React is a fundamental concept that enhances the efficiency and performance of web applications. By employing a virtual representation of the DOM and intelligently updating only the necessary parts, React ensures a smooth and responsive user experience, making it a powerful and developer-friendly framework for building modern web applications.

How to Integrate Azure Active Directory B2C in ASP.NET 4.5 WebAPI

Shahzada Fahad Ashraf — Sun, 30 Jul 2023 16:01:21 +0000

Hey there, my fellow tech-savvy readers!

Now, picture this: you've got a trusty ASP.NET 4.5 WebAPI application chugging along like a well-oiled machine, doing its thing, and you're thinking, "Why change something that works just fine?" 💼🕶️

But as the tech world evolves faster than a cheetah chasing its morning coffee, I started feeling the pressure once I set sails to incorporate Azure Active Directory B2C into my relatively older codebase. 💨☁️

And there's the rub! 🌶️ Integrating ADB2C into this tried-and-true ASP.NET version came to me like introducing a jazz band to a black-tie ball. 😂🎷

But fear not as I'm here to help you navigate these waters with a smile on your face and a skip in your step. 💃🕺

I'll show you how to combine the old and the new in a seamless dance that'll make your ASP.NET 4.5 WebAPI look and feel like it's on cloud nine! ☁️💫

So grab your coding wands, and let's sprinkle some Azure Active Directory B2C fairy dust over your beloved ASP.NET 4.5 WebAPI! 🧙‍♂️✨

Assumptions

At this point, I'm assuming the following:

You have already set up your Azure Account
You already have the necessary information and credentials required to create the hand-shake between Azure and your ASP.NET App
You have already defined scopes, and policies

Step 1

Start by adding the necessary credentials and information in your Web.config file. Per my experience, you're going to be needing the following

<add key="AZB2C:AadInstance" value="https://<YOUR_AZURE_DOMAIN>.b2clogin.com/{0}/{1}/v2.0/.well-known/openid-configuration" />
<add key="AZB2C:Tenant" value="<YOUR_AZURE_DOMAIN>.onmicrosoft.com" />
<add key="AZB2C:TenantId" value="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" />
<add key="AZB2C:ClientId" value="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" />
<add key="AZB2C:ClientSecret" value="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" />
<add key="AZB2C:RedirectUri" value="http://localhost:3000/" />
<add key="AZB2C:SignUpSignInPolicyId" value="SIGN_IN_POLICY_NAME" />
<add key="AZB2C:ResetPasswordPolicyId" value="PASSWORD_RESET_POLICY_NAME" />
<add key="AZB2C:SOME_SCOPE_NAME" value="Scope.Something.Something" />
<add key="AZB2C:ANOTHER_SCOPE_NAME" value="Scope.Yes.AnotherSomething" />

We are going to be basing our code off of these credentials.

Step 2

Create a *civilized * way of using these environment variables in your code by creating a static class that extracts all the env variables from the Web.config into a Static Class Instance. This way, you can easily access these environment variables all across your application.

    public static class AzureEnvironmentVariables
    {
        public static string AadInstance = ConfigurationManager.AppSettings["AZB2C:AadInstance"];
        public static string Tenant = ConfigurationManager.AppSettings["AZB2C:Tenant"];
        public static string TenantId = ConfigurationManager.AppSettings["AZB2C:TenantId"];

        public static string ClientId = ConfigurationManager.AppSettings["AZB2C:ClientId"];
        public static string ClientSecret = ConfigurationManager.AppSettings["AZB2C:ClientSecret"];
        public static string RedirectUri = ConfigurationManager.AppSettings["AZB2C:RedirectUri"];

        public static string SignUpSignInPolicyId = ConfigurationManager.AppSettings["AZB2C:SignUpSignInPolicyId"];
        public static string ResetPasswordPolicyId = ConfigurationManager.AppSettings["AZB2C:ResetPasswordPolicyId"];

        public static string DefaultPolicy = SignUpSignInPolicyId;

        public static string FirstScope = AadInstance + ConfigurationManager.AppSettings["api:SOME_SCOPE_NAME"];
        public static string SecondScope = AadInstance + ConfigurationManager.AppSettings["api:ANOTHER_SCOPE_NAME"];
        public static string[] Scopes = new string[] { FirstScope, SecondScope };

        public static string B2CAuthority = string.Format(AadInstance, Tenant, DefaultPolicy);
        public static string WellKnownMetadata = $"{AadInstance}/v2.0/.well-known/openid-configuration?p={SignUpSignInPolicyId}";
    }

Step 3

Create your auth provider

No go ahead and create a new file in your App_Start folder called Startup.Auth.cs

In this file, you are going to create a Startup Extension Method that will be triggered on Startup time and register your Auth Provider, called Startup.Auth into your application.

public partial class Startup
    {
        public static string AadInstance = AzureEnvironmentVariables.AadInstance;
        public static string Tenant = AzureEnvironmentVariables.Tenant;
        public static string TenantId = AzureEnvironmentVariables.TenantId;
        public static string ClientId = AzureEnvironmentVariables.ClientId;
        public static string SignUpSignInPolicy = AzureEnvironmentVariables.SignUpSignInPolicyId;
        public static string DefaultPolicy = SignUpSignInPolicy;

        public void ConfigureAuth(IAppBuilder app)
        {
            TokenValidationParameters tvps = new TokenValidationParameters
            {
                ValidAudience = ClientId,
                AuthenticationType = Startup.DefaultPolicy,
                SaveSigninToken = true,
            };

            string metadataEndpoint = String.Format(AadInstance, Tenant, DefaultPolicy);

            app.UseOAuthBearerAuthentication(new OAuthBearerAuthenticationOptions
            {
                AccessTokenFormat = new JwtFormat(tvps, new OpenIdConnectCachingSecurityTokenProvider(metadataEndpoint))
            });
        }
    }

    public class OpenIdConnectCachingSecurityTokenProvider : IIssuerSecurityKeyProvider
    {
        public ConfigurationManager<OpenIdConnectConfiguration> _configManager;
        private string _issuer;
        private IEnumerable<SecurityKey> _keys;
        private readonly string _metadataEndpoint;

        private readonly ReaderWriterLockSlim _synclock = new ReaderWriterLockSlim();

        public OpenIdConnectCachingSecurityTokenProvider(string metadataEndpoint)
        {
            _metadataEndpoint = metadataEndpoint;
            _configManager = new ConfigurationManager<OpenIdConnectConfiguration>(metadataEndpoint, new OpenIdConnectConfigurationRetriever());

            RetrieveMetadata();
        }


        public string Issuer
        {
            get
            {
                RetrieveMetadata();
                _synclock.EnterReadLock();
                try
                {
                    return _issuer;
                }
                finally
                {
                    _synclock.ExitReadLock();
                }
            }
        }

        public IEnumerable<SecurityKey> SecurityKeys
        {
            get
            {
                RetrieveMetadata();
                _synclock.EnterReadLock();
                try
                {
                    return _keys;
                }
                finally
                {
                    _synclock.ExitReadLock();
                }
            }
        }

        private void RetrieveMetadata()
        {
            _synclock.EnterWriteLock();
            try
            {
                OpenIdConnectConfiguration config = Task.Run(_configManager.GetConfigurationAsync).Result;
                _issuer = config.Issuer;
                _keys = config.SigningKeys;
            }
            finally
            {
                _synclock.ExitWriteLock();
            }
        }
    }

Step 4

Now go ahead and call your Startup extension method in the Configurations function within your Startup.cs file to actually register your Auth Provider.

    public partial class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            ConfigureAuth(app);

            HttpConfiguration config = new HttpConfiguration();
            WebApiConfig.Register(config);
        }
    }

Step 5

Finally, add the Authorize annotation in your controllers on the Endpoints that you'd like to protect and avoid any unauthorized access.

[Authorize]
public class YourAwesomeApiController: ApiController

And there you have it! 🎉✨

You've now unlocked the secrets of integrating Azure Active Directory B2C in your ASP.NET 4.5 WebAPI, proving once and for all that old dogs can learn some fantastic new tricks! 🐶🎩

Happy coding and may your cloud adventures be filled with endless fun and success! 🌌💖✨