Phine Solutions web work notes

WordPress has released 2.1 and this post is written in this new release.

I upgraded my wordpress code base pretty painlessly. With the SSH access to my box, I used a little bit different process to upgrade.

1. download the latest release.

wget should do this perfectly. wget http://wordpress.org/latest.tar.gz

2. unzip the tar file into a folder at the same level with the current wordpress host directory, which maybe public_html in some cases.

tar xzf latest.tar.gz

3. a new “wordpress” directory should be created. At this point I will copy the files or directories that are supposed to be retained from the old version to the new directory. These files are: wp-config.php, .htaccess, robots.txt, any language directories under wp-includes, any customized stuff under wp-content, and other directories or files created by myself.

4. backup the database and deactivate the plugins.

5. change the current wp host directory to something else and rename the new “wordpress” directory as the wp host directory. I also created an index.htm file to let the visitor know we are in the middle of an upgrade.

6. Step 5 enssentially upgraded the wp codebase to 2.1, now I can run the /wp-admin/upgrade.php from the browser. The rest will be re-activate the plugins.

This upgrade process saves me some time to backup the existing version of worpress and by having a copy of fully functional code base on the server, it makes it simpler to switch back to the old version if there is any problem during the upgrade. A couple of “mv” command should do the job, and of course, the database may need to be reloaded from the backup.

The new 2.1 definitely has some cool enhancements. The new visual editor works much better and I may not need the additional WYSIWYG plugin now.

Last week I attended the Sun Tech Days in Atlanta. The event lasted for 3 days but I only went to the one day developer's session.

As I am a Java developer in the corporate world I'd like to keep updated with the newest Java Technology. Since Sun is the inventor of Java, Sun Tech Days should be a good event to go to and it turned out to be a very informative and interesting event.

Here are some highlights I gathered from the event:

Open Source

Sun is opening the source of its operating system and Java. 

NetBeans

Sun is definitely pushing its NetBeans IDE to the developer's desktop. During the event, the speakers from Sun demonstrated how easy it is to use NetBeans to create Java apps with Ajax and other plug ins. I am not sure if I will switch from Eclipse to NetBeans, but definitely want to give it try.

Web 2.0 & Ajax

These are two probably most repeated words in the speaker sessions. An interesting development is that Java 6 also includes a script engine so a Java program can include scripting language like Javascript or Ruby. I am not sure if PHP is on the future list. I guess since JVM itself is a platform it is natural to adopt scripting language, one of the fast growing development tools, into JVM.

In my opinion "Web 2.0" is really a natural path for the improvement of the web technology and the community concept is nothing new since the "web" literally represents a community. Ajax is a probably the single word to resonate the Javascript technology. It is good to know that Sun is keeping the pace with the latest technology trend.

Jame Gosling

There was a Q&A session with Jame Gosling, the inventor of the Java programming language. He really knew what he was talking about.

Things I will definitely check out

Project jMaki – jMaki is an Ajax framework that provides a lightweight model for creating JavaScript centric Ajax-enabled web applications using Java, PHP, and Phobos.

Mr. Sang Shin was one of the speakers on web 2.0 framework and Ajax technology. There are some great info on his website.

Free Sun Tech bag! 

Almost all my sites are database driven using MySQL. I use phpMyAdmin for data manipulation most of the time. But I also need a way to keep track of the design and quickly analyze which tables to touch in case there is need for data repair. I though about drawing them on paper but it can be hard to put down 30 tables.

Recently I tried a couple of free product and the goal is to use the reverse engineering functionality to create a visual table schema so I can refer to from time to time.

First I tried to use the MySQL GUI tool from the mysql.com.

The package includes some nice tools but I was only interested in the MySQLWorkbench. Once connected to the database, it can reverse engineer the table design and present it on a nice graphic page. I re-arranged the tables and decided to print it out. And here is when the problem came. No matter how I tried the tool won't print for me. It seemed to hang on my printing command the started to "not responding". After spending a couple of hours I had to give up on my nicely arranged table schema and move on.

