If you ever used autocomplete.ui plugin from jQuery UI and have an array with lots of suggestions you'll see that the solutions provided by the plugin are not always satisfactory. You can add a scrollbar to the suggestions box by using a CSS hack, but even with that, you'll have to render a big HTML that can be annoying on slow machines (mobile devices, for example).

I was working on a web site recently that had to be displayed on mobile devices and needed an autocomplete. But the suggestions array was big. A lot. This caused some problems on the mobile devices as they were behaving very slow, and the default plugin configuration doesn't allow you to specify a maximum number of items to show in the suggesstions box.

So I decided to do a dirty hack into the plugin code to add this behaviour, adding a max property to the options to be able to limit the number of suggestions to show.

It's not a perfect solution, because it should be implemented as a subclass or something, but if you need a fast solution, this is the way to go. You can find the code in my GitHub repository fork of jQueryUI. You can check the commit to see the changes I made.

I was developing an application recently that needed some king of horizontal bars to be drawn on a web page. I found the jQuery Progressbar plugin and found it it was something similar to what I wanted to achieve, so I took some spare time and modified it to convert it in a plugin I could use in my app. The result is the jQuery Bars plugin. It's a pretty simple plugin that will take a div and convert it into a horizontal bar, in which you can change the background color, the actual bar color, the duration of the animation and the height and width of the bar.

You can check a how it works and looks in this simple test I uploaded. It can be useful if you ever have to shown some kind of a percentage bar in a chart and you need a bit more customization that jQuery UI Progressbar gives you.

The plugin is dual licensed in MIT and GPLv2, the same license as jQuery, so feel free to use it or modify it at your will.

Today I was working on a web site that needs to retrieve some RSS feed over the internet. Since the web page has no server (HTML + javascript only) I couldn't access the feed from the server side. Also, because of the Cross Domain limitation of Ajax requests, I couldn't access the RSS in the client either. I searched Google for an API and found the Google Feed API, which does exactly what I want. However, because (I think) Google caches the RSS feed you request, there was a significant delay (about half an hour) between the update of the RSS contents and the RSS provided by Google (the feed was updated in a per minute basis, as it was a CoverItLive event). Seeing I couldn't access really recent posts from the feed using Google, I decided to implement my own RSS API using JSONP in a ruby on rails environment, since having an external server act as a proxy was allowed for the overall solution.

The tools I needed I got from those two websites: http://rubyrss.com/ for a RSS parser, and http://blogs.sitepoint.com/2006/10/05/json-p-output-with-rails/ on how to build a simple JSONP response on the server side.

Basically you have to start creating a new controller that will handle the JSONP requests. In my case I just added a 'Feed' controller:

$ script/generate controller Feed

Then you edit the app/controllers/feed_controller.rb file and start coding. We will assume that the request will come in this form: http://server/feed/get?callback=some_callback&url=the_url_of_the_feed. Having this information, the controller code is pretty straightforward.

class FeedController < ApplicationController
  
  require 'rss/1.0'
  require 'rss/2.0'
  
  def get
    begin
      url_contents = Net::HTTP.get(URI.parse(params[:url]))
      rss = RSS::Parser.parse(url_contents, false)
      json = { "error" => false, "feed" => rss }.to_json
    rescue
      json = { "error" => true }.to_json
    end
    respond_to do |format|
      format.js { render_json json }
    end
  end

  def render_json(json)
    callback = params[:callback]
    response = begin
      if callback
        "#{callback}(#{json});"
      else
        json
      end
    end
    render({:content_type => :js, :text => response})
  end
end

The first two lines are the requirements for the RSS module, which will allow us to parse a RSS feed. After that, we start with the get request. In there, we use the Net::HTTP.get() method, which will retrieve a URL content using a GET request and return its contents. To do so, we need to pass it an uri parameter, which we can get from the entire URL using the method URI.parse(). After this call, we have the XML of the RSS feed in url_contents. What we have to do now is build an RSS object with this XML. We'll do that by calling RSS::Parser.parse(). If you wish to do some modifications to the RSS contents, now is your change. In this simple example we'll simply bulk it all to the response.

To build the response, we need a JSON object. If everything went as expected, we can create a JSON object by simply creating a ruby associative array and calling the to_json method on it:

json = { "error" => false, "feed" => rss }.to_json

If, on the contrary, we got an error (bad URL, bad RSS, whatever), we simply return the same JSON object with the error property set to true (that's done in the rescue clause).

After we have this JSON object built, we simply have to output the results. To do so, we use the help of a method called render_json which we have added to the controller code. In this method we simply output the JSON if we provide no callback (this means no JSONP), or either a padded JSON (hence the name JSONP) with the callback name followed by the JSON data. In either case we render the results as a js type.

For more detailed information on how JSONP works, check http://en.wikipedia.org/wiki/JSON#JSONP, but what you basically need to know is that when you do a JSONP request what you're really doing is retrieve a chunk of javascript code that will be run on your client, so be aware of the security issues you can have here.

If you've tried to install dropbox-nautilus from the source found in the <a href=http://www.dropbox.com>Dropbox</a> website, you'll find that you can't successfully complete the ./configure step of the package due to an error of the script not finding pygtk. This is an issue with Archlinux because of the way python binaries are handled in this distribution. However, you can use the AUR packages to install dropbox and its integration with Nautilus thank to the people that tweaked the scripts to work with Arch.

The first step you have to take is download the AUR packages. You'll need to download both dropbox and nautilus-dropbox. Save both .tar.gz files at you preferred location and uncompress them using this command:

tar xvfz <filename.tar.gz>

Obviously, change <filename.tar.gz> with the filenames you have downloaded. Each tar command will create a folder. Go to the dropbox folder and run this package:

makepkg -s

This will build a package and install the required dependencies while doing it if needed (it will ask for your root password if you're doing this without being root). If everything went ok, you'll find a file with the extension .xy in the folder you're in. This is what you need to install, using our beloved pacman (use sudo if you're not root):

pacman -U <filename.xy>

This will install dropbox. After this, do the same for the other package: nautilus-dropbox. makepkg -s, pacman -U <filaneme.xy> and you're done, you have Dropbox integrated with Nautilus. Just start Dropbox from your Applications menu and enjoy the service!

If you wonder how to make a GitHub (and other websites) like routes to access to hierarchical paths or files, here's the way to do it in ASP.NET MVC. GitHub is a GIT hosting service, and allows you to browse the repositories. When doing so, it uses a path as a routing parameter, as seen in this URL: https://github.com/erikzaadi/GithubSharp/blob/master/Core/Models/Commit.cs. This includes slashes and so to represent the directories, and is a parameter that depends on the file location inside the repository. A route like this can be done in ASP.NET using the called catch-all parameter.

The catch-all parameter allows you to use a wildcard on a route, so it takes everything after a given route as a single parameter. You can find the explanation of this feature in the ASP.NET Routing MASDN help page.

All you need to do to make a route like the one in the example to work is add this code to your Global.asax file, in the RegisterRoutes method:

routes.MapRoute(
    "Blob",
    "{*path}",
    new { controller = "Blob", action = "GetContents" }
);

This will pass the controller Blob a parameter called path that will contain the parameter you want (in the example that would be master/Core/Models/Commit.cs. All you have to do now is use this parameter as you wish so you can access the desired file and show it's contents on a web page.