Monthly Archives: May 2015

If you have 10 different stylesheets for a given design, how would you integrate them into the site?

If you have 10 different stylesheets for a given design, how would you integrate them into the site?

Every CSS file we use on a website will add time to our page load speed. CSS will not care where it is at or how many files it is in. However in most cases we can have a combination of two or more CSS files together.Developers handle this situation in multiple ways. Few of them simple combine by copy pasting one from another.

The other possible way to combine CSS files using YUI Compresser, that combines CSS and minimizes code and is good for performance. Few handle this by using build tools like GRUNT.

One CSS file that contains all the styles of the separate CSS files combined will work just as well and improve the page speed. Putting all of the CSS into one file substantially reduces the amount of time it takes to load our web pages because we are reducing the amount.

What are downsides of a CSS “reset”? What should be used as a better alternative?

What are downsides of a CSS “reset”? What should be used as a better alternative?

CSS Reset is file (with extension .css) which helps in reducing browser inconsistencies by creating common defaults styles for all browsers.

Downsides of “reset” file:
i) Creates new defaults that you may or may not want (unwanted code).
ii) Many a tiomes, developers end up re-writing the new defaults by styling many of them manually. Sometimes redundant code may creep in.
iii) It adds unnecessary load time.
iv) Developers own styles often gets overwritten,So a precautionary code has to be put in place (more code!)

A better alternative is to use Normalize.css

A Normalize CSS is acustom CSS file that will render all elements that comply with modern standards and are consistent. Other CSS files must not precede the normalize.css

The positive points:-
• Useful defaults are preserved.
• For a big range of elements, it normalizes the CSS
• It will fix bugs and common browser inconsistencies.
• Improves usability.
• Detailed comments explain what the code does.

What is the Difference between Grunt, NPM, Package and Bower?

What is the Difference between Grunt, NPM, Package and Bower?

Grunt: A Java Script task runner which can performrepetitive tasks like compilation, unit testing, minification, linting, etc to make our job easier.

NPM: Apackage manager for JavaScript. It manages dependencies for an application. It also allows users to install Node.js applications / modules that are available on the npm registry.

Package.json is a document you need to know about what application/modules you need to install. The most important things are the name and version fields, without whichthe package won’t install without them.

Bower works by fetching and installing packages from all over, taking care of hunting, finding, downloading, and saving the stuff you’re looking for. Bower keeps track of these packages in a manifest file, bower.json.

Do we repopulate or recreate the view in backbone or just get rid of the objects?

Do we repopulate or recreate the view in backbone or just get rid of the objects?

It all depends on the Backbone application an individual is creating. We have to take into consideration of the lifespan of the objects created or involved. Because if the scope of the object is going to be for the entire application, then it is better not to kill the objects, which are going to be used. And it is better to delete the one’s which are of local scope / temporary. Also, repopulating the view in backbone suits well in the case when the data objects are dynamic (like just a data-refresh).

What do we do when elements appears as uncomplied/raw elements before page is rendered (like a blink or flicker) in angular Js (Angularjs – ng-cloak/ng-show elements blink)

What do we do when elements appears as uncomplied/raw elements before page is rendered (like a blink or flicker) in angular Js (Angularjs – ng-cloak/ng-show elements blink)?

To prevent the Angular HTML template from being displayed by the browser in uncompiledform while your application is loading, we use the ngCloak directive.

Adding the “display: none” property to the CSS might not be enough to stop the flickering / blink of the elements.If you are loading angular.js in the body the templates aren’t compiled soon, so to prevent the blink we can use the ng-cloak directive and include the following in your CSS:

[ng\:cloak], [ng-cloak], .ng-cloak {

display: none !important;

Difference between: function Person(){}, var person = Person(), and var person = new Person()?

Difference between: function Person(){}, var person = Person(), and var person = new Person()?

There are three different syntax we can use fordeclaring functionsin java script
i) Function Declaration
function Person(){

A Function Declaration defines a named function variable without requiring variable assignment. Theyare declared as constructs which are standalone and cannot be nested within non-function blocks.

ii) Function expressions:
var Person = function(){
A function expression looks similar to function declarations, except that the function is assigned to a variable name. The function name can be optional. If the name isn’t given, then we can term it as an anonymous.

iii) Function constructor:
varmyPerson = new Person();
Such a syntax declaration is used when creating an instance of a Class(Constructor). Here, we pass in an unlimited number of arguments in the front and use the keyword “new”.

Twitter bootstrap with SASS

Twitter bootstrap with SASS

