AJAX

There are 8 posts filed in AJAX (this is page 1 of 1).

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.

twitterAutoLinks: jQuery extension to replace twitter @names for links to their respective pages.

Save the following on a .js file, preferably named jquery.twitterAutoLinks.js
[javascript]
/** Auto replace all Twitter nicknames for links */
$.fn.twitterAutoLinks = function() {
return this.each(function() {
var html = $(this).html();
$(this).html(html.replace(/B@([w-]+)/gm, ‘<a href="http://twitter.com/$1" target="_blank">@$1</a>’));
});
};
[/javascript]

Usage

After importing the jquery.twitterAutoLinks.js file (make sure it’s after you’ve imported jquery itself), you’ll use the extension as follows.

[html]
<script type="text/javascript" language="Javascript">

$(document).ready(function() {
//say you’re running a wordpress blog and you want to do this for your posts
$("div.entry").twitterAutoLinks();
});

</script>
[/html]

Animating a game-like sky with HTML5 Canvas


Try it | View Source

Again playing a little more with HTML5 and Canvas animation.

This time around the result is a little more pleasing to the eye, based on some ideas I have for a little arcade game I want to make I’ve created a gradient blue sky and clouds that move either to the left or right at different speeds.

If I’m correct, I don’t think there is a way to move something that’s already been painted in the canvas, therefore I made the Clouds a “Cloud” object (I used to think I could paint a vector based graphic and then manipulate it in the canvas, but I think now the HTML Canvas is more of a place where you paint and you can’t really manipulate what’s already been painted). Each cloud is nothing but an array of white circles. The program initializes several clouds randomly and then with an interval call it repaints the gradient sky, and each one of the clouds, then moves them, to repeat the cycle over and over.

I’m not sure if game devs out there are doing this or if there is a way to have the canvas move vector objects in a more efficient way than repainting the whole thing from scratch on every frame. At this point the animation looks very smooth but nothing except clouds moving is happening.

I hope in your comments I’ll find some answers as if this is the way to animate your game, meaning, keeping object representations of everything that’s been painted in memory, and repainting the canvas on every frame of the game cycle.

My goal (which I don’t know if is correct) is to do everything within a single CANVAS object. I’ve seen though how some people still like to play around with the DOM Tree, I’m not sure if adding and manipulating the DOM Tree is the correct way to procede here, I think it’d also be a nightmare to handle things when it comes to focus, or converting coordinates from one canvas to another and have everything make sense.

Plurk.com Review

What is it?

In short, it’s a twitter clone, a time waster, with a little more thought into it. Is it more complex? Maybe not, sometimes the right added functionality makes life easier for people.

Why you should try it?

I tried Jaiku, Pwnce, FriendFeed and Twitter, and stayed with Twitter. I’m actually proud to say that I’ve sent 6,801 Twitts that have landed me 390 twitter followers, and this is probably the hardest thing about switching from Twitter to another competitor, as good as it may be.

But from last week I’ve been hearing about Plurk, and today after some good web-reputable friends joined I decided to give it a try (see the power of web-prestige?), before they joined I just thought… “another twitter competitor”.

The added functionality might make things better, it’s probably the evolution of micro-blogging happening, and twitter needs better competition in order to get better.

Pages: 1 2 3

Safari 3.1 Benchmark part II – VS Firefox 3.0b4

This is the Part II of Benchmarks between Safari 3.1’s JavaScript engine and Firefox. Last Benchmark was done against Firefox 2, and Safari destroyed Firefox’s Javascript engine, in some aspects being up to 7 times faster.

So I was curious and I downloaded and tried the benchmark on Firefox 3.0b4. to see how much Firefox 3.0 will improve its Javascript performance, key to today’s web applications and the future of the web.

After seeing the results, I say Kudos to the Firefox 3 team, they’ve improved considerably their JavaScript engine and that only makes me glad cause I won’t have to switch to Safari. 🙂

I will not make any tests on HTML rendering, if you find any benchmark results on HTML rendering, please leave links on the comments section.

Once again, here are the results side by side:

