Here comes Postman, the tiny little app that connects Flickr and Facebook Groups together

Postman Flickr to Facebook Groups photo sharing service

We were working to develop a new utility web application for last couple of days which will help us, the photographers, to easily share photos from our flickr photostream to multiple Facebook groups that we are subscribed to. There was a reason why we wanted to develop this app in the first place. Every time we had to upload the same photo to each of these groups and needless to say that Facebook’s image compression routine still thinks that we live in medieval age, probably King Arthur’s reign. Anyway, the process is boring and time consuming. Another quick and dirty way was to share the photo by Facebook’s group email feature but not every group supports it. So we had to find a way to make it easy for the greater part who uses both Flickr and Facebook to share their photos.

So we’ve developed Postman, a nice little app which does the job very well. Here is what/how it works.

  • Authenticate users against Flickr and Facebook and gathers necessarily permissions (read for Flickr, publish_stream and user_groups for Facebook Connect)
  • Display last 100 photos from user’s Flickr stream in a selectable grid, with the option to load more.
  • Download the 1024px version of the selected photo from Flickr Stream to our server
  • Post that photo to selected Facebook groups using FB PHP-SDK one by one.
  • Delete the photo from server

It actually solved the big problem for us. Postman made it easy for everyone of us (the photographers) and everyone literally loved it. There is one more reason to love WordPress and that is Flickr’s compression algo is really good. So when we download the 1024px version of user’s photo and then push it to Facebook, luckily Facebook  doesn’t do much on that and the photo looks really good. And we used AppFog to host Postman which ultimately proved to be very good choice.

If you are a photographer who uses Flickr to host his photos and then share to multiple Facebook groups, please give POSTMAN a try and we are sure that you will love it.

And last but not the least, Postman can post photos to your Facebook pages too. So Postman is a handy application photographers, by photographers. Use it and enjoy. You can find postman at http://postman.im

Shameless Plug

We develop beautiful Admin Panel templates for the web application developers. Our recent product is “Bolt” which is responsive and built on top of Twitter’s bootstrap. Give it a try and let us know how do you like it.

Bolt Responsive Admin Panel Template for Developers

Bolt Responsive Admin Panel Template for Developers

building a nice image gallery like pinterest/friendsheet using facebook graph api and LightBulb

Pinterest has gained lots of attention lately and became popular in the photographer’s and designers community from the very beginning. And once something is popular, people copy (and sometime with improvement) their beautiful user interface ideas into their own project. Last week i’ve seen quite a traction when friendsheet was released. They allow you to browse photos from your Facebook news feed in a nice and organized way.

When we saw friendsheet last week – me and Rifat were discussing that it could be a nice demonstration if we develop a image gallery with our revolutionary project LightBulb (seriously, someday something’s gonna change the world – so keep dreaming big).

LightBulb is an extensive wrapper of Facebook Open Graph objects sitting on top of their JS SDK. You can interact unbelievably easily with graph objects using a wrapper like LightBulb without worrying too much about underlying technology and the core API itself. LightBulb is stable, easy to use, there are already lots of examples within it. Hasn’t been officially released yet but we are planning to do so in a week or two. Stay in touch.

So back to the point, our main intention was to show LightBulb’s capability of pulling FB graph objects and show them in a nice way like FriendSheet. The final output looks similar to that of Pinterest/Friendsheet and guess what, for only 10-15 lines of JS :) with another couple of lines added in the stylesheet block.

Demo: http://demo.projectlightbulb.net – For download link of source code, keep reading :) . If you dont see the gallery (or sometime see a little overlapping sometime) please refresh and it will work like a charm. It’s fully compatible and responsive with your mobile device.

The hovering effect is done using jQuery Adipoli Hover plugin. The stacked display is done by using jQuery Masonry plugin.

LightBulb is under active development from the developers at Leevio ( Me, Shoriful Islam Ronju and Rinku Arnob) , Rifat Nabi and M.A Hossain Tonu.

Download the Facebook Gallery using LightBulb from here (Thanks Box.net)

