references

auto Form validation

$('input[type="url"]').bind('invalid', function() {
    return false;
});

Autofocus + placeholder + required

When the autofocus attribute is present, the INPUT, TEXTAREA, or BUTTON element is automatically selected upon page load.

<input autofocus="autofocus" />
<button autofocus="autofocus">Hi!</button>
<textarea autofocus="autofocus"></textarea>
    <input type=email placeholder="a@b.com">
    <select name=color required>
     <option>Green
     <option>Blue
    </select>
  • The _form_ element has a _novalidate_ attribute that can be used to disable form validation submission (i.e. the form can always be submitted).
  • The input and button elements have formaction, formenctype, formmethod, formnovalidate, and formtarget as new attributes. If present, they override the action, enctype, method, novalidate, and target attributes on the form element.
  • The script element has a new attribute called _async_ that influences script loading and execution.
  • The html element has a new attribute called manifest that points to an application cache manifest used in conjunction with the API for offline Web applications.
  • accesskey
  • tabindex
  • contextmenu

manifest

<link rel="manifest" href="/img/icons/manifest.json">
{
"icons": [
    { "src": "icon/lowres", "sizes": "64x64", "type": "image/webp" },
    { "src": "icon/hd_small", "sizes": "64x64" },
    { "src": "icon/hd_hi", "sizes": "128x128", "density": 2 }
] }

data API

// Assuming element:	<div id="myDiv" data-name="myDiv" data-id="myId" data-my-custom-key="This is the value"></div>
 
var element = document.getElementById("myDiv");
var id = element.dataset.id;
 
// Retrieves "data-my-custom-key"
var customKey = element.dataset.myCustomKey;
 
// Sets the value to something else
element.dataset.myCustomKey = "Some other value";
 
// Element becomes:
//    <div id="myDiv" data-name="myDiv" data-id="myId" data-my-custom-key="Some other value"></div>

Script Loading

JavaScript-powered asynchronous loading isn't the end of the story. In HTML5, the script element has been updated to support async and defer attributes. This is already available in recent WebKit-based browsers and Firefox 3.6.

These attributes effectively let us do what LABjs offers:

If async is present, the script will be executed asynchronously, as soon as it is available If defer is present, the script is executed when the page has finished parsing If neither are present, the script is fetched and executed immediately before the page has finished parsing

Server Sent Events, COMET

websokets:

IE10/IE11 non supporta questa funzione. usare polifill

una tecnica alternativa con obiettivi simili funzionante con IE http://www.binarytides.com/ajax-based-streaming-without-polling/ 

server {
  listen       80;
  server_name  chat.dev;
  location / {
    proxy_pass http://chat_dev_upstream;
    proxy_buffering off;
    proxy_cache off;
    proxy_set_header Host $host;
    # Place them into location section and it should work.
    proxy_set_header Connection '';
    proxy_http_version 1.1;
    chunked_transfer_encoding off;
    #You may also need to add
    proxy_buffering off;
    proxy_cache off;
  }
}

LocalStorage aka "dom storage"

  • 5MB, assergnato dal browser per ogni dominio
  • a partire da IE 8.0

vedi Cache.ts per una implementazione wrapper con la gestione dei TTL

try {
  return 'localStorage' in window && window['localStorage'] !== null;
} catch(e){
  return false;
}
// get
localStorage["key1"] = "value1";
localStorage.removeItem("key1");
localStorage.clear();

In webkit, you can go have a look at it's contents with your developer tools, look at the 'Resources' tab -> Databases, It will work exactly the same in PhoneGap as in desktop browsers

  • Size of database is limited to 5MB (the user can be prompted to allow more, but we didn't want such prompts in our app)
  • Pre-populating the database via javascript adds to initial app load time
var db = window.openDatabase('name', '', 'descr', 2500000);
db.transaction(function(tx) {
  tx.executeSql('select * from table', null, function() {
     // ...
  }, errfunc);
});

lawnchair astrae le differenze dei vari browser e storage

<script type="text/javascript" src="Lawnchair.js" charset="utf-8"></script>
<script type="text/javascript" src="webkit-sqlite.js" charset="utf-8"></script>
 
var lawnchair = new Lawnchair({table:'mytable', adaptor:'webkit'}, function(){
});
 
lawnchair.get('my_data_key', function(obj) {
    if (obj !== undefined) {
        lastSyncDate = obj.lastSync;
        dataList = obj.dataList;
    }
});
 
lawnchair.save({key:'my_data_key', lastSync: currentTime, dataList: someData})

autocomplete: data-list attribure

polifil 

    <input type="text" list="languages">
    <datalist id="languages">
      <option value="HTML">
      <option value="CSS">
      <option value="JavaScript">
      <option value="Java">
      <option value="Ruby">
      <option value="PHP">
      <option value="Go">
      <option value="Python">
    </datalist>

progress bar: docs 

 
    <progress max="100" value="80"></progress>
    <style type="text/css">
    progress[value] {
      /* Reset the default appearance */
      -webkit-appearance: none;
         -moz-appearance: none;
              appearance: none;
 
      /* Get rid of default border in Firefox. */
      border: none;
 
      width: 250px;
      height: 20px;
 
      background-color: blue;
      /* For IE10 */
      color: blue;
    }
    </style>