Showing posts with label JavaScript. Show all posts
Showing posts with label JavaScript. Show all posts

Saturday, October 24, 2020

Cache API in JavaScript

Cache API in Javascript


cache-api-in-javascript-by-visionfortech-pratik-soni
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.


Saturday, October 10, 2020

Speech to Text using Javascript

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.....!!!

Saturday, May 30, 2020

Face Recognition using JavaScript

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

code structure of face recognition using javascript : By visionfortech

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 : 

code structure of face recognition using javascript : By visionfortech


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.

code structure of face recognition using javascript : By visionfortech


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.....!!!

Tuesday, October 16, 2018

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.

Javascript JSON to String by visionfortech , Javascript blog

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....!!!

Thursday, September 13, 2018

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 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

Friday, August 10, 2018

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

Tuesday, July 25, 2017

[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".

visionfortech,javascript,Pratik Soni













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

Tuesday, June 13, 2017

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.

Bootstrap search drop down list or list with [X] sign to delete element,visionfortech,visionfortech latest blog,visionfortech latest post


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

Wednesday, May 10, 2017

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.

visionfortech,best technical blog


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.

Visionfortech,Latest technological blog,Create E commerce website in few minutes


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.

Visionfortech,Latest technological blog,Create E commerce website in few minutes


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

Visionfortech,Latest technological blog,Create E commerce website in few minutes


7) Press Continue.



8) Press Continue.

Visionfortech,Latest technological blog,Create E commerce website in few minutes
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.

Visionfortech,Latest technological blog,Create E commerce website in few minutes

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

Monday, January 9, 2017

[Solution] Draw Flowchart with drag and drop facility using HTML and JavaScript(Flowchart Builder)

Draw Flowchart with drag and drop facility using HTML and JavaScript(Flowchart Builder)


         In this post we are going to provide a solution how a developer can embed his/her own flowchart builder into their application.

         This post contains the source code for that.You can download that code from Download code from GitHub

         At some point of time all developers want to Embed flowchart builder into their application.But they may not know how can they do that so here is the solution how they can embed flowchart into their own application.By using this code End user can draw their own flowchart with just simple drag and drop and simply connect those nodes to make it better understandable.

          Every Developer,programmer or student  knows what the flowchart is so we are not going to discuss here what flowchart is.

          So for Brief Flowchart is a diagram which shows user that what is the flow of the program or an application 

So for that you just need to write a small HTML code for that and below is the code.

HTML File

You just need to include the flowchart.js library into your HTML application and you can download that from flowhchart.js

<script type='text/javascript' src="js/flowchart.js">

Output : 

Latest Technological Blog,draw flowchart using html and javascript with drag and drop






















You can also get your drawn chart data into json format.

Get chart into JSON Format : 

console.log(myDiagram.model.toJson());

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 help to understand the Javascript Concept. 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

Tuesday, December 20, 2016

[Solution] Embed Map(openstreetmap) of Leaflet.js into HTML

[Solution] Embed Map(openstreetmap) of Leaflet.js into HTML

This post contains how can we use leafleat.js javascript to embed openstreetmap into HTML file and how to create markercluster(group of marker).

In this post we will discuss.

1) What is leaflet.js
2) What is open street map and how we can embed openstreetmap into HTML file 
3) What is MarkerCluster and what is fitbound of leaflet.js ?
4) Code to Embed openstreetmap into HTML(you can download the code).

visionfortech,include_openstreetmap_into_htrml,openstreetmap,Latest Technologocal Blog

So let's start.

You can download the code of this small project from https://github.com/visionfortech/embed-openstreetmap-in-html

What is leaflet.js ?

Leaflet.js is the trending open-source javascript library for mobile as well as tablet as well as web interactive maps.Its file size is just of 33 KB and most importantly it  has mapping features what we developers always needs.

What is open street map and how we can embed openstreetmap into HTML file  ?

OpenStreetMap is a collaborative project to create a free editable map of the world. The creation and growth of OSM has been motivated by restrictions on use or availability of map information across much of the world, and the advent of inexpensive portable satellite navigation devices. OSM is considered a prominent example of volunteered geographic information.

Created by Steve Coast in the UK in 2004, it was inspired by the success of Wikipedia and the predominance of proprietary map data in the UK and elsewhere.Since then, it has grown to over 2 million registered users, who can collect data using manual survey, GPS devices, aerial photography, and other free sources. These crowdsourced data are then made available under the Open Database Licence. The site is supported by the OpenStreetMap Foundation, a non-profit organisation registered in England and Wales.

For Embeding map into HTML

You need to import below JavaScript file into your HTML file.

<script type='text/javascript' src="js/leaflet-src.js">

What is leaflet.js ?

Leaflet.js is the trending open-source javascript library for mobile as well as tablet as well as web interactive maps.Its file size is just of 33 KB and most importantly it  has mapping features what we developers always needs.

Embed into HTML

1) At first you need to include leaflet.js library into your HTML page.

<script type='text/javascript' src="js/leaflet-src.js">
2) Then you need add below thing into your JavaScript.

var mymap = L.map('mapid').setView([10.1, 20.2], 13);

 L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
     attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
 }).addTo(mymap);

 var myIcon = L.icon({
    iconUrl:'images/map-marker-pratik.png',
    iconRetinaUrl:'map-marker-pratik.png',
    iconSize: [25, 40]
  });2) Then you need add below thing into your JavaScript.


3) Then add marker on your Map by doing below

L.marker([51.5, -0.09]).addTo(map)
    .bindPopup('Visionfortech.')
    .openPopup();3) Then add marker on your Map by doing below

What is MarkerCluster and what is fitbound of leaflet.js ?

Suppose you have multiple market at same position then what you can do ?

         At that time you need MarkerCluster Library of leaflet.js which can group the marker into once and it will show you the group(or we can say total count of marker at that particular position).

<link rel="stylesheet" type="text/css" href="css/MarkerCluster.css" /> <!-- Use to group Marker -->
<link rel="stylesheet" type="text/css" href="css/MarkerCluster.Default.css" /><!-- Use to group Marker -->
<script type='text/javascript' src='js/leaflet.markercluster.js'></script><!-- Use to group Marker -->
<script src="js/leaflet.markercluster-src.js"></script>

To use markerCluster you have to include above libraries into your HTML File.
After that you have to include below into your JavaScript

var marker_cluster = L.markerClusterGroup();
 
for(var i = 0; i < latitude.length; i++)
{
     var marker =  L.marker([latitude[i], longitude[i]],{icon: myIcon});
     marker.bindPopup("Latitude = "+latitude[i]+"<br>"+"Longitude = "+longitude[i]+"<br>"+"Provider = "+provider[i]);
     marker_cluster.addLayer( marker );//will add each marker into markerCluster
}
mymap.addLayer( marker_cluster );

What is FitBound ?

Suppose you have thousands of marker and you want to display each and every marker on screen when page gets loaded.

mymap.fitBounds(marker_cluster.getBounds())

you can do that by adding a single line into your JavaScript Function.
visionfortech,markerClustergroup,openstreetmap,leaflet.js,latest technological blog

You can download whole code from  https://github.com/visionfortech/embed-openstreetmap-in-html

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


Protected by Copyscape