Shameless Promotion
If you want to outsource your Facebook application development to us, feel free to contact us here. Why? Because we know Facebook app development and their open graph objects inside out :)

Time to put those FUCKING captchas to an end!

So, by now – you know what’s this post is all about, what will be the writing style and some of you probably consider it as NSFW! Well I dont care about that – all I care is that my eyes are burning and I am turning into a retard, I am fucking annoyed and I have been under irritating mental pressure because of those fucking text based CAPTCHAS where I have to spend couple of extremely annoying minutes to look at those gibberish texts , understand that and then input what I am seeing on the screen! Oh yeah baby, It feels like I am sitting for a VIRGINITY TEST inside one of those bloody fucking Egyptian prisons. I AM A HUMAN AND I CERTAINLY DONT WANT TO BE TORTURED TO PROVE THAT! If you are still in favor of those CRAPPY FUCKING text based CAPTCHAS, you can leave the rest of the post because I dont give a damn about your love for those eye-tearing, getting-on-the-nerve style alien things.

Well, if you really have to FUCKING test me as a HUMAN, DONT DO THAT by slicing my ribs apart to check if there is any heart. There are certainly many other ways to check if your visitors are human or bot. Record their mouse movement (and put it into a pattern), or check if mouse was really over the submit button or blah blah blah. AND IF YOU WANT A FULLPROOF military grade PREVENTION against BOTS, go fuck with your document under a 200000ft dungeon.

Alright, the reason I am writing this article is that CAPTCHAs don’t have to be so fucking annoying. You can make intuitive captcha images instead of asking your visitors to translate what the hell your great great grandfather had seen in his UFO dreams, printed in those images.

WHY not make it something like these ones, keeping the actual captcha validation flow intact. Dont change it’s working style. Keep the same style of of public private key, salts, user inputs and everything. JUST FOR GODS SAKE change those images. Ask something different. Why not you think about something like these three below – if you ask yoru users to fill in the blanks (in the input box – instead of the mind fucking gibberish and garbled craps)


ANS: liberty OR LIBERY or LiBeRtY (whatever caps)


ANS: tree


ANS: rectangle or rectangles (consider fail safe or singular/plural for more user friendliness)

Seriously, why on EARTH do I have to prove that I am a HOMO-SAPIENS by filling up these freaking awful garbled text based CAPTCHAs. Lets make it easy, unless you are planning to serve your $100000000000 secret sausage recipe thinking that an annoying old school CAPTCHA will prevent it from being stolen. Please for gods sake, help making these moments your visitors will spend on your site a little more pleasing.

If no one starts this project, I will seriously start it as a web service with a name “NFC”. You know what that means? NO – FUCKING – CAPTCHA!

Arrrrrggggghhh!!

A tiny, open source Flickr Portfolio application

I have created a Flickr Portfolio application which can be linked to your Flickr account, display all your latest Flickr photos and incorporate Facebook like and comments with it.

This application is small, simple and code is well formatted so that you can edit it. All the instructions are provided in the readme.txt file and you can edit the settings in config.php file and instantly get a portfolio live :)

homepage screenshot
Flickr Portfolio Application - Homepage

Inner page screenshot
Flickr Potfolio Application - Inner Page

To download the source code, please go to http://photography.ofhas.in and find the download link in the footer.

This application is completely free, open source and you don’t even have to give any attribution to me at all :)

Download: http://photography.ofhas.in and find the download link in the footer

Enjoy!

Story about Blue E, iFramed Web Application, Wastage of 6 hours, Missed Lunch and what not!

Long story short, I was developing a Facebook page application which runs from inside a page tab. Such applications runs inside an iframe on Facebook Fanpage. Everything was going perfectly, until, we started checking it in IE!! The symptoms were simple, PHP Session is not working when user logs in. The application works perfectly in Safari, Opera, Chrome and Firefox and only the Elite of the Elites Internet Explorer is not accepting any cookie generated from the application.

I was hungry, almost lunch time – client was kicking my ass, so I couldn’t even think to grab a bite. I was VERY HUNGRY, clueless, lost and I was feeling like yelling at everything that walks in front of me. Oh boy, I was absolutely clueless about what was done wrong to satisfy this King Blue E.

