Install mp3 for Audacious on Fedora Core 12

Fedora Core is an outstanding distro that competes against Ubuntu, but lacks some commodities. One of them is MP3 support. We can add it installing the correct packages:

1st: Find libmad rpm package. Mad is an old nice mp3 decode library. I found one here:
http://www.rpmfind.net/linux/RPM/rpmfusion/free/fedora/devel/x86_64/libmad-0.15.1b-13.fc12.i586.html

2nd: Find audacious plugins 'freeworld' that link mp3 library with player: http://fr2.rpmfind.net/linux/RPM/rpmfusion/free/fedora/12/x86_64/audacious-plugins-freeworld-mp3-2.1-1.fc12.x86_64.html

These two are for 64bit version, so maybe are not suited for your version. The most useful keyword to search for a specific package on Fedora is fcXX (where XX is the version number, i.e.: fc12).

F.lux: rest your eyes

F.lux is a freeware (not open source) utility for Linux, Windows and Mac that changes the intensity of the screen light based on time of day. So it makes the screen darker on night and brighter on day. It also uses latitude or ZIP code to calculate sunset, so it fits to your location anywhere.

You can get it on: http://www.stereopsis.com/flux/

Using rsync on local folders

This command line synchronizes the 'test' folder with production folder, as simple deploy system. It uses the popular command 'rsync':
rsync -crv --delete --stats --exclude "*smarty*" test/www/ www/

It excludes smarty folder contents as is mostly used for auto-generated compiled templates.
On rsync command, it doesn't use the common -a (archive) flag as it tryes to maintain date and time from old files, and some servers don't let it and provoke a warning when syncing.
'--delete' is a potencially dangerous flag, that erases existing files if they are different than source ones.
Other interesting flag is -n, that performs a "dry run" that shows the results without perform the copy.

Remote deployment with Fabric

Fabric is a Python module that allows to execute scripts on remote hosts. It uses configuration scripts to perform the tasks.

import re
import pysvn
from fabric.api import run, env

baseurl = ""

def site(  ):
    env.hosts = ['xxx.yyyypixel.com:22']
    env.user = 'jailed'
    env.baseurl = "http://pixelame.googlecode.com/svn/tags"

def deploy(  ):

    client = pysvn.Client()

    tagList = client.ls(env.baseurl)

    tagDict = {}

    while True:
        i = 0
        for k in tagList:
            name = k._PysvnDictBase__name
            tag = re.compile('[^/]*$').search(name).group()
            i += 1
            tagDict[i] = name
            print str(i) + ") " + tag

        key = input( "Tag to export " )
       
        key = int( key )

        if (  tagDict.has_key( key )) :
            url = tagDict[key]
            break
   
    print url
    run( 'svn export ' + url + ' /var/www/pixelame ') // this command is executed on remote host
   
To invocate this script use:

fab -f script.py site deploy   

Where script.py is the previous script and site and deploy are the methods that will be called. It connect thru ssh to the server and perform the subversion command on it with the method "run".
This is a very simple example, but fabric can perform very complex tasks.

Javascript custom function generator

This example uses a javascript lambda function to generate a custom call inside a for loop.
Code from an event function for an ExtJs core.

for k in ...
var rid = content[k].id;
rate.on( "change", function(rid) { // receives current rid value
return function(e) {
Ext.Ajax.request({
url:"/rate",
success: function() {
},
failure: function() {
alert( "unable to rate" );
},
params:{id:rid, value: e.value}
});
}
}(rid) ); // pass rid with current value
...

The parameter rid is evaluated 'on the fly'. If it was sent in an usual way, function would evaluate rid as last context[k].id cycled.

Packing Firefox Extensions - zip command line

