Some quick tips

Find and replace text within all files within a directory

find PATH_TO_DIRECTORY -type f | xargs perl -pi -e 's/SEARCH_KEYWORD/REPLACE_KEYWORD/g'

Find a text in files in a directory and subdirectories

find PATH_TO_DIRECTORY -exec grep -l 'SEARCH_KEYWORD' {} \;

Find all modified file in last few days within a directory (exclude some sub-directory for e.g. CVS)
Create 2 files as below under DIRECTORY (e.g. find all modified files between 1st July 2011 and 31st July 2011)

touch -t 201107010000.01 FILE_1 /* 2011[year]07[month]01[day] */
touch -t 201107312359.59 FILE_2 /* 2011[year]07[month]31[day] */
find PATH_TO_DIRECTORY -type f -newer FILE_1 ! -newer FILE_2 -exec ls -ogh {} \; | grep -vw 'EXCLUDE_SUB_DIRECTORY' | cut -f4,5,6 -d' '

Batch resize image using ImageMagick

cd PATH_TO_IMAGE_DIRECTORY
mogrify -resize WIDTHxHEIGHT *
mogrify -resize WIDTHxHEIGHT -quality 80 * (to reduce quality)

Copy directory structure without the files

find * -type d -exec mkdir PATH_TO_DIRECTORY/\{\} \;

Webpage screen capturing using khtml2png

Recently, we were working on one PHP project, where we required to have "webpage screen capturing" functionality. I googled on net and found some tools... some window based, some paid... obviously I was looking for *FREE* tool :). As we are working on Lamp (Linux, Apache, MySQL & PHP), I was wondering if I get some Linux based tool.

One solution I found was, using html2ps and then ps2png/ps2jpg/ps2gif to convert it to image. Then ImageMagicK for image manipulation. Somehow I stuck with some weird memory related errors, some package conflicts, some formatting issues etc. So, after spending one day on nothing; I dropped this solution.

