Sandeep Kumar Patel's Blog, page 2
February 11, 2015
Getting Started With Lodash Utility Library
lodash provides a utility library for JavaScript.it contains a set of methods and properties to work with data.lodash provides Array, Chain, Collection, Date, Function, lang, Number, Object, String ,Utlity, Object, String, Methods and Properties.documentation for lodash library can be found in following link https://lodash.com/docs.In this demo, “We will see some examples of using lodash utility methods”.The code for this demo is as follo...
February 10, 2015
ReactJS Debugging Addon For Chrome Browser
ReactJS provides developer toolbar for debugging ReactJS application.You can install the addon by using following link.In this demo, “We will learn debugging ReactJS application using this add-on”.For debugging purpose we have created WelcomeMessage react element.The code for WelcomeMessage element is embedded in JSBIN link:
JS BinThe code for WelcomeMessage element is as below:<!DOCTYPE...
February 9, 2015
Javascript Hashchange Event Demo
The hashchange event is very useful to detect the changes in URL and helps in displaying custom content in the browser.hashchange event help in implementing a routing logic.In this demo,”We will implement hashchange event callback and render different content on browser”.The browser support for on hashchange event is as following screenshot taken from can i use online tool.
we can attach callback function by window.onhashchange() or window.addEventListener(“hashchange”,callback).The followi...
January 11, 2015
PolymerJS Auto Binding Example
PolymerJS provides an enhanced version of Template element with auto binding.In this demo,”We will check an use of auto binding for a template element”.Below code shows an example of IS attribute with auto-binding value.Normally template elements are not visible built by using auto binding, on page load the template HTML content is makes visible.<!DOCTYPE html>
<html>
<head>
<script src="http://www.tutorialsavvy.com//cdnjs.c......
December 18, 2014
ReactJS Initial State Example
getInitialState() is life cycle method of a ReactJS component. The state can be updated using setState() method.This method takes an JavaScript object. In this demo, “We will learn how to create a initial state object and how to change the value of the state”. Below code contains a react component having two buttons and a text string.The default color of the applyState is red.When user click these button the state value gets change to blue and vice verse.<!doctype html>
<html lang="en">...
December 5, 2014
Developing and Styling Shadow DOM Elements
:host and ::shadow pseudo selector can be used to style the HTML element inside shadow root.A shadow root can be created using createShadowRoot() method.In this demo, “We will create a custom element and style the HTML present inside shadow DOM”.A custom element can be referred in 2 ways.Inside its template it can be targeted using :host pseudo selector and from outside(document) usin...
December 2, 2014
AngularJS copy() and extend() Method Example
AngularJS provides copy() and extend() method for object manipulation.angular.copy(source,destination) method supports deep copy where destination object elements are deleted and sour...
November 26, 2014
ReactJS : Getting Started
ReactJS is the library form Facebook to develop component.
JSX(JavaScript Syntax Extension) is the library for transforming XML based syntax code to pure JavaScript.
In this Demo, “We will create a sample application using ReactJS and JSX”.
A JSX script will have type text/jsx.
A annotated comment need to be added in beginning of the script to indicate that this block is for JSX transformation.The JSX comment is as follows /*** @jsx React.DOM */.
A ReactJS component can be created using createCla...
November 25, 2014
AngularJS Utility Methods
AngularJS provides many utility method like isObject,isString,isDefined, etc to check the type of the input.In this demo, “We will checkout some utility methods that returns BOOLEAN values on call”.All these method has similar signature like isXxxxx().Below code shows the use of some utility methods that are present inside the angular ob...
November 24, 2014
AngularJS ngCloak Example
AngularJS provides ngCloak directive to control the flickering issue when application is bootstrapping.
AngularJS adds the ngCloak class to the element if the application is not bootstrapped and removes this class once the application is bootstrapped and ready.
In this demo “We will see the use of ngCloak usage to an application”.
Below code shows the uise of ngCloak usage.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script...
