The Asciiquarium

Kirk Baucom just released some serious ASCII fish into the wild. Get asciiquarium 1.0 now!

Click here to see a movie of this in action.

You’ll need to install Terminal::Animation and it’s dependency Curses from CPAN. If you have trouble compiling the required Perl Curses CPAN module, see getting Curses to work on OS X.

Text effects

Want to take web presentations a level further? Create UI controls with some serious eye-candy?

Check out the demo.

The next version of script.aculo.us thus includes super-easy-to-use text tagification functions in addition to a sweetened effects engine that allows you to very easily call a series of effects on multiple elements with a given delay between the start of each effect.

Oh, and it’s compatible. Try it out and disable the styles and/or disable JavaScript.

More Internet Explorer woes

This time a completely other problem.

So, don’t use “tags” as an id attribute on your web sites.

Spread the word. IE is teh 3v1l!

Internet Explorer and AJAX image caching woes

Inserting chunks of HTML via AJAX is cool stuff, and speeds things up quite a bit. As long as you don’t happen to insert some images and you’re using Internet Explorer 6, that is.

Here’s the problem: Internet Explorer forgets to look into its own cache when inserting HTML via JavaScript DOM manipulation (read: if you use img tags or any tags with CSS background images, Internet Explorer will always try to redownload these images). Read the detailed account on this.

Microsoft says it’s designed that way. Well. Sure.

Also, the Cache-Control header, if set to something like private, max-age=86400 is not handled too well, as Internet Explorer will always try to revalidate the file (Safari and Firefox don’t, they will use their cached copy until the time given by max-age has elapsed, and only then will do the cache revalidation).

A workaround for this (not perfect, but as good as it gets) is to send proper Last-Modified, Cache-Control, and ETag HTTP headers, so Internet Explorer sends back an If-Modified-Since header trying to find out if it should refresh its cache. We can then just answer with a 304 Not Modified HTTP status, and IE will use the cached image anyway. (Note that IE suddenly seems to “remember” it has the image in the cache here!).

Of course, no Internet Explorer bug comes without proprietary extensions—and these should be used here to to get proper performance (and yes we’re breaking the HTTP standard, but let’s be pragmatic, ok?). Note that is the only way to tell IE to cache like the good guys do.

The ETag header allows for reusability of the cached content across sessions. (Note that basing the ETag on the file modification timestamp can be considered “weak”, because a file might be changed more than once a second. If you serve files that change that often, it’s probably better not to use caching to begin with).

If you’re using Ruby on Rails, here’s a piece of code that wraps around the send_file method (loosely based on this Rails wiki entry) and does the work for you (you’ll need edge Rails for this):

def send_file_cached(path, options = {})
  unloaded = false
  begin
    since = request.env['HTTP_IF_MODIFIED_SINCE']
    since = Time.httpdate(since) rescue Time.parse(since)
  rescue
    unloaded = true
  end
  modified = File.mtime(path)
  headers['ETag'] = modified.to_i.to_s
  headers.delete("Cache-Control")
  if unloaded or (since < modified)
    if options[:expires_in]
      expires_in options[:expires_in]
      # make IE behave
      if (request.env['HTTP_USER_AGENT'] || "").include? "MSIE"
        headers['Cache-Control'] =
          "post-check=#{options[:expires_in]}, " +
          "pre-check=#{options[:expires_in]}"
      end
      options.delete(:expires_in)
    end
    headers['Last-Modified'] = CGI::rfc1123_date(modified)
    send_file path, options
  else
    render :nothing => true, :status => '304 Not Modified'
  end
end

Call that from your action like this:

send_file_cached "path/to/file",
  :type => "mime/type", :expires_in => 2.weeks,
  :disposition => "inline"

If you’re on fastcgi on Apache like me, you’ll need to add

-pass-header If-Modified-Since

to your FastCgiServer directive in your Apache configuration. If you are on an other configuration, you also may need to adjust request.env['HTTP_IF_MODIFIED_SINCE'] to the correct one in your enviroment. Do a request.env.inspect to find out the name of the If-Modified-Since variable.

This sit-up should make for reasonably fast speeds with Internet Explorer and served-by-your-app images, with or without AJAX.

P.S. There’s an other bug in Intenet Explorer (unrelated?) that causes caching of images in CSS only happen with relative paths, so never use background-image:url(/images/blah.png) but do a background-image:url(../images/blah.png), relative to the path your CSS file is in.

Spreading source code

I’ve just put up a package of the spreading goodwill source code, so if you want to see what came out in our (less than one) day of hacking, you can do so here:

http://www.spreading-goodwill.org/show/29

Note: It’s not too pretty currently, but it works. 🙂

Canvas Invaders

The up-and-coming star of Rich Internet Applications might just be the canvas element—I’ve written on this before.

But is it capable enough for those rich controls and data views? It certainly seems so, as demonstrated in this little demo:

https://mir.aculo.us/stuff/canvas-invaders/index.html

Use cursor left/right to control your ship and press space to fire!

The demo also draws upon the latest script.aculo.us SVN trunk version for element building, event handling and the fade-in effect.

The background is a rotating “star field” showing how to use a simple 3d projection with the canvas element (hopefully there will be support for a 3d canvas element in the future, but specs on this remain to be written).

Note: Safari only this time, Firefox Deer Park seems to have some bugs left preventing it from working properly. Also note that the demo resizes your browser window.

Back to normal…

While I was on vacation (including visiting the Frequency festival, Stereo Total is great!), my server suffered from a power outage, but now everything is back running again.

Here’s the view from my hotel room in Schwarzindien on the Mondsee.

Coming soon: Continuous Integration with JavaScript

Jon Tirsen writes about Continuous Integration with JavaScript and how this will be a part of script.aculo.us. Basically, there’ll be some magic in the Rakefile for script.aculo.us (using WEBrick and AppleScript) and some additional magic in unittest.js to do this:

desc “Runs all the JavaScript unit tests and collects the results”
JavaScriptTestTask.new(:unittest) do |t|
  t.mount(“/lib”)
  t.mount(“/src”)
  t.mount(“/test”)

  t.run(“/test/unit/unittest_test.html”)
  t.run(“/test/unit/ajax_inplaceeditor_test.html”)
  t.run(“/test/unit/string_test.html”)
  t.run(“/test/unit/builder_test.html”)

  t.browser(:safari)
  t.browser(:firefox)
end

This will output a nice overview of what’s working as expected on what browser.

Using script.aculo.us autocompletion with Ruby on Rails

Amy Hoy has written up a tutorial article on how to get on speed with AJAX autocompleting text fields in Ruby on Rails and do some stuff beyond the basics. Keep it coming, Amy! 🙂

script.aculo.us catching on

script.aculo.us is catching on (hey, more than 2,800 people delicioused it!). Here are some quotes collected from the net:

Trying it out myself, I was waiting for the catch, you know, that bit where you realise getting this to work yourself was going to be much harder than you thought. But it never came. Within minutes you’ll be able to utilise all these cool effects yourself. –Renegade Zen

We’ve found that scriptaculous works wonderfully with Ajax and can be combined to create some stellar effects. –a comment on Ajaxian.com

I was blown away by all the cool new visual effects that were available. –Jake Tracey writing on the visual effects

Scriptaculous is pretty much amazing. Ridiculousy good source for some handy dandy Web 2.0, CSS, DHTML style tricks. Very lovely. –yewknee

This little gem is a collection (growing I hope) of super sweet Javascripting goodness. Like a refrigerated watermelon on a hot summer’s day.–dodoskido

Even more praise is available at the script.aculo.us wiki. Add your own!

To all of you out there, big thanks for the thanks! 🙂