Monday, 14 April 2014

Once the user types a URL in the Web Browser’s address-bar and press the ENTER button...

  The following sequence occurs:

a. The Web Browser performing a DNS lookup on the given URL.
b. Using the retrieved host-name from the DNS Lookup, the Web Browser communication-layer component creates and opens a TCP connection to the Web Server.
c. Using the opened TCP connection, the Web Browser construct and transmits an HTTP GET request with the relevant details (e.g. URL, User-Agent, Accepted-Content) to the Web Server.
d. In turn, the Web Server performs its internal process on the income HTTP request and responds its results in the form of HTTP Response packet back to the Web Browser.
e. Upon successful HTTP Response packet arrival to the Web Browser, the Web Browser’s Layout Engine is starts to take its rendering actions – There are three major engines out there: Gecko, WebKit and Trident.
f. The Web Browser extracts and parses out the HTML source-code from the HTTP Response packet and constructs a DOM tree out of it, which is a data representation where every HTML tag has a corresponding node in the tree and the text chunks between tags get a text node representation too. The root node in the DOM tree is the documentElement (the <html> tag).
g. New HTTP requests are made to the server for each new resource that is found in the HTML source (typically: images, style sheets, and JavaScript files) and for each resource, the Web Browser will go back to step A.
h. The engine parses out the inline & external style-sheets (CSS) instructions. The rendering information in each style-sheet gets attached to the matching node in the DOM tree.
i. Scripts/JavaScript is parsed and executed, and in any case of DOM manipulations using scripts, the DOM nodes are moved and style information is updated accordingly.
j. While the DOM tree is being constructed by the Layout Engine, the browser constructs another tree, the render tree. This tree is of visual elements in the order in which they will be displayed. It is the visual representation of the document. The purpose of this tree is to enable painting the contents in their correct order. The render tree is sort of like the DOM tree, but doesn't match it exactly. The render tree knows about styles, so if you're hiding a div with display: none, it won't be represented in the render tree.
k. In between the Render tree construction and the painting of the page to the screen, there is a Layout calculation of the page’s elements positions and sizes.
l. Once the render tree is constructed, the engine can paint (draw) the render tree nodes on the screen. And voilĂ ! The user see the requested webpage in his Web Browser!

Thursday, 7 February 2013

Multi-Select drop-down list with images using AngularJS

I was recently requested to create multiple select drop-down list that'll also support images display.

As you probably know, the standard select HTML tag supports single-choice and text only.

Since no in-built support for this kind of behavior I had to implement it by myself and I choose the fantastic AngularJS MVC framework to do it, with a little help of jQuery.

I wanted to share my work with you so enjoy it.

Demo and source-code are available through plunker:

Saturday, 18 August 2012

How LIVE method works in jQuery?

The idea is simple, event bubbling is occurring when any event is fired on the browser.
Base on this concept, if a specific element's event not handled, then it will anyway reach to the document level and there will be the required check.

Using a pure JavaScript object which I created, you can understand how live method is working:


 

Update:
As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().

Tuesday, 3 January 2012

Fast value retrieving using Hashtable in C# - Get number's total occurrences

Recently I was asked about how to retrieve value from a method as fast as possible, I thought of using Hashtable and as a result I made the following class in order to demonstrate the use.

As you will see, the aim of this class is to provide information about how many times a single number reappearing in a given array or multiple array(the constructor accepts params IEnumerable<int>[]).

I'm calculating the total occurrences per number in the Constructor and saving the results at the Hashtable. by doing it, I'm preventing recalculating again and again.


Monday, 4 July 2011

The mysterious LINQ extenstion methods

A little embarrassing, but only recently I have been realized what stands behind the mysterious methods which added to some types in .NET

It turns out that Microsoft has added extensions methods to all types that are implements the IEnumerable interface, like: Dictionary, ArrayList, List etc.

As an example, look at the following code and the possible cool  LINQ IENUMERABLE Method Extension, I want to find the names which starts with 'Y':

Given this List object: var names = new List<string> {"Yair", "David", "Joe", "John", "Yan", "Yuri", };

Option 1 - Regular foreach loop

            var filteredNames = new List<string>();
            foreach (var name in names)
            {
                if (name.StartsWith("Y"))
                {
                    filteredNames.Add(name);
                }
            }

Option 2 - LINQ query
            var query = from n in names
                        where n.StartsWith("Y")
                        select n;

Option 3 - LINQ IENUMERABLE Method Extention
var filteredNames = names.Where(name => name.StartsWith("Y"));



as a reference you can take a look at msdn documentation: http://msdn.microsoft.com/en-us/library/system.linq.enumerable.aspx

My first post

This is my first post at Blogger.

I hope to share with you my technology experiences as soon as I exposed to them.

Yair