After discussing my problem with Uncle G for over 5 hours, trial and error, do this and that, I realized that the problem is actually related to p3p privacy policy and how Internet Explorer deals with it. It doesn’t accept any cookie from any web application which is running inside an iframe within another application. Let me clarify

1. Web application A with domain a.com has an iFrame in one of its page
2. Inside that iFrame, it loads another web application B with domain b.com
3. Now Internet Explorer doesnt accept any cookie which generates by Web Application B, resulting a catastrophe, a real disaster.

The Solution: send the following header in your web application which runs inside the iFrame.

<?php
header('P3P: CP="CAO PSA OUR"');
header('P3P: CP="HONK"');
?>

and it fixes this weird behavior of Internet Explorer. Freaking p3p! wastage of 6 hours, remaining hungry, missing lunch, get kicked on the ass and what not.

I hate you Internet Explorer. You are the worst thing ever made in the history of web development. I sincerely hate you. And Microsoft, with all the Blue E fan-boys out there, GO TO HELL and let us live our life.

Morons!

Starting a new startup?

I’ve seen many people asking me how to start a startup. Some even asking “should I start one?”, and some more you should not ask to anyone, like “How do I know that I am ready for starting my own startup”. I try to help them as much as I can with my limited experience I had so far in last 6-7 years, specially from one of the third world countries like Bangladesh. In this article I will try to summarize my experience and I hope that it will help to to make your own decision.

One important thing before starting a startup is that you really need to be a good team player. Usually there are very few “one man only” style startups. If you want one of that type, dont worry, team work is not something until you start looking for VC funding or until having a couple of marketing guys in your team. But keeping in mind that most statups have two or three members, I want to emphasize that team work is really very important thing. You need to be well communicative with your team members, show them respect to their decision and you need to be similar minded. You can’t really start a startup on helping girls to get their kithecn recipes out of the box while your team members want to make one for car lovers. So this is very important that despite of your personal feelings and interest, you must be a good team focusing on one single subject.

Secondly, not really a rocket science but kinda tough, you need an idea. You need a good idea that actually solves other peoples problem. When we started Leevio, our first target was to increase our brand value by making a product that people will actually use. Most of the people I see around, desperately looking to start their startup, are lacking one good idea, but where to get one? Listen, you dont need to spend weeks after weeks and months after months to get a good idea. You dont need a “better” idea from the beginning. Just look at peoples hanging beside you, see how they are doing annoying and repeating tasks in not-such-an-easy way. Try to simplify their everyday life. Think from their perspective and soon you will find that an idea is not such hard to find. So dont waste time, get a good idea that will help people to simplify some of their everyday tasks and boom, go. Gradually you can improve your idea and maybe you can scrap if you get a better one. But too much scrap and start game is bad for your startup. Whatever you get, start with that.

Another important thing in running a startup is that you must keep your ego aside. Thats why I said that you need similar minded people in your team which actually help your team leaning towards the same target. If your team members keep brawling about decisions every now and then, well, good luck with your startup that is never-to-see-the-light. Distribute the roles wisely. In a startup you will be suffering from limited money, limited resources and guess what, you have to run along with that. So be very wise in hiring for your team members. Hire some people that can do whatever they are good at, really well. And in a startup world, its not unexpected that you all have to do multi tasking. So sometime we get people who are good at HTML as well as in Photoshop, or one DBA who has moderately good skill in system administration. From my point, you really need these three types of people in your team

  • An architect, who can layout the project plan better
  • A DBA or someone who understands Database really well. Doesnt matter if it’s N/RDBMS or whatever
  • Designer, at least someone who can design in XHTML
  • System admin
  • Developers who will write the code together

While setting up Leevio, One of us had to play the role of architect and system admin. We together played quite a good role as laying out our DB schema. And then, we distributed our tasks into small parts and started coding. We didnt have a designer in our time. So sometime we outsourced some tasks, and sometime, surprisingly and luckily one of us was good in designing in XHTML and we did some basic ground work with his limited skill.