FIREFOX 3.0b4
========================
RESULTS 
(means and 95% confidence intervals)
-----------------------------------------
Total:                 3876.6ms +/- 0.9%
-----------------------------------------

  3d:                   489.0ms +/- 1.3%
    cube:               193.8ms +/- 1.2%
    morph:              138.2ms +/- 1.5%
    raytrace:           157.0ms +/- 3.8%

  access:               594.2ms +/- 5.6%
    binary-trees:        57.4ms +/- 5.9%
    fannkuch:           246.0ms +/- 0.8%
    nbody:              219.8ms +/- 13.6%
    nsieve:              71.0ms +/- 2.1%

  bitops:               470.4ms +/- 0.7%
    3bit-bits-in-byte:   67.8ms +/- 1.5%
    bits-in-byte:        90.8ms +/- 1.8%
    bitwise-and:        177.4ms +/- 1.1%
    nsieve-bits:        134.4ms +/- 0.5%

  controlflow:           42.4ms +/- 1.6%
    recursive:           42.4ms +/- 1.6%

  crypto:               257.2ms +/- 1.2%
    aes:                 87.4ms +/- 1.3%
    md5:                 83.8ms +/- 4.0%
    sha1:                86.0ms +/- 0.0%

  date:                 412.0ms +/- 0.4%
    format-tofte:       251.6ms +/- 0.6%
    format-xparb:       160.4ms +/- 0.4%

  math:                 502.0ms +/- 2.2%
    cordic:             188.0ms +/- 0.5%
    partial-sums:       231.2ms +/- 5.2%
    spectral-norm:       82.8ms +/- 3.6%

  regexp:               275.6ms +/- 1.0%
    dna:                275.6ms +/- 1.0%

  string:               833.8ms +/- 0.7%
    base64:              98.6ms +/- 1.4%
    fasta:              228.8ms +/- 3.2%
    tagcloud:           166.2ms +/- 0.6%
    unpack-code:        218.6ms +/- 0.5%
    validate-input:     121.6ms +/- 0.6%

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%

Almost there. Only in Flow control and recursion it beats Safari, the rest needs to improve, however, it’s improved a lot comparing to the previous version of Firefox.

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.

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.

Nuevo Mashup – MapMyName.com

Este Mashup lo encontre via un update de Huguito en Twitter.

Super sencillo, de hecho hay herramientas similares, pero para que bloggers sepan de donde vienen sus visitantes, esto es simplemente una sola pagina para que todo el mundo se registre en el mapa, es un mashup hecho con Google Maps.

Al momento de unirme no habian mas de 2000 personas registradas, vamos a ver como escala a medida que se registre mas gente.

Internet Explorer Javascript vs Firefox: AJAX Error Recovery in Firefox

After a good 4 hours or more, we finally found the error, it was our bad, but Firefox was helping us, Internet Explorer was keeping the standards but not reporting a warning or recovering from our fault…

We’re currently using a complex ajax call that needs to pass a bunch of variables that have been set on smarty (don’t ask why please)… to make it easy, we decided to do:

$all_smarty_variables = $smarty->get_template_vars();
$jsonString = $jsonEncode->encode($all_smarty_variables);

There’s this thing thats way better than XML to pass information about objects… its called JSON, it’s basically a way for Javascript to serialize its objects in strings, you can send and receive these strings via AJAX requests, and just eval them, or have JSON libraries on your favorite language used on the server side to unmarshall, and re-instanciate the objects that come from javascript.

So… in short words, no need for XML to send and receive objects, no more parsing crap, plus I would say the transfered data is much less. If you don’t think I’m on the right track, monitor the AJAX requests that GMail does, you’ll see some JSON action, or probably a custom implementation of google, they don’t send XML… why do that when you can send objects…

So now that I spent two paragraphs selling you JSON to do your remote procedure calls, I’ll tell you the odity.

As always everything was working fine with us doing our remote call and sending our big ass string in Firefox.

But when we tried in IE, it didnt work.

We tried adding slashes, removing slashes, htmlfying it, you name it we tried it.

After good 4 hours, we found out IE is strict about the size of URL requests done via GET (which makes sense, 1024bytes probably)…
but in any case, our (S)AJAX call worked just fine with Firefox

We went to Sajax.php and saw the following config…

$GLOBALS['sajax_request_type'] = 'GET';

So yeah, we made that a ‘POST’ request type and it worked, it was our bad.

Is this one point in favor of IE for keeping HTTP real? Is this one point in favor of Firefox developers for probably checking the request URL ‘s length before doing an AJAX GET and arbitrarily changing the method to POST?

You decide.
You’re a good geek if you are still reading this, hope you feel me.