nodejs : Anatomy of http.request

http.request() method will create createRequest Object.This will inturn call Agent's addRequestMethod.
This will see if there is any already created socket for host:port combination.If the no of sockets created for this combination is < than the set configuration max limit value, a socket is created using net.createconnection.After the socket is returned createRequestObject's onSocket method is called which will create a function and add it to the event queue to be executed as part of next tick.This created function will set up socket's ondata.

sockets's ondata function creates a parser and this parser parses the data and takes necessary actions.This parser creates a IncomingMessage object and populates the response.on complete it will emit response event on createRequest Object. This will call the callback we passed while initiating the request(http.request)

clientResponse is a http.IncomingMessage object, an eventEmitter that gets built and populated by the parser whose execute method is called when socket data is available,
   
    the callback we are passing gets called after the headers are processed, at which time we will add listeners for the events 'data' & 'end'.
       
    Parser while parsing the message body will emit 'data' event on clientResponse.
    Parser will emit 'end' event on messageComplete

Javascript ::: Enumerating all properties of an object

https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Working_with_Objects#Defining_getters_and_setters

 

Enumerating all properties of an object

Starting with ECMAScript 5, there are three native ways to list/traverse object properties:

• for...in loops
  This method traverses all enumerable properties of an object and its prototype chain
• Object.keys(o)
  This method returns an array with all the own (not in the prototype chain) enumerable properties names ("keys") of an object o.
• Object.getOwnPropertyNames(o)
  This method returns an array containing all own properties names (enumerable or not) of an object o.

In ECMAScript 5, there is no native way to list all properties of an object. However, this can be achieved with the following function:

view plainprint?

1. function listAllProperties(o){       
2.     var objectToInspect;       
3.     var result = [];  
4.       
5.     for(objectToInspect = o; objectToInspect !== null; objectToInspect = Object.getPrototypeOf(objectToInspect)){    
6.         result = result.concat(Object.getOwnPropertyNames(objectToInspect));    
7.     }  
8.       
9.     return result;   
10. }  

This can be useful to reveal "hidden" properties (properties in the prototype chain which are not accessible through the object, because another property has the same name earlier in the prototype chain). Listing accessible properties only can easily be done by removing duplicates in the array.

Consistent List Indentation

courtesy : https://developer.mozilla.org/en/Consistent_List_Indentation

 

Consistent List Indentation

• Edit
• Watch

Table of contents

1. Making a List
2. Indenting It Twice
3. Finding Consistency
4. Conclusion
5. Recommendations
6. Original Document Information

• Tags
• Files

Page Notifications Off

One of the most common style changes made to lists is a change in the indentation distance -- that is, how far the list items are pushed over to the right. This often leads to frustration, because what works in one browser often doesn't have the same effect in another. For example, if you declare that lists have no left margin, they move over in Explorer, but sit stubbornly in place in Gecko-based browsers.
In order to understand why this is the case, and more importantly how to avoid the problem altogether, it's necessary to examine the details of list construction.

Making a List

First, we consider a single, pure list item. This list item has no marker (otherwise known as a "bullet"), and is not yet part of a list itself. It hangs alone in the void, simple and unadorned, as shown in Figure 1.

That dotted red border represents outer edges of the the content-area of the list item. Remember that, at this point, the list item has no padding or borders. If we add two more list items, we get a result like that shown in Figure 2.

Now we wrap these in a parent element; in this case, we'll wrap them in an unordered list (i.e., <ul>). According to the CSS box model, the list items' boxes must be displayed within the parent element's content area. Since that parent has no padding or margins yet, we get the situation shown in Figure 3.

Here, the dotted blue border shows us the edges of the <ul> element's content area. Since we have no padding for the <ul> element, its content wraps snugly around the three list items.
Now we add the list item markers. Since this is an unordered list, we'll add traditional filled-circle "bullets," as shown in Figure 4.

