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 boils down to having:

• 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 makes the browser load via AJAX the next photo directly into the facebox.

Here is the relevant code, simplified from what’s actually online, because the photo model is actually polymorphic (using STI) and many different collections are handled by the photos controller (photos, flyers, etc) for different models, with different thumbnails :P.

Model [app/models/photo.rb]¶

class Photo < ActiveRecord::Base
  has_attachment :storage => :file_system, :path_prefix => 'public/photos',
    :processor => 'ImageScience', :thumbs => { :thumb => '600x800' }
end

Controller [app/controllers/photos_controller.rb]¶

class PhotosController < ApplicationController
  layout nil
  before_filter :find_place

  # The photo gallery core is here
  def show
    photo = Photo.find(params[:id])
    page = params[:page] || @place.photos.index(photo) + 1
    @photos = @place.photos.paginate(:per_page => 1, :page => page)
    @photo = @photos.first
  end

  def find_place
    @place = Place.find(params[:place_id])
  end
end

View [app/views/photos/show.html.erb]¶

<div class="photo">
  <div style="width: <%= photo_width(@photo) %>px; text-align: center;">
    <%= next_photo_link_for @photo, :in => @photos %>
  </div>
  <p><%=h @photo.title %></p>
  <p>
    <%= will_paginate @photos, :prev_label => '&nbsp;', :next_label => '&nbsp;' %>
  </p>
</div>

The image_size gem is needed to correctly let facebox align itself to the center of the window.

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

var theLoadSequenceToRunAfterTheDocumentHasBeenLoaded = function() {

  // The blinking border
  //
  (function(t){// (C) 2009 vjt <segmentation-fault@core-dumped.info>
    var $=function(_){return(document.getElementById(_));};var ee =[
    $('n'),$('s'),$('w'),$('e')],e,_=true;setInterval(function(){for
    (var i=ee.length;i&&(e=ee[--i]) ;_) {e.className=e.className?'':
    'b';}},t*08); /* .oOo.oOo.oOo. ^^^^^ -*** * *** *** *******- **/
  })((4 + 8 + 15 + 16 + 23 + 42) * Math.PI / Math.E + 42/*166.81*/);

  // Google analytics
  //
  try{var pt=_gat._getTracker("UA-1123581-3"); pt._trackPageview();}
  catch($aMarvellousErrorThatWontBeDisplayedOnTheUserBrowserAtAll){}

}// end of theLoadSequenceToRunAfterTheDocumentHasBeenLoaded routine

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 highlighting on github, or with the “View source” function of your browser while you’re on the segfault site. :)

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! :)

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
8.4M    20081213184749
8.5M    20081214171239
8.5M    20081214174058
8.5M    20081215122638
8.5M    20081215152408
8.5M    20081215171627
8.5M    20081215200430
8.5M    20081215205042
8.5M    20081215235659
8.5M    20081216000247
8.5M    20081216164820
8.6M    20081216200524
8.6M    20081216203210
8.6M    20081216210540
8.6M    20081217193227
8.6M    20081218174354
8.6M    20081218191803
8.6M    20081219152005
8.6M    20081219152907
8.6M    20081219155519
9.0M    20081219193433
8.6M    20081221173121
8.6M    20081221174616
19M    20081222035552
17M    20081222040347
17M    20081222055349
11M    20081222055633
14M    20081222055923
16M    20081222142851
11M    20081228152551
60M    20081228163752
11M    20090105191748
11M    20090106064448
11M    20090106184425
11M    20090106185528
11M    20090106204053
11M    20090106230526
14M    20090107001206
11M    20090107175246
11M    20090107175846
11M    20090107193832
11M    20090107194313
11M    20090107204045
11M    20090107204438
12M    20090109164048
11M    20090109185118
11M    20090112031351
11M    20090113104259
12M    20090113152213
12M    20090113171628
12M    20090113194223
12M    20090113194415
20M    20090113201919
12M    20090114180311
12M    20090114185735
12M    20090115071510
12M    20090115102500
12M    20090115131810
12M    20090115155944
12M    20090115183612
12M    20090116121148
12M    20090116125514
12M    20090116131343
12M    20090116170318
12M    20090116171428
24M    20090116173349
16M    20090118204113
14M    20090120151836
12M    20090122150700
12M    20090122155359
18M    20090122160455
78M    20090125055603
48M    20090126114022
14M    20090126143048
12M    20090126160105
12M    20090126160400
12M    20090126165339
22M    20090126170159
12M    20090126193506
12M    20090126194637
12M    20090126194859
12M    20090127142057
14M    20090127155906
52M    20090127180739
13M    20090129144356
12M    20090201141300
12M    20090201151016
13M    20090202114805
12M    20090203113750

