Skip to main content

Posts

Showing posts with the label javascript

Architecture of WebAssembly

WebAssembly Architecture and Browser Integration WebAssembly (Wasm) is a revolutionary technology that enables efficient execution of code in web browsers at near-native speeds. Its architecture involves a combination of components within the browser that work together to compile, load, and execute WebAssembly modules. In this detailed article, we will delve into the architecture of WebAssembly and explore how it integrates with browser components to enable seamless execution of Wasm modules. WebAssembly Architecture Overview Source Code : Developers write code in high-level programming languages like C, C++, Rust, or even languages like Python through transpilers. This code is then compiled to WebAssembly binary format ( .wasm files). WebAssembly Binary Format : The WebAssembly binary format is a low-level, compact bytecode representation of the source code. It is designed for efficient and secure execution in web browsers. This binary format is portable and can be delivered ov
Post a Comment
Read more

Introduction to Blazor

Introduction to Blazor with C# Blazor is a modern web framework developed by Microsoft that allows developers to Build interactive web applications using C# and .NET instead of traditional web technologies like JavaScript. Blazor enables you to create web applications using the same language and tools you use to build other .NET applications, such as desktop and mobile applications. It provides a way to write client-side code that runs directly in the browser while leveraging the power of C# and the .NET runtime. How Blazor Works Blazor offers two hosting models: Blazor WebAssembly and Blazor Server. Blazor WebAssembly In the WebAssembly hosting model, the Blazor application is compiled into WebAssembly bytecode, which is a binary instruction format designed for safe and efficient execution in web browsers. This bytecode is downloaded by the browser and executed directly in a secure sandbox environment. The application communicates with the server only during initial dow
Post a Comment
Read more

Download CSV file using JavaScript fetch API

Downloading a CSV File from an API Using JavaScript Fetch API: A Step-by-Step Guide Introduction: Downloading files from an API is a common task in web development. This article walks you through the process of downloading a CSV file from an API using the Fetch API in JavaScript. We'll cover the basics of making API requests and handling file downloads, complete with a sample code snippet. Prerequisites: Ensure you have a basic understanding of JavaScript and web APIs. No additional libraries are required for this tutorial. Step 1: Creating the HTML Structure: Start by creating a simple HTML structure that includes a button to initiate the file download. <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > CSV File Download </ title > </ head > < body >
Post a Comment
Read more

pages in next.js

Introduction Next.js contains a feature called as Pages that helps us to maintain a clear isolation of the page level components and their layouts. This helps us in having page and routing implementations separate from the components, helping in isolation of the application layout / presentation with that of the functional components This segregation helps us in having slim components and isolate the layout / page level actions. Also, since there are pages, the components that comprise a page atleast at the higher level can be easily found out in this system. Problem Statement We have been using react.js for building SPA (Single Page Applications) for a while and we experienced that some features like pages and routing are not very comfortable with react.js Compared with other frameworks, react does not have option to fully perform the routing and having pages. There are times where we have to duplicate the layouts to all components that act like pages in the react application.
Post a Comment
Read more

understanding the difference between var and let in javascript

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
Post a Comment
Read more

Extract value of property in a json objects collection

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
Post a Comment
Read more

Safe way to converting array of strings as Integers in javascript

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
Post a Comment
Read more

How to design a method

Introduction We have been reading articles about how to architect / design a system, microservices etc. However, I still find that there are developers that require some details on how to write / create a method. These are valid for statically typed languages like C# , Java which I have worked. though some of them apply to Javascript as a good practice. Below are some of the points that I consider worth noting The method should have a descriptive verb of the action that it is performing. ReadFromConfigurationFile SaveUserData CheckInOrderPriorToPayment 2. The arguments if any to the method should be validated prior to consumption. There are some built-in types in Java that helps in checking for nulls like  requireNonNull  from  java.util Note:  The below given method is one that i had built which checks for null and empty value and if so, throws suitable exceptions. We have been using similar built-in functionality in  Microsoft Enterprise Library  for .Net as  Guard.Null  or  Guard.Nu
Post a Comment
Read more

React JS Portals

Portals What are portals and why do we need another fancy terminology for a web app? The need In software development, be it in the server side development or client side development, the best practice that we follow is to identify and isolate the cross-cutting concerns and then use them in a separate library or package or module. This helps us test the implementation and also plug-in any newer version if the old version does need an upgrade and also to make them accessible at a global level. HTML & Cross-Cutting Concerns In the case of HTML, we have all been working in the rendering of the various elements in the DOM not worrying about the location of certain DOM elements and with the advent of many frameworks, we have got control on the logic and the rendering is taken care of by the framework (React, Angular etc..) However, in case of HTML we have several components like dialogs, modals, alerts, info etc which we kind of duplicate across various HTML fragments (through component
Post a Comment
Read more

Dynamically adding HTML DOM elements Via jQuery

How to Add DOM Elements Via jQuery The following script and fiddle demonstrate how to add the DOM elements via the jQuery library ​ $(document).ready(function() { var el = $(" ").attr({ "type": "checkbox", "class": "select", "value": "hi" }); var lbl = $(" ").text("hi"); $(".op").append(el); $(".op").append(lbl); console.log(el); });​ To play around, the fiddle is here -- Saravanan
Post a Comment
Read more

using the Id property in JSON objects

When using the `Id` as a property in the Javascript Objects, and sending them using JSON.stringify, they are not model bound as `Id`, instead, they are skipped and inserted as null in the bound model in the controller. Hence, Never Use `Id` as a property for a JSON object.
Post a Comment
Read more

Client Script for GUID Generator

To create GUID's or Pseudo-Random numbers in Javascript, use the following function guidGenerator() { var S4 = function() { return (((1+Math.random())*0x10000)|0).toString(16).substring(1); }; return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4()); } This was adapted from the Original Work
Post a Comment
Read more