W3.CSS & W3.JS: modern & responsive

W3.CSS is a free to use CSS framework with features of responsiveness whereas W3.JS is a javascript library

W3.CSS is based on standard CSS therefore easier to learn and use. It supports responsiveness and provides CSS equality across all browsers and all devices.

W3.JS is smaller and faster than other JavaScript libraries. It is designed to speed up application development.

W3.CSS classes start with “w3-propertyname” and W3.JS  selects and performs action using “w3.action(selector)”

Advertisements

SVG – Scalable Vector Graphics

What is SVG?

SVG is Scalable Vector Graphics. SVG is a XML based format to represent vector based graphics. It is used to draw two dimensional vector images, which support animation. SVG allows three types of graphic objects: vector graphics, raster graphics, and text

Can SVG be rendered in webpages?

Yes, SVGs can be rendered in webpages using an html tag using attributes like height and width.

Some facts about SVGs

SVG can be created using any text editor.

Since they are XML based, SVG images are searchable, indexable and can be scripted and compressed

SVG is an Open Standard

Being text format,  size is larger as compared to binary formatted graphics.

Bower Power

What is Bower?

A web site is made of lots of things — frameworks, libraries, assets, and utilities. But keeping track of all these libraries and making sure they’re up-to-date can be tricky. Bower manages all these things for you. So, we can call bower to be a package manager for the web.

What bower can do?

Bower can manage components that contain HTML, CSS, JavaScript, fonts or even image files. Bower does not  minify code or do anything else – it just installs the right versions of the packages you need and their dependencies.

Getting things done with bower

Installation : Bower is a command line utility, it can be installed easily using npm, the node package manager.

$ npm install -g bower

Searching packages :

$ bower search packagename 

Installing packages :

$ bower install packagename 

Listing packages :

$ bower list

Updating packages :

$ bower update packagename 

Uninstalling packages :

$ bower uninstall packagename 

We can save and install multiple packages using a single command by creating a bower.json file for your package with

$ bower init

Once we have got your bower.json file set up wecan simply execute the bower install command to install all of the packages we have specified in bower.json file.

And that’s the bower power!

BLOb

What is a BLOb?

BLOb, Binary Large OBject : is a collection of binary data stored as a single entity in a database management system. Blobs are typically images, audio or other multimedia objects. Database support for blobs is not universal. Blobs were originally just big amorphous chunks of data invented by Jim Starkey at DEC(Digital Equipment Corporation)

The four BLOB types are

  • TINYBLOB : A BLOB column with a maximum length of 255 (28 – 1) bytes. Each TINYBLOB value is stored using a one-byte length prefix that indicates the number of bytes in the value
  • BLOB : A BLOB[(M)] column with a maximum length of 65,535 (216 – 1) bytes. Each BLOB value is stored using a two-byte length prefix that indicates the number of bytes in the value.
    An optional length M can be given for this type. I
  • MEDIUMBLOB : A BLOB column with a maximum length of 16,777,215 (224 – 1) bytes. Each MEDIUMBLOB value is stored using a three-byte length prefix that indicates the number of bytes in the value.
  • LONGBLOB : A BLOB column with a maximum length of 4,294,967,295 bytes or 4GB (232 – 1). Each LONGBLOB value is stored using a four-byte length prefix that indicates the number of bytes in the value.

AJAX

What is AJAX?
AJAX stands for Asynchronous JavaScript and XML. It uses the XMLHttpRequest, which is a Javascript object used to communicate with server-side scripts. It can send as well as receive information in a variety of formats, including JSON, XML, HTML, and even text files.

AJAX’s most unique characteristic, is its “asynchronous” nature, which means it can do all of this without having to refresh the page. This lets you update portions of a page based upon user events.

With AJAX you can

  • Update a web page without reloading the page
  • Request data from a server – after the page has loaded
  • Receive data from a server – after the page has loaded
  • Send data to a server – in the background