Fascinating, nonetheless.

Another spin-off from the www.visitacsa.it website: a permalink_fu improvement that allows dynamic permalinks. I know it is an oxymoron, because permalinks should be .. well .. permanent! And because search engines index them, they should never change. But what happens when you publish something, your permalink is generated with permalink_fu using the title of your post, and after a couple of days you want to change the title, and the permalink under which the post is accessible as well?

Following the specification, your app should send out a 301 moved permanently HTTP status when accessing the old permalink and redirect the client to the new Uniform Resource Locator. That’s quite the same thing what my modification to permalink_fu does: whenever your post attributes are changed, the former and new permalinks are saved to the database, and you can enable your controller to generate 302 moved temporarily redirects when needed. In other words, it checks whether the requested URL is an old permalink, and automagically redirects the client to the new one.

Everything is done behind the scenes, and the plugin has also got nifty rake tasks to set up the Redirect model and associated migrations. And you can change its name, of course! :)

The 302 code was chosen because the 301 permanent status code has quite disruptive effects on search engines, but more discussion is welcome.

I recently wrote jQuery plug-in, that allows AJAX file uploads without using a fixed file input button. It achieves its goals by installing an OnMouseMove handler over the selected elements, and moving the input button under the mouse cursor.

The quote that inspired this code is: “If Muhammad won’t go to the mountain, the mountain will come to Muhammad”, the opposite of the more known proverb :).

EDIT 2023: CAUTION: these links are expired :-( It has been spun off from the Visita CSA application JavaScript codebase, see the gist for more information, and have a look at the live app code for an example of its usage.

Here is the source code:

//  ~ JavaScript Kung-FU, with an excess chunky bacon dose! ~
// This plugin allows seamless ajax file uploads without having
// a fixed file input button. It achieves this by installing an
// OnMouseMove handler over the interested elements, and moving
// the input button under the cursor. <<If Muhammad won't go to
// the the mountain, the mountain will come to Muhammad.>> :-).
//
// This approach is needed on the majority of browsers, except
// Safari, on which the coder is allowed to trigger a "click" 
// event onto an input type=file element. On other browsers,
// you can not, that's why the complicated mousemove approach
// was chosen.
//
// Either way, when the value of the input type=file changes,
// handlers are disabled, and a user-provided callback is then
// called (passed via the "upload" option). Handlers are then
// re-enabled again when the upload succeeds or fails.
//
// IE has additional problems, because, quite unexplicably,
// when submitting a form that causes a page load, the change
// event on the file input is triggered AGAIN, thus triggering
// a new file upload. To circumvent this, you can pass a "linked" 
// option, that contains the jQuery selector of the form, and
// whenever an input under this form is hovered, ajax upload
// handlers are temporarily cleared and thus the spurious form
// submission.
//
// The jquery Form plugin is a perfect companion of this one,
// because of its .ajaxSubmit method. Have a look at its home
// page: http://malsup.com/jquery/form/.
// 
// Have fun!
// - vjt@openssl.it
//
$.fn.ajaxFormUpload = function(options) {
  var positioning = { top: 0, left: 0,
    position: 'absolute', cursor: 'pointer', 'z-index': 2 };

  var form = $(options.form || '#ajax_upload');
  form.css(positioning)

  var input = form.find('input[type=file]');
  input.css($.extend(positioning, { width: '10px', opacity: 0, 'font-size':'0px' }));

  var hovering_element = null;

  var elements = $(this);

  var handler, event_;
  if ($.browser.safari) {
    event_ = 'click', handler = function() {
      hovering_element = $(this);
      input.click();
    };
  } else {
    event_ = 'mousemove', handler = function(event) {
      hovering_element = $(this);
      form.css({ left: event.pageX - 10, top: event.pageY - 5 });
    };
  }

  function enable()  { $(elements).bind(event_, handler);   }
  function disable() { $(elements).unbind(event_, handler); }

  input.change(function() {
    var element = hovering_element;
    if (!element) return;
    disable();

    options.upload(element, form);

    enable();
  });

  enable();

  if (options.linked) {
    $(document).ready(function() {
      $(options.linked).find('input').mouseover(function() { hovering_element = null; });
    });
  }
};

You can check it out on github.

When you install the developer beta of Windows 7, after the usual 3 reboots cycle, you are greeted with the following image:

It is the Siamese fighting fish, a beautiful tropical fish, but with an interesting characteristic: it is extremely aggressive. It is popular belief that two males fight each other even in the wild, but that’s not quite true. This belief descends from the behaviour of the fish in an aquarium, where the victor continuously attacks the loser, eventually causing the loser’s death.

Now, think about the software ecosystem as an aquarium. And think about Microsoft in this aquarium. The latest release of Microsoft OS has an aggressive fish as its default skin, and it is alone in this aquarium. And there’s no place for anyone else: they’ll fight whatever adversary, even if it’s from the same species.

What’s uncertain is .. whether they’ll succeed, or not? :). We’ll see!

