Dottoro's Blog http://help.dottoro.com/blog Just another WordPress site Sun, 17 Jul 2011 23:13:22 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Large selection lists and fast string concatenation in JavaScript http://help.dottoro.com/blog/large-selection-lists-and-fast-string-concatenation-in-javascript/ http://help.dottoro.com/blog/large-selection-lists-and-fast-string-concatenation-in-javascript/#comments Thu, 04 Feb 2010 14:28:38 +0000 Dottoro http://help.dottoro.com/blog/?p=24 selection list needs to be filled dynamically depending on the state of another control (e.g. when the user selects a country and a selection list must contain the cities in this country, or when the user selects a singer and a selection list must contain his/her songs).
Unfortunately, the usual way of creating a selection list with a large number of items is quite slow in Internet Explorer. In the followings, you can find solutions and speed tests for the problem (the speed test was run on an average computer).

Example 1, the usual way.

This example uses the createElement and appendChild methods to create a selection list with 2000 options: 
var select = document.createElement ("select");
for (var i = 0; i < 2000; i++) {
    var option = document.createElement ("option");
    option.text = i;
    select.appendChild (option);
}
container.appendChild (select);
Preview
View Plain
Print
 D.r™

Speed test:

Browser Time
IE 6 1802 ms
IE 7 1953 ms
IE 8 594 ms
Firefox 90 ms
Opera 31 ms
Safari 5 ms

Remarks:

The example does not work properly in Internet Explorer, it creates a selection list with 2000 empty options.

Example 2

This example uses the createElement and add methods to create a selection list with 2000 options: 
var select = document.createElement ("select");
for (var i = 0; i < 2000; i++) {
    var option = document.createElement ("option");
    option.text = i;
    select.options.add (option);
}
container.appendChild (select);
Preview
View Plain
Print
 D.r™

Speed test:

Browser Time
IE 6 2703 ms
IE 7 3000 ms
IE 8 984 ms
Firefox 366 ms
Opera 234 ms
Safari 68 ms

Example 3

This example uses the innerHTML property to create a selection list with 2000 options: 
var select = "<select>";
for (var i = 0; i < 2000; i++) {
    select += "<option>" + i + "</option>";
}
select += "</select>";
container.innerHTML += select;
Preview
View Plain
Print
 D.r™

Speed test:

Browser Time
IE 6 70 ms
IE 7 78 ms
IE 8 15 ms
Firefox 59 ms
Opera 16 ms
Safari 17 ms

The solution implemented by Example 3 works much more faster than the previous ones in Internet Explorer and it is also fast in other browsers. Unfortunately, the processing time grows drastically for greater number of options in Internet Explorer. This behavior is independent of the select and option elements, it is based on the speed of string concatenations.
But how can strings be concatenated faster? The following examples answer that question.

Example 4

This example same as the previous one, but it creates a selection list with 8000 options: 
var select = "<select>";
for (var i = 0; i < 8000; i++) {
    select += "<option>" + i + "</option>";
}
select += "</select>";
container.innerHTML += select;
Preview
View Plain
Print
 D.r™

Speed test:

Browser Time
IE 6 961 ms
IE 7 1781 ms
IE 8 47 ms
Firefox 242 ms
Opera 47 ms
Safari 67 ms

Example 5

This example creates an array from the substrings first then concatenates the array elements with the join method: 
var selectArr = new Array ();
selectArr.push ("<select>");
for (var i = 0; i < 8000; i++) {
    selectArr.push ("<option>" + i + "</option>");
}
selectArr.push ("</select>");
container.innerHTML += selectArr.join ("");
Preview
View Plain
Print
 D.r™

Speed test:

