Getting Started with AngularJS

Hello Everyone,

There are many javascript frameworks available such as AngularJS, Backbone, Knockout etc. And as an UI Developer, you must familiar with at least one of the javascript MVC framework.

Amoung all frameworks I am going with AngularJS first. There are may reasons that why AngularJS why not others:
Angular promotes all code being modular, reusable, and easily testable and also includes a single-page app routing system. Two-way data binding and directives for dom manipulation are only the start of what makes Angular awesome.

In my opinion, the angular approach is Pretty light, VERY clean and VERY simple in manipulation!

Now, the Angular community becomes very large and there are an overwhelming number resources available on the web. It may confuse you that from where and how to start learning AngularJS. The blog posts can be conflicting and confusing, and a simple google search can turn up 5 articles all describing the same thing in a completely different way. No worries about that as I found one awesome post from: http://www.ng-newsletter.com This post is such cool to start learning Angular step-by-step. They goes through the basic concepts of AngularJS in a logical, conceptual order. You can use this post as your guide and you’ll be mastering Angular in no time. Let’s get started!

Create simple Signature pad with HTML5 Canvas and jQuery Mobile

Hi Guys,

I am going to share how to create simple signature pad with new HTML5 canvas element and with jQuery mobile.

Find below HTML code for signature pad popup div with id=”divPopUpSignContract”. This popup div contains only HTML5 canvas element and two buttons for submit and clear. Continue reading

HTML5 Web Worker v/s setInterval()

Hi all,

In HTML5 we have new Web Worker feature but at first look I think its similar like as setInterval() then why they introduce Web Worker. But no there is one major difference between both is: In JavaScript all execution process remains inside a unique thread while Web Worker supports multi-threading.

Before the workers…

In JavaScript, a long running processing will freeze the main window and blocking the “UI Thread”. This is the main thread in charge of handling all the visual elements and associated tasks: drawing, refreshing, animating, user inputs events, etc. Sometimes you may notice that due to long JavaScript processing browser throws unresponsive script warning as:
5939882671_3bf264fd60

To overcome single thread limitation HTML5 is bringing us true multi-threading capability via Web Workers. We can execute the long processing script without freezing the main window. The Web Worker execution will not affect the main “UI Thread”.

When’s the good time to use Web Worker

Any script that you want to execute in the background is a good candidate to run as a Web Worker. Think about the sorting of large arrays, parallel processing, and I think you’ll see where Web Workers could be a big help.

Web Worker Limitations

Web Workers operate independently of the main browser UI thread so they’re not able to access many of its objects. One limitation is that Web Workers cannot access the DOM, so they can’t read or modify the HTML document. In addition, they can’t access any global variables or JavaScript functions within the main page.

Please click to know more about Web Worker: The Basics of Web Worker

What’s New in Bootstrap 3

Bootstrap is a front-end framework, which is basically just a few CSS and JavaScript files that help you build websites more quickly. In next project, I decided to use bootstrap 3 which was released few month ago. I would like to highlight the some of the things in Bootstrap 3 that have impressed me a lot.

Page Rendering is Faster

Bootstrap 3 introduced a new “flat” design. Yes, it’s trendy, but it dramatically improves the page rendering time, which is basically how long it takes the browser to “draw” all the elements on a webpage.

How much faster, exactly? Paul Irish demonstrates in this video:

Improvements in Grid System

Here’s the grid system documentation, but here’s the some overview:

  • .col-xs- When two or more of these columns are in the same row, they will always remain side-by-side, even on the smallest mobile screens. Most of the time you’ll want your columns to stack on mobile devices, so use this only when you have a very specific reason to maintain columns on mobile devices. These are also the only column type that cannot be nested.
  • .col-sm- These columns are collapsed to start, but become horizontal at widths of 768px and above.
  • .col-md- These columns are collapsed to start, but become horizontal at widths of 992px and above. These are a good default to use for just about every column. Once you have your rough layout, you can start to tweak things with some of the other column types.
  • .col-lg- Again, collapsed to start, but horizontal at 1200px and above. This is useful if you have an element that normally stretches the full width of the page, but might look ridiculous across a 27″ iMac screen.

Turn Off Responsive Features

Bootstrap 3 was designed with responsive approach, but if you have more specific needs and responsive design not need, you can always turn it off.

It’s not as simple as an off button, but just follow these step-by-step instructions and you can disable the responsive features of Bootstrap. Nice!

There’s such a nice documentation for migrating from Bootstrap 2.x to 3.0. and lots more cool stuff, so be sure to check out the Bootstrap site and read the docs. If you have any learnings or tips, share them in the comments!

Does Responsive Design Required???

Hi All,

As you all knows that there is a boom of responsive design and everyone wants to make their sites and web application responsive for all devices. But today I just go through the article – Why Responsive Design is wast of time, written by John Sonmez. As of now I’m thinking that Responsive design such a nice and great in web development. But after reading whole article I’m also little agree that for simple content site (like blog, company profile) Responsive Design is good but for a web application of any considerable size, responsive design is waste of time. Here are some reasons that John mention.

  • When you try to make a product that can do multiple things, the complexity of creating that product increases exponentially. Consider this. Which is more difficult to create: a car that turns into a motorcycle, or a car and a motorcycle?
  • There is another major reason why responsive design might just be a waste of time anyway: this should all be the browser’s responsibility, not the web developer’s. This is just like HTML5 brought us changes to HTML that required the browser vendor to start supporting many of the things that web designers were doing manually, like playing video and drawing with JavaScript, it is very likely that eventually the responsiveness of responsive design will be relegated to where it actually belongs anyway, the browser and the markup itself
  • Things are changing rapidly. Mobile devices are getting bigger screens and higher resolutions and becoming much more powerful. While two years ago it was a pain to visit a desktop site from a mobile browser, it is much less painful now. With latest smartphones, I hardly feel the difference at all and I even find myself specifically requesting the desktop version of a mobile site from time to time.

My opinion is that if you have simple content site (like blog, company profile, portfolio) than you should move to responsive design. But if you already have huge size complex web application than I think you should not waste your time to make it responsive.

What do you think? If you have a convincing argument as to why responsive design is worth the effort or why it isn’t as much extra effort, I’d love to hear it. Let me know in the comments below.

jQuery – Custom Filters

Hello
Sometimes we may need to collect html elements with certain filter which jQuery doesn’t provide. At that time we can simple create custom filters in jQuery. I found such a nice blog – Creating Custom Filters in jQuery. Let’s look how to create custom filters in jQuery.

<script>
    $.expr[':'].placeholder = function(elem) {
        return $(elem).attr('placeholder') !== undefined;
    };
    
    $(document).ready(function() {
        console.log($(':placeholder').length);
    });
</script>


A filter is nothing but a function that accepts as an argument the current DOM element to process and needs to return true to keep it in the collection, and false to discard it.

“:” is a property of jQuery’s “expr” attribute. And it containing jQuery’s native filters and you can use it to add your own filter at runtime. Inside the function definition, we just have a single statement that checks if the current element has the placeholder attribute set, and if so, it returns true to keep the element.

For more on creating custom filters in jQuery please go to: http://aurelio.audero.it/blog/2013/09/05/how-to-create-custom-filters-in-jquery/