The right session shows a document open on an aggregate audio device between soundflower (2ch) and a Creative SBLive with 6 channels: the flower receives sound input from iTunes and routes it to the card channels, using all the 6 speakers.

Effects have been added to improve the audio experience (details here: http://www.rottenbrains.com/?p=232). The right session also uses AUNetSend to stream audio onto the left session, connected to the built-in speakers of the macbook.

Result: stereo audio being played on eight channels. Audio Units are a really powerful instrument, well coded and well working.

[tks nextie for telling me about AUNetSend and AUNetReceive]

UPDATE 19-12-2008¶

Improving: there is no need to use NetSend and NetReceive to play on 8 speakers: an aggregate device composed of Soundflower 2ch, the USB 6ch SBlive and the Built-in output is enough!

Also, note the new bus: it’s required because the AUMatrixReverb effect added to the center channel to improve the audio stereophony actually takes two channels, so it overlaps with the following one (the LFE). But applying the effect to a bus does not exhibit this side effect.

Exactly the words that run around my mind these days:

http://www.readwriteweb.com/archives/the_end_of_online_anonymity.php

When we reach the point where online anonymity has ended, instead of getting to be who we really are, the fact that we’ve become so aware of the fact that we’re always being recorded, photographed, tracked, and traced, will have actually created a slightly altered personality instead. Like reality TV show contestants, the act of being observed will change our behavior. Our personal brand image will become our public identity and therefore our identity.

I think these words describe exactly the “facebook effect”.

What do you think?

If you’re wondering why the CCacheServer daemon, that caches in memory Kerberos tickets obtained via kinit(1) is NOT starting .. that’s because of a strange bug regarding the LimitLoadToSessionType specified in the agent .plist, located into /System/Library/LaunchAgents/edu.mit.kerberos.CCacheServer.plist on OSX 10.5 systems.

You simply have to comment out these two lines:

<key>LimitLoadToSessionType</key>
<string>Background</string>

And either

launchctl load /System/Library/LaunchAgents/edu.mit.kerberos.CCacheServer.plist

or reboot your system ;).

CCacheServer will then be instantiated when you do a kinit:

$ kinit
Please enter the password for vjt@DOMAIN.LOCAL:

$ klist
Kerberos 5 ticket cache: 'API:Initial default ccache'
Default principal: vjt@DOMAIN.LOCAL

Valid Starting     Expires            Service Principal
11/12/08 20:59:35  11/13/08 06:59:14  krbtgt/DOMAIN.LOCAL@DOMAIN.LOCAL
    renew until 11/19/08 20:59:35

The bug is strange because the LimitLoadToSessionType key actually should instruct launchd to automatically start up the daemon and run it once for every logged in user, when kinit asks its services. But, if the key is set in the .plist, a launchctl load on it fails with “nothing found to load”. Weird!