[Solution] How to make exe(executable) from NodeJS App

 [Solution] How to generate/make exe(executable) from NodeJS App

Make exe(executable) from NodeJS App

In this article we will solve your all questions Like How to generate exe out of NodeJS App or in other words Is it possible to generate exe out of NodeJS code or i will say make windows executable out of NodeJS App (code)

let's get started with this article in which we are going to discuss how we can generate exe or we can say windows executable using NodeJS App.

To achieve this, there are lot of npm packages are available but in this article we will go ahead and use node-windows npm package.

Below are the steps to generate exe from nodejs app source code.

1) Download nodejs and install nodejs and npm (Skip if you have npm already installed)

2) Into your project root directory execute below command.

npm install node-windows 
or
npm  i node -windows

3) create one file into your project's root directory named service.js and copy below code

var Service = require('node-windows').Service;

var svc = new Service({
  name:'visionfortech_node_app',
  description: 'visionfortech nodejs App',
  script: <entry point of your application [app.js or index.js]>,
  execPath: <Node exe path>
});
svc.on('install',function(){
  log.info("Service starting ...")
  svc.start();
  log.info("Service started ...")
});

svc.on('uninstall',function(){
  log.info('Uninstall complete.');
  log.info('The service exists: ',svc.exists);
});

Above code will create deamon directory into your project's root directory and into that it will create visionfortechnodeapp.exe and two log files.

In case if you are facing any kind of issue/problem please feel free to post it in comment. i will try to resolved as soon as i can.

Hope you enjoyed the article and it got added something new to your knowledge.

To Learn more about Javascript Javascript Treasure.

To add something new every-time into your mind stay tuned to visionfortech.

ECMAScript (ES6) Features with Example (Part -1)

 ECMAScript (ES6) Features with Example (Part -1)

ECMAScript (ES6) Features Part 1 By Visionfortech

In this article we will see some of the fantastic features of ES6 with examples so that it will be easy to understand each and every features.

In this article we will discuss about some major features about ECMAScript (ES6). Since there are lot many features of into ES6 We will cover few of them in part 1 and rest of them we will cover it in out next article. So let' start with some coolest features of ES6 now.

Below are the list of ES6 Features.

ES6 FEATURES

let vs var
Declaring Variable as Constant
Template Literals
Spread Operator
Function default parameters
Arrow functions
Shorthand Properties
This keyword
Destructuring
Class Inheritance
Promise
Define and Use of Promise
Promise Chaining
Error Handling into Promise Chain

In this article we are going to discuss about let vs var, Declaring Variable as Constant, Template Literals, Spread Operator, Function default parameters, Arrow functions features of ES6

1. Let vs Var

Var : 

var visionfortech_x = 5;
if(visionfortech_x){
    var visionfortech_x = 10
}
console.log(visionfortech_x )  // The output will be 10

Let :
 
var visionfortech_x = 5;
if(visionfortech_x){
    let visionfortech_x = 10
}
console.log(visionfortech_x ) // The output will be 5

for detail understanding please visit let vs var by visionfortech or Global VS local Variable into JS

2. Declaring variable as Constant

Const:

1) const car = "Honda";
    car = "BMW";
    console.log(car) // It will give you an Error

2) const cars = ['Honda', 'BMW'];
    cars.push('Ferrari');
    console.log(cars); // Output will be ['Honda','BMW','Ferrari']

3) const car = {
        brand: 'BMW',
        doors: 2,
        engine: 3.0
    }
    car.brand = "Ferrari";
    console.log(car); // Output will be {brand: 'Ferrari',doors: 2,engine: 3.0}

3. Template Literals

1) let name = "Pratik";
    let message = `Hello Mr. ${name}`;
    console.log(message ) // Hello Mr. Pratik

2) let number1 = 10;
    let number2 = 20;
    let results = `Total is $${number1 + number2}`;
    console.log(results); // Total is 30

4. Spread Operator

var topics= ["Javascript", "Angular", "VueJS"];
var author_topics = ["visionfortech", "JS", "MongoDB"];
var author_likes= ["Mongodb Certifications",...topics, ...author_topics];
console.log(...author_likes) 

