CodeProject – Sibeesh Passion

How to Update Net Core 2.0 Application to 2.1 Version

SibeeshVenu — Sat, 26 May 2018 09:13:30 +0000

[toc]

Introduction

Many of you might have been developing applications in Net Core 2.0 version, as that was the main release with lots of features. But did you know that the next big release has already happened with some additional features in Net Core journey? Have you already migrated your applications to Dot Net Core 2.1.x version already? If you haven’t, no worries, here in this post, we are going to cover talk about how we can migrate/update our applications to the new version of Dot Net Core. I hope you will like this article.

Background

As I said, this post is only going to cover the steps you may have to take to update your existing Dot Net Core application to 2.1.x. And I will be not be talking about what is Dot net core? And why dot net core is important? etc, if you have those queries in your mind, I strongly recommend you to read the Microsoft document here.

We will be creating a Dot net Core 2.0 application first, and then we will update the same to 2.1.x version. Sounds good?

.Net Core 2.0 to 2.1.x

Let’s create a .net core 2.0 application

As usual open your favorite IDE, Visual Studio 2017, Click on File -> New Project

As you can see, Asp Net Core version is 2.0.

You can even check the version in your application properties.

Now let’s run our application and see the output.

Update Visual Studio 2017 to the latest

As a first step, to work with Dot net core 2.1 you need to update your IDE. There are a couple of ways you can update your IDE, but the easiest way is to go check the Notifications panel. Let’s see how to do that.

Go to the View tab and click on Notifications

Now you can see all the notifications here as shown in the below image. I always update my Visual Studio whenever there is an update, so you won’t be able to see that notification here on my panel. If you haven’t updated, and if you check the Notifications panel, I am sure you will get a link to the update here. You will be able to do further.

Once you have updated, you can verify your version.

Install latest Dot Net Core

Here I am going to download the latest version from here, however, you can select which version you want from here.

As you can see that we have installed Dot Net Core SDK, Dot Net Core Runtime, Asp Net Core Runtime, and now you can see that the new version is available for you in Visual Studio 2017.

Changing the Target frameworks

As the first step, we need to change the Target framework for our application. Here you can select it in the Properties or you can edit the dot(.)csproj file.

Now it is time to change the Microsoft.AspNetCore.All to Microsoft.AspNetCore.App, as with this version Microsoft have reduced the number of dependencies. We always need to install only the needed things right, instead of everything.

You will always need to change all of your references to the new version. Here I just wanted to show how you can do that. So, look into the packages you have in your application and change it accordingly.

What is new in Dot(.) Net Core 2.1.x

The Dot Net Core 2.1.x is a release with some cool new features, I strongly recommend you to read those here.

I may write a new post with this features soon.

Conclusion

Thanks a lot for reading. Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

Creating a Chat Application in Node JS with Express, MongoDB, Mongoose and Socket.io

SibeeshVenu — Mon, 04 Dec 2017 12:09:50 +0000

[toc]

Introduction

In this article, we are going to a chat application in Node JS with the back end MongoDB. We will also be using Mongoose for creating the MongoDB models and Socket.io for making multi directional chats on multiple client window. If you are really new to the Node JS, I strongly recommend you to read some articles on the same here. You can also see how you can create a sample Node application with MongoDB and Mongoose here. At the end of this article, I guarantee that you will be having some basic knowledge on the mentioned technologies. I hope you will like this article.

Source Code

You can always clone or download the source code here

Background

Creating a chat application is always an interesting this to do. And it is a good way to learn a lot, because you are creating some interactions on your application. And with the release of few technologies we can create such application without any hassle. It is much more easier than ever. Here we are also going to create a chat application. A basic knowledge of Node JS, MongoDB, JavaScript, JQuery is more than enough to create this project. So, please be with me. Let’s just skip the talking and start developing.

Setting up Node application

This step requires some basic knowledge, please see some of that here. So as mentioned in that article, we have successfully created our Package.json file and installed the required packages. Let’s review our package.json file.

{
 "name": "chatapp",
 "version": "1.0.0",
 "description": "A chat application in Node JS, which uses MongoDB, Mongoose and Socket.io",
 "main": "index.js",
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1"
 },
 "keywords": [
 "Node",
 "JS",
 "MongoDB",
 "Mongoose",
 "Socket.io"
 ],
 "author": "Sibeesh Venu",
 "license": "ISC",
 "dependencies": {
 }
}

Let’s install the packages now by running the below commands.

npm install --save express
npm install --save mongoose
npm install --save body-parser
npm install --save socket.io

Now that we have all the dependencies added to the package.json file.

"dependencies": {
    "body-parser": "^1.18.2",
    "express": "^4.16.2",
    "mongoose": "^4.13.6",
    "socket.io": "^2.0.4"
  }

