WordPress development environment – Aptana, Virtualbox and Google Code

At work we always have a pretty hefty development environment. At home I’ve never had any dedicated environment for my web development. It’s both a relief and something I miss.

Today I’ll try to set up a WordPress development environment that’s a bit more robust than my old setup where I download the file I need to change from my website to my desktop, change it, upload it and refresh the browser.

The idea is to:

Setup Google Code

I registered mypersonalblog on Google Code. For now I’ll probably mostly use the SVN features so you can swap out Google Code for any other repository.

I created a wp-themes folder in trunk where I’ll put one folder for each theme I use.

I download the theme I want to use from WordPress Themes. I add -ol to the end of the theme folder to not confuse the themes with the original folder names. Then I check it in. This is done to easily be able to track my changes compared to the version I started out from later. Both to be able to see what I have done but also to easily be able to merge updated theme versions further down the road.

I change the styles.css file and add some information. Here is an example from the  Simplr-ol style.css file.

THEME NAME: Simplr-ol
THEME URI: http://code.google.com/p/mypersonalblog/ (Simplr http://www.plaintxt.org/themes/simplr/)
DESCRIPTION: My customizations to Simplr; "The original minimalist one-column, content-centered theme for WordPress. A different type of theme. For WordPress 2.6.x."
VERSION: 4.6.1-0.1
AUTHOR: Ola Lindberg (Simplr by Scott Allan Wallick)
AUTHOR URI: /wp/ (Simplr http://scottwallick.com/)
TAGS: variable width, fixed width, one column, widgets, theme options, options page, white, orange, blue, microformats, hatom, hcard

If any theme diverges a lot from the original theme I’ll maybe come up with a new name and upload it to WordPress Themes. For now I think it’s good enough to have them all in one Google Code repository.

Setup VirtualBox, Ubuntu, Apache and WordPress

I installed VirtualBox, created an Ubuntu appliance and installed Ubuntu 9.10 desktop. I installed the guest add-ons and Apache. I changed the VirtualBox network to Bridge mode so it get’s its own IP address.

Screenshot from the Network Adapters in VirtualBox. Open it from Devices / Network Adapters...

Update 101118: I recently wanted to make this setup on another computer (using a wireless network card) where I couldn’t get the Bridged Adapter to work. I searched around a bit and it and it seemed like some people had similar issues. Instead I configured VirtualBox to use two network cards. One using NAT (giving internet access) and one using Host-only Adapter.

2 nic setup. The first using NAT providing internet access from my guest
2 nic setup. The second card using Host-only Adapter to be accessible through my Host system.

With this setup you should access you guest os from your host os with the IP address your 2nd network card gets (in Windows).

I created an Apache Virtual Host and installed WordPress to that folder. The production URL is /wp/ and for the local URL I use http://o/blog. I added the IP for my virtual Ubuntu to the name o i my hosts file. Now I can surf to http://o/blog.

My virtual host is configured like this

	ServerName o
	DocumentRoot /home/ola/shared/web/ola
	#Only put the log file like this in the web root on a local server
	CustomLog /home/ola/shared/web/ola/ola-access.log combined

Share files between my workstation and the virtual Ubuntu server

To share files in VirtualBox I use SharedFolders. The folder on my Windows workstation where I checked out the repository is D:CodingMyPersonalBlog and it’s mapped to the name MyPersonalBlog in Ubuntu.

The VirtualBox Shared Folder dialog. Open it via Devices / Shared Folders...

To mount the folder MyPersonalBlog to /home/ola/MyPersonalBlog in Ubuntu you run the following from an Ubuntu terminal

sudo mount -t vboxsf mypersonalblog /home/ola/MyPersonalBlog

Make sure that the files are visible in you Ubuntu server by running ls -la in the folder.

Note! You need to run this every time you login or you can create a script and make it auto run.

ola@ubuntudevserver:~/MyPersonalBlog/wp-themes$ ls -la
total 28
drwxrwxrwx 1 root root 4096 2010-03-27 11:08 .
drwxrwxrwx 1 root root 4096 2010-01-01 19:09 ..
drwxrwxrwx 1 root root 4096 2009-12-29 11:45 AutoFocus-ol
drwxrwxrwx 1 root root 4096 2010-03-27 11:12 room-34-baseline-ol
drwxrwxrwx 1 root root 4096 2009-12-29 11:13 Simplr-ol
drwxrwxrwx 1 root root 4096 2010-03-27 11:13 .svn
drwxrwxrwx 1 root root 4096 2009-12-29 10:58 veryplaintxt-ol

The last thing to do is to tell WordPress that the themes exists. I do that by creating soft links in the theme folders

ola@ubuntudevserver:~/www/olalindberg.com/wp/wp-content/themes$ ls -la
total 24
drwxrwxrwx 5 www-data www-data 4096 2010-03-27 11:48 .
drwxrwxrwx 6 www-data www-data 4096 2010-03-27 11:20 ..
drwxrwxrwx 2 www-data www-data 4096 2009-12-19 00:22 classic
drwxrwxrwx 3 www-data www-data 4096 2009-12-19 00:22 default
-rw-r--r-- 1 www-data www-data   30 2010-03-27 11:01 index.php
lrwxrwxrwx 1 ola      ola        55 2010-03-27 11:48 room-34-baseline-ol -> /home/ola/MyPersonalBlog/wp-themes/room-34-baseline-ol/
drwxr-xr-x 3 www-data www-data 4096 2009-12-29 10:42 simplr
lrwxrwxrwx 1 ola      ola        45 2010-03-27 11:06 Simplr-ol -> /home/ola/MyPersonalBlog/wp-themes/Simplr-ol/

Now I can enable the themes in the WordPress admin panel.

The WordPress theme administration page

Note! If WordPress can’t see the themes look at the permissions for the shared folder. I set mine to 0777 since it’s a local setup.

Import all posts from the production setup

I use the build in WordPress feature to export all posts and pages to an XML-file. I import that file to my local setup. I include all attachments. Some minutes later I have all my posts in my local development environment.

If I need to re-import all posts I use the plugin Bulk Delete to empty my current local database. Then I empty the Media Library in the WordPress admin panel. One tip is to increase the number Media items per page via the Screen Options.

Setup Aptana

I installed Aptana, created a project file and added all my theme files to it. I have never used Aptana before so it’s a test. We’ll see how it goes.

Upload with Uploadify running in public_html folder

Just to try it out I tried to get Uploadify to work in my public_html folder. I set it up according to the guidelines in the docs/example and ran. It returned success but the file wasn’t uploaded.

My first debug idea was to add an alert to the onError event. It wasn’t triggered.

My second idea was to try and print the response in the onComplete event. I added:

'onComplete': function(event, queueID, fileObj, response, data) {
    alert('onComplete: ' + response)
}

and it returned:

Warning: move_uploaded_file(/var/www/home/ola/public_html/uploadify/uploads-folder/test-image.jpg) [function.move-uploaded-file]: failed to open stream: No such file or directory in /home/ola/public_html/uploadify/_lib/uploadify.php on line 40

Warning: move_uploaded_file() [function.move-uploaded-file]: Unable to move '/tmp/php1rJUsg' to '/var/www/home/ola/public_html/uploadify/uploads-folder/test-image.jpg' in /home/ola/public_html/uploadify/_lib/uploadify.php on line 40

I guess it’s some rewrite issues when Apache rewrites the /home/ola/public_html folder to /~ola.

I opened uploadify.php (the ”server side code” for Uploadify) and replaced:

$targetPath = $_SERVER['DOCUMENT_ROOT'] . $_REQUEST['folder'] . '/';

with:

$targetPath = $_REQUEST['folder'] . '/';

And it worked.

Write to TinyMCE in a WatiN integration test

Last week I worked on some integration tests in Selenium. Today I’m redoing the same test in WatiN to get a feel for both tools.

Since the application uses TinyMCE for most of it’s text inputs I had to find a way to write to it within the tests. With Selenium Nick Bartlett had a solution. For WatiN I used the Eval method and executed the setContent JavaScript method in the TinyMCE API.

var js = "tinyMCE.get('tinyTextAreaId').setContent('some html');";
var s = Document.Eval(js);

This would work just as good with Selenium and it has one advantage over setting the text areas. It executes the eventual cleanup rules in TinyMCE before it sets the text.

Start and stop Selenium Server with NUnit

I want to have our Selenium tests to run automatically the same way as our other NUnit tests does. This means that I want to have the Selenium Server started automatically before running the test cases.

  1. I started by downloading the Selenium RC and unzipped it to C:SeleniumSelenium-RC
  2. I created a .NET project where I referenced the ThoughtWorks DLLs in C:SeleniumSelenium-RCselenium-dotnet-client-driver-1.0.1
  3. I added a new class to where I copied the Selenium getting started C# class
  4. I added my own TestFixtureSetup and a TestFixtureTeardown to this class. TestFixtureSetup launches the Selenium Server and TestFixtureTeardown closes it

Here is the class for starting the Selenium Server and the example Selenium test.

using System;
using System.Diagnostics;
using System.Text;
using NUnit.Framework;
using Selenium;

namespace Test.UI.Web.Selenium
{
	[TestFixture]
	public class SeleniumGoogleTest
	{
		private ISelenium selenium;
		private StringBuilder verificationErrors;

		private Process seleniumServer;
		private readonly ProcessStartInfo seleniumServerProcessStartInfo = new ProcessStartInfo("java", @"-jar C:SeleniumSelenium-RCselenium-server-1.0.1selenium-server.jar");

		[TestFixtureSetUp]
		public void TestFixtureSetup() {
			seleniumServer = Process.Start(seleniumServerProcessStartInfo);
		}

		[TestFixtureTearDown]
		public void TestFixtureTearDown() {
			seleniumServer.CloseMainWindow();
		}

		[SetUp]
		public void SetupTest()
		{
			selenium = new DefaultSelenium("localhost", 4444, "*iexplore", "http://localhost:4444");
			selenium.Start();
			verificationErrors = new StringBuilder();
		}

		[TearDown]
		public void TeardownTest()
		{
			try
			{
				selenium.Stop();
			} catch (Exception)
			{
				//Ignore errors if unable to close the browser
			}
			Assert.AreEqual("", verificationErrors.ToString());
		}

		[Test]
		public void OpenGoogleWebSite()
		{
			selenium.Open("http://www.google.com");
		}
	}
}

Enjoy!

Pair programming to close the gap between business and development

Before I started pairing I often felt that there was a gap between business and development -departments. Communication was mostly done via bug trackers or specifications. Issues were ofter dealt with via e-mail and misconceptions were common.

Since I started pairing I feel a greater (not perfect but better!) contact to the business and I think it’s because I’m used to take discussions. Both about coding details, but also and more important about usefulness of requirements. If we are stuck on an issue we walk over to business and solve the issue instead of making it an e-mail-reply-cc-all-thing.

If I’m working on an issue with a person I don’t know I start out by shaking hands and talking to the person about what he or she does in the company and how they interact with the tools. I tell them what resources we have for the issue and we discuss a possible solution together. Just common sense.

It feels like software development is a too social activity to be done alone! At least for me!

Listen to Deep Fried Bytes – Episode 35, Chariot Tech Cast – Episode 39 and Hanselminutes – Episode 171 for more info about pair programming and other goodness about the software craftsmanship!

Computer ergonomics and pair programming

I’m a big fan of pair programming. The one issue I have is that it’s a bit harder to set up the ergonomics for two persons with one computer.

At work I have one computer with two keyboards, two mice and two monitors. It works pretty nice. It makes you not have to crawl over each other but it still doesn’t allow for individual adjustments of the desk height.

setup-at-work

At home I have no dual monitor setup but instead I have two computers (one is mine, the other my girlfriends). I figured that it would be great if I could attach one computer to the other and enable a dual monitor feature. I installed VNC server on one of the machines and VNC client on the other. Started the server and connected. It works fine even though one runs Windows and the other Ubuntu!

Dual computer home setup. Two computers with VNC.

Both setups works pretty nice! I hope I can try my home setup via internet with webcams, microphones etc to enable (some) pair programming when not in the same room.

Pair programming – Research

I’ve read up on some pair programming research. Here is the different papers I’ve read. With a short description for each.

Strengthening the Case for Pair-Programming

They compare results from professional developers working with and without pair programming and teams at the university doing both pair programming and non pair programming. In all cases pair programming deliver better results.

Promiscuous Pairing and Beginner’s Mind: Embrace Inexperience

The optimal time between switching partner is 90 minutes and inexperienced developers solve problems both faster and better that people with previous knowledge about the problem. Beginners luck or just that you are more open without a baggage of experience?

A new developer was totally integrated to the team within 3 weeks of work. When not pairing they noticed a huge impact on productive. In 18 months the longest time it took to find and fix a bug was 6 hours. They also found out that a team is most productive when they own, manage and assign all tasks themselves.

The Agile Toolkit Podcast did an interview with Arlo Belshee Tue, 9 August 2005

Adventures in Promiscuous Pairing: Seeking Beginner’s Mind

They verified the performance boost described in Promiscuous Pairing and Beginner’s Mind: Embrace Inexperience, which means short times (~90 min) between changing pairing partner. They verified the results but it also broke the team.

A Study About Pair Programming in Practice

During a course at Lund University the students answered two surveys about pair programming. The first before the course. The second after.

The students were a bit more negative to pair programming after the course.

Practical recommendations about how to assign partners and tasks. What role should a team coach have in a pair programming team. How often you should change partners.

Most important personality types are not technical skills but social skills and worst personality types are dominant and ineffective.

Weaker developers liked pair programming more than the strongest.

  • Authors: Mia Nyström, Johan Rix, Karin Wanhainen at Lund University
  • 2002
  • Original title: En studie om parprogrammering i praktiken
  • PDF: NystromWanhainenRix.pdf
    Appendix: http://www.cs.lth.se/EDA270/Djupstudier/Articles/2001-2002/NRW-bilagor.pdf

Running WatiN tests in SharpDevelop

I tried to run my WatiN tests in the test runner in SharpDevelop and got stuck on the following error:

System.Threading.ThreadStateException : The CurrentThread needs to have it's ApartmentState set to ApartmentState.STA to be able to automate Internet Explorer.

If you are running your tests with MBUnit you can add the following to your TestFixture:

[TestFixture(ApartmentState = ApartmentState.STA)]

But I couldn’t find any similar for NUnit. Instead I changed how SharpDevelop launches it’s tests. Click; Tools / Options / Tools / Unit Tests and deselect Run tests on separate thread. Run the tests again.

And I got the following error:

System.InvalidOperationException : Process has exited, so the requested information is not available.

I tried to disable Protected Mode in Internet Explorer and the tests ran fine.

How to dissable Protected Mode in IE
How to disable Protected Mode in IE

Photos from Swedish Alt.NET unconference

Alt.NET Unconference - Dinner at Vapiano
Alt.NET Unconference - Dinner at Vapiano

Lightning talks

  • Fight code rot!
  • Should we stop mocking?
  • OpenTK
  • Context/Specification with MSpec
  • Object databases for .NET
  • Continuous integration – a case study

Open spaces

  • Model-View-ViewModel
  • Web APIs
  • Where is .NET in five years?
  • DBB with RSpec for .NET
  • Working with legacy code
  • Convention over configuration
  • Visual programming languages?
  • DBB without specific DBB-frameworks
  • How can you spread TDD?
  • Traditional roles in agile projects
  • DSL
  • What is the next step for Alt.NET?
  • Pair programming

Great fun! Great discussions! Great friends! And most open spaces ended up with some kind of  TDD discussions!

Pair programming – Podcasts and tools

Coding QA Podcast – Episode 30 Pair Testing

  • Pair testing makes you more open to think about the customer and corner cases
  • You increase creativity by helping each other to see new solutions
  • If you are having a bad day there will be someone helping you out
  • You’ll be more effective pair programming
  • Important to create an uniform workstation so you can pair on every workstation
  • The rule: You aren’t forced to seek out pair programming but if someone asks, you to, you are required to join

Link: http://codingqa.com/index.php?post_id=561862

Tools

Pair Programming Timer

A simple, egg clock like, timer that can be used to help you keep track of when to change driver.

Project page and Project blog

focus booster

focus booster is a simple and elegant application designed to help you eliminate the anxiety of time and enhance your focus and concentration.

Can be used as a pair programming timer. Visit the Project page.

Remote pair programming

See: http://olofb.wordpress.com/2009/03/14/remote-pair-programming-experiment/