Visually, the markers are outside the content area of the <ul>, but that's not the important part here. What's key is that the markers are placed outside the "principal box" of the <li> elements, not the <ul>. They're sort of like appendages to the list items, hanging outside the content-area of the <li> but still attached to the <li>.
This is why, in every browser except Internet Explorer for Windows, markers are placed outside any border set for an <li> element, assuming the value of list-style-position is outside. If it's changed to inside, then the markers are brought inside the <li>'s content, as though they're an inline box placed at the very beginning of the <li>.

Indenting It Twice

So how will all this appear in a document? At the moment, we have a situation analogous to these styles:

ul, li {margin-left: 0; padding-left: 0;}

If we dropped this list into a document as-is, there would be no apparent indentation and the markers would be in danger of falling off the left edge of the browser window.
In order to avoid this and get some indentation, there are really only three options available to browser implementors.

1. Give each <li> element a left margin.
2. Give the <ul> element a left margin.
3. Give the <ul> element some left padding.

As it turns out, nobody seems to have used the first option. The second option was taken by Internet Explorer for Windows and Macintosh, and Opera. The third was adopted by Gecko, and by extension all the browsers that embed it.
Let's look at the two approaches for a moment. In Internet Explorer and Opera, the lists are indented by setting a left margin of 40 pixels on the <ul> element. If we apply a background color to the <ul> element and leave the list item and <ul> borders in place, we get the result shown in Figure 5.

Gecko, on the other hand, sets a left padding of 40 pixels for the <ul> element, so given the exact same styles as were used to produce Figure 5, loading the example into a Gecko-based browser gives us Figure 6.

As we can see, the markers remain attached to the <li> elements, no matter where they are. The difference is entirely in how the <ul> is styled. We can only see the difference if we try to set a background or border on the <ul> element.

Finding Consistency

Boil it all down, and what we're left with is this: if you want consistent rendering of lists between Gecko, Internet Explorer, and Opera, you need to set both the left margin and left padding of the <ul> element. We can ignore <li> altogether for these purposes. If you want to reproduce the default display in Netscape 6.x, you write:

ul {margin-left: 0; padding-left: 40px;}

If you're more interested in following the Explorer/Opera model, then:

ul {margin-left: 40px; padding-left: 0;}

Of course, you can fill in your own preferred values. Set both to 1.25em, if you like -- there's no reason why you have to stick with pixel-based indentation. If you want to reset lists to have no indentation, then you still have to zero out both padding and margin:

ul {margin-left: 0; padding-left: 0;}

Remember, though, that in so doing, you'll have the bullets hanging outside the list and its parent element. If the parent is the body, there's a strong chance your bullets will be completely outside the browser window, and thus will not be visible.

Conclusion

In the end, we can see that none of the browsers mentioned in this article is right or wrong about how they lay out lists. They use different default styles, and that's where the problems creep in. By making sure you style both the left padding and left margin of lists, you can find much greater cross-browser consistency in your list indentation.

Recommendations

• When altering the indentation of lists, make sure to set both the padding and margin.

Rotate Text with no jquery Mozilla / IE

courtesy :w3schools

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
#rotateDiv
{
position:relative;
display:inline-block;
}
</style>

<script type="text/javascript">

function rotate(value)
{
document.getElementById('rotateDiv').style.top=document.getElementById('rotateDiv').offsetWidth/2 +'px'
document.getElementById('rotateDiv').style.webkitTransform="rotate(" + value + "deg)";
document.getElementById('rotateDiv').style.msTransform="rotate(" + value + "deg)";
document.getElementById('rotateDiv').style.MozTransform="rotate(" + value + "deg)";
document.getElementById('rotateDiv').style.OTransform="rotate(" + value + "deg)";
document.getElementById('rotateDiv').style.transform="rotate(" + value + "deg)";
}

if (document.addEventListener)
  document.addEventListener("DOMContentLoaded", function(){alreadyrunflag=1; rotate(90)}, false)