After some research I discovered DBDesigner.

Besides other nice features it also has the reverse engineering feature. And most importantly, it works from top to bottom. After some work I have my table schema printed out and stick to the wall now.

Both tools can be downloaded as zip file and extracted directly to your hard drive without an "installation" process. And both tools offer a lot of nice features and what I was doing was just scratching the surface. Since MySQLWorkbench is still an alpha product  I can't complain too much. And hat off to DBDesigner, it really makes my work easier.

It is quite easy to create web server access restriction using the Cpanel. There is a configuration setting for "Password Protect Directories" in Cpanel for setting up a user name and password for directory access. What this really does is to create a password file and refer it in the .htaccess.

In stead of using Cpanel, one can always run the process through the command line and it may actually be easier.

Create the passwd file

htpasswd is an Apache utility command to create and update the flat-files used to store usernames and password for basic authentication of HTTP users. Since it will create name and password pair(s) in a flat file, the password is encrypted either using a MD5 version from Apache or crypt() system call.

The following command line can be used to generate a file name passwdfile:

htpasswd -c /home/user/etc/passwdfile admin

his will create a NEW passwdfile and add user "admin" in it. The command will also prompt for the password that you wish to give to this user.

To add a new user, the "-c" option cannot be used.

To remove a user, simply open the htpasswd file and delete the line.

Modify .htaccess

To turn the password into effect, you can add  the following lines in the .htacess file:

AuthType Basic
AuthName "Restricted Area"
AuthUserFile "/home/user/etc/passwdfile"
require valid-user

This will allow anyone in the .htpasswd file to have access.

Besides the flat text password file, one can also use alternate password storage such as DBM or DBD format according to Apache document.

Group the users

There maybe situations that there are a lot of users and they are granted access to different resources. It maybe easier to group the users instead of creating a bunch of .htpasswd files.