Steps of AJAX Operation

  1. A client event occurs.
  2. An XMLHttpRequest object is created.
  3. The XMLHttpRequest object is configured.
  4. The XMLHttpRequest object makes an asynchronous request to the Webserver.
  5. The Webserver returns the result containing XML document.
  6. The XMLHttpRequest object calls the callback() function and processes the result.
  7. The HTML DOM is updated.

XMLHttpRequest Methods:

  • abort(): Cancels the current request.
  • open(method, URL, async, userName, password): Specifies the method, URL, and other optional attributes of a request.The method parameter can have a value of HTTP methods “GET”, “POST”, “HEAD”, “PUT” and “DELETE”.
  • send(content): Sends the request.
  • getAllResponseHeaders(): Returns the complete set of HTTP headers as a string.
  • getResponseHeader(headerName): Returns the value of the specified HTTP header.
  • setRequestHeader(label, value): Adds a label/value pair to the HTTP header to be sent.

XMLHttpRequest Properties:

  • onreadystatechange: An event handler for an event that fires at every state change.
  • readyState: Holds the status of the XMLHttpRequest. Changes from 0 to 4:
    0: request not initialized
    1: server connection established
    2: request received
    3: processing request
    4: request finished and response is ready
  • responseText: Returns the response as a string.
  • status: Returns the status as a number. eg. 200: “OK”; 404: Page not found

List of some famous web applications that make use of AJAX.
Google Maps: A user can drag an entire map by using the mouse, rather than clicking on a button.
Google Suggest: As you type, Google will offer suggestions. Use the arrow keys to navigate the results.
Gmail: Gmail is a webmail, built on the idea that email can be more intuitive, efficient and useful.

KnockOut It is

Knockout.js is a javascript library that helps you implement dynamic data hadling with more simplicity and maintainability. Since it’s  a pure javascript library it can work with any client-server technology.

Features:

  • Declarative data binding
  • Automatic UI refresh
  • Can be added on top of your existing web application without requiring major architectural changes
  • Very light weight library
  • Assists in dependency tracking between HTML element and the underlying data

How KO works?

Instead of manually tracking, each element of the HTML page that rely on the updated data , it will automatically update the DOM when any changes to the data model occurs.

Knockout is not a replacement of jQuery. KO provides a complementary, high-level way to link a data model to a UI. It doesn’t attempt to provide animation, generic event handling, or AJAX functionality. Knockout is focused only on designing scalable and data-driven UI.

MVVM Design Pattern

Knockout uses a Model-View-ViewModel (MVVM) design pattern in which the model is your stored data, and the view is the visual representation of that data and ViewModel acts as the intermediary between the model and the view.

Actually, the ViewModel is a JavaScript representation of the model data, along with associated functions for manipulating the data. Knockout creates a direct connection between the ViewModel and the view, which helps to detect changes to the underlying model and automatically update the right element of the UI.

Under the core of Underscore.js

So what is this Underscore?

Underscore is a JavaScript library that improves its robustness.

Collections: A collection can either be an array or an object. Underscore provides a lot of methods like

select:- selects  a set from array based on certain property

pluck:- plucks or extracts a specific property from each key-value pair of array

map:- map creates an array from a collection where each element can be mutated or otherwise changed through a function

all:- all is useful if you need to check every value in a collection passes a certain criteria.

Arrays : Methods like

uniq:-This method basically parses an array and removes all duplicate elements providing you with only unique elements

range:- range lets you create a ‘range’ or list of numbers. The method’s parameters  are, in order, starting value, ending value and step value. Using a negative step value leads to a decrementing range.

intersection:- This method compares two arrays to each others and returns the list of   elements that are found in all of the passed arrays i.e. an intersection in set theory.

Objects: Underscore provides various methods to clone, extend and other manipulate objects.

keys and values:- used when you only need keys or only values.

defaults:-This method is quite useful when you need to create objects with sensible defaults when one might not be used when creating it

Functions: Underscore has functions that work on functions. Most of the functions tend to be fairly complicated to explain.