Above will print below thing on browser console.
Mongodb Certifications,Javascript,Angular,VueJS,visionfortech,js,MongoDB

5. Function Default Parameter

function website(sitename="Visionfortech", sitetype="Blog"){
    console.log(car1, car2);
}
console.log(website())

Above will print below thing on browser console.
Visionfortech Blog

function website(sitename="Visionfortech", sitetype="Blog"){
    console.log(car1, car2);
}
console.log(website("Visionfortech Javascript"))

Above will print below thing on browser console.
Visionfortech Javascript Blog

6. Arrow Function

var cal = (number1, numbe2) => number1 + numbe2;
console.log(cal(13, 12));

Above will print below thing on browser console.
15

For More ES6 features stay tuned to visionfortech

Hope you enjoyed the article and it got added something new to your knowledge.

To Learn more about Javascript Javascript Treasure.

To add something new every-time into your mind stay tuned to visionfortech.

Cache API in Javascript

Cache API using JavaScript By Visionfortech

In this article i am going to show that how we can add,update,delete,retrive (CRUD operations) api urls and it's responses into cache so that our application will execute in more faster manner.

First step is we have to check weather our browser is supporting cache API or not. So now everyone will have a question like how we can check that ? So below is the answer for that.

Detect whether browser supports Cache API or not 

if ('caches' in window) {
      // Means your browser is supporting cache API
}else{
	// Please upgrade your browser because cache APIs are not supported
}

If your browser has suppor of cache API then let's go ahead and create cache

Create a Cache 

caches.open('visionfortech-cache').then(function(cacheInJS) {
  // It will return a promise and a object of cache which was either existed or created
 // before caches.open JS call
});

Since we have created a cache now let's go ahead and try to add one or all URLs to cache.

Adding API URLs and it's response into Cache 

let URLs_to add = [ "/api/visionfortech_cache_api_Test1","api/visionfortech_cache_api2"]
let single_url = "api/visionfortech_cache_api1";

// Adding a single URL to cache

caches.open('visionfortech-cache').then(function(cacheInJS) {
  cacheInJS.add(single_url );  // URL will be fetched and cached
});

// Adding multiple URL to cache

caches.open('visionfortech-cache').then(function(cacheInJS) { 
  cacheInJS.addAll(URLs_to add)
    .then(function() { 
      // Multiple URLs will be fetched and cached
    });
});

Since we have created a cache and added some URLs now let's go ahead and try to update the response of particular URL's response.

Update response of URL into Cache

fetch('api/visionfortech_cache_api1').then(function(response) {
  return caches.open('visionfortech-cache').then(function(cacheInJS) {
    return cacheInJS.put('api/visionfortech_cache_api1', response);
    // It will update the response for api/visionfortech_cache_api1 URL.
  });
});

Till now we have seen how to create a cache and how to add API URLs and it's responses and how to update API response into Cache in case of change. So now let's go ahead and look at how we can retrieve the URLs which are cached and it's respective reponse object.

Retrive URLs and it's response from Cache

// Retrieve API URLs from cache like how many APIs we have stored in cache

caches.open('visionfortech-cache').then(function(cacheInJS) { 
  cacheInJS.keys().then(function(cached_requests) { 
    console.log(cached_requests); 
	// It will return array of cache API URLs
  });
});

// Retrieve particular API response from Cache

caches.open('visionfortech-cache').then(function(cacheInJS) { 
  cacheInJS.match('api/visionfortech_cache_api1').then(function(response) {
    console.log(response);
  });
});

So Now let's see how we can delete/clear our cache.

Delete a Cache 

caches.delete('visionfortech-cache').then(function(cacheInJS) {
  // It will delete/clear the visionfortech-cache
});

Hope you enjoyed the article and it got added something new to your knowledge.

To Learn more about Javascript Javascript Treasure.

To add something new every-time into your mind stay tuned to visionfortech.

Speech to text using JavaScript

In this article i am going to show that how we can convert speech to text using JavaScript with it's browser API.

As you seen in above image, the output/outcome of this example/program is user will be able to get spoken words into text/string and his/her confidence level(in %) while speaking those words.

