buy proscar online

Archive for the 'jQuery' category

Key Take aways from the jQuery conference (July 24 – 25)

Jul 31 2015 Published by under jQuery, Uncategorized

1)As a team, we have to write same style of code. This is what  jquery team follows. An example of this is

Spaces Vs Tabs → Tabs

Commas at the starting → no

Only one Var → no

Single Quotes vs Double quotes → Double quotes

Semicolon → yes

 

2) Code review has to be strict.

   Automate as much as the code review process initially. (example as using jsHint)

   Review the logic as strictly as possible.

 

3) It’s not necessary to integrate the latest libraries, without evaluation

  Its not necessary for us to use React JS, Do a POC on it. identify the pros and cons

 

4)Spend time on educating the developers

   To have a common style of development, Invest time on educating the developers

 

5) TypeScript, @Coffeescript usage

 Typescript is preferable, If we are facing more issues with types, then definitely go for Typescript. But it is a good to invest time on this. As it going to be converged with Javascript in the coming versions and also it has a Good IDE support. It is good to try it.

6) Documentation

Use Document.js, Docco. jsDoc3 is also fine. However some speakers were against documentation, they believe method names should convey the meaning.

7) Shadow Dom

Shadow Dom sucks! . Some how all the speakers disagreed with shadow dom. Don’t use polymer in the project, Its going to die

 

8) Future of JS is Isomorphic Javascript

Isomorphic Javascript is the feature of javascript, where some amount of javascript is executed in the server side and passed on the client with a state. client continues execution of remaining part of javascript from that state

Metor.js is one good library provides this capability, However its tied with Mongo database. We can evaluate on ShareJS

 

9) Good Libraries and tools for CSS

stylus, JSS, CSSSCSS, DSS, CSSdoc, JSCSS, CSSlint, interm, bem

 

10) looks like EmberJS is awesome compared to Angular JS

11) Don’t spend too much time on Offline support of the webapp. Since the Internet is growing, definitely not a good idea on spending so much time on offline support of webapp.

 

No responses yet

Mistakes to be avoided (especially plugin authors), while using jQuery

Jul 31 2015 Published by under jQuery, Uncategorized

  1. Don’t use Ajax.setup(), As it makes changes of all the ajax calls. Use a command function which does ajax call with custom parameters (instead of using $.Ajax straight away)

  2. Use $.text() method to add data into DOM. (For security, to prevent XSS)

  3. Don’t go with the approach of adding CSS class names to the body and using them as flags for the logic in code. Always do the logic with Javascript. Adding classname at the body will cause reflow process in entire page

  4. Don’t overrelay on jquery for small changes.

  5. Event name spaces are the best practice, However to aviod the namespace collision. use the _.random method with a random number as the event name. (Make sure event namespace is unique)

  6. Use chrome dev tools to identify the problem.

  7. In jquery 3.0 will have the latest implementation in adherece to promise spec.

  8. Don’t overrely on jquery migration plugin. Fix the errors thrown by the plugin and move on

  9. Some methods like $.get, $.post,$.load are not good ones to use. But they are not removed since many people use it and they helped in jquery evolution.

No responses yet

Grunt JS

Jul 31 2015 Published by under Grunt, jQuery

Use it to Automate the Tasks as much as possible with Grunt.

example: 1) JsHint

              2)  Minification process

              3)  Execute the test cases

Key Notes: Always run the tests on the dist (production) javascript code, not on your source code.

Comparison with Gulp: Gulp can also a good task runner. However, Its not necessary to migrate Gulp.

 

No responses yet

Preventing Xss Attack in Client Side

Jun 05 2012 Published by under jQuery, Uncategorized

If users are allowed to enter html content via a textfield or any other UI element,Chances are that your application might be prone to XSS Attack. Let us see,How we can Prevent XSS Attack in Such Scenarios

1)Html Encode(a.k.a Html Escape) the content entered by the user in the text field.Following function will come in handy,if you are using jQuery

function htmlEncode(value){
return $(‘<div/>’).text(value).html();
}

Here,Value is set as innerText and encoded innerHtml is retrieved

2)While displaying the user entered content,then decode the encoded content.Following function will come in handy,if you are using jQuery

function htmlDecode(value){
return $(‘<div/>’).html(value).text();
}

Here,Value is set as innerHtml and the innerText is retrieved

P.S:The above functions have really worked well for me till now.

No responses yet

Debugging With FireBug

Dec 23 2011 Published by under jQuery

Following is my Presentation on jQuery,Presented to my Team

No responses yet

jQuery Introduction

Dec 12 2011 Published by under jQuery

No responses yet

jQuery’s $.animate() API ‘s drawbacks

Sep 18 2011 Published by under jQuery, Uncategorized

While working with jQuery animate() API, Following are the issues,I faced.

1) CSS ClassName cannot be added.

$.animate(className,1000);

I feel this is a biggest draw back of the animate() api. because we need to add css properties in the following tricky way,instead of adding ClassName straight away

Usage:

$(“#foo”).animate({  ”margin-left” : “40px”,  ”width” : “300px” }, 1000);

Solution:

Use the following plugin,which goes by the name as Animate to Class plugin.

http://plugins.jquery.com/project/animate-to-class

 

2)Limited CSS properties supported by $.animate() API.

Some CSS properties like “background-color,color..” cannot be used in this $.animate() API.

$.animate({“background-color”:”#b0d2f1″},1000);

This is the biggest drawback,Even though it is mentioned in the documentation.Developers mostly like to animate background-color in 50% of the use cases.

Solution

Following is the plugin,goes by the name “color” plugin has to be included,If you plan to use animate API to animate background color.

https://github.com/jquery/jquery-color

 

 

 

 

No responses yet

Testing Javascript code Using Qunits (jQuery Testing Framework)

Jul 18 2011 Published by under jQuery

In My Personal Experience,If you develop a feature in Javascript, you must add Unit Test cases for your code.Having Unit Test Cases will really helpful in the following scenarios.

1)While Refactoring the code for improving the code
2)While Updating the code, To introduce an Enhancement

