Michal Kowalkowski

Michal Kowalkowski is CTO at Backwi.re. You can check his GitHub or follow him on Twitter.

[michalkow]

Streaming files to MongoDB using Socket.io and GridFS

Today I discovered how easy it is to send a file over the web sockets directly to MongoDB GridFS. It is possible thanks to two amazing node modules. One of them is Naoyuki Kanezawa's Socket.IO stream. The other one is Aaron Heckmann's gridfs-stream.

I will get right to the point. I will just assume you read the documentation of both modules, and included them into your Node.js project. The client side code will be no different then the example in Socket.IO stream project documentation. This is example how receiving of the file and writing it to GridFS could look like:

io.sockets.on('connection', function (socket) { ss(socket).on('uploadFile', function (stream, data, callback) { var writestream = gfs.createWriteStream(); stream.pipe(writestream); }); ... });

It is not too complicated, because those two modules work perfectly together. If you use MongoDB and Socket.io in your project, I would recommend to try out this method of uploading and storing data.

[michalkow]

Starting with Backbone LayoutManager

I was planing to use Backbone for my next project. Because it was a large application, I did start looking into the Backbone frameworks out there. I took a look at Thorax.js, Marionette.js and LayoutManager.

Choosing LayoutManager

I decided to go with LayoutManager. One day, maybe I will write something more about the other ones because they are good and interesting frameworks. But in the end, I chosen LayoutManager because it is simple. I has all the things I needed and nothing more. LayoutManager is created by Tim Branyen and you can find source code on Github. One of the things that convinced me to use LayoutManager is clean and well made wiki page. Everything seems to be covered there. But that is where my troubles started.

Video Tutorial

I wanted to save myself some time and watch a screen-cast instead of reading, so that I can dive right into it. Everything was nicely explained, but there was no source code of the example covered in screen-cast. No problem, I thought, I will just follow the video and code along. I replicated all the files, but it was not working. The example was using Twitter API to fetch some data. The request was to the old and not supported version of Twitter API. Also some of the LayoutManager functions were returning errors. That is when I noticed - the video is two years old!

boilerplate-handlebars-layoutmanager

After realizing my mistake I went back to the documentation. There was the link to example with LayoutManager with Handlebars. This kind of integration was covered in the screen-cast, so I thought it will be perfect. The seed project was based on Backbone Boilerplate project, so it took me while to familiarize myself with the concept. After installing few node modules and bower components I was ready to start. Kind of... I understood the structure of the app thank to the post author refereed to in the video, but I wanted some app example I could play with.

The Thing I Was Looking For

I went back to the documentation of the core Boilerplate project, thinking that I will start from there and later add the LayoutManager to the project. I followed link to their example app, which is github-viewer. Turns out it uses the LayoutManager! I found what I wanted. The app example is very well-structured and I think a perfect place to start hacking with LayoutManager. My tip for anyone that wants to use this framework is to start there.

[michalkow]

The five cells are silky-white within, and are filled with a mass of firm, cream-coloured pulp, containing about three seeds each. This pulp is the edible part, and its consistence and flavour are indescribable. A rich custard highly flavoured with almonds gives the best general idea of it, but there are occasional wafts of flavour that call to mind cream-cheese, onion-sauce, sherry-wine, and other incongruous dishes. Then there is a rich glutinous smoothness in the pulp which nothing else possesses, but which adds to its delicacy. It is neither acid nor sweet nor juicy; yet it wants neither of these qualities, for it is in itself perfect. It produces no nausea or other bad effect, and the more you eat of it the less you feel inclined to stop. In fact, to eat Durians is a new sensation worth a voyage to the East to experience. ... as producing a food of the most exquisite flavour it is unsurpassed.

Alfred Russel Wallace

[michalkow]

Metroish

Finally I grew tired of my default Tumblr theme and I decided to do my own. You can see result of my work here. I did build it on modified version of Cosmo Bootstrap from Bootswatch - I did mostly change the brand colors and modified inverse version of navbar. It is first time I worked with Tumbler markup. I didn't manage to implement all the features that it offers, as I don't use/want some of them, but I might add them in the future for others. Source code is up on GitHub.

Feel free to help me and fork it ;)