with the user of inbuilt web api of browser we can achieve above program,we can recognize speech using JavaScript. It is very easy to recognize speech in a browser using JavaScript and then getting the text from the speech to use as user input. We havecovered How to convert Text to Speech using Javascript.

Want to download source code ? : Speech-to-text-using-Javascript

We have used the SpeechRecognition object. We haven't used too many properties. We have a simple HTML webpage in the example, where we have a button control to initiate the speech recognition action.

Output of this Application : 

Note: It will work only in Google Chrome browser

While running the code into the browser will ask for permission to use your Microphone, so please click on Allow and then speak anything to see the program in action.

Hope you enjoyed the article and it got added something new to your knowledge.

To Learn more about Javascript Javascript Treasure.

To add something new every-time into your mind stay tuned to visionfortech.

Enjoy......!!!
Happy Learning.....!!!

Face recognition using JavaScript

Into this article i am going to describe How we can calculate age, gender detection, and his/her expression by just detecting his/he face.

Surprised. I was too.... Now face detection is possible using java script which is one of the most common applications of Artificial Intelligence

In Javascript world face-api.js came up with JavaScript API for face detection and face recognition in the browser implemented on top of the tensorflow.js core APIs

Want to download source code ? : face-recognition-using-javascript

Output of this Application : 

In this article we will provide the information that how we can detect expression of a human being, Age of a person and his/her Gender

Below will be the project structure.

Or You can download the code from face-recognition-using-javascript

Hope you enjoyed the article and it got added something new to your knowledge.

To Learn more about Javascript Javascript Treasure.

To add something new every-time into your mind stay tuned to visionfortech.

Enjoy......!!!
Happy Learning.....!!!

Javascript JSON to string

Javascript JSON to string

Into this post we are going to discuss how to convert Javascript JSON ( Javascript Object Notation ) to string or javascript json to string.

Into this kind real IT world we can say Javascript is everywhere like front end and BackEnd both so we can say Javascript is going to rule everywhere.

So in today's article we are going to discuss JSON which generally uses to pass data from one end to another end.

Let start understanding of that using below simple examples.

So into Javascript we can do that easily using JSON.stringify().

First let's take and example of Object

let json_to_string = JSON.stringify({ javascript_json: 5, json_to_string: 6 })

console.log(json_to_string);

//output: "{"javascript_json":5,"json_to_string":6}"

Now let's take an example of run time creation of Array of Object

let json_to_string = JSON.stringify([new String('visiofortech'),new Boolean(false),new Number(7)])

console.log(json_to_string);

//output: "["visiofortech",false,7}"

Now let's take an example of Date object

let json_to_string = JSON.stringify(new Date(2018, 10, 16, 15, 4, 5))

console.log(json_to_string);

//output: ""2018-11-16T09:34:05.000Z""

Hope you enjoyed the article and it got added something new to your knowledge.

To add something new every-time into your mind stay tuned to visionfortech.

To Learn more about Javascript Javascript Treasure.

Please comment below if you have something doubts or some questions.

Enjoy...!!!

Happy Learning....!!!

Javascript Global and Local Variables

Javascript Global and Local Variables

Into this post we are going to discuss difference between how to declare javascript global variable and javascript local variable and its scope

we are going to discuss how can we declare global variable and local varible into Javascript with example.

Javascript global variable vs local variable by visionfortech

Javascript Global Variable:

If we define var and let variable same globally then let variable will not get added into global window object while var variable will get added to global window object.

So let's declare two variables at the time of window loaded

let Visionfortech_global = "Visionfortech is defined as Global variable"

var Visionfortech_local = "Visionfortech is defined as Local variable"

console.log(Visionfortech_global);
o/p : undefined

console.log(Visionfortech_local);
o/p : Visionfortech is defined as Local variable
  

Javascript Local Variable : 

let js_local_variable = 1;

if (js_local_variable === 1) {
  let js_local_variable = 2;

  console.log(js_local_variable);
  // output: 2
}

console.log(js_local_variable);
// output: 1
  

Now let see the scope example of Javascript global and Local variable.

var global_variable = 1;

var javascript_global_variable = 2;

            

