Lately I’ve been updating my Lighthouse++ script quite frequently. Every time I push a new version out, I have to attempt to notify everybody and post on my blog/twitter - this is a pain and some people are missing out on new or important features.
I looked into how to do some cross-site AJAX requests to check for a new version, but it really isn’t possible with a Greasemonkey script in Chrome, due to how Chrome manages its sandbox.
I tested a LOT of third party Javascript libraries that claimed to bypass any and all issues (with James Padolsey’s solution looking amazing) — but no dice, no matter what I tried.
I came up with an ingenious plan to use a PHP proxy hosted on my server, but access it via an image — if the image “loaded” then the script version was current — if not (a sneaky 404), it was out of date.
The script works like a charm, you can try the raw version here; anything other than (at the time of writing) 0.61 will cause a 404 error, which is then passed on to my script, and a NEW VERSION AVAILABLE message is displayed.
Below is the source code for my script — it simply references a 1x1 transparent PNG image, and a blank .txt file — very easy for anybody to set up (although note it will only work if your versions are numbers):
<?php
// version files
$file = 'version.txt';
$image = 'version.png';
$script = 'http://userscripts.org/scripts/show/81657';
// check last modified date of version.txt, only do the version check every 6 hours max
if($_GET['force'] || (time() - filemtime($file)) >= 21600) {
// get contents of userscripts page
$html = trim(strip_tags(file_get_contents($script)));
// extract the version
preg_match('|Version:\s+([0-9\.]+)\s*|', $html, $result);
$version = trim($result[1]);
// update version.txt
$fo = fopen($file, 'w+');
fwrite($fo, $version);
fclose($fo);
}
// grab the version from the version file if we don't already have it
if(!$version) $version = trim(file_get_contents($file));
// compare it to the version we were provided
if($version == $_GET['version']) {
// same version, output a picture
header('Content-Type: image/png', true);
header('Content-Transfer-Encoding: binary');
header('Content-Length: '.filesize($image), true);
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT");
readfile($image);
exit;
}
else {
// different version, 404
header('HTTP/1.1 404 Not Found');
exit;
}
?>
With a super basic .htaccess file (but you don’t need this):
Options +FollowSymlinks
RewriteEngine On
RewriteRule version.png version.php [NC,QSA,L]
And the Javascript (jQuery) code looks something like this:
$("<img />").appendTo("body").bind("load", function() {
// version up-to-date, everything is fine
$(this).hide();
}).bind("error", function() {
// version out of date!
$("#lpp-advert").append(" — NEW VERSION AVAILABLE!");
$(this).hide();
}).attr("src", "https://lab.bandit.co.nz/scripts/lighthouseplusplus/version.png?version=" + version);
You can try it, and my script out at http://userscripts.org/scripts/show/81657

Have updated Lighthouse++ again, this time with more inline editing (and some performance improvements).
Grab it here: http://userscripts.org/scripts/show/81657
To enable it, open your Keychain Access utility in the Applications / Utility folder. Under the “View” menu at the top, select “Show Status in Menu Bar.”
Like a lot of developers, we start every HTML project with the same set of HTML and CSS templates. We’ve been using these files for a long time and we’ve progressively added bits and pieces to them as our own personal best practices have evolved.
Now that modern browsers are starting to support some of the really useful parts of HTML5 and CSS3, it’s time for an update, and we thought we’d put it out there for everyone to use. By no means do we see this as the end-all and beat-all, but we think it’s a fairly good starting place that anyone can take and make their own.
This is a surprisingly interesting article. Bananas are awesome!
This is actually awesome
Are you trying to use .wrap() in jQuery only to find it isn’t working?
Something the docs don’t tell you is that you can only wrap elements that are attached to the DOM! Important.
Take for example:
$("<a href='#'>My Link</a>").wrap("<li></li>").appendTo("ul:first").click(function() { ... } ); // will not work
$("<a href='#'>My Link</a>").appendTo("ul:first").wrap("<li></li>").click(function() { ... } ); // will work fine!