2010-10-30 16:50

For the Bizou php gallery, I looked for different ways of preloading next image in “view” mode (example).

With Firefox it’s very simple. Just use the following element and the browser will preload your contents.
Contents are preloaded in background, once the whole current page is loaded.

 [html]
<link rel="prefetch" href="/images/nextimage.jpg" />

Problem: only Firefox supports this currently.
Note: a ticket is opened about this in the Chromium project.

For other browsers, use some Javascript triggered by the window.onload event:

 [javascript]
<script type="text/javascript">
window.onload = function() {
    // for images
    var im = new Image();
    im.src = '/images/nextimage.jpg';
    // and for other content
    var req = new XMLHttpRequest();
    req.open('GET', 'nextpage.php', false);
    req.send(null);
};
</script>

Beware of HTTP cache headers sent by the server to the browser.
To preload correctly PHP pages, make your script send an Expires header:

header('Expires: '.gmdate('D, d M Y H:i:s \G\M\T', time() + 3600));

Then, for a simple browser detection from your PHP script:

<?php if (strpos($_SERVER['HTTP_USER_AGENT'], 'Firefox') !== false) { ?>
<link rel="prefetch" href="nextpage.php" />

<?php } else { ?>
<script type="text/javascript">
window.onload = function() {
    var req = new XMLHttpRequest();
    req.open('GET', 'nextpage.php', false);
    req.send(null);
};
</script>
<?php } ?>

Links :

2010-10-30 16:50 · Tags: , , , , ,
2010-04-14 22:10

Bookmarklets are links containing Javascript code. They are useful when you save them in your bookmarks, in order to achieve some processing on the current page displayed in your browser.

It is possible to create bookmarklets authenticating you on a site with a login form. Note that it requires storing your login and passwordin the bookmarklet source code.

Login bookmarklet example

The bookmarklet code on several lines:

javascript:
document.body.appendChild(document.createElement('div')).innerHTML='
<form name="BletForm" method="POST action="http://www.woozweb.com/loginctrl">
<input type="hidden" name="login" value="MONLOGIN" />
<input type="hidden" name="pass" value="MONPASS" />
</form>';
document.forms['BletForm'].submit();

This code generates a POST HTTP request with two parameters, from your bookmarks. Writing this kind of code is easy for Web developpers, but hard for regular users.

So I wrote a bookmarklet that itself can generate login form bookmarklets, easily.

It’s very simple:

  1. Drag the generator bookmarklet in your bookmarks:
    generator
  2. Open a web page with a login form.
  3. Click on the generator in your bookmarks: a message appears next to the form.
  4. Fill in the login form.
  5. Click on the generation link: the bookmarklet appears.
  6. Drag the generated bookmarklet in your bookmarks.
  7. Finally, test your automatic login bookmarklet!

The generator bookmarklet even works with the login screen of my bank account. Obviously, your login information is stored directly in the bookmark, which is not very secure…

Notes:

  • Only tested with Firefox. Some work to make it compatible with Safari and IE.
  • Find a way to use Firefox password storage to retrieve the password.
  • If the bookmarklet doesn’t work for you, give me some feedback.

Links:

2010-04-14 22:10 · Tags: , ,
2009-07-30 15:46

In the vast majority of cases, http redirections are installed on the http server.
However, the redirection cannot be installed in the http server config in some cases.

Example: mobile phone redirection.
We want to redirect all mobile phones from http://www.mysite.com to http://mobile.mysite.com

The client type is done with the HTTP User-Agent header sent by the browser. Problem: Squid will put in cache only one version of the query to http://www.mysite.com. The response from the cache will probably be the home page, not the 301 redirection.

It’s also possible to configure the HTTP server to add the Vary: User-Agent header to tell Squid to store one version by browser. With this the cache will be split (one cache per browser), lowering a lot the cache efficiency.

Here is the solution:

###################################
# we redirect mobiles to mobile.mysite.com
url_rewrite_program /etc/squid/redirect_mobile.sh

acl symbian browser Symbian
acl iphone browser iP(hone|od)
acl mobile_url dstdomain mobile.monsite.com

url_rewrite_access deny mobile_url
url_rewrite_access allow symbian
url_rewrite_access allow iphone
url_rewrite_access deny all

And the /etc/squid/redirect_mobile.sh script simply contains:

#!/bin/sh
while read line
do
        echo "301:http://mobile.mysite.com"
done

Notes:

  • The mobile detection method is far from being exhaustive. If you know a simple method covering 95% of browsers, I’m interested!
  • With more recent Squid versions (3, 2.HEAD), you can use a better method using internal redirectors.

Links:

2009-07-30 15:46 · Tags: , ,