Firefox extensions are packed in a zip file, with 'xpi' extension. Linux command line to create a 'xpi':
zip -r  dicgal * -x /*.svn* *.swp *.swo *.swn
Where -r means recursive, dicgal is the filename of the extension, * are the files that'll be included. Last option, -x, tell what files will be excluded: vim swap files and subversion folders.

Debugging Firefox Extensions - console.log replacement

Development of Firefox Extensions is not trivial. The very useful 'console.log' function call doesn't work (firebug is not loaded in the XUL). So, as alternatives, some authors suggest.

Firebug.Console.log()

That line didn't worked on my Firefox 3 Linux enviroment. So I found this nice snippet:

          function debug(aMessage) {
            try {
                var objects = [];
                objects.push.apply(objects, arguments);
                Firebug.Console.logFormatted(objects,
TabWatcher.getContextByWindow
(content.document.defaultView.wrappedJSObject));
            }
            catch (e) {
            }

            var consoleService = Components.classes["@mozilla.org/consoleservice;1"].getService
(Components.interfaces.nsIConsoleService);
            if (aMessage === "") consoleService.logStringMessage("(empty string)");
            else if (aMessage != null) consoleService.logStringMessage(aMessage.toString());
            else consoleService.logStringMessage("null");
        }

This function logs any javascript object to the formerly obsolete (and never forgotten) firefox console.

 

No module error on Google App Engine

When server doesn't find a module, throws this exception:
<pre>
class 'google.appengine.tools.dev_appserver.CouldNotFindModuleError':
      args = ()
      message = ''
</pre>

Cross-domain browser issues

On last days, I was trying to code my own feed reader. I was trying to find a client-side solution to feed reader system, but I haven´t found yet a good one.
A good approach are flXHR and fJax, that use flash to do cross-domain queries. flXHR is a more complete solution but it still has a serious problem. As a security feature, Adobe Flash Player forbids any communitation with domains without a crossdomain.xml policy file. Blogspot, wordpress, facebook and a faithful of webs have that file available, but most of them did'nt have it.
So, a news reader has to rely on a complete server-side solution. At the moment, there is no alternative.
 

Setting Gnome to open Windows in different workspaces

Virtual workspaces are nice. That feature is implemented in almost every window manager currently and I'm used to work with them in Gnome: one workspace for code editor and other for browser, usually Firefox. On other two desktops I use to open other browsers and/or file managers.
It's very handy to use a shortcut to start both programs, so my one-liner script on desktop to start both applications is:

geany (or Aptana) | firefox

But how can I start the apps in different workspaces? The answer is simple: Devil's pie. Devilspie is a tool let's the user configure window application launchs.
Once installed, you can launch it via command line for testing. When you feel comfortable, simply add it to the window manager session startup (in Ubuntu: System -> Preferences -> Settings).
To customize an application launch, you have to create lisp-style s-expressions on custom files on ./devilspie folder. Only one expression is allowed per file. Custom S-Expression:

(if
  (is (application_name) “firefox”)
  (set_workspace 2))

Simple and powerful.

Last thing to remember: set_workspace do not work in metacity, use set_viewport. Metacity uses viewports instead of workspace, despite Gnome shows "workspace" label on context menus and docs.

New application on Google App Engine

A few weeks ago, I started an experiment with the <canvas> element. That element let's javascript developers create simple 2D vector graphics on Firefox, Safari and Opera browsers. Currently is not available for IE, but there is an interesting proyect to do an abstraction layer.

One of the goals of the experiment was to replicate the behaviour of an old VGA game I'd coded 12 years ago: the player controls a character that moves across the screen, showing a nice photograph. When player reaches a percent of completeness, the level is finished and game starts on the next level.
The old VGA game used memory buffers to create the effect. canvas element doesn't use pixel buffers neither anything similar but vector graphics. Instead of pixel masks, you must indicate mask shape with commands. So, to achieve the effect, my solution was to create one mask by each horizontal line, so I could take the control of how much surface was cleaned.

var screen = [320,200]; // screen dimensions

var limit = [] // control structure of the masks

// limit assignation
for(var k = 0; k < 0; k++) {
limit[k] = [mask.min,mask.max]
}

The main drawback of this approach is that browser has to redraw each mask line on each frame, so it can be very slow on old (and a few newer) machines.

Code for this and other canvas related experiments.

The project running in its current state at the Google App Engine.

Setting a lightweight development enviroment

Aptana Studio was the last web development IDE I used. It's based on Eclipse, so it can be very "overbloated". Furthermore, it's not confortable to customize it sometimes.
For that reasons, I changed my development enviroment recently. My new tools:

• Geany. Lightweight text-editor with many useful plugins. Cross-platform.
• NautilusSVN. Nice set of SVN (version control) scripts for Nautilus, Gnome navigator. It tries to mimetize TortoiseSVN for Windows.
• Meld. Diff utility. Complements SVN functions with a nice file differences display. 
• and Firefox.

Also I use different virtual desktops for each application. I lose javascript code completion, but I'm yet used to work without it!

Firebug issues on POST forms submit

I really like FireBug. I think it's the best tool for web deveploment in years and it's and amazing contribution to open source code and development. But sometimes it does some really tricky, odd things.

Recently I'd serialized a form with jQuery :

var params = $("commentForm").serialize(); // get a string with form parameters

then I use it in a generic ajax call:

$.ajax(
   method: "POST",
   params: params,
   ....
);

Too normal until debugging the result of the query in Firebug. The server's answer contains the params of the form:

Array(
   id:4893
)

But firebug window shows:

Array(
   id:0
)

Different results. Why? Firebug does not capture Firefox query. Instead of that, it replies the query without the parameters. So it can show wrong results to developers who are debugging their ajax posts.
I have noticed that behavior in Linux and formerly in Windows with different versions of Firebug, so don't trust it!

How-to develop a Firefox Extension in Linux (I)

Based on last available tutorial from Mozilla at this date, Mozilla Extensions. For a detailed explanation consult there.

Setting a develpment enviroment:

For Ubuntu:

To run more than a single firefox instance:

/usr/bin/firefox -no-remote -P dev

"about:config" settings:

javascript.options.showInConsole = true
nglayout.debug.disable_xul_cache = true
browser.dom.window.dump.enabled = true
javascript.options.strict = true
extensions.logging.enabled = true

Extension Developer Extension : http://addons.mozilla.org/en-US/firefox/addon/7434/

Profile extension folder: ~/.mozilla/firefox/[profile name]/extensions
where [profile name] = name of the profile, usually with prefix generated by Firefox.

Extensions are ZIP compressed files, but to develop using a more convenient folder structure:

• Create a file in the profile extension folder with a GUID or your mail as name.
• Write the absolute path of the xpi package as content.
  

Extension Wizard to generate skeleton: http://ted.mielczarek.org/code/mozilla/extensionwiz/

Using timepickr plugin with 960 grid system

960.gs is a good and very simple web framework I'm using to build prototypes of my web experiments. It has many "default" css styles that can interfire with your web desired behavior.
First serious problem I've found was using jQuery original "timepickr" plugin. The plugin lets the user choose a time in form very quickly. When I tried to apply it, the cell elements appeared too separated from themselves.
Using firebug to debug the CSS classes, I found a very simple solution: declare a new class for that.

.ui-timepickr li {
margin-left:0px;
}

For each element

with class 'ui-timepickr', remove left margin. This declaration preserves the custom elements style, while showing page grid layout correctly.

First steps on Django

While I have been coding in PHP for last years, I think that it's time to change. In the next few weeks, I will try a few nice web frameworks.
First stone will be Django. This Python framework looks interesting:

• Google supports it with its fork for "Google App Engine".
• Its community has grown a lot on last year since the launch of version 1.0.
• Python is now a very mature and consolidated language.
• It has a nice and simple template system.
• Its development server seems handy.
  

My former colleague, Juanjo Alvarez, has done in his blog a deep analisys of Django (in Spanish).

First problems: as a web developer, I am coding now in WinXP for compatibility reasons. The development server does not answer after a few develpmente cycles. Restarting again the server on the same port doesn´t work. My solution at the moment is to restart the server in a different port (8001 instead of default 8000, i.e.).
Users who work in Linux doesn't report any problem with the development server. It seems a configuration or version bug.