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 deployment 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 Saving a HUGE bandwidth cost in WordPress by automatically serving media contents from copy.com

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 :)