December 26, 2012

Live preview of GitHub MD markup files

Every time I need to edit a *.md file in GitHub I'm forced to push 50 commits until I get the desired result or use one of the existing tools that don't allow live-preview (at least none of the ones I found searching in Google).

After 15 min I came up with a solution based on markdown.js. Maybe it's not the best looking tool, nor has any options at all, but it does the job quite well. Enjoy!

PS: You might want to run that in full screen.


November 16, 2012

Making JavaScript MVC applications SEO friendly


If you have played enough with JavaScript MVC libraries then you'll know that they're not really SEO friendly. In fact, if you have made an entire application/webpage using exclusively a JavaScript MVC library chances that your creation will ever appear in search engines results are near 0. Maybe that will change in the future, if search engines start understanding JavaScript, but until then you're pretty much screwed...

...Unless you use a headless browser to make crawlers understand your page!

The problem is simple: Your application/webpage can't be indexed because crawlers don't run JavaScript, which is what generates the real content that browsers display (HTML).

The solution is even simpler: You need something that will run the JavaScript on your application/webpage and output HTML that crawlers do understand.
There are a lot of good headless browsers already, but all of them require some more work to be done on them to start working as you'd expect. Configuration files, libraries, dark magic... Of course, they also give you a lot of options, which you may or may not want. In my case, I wasn't looking for anything special, I just wanted something that will run the JavaScript code and output HTML.

That's why I ended up doing my own headless browser! Just to make things clear, it's not done from 0. In fact, it's less than 50 lines of code. It's based on Qt4 and WebKit and there's even a PHP example! You'll probably want to use something like that. Maybe you'll also want to read Google's advices about all this stuff.

Enough writing, here is the GitHub repo. Enjoy!

Edit (1 year later): I just found Prerender. Haven't tried it yet (lack of time), but I think it gets the job done.

July 18, 2012

Event system in JavaScript

If you're a web developer and you're using a lot of libraries like Backbone.js you'll know that there are certain cases where you need to listen to some event, but there really isn't a good way of doing so without making something really ugly and terrible. Or maybe there is...

What if I tell you that there's something like D-Bus but in JavaScript? Yeah... I was amazed too.
In fact the whole thing isn't anything made-by-aliens-for-aliens ©® , it's just something I never thought it can be done.

The idea is to have a global var and use addEventListener and dispatch from wherever you like.

So, maybe you're not too sure how exactly is that helpful. Let me tell you what am I working on right now, and why I need something like that.

The project I'm working on will let users upload files without refreshing the page (a la AJAX), but without using HTML5 goodies (yeah, they are awesome, but there are a lot of browsers that just don't support features like those yet). The only solution for doing so is uploading the file from a form inside an iframe. Bad part is that we can't really know when the upload finished and what was the result. Nah, scratch that! We can if we use EventBus!

We just need to listen for the right event:

And make the answer from the server call EventBus:

Note that in order to access the scope of our page from the iframe we use window.top.window.

There are a lot more situations where magic like this is needed, and I'm glad I discovered this little piece of art.

Kudos to the autor of this library!

Edit (1.5 years later): If you're using AngularJS, which you should if you're doing some serious client side coding, you can user $emit and $on, which will do basically the same as EventBus.

April 29, 2012

Exporting Spotify playlists

I'm a real fan of Spotify, Youzee (Spain's Netflix) and a few other services that offer you almost all the content you want for a monthly fee. Especially Spotify!

But while I was playing around with my playlists the other day a terrifying thought passed through my mind: ¿What if Spotify suddenly looses all my songs? The songs I  have been searching and saving for almost 2 years. All the work, the time I spent ordering all the songs, the hours I spent listening every single remix of the songs I like and choosing only the ones I really like... All that would be lost without any possibility of recovering it!

Then I thought I should do something about that, and as I'm currently playing with jQuery I thought doing that backup thingy in javascript is a good idea.

Using Spotify's API there isn't a way to find all playlists a given user has, but there is a way to get the song's name and the artist's name given a spotify uri, and because selecting all songs from a list and then copying their uris is possible, that should do the work for backing up your entire account.

So, just go to the playlist you want to backup, select all the songs and then right click over them and select "Copy Spotify URI". Paste in the textarea of the script I made and click on "Find them all!". The script will show you all the songs, so you can then just copy them in a text file and save them.

I know that this isn't a perfect backup solution, but that's more than nothing.

Here's the result:




Feel free to ask me questions if you don't understand the code or if you have any suggestions. I'd be glad to help you!

Thanks to Yahoo's YQL, Spotify's public API and jQuery

February 19, 2012

Open source or how to make bad-quality software

First of all, let me say that the title doesn't (and wont) match all and every single open source project. There are really good open source projects!