For today, I will try to end this article focusing on one more important thing. Tell me what is that? Furniture? nope! You are now motivated enough to start even getting a mattress and a decent laptop. Food? nope! who cares if you are even eating or not. Well, I’m just kidding and it’s really important that you always consume healthy foods.

The thing I want to mention here is “Money“. You, no matter if it’s an one man startup or three, need money to run it. You need some savings to run for couple of months. It’s not bad to plan for six months ahead of time so that you can pay your team. And it’s very rare that your startup will help you earning immediately after launch. So backup money is really helpful for these early days. When you start looking for seed money or angel funding, go to your friends and relatives first. Because those are the people who trust you and expect least than a commercial VC. Dont take money unless you really need that and whats more important is be wise in spending that. You dont need a dual quad core xeon server from the first day when your sartup is in incubator. You dont need Aeron Chairs. So try to spend as little as possible and always prepare for the bad days ahead. There’s nothing bad in being prepared. And keep a little saving so that you can restart even if your startup fails.

Thats all for now. I will come back with more articles regarding this very soon and I hope those will really help.

Convert your reception area into an Interactive Kiosk with this nice little iPad App

My Friend Michal has developed a really cool app LoungePad for turning your reception area into an interactive Kiosk. You should really check out this app. Very interesting one.

If you have a Dental / Medical / Cosmetic Practice, Hair / Beauty Salon or even a Health spa, then Loungepad will allow you to turn your iPad into an innovative waiting room/reception area kiosk.

GO TO www.loungepad.com TO REGISTER FOR DEMO ACCESS + FREE 30 DAY TRIAL

** IMPORTANT: LOUNGEPAD IS NOT A STANDALONE APP (APART FROM THE DEMO) AND YOU WILL NEED A PC OR APPLE MAC TO INITALLY SETUP THE SYSTEM AND UPLOAD YOUR FILES **

WHAT CAN LOUNGEPAD DO FOR YOU AND YOUR BUSINESS?
- Markets your services whilst your customer is waiting in your reception area and keeps them entertained.
- Saves staff admin hours by automating all form-filling tasks.
- Tracks what your customer is interested in.
- Formatted and branded to have the look and feel of your business.

LOUNGEPAD ADMIN SECTION (SERVER SIDE)
- Setup your LoungePad on our server
- Choose layout from 4 pre-defined templates and then configure to make your own
- Configure background colour/image, text size/colour, upload your logo
- Select pre-defined icons, change their colour or upload your own icon designs
- Setup and save multiple layouts, and then downloaded to your iPad
- Preview your setup just as if it is on your iPad, allowing you to tweaks & changes

SELECTABLE FEATURES:
Setup as little or as many features as you need on our server then just download to your iPad.

a. UPLOAD VIDEOS and IMAGES
- Upload and store your MP4 videos.
- Upload your photos (jpeg and png) e.g. ‘Before and After’ pictures for Dentists or different hairstyle for your salon.

b. QUESTIONNAIRES and SURVEYS
- Create simple or complex survey and questionnaires such as medical or dental patient questionnaires or a hotel guest survey. Even use your created forms as a standalone feature. Create:
Simple Text Areas** Calendar**Radio Buttons** Check boxes**Yes/No answers** Drop down lists
- Survey/Questionnaire answers are emailed to you or multiple email addresses.
- A ‘CSV’ file is attached with each email allowing data to be imported into a database.
- Data stored on our server for up to 30 days allowing you to download all information in one go and then export to Excel or a database.

c. BROCHURES / PRICE LISTS
- Upload brochures and price lists (pdf format). Any ‘PDF’ document can be uploaded allowing users to see your brochure, price lists or even special offers.

d. WEBLINKS
- Create and direct users to your own website or websites that you choose, without customers leaving LoungePad.

e. UPLOAD YOUR HTML FILE
- Create/design an external HTML page (yourpage.html) and upload it to LoungePad e.g. upload a mini web page specifically designed for your Loungepad and incorporate linked images and videos from other websites or your own existing website.