Creating an App using Express

Let’s create a file server.js and build an app using Express.

var express = require("express")
var app = express()
app.listen(3020,()=>{
 console.log("Well done, now I am listening...")
})

I hope you are getting the desired output, if not, please don’t worry, just double check the codes you had written.

Running our application on browser

Let’s run our application on port 3020 and see what we are getting http://localhost:3020/..

Yes you will get an error as Cannot GET / , no worries. To fix that you need to add the following code block to your server.js file

app.use(express.static(__dirname))

Creating Index page

Here I am going to create a HTML 5 page with JQuery and Bootstrap referenced in it.


Creating a Chat Application in Node JS with Express, MongoDB, Mongoose and Socket.io






    

    
        Start Chatting

As you can see, the page has two text boxes and one button. We will be creating some scripts very soon which uses these controls.

Start developing the chat app

Till now, it was all basic, and we have done it well. Now it is time to go and write some advanced codes. So, are you ready?

Create model from page data

Here we are going to create the model from the page data, that is, from the controls we have in our page. We will be using JQuery to do so.

Now that we have got the model from the user, let’s save it to the DB.

Model values on browser console

Setting up database

We are going to set up our database in mLab as mentioned in this article Using MongoDB on Node JS Application Using Mongoose. So let’s just require Mongoose and do the needed changes.

var express = require("express")
var mongoose = require("mongoose")

var app = express()

var conString = "mongodb://admin:admin@ds038319.mlab.com:38319/mylearning"
app.use(express.static(__dirname))

var Chats = mongoose.model("Chats", {
    name: String,
    chat: String
})

mongoose.connect(conString, { useMongoClient: true }, (err) => {
    console.log("Database connection", err)
})

app.listen(3020, () => {
    console.log("Well done, now I am listening...")
})

Creating a Post request

Now let’s create a post requests in our index.html file which will the post API in our server.js file.

index.html

function postChat(chat) {
        $.post("http://localhost:3020/chats", chat)
}

server.js

app.post("/chats", async (req, res) => {
    try {
        var chat = new Chats(req.body)
        await chat.save()
        res.sendStatus(200)
    } catch (error) {
        res.sendStatus(500)
        console.error(error)
    }
})

Let’s just run our application and test it out.

You may be getting an error as “(node:10824) DeprecationWarning: Mongoose: mpromise (mongoose’s default promise library) is deprecated, plug in your own promise library instead: http://mongoosejs.com/docs/promises.html””, here to fix this, we need to use the default promise instead of the Mongoose promise. Let’s change that. Add this code mongoose.Promise = Promise to our server.js file. Give it a try after setting it.

Still it is not working right, you are getting undefined at the place, var chat = new Chats(req.body) in our Post API . At this stage, we will have to use our body-parser packages, do you remember the package we have installed? Let’s just require that package var bodyParser = require("body-parser") add the preceding codes to our server.js file.

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }))

Now this will convert the request to a JSON object by default. Give it a try again, I am sure you will get the actual value instead of undefined.

Creating a Get request for all the chat data

We have written codes to write our data into our database, we will have to show this data on our page right? Here we are going to write the get requests in out index.html page which will call the get API.

index.html

function getChats() {
     $.get("/chats", (chats) => {
         chats.forEach(addChat)
     })
}

function addChat(chatObj){
    $("#messages").append(`${chatObj.name} 
${chatObj.chat}`);
}

And call the function getChats() in document ready event.

server.js

app.get("/chats", (req, res) => {
    Chats.find({}, (error, chats) => {
        res.send(chats)
    })
})

Here we are passing {} to our find function, this means, we are going to get all the chats without any filter. Just run your application now, and check whether you are getting the chat messages you had sent.

Retrieving data from a MongoDB

Implementing Socket.io

Now the chat we are sending is getting saved to our database and we are able to load the same on page load. Is it the behavior of a perfect chat application? Absolutely no, a perfect chat application will be able to,

Show the chat message to the UI right after the data gets inserted to database
Show the chats in multiple clients, here in our application, if you are opening the URL in multiple browser instance, and if you need to show the chats to both instances, you will have to refresh the pages right? This is not a recommended way

That’s why we are going to implement Socket.io in our application.

Require the package

Unlike the other packages, adding socket.io to the application is a different process, we will have to require the http server first, then, set our app. You can see more information on socket.io here.

var http = require("http").Server(app)
var io= require("socket.io")(http)

Enabling the connection

To enable the connection, we need to use the function io.on.

io.on("connection", (socket) => {
    console.log("Socket is connected...")
})

Listen using new http server

Now that we have a new http server, and we should change our listen code to our new http.