Browser Time
IE 6 280 ms
IE 7 172 ms
IE 8 47 ms
Firefox 240 ms
Opera 62 ms
Safari 70 ms
]]> http://help.dottoro.com/blog/large-selection-lists-and-fast-string-concatenation-in-javascript/feed/ 5 IE7 zoom level problem, where is the mouse pointer? http://help.dottoro.com/blog/ie7-zoom-level-problem-where-is-the-mouse-pointer/ http://help.dottoro.com/blog/ie7-zoom-level-problem-where-is-the-mouse-pointer/#comments Sun, 24 Jan 2010 14:28:00 +0000 Dottoro http://help.dottoro.com/blog/?p=20 There are several cases when you need the position of the mouse pointer on a webpage (e.g. if you want to display custom tooltips or elements that follow the mouse).

The question is, how can you set the position of an element to align to the coordinates of the mouse pointer?

The answer seems simple, the cross-browser clientX and clientY properties of the event object retrieve the position of the mouse pointer relative to the top-left corner of the browser window's client area.

Additionally, the position of a fixed positioned element's top-left corner can be specified with the top and left style properties relative to the top-left corner of the browser window's client area. All right, let's look at a simple example first: 

<head>
    <style>
        #flying {
            position: fixed; 
        }
    </style>

    <script>
        function UpdateFlyingObj (event) {
            var mouseX = Math.round (event.clientX);
            var mouseY = Math.round (event.clientY);

            var flyingObj = document.getElementById ("flying");
            flyingObj.style.left = mouseX + "px";
            flyingObj.style.top = mouseY + "px";

        }
    </script>
</head>
<body onmousemove="UpdateFlyingObj (event);">
    <div style="height:1000px;">
        The flying object also works for document scrolling.
    </div>

    <img id="flying" src="flying.gif" />
</body>
Preview
View Plain
Print
 D.r™
Unfortunately the previous example does not work in Internet Explorer 7 at non-default zoom levels. The problem is that the clientX and clientY properties retrieve the position of the mouse in physical pixel size, while in Firefox, Opera, Safari and in Internet Explorer from version 8 they return the position in logical pixel size.

What does it mean?

If the browser is not at the normal zoom level (the user has the ability to zoom in or out a web page: CTRL and +, CTRL and -),
  • the position of the mouse pointer is calculated in the default pixel size in Internet Explorer before version 8 even if the current pixel size in the document is different,
  • from Internet Explorer 8 and in Firefox, Opera and Safari, the position is calculated in the current pixel size.

For example, if the zoom level is 200%, the logical pixel size is two times greater than the physical pixel size, so the clientX and clientY properties retrieve two times greater values in Internet Explorer before version 8 than in other browsers for the same mouse position. In contrast to the clientX and clientY properties, the top and left style properties specify the position in logical pixel size in all browsers. So if you want to set the position of an element to align to the coordinates of the mouse pointer, you need to known the current zoom level in IE7.

How can you get the current zoom level in IE7?

There are several JavaScript properties and methods that use physical pixel size instead of logical pixel size in IE7 (such as the clientX and clientY properties of the event object, the clientWidth, clientHeight, offsetWidth and offsetHeight properties of the html, the getBoundingClientRect and getClientRects methods).

The clientWidth, clientHeight, offsetWidth and offsetHeight properties retrieve the size in physical pixel size only for the html element, for other elements, they contain the size in logical pixel size.

So you can get the width of the body element with the offsetWidth property in logical pixel size and with the getBoundingClientRect method in physical pixel size. Both values contain the padding, scrollbar, and the border, but exclude the margin.

The current zoom level can be determined with the help of those two values. This method only works in Internet Explorer before version 8, the two values are the same in other browsers.

Note that if you need the current zoom level in IE from version 8, use the deviceXDPI, logicalXDPI, deviceYDPI and logicalYDPI properties.

This example is the same as the previous one, but it also works in Internet Explorer 7 at non-default zoom levels: 
<head>
    <style>
        #flying {
            position: fixed; 
        }
    </style>

    <script>
            // always return 1, 
            // except at non-default zoom levels in IE before version 8
        function GetZoomFactor () {
            var factor = 1;
            if (document.body.getBoundingClientRect) {
                    // rect is only in physical pixel size in IE before version 8 
                var rect = document.body.getBoundingClientRect ();
                var physicalW = rect.right - rect.left;
                var logicalW = document.body.offsetWidth;

                    // the zoom level is always an integer percent value
                factor = Math.round ((physicalW / logicalW) * 100) / 100;
            }
            return factor;
        }

        function UpdateFlyingObj (event) {
            var mouseX = event.clientX;
            var mouseY = event.clientY;

            if (navigator.appName.toLowerCase () == "microsoft internet explorer") {
                    // the clientX and clientY properties include 
                    // the left and top borders of the client area
                mouseX -= document.documentElement.clientLeft;
                mouseY -= document.documentElement.clientTop;

                var zoomFactor = GetZoomFactor ();
                if (zoomFactor != 1) {  // IE 7 at non-default zoom level
                    mouseX = Math.round (mouseX / zoomFactor);
                    mouseY = Math.round (mouseY / zoomFactor);
                }
            }


            var flyingObj = document.getElementById ("flying");
            flyingObj.style.left = mouseX + "px";
            flyingObj.style.top = mouseY + "px";
        }
    </script>
</head>
<body onmousemove="UpdateFlyingObj (event);">
    <div style="height:1000px;">
        The flying object also works for document scrolling.
    </div>

    <img id="flying" src="flying.gif" />
</body>
Preview
View Plain
Print
 D.r™

The previous two examples do not work in Internet Explorer 6, since it does not support fixed positioned elements. If you need an example that works in IE6, too, please see the pages for the clientX and clientY properties.

]]> http://help.dottoro.com/blog/ie7-zoom-level-problem-where-is-the-mouse-pointer/feed/ 2 CSS background ... as it is now http://help.dottoro.com/blog/css-background-as-it-is-now/ http://help.dottoro.com/blog/css-background-as-it-is-now/#comments Sat, 10 Oct 2009 14:27:28 +0000 Dottoro http://help.dottoro.com/blog/?p=16 With these properties you can set the color or the image displayed as the background. In addition, you have control over the position, the repetition type (horizontal, vertical, both or neither) of the image. Furthermore, you can set whether the image should scroll with the contents or should stay in a fixed position during scrolling. In this article, you can see these functionalities demonstrated in examples among other things.

CSS background properties were introduced to substitude the background related HTML attributes such as:

(Note: that is the reason all of these attributes are deprecated in the W3C HTML 4.01 specification).

See what you can do with an element's background.

1. How to specify a single color as the background for an element.

<head>
    <style>
        .redBg {
            background-color:#FF0000;
            /* or background:#FF0000; - shorthand property */
            /* or background-color:red; - predefined color value, not recommended */
            width:200px;
            height:200px;
        }
    </style>
</head>
<body>
    <div class="redBg">An element with red background.</div>
</body>
Preview
View Plain
Print
 D.r™
You can specify a background color with the shorthand background or with the background-color property. If you want to specify only a simple color as the background, the use of the background-color property is recommended, because it results in more readable code. Colors can be specified in CSS in three different ways, by using the RGB method, hexadecimal color values and predefined color names. For further details, please visit the colors page.

2. How to use a single image as the background.

This is the case when you want to use the whole or a part of an image as the background.

Sample image:

The image can be in GIF, PNG, JPG or BMP format. Recommended are the GIF, JPG or PNG formats depending on the dimensions of the image (check the size (lower is better) and the quality of the image).

You can specify a background image with the shorthand background or with the background-image property. In the followings, you can see how. 

<head>
    <style>
        .single_image {
            background:transparent url(images/bg_image.jpg) top left no-repeat;
            width:200px;
            height:69px;
        }
    </style>
</head>
<body>
    <div class="single_image">An image as the background.</div>
</body>
Preview
View Plain
Print
 D.r™
Note: The image that is used as background cannot be resized from CSS; regardless of the size of the element, the image is shown in its original size. 
<head>
    <style>
        .single_image {
            background-image:url(images/bg_image.jpg);
            background-repeat:no-repeat;
            width:200px;
            height:69px;
        }
    </style>
</head>
<body>
    <div class="single_image">An image as the background.</div>
</body>
Preview
View Plain
Print
 D.r™

3. How to create a gradient background.

You can create a gradient background with a 1px wide or wider (horizontal gradient) or a 1px tall or taller (vertical gradient) image:
for horizontal gradient: for vertical gradient:

With the background-repeat property you have control over how the image is repeated (repeats vertically, horizontally, in both or in neither directions).

a. How to create a horizontal gradient background.

  1. Create a 1px wide or wider image with your favorite graphics editor program.
  2. Save it in GIF, PNG, JPG or BMP format. Recommended are the GIF or PNG formats, if you want to make a gradient background.
  3. Create the code:

Using the background-image, background-color, background-repeat properties: 

<head>
    <style>
        .hor_gradient {
            background-image:url(images/hor_grad.gif);
            background-color:transparent;
            background-repeat:repeat-y;
            width:100px;
            height:100px;
        }
    </style>
</head>
<body>
    <div class="hor_gradient">Horizontal gradient background.</div>
</body>
Preview
View Plain
Print
 D.r™

Using the shorthand background property: 

<head>
    <style>
        .hor_gradient {
            background:transparent url(images/hor_grad.gif) top left repeat-y;
            width:100px;
            height:100px;
        }
    </style>
</head>
<body>
    <div class="hor_gradient">Horizontal gradient background.</div>
</body>
Preview
View Plain
Print
 D.r™

b. How to create a vertical gradient background.

  1. Create a 1px tall or taller image with your favorite graphics editor program.
  2. Save it in GIF, PNG, JPG or BMP format. Recommended are the GIF or PNG formats, if you want to make a gradient background.
  3. Create the code.

Using the background-image, background-color, background-repeat properties: 

<head>
    <style>
        .ver_gradient {
            background-image:url(images/ver_grad.gif);
            background-color:transparent;
            background-repeat:repeat-x;
            width:100px;
            height:100px;
        }
    </style>
</head>
<body>
    <div class="ver_gradient">Vertical gradient background.</div>
</body>
Preview
View Plain
Print
 D.r™

Using the shorthand background property: 

<head>
    <style>
        .ver_gradient {
            background:transparent url(images/ver_grad.gif) top left repeat-x;
            width:100px;
            height:100px;
        }
    </style>
</head>
<body>
    <div class="ver_gradient">Vertical gradient background.</div>
</body>
Preview
View Plain
Print
 D.r™

4. How to create a relative (e.g. 100%) wide background, such as a header or footer.

Sample images:

a, A center aligned background image:

Using the background-image, background-color, background-repeat, background-position properties: 

<head>
    <style>
        .centralized_img {
            background-image:url(images/centralized_bg.png);
            background-color:#7d910f;
            background-repeat:no-repeat;
            background-position:center center;
            width:100%;
            height:100px;
        }
    </style>
</head>
<body>
    <div class="centralized_img">A center aligned background image.</div>
</body>
Preview
View Plain
Print
 D.r™

Using the shorthand background property: 

<head>
    <style>
        .centralized_img {
            background:#7d910f url(images/centralized_bg.png) center center no-repeat;
            width:100%;
            height:100px;
        }
    </style>
</head>
<body>
    <div class="centralized_img">A center aligned background image.</div>
</body>
Preview
View Plain
Print
 D.r™

b, A left aligned background image:

Using the background-image, background-color, background-repeat, background-position properties: 

<head>
    <style>
        .left_aligned_img {
            background-image:url(images/left_aligned_bg.png);
            background-color:#7d910f;
            background-repeat:no-repeat;
            background-position:left center;
            width:100%;
            height:100px;
        }
    </style>
</head>
<body>
    <div class="left_aligned_img">A left aligned background image.</div>
</body>
Preview
View Plain
Print
 D.r™

Using the shorthand background property: 

<head>
    <style>
        .left_aligned_img {
            background:#7d910f url(images/left_aligned_bg.png) left center no-repeat;
            width:100%;
            height:100px;
        }
    </style>
</head>
<body>
    <div class="left_aligned_img">A left aligned background image.</div>
</body>
Preview
View Plain
Print
 D.r™

c, A right aligned background image:

Using the background-image, background-color, background-repeat, background-position properties: 

<head>
    <style>
        .right_aligned_img {
            background-image:url(images/right_aligned_bg.png);
            background-color:#7d910f;
            background-repeat:no-repeat;
            background-position:right center;
            width:100%;
            height:100px;
        }
    </style>
</head>
<body>
    <div class="right_aligned_img">A right aligned background image.</div>
</body>
Preview
View Plain
Print
 D.r™

Using the shorthand background property: 

<head>
    <style>
        .right_aligned_img {
            background:#7d910f url(images/right_aligned_bg.png) right center no-repeat;
            width:100%;
            height:100px;
        }
    </style>
</head>
<body>
    <div class="right_aligned_img">A right aligned background image.</div>
</body>
Preview
View Plain
Print
 D.r™

5. How to place a background image in a specific position

Sample image:

You can place the image in a specific position as follows:

Using the background-image, background-color, background-repeat, background-position properties:

<head>
    <style>
        .placed_bg {
            background-image:url(images/image_to_spec_pos.gif);
            background-color:#ff0000;
            background-repeat:no-repeat;
            background-position:20px 50px;
            width:200px;
            height:200px;
            border:1px solid #989898;
        }
    </style>
</head>
<body>
    <div class="placed_bg">Positioned background.</div>
</body>
Preview
View Plain
Print
 D.r™

Using the shorthand background property:

<head>
    <style>
        .placed_bg {
            background:transparent url(images/image_to_spec_pos.gif) 20px 50px no-repeat;
            width:200px;
            height:200px;
            border:1px solid #989898;
        }
    </style>
</head>
<body>
    <div class="placed_bg">Positioned background.</div>
</body>
Preview
View Plain
Print
 D.r™

The next scriptlet shows how you can manipulate the position of a background image from JavaScript: 

<head>
    <style>
        #bg_move_area {
            background:transparent url(images/image_to_spec_pos.gif) 20px 50px no-repeat;
            width:200px;
            height:200px;
            border:1px solid #989898;
        }
    </style>
    <script>
        function MoveBg (event) {
            var x = (event.offsetX)? event.offsetX : event.layerX;
            var y = (event.offsetY)? event.offsetY : event.layerY;
            var bg_move_area = document.getElementById ("bg_move_area");
            if (!event.offsetX) {
                var oParent = bg_move_area;
                var areaX = 0;
                var areaY = 0;
                while (oParent) {
                    areaX += oParent.offsetLeft;
                    areaY += oParent.offsetTop;
                    oParent = oParent.offsetParent;
                }
                x = x - areaX;
                y = y - areaY;
            }
            bg_move_area.style.backgroundPosition = x + "px " + y + "px";
        }
    </script>
</head>
<body>
    <div id="bg_move_area" onmousemove="MoveBg (event);"></div>
</body>
Preview
View Plain
Print
 D.r™

6. How to place a background image in a specific position that is independent of the scroll state.

You must place the background image at a fixed position:

Using the background-image, background-color, background-repeat, background-position, background-attachment properties: 

<head>
    <style>
        .placed_bg {
            background-image:url(images/fixed_bg.gif);
            background-color:#ffefef;
            background-repeat:no-repeat;
            background-position:180px 60px;
            background-attachment:fixed;
            width:200px;
            height:200px;
            overflow:scroll;
        }
    </style>
</head>
<body>
    <div class="placed_bg">
        text...<br />text...<br />text...<br />text...<br />text...<br />text...<br />text...<br />text...<br />
        Scroll this div!<br />
        text...<br />text...<br />text...<br />text...<br />text...<br />text...<br />text...<br />text...<br />
        text...<br />text...<br />text...<br />text...<br />text...<br />text...<br />text...<br />text...<br />
    </div>
</body>
Preview
View Plain
Print
 D.r™

Using the shorthand background property: 

<head>
    <style>
        .placed_bg {
            background:#ffefef url(images/fixed_bg.gif) 180px 60px no-repeat fixed;
            width:200px;
            height:200px;
            overflow:scroll;
        }
    </style>
</head>
<body>
    <div class="placed_bg">
        text...<br />text...<br />text...<br />text...<br />text...<br />text...<br />text...<br />text...<br />
        Scroll this div!<br />
        text...<br />text...<br />text...<br />text...<br />text...<br />text...<br />text...<br />text...<br />
        text...<br />text...<br />text...<br />text...<br />text...<br />text...<br />text...<br />text...<br />
    </div>
</body>
Preview
View Plain
Print
 D.r™

7. How to create a transparent background

a, How to create an element with a transparent background:

Most HTML elements' background is transparent by default, but you can set it directly with the background-color property: 

<head>
    <style>
        body {
            background-color:#72b429;
        }

        .trans_elem {
            background-color:transparent;
            border:1px solid #787878;
        }

        .non_trans_elem {
            background-color:#ffffff;
            border:1px solid #787878;
        }
    </style>
</head>
<body>
    <div class="trans_elem">Some content within a transparent element</div>
    <div class="non_trans_elem">Some content within a non-transparent element</div>
</body>
Preview
View Plain
Print
 D.r™

b, How to use a transparent image as the background:

Image types that can be used:

  1. GIF (Graphics Interchange Format)
    The GIF format allows only one of the colors in the palette to be fully transparent.
  2. PNG (Portable Network Graphics)
    The PNG image format supports alpha channel values for any palette entry. What does that mean? It means that all colors can be transparent with different opacity.

1, One-color transparency (e.g. sharp edges)

The example GIF (without the checkered background):

Using the background-image, background-color, background-repeat, background-position properties: 

<head>
    <style>
        body {
            background:url(images/bg.gif) repeat;
        }
        .trans_bg_img {
            background-image:url(images/rounded.gif);
            background-color:transparent;
            background-repeat:no-repeat;
            background-position:top left;
            width:80px;
            height:23px;
            color:#f6f6f6;
        }
    </style>
</head>
<body style="background:url (images/bg.gif) repeat;">
    <div class="trans_bg_img">rounded</div>
</body>
Preview
View Plain
Print
 D.r™

Using the shorthand background property:

<head>
    <style>
        body {
            background:url(images/bg.gif) repeat;
        }
        .trans_bg_img {
            background:transparent url(images/rounded.gif) top left no-repeat;
            width:80px;
            height:23px;
            color:#f6f6f6;
        }
    </style>
</head>
<body>
    <div class="trans_bg_img">rounded</div>
</body>
Preview
View Plain
Print
 D.r™

2, Alpha chanel

The example PNG (without the checkered background):

In the following examples, some workaround is ncessary to display a transparent image correctly in older Internet Explorer versions (versions before 7). We use a conditional comment for version detection in Internet Explorer.

Note: The element must have a layout (hasLayout) if you are going to use the AlphaImageLoader Filter. 

<head>
    <style>
        body {
            background:url(images/bg.gif) repeat;
        }
        .trans_bg_img {
            background:transparent url(images/rounded.png) top left no-repeat;
            width:80px;
            height:23px;
        }
    </style>
    <!--[if lt IE 7]
        <style>
            .trans_bg_img {
                background-image:none;
                filter:AlphaImageLoader (src='images/rounded.png', sizingMethod='scale');
            }
        </style>
    <![endif]-->
</head>
<body>
    <div class="trans_bg_img">rounded</div>
</body>
Preview
View Plain
Print
 D.r™

8. What you can't do (at this time) with CSS background

  • An element with multiple backgrounds. (Only workaround possible with positioned elements. Elements must be placed above the others.)
  • You can't change the dimensions of the original image used as background. Its horizontal and vertical size is independent of the dimensions of the element for which it is used as background.
  • You cannot specify the horizontal or vertical starting position of the repetition of an image if the image is repeated; the background-position is automatically set to left top.

Further reading

Thanks for reading!

Any suggestion is highly appreciated.

]]> http://help.dottoro.com/blog/css-background-as-it-is-now/feed/ 3 13 amazing free fonts for your website http://help.dottoro.com/blog/13-amazing-free-fonts-for-your-website/ http://help.dottoro.com/blog/13-amazing-free-fonts-for-your-website/#comments Thu, 01 Oct 2009 14:26:45 +0000 Dottoro http://help.dottoro.com/blog/?p=11 Why 13? It's only by accident, I wanted to make a top 10 list, but I just couldn't miss any font that I like.
Text content is the biggest part of an informative website, so it's particularly important to choose the perfect font and textual layout. That is even more true when using pre-made templates. The easiest way to make your site unique is to use custom fonts.

How to embed a custom font into your website in all browsers?

See this tutorial.
The 13 fonts showcased in the post are my favorites from the several thousands available on the market, because of their readability and legibility. I've found them very useful and thought I’d share them with you. Enjoy! :)
Note: The most of these fonts only contain English characters!!!

The fonts:

28 Days Later

Alba

Angelina

Antipasto

Capture It

Cheri

Dirty and Classic

English

Hand of Sean

Harabara

Journal

Renaissance

Soolidium

]]> http://help.dottoro.com/blog/13-amazing-free-fonts-for-your-website/feed/ 12 64 high-ranked blogs for developers http://help.dottoro.com/blog/64-high-ranked-blogs-for-developers/ http://help.dottoro.com/blog/64-high-ranked-blogs-for-developers/#comments Sun, 27 Sep 2009 14:24:53 +0000 Dottoro http://help.dottoro.com/blog/?p=7 The following list contains personal blogs that have at least pagerank 6 and are written in English for developers.
Some of them are about specific technologies, some of them are more general and some of them are not only for developers.

I hope everybody can find some useful blogs in the list.

The OPML file for the RSS feeds of these blogs can be downloaded from here: 6+devblogs.xml.
  1. Daring Fireball By John Gruber
    PageRank: 7
  2. Eric A. and Kathryn S. Meyer Blog
    PageRank: 7
  3. Dave Winer - Scripting News
    PageRank: 7
  4. Simon Willison’s Weblog
    PageRank: 7
  5. Stevey's Blog Rants
    PageRank: 7
  6. ScottGu's Blog
    PageRank: 7
  7. Roger Johansson - 456 Berea Street: Articles and news on web standards, accessibility, and usability
    PageRank: 7
  8. Joel on Software
    PageRank: 7
  9. Nguyễn Đình Quân - Narga
    PageRank: 7
  10. Rough Type: Nicholas Carr's Blog
    PageRank: 7
  11. Remus Stratulat - On the Stre@m
    PageRank: 7
  12. Jeffrey Zeldman Presents The Daily Report
    PageRank: 7
  13. Aral Balkan - Changing the world through technology and oratory
    PageRank: 6
  14. Brian Hayes - Bit-Player
    PageRank: 6
  15. Jon Udell - Strategies for Internet citizens
    PageRank: 6
  16. Nihilogic (Jacob Seidelin) - JavaScript, games and other things that matter
    PageRank: 6
  17. Paul Walk's weblog
    PageRank: 6
  18. Joel Spolsky and Jeff Atwood - Stack Overflow
    PageRank: 6
  19. Vladimir Vukićević's Blog
    PageRank: 6
  20. J.D. Meier's Blog
    PageRank: 6
  21. Bokardo - Social Design by Joshua Porter
    PageRank: 6
  22. Marco Casario - RIAvolutionize the web
    PageRank: 6
  23. Software application development - Adrian Bridgwater's Blog at ZDNet.co.uk Community
    PageRank: 6
  24. ##adsense_unit##
  25. Chris Coyier - CSS-Tricks
    PageRank: 6
  26. The Warne Account - The personal blog of Dan Warne, Australian tech journalist
    PageRank: 6
  27. John Resig - Blog
    PageRank: 6
  28. Beast-Blog.com - Mike Cherim's Professional and Personal Web Log - Home Page
    PageRank: 6
  29. Imthiaz Blog - me and stupid works .. !!!
    PageRank: 6
  30. Martin Fowler's Bliki
    PageRank: 6
  31. Oracle Data Mining and Analytics
    PageRank: 6
  32. Raible Designs - Matt Raible's discussions on Java and Web Development
    PageRank: 6
  33. Jeff Siarto's Blog
    PageRank: 6
  34. Scott Watermasysk - Simpable
    PageRank: 6
  35. Six Revisions (Jacob Gube) - Web Development and Design Information
    PageRank: 6
  36. Giovanni Gallucci - The agency blog
    PageRank: 6
  37. The Daily WTF (Alex Papadimoulis): Curious Perversions in Information Technology.
    PageRank: 6
  38. Andy Lester - The Working Geek
    PageRank: 6
  39. Edd Dumbill's Weblog: Behind the Times
    PageRank: 6
  40. Brian Kelly - UK Web Focus
    PageRank: 6
  41. Dare Obasanjo aka Carnage4Life
    PageRank: 6
  42. Recent Web Log Entries By Ben Nadel
    PageRank: 6
  43. CGISecurity (Robert Auger) - Website and Application Security News
    PageRank: 6
  44. CMS Critic (Mike Johnston) - CMS Reviews, Listings, Articles and News
    PageRank: 6
  45. Max Pool - {codesqueeze}
    PageRank: 6
  46. Jeff Atwood - Coding Horror
    PageRank: 6
  47. Mariano Iglesias - Coding My Thoughts
    PageRank: 6
  48. Dan Webb's Blog
    PageRank: 6
  49. Darren Hoyt - Blog, Portfolio and Personal Website
    PageRank: 6
  50. Gahtan’s Technology and Internet Law Blog
    PageRank: 6
  51. Scott Hanselman's Computer Zen
    PageRank: 6
  52. James Ward - RIA Cowboy, Rich Internet Applications, Flex, Adobe AIR, Java, Open Source, Linux, Enterprise Software.
    PageRank: 6
  53. The personal weblog of Kelvin Luck - a Flash, Flex and Javascript developer
    PageRank: 6
  54. Niall Kennedy's Weblog
    PageRank: 6
  55. Paul Graham's Blog
    PageRank: 6
  56. Stoyan's web dev blog
    PageRank: 6
  57. Rands In Repose
    PageRank: 6
  58. Ted Leung on the Air
    PageRank: 6
  59. Scott Berkun's Blog
    PageRank: 6
  60. Omar Shahine's Blog
    PageRank: 6
  61. Skellie's Blog
    PageRank: 6
  62. Jesse Ruderman's Blog
    PageRank: 6
  63. Steve Souders - High Performance Web Sites
    PageRank: 6
  64. Jen deHaan - Web and Video
    PageRank: 6
  65. Joost de Valk - Yoast - Tweaking Websites
    PageRank: 6
]]> http://help.dottoro.com/blog/64-high-ranked-blogs-for-developers/feed/ 14