F. ‘JOIN OUR MAILING LIST Feature
- Quickly setup and collect user name, address and emails and save it on LoungePad server for you to download as a CSV file. Generate Customer/client Loyalty.

G. STATISTICS
- Track what has been looked at on your LoungePad and for how long.
- Use statistics to Improve customer experience and more importantly improve your in-house marketing technique.

LOUNGEPAD – IPad ADMIN AREA
- Change the look and feel of your LoungePad at anytime by downloading any of your pre-configured setups, keeping your LoungePad looking fresh and new.

FREE 30 DAY TRIAL of full system (server side and iPad) +DEMO ACCESS
- Download Loungepad
- Go to www.loungepad.com to register
- Access to Demo site will also be provided

Box.net widget in MiproApps – why did it require special care…

In MiproApps, our Visual Facebook Fanpage Desiger from Leevio, everything is built on top of a scalable plugin based architecture. Every plugin manages it’s data using a central plugin manager. Most of these data are isolated from each other, stored and served by the plugin manager without any special coding required from plugin developers. That makes everything simple. As storage and serving is fully managed by Plugin Manager, it helps us to cache, validate and sanitize user data properly from a single place.

But when we decided to add support for box.net, there comes a challenge. We have asked for username and password for box.net account from our users to pull out the data from their shared folders and files. “PASSWORD” – and that is the thing everyone thinks twice before providing to a third party. Everyone cares about their personal data security.

In MiproApps every data collected from user are submitted to storage service via Ajax request. And we simply cant send plain password collected by users in an Ajax request. What we did in this case is we had signed user’s sensitive information using a 128 bit public key (RSA) in client side. The private key is stored securely in our server and that encrypted information is decrypted only in server side. So client application has just the public key.

Box.net widget in Facebook Fanpages powered by MiproApps

Box.net widget in Facebook Fanpages powered by MiproApps

There were other challenges as well, while we went to implement this encryption in client side by Javascript and Decryption by PHP. Unfortunately PHPs Mcrypt doesnt support RSA, and Zend Framework doesnt provide any component for that. And there was a trick when you encrypt your data in JS. You must add a null byte at the end of your data, otherwise PHP cant decrypt it.

We have used RSA library (a combination of RSA, BigInt and Barett Library) from Ohdave and used the Crypt_RSA library from PEAR. And it also required us to install bigint PECL extension.

You can see some example code at here and you can use the RSA public/private key pair either by openssl shell command or the RSA key generator from ohdave.

The service layer is working smooth. Plugin developers doesnt need to bother about encryption and decryption. Everything was managed transparently under the hood. And so far we are only developing our plugins, data is secured and safe. Users can add their publicly shared box.net files directly in their facebook fanpage. For a sample output, you can check out my page. You will find the box.net component at the bottom right corner.

Using new PECL Memcached extension for storing session data

Many of you already know that managing session is a critical task for web applications, specially when you want to avoid I/O hop and also a significant load over your database by writing a custom session handler. Beside that, if your application makes use of multiple web servers behind a proxy, then its more than a critical job to share and manage session data among these servers effectively. This is why a central session manager is very important for your application to scale. In this article I am going to show you how you can use the latest Memcached extension (developed by Andrei Zmievski and his team) to isolate the session storage from web servers. I will show you how to compile the extension and use it.

Step1: Install Memcached Server
If you are using Debian its just plain simple

apt-get install memcached

Step 2: Run memcached instances
Lets run two instances of memcached in same machine (well, this article is just for demonstrating you how you can get things done. In the production environment, you can deploy as many memcached instances as you want in different servers in same network)

memcached -d -l 127.0.0.1 -p 11211 -u <username> -m 16
memcached -d -l 127.0.0.1 -p 11212 -u <username> -m 16

Above commands will run two instances of memcached listening on port number 11211 and 11212, same IP 127.0.0.1. Each of them get an allocation of 16 MB of memory (on RAM).

