New JavaScript APIs in HTML5

HTML5 changes the web landscape considerably, because the specification mandates support for JavaScript APIs which can be used to build web pages which can act as web applications.

In this article, we will do a quick rundown of all the JavaScript APIs referenced in HTML5 specification.
Contacts - The HTML5 specification mentions that the Contacts API allows to have a common contacts repository in the browser which can be access by any web application.

Selection - The selection API supports selecting items in DOM (supports CSS3 type of selectors), to be used along with JQUERY.

Offline apps - This API allows marking pages to be available in Offline mode. This is useful if a resource requires dynamic processing.

Indexed database - This API is meant for a database of records holding simple values (including hierarchical objects). Every record has a key and a value. An indexed database is supposed to be implemented using b-trees. Web SQL DB is no longer being pursued as part of HTML5 specification.

Web workers - This API is meant to be invoked by web application to spawn background workers to execute scripts which run in parallel to UI page. The concept of web works is similar to worker threads which get spawned for tasks which need to invoked separate from the UI thread.

Web storage - This specification defines an API for persistent data storage of key-value pair data in Web clients.

Web sockets - This API used for persisting data storage of data in a key-value pair format for Web clients.

Server-Sent Events - This API is used for opening an HTTP connection to receive push notifications from a server. These events are received as DOM events. This API is supposed to be used with Push SMS.

XMLHttpRequest2 - This API is used to provide scripted client functionality to transfer data between a server and a client.

Geolocation - This API is used to provide web applications with scripted access to geographical location information of the hosting device.

Canvas 2D Context - This API provides objects, methods and properties to draw and manipulate graphics on a canvas drawing surface.

HTML Microdata - This API is used to annotate content with specific machine-readable labels, e.g. to allow generic scripts to provide services that are customized to a page. Microdata allows nested groups of name-value pairs to be added to documents.

Media Capture - This API is used to facilitate user access to a device's media capture mechanism (camera, microphone, file upload control, etc.). This only coves a subset of media capture functionality of the web platform.

Web Messaging - This API is used for communications between browsing contexts in HTML documents.

Forms - The Forms API can be used with the new data types supported with HTML5.

File API - The File APIs are used by the browser to provide secure access to the file system.

Css3 Less & Sass

 Css3 Less & Sass

Write less do more

A program that takes one type of data and converts it to another type of data.

Popular CSS preprocessor languages include LESS and SASS

Following reasons should consider using a CSS preprocessor

It adds the stuff that should have been in CSS in the first place

It will make your CSS dry

It will save you time

It will make your code easier to maintain

It will make your CSS more organized

It's easy to set up

It will make your websites prettier

It's easier to write than you think

Frameworks that supercharge your CSS

 

 

Functions

Less provides a variety of functions which transform colors, manipulate strings and do maths.

@base: #f04615;

@width: 0.5;

.class {

  width: percentage(@width); // returns `50%`

  color: saturate(@base, 5%);

  background-color: spin(lighten(@base, 25%), 8);

}

Nested rules

oYou can also bundle pseudo-selectors with your mixins using this method.

o& represents the current selector parent

o

.clearfix {

  display: block;

  zoom: 1;

  &:after {

    content: " ";

    display: block;

    font-size: 0;

    height: 0;

    clear: both;

    visibility: hidden;

  }

}

Media query bubbling and nested media queries

Media queries can be nested in the same way as selectors.

Selectors are copied into the body of the media query:

Importing

oimport a .less file, and all the variables in it will be available.

oThe extension is optionally specified for .less files.

  @import "library";  // library.less

  @import "typo.css";

Operations

oAny number, color or variable can be operated on.

oLess understands the difference between colors and units.

 

  @base: 5%;

  @filler: @base * 2;

  @other: @base + @filler;

  color: #888 / 4;

  background-color: @base-color + #111;

  height: 100% / 2 + @filler;

Importing

oimport a .less file, and all the variables in it will be available.

oThe extension is optionally specified for .less files.

  @import "library";  // library.less

  @import "typo.css";

Operations

oAny number, color or variable can be operated on.

oLess understands the difference between colors and units.

 

  @base: 5%;

  @filler: @base * 2;

  @other: @base + @filler;

  color: #888 / 4;

  background-color: @base-color + #111;

  height: 100% / 2 + @filler;

Sass is

oa CSS preprocessor

oan extension of CSS

oadds power and elegance to the basic language.

Allows to use 

oVariables

oNnested rules

oMixins

oInline imports

oWith a fully CSS-compatible syntax

Helps to

oKeep large style-sheets well-organized

oGet small style-sheets up and running quickly

 

Installation

> Install Ruby

> gem install sass

> sass style.scss appstyle.css

> sass --watch style.scss appstyle.css