[michalkow]

We won Jamendo Innovation Award

We won 2nd place in Jamendo App Contest. Thanks for every one that voted for us:)

http://developer.jamendo.com/contest

[michalkow]

Jamendo App Contest

Yesterday I finally submitted the final version of mine and Gregoire Thiébault app for Jamendo app contest. You can check it at https://github.com/coldping/jamendo-contest or live demo at http://www.jamen.co. Wish us luck!

[michalkow]

HTML prototyping

Sometimes I like to do a site prototype in pure HTML, especially when I am not sure what type of language of framework I will use for the project. I don't want to use any big templating system, instead I use this simple (jQuery) trick:

$('body').on('click', 'a', function(e) { e.preventDefault(); $('#content').load($(this).attr('href')); });

Script will just load html into my #content div from html files. Two thing to be aware of though:

every <a> link will be affected, you can change it to custom class if you use <a> tags for other things.

some browsers might have problem loading local files like that, due to same-origin policy.

[michalkow]

Compensate for Google Maps inaccuracy

I recently got back form a trip to HangZhou. I wanted to make a small website, for me for me friends with some fun facts about our trip, pictures, and maps of path we traveled. Last one turned out to be a little tricky. I used Google Earth to trace the path of our journey. Saved as KML file, and then applied overlay to Google Map on my site. That is when I realized satellite maps is fine, but road map is off by some distance. Turns out roads and labels form road map don’t always match actual roads on satellite map. I don’t know for what regions it happens to be like that, but HangZhou is one of them. To fix that I copied coordinates of my path from KML file and putted them in txt file. I wrote small php script to offset the latitude and longitude by amount I determined would be correct for this particular case. $myFile = "lat.txt"; $fh = fopen($myFile, 'r'); $theData = fgets($fh); function newloc($matches) { $loc = (float) $matches[0]; //For HangZhou I determined latitudes would be around 30 and longitudes around 120 if($loc>60) $loc+=0.0047; if($loc<60) $loc-=0.0024; return $loc; } echo preg_replace_callback('/[-+]?[0-9]*\.[0-9]*/', "newloc", $theData); fclose($fh); I pasted the result to my KML file. Finally I just needed some javascript to change overlays as the map display changes from road map to satellite or the other way around. var overlays = [ new google.maps.KmlLayer('LINK_TO_MY_KLM_FOR_ SATELLITE.kml'), new google.maps.KmlLayer('LINK_TO_MY_KLM_FOR_ROADMAP.kml') ]; overlays[1].setMap(map); google.maps.event.addListener(map, 'maptypeid_changed', function() { if(map.getMapTypeId()=='roadmap') { overlays[0].setMap(null); overlays[1].setMap(map); } else { overlays[1].setMap(null); overlays[0].setMap(map); } });

[michalkow]

rateThis.js

For my latest project I had to create a rating option in comments/reviews form. There are few good js plugins I found (especially [RateIt](http://rateit.codeplex.com/) - I would recommend it), but for my project I needed something fast and simple. I figured it cannot be that hard to write and maybe will be of use to someone else. So here it is, check my [GitHub](http://github.com/michalkow/rateThis).

[michalkow]

OpenHack Shanghai

I just started a [OpenHack](http://openhack.github.com/shanghai/) for Shanghai. I am quite hopeful we can get programmers here to work together on some interesting projects.

[michalkow]

Github is back in China

I am really happy and relive to see github being accessible to me from China. I guess we can all agree it is great tool and everyone’s job easier. I read a lot of comments on Hacker News on this topic, some of them were quite funny, like suggesting that no programmer/freelancer in their right mind would choose to work in China, but most of them brought a valid point, that all of ones working in China use VPN. It is true. I am using it too, but not most of the time. On my first year in china I did buy VPN service from one of the big providers. It did work fine, I had not much to complain about. The thing is I don’t like paying for something if I don’t have to. I decided to set up VPN on my personal server. Since then I didn’t have to pay extra for accessing blocked sites, but the connection is way slower. That is why I turn on my VPN connection only when it is really necessary. And I don’t think it is a bad thing. It stops me from procrastinating and visiting sites like facebook or youtube, but if site is important and work related, I will go extra mile to read it.