Create personalized phar files in PHP

Created a screencast to show how you can create phar files, most importantly personalized phar files to store some information inside it and protect it using user’s password. Those information is usable only when user providers a correct password.

For packaging, I used http://box-project.org which is an excellent phar packager. I’ve also used two functions from Josh Hartman’s blog to encrypt and decrypt data using Rijndael algorithm.

www.youtube.com/watch?v=V-1NgA5T4Bw

How to create a page and assign a page template automatically in WordPress

Sometime your theme depends on a few special pages, and it’s better to create them automatically after theme activation. You could also ask your users to create these pages and assign a few specific page template, but why would you do that if there is a scope of doing it automatically from your theme. Here is a simple snippet to take care of that :)

Step 1: Create a page template in your theme (say awesome-page.php) which has the following code

<?php
/**
 * Template Name: Awesome Page
 */

Step 2: Add the following code in your theme’s functions.php file :)

add_action('after_setup_theme', 'create_pages'); 
function create_pages(){
    $awesome_page_id = get_option("awesome_page_id");
    if (!$awesome_page_id) {
        //create a new page and automatically assign the page template
        $post1 = array(
            'post_title' => "Awesome Page!",
            'post_content' => "",
            'post_status' => "publish",
            'post_type' => 'page',
        );
        $postID = wp_insert_post($post1, $error);
        update_post_meta($postID, "_wp_page_template", "awesome-page.php");
        update_option("awesome_page_id", $postID);
    }
}

And you are done!

My $4/year continuous integration server using webhook and rsync

Anthony Smith is running an interesting project called Low End Spirit where he sells low end servers for $4/year and these servers comes with 128Mb ram and one core of Xeon X3440 cpu @2.53GHz and 500GB bandwidth. And most interesting thing is that they comes with 5 IPv6 addresses in multiple locations. LowEndSpirit is pretty famous for their amazing service.

So I purchased one of these servers a week ago, and converted into a simple continuous integration server and trust me, it’s running just amazing. Here is what I did :)

1. I pointed one of my domains to this LowEndSpirit server (Lets call it LES Server) using cloudflare’s free IPv6 to IPv4 proxy, http://forum.lowendspirit.com/viewtopic.php?id=441

2. Once the domain is working, I created one php file in my LES server. This php file is working as the webhook endpoint. Lets assume that this file url is http://example.com/webhook.php so that we can refer to it in the rest of this article. The only thing this webhook.php file is doing is creating a file in the /tmp directory, for example /tmp/hook.txt

3. I created a ssh key using “ssh-keygen -t rsa” command in my LES server, and copied the content of the public key (~/.ssh/id_rsa.pub) generated by this command. Don’t use a passphrase when you create this key. Now I went to bitbucket/github and added this public key as deploy key (Here’s how to set it up in Bitbucket and in Github). This makes sure the readonly access of this key, that is very important from the security pov that you use a deployment key. Now in my LES server I checked out my repository. Lets consider that I checked out at /path/to/my/repo

I have also add the URL of this webhook php file to the bitbucket/github’s hook/webhook section. This makes sure that whenever I push code, bitbucket/github will make and HTTP POST call to this webhook php.

4. Now copy the content of your public key (~/.ssh/id_rsa.pub) in your LES server, and add it in your Remote Project server’s authorized keys file (~/.ssh/authorized_keys). If you are concerned about security then you may also chroot, but that’s not essential. Once this LES server’s public key is added in your Remote Server’s authorized key section, the connection will be smooth.

5. I wrote a simple bash script which checks if there is any file named hook.txt in /tmp directory in my LES server. If it is found then it ‘git pull’ the repository and perform an rsync which updates my project code folder in the remote server, and then remove this /tmp/hook.txt . I saved this shell script to /path/to/shell/script.sh . Here is the content of the bash script. Don’t forget to give it executable permission by “chmod +x /path/to/shell/script.sh” command

#!/bin/bash
if [ -f "/tmp/hook.txt" ]; then
	rm -f /tmp/hook.txt
	cd  /path/to/my/repo
	git pull
	rsync -rltuvh /path/to/my/repo/ user@domain.tld:/remote/path/of/the/repo/
	echo "Done"
fi

