Implementing an image gallery using facebox and will_paginate

On VisitaCSA we’re using defunkt’s facebox to show places images at large. Facebox is a great general-purpose lightbox, because it is fast, stable, is based on jQuery and has got a really clean API.

But we needed more than a simple display lightbox, because we wanted our users to navigate easily between all images, possibly without modifying facebox at all. The solution turned out to be pretty simple, thanks also to the will_paginate plugin we were already using. It all burns out to have:

• A Photo model, instrumented with the has_attachment method
• Resource routes for photos (map.resources :photos, :only => :show in config/routes.rb)
• A show controller method in the PhotosController that calls .paginate with a :per_page argument of 1
• An HTML view for the photo resource, that has pagination controls using the will_paginate helper
• Some jQuery code hooks onto the pagination links and make the browser load via AJAX the next photo directly into the facebox.

continue reading >>>

The obfuscated blinking border

This is the obfuscated piece of Javascript code that implements the red border and loads Google Analytics on the Segmentation Fault site :

     77   <script type="text/javascript">// <![CDATA[
     78   var theLoadSequenceToRunAfterTheDocumentHasBeenLoaded = function() {
     79
     80     // The blinking border
     81     //
     82     (function(t){// (C) 2009 vjt <segmentation-fault@core-dumped.info>
     83       var $=function(_){return(document.getElementById(_));};var ee =[
     84       $('n'),$('s'),$('w'),$('e')],e,_=true;setInterval(function(){for
     85       (var i=ee.length;i&&(e=ee[--i]) ;_) {e.className=e.className?'':
     86       'b';}},t*08); /* .oOo.oOo.oOo. ^^^^^ -*** * *** *** *******- **/
     87     })((4 + 8 + 15 + 16 + 23 + 42) * Math.PI / Math.E + 42/*166.81*/);
     88
     89     // Google analytics
     90     //
     91     try{var pt=_gat._getTracker("UA-1123581-3"); pt._trackPageview();}
     92     catch($aMarvellousErrorThatWontBeDisplayedOnTheUserBrowserAtAll){}
     93
     94   }// end of theLoadSequenceToRunAfterTheDocumentHasBeenLoaded routine
     95   //]]></script>

To me, it looks like a contrived melody, or complicated poetry. It’s evil engineering, I know. But when I was writing it, I felt exactly the same I did while writing verses with rhymes. _why’s words are absolutely pertinent here: “until programmers stop acting like obfuscation is morally hazardous, they’re not artists, just kids who don’t want their food to touch.”.

You can view the code with syntax hilighting on github, or with the “View source” function of your browser while you’re on the segfault site. :)

How to mirror a static copy of the opensource.org website

I currently maintain the italian mirror of the Open Source Initiative web site, and today I realized that the script I wrote some months ago wasn’t doing its job well.. because the CSS files weren’t downloaded at all, causing a rather unpleasant rendering of the site.

To mirror opensource org I’m currently using the plain’ol GNU Wget -r—mirror and so on. While the good’ol wget downloads each page prerequisite defined in the HTML source, it doesn’t support @import CSS rules, and doesn’t download images referenced in CSS with url() rules.

BTW, nothing that can’t be resolved with some regex-fu: that’s why I’m sharing the script I’m currently using to mirror the opensource.org web site, hoping it will generate either a new mirror or some insights on how to do this job better :).

The script: update_opensource_mirror.sh

Enjoy! :)

Continuous evolution

releases$ du -sch *
7.6M    20081209132347
7.0M    20081209133350
7.6M    20081209144343
7.1M    20081209145133
7.1M    20081209151843
7.1M    20081209163013
7.1M    20081209175506
7.1M    20081209183553
7.1M    20081211122939
8.6M    20081212190026
8.3M    20081212201852
8.3M    20081212203943
8.3M    20081212205430
8.3M    20081213014847
8.3M    20081213020357
8.4M    20081213163428
8.4M    20081213173633

continue reading >>>