Monday, March 9, 2015

AngularJs Data Binding

AngularJS takes a different approach. Instead of merging data into a template and replacing a DOM element, AngularJS creates live templates as a view. Individual components of the views are dynamically interpolated live. This feature is arguably one of the most important in AngularJS and allows us to write the hello world app we just wrote in only 10 lines of code without a single line of JavaScript.

This feature works by simply including angular.js in our HTML and explicitly setting the ng-app attribute on an element in the DOM. The ng-app attribute declares that everything inside of it belongs to this Angular app; that’s how we can nest an Angular app inside of a web app. The only components that will be affected by Angular are the DOM elements that we declare inside of the one with the ng-app attribute.

AngularJS 'Hello world' example

<!DOCTYPE html>
<html ng-app>
<title>Simple app</title>
<input ng-model="name" type="text" placeholder="Your name">
<h1>Hello {{ name }}</h1>

Wednesday, January 14, 2015

Getting started with AngularJs

I have been working as UI developer for previous 7 years on various projects with server side languages like Java, .net, PHP. Seriously telling you before jumping into AngularJs my UI developer life was very easy, but as soon as I adopted AngularJs my work load and responsibilities increased more than double. AngularJs has reduced server side coding and made it possible to manage lots of backend efforts on frontend, but working on AngularJs is really a great experience. I bet after learning AngularJs you'll forget other scripting languages.

AngularJs has enabled us to communicate between server and client side without using JSP, XSLT, ASPX(.net) pages, AngularJs has made it as easy as developing a complete project with simple HTML, CSS and JavaScript.

AngularJS makes it incredibly easy to build web applications, it also makes it easy to build complex applications. AngularJS takes care of advanced features that users have become accustomed to in modern web applications, such as:
  • Separation of application logic, data models, and views
  • Ajax services
  • Dependency injection
  • Browser history (makes bookmarking and back/forward buttons work like normal web apps)
  • Testing
  • And more


How Is It different?

In other JavaScript frameworks, we are forced to extend from custom JavaScript objects and manipulate the DOM from the outside in. For instance, using jQuery, for

example suppose we have following HTML code, and we want to add the text 'Naren' to the span 'Hello' when entered the value in text box:
    <input id="name" type="text" />
    <span id="greeting">Hello</span>