A group file is simply a flat file that contains some user names. An admin group file (let's call it admingroup) may look like this:

Admin: admin jdoe mjones

And the .htaccess should include the following:

AuthType Basic
AuthName "Admin Group Only"
AuthUserFile "/home/user/etc/htpasswd" "/home/user/etc/.dmingroup"
Require group Admin

As specified in .htaccess, this is really just a "basic" way for authentication. It is most suitable for a small group of users to access some resource and there is no need to create more sophisticated authenticated method.

If you own a Linux box and use ssh to access it over the internet, chances that it will be under unauthorized login attempt or even brute-force attack. Even you have a strong password for your account, the constant poking from people or evil-bot is some kind of a nuisance to say the least.

Messages like below in /var/log/secure shows how annoying they can be:

Nov 25 23:13:21 —- sshd[21529]: input_userauth_request: invalid user test7

Nov 25 18:13:21 —- sshd[21523]: reverse mapping checking getaddrinfo for h63-210-66-233.seed.net.tw failed – POSSIBLE BREAKIN ATTEMPT!

Nov 25 23:13:30 —- sshd[21607]: input_userauth_request: invalid user test8

Nov 25 18:13:30 —- sshd[21602]: reverse mapping checking getaddrinfo for h63-210-66-233.seed.net.tw failed – POSSIBLE BREAKIN ATTEMPT!

To fully utilize the capability that ssh offers, we should always use public/private key access to a *nix box that is running OpenSSH. Below are some simple steps I used to implement this methodology.

Since I am using PuTTY, the setup and testing are done using putty.exe and puttygen.exe that are downloaded from here.

1. Create public and private key pair.

This can be accomplished using PuTTYgen. Once the program is started, click on the "Generate" button and keep moving your mouse. You can't be lazy here because the it will not proceed until you make your move.

2. save the public and private keys

Once the keys are generated, you need to create a key comment and your private passphrase. The passphrase is tied to your keys so without it your keys are useless. The public key is basically plain text that shows in the box. The private key is in binary form and should be stored with a .ppk extension.

3. place the public key

The public key needs to be stored in the Linux server as $HOME/.ssh/authorized_key2. Since it is plain text you can copy the key from the previous screen and paste them in a Linux editor and save it. An IMPORTANT step is to set the right permission on $HOME, $HOME/.ssh or $HOME/.ssh/authorized_keys so they aren't more permissive than sshd allows by default, which means they can only be read and write by the current account.

The following command can be used to achieve this: $ chmod go-w $HOME $HOME/.ssh $ chmod 600 $HOME/.ssh/authorized_keys

4. place the private key

In PuTTY, you will need to load the private key to your PuTTY session and save the session:

After this step, yu should be able to try the newly configured ssh access. You should be asked to enter the passphase this time, instead of the password. Once this is verified, you can proceed to next step.

 
5. turn off the password authentication on OpenSSH

In the /etc/ssh/sshd_config, there is an option called "PasswordAuthentication", just set it to "no".

Restart sshd and you should be running more secured ssh now.

Even you are running more securely after these measures, you still can't stop people from scanning port 22 and trying to get authenticated repeatedly using a list of user name and password. To reduce this kind of noise, you can also change the running port of sshd. The port configuration is the first parameter in the /etc/ssh/ssh_config file.

Moving your site to a new host needs some serious planning.

Research different hosting providers and plans

Research and find the best suitable host in your budget. webhostingtalk.com is a good place to look around.
Sign up an account and set up a testing/staging environment on the new host. No matter how close the

Set up testing/staging 

No matter how similar the hosting plan the new host offers comparing with the existing one, there will always be some configuration changes that you need to watch out and test out.

A staging environment simply mirrors the current site in terms of the code base, database setup, batch jobs, etc…

Regression testing

Test the new site. This is a good opportunity to improve the code and add enhancement since all the functionality and features will be re-tested.

This step is mainly to test the code and environment. Although not using the actual domain name you should still be able to test the pages, emails and database setup to make sure the new site is ready.

Moving day 

Once you are satisfied with the new site, you can pick a "light" traffic day, for example, around holidays or weekends, to move the data of the current site over to the new host. Since the code base has been on the server already you can dump the latest database copy and upload it to the new server DB. After some quick smoking test you can flip the DNS switch at your registrar. The DNS change propagation could take up to 48 hours.

While waiting for the internet to finish its work, you can periodically check your new DNS information through dnsreport.com and spot any potential problems in the early stage.

Maintain the old site 

The old host should remain up for at least 3-4 days (I'll give it a week). Since it may still have visitors (including the searching engine bots), you shouldn't shutdown your old site too early. A little trick is to make a small change on the old site, for example, add a "dash" to the footer so only you will notice. In this way, you can easily identify which site serves the page yourself. If your site takes any user input you should also monitor them and move them to the new place.

When a use visits a web page and enter some information into a form, he may intentionally or unintentionally leave the page without clicking on the submit button. It is a good usability effort to remind the user of the possible changes that have happened.

We can use a javascript to implement this.

/** checkChange.js **/ 

var alertLeavingPage = false; /* flag to turn on the alert */
var pageInputChanged = false; /* the flag of changes made */

// The onbeforeonload is called before the page is changed. It is not a standard
// method. But it is supported by IE and FF.
window.onbeforeunload = function(theEvent) {
   if (pageInputChanged == true && alertLeavingPage == true) {
      if (typeof theEvent == 'undefined') {
         theEvent = window.event;
      }
      if (theEvent) {
         theEvent.returnValue = "You have made some changes on this page, please click OK to discard the changes or Cancel to stay on the page.";
      }
   } else {
      return;
   }
}

/*
 * The method should be called on the page where the change needs to be tracked.
 * The form ID needs to be provided so the change event can be registered on certain form elements.
 */
function trackChange(formId) {
   var formElem = document.getElementById(formId);
   if (formElem) {
      for (var i=0; i<formElem.elements.length; i++) {
         var inputElem = formElem.elements[i];
         if (inputElem.type) {
            var inputType = inputElem.type.toLowerCase();
            if (inputType == 'text' || inputType == 'radio' ||
                inputType == 'checkbox' || inputType == 'select-one' || inputType == 'textarea') {
               inputElem.onchange = setChangedFlag;
            }
         }
      }
      // turn on the alert flag
      alertLeavingPage = true;
   }
}

/*
 * The method which is tied to a change event.
 */
function setChangedFlag(evt) {
   pageInputChanged = true;
}

Of course you will need to include this script to the web page. Besides that, you also need to call the trackChange() method to register the form elements that we want to track. So a form Id needs to be set in order to register. A sample html page look like following: 

<html>

<form id="the_form_id" action="" onsubmit="alertLeavingPage=false; /* no reminder for submission */"> 

</form> 

<script type="text/javascript">
<!– //
trackChange('the_form_id');

// –></script>

</html> 

Once they are added into the page, the user should see this prompt when they leave the page with un-submitted inputs. 

The method only detects whether there has been any change activity and it won't be able to tell whether there is change being made. For example, if someone checks a checkbox and unchecks it the script will think there has been change made.

There are several parameters in httpd.conf file that I pay attention to. Although the default values normally work out for me, sometimes they need to be tweaked for better performance.

HostnameLookups off 

Apache can look up the visitor's ip and come up with the hostname. And this process will likely slow down the server a bit. 

MaxClients

The max number of child process to spawn. Each Apache child process will take up some memory so this count should be determined on the available memory (total memory – allocation for other processes) and normal Apache child process size.

KeepAlive On

Whether to re-use the connection for multiple HTTP requests. Opening socket is an expensive process. The KeepAlive option can help reduce the overhead of frequent connections.

KeepAliveTimeout = 15

The number of seconds to keep a socket alive waiting on other request. Setting this number to high can cause the too many connections linger and evetually no more connections are available when the MaxClients is reached.

Timeout 300

Disconnect when idle time reaches this value. Depending on the average page loading time it can be lowered to reduce the hanging request.

SendBufferSize

The size of the ouput buffer. Normally I don't mess with this setting as far as it's a reasonable value and big enough for most of my web page sizes. 

Directory settings – The <Directory> tag for the web server root 

AllowOverRide All – tells Apache to pick up the .htaccess setting from each individual directory if available. For better performance this needs to be set to none since Apache will attempt to open .htaccess for each file name request.

Options Index – tells Apache not to perform directory listing when there is no default pages like index.htm(l)… 

Options FollowSymLinks - Apache sever will follow the symbolic links.

Options SymLinksIfOwnerMatch – do not set this. 

Allow directive – If there is need to control which hosts can access the server, use the ip address as much as possible. For example, "Allow from 10.1.2.3" is better than "Allow from allowedhost.com". When the server sees a hostname, it will perform a reverse DNS lookup on the ip to get the hostname, and then do a forward lookup on the hostname to assure the ip addresses match. And this is an expensive process.

Modules 

Only enable the necessary ones to keep the server lean and mean.

Want to see how your name or logo looks like in Goolgle, Yahoo, or even “star wars” style? Funnylogo.net can do this for you in just a few clicks.

From Funnylogo’s home page, you can enter your name, and select from a bunch of famous styles, like Google, Yahoo, Shrek, or even matrix…You can also choose a color or image background for your logo.

After clicking on “Create My Search Engine”, you will be taken to a page much looks like Google’s classic search page, but with you own logo on top.

Here is the logo that funnylogo.net created for me:

Google style:

Shrek style:

Matrix style:

Star war style:

Not sure if I can use them for the Copyright reasons, but they sure are pretty neat.