var server = http.listen(3020, () => {
    console.log("Well done, now I am listening on ", server.address().port)
})

Changes in script

Let’s do listen for the event “chat” now in our html page.

var socket = io()
socket.on("chat", addChat)

Please do not forget to include the socket.io.js reference in our index page, other wise you may get an error as “Uncaught ReferenceError: io is not defined”

Emits the event

Once the above step is completed we need to make sure we are emitting the new event on our Post API.

app.post("/chats", async (req, res) => {
 try {
 var chat = new Chats(req.body)
 await chat.save()
 res.sendStatus(200)

 //Emit the event
 io.emit("chat", req.body)

 } catch (error) {
 res.sendStatus(500)
 console.error(error)
 }
})

Let’s just run our application in two browser instances and check for the output.

Socket.io Output

Please make sure that you are getting the chats in the second instance when you send it from the first instance of the browser and vice versa.

Conclusion

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

Create a Microsoft Azure Cognitive Service FaceAPI Application in Half an Hour

SibeeshVenu — Wed, 12 Jul 2017 00:00:04 +0000

[toc]

Introduction

In this article, we are going to create Microsoft Azure Cognitive Service Face API in half an hour. Microsoft Azure Cognitive Services are set of APIs and Services available for the developers to make their applications more interactive and intelligent. This was formerly known as Project Oxford. Here Microsoft uses Machine Learning in the background to create these APIs. So far we have the preceding list of APIs.

Emotion and video detection
Facial Recognition
Speech Recognition
Vision Recognition
Speech and language understanding

Prerequisites

Azure Subscription
Visual Studio

If you don’t have any Azure subscription, please sign up for a subscription here.

Download the source code

You can always download the source code used for this video from here

AzureCognitiveServicesFaceAPI

Create the Face API in Azure portal

To know how to create a Face Recognition API in Azure portal, please see the video preceding.

Add reference of Microsoft.ProjectOxford.Face to your project

Before we start coding, please make sure that you add the reference of Microsoft.ProjectOxford.Face from NuGet package manager.

Microsoft.ProjectOxford.Face

Using the code

To get started, open your Visual Studio and create a new WPF application.

Add Image and button control to MainWindow.xaml

Create an instance of IFaceServiceClient

If you are selecting the location as Southeast Asia while creating the Face API in portal, it is mandatory to use the second parameter, that is, your end point.

Load the image to image control

Detect the faces count

Draw the rectangles in faces found

Output

Now run your application and upload an image, it can be a single picture or a group picture.

Azure Face Recognition API Output

Check the statistics in Azure portal

If everything goes fine, you will be able to see the statistics in your Azure portal as preceding.

Face API Metric In Azure Portal

To Do

If you would like to compare the images or identify the person in an image, please read the documentation here Face identifying and comparing with Azure Face API

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

Do you know JavaScript? Are you sure? – Part 1

SibeeshVenu — Tue, 28 Feb 2017 17:22:18 +0000

[toc]

Introduction

Here we are going to a series of articles related to JavaScript. As this is the first part of the series, here we are going to see some basics of JavaScript which you may forgot or you may not be aware of it. You can always see my other posts related to JavaScript here. We will be using Visual Studio for our development. Basically, JavaScript is a programming language of HTML and Web. Now a days we can create any kind of applications using JavaScript. If you are totally new to JavaScript, I strongly recommend you to read some basics here. I hope you will like this. Now let’s begin.

Download source code

You can always download the source code from here Do you know JavaScript – Part 1

Background

Recently I was assigned to a training task where I need to train one of my colleague who is a fresher and totally new to programming field. I had covered almost all the topics in my training and I am sharing few of them here. I hope you will like this.

Using the code

Create a HTML page

As we already said, JavaScript is a programming language of HTML and Web, we need a page to work with JavaScript. Let’s create it first.

[html]

[/html]

Now create a JS file and include it in your page.

[js]

[/js]

Let’s begin our tutorial

Any idea, what will be the output of the preceding lines of code.

[js]
console.log(2 + 2);
console.log(2 + “2”);
console.log(2 + “2” + 2);
console.log(2 + 2 + “2” + 2);
console.log(2 + 2 + “2” + 2 + 2);
console.log(2 + “2” + 2 + “2” + 2 + 2);
console.log(“2” + 2 + “2” + 2 + 2 + 2 + 2);
[/js]

Once after you run your application, press CTRL+SHIFT+J if you are opening your application in Google chrome or CTRL+SHIFT+K if it is Mozilla, or press F12 if in IE. This will open the browser console. Now check the output, is it the same as you thought?

Javascript_tutorial_output_1