else if (document.all && !window.opera){
  document.write('<script type="text/javascript" id="contentloadtag" defer="defer" src="javascript:void(0)"><\/script>')
  var contentloadtag=document.getElementById("contentloadtag")
  contentloadtag.onreadystatechange=function(){
    if (this.readyState=="complete"){
      alreadyrunflag=1
      rotate(90)
    }
  }
}

window.onload=function(){
  setTimeout("if (!alreadyrunflag) rotate(90)", 0)
}

</script>

</head>
<body>
    <div id="rotateDiv">HELLO</div>
</body>

</html>

Rotate Text JavaScript+CSS transform jquery

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css">

.normal
{
    position:relative;   
    display:inline-block;
    background-color:yellow;
}

.rotate
{
/* Rotate div */
    transform:rotate(90deg);
    -ms-transform:rotate(90deg); /* Internet Explorer */
    -moz-transform:rotate(90deg); /* Firefox */
    -webkit-transform:rotate(90deg); /* Safari and Chrome */
    -o-transform:rotate(90deg); /* Opera */
}
</style>
</head>
<body>

<div class="normal">Chandu Loves Snigdhu</div>
<!--
    <a class="clicktorotate" href="javascript:void(0);">rotate</a>
-->
</body>
<script>
    /*
    $('.clicktorotate').bind('click',function(e){
         var e = $('.normal');
         if(!e.hasClass('rotate')){
            this.innerHTML='normal'
            e.addClass('rotate');
            return;
         }
         this.innerHTML='rotate'
         e.removeClass('rotate');
       
    });
    */
   
    $(function(){
        var e = $('.normal');       
        e.addClass('rotate');
        e.css('top',e[0].offsetWidth/2+'px');
       
    }
    );
   

</script>


</html>

Dependency Injection

Dependency Injection is a way to make an object work with different implementations of an interface it is dependent on without recompilation of itself.

interface B{
work();
}

class Bimpl() implements B{
(){
  walking;
}
}

class A {
 public B b = new Bimpl();

doWork(){
 b.work();
}

}

For object of Class A to walk it needs Bimpl object.Say for example we need another another implementation of B to replace current Bimpl and that will require a code modification and recompilation of A.

3 types,
Constructor
Setter
Interface

Vertical Scroll Fixed list indentation

<html>
<head>
     <script src="jquery.min.js" type="text/javascript"></script>
   
     <style>
        body  *{
            margin:0px;
        }
   
        .containerScroll {
            width:150px;
            height:250px;
           
           
           
        }
       
        .containerScroll  div.items{                   
            height:220px;                       
            overflow:hidden;
           
           
        }
       
        .containerScroll > div.items ul{
       
        }
       
        .containerScroll  div.items ul li.first{
            color:red
        }
     </style>
   
</head>
<script>
var t_scroll;
        $(
            function(){               
                t_scroll = setInterval(function(){
                    //alert($('.containerScroll > div.items ul li:first-child' ).length);
                    //alert($('.containerScroll')[0].offsetHeight);
                    //alert($('.containerScroll > div.items')[0].offsetHeight);
                    //alert($('.containerScroll > div.items ul li:first-child')[0].offsetHeight);
                    if( $('.containerScroll > div.items')[0].offsetHeight < ($('.containerScroll > div.items ul')[0].offsetHeight))                   
                        $('.containerScroll > div.items ul li:first-child' ).appendTo($('.containerScroll > div.items ul'))           
                },500)
               
                $('.containerScroll > div.items').bind('mouseenter' , function(e){
                    clearInterval(t_scroll);
                    $(this).css('overflow','auto');
                })
               
                $('.containerScroll > div.items').bind('mouseleave' , function(e){                       
                    $(this).css('overflow','hidden');
                    t_scroll = setInterval(function(){                                   
                    if( $('.containerScroll > div.items')[0].offsetHeight < ($('.containerScroll > div.items ul')[0].offsetHeight))                   
                        $('.containerScroll > div.items ul li:first-child' ).appendTo($('.containerScroll > div.items ul'))           
                },500)
                   
                })
               
                           
        })
   
   