Comprehensively,If you are going to change your code,Unit test cases will really give you confidence,The changes added by you did not break the existing implementation.

In-Browser Testing:

Basically,In-Browser Testing Frameworks allows you to run your test cases by loading the html page in the browser.Following are some of the popular In-Browser testing frame works available

1)Qunit.js
2)jsUnit

I prefer Qunit.js,because it is very easy to integrate (doesn’t need any dependencies) and most popularly used now.If you want to start writing Unit Test cases using Qunit.js.Here is my help for you.Please Follow these steps

Step1:

Create an Html File and include the Qunit.js and Qunit.css ,Which will be used for running the test suites created via In-Browser Testing.

Example:

<script type=”text/javascript” src=”http://code.jquery.com/jquery-latest.js”></script>
<script type=”text/javascript” src=”http://code.jquery.com/qunit/git/qunit.js”></script>
<h1 id=”qunit-header”>QUnit example</h1>
<h2 id=”qunit-banner”></h2>
<h2 id=”qunit-userAgent”></h2>
<div id=”qunit-fixture”>test markup, will be hidden</div>

 

Step2:

Create javascript file, To write the unit test cases needed to test  javascript code. Include this file in your test html page .

Example:

If your javascript file name is dragdrop.js, then your new javascript test file will be dragdrop.test.js.Include both the dragdrop.js and dragdrop.test.js in the above said html file.

 

Step3:

Create a module to test a Feature / Function.In Setup and Tear down methods initialize and destroy the variables needed for testing.

 

 module(“Module Name”,
{
setup:function()
{
setup logic should be written is done here,called before each test case (test() method)
this        — – refers to the module.
this.variableName   —  to  add a variable,which can be accessed inside the test case
Add Html elements,if needed for testing
},
teardown:function()
{
clean up is done here, called after each test case execution (test()  method)
this.variableName = null  —  to remove the variables,added during the setup method
Remove Html elements added while setup
}
});

 

Step4:

Create Test Cases,To test the javascript code using assertions

Example:

Test Case: Test Case Should be written after a module

test(“Name of the test case”,
function(){
1)call the function to be tested
2)assert the results

Assertions:
equal(actualResult,expectedResult,message);
notEqual(actualResult,expectedResult,message);
}
});

 

Following is the sample code(Template), which will be useful for writing a testcase using Qunits

module(“test”,
{
setup:function(){},
teardown=function(){}
}
);

test(“Name”,function(){ equal(A,E,M); notEqual(A,E,M);
});

A — actual result
E — expected Result
M — Message

No responses yet

Use document.getElementById instead of $(‘#Id’)

Jul 12 2011 Published by under jQuery

Three years back,I used prototype.js extensively. In prototype.js ‘$’ is used instead of document.getElementById(“”).But In these three years,I moved from prototype to jQuery,due to its awesomeness. I will write a separate post about “Why I love jQuery than Prototype.js”.

When I started using jQuery,Due to my Prototype.js background, I used $(‘#id’) extensively.But when i looked at the source code of jQuery,I came to know that $(‘#id’) does two things

1)It parses the selector passed inside $(‘selector’)

2)Uses the document.getElementById(‘id’) , Native DOM API supported across all the browsers

This will be costly,Because it does the costly operation of the regex parsing to identify the selector,Before using document.getElementById(). So I suggest Javascript Programmars to use document.getElementById instead of $(‘#id’) , Please take a look at the performance test made at following link

http://jsperf.com/id-vs-document-getelementbyid/20

Following are the Situations, where $(#id) API doesn’t return the element,where as document.getElementById(id) does return the element

1)If the Id contains spaces

$(‘#div id’) will not work (Even though having space in Id is not a preferred way, but if the id is generated dynamically based on some strings.this issue will arise.)

document.getElementById(div id) will return the element

2)Using remove() or any other jQuery API,if the $(”#id) does not return any element will cost you a lot.

$(‘#div id’).remove() will lead you to the drastic performance issues.

Instead Use :
var element = document.getElementById(div id);
if(element){$(element).remove();}

Please do share, If you have faced few more issues with $(‘#id’)

No responses yet

jQuery.attr() Issues in jQuery 1.6

Jul 08 2011 Published by under jQuery

When I Upgraded my jQuery Version from  1.4.2 to 1.6 . Suddenly, My Custom implementation of  Table Row Reordering Via Drag n Drop Plugin , which was working before, started breaking. After a close Inspection into the issue.Issue is raised due to the API Change made by jQuery in version 1.6

Following is the big Change made by jQuery in 1.6.

jQuery introduced a method called jQuery.prop(). To segregate the API used for getting DOM properties of an element.Since ‘rowIndex’ is an table row property added by the DOM.jQuery.attr(‘rowIndex’) stopped returning the rowIndex Value.

To get the attributes value of an Html Element,Use the Following API

   $(element).attr(‘attributeName’);

The above code is equivalent to

 element.getAttribute(‘attribute’);

Following are Some of the attributes supported by the above jQuery API

1) src

2) href

3) customAttributes such as data-[customName]

……etc

To get the attribute property of an Element Provided by DOM,Use the Following API

 $(element).prop(‘propertyName’);

The above code is equivalent to

 element.propertyName;

Following are Some of the properties supported by the above jQuery API

1) rowIndex

2) checked

…etc

So Folks,Before Upgrading to any new Version of jQuery.Please Go through their Change Log.So that you can avoid the mistake i made.

 

 

 

 

 

No responses yet

Older posts »