The longest journey: the movie

One thing that I forgot to mention on my previous post related about my last freaking awesome weekend was the fact that I have proves about it happened, so like they say in Facebook "if there's no picture it didn't happen", here it's the video about my WebRTC DataChannels & ShareIt! project I did the last friday in front of 75 persons on the RealTimeWeb conference (sorry, audio in spanish... Having only about three minutes you don't have too much time to think in english and you can only hope to talk as fast as possible... :-P).



If you can't be able to see the video you can download it on MP4 or WebM.

Just to say that althoug in the video it "doesn't work" later I investigated and was a bug of Chrome v25 unstable (obviusly... ¬¬) and just closing the tabs and openning them again it worked the second time (now I need a new video to show that it happened... :-P )

Slides are availables on the RealTimeWeb site and also the ShareIt! repository.

The longest journey

The last 72 hours have been one of the longest and most full-filled weekends I have had ever.

First of all, the friday I did my first wide-spread demo and presentation of ShareIt! (if we don't take in account the little one that I did some weeks ago for the Python Madrid guys) at the RealTimeWeb conference here at Madrid in front of 75 persons (the biggest public I have had in a presentation). In short: an awesome success :-D It was just a little and fast presentation because the organization run out of time and also I needed to go the the 3 Day Startup later, but the fact is that in less of 3 minutes I did the presentation, showed a demo, and the public exploded in ovations :-D (the fact that being the (almost?) only one in all the world working in some really awesome high-edge technology just because it's not ready yet would be the cause... :-P) Also, the fact that I got some propositions from the UPM teachers to work on their investigation projects related with WebRTC and they also gave me some good ideas to solve the signaling problem are some really great news too, by the way... :-P Keep listening... ;-)

But if this was not enough, as I have just say I needed to go the the 3DS so didn't be able to participate on the hackathon of the afternoon (with some iPad-mini as prices, just some kind of deviavious temptation after my Galaxy Tab I won on the CUSL two years ago with PirannaFS was stolen the last week... ¬¬). What to say about the 3DS? Crazy, period. It was about just like a small-sized CampusParty but without my sleep sack under the table. Some of the projects were really interesting and in fact I needed to flip a coin in the last moment just to select between two of them about were to work (maybe with some telekinetics since It was complementary to my Priorities project... :-P), and the fact is that in the last three days I have work more hours than in a normal job week and spend more energies than in a month :-P Add to this the fact about going to bed not before of 4 o'clock and waking-up at 8:00 to be early in the morning on the event (I didn't want to do it, by finally they convinced me to take some beers all the nights... :-P) and now you would understand why this morning I seems a brain-less zombie :-P The bad news is that it was a one-shoot, so I will not be able to use the experience and propose the next year a better project (I was thinking about a "producer for genious" company to take out all the burocrazy and mind-disturbing things and let "genious" to concentrate on their work in a similar way movies producers take in account all the boring details and let the movies directors to do the magic) so maybe this is something I would change about it... :-( In any case, if I can, I'll repeat the experience :-D

But on the personal area the best news would be that after four years working on the private sector and forced to "back to the basis" (no job, no money and just have part-time university classes and being full-time freaking with my geek personal projects :-P) I'm remembering why I wanted to work on computers programming and how I spected my live would be, and yes, THIS is what I wanted (or at least is on the good way :-D). Maybe add some romantics and action-packet and this is the kind of blockbuster I would like to live ;-)

So in few words... in the last four days I would have sleep about no more than 16 or 20 hours :-P

FirefoxOS and HTML5 myths

Recently I have had some discussions and mocks regarding being FirefoxOS as the platform of the future (they was the ones that joke about me being an Apple fanboy and now they got crazy with the Nexus 4 availability issues like Justin Bieber fans... :-P ), so this links would be useful to get the things clear: first steps about hacking on FirefoxOS and some HTML5 Myths unveiled. Just a piece of cake... :-)

Hosting anywhere

During this week I have got the good news that ShareIt! will be included as part of two PhD thesis (woah!!!) that it's something several light years far away about what I would consider a success (Stefan Dühring and Arindra Das, truly thanks you so much! :-D ) with the exception of an e-mail with a job offer from Google :-P

But in both cases they had problems to deploy and test the code locally because they didn't finish to get the concept of being a pure client-side webapp, but at the same time requiring a handshake signaling server and a DataChannels backend server, so both asked me about a non-existent node.js server that hosted and served the app (I got problems while developing ShareIt! and DataChannel-polyfill to change my mind from a client-server way of thinking to a pure distributed one, and the telling the truth the WebRTC specification doesn't help about this for the non-specialized people...). I got a little bit obsesed about this point and to prove that being a pure client side webapp there's no necesity of a hosting server (just a simple static file web server), inspired by a recent idea I got about using DropBox to increase speed of downloads (enabling more host peers) and as backup of peers transfer, I decided to retake the fact that DropBox can be used as a basic static web server and improve the support for it. This included change all external references to use secure connections since DropBox serve the files through a SSL enabled connection, and if the content is not secure the web browsers would complain to protect the user (and that's ugly). On the other hand this allowed to encrypt all the communications so it's a win-win situation :-)

But this was not enough, I needed to show more versatility, and got it: I found this blog entry that explain in an almost step-by-step way how to explote DropBox and GitHub as free static pages web servers, and specially for deploiment of webapps. Just a sweet :-)

So here we are, currently I'm able to serve and host ShareIt! on three different web services, all directly availables on the web and interoperable between them: 5Apps, DropBox and unexpectedly GitHub, and also it's installable as browser extension. Add to this the fact that Firefox 18 "Alder" now start to have native support for DataChannels and WebKit already has it (Chrome v25 will have to wait a little bit more), and we are almost up to a point where ShareIt! will be impossible to take down (I hope that on the RealTimeWeb hackathon I would be able to get a way to drop-off the handshake server and reach the Holy Grail of Internet... :-P).

