Jun 13, 2019

Inspect JSON Easily with BrijPad 2.0 (New Features)

For a web developer, it is common to view & analyze the JSON returned by an API to the browser and generally, Chrome Developer tools is used for this. You can click on Network tab, select the XHR item and can get JSON in Response and Preview tabs in Chrome developer tools. Fortunately, there are quite a few free online JSON viewers that you can use. Now, BrijPad 2.0 also allows you to inspect and analyze JSON quickly. You can paste the JSON code and visualize the data. I saw many online tools but didn’t get any tool which filters JSON by selecting field in TreeView (It is very helpful in case of large JSON) so I decided to implement it and added it in BrijPad 2.0.

Read Also: Chrome Developer Tools: Inspect JSON path and extract data quickly

May 13, 2018

JavaScript: Select Date Time with Timezone

This tutorial explains how to implement to get a JavaScript date object from user selected date time & timezone and the date object can be sent server side to save or for further processing. HTML5 provides input type datetime-local allows user to enter both a date and a time and the user’s local time zone is used. For simplicity, Let’s enhance this to allow user to select any timezone. We are going to use Moment-Timezone library.

May 13, 2018

JavaScript Async/Await: Serial, Parallel and Complex Flow

If you have experience on ASP.NET MVC then probably you are familiar with async/await keywords in C#. The same thing is now in JavaScript. Before that, Callbacks and Promises are used for asynchronous code. Async/await is built on top of promises and non blocking. The power of Async/await provides asynchronous code look like synchronous code. In this article, we will go through serial/chain and parallel flow and implement a complex flow using Async/Await.

Read Also: JavaScript Promises: Understanding Error Handling with Example

Dec 18, 2017

JavaScript: Null vs Undefined vs Undeclared

For a beginner, it is painful to understand two distinct things null & undefined in JavaScript and use them properly. I noticed many people consider and treat undeclared variable as undefined which is wrong perception. In this article, we will go through null, undefined, empty, NaN and undeclared variables and see how to handle them in different conditions.

Jul 10, 2016

JavaScript Promises: Understanding Error Handling with Example

Promises are an alternative to callbacks for delivering the results of an asynchronous computation. All modern browsers have native support for Promises in JavaScript. In this post, we will see how error handler works with JavaScript chain promises. Before we get started, let’s see how to create a promise:

Mar 1, 2015

How React.js is good for SEO (Server-side React with ASP.NET)

The problem with the javascript frameworks is that they are NOT perfect search engine friendly. Although Google can crawl and index Ajax content but it is not so reliable and need to follow the guidelines. The advantage of React.js is that you can run it on the server and the virtual DOM will be rendered and returned to the browser as a regular web page. In this post, we will implement a sample in ASP.NET to pre-render the initial state of your React components server-side and the outcome is already rendered page of markup. So it will be indexed just like any other static page by search engine.

If you are new to React.js, I strongly recommend to read following tutorial:

React.js: Introduction and Hello World with ASP.NET MVC 5

Feb 3, 2015

Realtime Voting App with ASP.NET SignalR, React.js and D3.js

This tutorial shows how to build a survey or voting app that displays poll results in real-time using ASP.NET SignalR, React.js and D3.js.

ASP.NET SignalR: to build the real time voting app, then broadcast the live result as votes come in.
D3.js: For data visualization. (Creating Pie chart to show the result)
React.js: To update UI in a very efficient manner for real time changes.

If you are new to React.js, I strongly recommend to read following tutorial:
React.js: Introduction and Hello World with ASP.NET MVC 5

Aug 30, 2014

Google Chart: Dynamic Data Series from a Column in JavaScript Array

The simplest way to draw Google chart is to create simple JavaScript array of data, Convert to dataTable using arrayToDataTable method, pass it in chart.draw method. But what would happen if you have a array of 3 columns and you have to add series dynamically based on a particular column? In this case, you don’t know about the number of series, it is based on the values of the column. Let us take following JavaScript array as an example: