lighttpd, allow “Access-Control-Allow-Origin:*” headers on the server status page

Maybe there’s someone out there who needs to read the output of lighttpd’s status for monitoring purpose like me tonight, and also, like me, you want to do this using JavaScript, but your browser gives you this nasty error:

XMLHttpRequest cannot load http://otherSubdomain.server.com/lighttpd-status-url-you-have-configured. Origin http://requestingSubdomain.server.com is not allowed by Access-Control-Allow-Origin.

lighttpd allows you to add a custom header for all requests by adding this in a given context:

[perl]setenv.add-response-header = ( "Access-Control-Allow-Origin" => "*" )[/perl]

For this to work, you must enable the mod_setenv.

But if you don’t enable this module, before you enable your mod_status module, you will never see the custom headers come out of your lighttpd HTTP response header output.

So make sure you enable mod_setenv like this:

[perl]
server.modules = (
"mod_fastcgi",
"mod_auth",
"mod_access",
"mod_alias",
"mod_accesslog",
# "mod_simple_vhost",
"mod_rewrite",
"mod_redirect",
"mod_setenv", #before mod_status, very important!
"mod_status",
# "mod_evhost",
"mod_compress",

[/perl]

The header output of your lighttpd status page should look like this now:

[bash]
Access-Control-Allow-Origin:*
Content-Length:5952
Content-Type:text/html
Date:Wed, 30 Nov 2011 01:27:04 GMT
Server:lighttpd/1.4.28
[/bash]

Hope this helps you.

JavaScript: Get how many digits are there in a decimal number

/**
 * 1 + Floor(LogBase10(number))
 * 
*/
function digits(n) { return 1+Math.floor(Math.log(n)/Math.log(10)); 
}

Yes, javascript doesn’t have a Math.log10() function.
I tried doing it by dividing by Math.ln10 constant but the function won’t return the correct number of digits when you pass numbers like 100,1000,10000,etc. So I just divided by Math.log(10) and it seems to work.

Iterative Sierpinksi Fractal (drawn on HTML5 Canvas)

So maybe you’ve seen this very famous fractal called the Sierpinksi Fractal.

A few days ago I heard that you could create this fractal pattern by simply plotting out of a random sequence of mid points of an ever growing set of these mid points. So curiosity added with my apetite for playing with the HTML5 Canvas object and you have me playing on a saturday afternoon and then blogging about it.

Drawing this thing

Usually you’d think of drawing the Sierpinski Triangle the Recursive way, specially if you’re a CS student. The algorithm would be basically… For each triangle you create 3 triangles, one on top, one on the left, and one on the right (in the order that you want), repeat and rinse for each new triangle (until you decide to stop… you can use for example the height of the next triangle to stop, if too small stop)

But then I heard on some online video lecture about fractals that you could obtain the same results in an iterative fashion, no recursion whatsoever, just generate point after point randomly following one basic rule.

Choose 3 points in a plane, then choose 2 random points of the 3 and draw the middle point of these 2. Do the same for the new set of points. If the 3 initial points represent the vertices of a triangle you have yourself a Sierpinski fractal triangle. If you don’t choose an initial triangle, you’ll also get Sierpinski but it looks as if you were looking at the triangle from a random angle.

I must say I was pretty amazed when I saw it working… TADA!!!!


Try it on your browser
(Tested and works under Firefox 3.5, Chromium 4.0.2, and Safari)

That’s how it looks when you draw 800k random mid points.

PS: It runs faster in Chrome, props to Chrome developers.

jQuery tag wrapping

Many times you’ll be working on something in HTML that could be long and repetitive, and then for some reason you need to edit the entire thing to wrap each of the tags on some other tags, a common example would be to link many elements.

Take this example, there’s a bunch of photos, they’re all contained in divs that have a css class called “photos”, inside we just throw
a bunch of <img> tags, and all of a sudden our boss tells us he wans to have every image on that page linked to “http://domain.com/photos”. jQuery to the rescue, no need to wrap each <img> with <a href=””> by hand, you can do it all in one line

So if the code looks like this:

       <div class="photos">
            <img src="http://domain.com/0670027481_m.jpg"/>
            <img src="http://domain.com/211161aa99_m.jpg"/>
            <img src="http://domain.com/173bb0cd6_m.jpg"/>
        </div>
        <div class="photos">
            <img src="http://domain.com/841fd90b5b_m.jpg"/>
            <img src="http://domain.com/52dda2cee5_m.jpg"/>
            <img src="http://domain.com/b569399599_m.jpg"/>
        </div>
        <div class="photos">
            <img src="http://domain.com/8806e863a4_m.jpg"/>
            <img src="http://domain.com/5e43aa95fe_m.jpg"/>
            <img src="http://domain.com/68a74a088c_m.jpg"/>
        </div>

        <div class="tshirt-photos">
            <img src="http://farm4.static.flickr.com/3149/3113619519_72ce82c545_m.jpg"/>
            <img src="http://farm4.static.flickr.com/3236/3105792155_99f2388869_m.jpg"/>
            <img src="http://farm3.static.flickr.com/2114/2372582266_765842fae9_m.jpg"/>
        </div>

With jQuery you can match all the <img> elements, and wrap them all with “<a href=”http://domain.com/photos”></a>” in a single line of code:

$(document).ready(function() { $(".photos img").wrap('<a href="http://domain.com/photos">') })

So to explain how it works, when the document is ready (when it’s finished loading) the function inside is called back, it will use the jQuery selector $(“.photos img”) to match all the <img> tags contained withing elements of css class “photos”, then it applies the wrap() function, which will wrap the matched elements with the given html tags.

About jQuery

jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML. It was released January 2006 at BarCamp NYC by John Resig.

Dual licensed under the MIT License and the GNU General Public License, jQuery is free and open source software.

jQuery contains the following features:

  • DOM element selections
  • DOM traversal and modification, (including support for CSS 1-3 and basic XPath)
  • Events
  • CSS manipulation
  • Effects and animations
  • Ajax
  • Extensibility
  • Utilities – such as browser version and the each function.
  • JavaScript Plugins

jQuery Documentation

New Safari’s JavaScript engine Kicks Ass!

So I downloaded yesterday the latest Software Update for Mac OSX and it included an update of the Safari Web Browser, which I had taken for dead ages ago, I’m a hardcore Firefox user.

Today I read about the new updates, and I read something that caught my eye at Mackinando.com.

it executes JavaScript six times faster than the rest

I go to the Safari Site, and they compare themselves with a previous version, Firefox, and Opera (not IE, not even worth mentioning)

I couldn’t believe my eyes, so I googled for “JavaScript Benchmark“, and tried the SunSpider JavaScript Benchmark onboth Firefox 2.0.0.12 and the shiny new Safari 3.1.

The machine used for this test is a MacBook Pro running Mac OS X Version 10.4.11 with a 2.33 GHz Intel Core 2 Duo and 2GB 667 MHz DDR2 SDRAM.

Here are the results side by side:

FIREFOX 2.0.0.12
========================
RESULTS 
(means and 95% confidence intervals)
-----------------------------------------
Total:                 15365.4ms +/- 1.7%
-----------------------------------------

  3d:                   2386.6ms +/- 7.9%
    cube:                733.0ms +/- 20.8%
    morph:              1269.8ms +/- 9.4%
    raytrace:            383.8ms +/- 37.1%

  access:               1386.2ms +/- 4.8%
    binary-trees:        201.6ms +/- 0.6%
    fannkuch:            294.8ms +/- 5.4%
    nbody:               691.2ms +/- 8.9%
    nsieve:              198.6ms +/- 1.5%

  bitops:               3461.2ms +/- 0.4%
    3bit-bits-in-byte:   275.8ms +/- 0.6%
    bits-in-byte:        248.2ms +/- 0.7%
    bitwise-and:        2765.2ms +/- 0.5%
    nsieve-bits:         172.0ms +/- 4.7%

  controlflow:           153.4ms +/- 0.7%
    recursive:           153.4ms +/- 0.7%

  crypto:                527.2ms +/- 0.5%
    aes:                 230.8ms +/- 1.2%
    md5:                 147.4ms +/- 0.5%
    sha1:                149.0ms +/- 0.6%

  date:                 2551.8ms +/- 0.3%
    format-tofte:       1449.6ms +/- 0.3%
    format-xparb:       1102.2ms +/- 0.8%

  math:                 1312.6ms +/- 12.8%
    cordic:              497.4ms +/- 12.0%
    partial-sums:        501.6ms +/- 1.6%
    spectral-norm:       313.6ms +/- 36.1%

  regexp:                501.0ms +/- 0.2%
    dna:                 501.0ms +/- 0.2%

  string:               3085.4ms +/- 10.3%
    base64:              914.6ms +/- 3.4%
    fasta:               676.0ms +/- 35.4%
    tagcloud:            441.4ms +/- 0.6%
    unpack-code:         846.8ms +/- 25.4%
    validate-input:      206.6ms +/- 1.1%
SAFARI 3.1
========================
RESULTS 
(means and 95% confidence intervals)
-----------------------------------------
Total:                 3368.8ms +/- 1.0%
-----------------------------------------

  3d:                   414.8ms +/- 1.9%
    cube:               132.2ms +/- 2.4%
    morph:              144.6ms +/- 4.1%
    raytrace:           138.0ms +/- 0.6%

  access:               520.4ms +/- 4.1%
    binary-trees:        78.6ms +/- 11.3%
    fannkuch:           231.4ms +/- 2.0%
    nbody:              149.2ms +/- 8.1%
    nsieve:              61.2ms +/- 3.9%

  bitops:               449.6ms +/- 2.4%
    3bit-bits-in-byte:   69.8ms +/- 9.6%
    bits-in-byte:        99.2ms +/- 4.6%
    bitwise-and:        167.2ms +/- 2.3%
    nsieve-bits:        113.4ms +/- 6.7%

  controlflow:           91.2ms +/- 4.7%
    recursive:           91.2ms +/- 4.7%

  crypto:               247.2ms +/- 2.3%
    aes:                 81.2ms +/- 2.5%
    md5:                 83.8ms +/- 4.6%
    sha1:                82.2ms +/- 2.0%

  date:                 306.4ms +/- 0.5%
    format-tofte:       146.6ms +/- 1.4%
    format-xparb:       159.8ms +/- 1.0%

  math:                 454.8ms +/- 1.3%
    cordic:             174.4ms +/- 1.6%
    partial-sums:       193.8ms +/- 1.2%
    spectral-norm:       86.6ms +/- 4.4%

  regexp:               209.6ms +/- 0.7%
    dna:                209.6ms +/- 0.7%

  string:               674.8ms +/- 2.2%
    base64:             103.8ms +/- 9.0%
    fasta:              177.0ms +/- 1.0%
    tagcloud:           136.0ms +/- 4.6%
    unpack-code:        136.0ms +/- 1.7%
    validate-input:     122.0ms +/- 2.6%

Comparing with Firefox, the overall result of this test was that it’s 4.56 times faster.

However, if we look test by test, there are areas where I feel embarrassed for Firefox.

Bitwise Operations
For example, Bit-Operation tests in Safari 3.1 are 7.7 times faster in Safari, being the case of the bitwise-AND (&) operator the worst of them, Safari performed bitwise-and’s 16 times faster than Firefox

OUCH!!

String Operations
So you’d be curious now about String operations, which is probably a lot of what goes on with Javascript, and Ajax, parsing those XML results and what not, maybe the bitwise & won’t hurt us that much given that not many programmers today are smart enough to use them for web programming.

When it comes to String operations, Safari 3.1 was 4.5 times faster than Firefox 2.

Kudos to the Safari Team, I thought there was no point in having Safari until I did this benchmark. I guess they don’t want to let go of Web Browser users, maybe they make millions every month with ad-clicks on Google generated with the search field they have at the top of the browser which is set by default to do Google search.

Once again the saying proves it self

“Competition is good”

Let’s hope this will make the Firefox team think more on Javascript improvements with the upcoming Firefox 3. Once it’s release ready, it’ll be worth it running this benchmark again and see where it stands.

Update (March 20th, 2008)

I’ve made tests on Firefox 3 beta 4, You can see the results here. Tests have been made again on the same Macbook Pro. The improvements of Firefox 3 are notable, however, on the mac, Safari still wins.