if (a === 1) {

     var global_variable = 11; // the scope is global

     let javascript_global_variable = 22; // the scope is inside the if-block

            

     console.log(global_variable);  // 11

     console.log(javascript_global_variable);  // 22

}          

console.log(global_variable); // 11

console.log(javascript_global_variable); // 2  

Enjoy....!!!!

Feel free to comment below your experience with above approach and If you still find any problem  with above steps Let me know I would love to help you to resolve your  problem.

 If you want to take your Technological Knowledge to the Next Level and For More Technological information Stay tuned to Visionfortech

Javascript let vs var

Javascript Let vs Var

Into this post we are going to discuss difference between Javascript var and Let.

we are going to discuss about Javascipt variable declaration method like where user can declare variable with var and where user can declare variable with let.

Global Variable Declaration:

If we define var and let variable same globally then let variable will not get added into global window object while var variable will get added to global window object.

So let's declare two variables at the time of window loaded

let Visionfortech_let = "Visionfortech is defined as let variable"

var Visionfortech_var = "Visionfortech is defined as var variable"

console.log(Visionfortech_let);
o/p : undefined

console.log(Visionfortech_var);
o/p : Visionfortech is defined as var variable
  

Redeclare Variable:

So Here let's discuss about one more example of let vs var into Javascript.You can not declare let variable but you can redeclare var variable

'use strict';

var let_vs_var = "Javascript let vs var";

var let_vs_var = "Difference Between let and var Javascript"; 
//replaced easily



'use strict';

let let_vs_var = "Javascript let vs var";

let let_vs_var = "Difference Between let and var Javascript"; 
// Error: let_vs_var is already declared

Javascript Let Example : 

let vision = 1;

if (vision === 1) {
  let vision = 2;

  console.log(vision);
  // output: 2
}

console.log(vision);
// output: 1
  

Now let see the scope example of Javascript let vs var.

var let_vs_var = 1;

var javascript_var = 2;

            

if (a === 1) {

     var let_vs_var = 11; // the scope is global

     let javascript_var = 22; // the scope is inside the if-block

            

     console.log(let_vs_var);  // 11

     console.log(javascript_var);  // 22

}          

console.log(let_vs_var); // 11

console.log(javascript_var); // 2  

Enjoy....!!!!

Feel free to comment below your experience with above approach and If you still find any problem  with above steps Let me know I would love to help you to resolve your  problem.

 If you want to take your Technological Knowledge to the Next Level and For More Technological information Stay tuned to Visionfortech

