Thomas Fuchs
Hi, I'm Thomas Fuchs. I'm the author of Zepto.js, of script.aculo.us, and I'm a Ruby on Rails core alumnus. With Amy Hoy I'm building cheerful software, like Noko Time Tracking and Every Time Zone and write books like Retinafy.me.
   Want me to speak at your conference? Contact me!

Austrian comedy podcast – Radio Koffer by Golch and Flubis

July 17th, 2005

Get some nice “Witz und Musik” with the comedy radio show two friends of mine do: Radio Koffer!

Radio Koffer – Die Sendung mit dem Namen (Odeo, german language)

Visit the site too, it’s a Ruby on Rails Typo weblog of course. Hopefully we get to customize it by end of July or so. 🙂

script.aculo.us wishlist and development Wiki page

July 15th, 2005

There’s a new page on the Ruby on Rails Wiki to have some overview about what your wishes are for addtions in upcoming releases of script.aculo.us.

Addtionally, infos on current in-progress component developments (like the coming-soon addition of sortable trees) can be found there.

For bug reports and general discussion, please use the Rails-spinoffs mailing list.

Agile Web Development with Rails – final version available!

July 13th, 2005

The final version of the required reading for Rails developers book, Agile Web Development with Rails is now available!

Maybe help raise the sold in sixty five countries to include some more locations. The sun never sets in Rails land (as you can experience on the ever growing IRC channel, too).

Good work, Dave!

Ruby on Rails 0.13 released – 225 new features and fixes!

July 6th, 2005

And it’s hot, with loads of new features, improved performance, countless fixes and tweaks—simply a must have!

Read the offical announcement!

Rails 0.13 – Live AJAX demo site

July 6th, 2005

With the imminent release of Ruby on Rails 0.13 (the beta gems release candidate is out already!) comes my brand new demo site to show you what you can do in just a few lines of code.

So, hop over to http://script.aculo.us/demos/ to get a grip on the new AJAX helpers for auto completing text fields, sortable elements and drag-and-drop.

AJAX-enabled shopping cart, the movie

July 2nd, 2005

With the new drag-and-drop helpers coming with Ruby on Rails 0.13, you’ll be able to silly easily do stuff like this:

You know the drill, watch the video!

The above demo amounts to about 25 lines of code, including database acccess, session-based cart storage, add/remove items handling and the view rendering code (static HTML and CSS not counted).

It relies on the brand new draggable_element and drop_receiving_element helpers, that internally use the script.aculo.us libraries.

The code for making the product images draggable look like this:


<% for product in @products %>
  <%= image_tag "/images/products/product#{product.id}",
        :id => "product_#{product.id}",
        :alt => product.title,
        :class => "products"  %>
  <%= draggable_element "product_#{product.id}", :revert => true %>
<% end %>

And the cart drop handling code amounts to two helper calls:


<%= drop_receiving_element "cart",
      :update => "items", :url => { :action => "add" },
      :accept => "products", :hoverclass => "cart-active",
      :loading => "Element.show('indicator')",
      :complete => "Element.hide('indicator')" %>
<%= drop_receiving_element "wastebin",
      :update => "items", :url => { :action => "remove" },
      :accept => "cart-items", :hoverclass => "wastebin-active",
      :before => "Element.hide(element)",
      :loading => "Element.show('indicator')",
      :complete => "Element.hide('indicator')" %>

A partial serves to list the items in the cart:


<% session[:cart].each do |product,quantity| %>
<div>
  <% quantity.times do |i| %>
    <%= image_tag "/images/products/product#{product}",
          :class => "cart-items",
          :id => "item_#{product}_#{i}" %>
    <%= draggable_element "item_#{product}_#{i}",
          :revert => true %>
  <% end %>
  <span class="title">
  <%= Product.find(product).title + " (#{quantity})" %>
  </span>
</div><% end %>

Hope you put this stuff to good use!

AJAX-enabled sortable elements in Rails, the movie

July 1st, 2005

To sweeten the waiting time to the next Rails release, here’s a short movie showing the new sortable_element helper in action:

AJAX sortable element movie

The code for this is actually a one-liner (including the effect). In your view do:


<%= sortable_element 'list',
      :update => 'list-info',
      :complete => visual_effect(:highlight, 'list'),
      :url => { :action => "order" } %>

The list element is just a normal HTML unordered list (but you could do this with other element types, too). The list items have ids themselves, in the form of something_number, e.g. item_1.

When the list order changes by dragging-and-dropping, these numbers will be posted to the given action via AJAX.

The referenced action order then just reads out the order by querying params[:list], which is an array consisting of the numbers in the current order.

Autocompleting text fields in 3 minutes video [Updated 2x]

June 29th, 2005

Actually, it’s less than 3 minutes. But watch the video for yourself:

Autocompleting text fields with 2 lines of code video

The video shows how to use auto_complete_for and the text_field_with_autocomplete helper in the up-and-coming next Ruby on Rails version.

Update (second version of video): With a tiny bit more effort, you can even do something like this:

Customized autocompleting text fields with some more lines of code video

2. Update: A more detailed tutorial and another video on how to use this can be found on Adrian Agafiteis weblog!

The AJAX autocompleter itself is a part of the script.aculo.us web 2.0 javascript libs—and can be used independently of Rails (if you really want to, that is).

New script.aculo.us beta

June 28th, 2005

A new beta version of script.aculo.us is ready for downloading:

So, what’s new inside?

  • Updated to Prototype 1.3.0
  • Added autocompleting text fields w/ AJAX
  • Added Effect.Transitions.pulse
  • Added Effect.Pulsate and Effect.Fold effect by Justin Palmer
  • Added transitions by Mark Pilgrim: .full, .none
  • Added effects by Mark Pilgrim: Effect.Grow, Effect.Shrink
  • Added Element.setContentZoom() function
  • Added expanded Effect.Highlight (“Yellow Fade Technique”) to have user-defined colors and autodetecting the background color
  • New overridable options on Draggables/Sortables: zindex, starteffect, reverteffect, endeffect

Important bugs nailed:

  • Fixed sortables that are absolutely positioned
  • Fixed draggables on pages with no droppables
  • Fix a Gecko engine flicker on Sortables in dragdrop.js
  • Sortable.serialize now honors the only option on Sortable.create

which use the AJAX capabilities of Prototype.

The latest Ruby on Rails trunk has dedicated helper support for this.

Documentation will follow when I release a 1.0 version.

Autocompleting text fields in next Rails version

June 26th, 2005

For some additional sugar on top of the next Ruby on Rails version which is due out soon, next to the script.aculo.us effects and drag-and-drop scripts, there are yummy AJAX-powered autocompleting text fields (which will also be released on script.aculo.us soon).

Do Google Suggest with 2 lines of code.

For a quick look on what you can do with this, sit back and watch the video.