buy proscar online

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

Jul 31 2015

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

  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

React JS

Jul 31 2015

Techstack used: React JS

example: Created a booklist component using reactjs

   https://github.com/prathamesh-sonpatki/openlib-react/branches/active

   https://speakerdeck.com/chaitanya/sip-of-reactjs

KeyNotes Observed:

1) Its one way data binding

 2) It comes up with component funda (unconventional idea). child data is immutable and always data flows from parent to child. However there are hacks to flow data from child to parent

3) Think of reactjs component  as view always getting refreshed with latest data (for any data change). Think of it as a clean slate being update each time again and again

4) It comes up with the idea of jsx templates (which has some additional features over html. example class has to specified using className), which has to be inside the javascript file (we cannot separate out jsx template code from javascript code)

5) It uses Virtual Dom and creates the diff between what is changed and updates the component. (Diff algorithm is the awesome feature of the react js)

6) React JS is a small library provides view updation. However for entire architecture using Flux.

 

No responses yet

Test driving jQuery Plugin Development

Jul 31 2015

Techstack used: Karma, jQuery, jasmine

  example: 1) created the plugin of the jquery. example link (https://github.com/nashjain/jQComment/commits?author=nashjain)

Key Notes Observed: Karma is the only good test runner for javascript available. Behavior driven development is possible in jQuery (writing test first, code next, passing the test and iterating the process). We can refactor the code later and with help of tests, we will be more confident about the refactored code. when all the tests are passed.

 

No responses yet

Grunt JS

Jul 31 2015

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

jQuery Conference jotting

Jul 31 2015

jQuery Conference (July 24- July 25)

Grunt JS

Use it to Automate the Tasks as much as possible.

example: 1) JsHint

                  2)  Minification process

                 3)  Execute the test cases

Key Notes Observed: 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.

 

 

Test driving jQuery Plugin Development

Techstack used: Karma, jQuery, jasmine

  example: 1) created the plugin of the jquery. example link (https://github.com/nashjain/jQComment/commits?author=nashjain)

Key Notes Observed: Karma is the only good test runner for javascript available. Behavior driven development is possible in jQuery (writing test first, code next, passing the test and iterating the process). We can refactor the code later and with help of tests, we will be more confident about the refactored code. when all the tests are passed.

 

React JS

Techstack used: React JS

example: Created a booklist component using reactjs

   https://github.com/prathamesh-sonpatki/openlib-react/branches/active

   https://speakerdeck.com/chaitanya/sip-of-reactjs

KeyNotes Observed: 1) Its one way data binding

                                          2) It comes up with component funda (unconventional idea). child data is immutable and always data flows from parent to child. However there are hacks to flow data from child to parent

                                         3) Think of reactjs component  as view always getting refreshed with latest data (for any data change). Think of it as a clean slate being update each time again and again

                                         4) It comes up with the idea of jsx templates (which has some additional features over html. example class has to specified using className), which has to be inside the javascript file (we cannot separate out jsx template code from javascript code)

                                         5) It uses Virtual Dom and creates the diff between what is changed and updates the component. (Diff algorithm is the awesome feature of the react js)

                                        6) React JS is a small library provides view updation. However for entire architecture using Flux.

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

  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.

 

Key Take aways from the conference:

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

Resizing Canvas to fit across multiple Resolutions

Apr 25 2013

Mobile webapp/game developers often face issue to support the application across multiple mobile devices. This is largely because resolutions of mobile are very different.

Take for example iphone. Following are the resolutions of different versions of iphone

iphone <4 320/480.

iphone 4 640/960

iphone 5 640/1136

So now we need a fluid layout that fit across multiple resolutions. So that application can be supported in multiple mobile devices irrespective of the resolution. However, If the application/game is canvas based we need a technique to resize the canvas. Here, I am going to illustrate an awesome technique found from html5 rocks case study. Where we autoresize the canvas with help of wrapper div. Sounds awesome! right. Lets look into the technique.

 

Technique to resize canvas to fit all multiple resolutions:

Technique:

Wrap the canvas with a div tag and make canvas width and height 100%. Reset the height and width of the div tag via Javascript. Canvas also resizes according to the div tag.

Example:

1)      Create a container with the position absolute wrapper div

2)      Create the canvas tag and make it as the position absolute and define the height and width of the div as 100%

 

Html changes:

 

<div id=”canvasWrapper”>

<canvas  id=”canvas” width=”600” height=”700”>

</div>

 

CSS changes:

 

#canvasWrapper{
position:absolute;

top:50% (optional)

left:50%(optional)

}

 

#canvas{

position:absolute; (This is optional)

height:100%;

width:100%

}

 

Javascript Changes:

 

Define the window resize handler to control to update the container div based on the view port height  and width

 