Now look into jQuery way:
//look up the input element
var name = $('#name');
//look up the output element
var greeting = $('#greeting');
//listen for keyboard events
name.keyup(function() {
        //update the output element with the new input
        greeting.text('Hello ' + name.val());

Now with AngularJs:
<div ng-app>
    <input type="text" ng-model="name" />
    <span>Hello {{name}}</span>
That's it no more lines of extra script.

Readers! keep reading my posts there is lots of UI Developr stuff to be share with you.

2 days' AngularJs training classes are going on with me for professional UI Developers. You can enroll by a phone call at +91 987 143 3826 or eMail me at or visit

Friday, February 7, 2014

Why e-Learning?

We at 'OyeTrade eLearning development center' are the team of eLearn professionals developing eLearn and mobile learning applications for couple of years. Business owners always raise one common question 'why should I convert my classroom courses into eLearning?'. This blog post is answer to their 'Why?'.

Let’s re-examine the basic benefits of e-learning. With the high cost of transportation as well as hectic work and family schedules, many people who have been slow to take online courses are signing up for the first time. You may be wondering what advantages e-learning has over traditional face-to-face courses.

The major benefits: accessibility and convenience. Your online course can be logged into at any time and at any place. This is a huge advantage over traditional face-to-face courses that are held in a classroom or meeting place, especially if you have a busy life that required travel or many family or work commitments.

Further, the convenience of the online course really can’t be matched. Needless to say, none of that is true if you’re in a situation where you do not have high-speed internet, or your connection is limited or intermittent. But, assuming that you’ve got a great connection and that it’s always available, you’re in fantastic shape with an online course. You can log in after the kids are in bed. You can work during your lunch break. You can work from your hotel room or an airport or a restaurant offering wifi connections. There is truly nothing like it.

But, what about the other benefits? Surely there is more to life than convenience and access. How about the learning? What about the idea of connecting with other students? How about the intangible, but very valuable feelings you get when you join a college or university community? If you take an online course, will you be missing out on school spirit, study buddies, lively in-class discussions, and passionate discussions over coffee and pastries at the local purveyor of fine coffee drinks and bakery items?

E-learning has come a long way from its earliest origins. Back in its inception, online programs often offered courses that got the job done, but they weren’t very exciting. You might write responses to questions for each lesson, the e-mail them to your instructor. You might read online material, listen to audio, then take interactive quizzes, which were automatically scored and entered in a gradebook. Alternatively, you might watch videos of recorded classroom lectures, and then take a test over the contents of the lecture and readings. Again, the methods got the job done, and they pushed content to you, but they weren’t very exciting.

What has changed?

First, there’s been a big shift in the way that people envision online courses. Before, there was always the notion of “pushing” or “delivering” content. Course designers thought that if they could “push” or “deliver” content to the learner, everything would be okay. The leaner would soak up the content, and then respond to it in a way that would reflect how much he or she learned. That might have worked for some learners, but it certainly did not work for all.

The other eLearning benefits are...
Improved training costs.  Producing learning content is time consuming whether it’s online or not.  With elearning, each time the course is accessed your return on investment improves because you are dividing the fixed production costs by number of uses.  You also have savings through decreased travel, reduced material, and hopefully improved (and more efficient) performance.

Decreased material costs.  Let’s say you have to train how to arrange equipment in a sterile environment like an operating room.  If you had to use the real environment, it would be costly.  Even setting up a fake environment has material costs and labor.  By creating the environment online and letting the learner practice, you never have to worry about the costs associated with set up, use, and clean up.

Increased productivity.  Because elearning is not bound by geography or time, you can control training’s impact on production by training people during down times.  In addition, with the current economy, you’re asking people to do more with less.  So elearning is a great way to give them the tools and skills needed to enhance their performance.

Standardization.  You may have a great facilitator, but that’s no guarantee that the courses are presented the same across sessions.  Elearning allows you to create a standardized process and consistency in the delivery of content.  It also compresses delivery time.  I’ve combined elearning courses with facilitated sessions.  Elearning delivered consistent content.  Live sessions were interactive case studies that applied the information.

Freedom to fail.  Let’s face it, real learning requires some failure.  But no one likes to fail in a classroom full of other people.  Elearning lets you fail without fear.  This encourages exploration and testing of ideas.  With the right feedback you create a great learning environment.  Worst case, you can always start over.  Something you can’t always do in class.

Personalized learning.  Look out the window at your parking lot.  My guess is that you’ll see a dozen or more different cars.  They all do the same thing, yet we have personal opinions about what we want to drive.  The same for learning.  Learners want control.  Elearning allows you to offer control to the learners in a way that classroom learning doesn’t.

Saturday, January 25, 2014

List of the Top Free Web Directories

This comprehensive web directories list isn't set in stone, and will probably need to be updated on 3-month intervals, but it does cover a good majority of the top paid directories you should initially target to submit your site(s) too.

BestMillionLinks ( - The best and Most Powerful website directory for your Search Engine Optimization Strategies. Free and easiest way for website search engine optimization. This help you to create search engine friendly social profile page to promote your website on social networking websites and blogs.

DMOZ ( - The site is run by a group of volunteer editors. This free directory is a "must submit". The SEO and traffic rewards are very good if you happen to get a listing. .

Rakcha ( - Online directory of human edited website listings covering a wide range of topics and global locations. Submit your site and increase your online visibility!

Joeant ( ) - is about providing a directory of quality sites for Internet users. Our goal is to list the best sites for a wide variety of topics giving our users the most relevant results for their searches.

Link Centre ( - Well categorized and organized. The site is very well-established. The site has existed as a directory since December of 1997. Registration is required. They do not provide enough information to allow us to to determine if free submissions are actively being listed.

All Business Directory ( -  A well-established, uniquely designed business directory that appears to be very well taken care of. They have been consistently adding new listings since at least mid 2012. The directory itself has been around since 2005.

The Great Directory  ( - A long-time directory with a unique category structure. They have been actively adding new listings for the last year. They do a very good job of editing submissions. No deep links allowed with a free listing.

Most Popular Sites ( - MPS is designed to provide your site with more visibility. All our pages are search engine friendly and will have links back to your home pages to improve hits on your site with all search engines.

World Site Index ( - WorldSiteIndex is a searchable human edited web directory of English language sites organised by categories, and optimized for use on mobile devices! WorldSiteIndex also brings you news on what's trending & being discussed about search & social media on the web.

Data Spear ( - is a joint venture between GoGuides, Inc. and NAIS, Inc. North America Internet Services is in charge of all daily operations. This includes reviewing submissions, editing listings, creating topics, etc. Servers and upstream are provided by the GoGuides Network and GoGuides staff also provides daily support at various levels in the directory.

TWD ( - Top Web Directory is a Search Engine friendly Business Web Directory and includes many categories covering the world of internet. The main aim of this business directory is to list quality websites and give the users hand picked quality results. The business directory is one of its kind as all the rankings are acquired naturally. All categories have their own individual article helping your site to gain further value. Top Web Directory also has a Webmaster Blog and a Theme Critic section to add a little information adding more value to the listed resources.

Tuesday, January 14, 2014

How to be a successful freelancer

Freelancing opportunities are growing rapidly across industries. Find out how to make the most of this trend.

When Sahil Manekia (see details below) returned to India after a 4-year stint in the US, he was expecting to land a good job with a leading organisation. However, the data analyst who specialises in assessing the impact of non-profit ventures, drew a blank.

"I wanted to focus on non-profit projects, but the jobs on offer did not match my skill set," says the 29-year-old Mumbai resident. Manekia now works freelance for companies to assess the impact of their corporate social responsibility initiatives.

In another part of India's financial capital, corporate trainer Maneesh Konkar is preparing a PowerPoint presentation for a workshop later during the month. A freelancer, 43-year-old Konkar conducts workshops for the sales teams of companies ..

You are your own boss and get to draw your own schedule. However, it is not a cakewalk. "While being on your own offers you the flexibility of working in your own fashion, it is certainly not a bed of roses. One has to work very hard to establish oneself and, subsequently, get a regular income to be successful," says Aditya Narayan Mishra, president (staffing), of head-hunting firm, Randstad India.

Ref :

Wednesday, November 20, 2013

CSS hack for Firefox

Using conditional comments it is easy to target Internet Explorer with browser-specific CSS rules:

<!--[if IE 6]>
...include IE6-specific stylesheet here...

Sometimes it is the Gecko engine (Firefox) that misbehaves. What would be best way to target only Firefox with your CSS rules and not a single other browser? That is, not only should Internet Explorer ignore the Firefox-only rules, but also WebKit and Opera should.

<!DOCTYPE html>

<style type="text/css">
@-moz-document url-prefix() {
    h1 {
        color: red;

<h1>This should be red in FF</h1>


It's based on yet another Mozilla specific CSS extension. There's a whole list for these CSS extensions right here:

Tuesday, September 3, 2013

Learn How to Create jQuery Dialog Box

A dialog is a floating window that contains a title bar and a content area. The dialog window can be moved, resized and closed with the 'x' icon by default.

If the content length exceeds the maximum height, a scrollbar will automatically appear.

A bottom button bar and semi-transparent modal overlay layer are common options that can be added.

<!doctype html>
<html lang="en">
<meta charset="utf-8" />
<title>jQuery UI Dialog Box</title>
<link rel="stylesheet" href="" />
<script src=""></script>
<script src=""></script>

//by Narendra Singh -,
$(function() {
$( "#dialog" ).dialog(
    //basic attributes
    position: [225,30],    //x,y position
    width: 800, //dialog width
    height: 300,
    modal: true, //if this is set to 'true' the dialog'll be open on grey overlay bagkground
    title: "My Dialog", //dialog title
    dialogClass: 'ffsWarningDialog no-close', // add runtime additional CSS class
    resizable: false, //true or false
    draggable: true, // true or false  
    //end basic attributes
    //animation effect
    show: {
        effect: "blind",
        duration: 1000
        hide: {
        effect: "explode",
        duration: 1000
    //end animation effect
    //custom buttons
     buttons: {
        "Delete all items": function() {
        $( this ).dialog( "close" );
        Cancel: function() {
        $( this ).dialog( "close" );
    //end custom buttons
    <div id="dialog">
    <p>Want to learn more about the dialog widget? Check out the <a href="" target="_blank">API documentation.</p>