Let's the revolution begin!!! :-D

Scream if you wanna go faster

PageSpeed Insights is a webpage that allow to check the performance of a web page (specially about load time and bandwidth) both for desktop and mobile, but also give suggestions to improve it solving some typical errors, and also there are extensions for Firefox and Chrome to run it locally :-) At this moment it give a 73% value for desktop and 63% for mobile, I'll try later to make Google scream a little bit more (pun intended ;-) ).

Sleeping with the enemy

Today I have been at the monthly meeting of the Python Madrid group where I did a keynote about HTML5 and what benefits can offer to the Python web developers, and also showed ShareIt! as a proof of the technology potential. Althought some technical problems with the projector, finally I was able to show it and was a sucess :-)

They liked so much the idea behind of ShareIt! and were very interested on the technology behind it, specially about how I'm using WebSockets for the DataChannel-polyfill and if the final native implementations will support high estress use like the one ShareIt will so or maybe bigger ones (I believe someone is thinking about highly masive videochats... :-D ) but also they asked me a very interesting question that I didn't thought about: the most important building blocks on ShareIt! are annonimity and confidentiality, being the users identified by a random UID at load and with encrypted communications (both WebSockets with TLS and DataChannels by the specification), but since I'm not a security expert, there is an important security hole regarding to annonimity, so it's critical: to be able to do the PeerConnection, you need to transfer your SDP to the other peer to be able to do the connection, but the fact is that it has your public IP on the origin field (just the ID used by DataChannel-polyfill, by the way...), so this way the other end can be able to connect to you... but also know where you are. And it's done both ways. If at one of the ends there is a men in black listening (here at Spain we have La Innombrable, that it's scarier) and send him your shared files list, you have a problem.

They suggested me to use some type of friends white list based on public key for authenticity of the other pair, but since you can connect to anyone to fetch the data in a distributed way and not end having a lot of limited, private networks, this in unfeasable. Anyway, I got the idea banging on my head and think found a solution: just ask for authentification when you query a files list. This way, since for tranfering chunks you look for the files by their hash, you don't know what is being requested except if you have already the file with that hash, so you'll need to ask for all the combinations of the hash (on Tiger TTH, 2^192 combinations, bigger than the ZFS address space), and something similar would happen if you do a fulltext search over the network, so it's impracticable. The only attack point would be ask directly to a specific peer for its files list, and since this is something that you'll not do too much frequently (you want to fetch a file, doesn't matter where he comes), this can be easily filtered only allowing to do it if you have exchange a public key with the other peer (something you should do only if you know who is at the other end...), so you know the request is legit and also you can send the files list data cyphered with that key. Easy and unobstrusive :-)

Another option would be just to remove entirelly the files list request mechanism and only allow searching for files. This would limit the functionality of the protocol, but would be fairly more simple and secure, so maybe it's a good option for a future version...

How to develop a SVG logo

Although some days later, here you have the promised tutorial about how I did the ShareIt! logo fully with free software :-)

First of all, I wanted to develop it fully with Inkscape using an own font developed with FontForge like it's explained on this Inkscape tutorial (that showing an style similar to the one I wanted, it was a good starting point), but being a totally noob with this app, I decided to start with a vectorial app whom I'm more familiar: Dia. With it I could be able to anchor the lines to the grid so it's was faily easier to develop the text.

I created the grid on the left as a guide for the letters... Working with a 800% zoom becames the background grid a little useless :-P

Originally I only wanted to create the font to export it and follow the tutorial as originally intended, but being a vectorial app, why I would like to do this if at the end I'll convert it back to vectorial paths? It was no sense, so finally I exported it directly as SVG and imported it on Inkscape. Dia exported it as a lot of independent paths and objects so first I needed to convert all the objects to paths (select all the objects and later Path > Object to path) and later join all the independent paths ends between them to create some closed ones (select one path, click on the end node, select the other path and the other end node holding the shift key and later join the selected nodes on the toolbar).

With the 'a', the 'r' and the 'e' characters it needed one more step: use booleans operations with the objects. This way I would add the vertical line to the body of the 'a' and the vertical line to the head of the 'r' (select both paths and later Path > Union), and later remove the central hole of the 'a' and the 'e' (select the character path, later the hole one and finally apply Path > Difference). This way I have a single path for each characted (except the exclamation, that I just only group them because I wanted to do some independent effects).

Finally having created the text characters as paths, it was time to apply the color and the effects. The downside is that the tutorial of the beginning was not so specified as wanted (and in fact a lot of the comments were requesting a video tutorial), so looking on YouTube I found this two step-by-step ones about how to get the same effect :-)

I couldn't be able to apply the Path > Dinamic Offset but could be able to solve it with Path > Increase instead. Basically, it's just to select all the objects and apply the fill color that you want and remove the path color, and later duplicate the objects (Second click > Duplicate, they will appear the new ones over the originals so don't click anywhere or you'll lost the focus), move the duplicated ones to the bottom (Object > Move to the bottom), change the fill color and increase them. Et voilá! You have just created a text offset :-D Now repeat it with a different color, without the bar of the exclamation and a little bigger and you have the final result :-)

Just as a side note, say that being able to see and edit the XML tree directly on Inkscape it's VERY useful, not only to see the hierarchy of the objects but also to be able to clean them up if you have hidden duplicates or to change the nodes IDs to something with more sense that just a name (I just put the character names for each one to identify them easily).

As a finally drawback of Inkscape, the fact that it store the working area status data inside the SVG, so each time you open a SVG file it gets modified, but being an illness that also happen on Flash and other applications that don't have an independent workplace concept, I think it should be so important...