$(window).on(“resize”,function(){

                            var $canvasWrapper =  $(‘#canvasWrapper’);

                            $canvasWrapper.width(document.documentElement.clientWidth);

                            $canvasWrapper.height(document.documentElement.clientHeight);

   });

 

Reference: http://www.html5rocks.com/en/tutorials/casestudies/gopherwoord-studios-resizing-html5-games/

No responses yet

Mobile Web App/Game Remote Debugging in Chrome (Works for Andriod mobiles)

Apr 24 2013

Mobile Webapp/Game Debugging Issue:

Mobile WebApp/ Game Developers need mobile browser debuggers to debug the issues while developing the Mobile WebApp/Game. However, having debugger in mobile browser like firebug, webkit inspector might not be a good idea, considering the real estate available in the mobile.

Solution:

To solve this issue, Desktop browsers like chrome support remote debugging of the mobile webapp. Any application opened in mobile chrome browser can be debugged remotely from desktop (mobile connected desktop) using chrome browser developer tools .

How To Setup:

  • Download the Android sdk
  •  Set the devtools into the path
  •  Connect the mobile to desktop via USB and open the chrome mobile browser
  •  Enable USB debugging option present in settings  of mobile device and in mobile browser
  •  Run “adb devices” command, to see the list of devices
  •  Run the remote command
  • adb forward tcp:9222 localabstract:chrome_devtools_remote
  • Open localhost:9222 in the desktop chrome browser to start debugging using chrome dev tools
  • Open the mobile web application in mobile and now you can see your desktop chrome browser shows the inspector to corresponding to mobile app

Ensure Following points, If you are unable to do remote debugging:

1) Make sure the USB is enabled
Solution: Enable usb with help of administrator

2) Make sure proper usb driver is installed.
Solution: Install the Samsung usb driver, If samsung mobile is connected like (Galaxy s2 or nexus 4).
Recommendation: Install Samsung “Kies”, which updates the usb driver.

3) Enable the usb debugging option in mobile in both settings of mobile device and settings of the mobile browser.

Reference: https://developers.google.com/chrome-developer-tools/docs/remote-debugging#installing-androidsdk

No responses yet

Backbone JS Tutorial

Jan 01 2013

Backbone JS (Stop tying your data to DOM)

Backbone.js is not a full fledged mvc or mvp or mvvm framework, Basically it provides the event bindings between the model and view, so that changes in the view will update the attributes of model and corresponding views listening to the model will get updated.

But there are many backbone js plugins, which help us to create a web application using backbone depending on the requirement. So we can implement mvc, mvp, mvvm or anything using these plugins.

What is a backbone model ? (State)

Backbone model maintains state of the application. Following things can be done in the model.

Responsibilities:

1)Getting the data from server
2)Save data to the server
3)Validation of data
4)Syncing of the data from server to client
5)Destroying the model (data,if no longer needed )

Usage:

A model has attributes to store the data, on change of any of the attribute a change event will be triggered by the model
However, this change event can also be suppressed by passing {silent:true}. views should listen to this events and display the data

Gotchas:

1)If the attribute is again a model, then the change in the attribute of the submodel will not be triggered in parent model. Use the deepModelbinderplugin.
2)Even while instantiating a model with an object, the attributes will be set and validation if exist on any attribute will trigger.
3)Becareful in specifying the initial values, if initial value is not set, then the value is treated as undefined

What is a backbone collection?

A collection is just a list of models.

Responsibilities:

1)Fetch data from server
2)Sync data to the server

Usage:

On addition or removal of model to a collection the change event will be triggered. Views should listen to this events and display the data

Gotchas:

1)While creating the collection from a model, if the validate method fails then the model will not get added into the collection

What is a backbone view ?

A view is basically UI component that displays the data to the user intutively. it interacts with the template for markup

Responsibilities:

1)listen to the model and display data when data is changed.

Gotchas:

1)Beware of zombie views, they should be destroyed and all their events should be undelegated otherwise they will become zombies

What is a backbone router?

A router allows us to configure url corresponding to the view. It should be used only to provide views as a bookmarkable url. Don’t use it as a controller.

Responsibilties:

1)It provides route and callback method corresponding to the creation of view

Usage:

Use router.navigate or Backbone.history.navigate to route to a different url. Pass {trigger:true} to trigger the callback method corresponding to the view

Gotachs:

1)By default callback corresponding to the empty route will be called.
2)This is not a controller and never should be used a controller. it should not be passed to the views. use Backbone.history.navigate() method for such cases.

P.S: This post is for developers, who are new to backbone. Shortly, Continue Reading »

No responses yet

Compass n Sass

Sep 26 2012

Compass n Sass from Pradeep Saraswathi

No responses yet

Older posts »