Said that, let me start. One of the main problems with open source is XKCD 927 and the (ridiculous) need of writing and re-writing the same code again and again, and making it more maintainable and optimised, instead of just making it work and making users use it.
I'll backup that with one of the most recent examples I can think of: Dolphin, KDE's file manager. You see, Dolphin has been here for around 5 years, maybe even 6. The 2.0 version was released a few weeks ago, and there was a major rewrite that would allow even more awesomeness and beauty... Err... I'm still not able to rename a file in Dolphin without seeing an annoying input box instead of making the file's label writeable (as in Mac OS or Windows).

Another example is Ark, KDE's WinRar equivalent. Ark has been around here since ever, yet I'm still not able to make it try all possible plugins for a file instead of failing after trying only one. (bug) That's probably a 50 lines patch, but nobody fixed it.

Yeah, yeah, I know what you'd say now: "Fix it yourself!". That's just a brilliant answer. I'm willing to see some guy from a support center of a proprietary software that you paid for telling you the same thing. I know Open Source just doesn't work that way (mainly because I'm working in an open source project), but that's just not the point. If you're going to write some software, do it right! Don't just write some crap telling everyone that you accept patches. If it's not working properly, don't release it until it's finished.

I could write at least 1000 more examples, but instead of that I want to tell you where does the problem come from, or at least where I think it does come from.
As I said earlier, it comes from XKCD 927, or as the majority of us, geeks, call it: liberty of choice.

If you have read some of my other posts, this will sound familiar to you: there are hundreds of music and video players for Linux, non of them is good. There are at least a dozen of file managers and all of them are just ugly and buggy. There are as many package managers as distros. Why? Aren't they all doing the same thing? The only main difference I can think of is fetching/installing precompiled packages (Debian,  Ubuntu, Arch) or fetching source and compiling (Gentoo, Arch with yaourt).

The excess of possible choices is making Linux experience as general suck (I'm Arch-only user since 2 years, only-Linux-die-hard user since 8). IMHO something is going terribly wrong if an experiences developer and Linux user is saying that Linux experience as general sucks. Isn't it?

And, imho, that's why Linux is not going to make it in the desktop pc's any time soon: because of the low quality it has. Just compare the servers market: you can get a Windows with IIS or Linux with Apache/nginx (yes, of course you can get BSD with god-knows-what-web-server). Windows with IIS just sucks. Bad performance, low security, ... It's obvious that the best choice is Linux with Apache/nginx. No doubt there, no confusion.

Let's compare desktops: You can get Windows, Mac OS or some of the 9.358.267 distros around there (good luck choosing the right one). Also, good luck choosing between the different desktop environments. I mean, there is the performance factor that makes you choose a good looking desktop environment or a light-weight desktop environment. But what about the other ones?

Also, I almost forgot to mention another big problem: confusion. We, geeks, think that everybody understands how applications work. That's a big error. They don't.
You'd say: "They can read the docs hitting F1". Of course! That would be great. Only that docs are inexistant or badly-translated. Even further, the number of possible choices of distros, desktop environments, applications and so on create a get-help-from-a-friend situations impossible.
Pick up two non-experienced Windows/Mac users. They can help each other because they use exactly the same software.
Get two non-experienced Linux users. Possibilities that they could help each other are really low.

Having the possibility to choose between N number of applications is good only when all of them are good.

Before going in a rage state trying to defend your ideas about why I'm wrong, think about what you just read. Maybe read it again. Talk about it with non-computer-savvy people. If you still think that I'm wrong, say it in the comments section.

January 14, 2012

Javascript and it's tricks

I love coding in Python, C++, Java and a few other languages, and I love it because of the challenge of using every language's little dirty tricks. For example, I love how Python decorators and lambda functions work and I love how Java Reflections work, just to mention some of them, and how many possibilities (scary bugs and low performance too :p)  bring us those kind of functions. But the one thing that I most love about all those languages is that they are used for desktop applications.
Desktop development is what I love the most. But I'm forced (read as "that's the job I have") to code in PHP + Javascript. Don't get me wrong, those languages are fine too (better than the language that co-workers used before I got here: ASP .Net...) and they sure have their special things, but it's just that I hate web-development.

Anyway, as I'm forced to do PHP + Javascript on a daily basis, and I got tired of trying to make stuff work as I expect them to work in all browsers, I made a little set of Javascript scripts. Nothing as powerful as jQuery or MooTools, but something that, in combination with those frameworks, makes my life easier.

Basically, those scripts check if the browser they run on has certain methods, and if not, they add it via prototype.
Every object constructor exposes a special property called “prototype.” That property allows you to add properties (and methods) to all objects instantiated from that constructor function.
Means, for example, the String type of data has some methods, like .substring() or .trim()... The "prototype" property gives us the ability to check if a method of String exists, and if doesn't, create our own. So that's what my scripts do.

There are some pretty cool functions for strings, numbers, dates, arrays and functions itself.

If you're interested in Javascript or you work with Javascript, have a quick look: JniftilitieS


Oh, just one more thing: Yes, I do know about the existence of IE7, IE8 and IE9 compatibility scripts. Mine are a little bit different, as they also add customized functions, like String.capitalizeAllWords() or String.toInt()...