6. Now the final step is registering a cronjob. You can register a cronjob by invoking “crontab -e” command in your terminal window. So I went ahead and registered this cron job in my LES server.

*/5 * * * * /path/to/shell/script.sh > /tmp/cron.log

It runs every five minutes and if the /tmp/hook.txt is found it update the local repository by “git pull” and rsync only the updated files. My project folder in remote server is instantly updated :)

The server and service is running just great. Honestly, that’s a huge service running by a $4/year server :)

By the way this is more of a Continuous Deployment in true sense, just fyi!

Saving a HUGE bandwidth cost in WordPress by automatically serving media contents from copy.com

shutterstock_132384233
The title almost says it all. Our mission is to save the bandwidth cost (and ensure better deliverability) by leveraging the power of headless installation of copy.com client in Linux, and then integrating it into WordPress. The integration must work seamlessly so that the viewers don’t see a difference, and at the same time you don’t have to put any extra effort. Beside saving bandwidth, this also reduces extra load from your web server. There’s another surprise which I will tell you later. For now, keep reading :)

You need at least a VPS to make this setup working, preferably with root access. These days VPSes are cheap. You can purchase an 128MB VPS for ~14/yr from Ramnode (such a fantastic provider) or may be for ~19/yr from WeLoveServers. Or feel free to use your existing VPSes if you have one.

Step 1: Headless installation of copy.com app
You can use your existing copy.com or register a new one using my referral code http://copy.com?r=Tbcrni, you and I both will be getting an extra 5GB if you do so.

Now log into your linux box via SSH, you need to have root privilege to complete this step.
Continue reading

Breakpoint JS – load external javascript for different browser breakpoints

idea

Live Demo: http://hasinhayder.github.io/BreakPoint/

Breakpoint helps you to define multiple breakpoint ranges and load external javascript files when someone resize their browser window to those breakpoints. Beside loading external scripts, Breakpoint also triggers an event whenever browser width falls in any of those predefined breakpoint ranges.

Using Breakpoint
Using BreakPoint is pretty simple. Include jQuery in your web application and then include jquery.breakpoint.js. Now you can define multiple breakpoint ranges and initialize like this

$(document).ready(function(){
	$.BreakPoint({
		breakpoints:{
			mobile:{max:480,load:true},
			default:{min:480,max:1024, load:true},
			wide:{min:1024,max:1200,load:true},
			superwide:{min:1200,load:true},
		}
	});
});

In the example above, we have defined four different breakpoints. The first one mobile will be used whenever browser is resized from 0px to 480 pixel (all inclusive). The next breakpoint, default will be used whenever browser is resized between 480px to 1024px (all inclusive), and so on.

Now, whenever a breakpoint is reached, BreakPoint jQuery Plugin will load an external javascript file with the same name of the breakpoint. For example, when browser is resized to 400px it will fall under mobile and now an external file named mobile.js will be loaded and executed.

By default BreakPoint will look for external javascript files in the js/ folder in the current path. But you can change this by passing a parameter named prefix, like this

$(document).ready(function(){
	$.BreakPoint({
		prefix:"scripts/",
		breakpoints:{
			mobile:{max:480,load:true},
			default:{min:480,max:1024, load:true},
			wide:{min:1024,max:1200,load:true},
			superwide:{min:1200,load:true},
		}
	});
});

Now BreakPoint will load external js files from the scripts/ folder.

Breakpoint Parameters
prefix: By default, prefix is set to js/ but you can change it to anything you want.
breakpoints: for each breakpoints, there are three paramaters you can pass which are “min”, “max” and “load”. By default min is set to 0, max is set to 9999 and load is set to false. The load parameter is an important one if you want to load external javascript files whenever a breakpoint is reached. If load is set to true, external files will be loaded, otherwise not.

BreakPoint Events
Whenever a breakpoint is reached, BreakPoint plugin will trigger a window event named breakpoint. The event object will have an attribute named breakpoint which will contain the name of the breakpoint that has been reached. Here is an example how you can add an event listener to this breakpoint event

$(document).ready(function(){
	$(window).bind("breakpoint",function(e){
		if(console)
		console.log(e.breakpoint);
	});
});

That’s mainly it. Enjoy! Check out the live demo at http://hasinhayder.github.io/BreakPoint/

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!