jQuery Plugin: A 1kb Simple Slider for Images + Description

I recently set out to find a good slideshow for our homepage, but most of them are monsters, with 20kb code, no thanks…
The simples/best solution i found was the s3Slider somewhat simple and looks good.

But after it started behaving silly (sliding to fast/slow, hanging on mouseover) I decided to fix it and discovered a pile of spaghetti. So here is my s3_slider rewrite download that is smaller(now ~1kb) / simpler / maintainable and more easy to setup! Demo of the new version

Parsing RSS Feeds via Googles JS Feed API

So far we parsed our feeds with the acts_as_feed Rails plugin but as long as you only want to show them to users, there is an easier alternative: Googles JS Feed API!

Result

rss feed through google rss api

(The Example uses jQuery)
Example

<script type="text/javascript" src='http://jqueryjs.googlecode.com/files/jquery-1.3.1.js'></script>
<script type="text/javascript" src='http://www.google.com/jsapi?key=YOUR_API_KEY'></script><script>
google.load("feeds", "1");
$(function(){
  var feed = new google.feeds.Feed("http://rathershort.weblo.gg/rss.xml");
  feed.load(function(result) {
    if (result.error)return;
    $feed = $('#feed_entries');
    for (var i = 0; i < 3; i++) {
      var entry = result.feed.entries[i];
      $feed.append(
        '<div class="home_container_item">'+
          '<h3><a href="'+entry.link+'">'+entry.title.truncate(25)+'</a></h3>'+
          '<div class="small_gray">'+entry.publishedDate.toDate().formatted()+'</div>'+
          '<div>'+entry.contentSnippet.truncate(60)+'</div>'+
          '<br>'+
        '</div>'
        );
      }
    });
  });

//DATE
Date.shortMonths = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
Date.prototype.formatted = function(){
  return this.getDate()+' '+Date.shortMonths[this.getMonth()]+' '+this.getFullYear();
};

//STRING
String.prototype.toDate = function(){
  var d = new Date();
  d.setTime(Date.parse(this));
  return d;
};

String.prototype.truncate = function(to_length){
  if(to_length >= this.length)return this;
  return this.substring(0, to_length-3)+'...';
};
</script>

Unobtrusive Autocomplete Rails Plugin

Auto complete solution, with customizable results (return just the word or word+id…) and no framework dependency, just use a plain text_field + class=> autocomplete and every autocomplete libary you like (included: jQuery).

# Controller
class UserController < ApplicationController
  autocomplete_for :user, :name
end

#Customized....
autocomplete_for :user, :name do |items,method|
  render :text => items.map{|item| "#{item.send(method)} -- #{item.id}"}.join("\n")
end

# View
<%= f.text_field :auto_user_name, :class => 'autocomplete', 'autocomplete_url'=>autocomplete_for_user_name_users_path %>

# Routes
map.resources :users, :collection => { :autocomplete_for_user_name => :get}

#JS
#any library you like
#(includes examples for jquery jquery.js + jquery.autocomplete.js + jquery.autocomplete.css )
jQuery(function($){//on document ready
  //autocomplete
  $('input.autocomplete').each(function(){
    var input = $(this);
    input.autocomplete(input.attr('autocomplete_url'));
  });
});

#Model(input/output association)
class User
  find_by_autocomplete('name')
end
class Post
  autocomplete_for('user','name') # auto_user_name= + auto_user_name
end
.

Not as thought free as the default version, but gives you a lot more control.

script/plugin install git://github.com/grosser/simple_auto_complete.git
README

Clean TicTacToe with jQuery

I needed a simple Tic Tac Toe game for a easter egg in one of our products, but all games out there are a horrible code mess (think html 3.0 style *urgs* with js calls everywhere and inline styles *urgs*) so i took the best one and refactored all js/css out of the code, and here it is, still ugly code, but it will keep your namespace clean!

Have fun!

TicTacToe Source(rename to zip and extract)

jqUnit the jQuery Test Framework

My last project used jsUnit, but after some searching around, i found a great alternative: jqUnit!

It is a simple wrapper around the jQuery testrunner, so it is possible to run it with any library. And it is jsUnit compatible, so you can reuse all old tests.

Other features:

• simple, just write test(‘it should find ids’,function(){ok(true)})
• very light syntax ok(value,msg), equal(actual,expected,msg)…
• DOM reset after every test
• clean output, that can be opened/closed by clicking test-names
• real user interaction ca be simulated with triggerEvent

Download Source and Demo