All posts by Jj

Picture side by side of a toy in color and sepiia

Sepia images with Django, Python and Sorl-thumbnail

Picture side by side of a toy in color and sepiia

Meet Sorl-sepia, a Sorl engine backend (PIL only so far) to turn your images into sepia tones. See the README file for instructions.

The interesting trick about sepia images is that they are just gray-scale pictures with a different color palette. In this case the sepia color I’m using is #FFF0C0.

Doing this on PIL is quite straight forward (from effbot’s blog):

# You have your PIL Image instance on a 'im' variable

# Convert it to grayscale
im = im.convert('L') # L mode means gray-scale

# Set the sepia palette
im.putpalette(linear_ramp) # will explain this later

# Make RGB again
im = im.convert('RGB') 

And there you have it. Now the linear_ramp variable. It is actually a map of 256 blocks indicating what color to use for each of the possible gray-scale values (white to black). You can see the original blog post on how to build the linear_ramp.

If you just want to turn your images to gray-scale instead of sepia, set sorl-sepia SORL_DEFAULT_SEPIA_TONE setting to (0, 0, 0).

Firefox screenshot of Google Reader ew layout

Squeeze more readable space out of Google Reader’s new layout

I am not happy with the removal of Google Reader social features. I really enjoyed discovering new feeds following people.

Anyway, I don’t mind the new look but it leaves too little readable space. A couple of years ago I blogged about how to use Firefox’s userContent.css to optimize the layout.

Here’s how the new layout looks at the moment:

Screenshot of Google Chrome with Google Reader

Here’s what it will look like (Notice the vertical space in the reader area):

Firefox screenshot of Google Reader ew layout

This is what you need to add to your userContent.css file.

@-moz-document url-prefix( {
    #top-bar {
    display: none;
/* For some reason I had to take this out of @-moz-document */
body.gecko #lhn-add-subscription-section, body.gecko #viewer-header {
height: 40px !important;

Switching to full screen F plus Sift + U sort of does the trick as well, but I don’t like having the whole screen’s width to read as lines become too long.

Install PIL with Jpeg support on Ubuntu Oneiric 64bit

I am posting this because it took me ages to figure out how to solve this one.

I could not get PIL to compile with JPEG, Zlib or freetype support on my virtualenv. I am using Ubuntu Oneiric Beta1 on a Lenovo Thinkpad X220. That is a 64bit installation.

As read in every blog post out there, you first need to install the system libraries so PIL can find them.

$ sudo apt-get install libjpeg libjpeg-dev libfreetype6 libfreetype6-dev zlib1g-dev

After that, your regular pip install PIL should work under most situations. In my case I was still seeing this summary after the installation:

    *** TKINTER support not available
    --- JPEG support not available
    --- ZLIB (PNG/ZIP) support not available
    --- FREETYPE2 support not available
    *** LITTLECMS support not available

After a lot of googling around, I found this solution on Ubuntu forums.
It turns out that the APT installations put the libraries under /usr/lib/x86_64-linux-gnu and PIL will search for them in /usr/lib/. So you have to create symlinks for PIL to see them.

# ln -s /usr/lib/x86_64-linux-gnu/ /usr/lib
# ln -s /usr/lib/x86_64-linux-gnu/ /usr/lib
# ln -s /usr/lib/x86_64-linux-gnu/ /usr/lib

Now proceed and reinstal PiL, pip install -U PIL:

    *** TKINTER support not available
    --- JPEG support available
    --- ZLIB (PNG/ZIP) support available
    --- FREETYPE2 support available
    *** LITTLECMS support not available

tada :D !

I just had this issue again on Ubuntu Precise, I found a solution here:

# ln -s /usr/lib/`uname -i`-linux-gnu/ /usr/lib/
# ln -s /usr/lib/`uname -i`-linux-gnu/ /usr/lib/
# ln -s /usr/lib/`uname -i`-linux-gnu/ /usr/lib/

Note the uname -i that prints the box’s arquitecture. This is a much more generic solution!

How to do it on Ubuntu Precise Pagolin 12.04

Show http:// protocol in URL bar for Firefox 7+

Firefox 7 beta was just rolled out yesterday to users on the Beta channel (that would include me).

One of the various improvements and changes is that now Firefox follows Opera and Chrome in hiding the http:// protocol prefix from URLs.

I like my http, luckily you can switch to the old behavior from our good old friend about:config. To enable them back set this pref to ‘false

browser.urlbar.trimURLs = false

You’ll see the change immediately :)

Programación con Azucar

La semana pasada en el Barcamp dí por primera vez la charla de Programación con Azucar que hace tiempo quería hacer.

Programación con Azucar es un nombre a algo que ya venimos haciendo, que es preparar nuestros programas para que al usarlos causen placer en los usuarios. Esto normalmente va más allá de cumplir especificaciones o casos de uso (El usuario debe poder agregar X, Se mostrará el listado de YY, etc).

Van a disculpar la presentación pero tuve que hacerla 15m antes que me toque salir :P

  • No programar para 0 y n únicamente, existen otros números (Joel Spolsky)
  • Programa un escenario completo para la primera experiencia/Usuario nuevo
  • Te va a demorar más
  • Tu usuario es una persona con una vida y cosas más importantes
  • Interactúa con tus usuarios, respóndeles. Son MUY importantes!
  • Que sepan que hay una persona de tu lado
  • Hazlos sonreir

Espero poder mejorar la charla en el futuro y tener una presentación más preparada visualmente con ejemplos más claros y una lista de tips más concisa :)