If you noticed well, console.log(2 + 2 + “2” + 2 + 2); returned 4222. First twos are added and when it comes to the third digit, the type of the result is being changed to string, so the string concatenation is happening. This is because of the dynamica nature of JavaScript.

So you can always add different types of values to the same variable in JavaScript. The preceding codes will always be working perfect.

[js]
var a = 1;
a = “Sibeesh”;
[/js]

Now a simple test, what will be the output of the preceding code?

[js]
var b;
console.log(b);
[/js]

Yes you are right it will return undefined as we have not assigned any values to the variable b. Have you ever checked the typeof an undefined variable?

[js]
console.log(typeof(b));
[/js]

The result will be undefined. Now what about the preceding codes?

[js]
console.log(typeof(undefined));
console.log(typeof(typeof(b)));
console.log(typeof(String(b)));
console.log(typeof({a:b}));
console.log(typeof(null));
[/js]

It can give you an output as below.

[js]
undefined
string
string
object
object
[/js]

Here one thing to be noted is, typeof(typeof()) will always return string. And {a:b}, null is actually objects so the typeof will return the type as object. Let’s write a simple program now.

[js]
var a=1;
var b=a;
a=2;

console.log(b);
console.log(a);
[/js]

See, how simple it was. Any idea what would be the output of that? If your answer is 1 & 2, then you are right? Have you ever thought why is that? This is why the variable we just created are primitive types. In primitive data types the values are saved directly on the variable. If you are coming from the backgound of C#, you can understand the value typed variable.

Now we have one more data type which is referenced variable where values are stored as a reference not a direct values. An example for a referenced type variable is Object. Let’s go on to the next topic which is overview on JavaScript Objects, Do you know how to create an object?

[js]
var myName = {firstName: “Sibeesh”, lastName: “Venu”};
console.log(myName);
console.log(JSON.stringify(myName));
console.log(myName.firstName);
console.log(myName.lastName);
[/js]

Here myName is an object. You can always use JSON.stringify() to make your object to a string format and JSON.parse() to make your string to object. So the above code will give you an output as follows.

Javascript_tutorial_output_2

An object is a collection of key-value pairs, like we see in the above object, firstName is key and “Sibeesh” is value. How can we take any values from an object? We can always access a property from an object using dot(.) operator as follows.

[js]
console.log(myName.firstName);
console.log(myName.lastName);
[/js]