Step 3: Install the PECL Memcached extension.
Lets install the new PECL memcached extension in your web server. This new extension depends on libmemcached. You can grab the latest distribution of libmemcached from https://launchpad.net/libmemcached and compile it in your own machine. Make sure you have the dependencies met.

wget http://launchpad.net/libmemcached/1.0/0.34/+download/libmemcached-0.34.tar.gz
tar -zxvf libmemcached-0.34.tar.gz 
cd libmemcached-0.34
./configure
make && make install

Considering everything went fine, lets install the PECL memcached extension

pecl install memcached

If everything goes fine, you should see the output similar like this

Build process completed successfully
Installing '/usr/lib/php5/20060613/memcached.so'
install ok: channel://pecl.php.net/memcached-1.0.0
configuration option "php_ini" is not set to php.ini location
You should add "extension=memcached.so" to php.ini

Make sure that memcached.so is placed in your PHP extension_dir folder (here /usr/lib/php5/20060613). Add the line “extension=memcached.so” in your php.ini and restart your web server.

To make sure, everything’s done and working – run a phpinfo() and check the output. There should be a “memcached” sesction which will look like the following one.

Memcached PECL Extension

Memcached PECL Extension

Now we need to make change in our php.ini to register Memcached as a session handler and set the necessary properties there. Open your php.ini and add the following two lines. If you find any similar line un-commented, comment them out first.

session.save_handler=memcached
session.save_path="127.0.0.1:11211, 127.0.0.1:11212"

Restart your web server. And …… you are done! :) – Now all your session data will be saved and served from these memcached servers. No matter whenever you need to extend your setup by adding extra web servers, all user data and session data will remain valid and served from a central location. No I/O issue, no huge write load on DB servers.

jQuery:hooking form submit and making it ajax request

modern javascript frameworks are big blessings to every front end developer. they made our life so much easier so that we can sleep more and become fat day by day :D – i am a big fan of jQuery and mootools.

in this post i am going to show you how you can hook a normal form submission process, regardless of it’s method GET or POST, and convert it into an ajax request. the whole process will work dynamically. it will parse form input elements, make a JSON array from them and make an ajax request to the appropriate action url. after that, it will invoke the user supplied callback function.

problem 1: parsing form elements was a small challenge. you can do it in various way (by traversing or serialize or using css selectors). i choose to use serializer routines. jQuery has builtin support for two types of serializing , one is $(form).serialize() and another is $(form).serializeArray(). lets have a look at the output of both of them for the following form

<form id="f1" action='some target' method='POST'>
<input type ="textbox" id='username' name ='username' value='me'/>
<input type ="checkbox" value=1 id='guests' name ='guests'/>
</form>

now lets check the output by both serialize() and serializeArray() method

alert ($('#f1').serialize());
//output is "username=me&guests=1"

alert($('#f1').serializeArray()
//output is [{object},{object}] 

are you scared seeing this [object] output of serializeArray()? well dont panic. serializeArray() returns a JSON structure. you can still investigate using toSource() method

alert($('#f1').serializeArray().toSource()
//output is [{"username":"me"},{"guests":"1"}] 

but that will not be usable to send in our AJAX request. we need a JSON array key/value pair (or you can use the output of serialize() function too to send as data in ajax request, the serilizeForm part is completely optional )

lets create a new function called serializeForm which will create JSON key/value pair out of serializeArray() and do the rest of the work.

$.fn.serializeForm = function()
{
    data = {};
    url = this.attr("action");
    items = this.serializeArray();
    $.each(items,function(i,item)
    {
        data[item['name']]=item['value'];
    }
    );
    return data;
}

now lets hook the normal submit process of the form using the following hook

function submitHook(form, callback)
{
    $(form).submit(function(e){
        items = {};
        items = $(form).serializeForm();
        url = $(form).attr("action");
        if(""==url)
        {
            alert("Cannot submit form. No action specified");
            return false;
        }
        callback = callback?callback:function(){};
        $.post(url,items,callback);
        return false;
    });
}

now you can just hook the form simply by this

ourCallback = function (data)
{
   alert(data);
}

submitHook($('#f1'),ourCallback);

happy jQuerying :)