[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive

[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive

In this post i am going to discuss about how to remove a jQuery violation "[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive" from chrome console.

Basically user can remove all the basic violations from just changing the type of log from "Verbose" to "Info".

But what if  user want to remove above violation from "Verbose" log Type ?
So Here is the solution.

Problem : 

The above violation is occur because e.preventDefault() will take much time and it will not passively load the component or we can say DOM.

So to remove that please include below code on top of your javascript.

Solution :

{passive:true}

// To remove the violation jquery-1.11.1.min.js:3 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive.

jQuery.event.special.touchstart = {
setup: function( _, ns, handle ){
if ( ns.includes("noPreventDefault") ) {
 this.addEventListener("touchstart", handle, { passive: false });
} else {
this.addEventListener("touchstart", handle, { passive: true });
}
}
};

//Remove violation code End

So now run your application and above violation will not appear into console.

Cheers...!!!Enjoy...!!!

Feel free to comment below your experience with above approach and If you still find any problem with above steps Let me know I would love to help you to resolve your  problem.

I hope this article will provided you solution which you are expecting. If you want to know more about Javascript check out Javascript World

If you want to take your Technological Knowledge to the Next Level and For More Technological information Stay tuned to Visionfortech

Bootstrap search drop down list or list with [X] sign to delete element

Bootstrap search drop down list or list with [X] sign to delete element

This post is all about a bootstrap drop down list or we can say list with search facility and delete functionality as well.

In this post we are going to discuss about a component through which user can show the drop down list with search option facility and user also can delete the option by just clicking [X] sign besides every option.So let's see how we can achieve that.

You can see the live demo at live Demo

Jsfiddle URL : JSfiddle URL

The HTML file : 

<div class="dropdown" id="option_dropdown" style="margin-left:20px;margin-top:20px">

<button class="btn btn-default btn-filter" type="button" id="savedSearch"

data-toggle="dropdown" data-submenu="" aria-expanded="true" style="word-wrap: break-word;">

<span id="filter_name">Select Language</span> <span class="caret"></span>

</button>

<ul class="dropdown-menu" id="saveLanguageUl"  style="max-height: 315px;overflow-y: scroll;"></ul>

</div>

JavaScript code :

var pra="";
$(document).ready(function(){
$("#saveLanguageUl").empty();
   $("#saveLanguageUl").append('<li><input type="text" id="searchFilterInput" placeholder="Search for Language.." title="Type in to searcg language option">');
   var language = ["angular.js","backbone.js","d3.js","amcharts.js","jquery.js","bootstrap.js","bootstrap.css","mabbox.js","python","php","ajax","json"];
 
    for(var i = 0; i < language.length; i++) {
 $("#saveLanguageUl").append('<li style="height:35px" class=""><a href="#" id='+language[i]+' name='+language[i]+'>'+language[i]  +'   <span style="float:right;" class="deleteOptionBtn glyphicon glyphicon-remove-sign" title="Delete '+language[i]+' Filter" id='+language[i]+'><br></span></a></li>');
}
       
          $("#searchFilterInput").keyup(function(){
    var input, filter, ul, li, a, i;
    input = document.getElementById("searchFilterInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("saveLanguageUl");
    li = ul.getElementsByTagName("li");
    for (i = 1; i < li.length; i++) {
                  a = li[i].getElementsByTagName("a")[0];
                  if(a.name.toUpperCase().includes(filter)){
                      li[i].style.display = "";
                  } else {
                      li[i].style.display = "none";

                  }
              }
          })
$('#saveLanguageUl').on('click', 'a', function(event) {
var filterId = $(this).attr('id');
if(pra == ""){
$("#filter_name").text(filterId);
}
else{
pra = "";
}
$("#searchFilterInput").val("");
});

$('#saveLanguageUl').on('click', 'span.deleteOptionBtn', function(event) {

var filterId = $(this).attr('id');
pra = filterId;
$(this).closest("li").remove();
$("#filter_name").text($(this).attr('Select Saved Filter'));
});
});

CSS Code:

#searchFilterInput {
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 15px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

You can see the live demo at live Demo
Jsfiddle URL : JSfiddle URL

Enjoy...!!!

Feel free to comment below your experience with above approach and If you still find any problem with above steps Let me know I would love to help you to resolve your  problem.

If you want to take your Technological Knowledge to the Next Level and For More Technological information Stay tuned to Visionfortech

Create E commerce website for free in 5 minutes | (with images)

Create E commerce website for free in 5 minutes | (with images)

Into this post i am going to discuss some points which are:
How to create  E commerce website in 5 minutes.
How user can create a E commerce website in which he/she can do whatever he/she want.
How easy to create a website in few minutes.

By using opencart you can create your create your own website and most important thing that it is open-source.

So by following below steps you can create a E Commerce website in few minutes.
1) Install any server(apache,tomcat) and Mysql database.
     You can install both of this by just installing one software which is XAMPP.
     You can download XAMPP from Here.

2) Download the opencart from Here.or you can download that from opencart website as well.

3) Put that downloaded files into the root directory of your server here i user XAMPP so iam going to put all the files into htdocs directory which is root directory for apache in xampp.

4) Rename config-dist.php to config.php and admin/config-dist.php to admin/config.php.

5) Open xampp control pannel and start the apache as well as mysql server.

6) Then open you browser and type http://localhost:opencart and you can see the below screen

7) Press Continue.

8) Press Continue.

Enter username and password for your admin pannel using which you can manage your shopping website and do everything what you want.

9) After that delete the install folder from your root directory of server.

Enjoy....!!!!

Feel free to comment below your experience with above approach and If you still find any problem  with above steps Let me know I would love to help you to resolve your  problem.

 If you want to take your Technological Knowledge to the Next Level and For More Technological information Stay tuned to Visionfortech