And also using a bracket ([)

[js]
console.log(myName[“firstName”]);
console.log(myName[“lastName”]);
[/js]

The above codes will give you an output as “Sibeesh” “Venu”, right? We just accesses a property from an object. Now we have given string value to our object as a key? Is there anyway we can give a key in number format? Let’s have a look.

[js]
var myName = {1: “Sibeesh”, 2: “Venu”};
[/js]

The question is, how can we access values of the keys 1 & 2? Like below?

[js]
console.log(myName.1);
console.log(myName.2);
[/js]

If you said “Yes”, you are wrong. If you try to accecc the values as above, This will throw an “Uncaught SyntaxError” error, so how can we access it?

[js]
console.log(myName[“1”]);
console.log(myName[“2”]);
[/js]

So when the key value is a number, we must use [] for accessing the values. Now Lets go back to the previous object.

[js]
var myName = {firstName: “Sibeesh”, lastName: “Venu”};
var myNameCopy= myName;
myName.firstName = “Sibi”;

console.log(myName.firstName);
console.log(myNameCopy.firstName);
[/js]

Any idea what will be the output of the above code? Have you just said Sibi Sibeesh? Oh, man. You got confused. The actual output is Sibi Sibi. As we said earlier, an object is an example of referenced type variable where the values are stored as a reference to it. So even if change the value of our first object, that will reflect is our second one too.

In the above examples we have created objects like below

[js]
var myName = {firstName: “Sibeesh”, lastName: “Venu”};
[/js]

This way of careating an object is called Object literals. Now the questuion is, is this the only way of creating the object? There is one more way, which is known as Object Constructor. Now we can create the same objects in Object constructor way.

[js]
var myName = new Object();
myName.firstName = “Sibeesh”
myName.lastName = “Venu”;
console.log(myName.firstName);
console.log(myName.lastName);
[/js]

Is there any rule that we can add only varibles to an object? Absolutely no, an object can hold a function too. Let’s create an object with a function inside.

[js]
var myName = {
firstName: “Sibeesh”,
lastName: “Venu”,
myFullName: function(){
console.log(myName.firstName+” “+myName.lastName);
}
};
[/js]

So the code myName.myFullName(); will return my full name “Sibeesh Venu” as output. Right? So from the above code, we can create a functions in JavaScript as follows?

[js]
var myFullName = function(firstName, lastName){
return firstName + ” ” + lastName;
}
[/js]

If you call the above fucntion as preceding, you will get an output as “Sibeesh Venu”

[js]
console.log(myFullName(“Sibeesh”,”Venu”));
[/js]

The question is, what if we are passing only one values? Let’s try that out.

[js]
console.log(myFullName(“Sibeesh”));
[/js]

If you are working in any server side languages, this will actually give an error like “fucntion with one parameter couldn’t find”. But JavaScript is not like that, even if you are wrong, it will try to make you are right. So in this case, it actually treat the second parameter as undefined and give you an output as “Sibeesh undefined”.

That’s all for today. You can always download the source code attached to see the complete code and application. Happy coding!.

References

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

Introduction to Web SQL

SibeeshVenu — Mon, 01 Feb 2016 00:00:39 +0000

In this post we will see some informations about Web SQL. I know you all are familiar with SQL, If not I strongly recommend you to read some basic informations here . As the name implies, Web SQL has so many similarities with SQL. So if you are good in SQL, you will love Web SQL too. Web SQL is an API which helps the developers to do some database operations in client side, like creating database, open the transaction, creating tables, inserting values to tables, deleting values, reading the data. If you need any other way to save some data in client side, you can use storage mechanisms introduced in HTML5.
Now we will look some of the operations a developer can do with Web SQL. I hope you will like this.

Using the code

As you all know, to work with SQL queries, you must create a database. So the first step we are going to do, is creating the database.

Create/Open Web SQL Database

To create a Web SQL database, we can use a function called openDatabase which has four parameters as follows.

Database name

Version Number

Description

Size

Creation callback.

The creation callback gets fired while the database is being created.

Now shall we open a Web SQL database with the above mentioned parameters? We can do that by running a query as follows.

[sql]
var myDBInstance = openDatabase(‘dbsibeeshpassion’, ‘1.0’, ‘This is a client side database’, 2 * 1024 * 1024);
[/sql]

Here I have given the size of my database as 2*1024*1024. In most browsers the size is flexible, but few maintains a limit of 5 MB. As from the above query we have created a Web SQL database. Now we will check whether the DB is creatd successfully or not.

[js]
//check whether the database is created or not.
if (!myDBInstance) {
alert(‘Oops, your database was not created’);
}
else {
var version = myDBInstance.version;
}
[/js]

Here, you will get an alert if the database is not created. Or you will be able to fetch the version details from the database instance.

Getting_version_details_from_database_instance

Once the database is created, we can start using the transaction as we uses in SQL.

Creating transaction

To create a transaction we can use the following syntax. We can use transaction method from our database instance.

[js]
myDBInstance.transaction(function (tran) {
});
[/js]

Here myDBInstance is our database instance. And tran is our transaction object which we are going to use for our upcoming operations. Why we uses transaction is, as you all know transaction can be roll backed. For example, if any of the operation throws any error, the transaction will be roll backed so there won’t be any kind of mismatching data happening. And off course, we can easily manage error logs with the help of transaction. Shall we write queries needed for our operations?

First of all, we will create a table in our database. To execute any queries in Web SQL, you must use the method executesql.

[sql]
tran.executeSql(‘CREATE TABLE IF NOT EXISTS Users (id unique, Name, MailID)’);
[/sql]

As you can see we are creating the table Users if it does not exists in the database. As in SQL we are assigning id as a unique key.

Next thing is we need to insert some rows to our table.

[sql]
tran.executeSql(‘insert into Users (id, Name, MailID) values (1, "Sibi","sibikv4u@gmail.com")’);
tran.executeSql(‘insert into Users (id, Name, MailID) values (2, "Aji","ajaybhasy@gmail.com")’);
tran.executeSql(‘insert into Users (id, Name, MailID) values (3, "Ansu","ansary.ans21@gmail.com")’);
[/sql]

If you want to assign name, mailid, id values to insert query, you are welcomed to create those variables and assign to the query as shown below.

[js]
var name = "Sibi";
var id = "1";
var MailID = "sibikv4u@gmail.com";

tran.executeSql(‘insert into Users (id, Name, MailID) values (?,?,?)’,[id,name,MailID]);
[/js]

So we have inserted some values too. Now we need to read the data we have inserted to our table right? To do that we can use we need to create a new transaction and another executeSql command.

[js]
tran.executeSql(‘SELECT * FROM Users’, [], function (tran, data) {
});
[/js]

Here we will get the output in data. As you can see I have given a call back function along with the command. This can be used to loop through our data and shows the same in our page. So we can modify our reading transaction block as follows.

[js]
myDBInstance.transaction(function (tran) {
var html = ‘

’;
tran.executeSql(‘SELECT * FROM Users’, [], function (tran, data) {
for (i = 0; i < data.rows.length; i++) {
html += ‘’;
};
html += ‘

Mail ID	ID	Name
’ + ‘’ + data.rows[0].MailID + ‘’ + ‘	’ + data.rows[i].id + ‘	’ + data.rows[i].Name + ‘

’;
$(‘#myTab’).html(html);
});
});
[/js]

Before that,

Please don’t forget to include jQuery reference

Do not forget to create a div with id myTab

You can add a CSS for the table we are creating dynamically as follows.

[css]

[/css]

Complete code

Complete code for the implementation is given below.

[html]

Introduction to Web SQL

[/html]

Output

Web_SQL_Output

That is all. We did it. Have a happy coding.

Conclusion

Did I miss anything that you may think which is needed? Did you try Web SQL yet? Have you ever wanted to do this requirement? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

Hoisting In JavaScript

SibeeshVenu — Fri, 06 Nov 2015 12:19:21 +0000

In this post we will discuss the importance and limitations of Hoisting in JavaScript. We all writes client side codes. Right? But few of you might not be aware of the term Hoisting. Hoisting is one of the default behaviour of JavaScript, it is the process of moving all the declarations of the variables to the top of the current function or scope. In this post we will explain this Hoisting in detail with some examples. I hope you will like this.

Background

I used to spend more time with the client side codes rather than server side codes. In my thought is is always good if you do the formation of your data in client side instead doing it in the server side. Client side loops are always faster than the server side ones. As a client side code developer, you must understand the word Hoisting in JavaScript. Here we will discuss that.

Using the code

Before going through we need to know some facts in JavaScript.

Do you know?

In JavaScript we can use any variable before it is declared or a variable can be declared after it is used.

For Example:

The below two scripts will return same output.

[js]

[/js]

And

[js]

[/js]

Limitations of Hoisting

Even though the process of Hosting will move the declarations to the top, there is some limitations too. We will discuss it here now.

Initializing a variable can not be Hoisted or In simple JavaScript Hoists declarations not initializations.

For Example:

The below scripts will give different outputs.

[js]

[/js]

This will give you an output of 6.

And

[js]

[/js]

This will give you an output of NaN. Since we are initializing the value of y, the JavaScript Hoisting is not happening, so the y value will be undefined. The JavaScript will consider that y is not yet declared.

So the second example is same as of below.

[js]

[/js]

This will give you an output of NaN.

Hoisting In JavaScript

Conclusion

Since we are all developers, it is always makes things simple. So much complexity in software comes from trying to make one thing do two things. So always declare your variables on top of your function or scope. Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

Load XML And Show As li In Angular JS

SibeeshVenu — Wed, 04 Nov 2015 05:02:24 +0000

In this post we will see how we can load an XML file and show as li using ng-repeat in Angular JS. As you all know Angular JS is a JavaScript framework for developing applications. So basically Angular JS expects the response in the form of JSON. Hence it is recommended to return the data in JSON format before you start to work on the data. Here in this post we will load a local XML file using Angular JS $http service, and we will convert the same XML file to JSON. Once it is converted, we will loop through the JSON and show it as li using ng-repeat. If you are new to Angular JS, please read here: Angular JS. I hope you will like this article.

Background

I have already posted an article related to $http service in Angular JS, you can see here: $http Service In Angular JS

To convert your XML file to JSON, I recommend you to read here: XML to JSON In Angular JS

Source Code

Please download the source code here: XML to Li Source Code

Using the code

Create an html page first.

[html]

Load XML And Show As li In Angular JS – sibeeshpassion

[/html]

Now add the needed reference as follows.

[js]

[/js]

Have you noticed that I have added xml2json.js file? This is the file which is doing the conversion part. You can always download the file from https://code.google.com/p/x2js/

So if you read and implement as explained in my article on converting XML file to JSON in Angular JS, Your page will be looking as follows.

[html]

Convert XML to JSON In Angular JS – sibeeshpassion

[/html]

So we have loaded our XML and converted the it to the JSON. Now we need to show this JSON response as li using ng-repeat in Angular JS. Are you ready?

For that please change your ng-app directive as follows.

[html]

{{det.loc }}

[/html]

And we can change our Angular script implementation as below.

[js]

[/js]

So we are assigning response.urlset.url to the $scope.details so that we can simply loop through using ng-repeat as
det in details.

If you download the sitemap.xml file from the source code given you can get to know the XML structure of the data. Depends on the data structure we need to assign the response to the $scope.

I guess everything is done, now we can see the output.

Output

Load XML And Show As li In Angular JS

That’s all we have done everything. Happy coding!.

Complete Code

[html]

Load XML And Show As li In Angular JS – sibeeshpassion

{{det.loc }}

[/html]

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

Function Declaration And Function Expression

SibeeshVenu — Wed, 21 Oct 2015 00:59:00 +0000

In this post we will see the basic difference between function declaration and function expression in jQuery and JavaScript. Sometimes the developer’s getting confused between these two topics(Shhhh I ma saying about the starters like me). Basically both are same. Only difference is depends on how you handle or treat these two. We will see a basic demo here to ensure the difference between function declaration and expression. I hope you will like this.

Here I am using jQuery 2.0.2 version, you can use whichever version you like.

Background

In my projects I am using both function declarations and function expressions. So I thought to highlight some basic difference between them, so that it may help someone.

Basic Difference Between Function Declaration And Function Definition

Function declarations are loaded first, that is before any codes

Function expressions are loaded when the interpreter reaches that particular line of code.

Basically we can call any code only after the declarations are loaded

We will try to find out this difference with a demo.

Using the code

First thing you need to do is create a page.

[html]

Function Declaration VS Expression – Sibeesh Passion

Function Declaration VS Expression – Sibeesh Passion

[/html]

Then you need to include the script needed.

[js]

[/js]

Now we will create a function declaration as follows.

[js]

[/js]

What will be the output of this?

Function Declaration And Function Expression

Now we will change our script as follows.

[js]

[/js]

This will also returns the same output.

Function Declaration And Function Expression

Now we will create a function expression as follows.

[js]

[/js]

What may be the output of this? We will check it now.

Function Declaration And Function Expression

As you can see, instead of giving an alert it is throwing an error Uncaught TypeError: myFunctionExpression is not a function in the console. It is just because the function expression is not yet loaded. You are trying to call that expression before it loads.

So what we can do to make it work? Simple, just change the script as follows.

[js]

[/js]

Now you will get an alert as follows.

Function Declaration And Function Expression

That is all. I hope you know the difference between function declaration and function expression now.

Complete Code

[html]

Function Declaration VS Expression – Sibeesh Passion

Function Declaration VS Expression – Sibeesh Passion

[/html]

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

Find Browser And Browser Version Using jQuery

SibeeshVenu — Wed, 21 Oct 2015 00:17:20 +0000

In this post we will see how we can find out the browser name and browser version by using jQuery. Here we will be using $.browser property og jQuery which returns the browser information. In this demo we will test this in most used browsers like Internet Explorer, Mozilla, Chrome, Opera. I hope you will like this.

NB: Using $.browser is not recommended by jQuery itself, so that this feature has been moved to the jQuery.migrate plugin which is available to download if the user want. It is a vulnerable practice to use the same. Use it only if needed. It is always better to do not use browser specific codes.

Using the code

First thing you need to do is create a page.

[html]

Find Browser In JQuery – Sibeesh Passion

Find Browser In JQuery – Sibeesh Passion

[/html]

Then you need to include the script needed.

[js]

[/js]

As you have noticed I have included http://code.jquery.com/jquery-migrate-1.2.1.js. It is just because this feature is deprecated and moved to this js.

Now you need to write the scripts.

[js]

[/js]

We are appending the browser details to the DOM. So that it is always better to use some CSS to improve the readability.

[css]

[/css]

Now please run your browser, you can see the following output.

Find Browser And Browser Version Using jQuery

Complete Code

[html]

Find Browser In JQuery – Sibeesh Passion

Find Browser In JQuery – Sibeesh Passion

[/html]

Conclusion

Did I miss anything that you may think which is needed? Have you ever wanted to find out the browser details in client side? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

jQuery no-conflict And Using Different Versions Of JQuery

SibeeshVenu — Mon, 12 Oct 2015 12:03:11 +0000

In this post we will see what is jQuery no-conflict and what is the importance of jQuery no-conflict. We will also learn how can we use different versions of JQuery in the same page according to your need. jQuery no-conflict is an option given by the jQuery to over come the conflicts between the different js frameworks or libraries. When we use jQuery no-conflict mode, we are replacing the $ to a new variable and assign to jQuery. Here in this post we will explain this feature in deep and we will also create a demo of using different versions of jQuery together in one page. I hope you will like this.

Download Source Code

Please download the source code here: jQuery noConflict

Introduction

As you all know, some other JavaScript libraries also uses the $ (Which is the default reference of jQuery) as a function or variable name as jQuery has. And in our development life, we are not at all strict to only jQuery, we may use lots of other libraries too. Isn’t it? I use different libraries in my projects to accomplish different tasks. So what will happen when we use those libraries? There will be conflicts between those libraries right since they all use $ as the variable name. The situation is really bad.

So we have only one chocolate and more number of winners, in real life we can just cut the chocolate into the number of winners, right?

Dogs Sharing Food

But that won’t be accepted in this case, so we have an another option, this option is introduced by jQuery and it is jQuery no-conflict.

Background

I always use different libraries in my project, thus sometimes I faced these problem in my project. So I thought of sharing with you all who are facing this problem.

Using the code

The first thing you want to do is creating an HTML page.

[html]

JQuery noConflict – Sibeesh Passion

JQuery noConflict – Sibeesh Passion

[/html]

So what is next? Adding reference ? Yes.

[js]

[/js]

So we are using prototype lowest version and jquery together, in this case you will face conflict errors, and please be noted that the new version of prototype.js doesn’t have any conflict with jQuery since they updated and given the fix.

So what to do if you found any issues? you just need to give the $ to prototype and assign a new variable to jquery as follows.

[js]

[/js]

And now you can use $jq as the new jQuery reference.

[js]

[/js]

Complete Code

[html]

JQuery noConflict – Sibeesh Passion

JQuery noConflict – Sibeesh Passion

[/html]

Sometimes we may end up in a situation to use different version of jQuery in the same page right?

Situation I faced

I was working in an old project which was handled by a team few years back, at that time I got a minor work to do in that project, to do the task I was in a need to add the latest version of jQuery since the entire project was using the old reference of jQuery. I was in a situation that I should not remove the old references and update with the new one, if I do that there might be some issues with other functionalities right? Since the project was already in live, I didn’t take that risk. So I added the new version and used jQuery noConflict to avoid the reference issues.

Using the code

Here I am going to give you a demo of now to use different version of jQuery in one page.

First of all please add the needed reference to your page.

[js]

[/js]

Please be noted that we have added jQuery 1.9.0,1.10.1,1.11.0,1.11.1,1.11.3 in our page.

Now we need to add some buttons in the UI, later we will bind the click events of the same buttons.

[html]

[/html]

What is next, so we have added the different jQuery versions. Now we will create different variable names for each versions. Is that fine?

[js]

[/js]

So now we have added variable names for all the versions right? The next thing we are going to do is to fire the click events for each versions.

[js]

[/js]

So if you run your page and click the buttons, you can find that the related codes only get fired.

jQuery no-conflict And Using Different Versions Of JQuery

Now what if you comment out the variable declaration for jQuery version 1.11.3?

[js]
//var jQuery1113 = jQuery.noConflict();
//window.jQuery = jQuery1113;
[/js]

You will get an error says Uncaught ReferenceError: jQuery1113 is not defined in browser console.

jQuery no-conflict And Using Different Versions Of JQuery

Complete Code

[html]

Use JQuery Different Versions in One Page – Sibeesh Passion

Use JQuery Different Versions in One Page

[/html]

That’s all.

Conclusion

Did I miss anything that you may think which is needed? Have you ever used different versions of jQuery in same page? Have you ever tried jQuery noConflict? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

CodeProject – Sibeesh Passion

How to Update Net Core 2.0 Application to 2.1 Version

Introduction

Background

.Net Core 2.0 to 2.1.x

Let’s create a .net core 2.0 application

Update Visual Studio 2017 to the latest

Install latest Dot Net Core

Changing the Target frameworks

What is new in Dot(.) Net Core 2.1.x

Conclusion

Your turn. What do you think?

Creating a Chat Application in Node JS with Express, MongoDB, Mongoose and Socket.io

Introduction

Source Code

Background

Setting up Node application

Creating an App using Express

Running our application on browser

Creating Index page

Start Chatting

Start developing the chat app

Create model from page data

Setting up database

Creating a Post request

Creating a Get request for all the chat data

${chatObj.name}

Implementing Socket.io

Require the package

Enabling the connection

Listen using new http server

Changes in script

Emits the event

Conclusion

Your turn. What do you think?

Create a Microsoft Azure Cognitive Service FaceAPI Application in Half an Hour

Introduction

Prerequisites

Download the source code

Create the Face API in Azure portal

Add reference of Microsoft.ProjectOxford.Face to your project

Using the code

Add Image and button control to MainWindow.xaml

Create an instance of IFaceServiceClient

Load the image to image control

Detect the faces count

Draw the rectangles in faces found

Output

Check the statistics in Azure portal

To Do

Conclusion

Your turn. What do you think?

Do you know JavaScript? Are you sure? – Part 1

Introduction

Download source code

Background

Using the code

Create a HTML page

Let’s begin our tutorial

References

See also

Conclusion

Your turn. What do you think?

Introduction to Web SQL

Hoisting In JavaScript

Load XML And Show As li In Angular JS

Function Declaration And Function Expression

Find Browser And Browser Version Using jQuery

jQuery no-conflict And Using Different Versions Of JQuery