• Installing xmonad in ArchLinux

    For some reason, the ArchLinux wiki is kind of outdated explaining how to install xmonad in Arch. Also, the new packages seem to have a bug and the xmonad installation won't work out of the box. Here you have detailed steps on how to install and run xmonad on ArchLinux. First of all, you need to install the Xorg server. Refer to Xorg for detailed instructions. After that, you'll need to install the xmonad packages, named xmonad and xmonad-contrib.

    pacman -Syu xmonad xmonad-contrib

    This will install xmonad and all the required dependencies. After that, if you want a fairly simple X setup, add the line xmonad to your ~/.xinitrc file (hopefully you'll be using a display manager that uses that file like SLiM). If you try this on a freshly installed ArchLinux system, though, it won't work. There are some missing steps to do. First of all, you need to create the folder ~/.xmonad.

    mkdir ~/.xmonad

    After that, you need to create a new xmonad config file, called xmonad.hs</em into that folder, so fire up your favourite editor and fill the file with this basic (empty) configuration: </p>

    import XMonad
    
    main = do
        xmonad $ defaultConfig

    Once you have you configuration file in place, it's time to rebuild xmonad:

    xmonad --recompile

    And that's all, you should be able to start your fresh new xmonad setup in ArchLinux. By the way, if you wonder why pressing Mod1 + Shift + Enter does nothing, make sure you have the package xterm installed.

    Cheers!

  • Handling resizing in Adobe Air with HTML

    If you develop a widget with Adobe AIR using HTML and Javascript, you may want to resize some elements of the HTML page depending on the size of the widget, thus having to resize them when the user decides to resize the widget. However, there's a little trick on using the RESIZE event of the air.Event object.

    The trick is that when the event is raised, and you execute some method on the corresponding event handler, the widget won't have the correct size yet, so if you use the window.nativeWindow.width or window.nativeWindow.height values there you'll be getting erroneus results.

    The solution is quite easy, though. You just have to let the HTML engine to adjust everything he needs to sort out the new sizes and get those attributes after that. How do you do that? By putting your code in a setTimeout call with 0 milliseconds timer. Here you can find an example (assuming use of jQuery):

    $(document).ready(function() {
        window.nativeWindow.addEventListener(air.Event.RESIZE, onResize);
    });
    
    function onResize() {
        var nativeWin = window.nativeWindow;
        setTimeout(function(){
        var width = nativeWin.width;
        var height = nativeWin.height;
        }, 0);
    } //Here the values are correct

  • Limiting the suggestions on jQueryUI Autocomplete widget

    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.

    Read on →

  • jQuery Bars plugin

    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.

  • Create your own JSONP Proxy using Ruby on Rails

    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.