Software And Architecture

Introduction Javascript has multiple ways of declaring variables in the code as given below. However each type of usage has its own context. let x = 10; const y =10; var z = 10 Problem Statement I recently came across a problem statement regarding the above type of variable declaration and usage Snippet: 1 In the below snippet, the output will be 3,3,3. The reason for this behavior is that in javascript, the variable defined as var will be referring to the address of i since it has a function scope so, whenever the value of i is incremented, the change will be reflected inside the setTimeout method as well as they are pointing to the same address for ( var i = 0 ; i < 3 ; i++) { setTimeout ( () => console . log (i), 1 ); } Snippet2 for ( let i = 0 ; i < 3 ; i++) { setTimeout ( () => console . log (i), 1 ); } In the above snippet, we have used a variable with let keyword which has a block scope, so there is a copy of i inside the setTimeout. Hence the above snippet

Introduction  [Looking for a needle in haystack] When we have a huge chunk of JSON object or collection of JSON objects and have to get the value of a specific property form the JSON, we will need a tool to get us the value extracted or manually use any editor and search for the key and look up its values.  This is a very tedious job and takes more effort for a person to get this job done Problem Statement  In case of searching for a needle in the haystack, we might have search functionality, however to extract out the values, we must use some sort of regex or other complex mechanism to get the value Solution  In order to overcome the above problem, I have created a simple application using HTML and Javascript that can get this job done very fast. Basic understanding of how objects and keys work will be sufficient to get the job done and I am not building something super special, however, we need a tool that can be handy than write a code each time and attempt to fix the errors or make

The Problem Statement There is an issue that an malicious attacker can inject iframes within the app so that the iframe can have a source to an external application that is outside of the parent app's domain. Sample Lets consider the app to be hosted at https://app.com/. The attacker could inject an iframe that will contain a source to https://malicious.com/ In this case, we have to prevent any iFrames injected in our app that can point to a domain that is different from ours. To fix this issue, add the following header in the response for each request Solution X-Frame-Options : SAMEORIGIN Web.config Solution <system.webServer> <httpProtocol> <customHeaders> <add name="X-Frame-Options" value="SAMEORIGIN" /> </customHeaders> </httpProtocol> </system.webServer> Global.asax solution protected void Application_Start () { AntiForgeryConfig . SuppressXFrameOptionsHeader = true ; }

The Problem This is a very short post on how to be very careful when converting a collection (array) of strings to integers Let us assume that we receive from an API call or from some other source a collection of numbers in string format Example ["1","9","2"] In this case we might be planning to use the map function along with the parseInt to get the job done as given below ["1","9","2"].map(parseInt) However, the catch here is that the above method will return the below response (3) [1, NaN, NaN] This will be a lot confusing to many because the first number gets parsed and the remaining ones does not. Let us consider another example ["10","10","10","10"].map(parseInt) This results in a similar output where the developer might get even puzzled [10, NaN, 2, 3] This looks like the last 2 numbers are getting printed like their i

Introduction This post will give a simple application that can leverage the useTransition and startTransition feature in react.js version 18 and higher. Transitions The transitions are the one that are executed to indicate a change in state from one to the other. For example, in a user listing component, we might have a transition to happen whenever the user tries to filter / sort the data from the grid. React.js has enabled these to be tracked because it involves mostly a user activity to transition from one state to the another state. Why does react.js want to capture or perform these transitions? The main reason for this is to optimize the rendering of the DOM which is a complex and time consuming process. Example Let us consider a scenario where the developer builds a react.js application (like the one in my sample code) which filters a grid of user's from the input captured through a text box. Note: This sample is not following the best practice because in real-time apps, we w

Honourable Mr. Elon Musk,  If the reader has not heard about him, please know him.  He is someone that I look up on YouTube whenever I feel like I'm not sure or need a pull to get me on track. I respect him, he is a living genius, that, I'm proud to have lived in his era.  I captured these quotes from The mentor house in YouTube.  https://youtube.com/shorts/fa40tn1CxKs?feature=share Quotes If something is more important, keep doing and get it done or die trying I don't care about Optimism or Pessimism, fuck that, we are going to get it done. 

Exception Handling There is always a requirement to handle all the NFR (Non-Functional Requirements) well in any application so that the application performs well in production and possess the excellent traceability and exception reporting mechanisms for better visibility on what happens in applications. Types of Exceptions We normally use exceptions within each domain of the application like Customers, Orders, Inventory etc. There are also a lot of custom exceptions that might be required when the application is built to capture, report the exceptions to the user. In this process, we can follow the below given process Base Exceptions There are multiple use-cases where we need separate exceptions to report multiple error conditions or cases, let us consider one such case for data validation. BaseValidationException import java.util.List; public class BaseValidationException extends RuntimeException { public BaseValidationException() { super(); } public BaseVali

Introduction There are times when we are faced with the option to get the intersection of 2 lists. The type of list can be either a simple type like number / strings or a complex type like Object. This might involve developers building loops and performing comparison. This can be resulting in not following the DRY principle where we do not have to repeat ourselves what is already implemented. We can leverage the functionality provided in the collections4 library which can help us get the desired result. In this example, let us consider the following example.  Sample Scenario We can consider a "Cart" store which keeps track of the various items that we have added the cart. Every addition or deletion of the item to the cart needs to be updated. User's normally add some items and when they find out that their product of interest has its availability, they would want to add that to the cart and balance out by removing a lesser priority item. Now, when the user proceeds for th