In the last few years, Twitter Bootstrap is found to be the most effective CSS Framework on the web for structuring a website with responsive layout.  There are other CSS preprocessors, such as SASS and LESS,  that are used to develop web applications.They are both CSS based pre-processor languages  but the complexity of app handled by these frameworks are different.

Many UI developers are more familiar with LESS rather than SASS. Though Twitter Bootstrap with LESS is great to produce a very polished looking site in terms of layout, and scalability,reusability and much more, using the SASS version is even better is an argument that other group of UI developers debate about – because you can customize it much more easily.

Let’s explore more in detail why SASS is better than LESS.

  • Writing reusable methods and using logic statements is what makes SASS extremely powerful ; ie. conditionals and loops. Of course, LESS can do a lot of these things, but in a quite unproductive way. Both SASS and LESS share a common set of built-in functions for colour manipulation, mathematics, and parameter lists.
  • SASS and its companion library Compass helps CSS write more efficiently. LESS also have some libraries battling to be the best, but SASS libraries has got better performance. For instance, Compass updates will just come automatically in CodeKit, or we can use a Gem which is easy to update, while LESS mixins you’ll have to manually update a file. Features like dynamic sprite-map generation, legacy browser hacks, and cross-browser support in SASS is what makes it great.
  • In addition, Compass allows users to include third Party Frameworks like Blueprint, Foundation, Bootstrap, Etc by which you can leverage your most desired framework without the mess of using multiple tools.
  • Things in SASS that cannot be done in LESS:

    There are different styles (e.g. recursion in less, iteration in SASS) but these are the features that aren’t yet available in LESS in any form. SASS seem pretty equivalent, the most important difference being in their implementation of extends.
    1. @extends
    2. placeholders – planned for LESS as extends on mixins
    3. variable defaults
    4. data-types and handling of lists (limited support to less)
    5. @debug and @warn
    6. mixin @content blocks
    7. function directives – in discussion for LESS (but very low demand)
    8. output styles
    9. property interpolation
    10. auto prefix replacement

    Using SASS Functionalities with Twitter Bootstrap

    In practical terms, one can simply add Bootstrap classes to HTML elements to create a website layout. However, when using SASS it is also possible to use some of its functions to achieve a more pristine and semantic HTML organization rather than just getting congested with redundant class names.

    Most people agree that SASS and bootstrap are a great combination. With Bootstrap a functioning website can be creased in several hours. Further, with features like @extend and @include in SASS, this can help one write more pristine, easy to maintain and programmable CSS.

    Using SASS, we can add Bootstrap classes to the HTML elements and make the website layout in more semantic structure rather than being stuffed with meaningless class names. Bootstrap and Sass definitely make a great combo. With Bootstrap, you can build a functioning responsive website in just a few hours. And features in Sass like @extend and @include can help us write leaner, programmable, and maintainable CSS.

    Extension of the Grid

    When using Bootstrap, you usually insert its class elements and selectors into your mark-up to develop. SASS has one elegant method of erasing the clutter with the SASS @extend directive.

    Styling Bootstrap with Variables

    If you notice the ./vendor/bootstrap/_variables.sass/ they all appear to have a !default after them. This is an indication that SASS will NOT overwrite this variable once it has already been defined. This will permit you to develop your own personal ./libraries/_variables.sass file. You will be able to include them in the upload order before Bootstrap and hence have effective control of these variables. This will offer you a way to style Bootstrap colors and other options.

    Features of SASS:
    • Fully CSS3-compatible
    • Language extensions such as variables, nesting, and mixins
    • Provides better support to write nested media queries
    • Many useful functions for manipulating colors and other values
    • Advanced features like control directives for libraries
    • Well-formatted, customizable output
    • Firebug integration
    • Syntax

    SASS is an excellent scripting language for web app development and using it with Twitter bootstrap makes web development even easier and enjoyable. With Bootstrap, you can build a functioning responsive website in just a few hours. One great thing about SASS is it has built in CSS color math. One can automatically change the color of the menu and the hover state manually. Another great way to use SASS is you can organize all of your CSS into a single file and switching from LESS to SASS also provides a significant increase in CSS compilation speed. It simply adds more power and better organizational tools, making it an easy choice as a go-to replacement. For developers adopting these frameworks, it is essential to understand the paradigm shift these frameworks bring to client side application development.

    I have chosen the wrong JS framework, now what?

    I have chosen the wrong JS framework, now what?

    Over the past few years there have been drastic changes in web development, lot of JavaScript frameworks have popped up. Some stayed and some have gone into the dark. Oftentimes, developers either choose the wrong framework or use the right framework incorrectly. Choosing the wrong JS framework is something that occurs often but you can avoid by simply educating yourself on the various principles, methods, and practices that you can use to make sure your framework has the functionality you need without bloated code to slow you down.

    Downsides of choosing the wrong framework:

    With demanding additional functionality, developers are finding quite comprehensive to handle the architectural challenges and implement their ideas with frameworks which are limited. Though they opted for wrong framework to get their things done, it is not fully secure and 80% aren’t delivering what should have been. One of the most frustrating thing is they get in trouble building applications which is far more time-consuming. By choosing the wrong one, they are finding the projects weighed down by restrictive assumptions and masses of code that they don’t understand. There is often a large percentage of code that will never be executed, or find dependency on obsolete or legacy code.

    Generally there are various integrated set of tools to enable developers to develop for different types of web applications. This include usage of various javascript frameworks like AngularJS, Backbone.JS, EmberJS, and Nodejs to develop more flexible and less error-prone applications in a more effective way. Also developers given too many choices have a tendency to either not choose anything at all, or to be deeply dissatisfied with their choice. This particularly applies to choosing frameworks, because there are just so many choices, and the cost of switching is painfully high. But do we have a choice? What are the precautions one should follow ahead of choosing a framework that is not the scope of this article. The point is how to handle the wrong framework, a.k.a, OMG! moment. Let’s see what’s the opinion of developers we came across in conferences/casual encounters.

    The OMG! Moment

    Most of the cases, a developer will know that you chose a wrong framework only after 30%-40% of the application implementation or exposure. He/She would be stuck at a point where either the performance degraded or end up with too much of stale code or helplessly stuck with adding one more custom-helper function to the big list of “ many custom-helpers()”. That’s the OMG! moment where one would bang the desk cursing the framework (Argg!). That’s it, that’s the point where you should immediately re-think. Lot of us move ahead trying to find a work-around “fix”. Don’t! It’s going be a lot of struggle later on.

    What choice do we have?
    Two approaches brand new framework or write a custom library that would enhance the current framework

    Yeah, true we may not have too much choice at that moment, but if and (only if) you have enough resources/time at hand. Have certain % of the time to explore other JS frameworks Let’s come to “a framework evaluation” topic in a moment. Once we narrow down on a JS framework, do couple of POCs (Proof-Of-Concept) that addresses the current concerns or a “fix” is readily provided/available in the new JS framework. It’s going to seem like an herculean task, but lot of developers have secretly agreed that it’s one of the best approach. Identify the components that are already developed and that are in the pipeline. Take a sample complex component and implement it in the new framework. Perform a quality control test or a load test with a (dummy) high volume POC.

    Next, have a proper transition plan in place. Check whether such framework has enough support, documentation and resource talent available. Spend more and more time research the forums about problems developers are facing with the framework.

    These frameworks add the value based features in different websites and web application development process. Most of them will have unique features specific to that particular framework in terms of platform compatibility, portability, database compatibility, general performance, security, web services, language support etc. and are suitable for key development functions. So before diving in, it’s necessary to have an idea of the most commonly used frameworks that can significantly result in more secure applications. When choosing the correct framework it important that the developer is knowledgeable about the different frameworks in terms of ease of use, rapid application prototyping, scalability, code maintenance and look and feel.

    Considerations When Choosing a framework.
    • Choose a framework that can be tailored and extended.
    • Stick to framework ground rules: follow the documentation and don’t overwrite framework code.
    • Build a framework by means of a prototype: a static internal website that includes all the page types and elements you need.
    • Focus on quality assurance during the development process, and quality control to find and fix framework issues.
    • Diligently maintain and update your framework, whether it’s for internal or external use.
    • Anchor your documentation right where development happens.

    However, each project is examined from several different perspectives including maturity, size, dependencies, interoperability, and features. If a developer does find him/her self using the wrong framework, the best solution would be to figure out which one you absolutely need, that way the mistake won’t be made again. Developers that are knowledgeable about the various frameworks and how they operate have no problem choosing the correct one and avoiding the wrong one, depending on what type of project they are working on. So take the time to educate yourself, that way you won’t find yourself backtracking and or redoing application from scratch.

    ES6: Powerful upgrade for JS

    ES6: Powerful upgrade for JS

    Technically, ECMAScript (ES) is the language attempted to standardize the scripting languages such as JavaScript. Over the years, different versions of ES evolved. ECMAScript 6, code named “”, has gained significant traction that has got many enhancements and features that makes JavaScript code easier and maintainable. ES6 specs are still under experimental stage and a stabilized version is not officially out. In the ECMAScript 5 version of JavaScript, there are several new capabilities to the language without many changes in syntax. For instance, ES5 lacks sub-classing an array. Later ES6 was upgraded to tackle some fundamental language issues that require syntax changes that were needed to be fix, along with some new features to address shortcomings in ES5. Let’s investigate the differences between ECMAScript 5 and 6.

    ES5 IMAGE ECMAScript 5 focus seemed to be on defining the so-called “magical” parts of JavaScript such as read-only properties and non-enumerable properties while setting the path forward to remove “the bad parts” with strict mode.

    First let’s understand what are the few interesting features of ES5 include:

    • newer object model, using which, newer objects can be created easily and their extensibility can be controlled.
    • native JSON support, which includes methods like JSON.parse( ) and JSON.stringify( ) which remove dependency on external libraries for working with JSON.
    • Strict Mode- Which makes the programs simpler and less error-prone.

    Much of developer’s annoyance usually has come from lack of tooling to scale JavaScript applications, but that is being rapidly addressed with frameworks like AngularJS and JS-based language like TypeScript. ECMAScript 6 is ready to alter the way we gaze at client applications. Web development is continuing to evolve as we see more adoption of new gears that enable JavaScript-based development for both web and mobile devices. ES6 will tackle many of the core language shortcomings addressed in many frameworks and ES5.

    OK So What’s New?

    ES6 has got new features which includes Classes (‘Class’ is a keyword in ES6), Arrow Functions, Modules, Block Scoping, and Promises. Developers are particularly excited at the features available in ES6 to reduce many aspects of coding. In ES6, built-ins like Array, Date and DOM Elements can be subclassed.

    As such, several workarounds in ES6 have emerged which gave developers some great new options. Several existing JavaScript module systems and frameworks (AngularJS,Node.js and Require.JS ) support ECMAScript 6 via transpilers ( Typescript, Traceur, and 6to5).

    Let’s dig into each of the above mentioned features in ES6:

    Arrow functions – Arrow functions is a short cut to create an anonymous functions and make development more productive. When it comes to defining the functions Arrow functions are used for callbacks. Below example shows a regular way vs arrow functions.

    var createGreeting = functiob (message, name) {
    return message + name;
    var arrowGreeting = ( message, name) => message + name;

    Block scope(const, let, and functions)- let and const behave similarly in the sense that both are block scoped. Const values are read only and cannot be redeclared later on.

    for (var i = 0; i < 5; i++) {
    var j = i + i;
    console.log(j); //  8
    for (var i = 0; i < 5; i++) {
    let j = i+ i;
    console.log(j); //  Reference Error

    Classes (Class Keyword)-Classes are syntactic sugar that overlay the current constructor and prototype based approach to types.

    Example of using:
    class Language {
    constructor (name, founder, year) { = name;
    this.founder = founder;
    this.year = year;
    summary( ) {
    return + “was created by ” + this.founder + ” in ” +this.year;

    Modules-Helps remove us from real global variables that pollute the namespace (a really good thing btw) and does a better job at managing asynchronousity. It has two new keywords: export and import.

    Example of using:
    export const PI = Math.PI;
    export function square(x){
    return x*x;
    // app.js
    import {PI,square} from ‘math'; //Alternativelycould be:import * as math from ‘math’
    console.log(square(PI));//will be PI^2

    Promises-Promises are a representation of an object. They are used in asynchronous JavaScript programming and are available today in many third party libraries, including JQuery, Angular, etc.

    Example of using:
    var promise = new Promise(
    function (resolve, reject) { // (A)

    if (…) {
    resolve(value); // success
    } else {
    reject(reason); // failure

    There are a lot more other interesting features, including rest parameters, generators, default parameters and more.

    The features vary widely from completely new objects and patterns to syntax changes to new methods on existing objects. The exciting thing about ECMAScript 6 is that all of these changes are geared towards problems that developers are actually facing. There are several ECMAScript 6 features that replace ECMAScript 5 features, but you can still use ES5 as a foundation by using “transpilers” to bridge the ES5-ES6 gap.

    ES6 is the most promising version of JavaScript that will certainly aid writing more modular and less quirky code. By taking advantage of the right tools and functionality of the future version ES6, one can address critical issues of earlier versions that help use these new features effectively. Now, the entire ES6 feature-set is beyond the scope of this post, for that you can check out its new features by trying them out.