Category: Hacks

Virtual disk design kata

In my current job (ulabox) we do every Thursday a internal training session, usually prepared by one of our department members. Some months ago I prepared a code kata on design patterns, with 5 steps with instructions. The idea was to push the team to debate about different approaches to a common problem, and show them some classical design patterns, as a way to polish our weapons. The result was good, but the discussion only really happened at the end, when I showed them those patterns.

Ninja weaponsSome weeks later I heard about a code conference in Barcelona, organized by the Barcelona Software Craftsmanship group, so I took the chance to polish my kata and ask them to do in the event. It was rejected to the main event.

Later I heard about Monday’s katas: this group organizes every Monday a code kata with up to 20 developers. I offered my kata and our office to do it, and on December 12th we did it! All participants agree: the kata is smooth and induces to think about the subjects it later shows.

I published my kata on github. Have fun!

ImageWorth is now part of!

ImageWorthA couple of months ago, I programmed a small page that shows images from Flickr based in the tracks you’re listening to on (or have been registered by them). It was basically a test, just to try out some things using JQuery, a javascript library. Some weeks later, I decided to submit it to “extras” website.

They quickly answered me, thanking my contribution, and gifting me with 1 year of subscription, wow!! Now everybody can see my creation from their website.

You rock, staff. When I grow up I’d like to become one of you.

ImageWorth: Mix your songs with pictures

Last week I’ve been quite busy. I had a small project in mind. Briefly, the idea is to search pictures that match the songs you are listening to. And present them with some visual beauties.

I named this project as: ImageWorth, try it out!

It gets the “recent listened tracks” list from your account, and for every song title it searches for pictures on Flickr. And uses Javascript with JQuery library to show them smoothly.

Regarding the inside: I strongly used Javascript for making it happen (I wanted to practice some js programming). There is a PHP part, which is basically a proxy to let AJAX call directly to and Flickr, but it’s quite simple. The heavy work is done in the Javascript lines, which were quite interesting to develop. This time I used only Object-Oriented programming, and this leads to some (a priori) weird things in js. This language has its own way to work with objects, with a lot of flexibility, but this flexibility leads you to keep more things in mind. For example, when you want to bind a function (which is an object in js) to an even, without losing the reference to the original object (this) where you did the binding on. It’s not easy at first, but when you start to understand how it works, the beauty of closures and the incredible amount of possibilities it means… you start to love it.

By the way, any comment about ImageWorth? I hope you like it!

A clock with pictures

Last night I had a look at the public Flickr API, just to have some fun. I discovered it’s really complete, with a lot of possibilities, covering different search approaches. You can easily ask the API for info about pictures, and use the results with imagination.

On the other hand, I was also interested in javascript frameworks. I used to use Prototype, but I wanted to have a look at jQuery.

So I took the opportunity to do something funny using both things:

A clock that uses Flickr pictures containing digits.

Every time the page is loaded, it searches in Flickr for pictures containing a digit, and chooses one picture randomly to represent that digit (most of the time those pictures are neat). Then it exchanges the font digits for images, including the link to the original image (click on a digit to see it). Just this. Isn’t it beautiful?

More about playing with word count and position

I’ve seen in the last few weeks some examples on using the word positions within the sentences… like my “your blog written by monkeys“.

A way to experiment is just looking for a chuck of a sentence, a “meaning” block, that puts in relation two concepts. For example encountering “is the new”, you can create a nice diagram showing new tendencies.

A similar path is getting statistics of word appearances within a text, and their relations. Later you can paint nice pictures using this info, like one visualizing the Holy Books of five world religions.

Finally, you don’t even need to know how to program this systems. You can do things yourself with just paper and pencil, and your favorite song.

Your blog written by monkeys

Do you want to try my new tiny script?
Just write here your blog’s url, click the button and watch the surprise.

And now, let me explain it.
Some weeks ago I was discussing with another engineer about NLP, and the importance of having some language knowledge to effectively process a text. He wanted to do some stuff with pure text, written in an unknown language. I suggested that you can do more and better things if some human expert helps you, but he told me he couldn’t pay an expert. In that case, I pointed out that you can use some kind of statistic approach, like registering the appearance of every single word, or the relation between a word and the previous and next ones. But those methods are just randomly, almost like monkeys playing with the words

This evening I’ve created a PHP script that reads your blog (actually only the words within paragraphs) and generates new text using some statistic (the data used can be seen at the end of the page source). It seems real, it might have sense… but it’s just random. Monkeys rulez!

Elastic shapes with SVG improved

Shape I have been testing some formulas about elasticity and friction, and finally I updated my shape elasticity simulation with these stuff, creating a nice new version.

Have fun!

Elasticity with SVG and Javascript

Planes. An interesting place to program computers. I find the idle hours, that you spend in the airport and the plane, the perfect time to research on new ideas.

ShapeDuring my last flight (a trip to Germany) I decided to play with some SVG and Javascript, for simulating “elasticity” (inspired by the plane’s wings). SVG could be the standard for web vectorial graphics, but weirdly Internet Explorer does NOT support it nativelly (Mozilla and Opera do). Moreover SVG, with the help of Javascript for managing the behaviour, is a real Flash opponent.

I had done a previous research about the combination of these technologies, so I only needed to create some shapes, program some physics formulas and add a bit of salt. I created a really simplified version to test, but later I’ll create something more realistic (with acceleration and such things).

Here is the result. (Remember it only works in Firefox)

I hope you’ll like it!

Creativity tracks

Some days ago I was thinking about a better way to value my vocabulary. Months ago I programmed a small word counter, but it was too simple and boring. I wanted to create something more interesting, more visual, like to show when and where I have written the most creative words.

How to measure creativity? Roughly speaking, you could say the most creative words are the least appearing words in a text. With this idea in mind, I started to program a “thermogram” image, with the timeline of the week as the X-axis and the position in the text as the Y-axis. Every word I’ve written was going to be a point in the image, and its colour intensity was the inverse of its appearances. The final result is here:
Creativity tracks

Honestly, I was waiting for a surprising visual result (like the kind of things that you can see in Information Aesthetics’ blog). I’ve tried different intensity curves, but it doesn’t change a lot. However, this result is somehow interesting. As you can see, I usually write on Monday, Tuesday and Wenesday at night, and at the midday on Sunday. The most creative point seems to be at the center of a post written on Wenesday night. Moreover, I shoud keep writing to fill more pixels ;-)

If you’d like to put this in your blog (only wordpress blogs), here is the PHP file which generates the thermogram.

Sometimes “random” is the best choice

…as nature does. Create something from random numbers.

Here are a couple of examples, from a Sunday morning programming session (plus 1 extra hour from the daylight savings change):

Random bubbles
Random trees

Each time you reload the page, a new drawing appears.
To see them correctly, you need Firefox or Opera, because the images are SVG (Scalable Vector Graphics).

Have fun!