</script>
<body>
    <div class="containerScroll">
        <div class="items">
            <ul>
                <li class="first">item1</li>
                <li>item2</li>
                <li>item3</li>
                <li>item4</li>
                <li>item5</li>
                <li>item6</li>
                <li>item7</li>
                <li>item8</li>
                <li>item9</li>
                <li>item10</li>
                <li>item11</li>
                <li>item12</li>
                <li>item10</li>
                <li>item11</li>
                <li>item12</li>                               
            </ul>       
        </div>
    </div>   
</body>
<html>


*********************************************************************************
 Above code does not display list indentation.Fixed it in below code

<html>
<head>
     <script src="jquery.min.js" type="text/javascript"></script>
   
     <style>
        body  *{
            margin:0px;
        }
   
        .containerScroll {
            width:150px;
            height:250px;
          
          
          
        }
      
        .containerScroll  div.items{                  
            height:220px;                      
            overflow:hidden;
          
          
        }
      
        .containerScroll > div.items ul{
      
        }
      
        .containerScroll  div.items ul li.first{
            color:red
        }
      
      
        .ie.containerScroll {
            width:150px;
            height:250px;
          
          
          
        }
      
        .ie.containerScroll  div.items{                  
            height:220px;                      
            overflow:hidden;
          
          
        }
      
        .ie.containerScroll  div.items  ul{
            border:1px solid red;      

        }
      
        .ie.containerScroll  div.items  ul li{
            margin:0 0 0 25px;           
            border:1px solid blue;
        }
      
        .ie.containerScroll  div.items ul li.first{
            color:red;
        }
      
     </style>
   
</head>
<script>
var t_scroll;
        $(
            function(){              
                t_scroll = setInterval(function(){
                    //alert($('.containerScroll > div.items ul li:first-child' ).length);
                    //alert($('.containerScroll')[0].offsetHeight);
                    //alert($('.containerScroll > div.items')[0].offsetHeight);
                    //alert($('.containerScroll > div.items ul li:first-child')[0].offsetHeight);
                    if( $('.containerScroll > div.items')[0].offsetHeight < ($('.containerScroll > div.items ul')[0].offsetHeight))                  
                        $('.containerScroll > div.items ul li:first-child' ).appendTo($('.containerScroll > div.items ul'))          
                },500)
              
                $('.containerScroll > div.items').bind('mouseenter' , function(e){
                    clearInterval(t_scroll);
                    $(this).css('overflow','auto');
                })
              
                $('.containerScroll > div.items').bind('mouseleave' , function(e){                      
                    $(this).css('overflow','hidden');
                    t_scroll = setInterval(function(){                                  
                    if( $('.containerScroll > div.items')[0].offsetHeight < ($('.containerScroll > div.items ul')[0].offsetHeight))                  
                        $('.containerScroll > div.items ul li:first-child' ).appendTo($('.containerScroll > div.items ul'))          
                },500)
                  
                })
              
                          
        })
   
   

</script>
<body>
<!--[if IE]>
 <div class="ie containerScroll">
<![endif]-->

<!--[if !IE]><!-->
    <div class="containerScroll">
 <!--<![endif]-->
   
   
        <div class="items">
            <ul>
                <li class="first">item1</li>
                <li>item2</li>
                <li>item3</li>
                <li>item4</li>
                <li>item5</li>
                <li>item6</li>
                <li>item7</li>
                <li>item8</li>
                <li>item9</li>
                <li>item10</li>
                <li>item11</li>
                <li>item12</li>
                <li>item10</li>
                <li>item11</li>
                <li>item12</li>                              
            </ul>      
        </div>
    </div>  
</body>
<html>