Wednesday, August 14, 2019

How to create an asynchronic Javascript Promise

The Application Cache of HTML5

by carmel schvartzman
In this page we see how to create an asynchronic Javascript Promise. We use Jquery and HTML5.

How to create an asynchronic Javascript Promise



<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    
    //////  this line uses the Promise :
    fnPromise('Hello').then((url) => { console.warn(`DATA = ${url}`); },(e) => { alert('ERROR = ' + e); });
    
  });
});

 //////  this is the Promise :
const fnPromise = (url) => { 

return new Promise((resolve,reject) => {    
    if(url !== null) resolve(url);
        else reject('Bad request');
    }
    );
}

</script>
</head>
<body>
<button>Call a Promise and get the result back</button>
</body>
</html>


That’s all: enjoy HTML5!!!

עריכה: כרמל שוורצמן

Tuesday, April 30, 2019

Simple Twitter Bootstrap Form Building-block

The Application Cache of HTML5

by carmel schvartzman

The following is a building block to create a Form :




<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Form Building-block</h2>
  <form action="/action_page.php">

  <div class="panel panel-primary">
     <div class="panel-heading  panel-primary">
      <h3 class="panel-title ">Create Employee</h3>
    </div>
    <div class="panel-body  panel-primary">
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
    </div>
    <div class="checkbox">
      <label><input type="checkbox" name="remember"> Remember me</label>
    </div>
 
     </div>
    <div class="panel-footer panel-primary">
      <button class="btn btn-primary" type="submit">Save</button>
    </div>
 
  </form>
</div>

</body>
</html>


That’s all: enjoy HTML5!!!

עריכה: כרמל שוורצמן






Tuesday, January 5, 2016

The Application Cache of HTML5


The Application Cache of HTML5

by carmel schvartzman
The Application Cache in HTML5  allows us to make an offline version of a web page, releasing the load on our web server, and making the web pages a lot more responsives increasing performance.  That is because in this case the browser will only download changed web pages from the server.
This new HTML5 feature works by means of creating a cache manifest file,  a file of ”text/cache-manifest” MIME-type.


You should create MIME-types to allow web clients handle new file name extensions appropriately; elsewhere, if IIS does not recognize the file name extension, then sends the content as the default MIME type: Application, which means that clients cannot process the file.
So let’s add the cache-manifest MIME type to our web server. Type “inetmgr” in the RUN window:
The Application Cache of HTML5

After IIS opens, select the Default Web Site, and double-click “MIME Types”:
The Application Cache of HTML5

Click the “Add” link:

…  and type the “.appcache” file extension and its corresponding “text/cache-manifest” MIME type:

The Application Cache of HTML5

The Application Cache of HTML5


Now , lets use the Application Cache feature. First, let’s create a Manifest File with .appcache as extension. In this file will be three sections: CACHE MANIFEST( setting what should be cached),NETWORK(setting what should NOT BE CACHED) and FALLBACK (for fallback pages if a page is not accessible) . Therefore, type the “CACHE MANIFEST” section , in which we’ll list all the files that must be kept in cache:
The Application Cache of HTML5

Then, set which files should NOT BE CACHED, meaning that every request will be sent to the Web Server, using the “NETWORK” section:
The Application Cache of HTML5

Finally, add a FALLBACK section to estipulate which are the web pages in recovery state:
The Application Cache of HTML5


There is a ” # ” to open comments, and also there are used by the HTML5 browsers to decide whether the web page has been updated , to evict them from cache and reload them:
The Application Cache of HTML5

You can force the browser to renew the cached pages by changing the Manifest File of the application.
Finally, include the “manifest” attribute in the document’s  html  tag:



Important: different browsers can have different size limits for web cached data.

That’s all: enjoy HTML5!!!
עריכה: כרמל שוורצמן


Category: HTML5 WEB STORAGE