Sandeep Kumar Patel's Blog, page 7

Enabling Web Component Feature in FireFox

                                                           
On this day 12th June 2014, Web Component Feature are yet to come in the browser.It is now is an Experimental feature for many latest browser.document.registerElement() function is not a default DOM function as of today in Firefox.In this Demo, "We will see How to enable the web componen...

Google Currency Converter Demo With Eclipse Java Project

Google provides a Currency Converter API services for Consumption by Client Application.The link for this library is listed below:-           https://code.google.com/p/currency-converter-api/The maven dependecy tag to include this library is listed below.<dependency>
<groupId>com.tunyk.currencyconverter</groupId>
<artifactId>currency-converter-api</artifactId>
<version>1.0</version>
</dependency>

In this Demo, "We wil...

Web Sockets with Socket.IO And Node.JS

Socket.io provides an web socket infrastructure using Node.JS.It can be installed using Node Package Manger(NPM) by issuing npm -g install socket.io.You can check my previous post to install Node in your machine.In this Demo, "We will crate a simple Web Socket which will write my name on the socket and the client will read it and render it on the browser".The code for web socket server is present in MyNameSocketServer.js file and listed belowvar io = require('socket.io').listen(80);

io.so...

Exploring Parallel JS Library For Multi-Core Processing

                                                        Parallel.js is a JavaScript library for Multi Core Processing. The library can be found form the below link:-             http://ad...

Chrome FPS Counter

                                     
GPU stands for Graphical Processing Unit.This Unit of the computer is responsible for optimal rendering of graphics items like images and animation on the screen.Traditional HTML and CSS used to be rendered by the CPU only.But In latest UI specifications like CSS3 there are some properties which can trigger the GPU to work.The major advantage of this technique is...

Jquery Template With Bootstrap Panel

Jquery Template(jquery.tmpl.min.js) can be downloaded from following link,             https://github.com/BorisMoore/jquery-tmplIn this Demo,"We will see how jquery template work.The data is JSON data and loaded through AJAX call".The project Structure:
The tempate use ${} for substitute real value in markup.The tmpl() create the template build as Jquery function to attach data.The JSON file used for the demo is in demo.json file.It is listed below. [
{
"titl...

Set up Bootstrap SCSS In Project Using Bower

BOWER is the package manger for web projects.Using Bower We can install different library to our project.In this Demo, " We will learn to install Bower using NPM. Followed by installing Bootstrp SCSS version and using it  in a projec t".Bower Installation is done using npm install -g bower.Check the below screenshot. When the Bower will installed successfully the screen will look like below. Installation of Bootstrap component can be done using command bower install twbs/bootstrap-sass....

Upload Image And Preview in Browser

  In this Demo, "We will upload a image file to browser and preview it without uploading to a server" .The steps to preview of an images:-            1. Adding a change Event to "input type file" and listening in a callback function.
            2. Initialize the Reader.
            3.Attaching "onload" event to reader and in callback change the SRC val...

Getting Started With Foundation Framework

ZURB provides a Foundation framework for Mobile First Designing.Some Beneficial Features :-                       -- Semantic Code.                       -- More Mixin For Use.                       -- More Place Holder Classes.The Foundation can be downloaded from the following URL:-          ...

Jquery Attribute Based Element Selection

Jquery provides element selector using attribute condition.This is very handy for developers for element selection from document.In this Demo, "we will see a how these attributes selector can be used for DOM element selection" .List of these attribute selector are as below,[<attributename>]
Find All element having a attribute named <attributename>.
[<attributename>   =   <"value">]
Selects elements that have the specified attribute with a value exactly...