Then I tried khtml2png (http://khtml2png.sourceforge.net) and after some r&d, it worked for us.

Some points to remember...
- You need to have VPS/dedicated hosting to setup these tools. On shared hosting, its not possible to install due to various restrictions by hosting providers.

- This tool requires, some libraries and tools: g++, KDE 3.x, kdelibs for KDE 3.x, zlib (zlib1g-dev) and cmake

- This tool uses KDE (K Desktop Environment), that means whenever you use khtml2png tool, it will open one window for *a while* at time of capturing webpage screenshot. We can remove this by using "Xvfb". We will see how to install and configure it later.

- These links will be helpful, if you are planning to develop web application with webpage screen capturing using khtml2png
http://khtml2png.sourceforge.net/index.php?page=faq
http://www.mysql-apache-php.com/website_screenshot.htm

Here is step by step guide to install various dependencies and packages. (I installed these tools on Fedora7 & RHEL5 successfully)

I used "yum" command to install and auto-configure these tools. If "yum" is not available on your machine, get if from http://yum.baseurl.org/ and install it.

Step:1

 yum install ImageMagick

 yum install Xvfb

 yum install gcc gcc-c++ automake autoconf nano zlib zlib-devel

 yum groupinstall "X Window System" "KDE (K Desktop Environment)"

 yum install kdelibs kdelibs-devel

 yum install Xvfb xorg xorg-x11-font* 

Step:2 Install *cmake*
Go to share directory by typing command

cd /usr/local/share/

or any preferred directory where you want to download package. (check http://www.cmake.org for latest "cmake" version)

 wget http://www.cmake.org/files/v2.8/cmake-2.8.1.tar.gz
     
 tar -xzvf cmake-2.8.1.tar.gz

 cd cmake-2.8.1

 ./bootstrap

 make

 make install

Step:3 Download & Install *khtml2png* on your server as per instructions in this link.
http://khtml2png.sourceforge.net/index.php?page=download

Step:4 Check if *khtml2png* is working

 /usr/local/bin/khtml2png2 'http://www.yahoo.com' yahoo.png 

(this will capture yahoo homepage in yahoo.png)

Step:5 Install *khtmld* (a daemon which will be required to run khtml2png in background)
http://wiki.goatpr0n.de/projects/khtmld

I faced couple of problems while setting up *khtmld*, but it got solved by reading suggestions from above link.

I installed above all tools as *root* user.

Once you are done with above steps, lets play with *khtml2png*

How to start?
Run following command to run khtml2png without a visible X session

 Xvfb :2 -screen 0 1024x768x24&
 export DISPLAY=localhost:2.0

(you can put above 2 lines in rc.local so it will start automatically whenever server restarts)

Then start *khtmld* daemon as your webserver user (for me it is *apache*) so that PHP script can have permission to talk with this daemon. (run below command after login as *root* user)

 khtmld -K /usr/local/bin/khtml2png2 -c /etc/khtmldrc --user apache&

"-K /usr/local/bin/khtml2png2" is path to khtml2png2 as by default "khtmld" will look for old "khtml2png" (khtml2png2 is latest version). Find khtml2png2 path using

 whereis khtml2png2

"-c /etc/khtmldrc" is config file path for khtmld (you can create this config file if its not already there)
Sample content for khtmldrc

width=1024
height=768
display=:0.0

Capture image using *khtmld*

echo "http://www.yahoo.com /tmp/yahoo.png" >/tmp/khtmldspool 

(for more details - http://wiki.goatpr0n.de/projects/khtmld)

We have also used ImageMagicK command "convert" (http://www.imagemagick.org/script/convert.php) to trim the image for removing whitespace.

convert /tmp/yahoo.png -fuzz 1% -trim /tmp/new.yahoo.png

Sample PHP code for capturing & displaying PNG image using "khtml2png"

<?php
  ob_clean();
  header("Cache-Control: no-cache");
  header("Pragma: no-cache");
  header("Content-type: image/png");

  $webpage_url= "http://www.yahoo.com";

  $out_put_file = "/tmp/yahoo.png"; //captured screen
  $new_out_put_file = "/tmp/new.yahoo.png"; //whitespace removed

  $cmd = "echo '".$webpage_url." ".$out_put_file."' >/tmp/khtmldspool";
  exec("$cmd");

  // some delay till khtml2png capture screen
  while(!file_exists($out_put_file)) { sleep(3); }

  exec("convert $out_put_file -fuzz 1% -trim $new_out_put_file");
 
  while(!file_exists($new_out_put_file)) { sleep(1); }

  // display image on browser
  echo file_get_contents($new_out_put_file);
        
  unlink($out_put_file);
  unlink($new_out_put_file);
  exit;
?>

Hope this will be helpful.

That's all for now.

Multilingual support in PHP website

NOTE: This post is written for developers having some knowledge of PHP/MySQL. So, if you find it difficult to understand some part, plz leave your comments. - Nilesh

So many developers thinks that its hard to provide multilingual support to website. Are you one of them? No problem. Here are some helpful tips to provide basic multilingual support for you website.

There are 3 different cases

CASE#1 Provide multilingual to static contents of site.

For e.g. if you have header navigation, left navigation in website OR if you have predefined messages e.g. greeting messages, validation error messages etc then you need to do following things.

Create one configuration file per language.
E.g. if your site has English and Hindi support, then create 2 language configuration files.
(1) en.lang.inc.php
(2) hi.lang.inc.php

Both file will content same data in following format.
(1) en.lang.inc.php

define(‘WELCOME’, ‘Welcome’);
define(‘SIGN_IN’, ‘Sign In’);

NOTE: you need to find all places in your application to check how many strings you need with multilingual support and store in this file.

(2) hi.lang.inc.php

define(‘WELCOME’, ‘<place here hindi version of - Welcome>’);
define(‘SIGN_IN’, ‘<place here hindi version of - Sign In>’);

On user side, you need to provide selection to choose language.
English will be default language so lang=en

Your application request to change language will be xyz.com/file.php?lang=en for English, xyz.com/file.php?lang=hi for hindi.

Once user will make selection store that selection in COOKIE and use that value later so, you don’t have to pass “lang” parameter in each request.

Write code in your application’s common include file (this must be included in every request), to include proper configuration file based on selection.

So if user select English, only en.lang.inc.php will be included and if user selects Hindi, then only hi.lang.inc.php will be included.

Now you need to replace all your static contents with php constants in HTML/template files.

e.g. if your signin page contains.

<h1>Welcome</h1>

Then replace it with <h1><?php echo WELCOME ?></h1>

So, page will load language specific contents.

CASE#2 Provide multilingual to images.

E.g. in header you have used one image for text “about us” then for hindi version you need same image with hindi text.

You can use two directories in your images directory. Image name must be same in two directories.

Images/en/about_us.jpg
Images/hi/about_us.jpg

Then you need to change your code to load proper image based on language selection.

So, your image code

<img src=”images/about_us.jpg”>

will look like

<img src=”images/<?php echo $lang ?>/about_us.jpg”>

CASE#3 Provide multilingual to page contents.


e.g. if you have provision in admin panel to add content for “about us” page. You need to provide selection, for which language you are entering data. So, in database you will have two entries/versions for about us pages for two languages.

e.g. DB entries will be like below.
en | about_us | English contents
hi | about_us | Hindi contents

While displaying it to user, your query must use “language selected by user” to get proper contents from DB.

WYSWYG / TinyMCE editor has multilingual support for entering data. That you can use for entering data, else copy the data from any translator (e.g .google) and paste it into editor.

Database table for storing Unicode contents; must need to have UTF-8 setting >> charset: UTF-8 Unicode (utf8)

Also, you need to add following META into your HTML head.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

That’s all!

How to set priority of a bug in a web application?

Software bugs are un-avoidable. No one can deliver bug free system at first stage. It means some how we need to deal with bugs. Here I have written some guideline to set bug priority in web application. One can use it for other applications too.

Consider a small web application where user can register and upload photos & videos after log in. I have used this example to visualize various conditions as below.
Here P1, P2, P3, P4 & P5 are priorities.

P1: Blocking, High level importance & Can occur during Testing/QA phase.
e.g.
(1) Development is done, but QA is not able to start testing as he is getting blank screen due to improper DB connection.
(2) User is not able to register or sign in.

P2: Blocking, Low level importance & Can occur during Testing/QA phase.
e.g. User is able to login but there is some problem in photo upload feature and user is not able to upload photo.

P3: Not Blocking, High level importance & Can occur during Development phase as well as Testing/QA phase.
e.g.
(1) Normally when ever you start developing some module, by default you can set priority to P3 for all your tasks.
(2) Forgot password feature is not working.

P4: Not Blocking, Low level importance & Can occur during Development phase as well as Testing/QA phase.
e.g.
(1) Design related issues. Thumbnails are not looking good for photos in photo album.
(2) Browser issues. Sign Up page is looking great in Firefox but not aligned well in IE & Safari.

P5: Not Blocking & Can occur during Development phase as well as Testing/QA phase.
e.g. Text changes. Error message is not proper / some spelling mistakes

You can deliver your project successfully if it passes following criteria.
Total P1 Open should be 0
Total P2 Open should be 0
Total P3 Open should be 0
Total P4 Open should be 5 (You can change this no.)
Total P5 Open should be 5 (You can change this no.)

Is there a way to change YouTube player skin?

Many of you have tried embedding YouTube video in webpage using EMBED tag. It’s very easy. Just copy the code and paste it in webpage, it will start streaming video. You may think, what’s new here? Yes, you are right there is nothing tricky here. Wait for a while.

Check the second scenario. Let say you want to steam any random video (.flv) other than YouTube video. What options do you have? Either you can use built in flash video player with little customization to match look and feel with your website theme or you can use free open source flash video player (e.g. flowplayer) to stream your video. So, what’s exciting here? Nothing.

Now check the third scenario. Let say you want to steam video provided by YouTube, but want to change video skin to match look and feel with your website? What you will do? Is there any option available to change skin of YouTube player other than default skin?

Yes; it’s possible. You can choose “YouTube Custom Player” if you just want to change background color, name of the player and content of default YouTube player. Or you can user “YouTube Chromeless Player”. You can use either JavaScript APIs or Flash APIs to make your custom player.

See the demo here; cromeless player using JavaScript APIs.

I found some limitation in integrating this APIs
(1) YouTube has provided numerous functions to integrate. But it’s hard to control various events like play, pause, mute, un-mute etc. in design.
(2) The given example support embedding of only one video player at a time. What to do if you have more than one video on a webpage?

I have made a JavaScript class using JavaScript APIs which allows user to overcome both the listed issues.

You can download the class and example code here!

Also, check the demo here of what I have implemented.

If you find any difficulties using this class, please contact me.

Hope you will find this post helpful.