UnicodeEncodeError on Django uploaded files

This has been an error that’s been bugging me for months. For some reason in production settings only in the production server only, whenever a user uploaded a files with a non ascii filename, I’d get this error

UnicodeEncodeError: 'ascii' codec can't encode character u'\xed' in position 54: ordinal not in range(128)

And I was unable to reproduce.

Looking at the last line of the trace, it would be os.stat that would break, and none of my code would be involved, nor the database driver so it seems to be a file system issue.

The system’s locale:


After a lot of wandering around, I ended up on Django’s documentation in the Apache Additional tweaking section, even though my application is running under fastCGI. and I foudn this:

export LANG='en_US.UTF-8'
export LC_ALL='en_US.UTF-8'

It turns out that LC_ALL does not have a value. I added those two lines to my fcgi launching script, and problem solved!

Disqus coments UI

I really like Disqus comments service. But I wish they had a simple UI alternative, as I don’t want to show that much text/options in my screen.

This is what it looks like by default:

I would hide the “suscribe”, “RSS”, “Trackback” options, into a “advanced” (or something more explicit) section that is collapsed by default. The comment sorting does nothing for me and I wish I could choose to remove that option. Same with “Communiti box” and remove the duplicate “login” link and Discus logo that works as a Login menu, leaving only one.

Here’s what I’d like:

Proposed simpler Disqus screen


CSS3 gradients in Webkit

I’m just writing this to record a shorthand answer to a doubt I had.

Old format Webkit gradients only support percentage color stops

Recently, Webkit added support for standards CSS3 gradients, so your syntax will be the same for different engines (with different prefixes of course).

This means that you can now set various color stops at different pixels instead of % of the container.

background-image: -moz-linear-gradient(top, rgba(0,0,0,0.5) 0, rgba(255,255,255,0) 80px);
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5) 0, rgba(255,255,255,0) 80px);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0,0,0,0.5)), color-stop(80px rgba(255,255,255,0))); /* BREAKS */
background-image: -o-linear-gradient(top, rgba(0,0,0,0.5) 0, rgba(255,255,255,0) 80px);
background-image: linear-gradient(top, rgba(0,0,0,0.5) 0, rgba(255,255,255,0) 80px);

gradients test