jQuery Event Showcase

Have you ever wondered in what order JavaScript events are fired? What are the event object properties? How events differ in different browsers? Good news - wonder no more, check it out yourself.

The jQuery Event Showcase records the events you cause with your actions and allows you to browse through them. Clear visual indication shows you which element fired each event. You can also see all the event object properties, and if a property is an object or a function - you can also see all the details of it and so on. Better still, at your command remains events filter which helps you focus on the event types you want to investigate.

A few screenshots:

List of events in the Events Log

Event details in the Events Log

Events Filter

Any feedback welcome.

Jacek

JavaScript: best code highlighter I have seen

I needed JavaScript code highlighter for my recent project and having a gut feeling that someone has done it already, I decided to do a search rather than develop it myself. Not so much as a surprise it turned out to be good feeling and soon enough I ended up testing a dozen of different highlighters. I had spent good couple of hours before I found the one. Sharing is caring so here we go.

That beauty is called hightlight.js. You won't be disappointed especially if you are using jQuery, although it's a standalone library. It was created by talented Russian programmer Ivan Sagalaev who claims to be Software Maniac. He put together very simple documentation page which contains everything you need to know. It took me literally 5 minutes to download it, unpack it and get it working. Why do I think highlight.js is the best JavaScript highlighter?

• supports 32 different types of syntax, including exotic ones like Lua, Lisp or Nginx
• is a standalone library but is very easy to use with mootools, jQuery, prototype or any other JS library
• can be used to highlight code injected to the DOM with JS (for some reason that didn't work for me with quite a few other libraries)
• allows user to choose which nodes should be processed and does not force parsing the whole document
• does not require being called upon document load event
• is quite simplistic and is not trying to do 1000 things except from the one that you need; instead it does one thing and does it well: highlights code

Damn it, now I'm tempted to use it on my own old blog pages with code examples. Respect, Ivan!

How to get SubVersioN on Mac OS X 10.6?

Even if you work on a project on your own it's worth having version control system in place. It helps to keep things tidy and gives you time machine possibilities for working with your code (I am not talking about the trademarked machine). I like SVN which is mature and seems to have it all. Let's have a look how to install that beast on our lovely Macs.

Download SVN for free

First good news - SVN comes with a nice Mac-like installer and is completely free and published under Apache Licence. You can download it from CollabNet website. It requires free registration which at first seems a bit dodgy but CollabNet is the company responsible for creating SVN and it's a good source.

Install SVN on Mac OS X 10.6

Once you have downloaded the package it's time to install it. The installer looks all pretty and takes no longer than just a few moments. It installs the whole svn bunch (server and client) in /opt/subversion directory. The only downside is that you don't get any fancy application like you do for MAMP to control it. After you've finished the installation it all happens in the command line... but cheer up, it's not that scary. You will get it up and running in no time.

Set up evironment

SVN gives you complete freedom of the location of your repositories. It goes like this. You create a directory wherever you wish and tell your svn server to feel at home in there. That directory is then your svn server root directory. Your SVN server will create your repositories in there.

Let's get started then. Since all the svn related programs are located in /opt/subversion/bin you have to specify the path every time you need to run them. It's not handy at all, we would prefer not to worry about where they are. That's not a biggy. Fire up your Terminal (it's that monitor icon in /Applications/Utilities) and edit the file .profile in your home directory. I, for one, like vim but it might be slightly depressing experience at first if you are not familiar with it. In that case use pico, it's really straighforward

$ pico .profile

and add the following line at the end of the file:

export PATH=/opt/subversion/bin:$PATH

The .profile file is read every time you create new shell, so next time you open your Terminal the change will be applied. Because we don't want to close the Terminal just yet only to reopen it let's cheat a tiny bit:

$ . .profile

Well done! Let's check if it works

$ svn
Type 'svn help' for usage.

If you got similar output you are ready to proceed.

Set up SVN repository

Now it's time to create root directory for the SVN server. You can name it whatever you like and create it even in your home directory if you wish. SVN is not fussy at all. Let's do that then and let's give it meaningful name "svnrepos".

$ mkdir svnrepos

And finally it's time to launch your SVN server. By the way it's not a typo, there is no 'r' at the end:

$ svnserve -d -r svnrepos

There are no repositories. All we have is just SVN server ready for action. Let's give him something to look after. If you want to create a test repository to play with it for a while, just do this:

$ svnadmin create svnrepos/test

Set up privileges

Congratulations! You have just created your repository. Good thing is you don't need to worry about having to do some magic tricks later on to get rid of the test repository whenever you feel like it. Simply delete the directory svnrepost/test and it's gone forever. For now though, it's accesible through the URL svn://localhost/test but you cannot do much with it unless you grant yourself the privileges.

SVN server keeps access control lists per repository, so you need to dive into config directory of your newly created repository and conquer! Sounds like a big job but it isn't. All it takes is adding one line in one file and removing one comment in another one. Go to svnserve/test/conf and edit the file passwd first. Here you will add your preferred username and password. It's easier when you choose your Mac username. For example, my Mac username is "jacek" and my password for the test repository is "test", so I added a line jacek = test.

Next edit the file svnserve.conf and remove comment from the line saying password-db = passwd.

Believe it or not, that's it! Now you can access your repository through your favourite SVN client and do whater SVN clients do. One thing you need to remember is to run

svnserve -d -r svnrepos

every time you start your Mac. Of course it's quite easy to make it happen automagically but that's for another story.

Thanks for reading. I hope you found this guide useful, it worked for you and made you a bit happier. Please don't think twice before you leave your comment.

Jacek

How to put CDATA into script tag in XSLT

You have an XSL template for the website you are working on and you would like to embed some JavaScript in the markup. You care so you would like to keep the XHTML output valid. Easy enough - all it takes is wrapping the actual JavaScript code with CDATA. To make it safe you would also add JS comments around CDATA and move on. But is it really that easy with XSL? Let's have a look.

XSL template for JavaScript

Here is the working solution which allows for safe embedding JavaScript on XHTML pages created with XSL templates.

Example 0

<?xml version="1.0" encoding="UTF-8"?>
<xsl:transform version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output
        method="xml"
        encoding="utf-8"
        doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
        doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
        indent="yes"
        cdata-section-elements=""
        omit-xml-declaration="yes" />
 
    <xsl:template name="javascript">
        <xsl:param name="code"/>
            <xsl:text disable-output-escaping="yes">
            &lt;script type="text/javascript"&gt;
            /* &lt;![CDATA[ */ </xsl:text>
            <xsl:value-of select="$code" disable-output-escaping="yes"/>
            <xsl:text disable-output-escaping="yes">
            /* ]]&gt; */
            &lt;/script&gt;
            </xsl:text>
    </xsl:template>
        
    <xsl:template match="/">
        <html>
            <body>
                <xsl:call-template name="javascript">
                    <xsl:with-param name="code">
                        <![CDATA[
                        if (1 > 2) {}
                        ]]>
                    </xsl:with-param>
                </xsl:call-template>
            </body>
        </html>
    </xsl:template>
</xsl:transform>

The above example will output:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <body>
            <script type="text/javascript">
            /* <![CDATA[ */ 
                        if (1 > 2) {}
 
            /* ]]> */
            </script>
            </body>
</html>
 

Can it be simpler?

Let's start off with the most intuitive approach - add CDATA inside script tag as you would in XHTML.

Example 1

<?xml version="1.0" encoding="UTF-8"?>
<xsl:transform version="1.0"
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 <xsl:output
  method="xml"
  encoding="utf-8"
  doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
  doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
  indent="yes"
  cdata-section-elements=""
  omit-xml-declaration="yes" />
 
 <xsl:template match="/">
  <html>
   <body>
    <script type="text/javascript">
    /* <![CDATA[ */
    if (1 < 2) {}
    /* ]]> */
    </script>
   </body>
  </html>
 </xsl:template>
</xsl:transform>

The above example will output:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <body>
    <script type="text/javascript">
    /*  */
    if (1 &lt; 2) {}
    /*  */
    </script>
  </body>
</html>
 

CDATA got stripped off and the < sign got replaced with &lt;. Of course! CDATA as an XML specific construct is interpreted in XSL as well. And that helps - try to remove CDATA from the following example and you will see an error. Good old < is the source of trouble here - without CDATA around, it makes XML invalid.

The interpreted CDATA should stay then but another CDATA is required in the output. xls:output has an option which allows to wrap content of certain tags with CDATA. However if you set it up to wrap up content of script tags with CDATA (the rest of the code like in example 1) you will not get what you need. Let's have a look.

Example 2

  cdata-section-elements="script"

The above example will output:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <body>
    <script type="text/javascript">
<![CDATA[
    /*  */
    if (1 < 2) {}
    /*  */
    ]]>
    </script>
  </body>
</html>
 

Ok, now there is CDATA in the output but it is not safely commented out. And it does not seem possible to get it that way. And how about creating CDATA explicitly as a text? Maybe with disabled output escaping that would work? Let's see.

Example 3

<?xml version="1.0" encoding="UTF-8"?>
<xsl:transform version="1.0"
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 <xsl:output
  method="xml"
  encoding="utf-8"
  doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
  doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
  indent="yes"
  cdata-section-elements=""
  omit-xml-declaration="yes" />
 
 <xsl:template match="/">
  <html>
   <body>
    <script type="text/javascript">
     <xsl:text disable-output-escaping="yes">
      /* &lt;![CDATA[ */
     </xsl:text>
     <![CDATA[
      if (1 < 2) {}
     ]]>
     <xsl:text disable-output-escaping="yes">
      /* ]]&gt; */
     </xsl:text>
    </script>
   </body>
  </html>
 </xsl:template>
</xsl:transform>

The above example will output:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <body>
    <script type="text/javascript">
      /* <![CDATA[ */
 
      if (1 &lt; 2) {}
 
      /* ]]> */
     </script>
  </body>
</html>
 

That's definitely some progress, CDATA is in place. Now the &lt; in the JavaScript code should become < again. Why not to put the whole JavaScript code into another xsl:text tag with disable escaping? Well, that's why:

Example 4

    <script type="text/javascript">
     <xsl:text disable-output-escaping="yes">
      /* &lt;![CDATA[ */
     </xsl:text>
     <xsl:text disable-output-escaping="yes">
     <![CDATA[
      if (1 < 2) {}
     ]]>
     </xsl:text>
     <xsl:text disable-output-escaping="yes">
      /* ]]&gt; */
     </xsl:text>
    </script>

The above example will output:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <body>
    <script type="text/javascript">
      /* <![CDATA[ */
 
 
      if (1 &lt; 2) {}
 
 
      /* ]]> */
     </script>
  </body>
</html>
 

Is it a dead end or maybe xsl:text element is not the best choice after all? It has to be something with disable-output-escaping attribute. Another such an element is xsl:value-of. Assuming that the JavaScript code exists only in the template and not in the processed XML structure, value-of needs an xsl:variable to read value from.

Example 5

   <xsl:variable name="s1">
    <![CDATA[
     if (1 < 2) {}
    ]]>
    </xsl:variable>
   <script type="text/javascript">
     <xsl:text disable-output-escaping="yes">
      /* &lt;![CDATA[ */
     </xsl:text>
     <xsl:value-of select="$s1" disable-output-escaping="yes"/>
     <xsl:text disable-output-escaping="yes">
      /* ]]&gt; */
     </xsl:text>
    </script>

The above example will output:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <body>
    <script type="text/javascript">
      /* <![CDATA[ */
 
     if (1 < 2) {}
 
      /* ]]> */
     </script>
  </body>
</html>
 

And that worked! It is not very flexible solution, though. Defining variable for every JavaScript in the template seems to be acceptable only if necessary. Luckily xsl:value-of can also read value of a parameter passed to an xsl:template. That's how I got to the template you can find at the top of the page.

Thank you for reading. I hope you found it useful.

Update - 21.05.2010

At the beginning the template looked like this:

 <xsl:template name="javascript">
  <xsl:param name="code"/>
  <script type="text/javascript">
   <xsl:text disable-output-escaping="yes">
   /* &lt;![CDATA[ */ </xsl:text>
   <xsl:value-of select="$code" disable-output-escaping="yes"/>
   <xsl:text disable-output-escaping="yes">
   /* ]]&gt; */
   </xsl:text>
  </script>
 </xsl:template>

However it turned out that on some PHP installations XSLT adds CDATA inside <script> tag even if it's not specified in the <xsl:output>. Therefore <script> tag has to be generated as a text rather than being part of interpreted XML.

Jacek

Zend PHP 5 Certification Exam - review

This time it's about the Zend PHP5 exam itself, not about PHP. I have taken the exam today and singing loudly in my car on the way back home I thought: the guys who are about to take it might want to know how it goes. And this is the story about what happens when you decide to go into the lion's cave armed with your brain and that only.

Well, it's not that bad. People I met in the exam centre were very friendly. I was taking my exam in Feltham, in the test center run by TSM Consultants UK Ltd. Poor folks were working even though it was bank holiday. They said it was all right, though.

They are serving as a test spot for some insane number of vendors, one of them being Zend. It is all very professional. When I booked the exam, I was asked to turn up about 15 minutes before the exam starts. I was also told to have two forms of identification on me, at least one with a picture of my lovely face. I complied, of course, and I am glad I did. It is not just talks - they take it really seriously. No id? Then they wave you goodbye and invite you some other time when you can be bothered to read the instruction before coming.

I was being checked in by a nice lady who asked me to read the terms and conditions. I learned I was not allowed to take anything with me to the examination room - mobile, jacket, rack sack even my beloved coffee had to be left behind. They gave me a locker for my valuables, though, so I put there my coffee. I am joking, my jailbroken iPhone of course. And I had to use the toilet beforehand because if you leave the room once the exam has started there is no coming back.

When I was ready we entered the exam room. It was poket-size with about 5 computers standing around the walls. There was also proper Big Brother equipment. That's right. You are being watched, listened in and recorded during the exam. Who cares after all? If you know you are not going to make it you can always smash a few monitors and hope for becoming famous on YouTube after they release you from custody.

Speaking of the monitors - they were nice biggies, so I had no trouble reading the questions. If the chairs were a bit more comfy I would not complain, though. That's because the room was equipped with budget low-end office chairs. On the other hand the exam lasts for 90 minutes only, so being brave fellow I gritted my teeth and took my seat. The countdown timer started after I accepted the terms and condition and when the first question appeared on the screen.

After a few questions I realised the exam was not very different from the Zend PHP 5 Certification Mock Exam. It is similar type of questions and if you succeeded with a few of these mock exams you should be fine. The whole exam consists of 70 questions served in random order. For each question you may add a comment or mark it for later review. That last feature turned out quite handy when I gave all answers and wanted to come back to those which I was not entirely sure about. Review screen showed me links to all the questions and indicated the marked ones. Finally I decided I was ready and after answering zillion times 'yes' to a question going like: 'are you sure you want to finished the exam?' I saw big, beautiful and smiling at me from the screen:

CONGRATULATIONS!
You have passed Zend PHP 5 Certification Exam.

PHP: References To Array Elements Are Risky

References to array elements can bite! And it is not only the case with referencing in foreach loop. It seems that creating a reference to an array element replaces that element itself with a reference. If you then copy such an array and change the elements inside copy you can overwrite original value!

All of the presented code was tested on Mac (PHP 5.2.11), Linux (PHP 5.2.6-1+lenny4) and Windows XP (PHP 5.3.0) using PHP cross platform testing lab on Mac based on VirtualBox.

Changing copy affects original array

Sounds impossible? I agree. I couldn't believe it myself. Nevertheless here is the proof:

Example 1

$a = array('one', 'two', 'three', 'four'); 
$a2 = &$a[2]; 
 
$b = $a; 
$b[1] = 'two again'; 
$b[2] = 'reference bites'; 
 
var_dump($a, $b);

The above example will output:

array(4) {
  [0]=>
  string(3) "one"
  [1]=>
  string(3) "two"
  [2]=>
  &string(15) "reference bites"
  [3]=>
  string(4) "four"
}
array(4) {
  [0]=>
  string(3) "one"
  [1]=>
  string(9) "two again"
  [2]=>
  &string(15) "reference bites"
  [3]=>
  string(4) "four"
}

Changing copy of a copy affects original array too

If you look at the dump carefully you will see that $a[2] and $b[2] are displayed as references here. That would mean the element has been replaced with a reference. And if you copy a reference you just get what? Same reference, right? So any copy of $a would contain that reference. Going forward any copy of a copy of $a would contain that same reference. Let's check it:

Example 2

$a = array('one', 'two', 'three', 'four'); 
$a2 = &$a[2]; 
 
$b = $a; 
$c = $b; 
$c[2] = 'references bites more'; 
$b[1] = 'two again'; 
$a[0] = 'one more'; 
var_dump($a, $b, $c);

The above example will output:

array(4) {
  [0]=>
  string(8) "one more"
  [1]=>
  string(3) "two"
  [2]=>
  &string(21) "references bites more"
  [3]=>
  string(4) "four"
}
array(4) {
  [0]=>
  string(3) "one"
  [1]=>
  string(9) "two again"
  [2]=>
  &string(21) "references bites more"
  [3]=>
  string(4) "four"
}
array(4) {
  [0]=>
  string(3) "one"
  [1]=>
  string(3) "two"
  [2]=>
  &string(21) "references bites more"
  [3]=>
  string(4) "four"
}

Tricky "foreach" with reference explained

As you can see, the only element affected is the one referenced. That can lead to serious potential problems. Working on a copy of an array with scalar elements seems to be not as safe as one may thought. However, that explains one of the biggest pitfalls of iterating arrays in PHP: foreach with reference. The following is rather common knowledge:

Example 3

$a = array('one', 'two', 'three', 'four'); 
foreach ($a as &$v) {} 
foreach ($a as $v) {} 
var_dump($a);

The above example will output:

array(4) {
  [0]=>
  string(3) "one"
  [1]=>
  string(3) "two"
  [2]=>
  string(5) "three"
  [3]=>
  &string(5) "three"
}

But what was the explanation for that, again? It is quite clear that $v keeps reference to $a[3] after the foreach loop is finished. So what values does $v (effectively $a[3]) get within the next foreach loop? Let's see:

Example 4

$a = array('one', 'two', 'three', 'four'); 
foreach ($a as &$v) {} 
foreach ($a as $v) { 
 var_dump($a[3]); 
}

The above example will output:

string(3) "one"
string(3) "two"
string(5) "three"
string(5) "three"

Well, it's quite obvious. Or is it? As the foreach manual page states: "unless the array is referenced, foreach operates on a copy of the specified array and not the array itself". I would assume that "array is referenced" means array elements are referenced like this: foreach ($a as &$v) {} Apparently that is not the case with the second loop and it should work on a copy. Let's have a look what exactly would happen if the second foreach loop really worked on a solid copy:

Example 5

$a = array('one', 'two', 'three', 'four'); 
$b = $a; 
foreach ($a as &$v) {} 
foreach ($b as $v) {} 
var_dump($a);

The above example will output:

array(4) {
  [0]=>
  string(3) "one"
  [1]=>
  string(3) "two"
  [2]=>
  string(5) "three"
  [3]=>
  &string(4) "four"
}

I imagine you did expect this result. Beware references to array elements and thanks for reading. I hope you found this article useful. Please don't think twice before you leave your comment.

PHP: Cross Platform Testing Lab on Mac How To

Taking PHP development seriously, it is not very uncommon practice to do cross-platform tests of own code. With virtual machines it is dead easy to test your PHP code on three popular systems (Mac OS X, Linux and Windows) using only one physical machine. To make it even more pleasant all systems can share PHP code from one location hence there is no need to copy every time you want to test. And here comes the cream: you can get fully-blown eye-candy virtualizer for free.

VirtualBox is good and is free!

Yes, that is correct. VirtualBox is free and made by SUN. It is good piece of software, very reliable and easy to use. You can get VirtualBox for Windows, Mac or Linux.

VirtualBox performance on Mac Mini

I used VirtualBox to create Vrtual Cross-Platform PHP Lab on my Mac Mini run by Snow Leopard (10.6.2). My Mac was armed with 1.83GHz Intel Core 2 Duo CPU and 2BG of RAM. I have created one virtual machine for Windows XP SP2 and one for Debian 5.03 "lenny". Each virtual machine was limited to 256MB of memory and 2GB of hard drive space.

Running both virtual boxes with AMPs on them along with MAMP on the hosting Mac did not visibly affect overall host system responsiveness. I could have Chrome, Firefox, Aptana, Preview, iTunes, Skype and Activity Monitor running concurrently and smoothly. Only Spaces (9 desktops) were a bit more choppy than usual. Each of the virtual boxes was also responsive.

Both guest systems were visible and accessible over the local network. They could easily obtain IP addresses from DHCP server existing within the network. All the network communication was also reliable except for situations when one of the boxes (either real or virtual one) generated heavy traffic on the network interface. Downloading 100MB from Internet at 200kB/s was enough to cause connection disruption.

Set up Mac OS X host system

If you are PHP developer working on Mac, probably you already have half of the work done. Nevertheless assuming you are starting from scratch the following steps need to be accomplished:

1. Download MAMP (Mac OS X AMP) and install it.
2. Download VirtualBox for Mac and install it.

Both packages come with nice Macish installers and therefore the whole process is really straightforward.

Create WAMP virtual machine on your Mac

Now it's time to create your Windows virtual machine and set it up. I used Windows XP because it is relatively lightweight and fast compared to alternatives. VirtualBox is not fussy though and allows you to prepare virtual machine for many different operating systems including quite a few versions of Windows. Here is a step by step guide which tells you how to create a virtual machine, install Windows (XP) on it and configure WAMP to access PHP projects stored in the host filesystem:

Create new virtual machine for Windows.

Simply go to Machine -> New. Then just follow the guide, it takes about 2 minutes. There are no difficult questions and if you want to know more - the help is really good. I have created Virtual Machine called "virtual-winxp" with 256MB of RAM and 2GB of new virtual hard drive being dynamically expanding storage. The network adapter I have chosen was bridged adapter. The latter is important if you want to have access to LAN and Internet from your the guest OS and be able to access the guest OS from your Mac.

Install your preferred version of Windows.

My Win XP installation process was real time. When installer announced 30 minutes left - it was 30 indeed minutes. Network name of my Win XP was again "virtual-winxp".

Download WAMP and install it

Nothing I could think of to add here.

Install VirtualBox Guest Additions

Go to Devices -> CD/DVD Devices and choose VBoxGuestAdditions.iso. You can do so even when the guest OS is running. Virtual CD will appear in your drive and you will know what to do. VirtualBox Guest Additions are essential if you want to share your PHP code with the host OS.

Configure shared folder

That would allow you to share your PHP code with the host OS. Go to Devices -> Shared Folders... and click "Add shared folder" icon - the one with "+" sign. Then choose your projects folder from Mac, say /Applications/MAMP/htdocs/projects and name it, say "projects". Now that folder will be accessible from Windows as pseudo network drive \\vboxsrv\projects. It is probably a good idea to make it permanent if you don't want to repeat this step every time you start your guest OS.

Configure your WAMP to use projects folder

Let's assume you want to access your PHP projects through your WAMP as http://virtual-winxp/projects. Go to your Windows, click on the WAMP icon in system tray, choose Apache -> Alias directories -> Add an alias. When the command window appears, type in the alias name "projects".
On the second screen enter the real directory name being "//vboxsrv/projects". Forward slashes are not a mistake, Apache for Windows likes it like that. Your WAMP should restart and when you go to http://localhost/projects you should see your Mac projects directory.

Make your WAMP visible for your Mac

If you prefer to test results of your PHP on your Mac (who wouldn't) rather than on the guest OS, it might be a good idea, to make your WAMP visible in the local network. All you need to do is click on your WAMP icon in system tray, choose "Put Online" and wait till the Apache restarts.

Create LAMP virtual machine on your Mac

Preparing Linux virtual box was even easier because there was no clicking involved! Ok, in fact I was installing Debian without GUI, so I needed to amend a couple of files manually. No rocket science though, just some config files.

Create new virtual machine for your Linux

Similar procedure as for virtual machine for Windows, only different name ("virtual-debian" in my case). Settings exactly the same: 256MB RAM, 2GB virtual HDD expanding storage and bridged network adapter. Please remember, that the bridged network adapter is important if you want to access LAN and Internet from your guest OS and also access the guest OS from your Mac.

Install your preferred distribution of Linux

I have chosen Debian because it has very good package management and I like it. The hostname I set for it was again "virtual-debian".

Install nano

As mentioned before, you might need to change a few config files. If you are not familiar with vim it is probably a good idea to install more friendly console editor. When logged in as root run:
#aptitude install nano

Install LAMP for Debian

Just follow the link, it's all in there.

Prepare for installing VirtualBox Guest Additions

These are installed as a kernel modules which are being compiled for you by the installer. That means that you need to install kernel headers beforehand. First of all find out what kernel you are running:
#uname -r
I got result like this:
2.6.26-2-amd64
Once you know the version it's time to install headers. Simply repeat the version at the end of linux-headers package:
#aptitude install linux-headers-2.6.26-2-amd64
The installer might ask you a few questions, for example about installing additional packages. It's safe to answer "yes" to all of them.

Install VirtualBox Guest Additions

Again, go to Devices -> CD/DVD Devices and choose VBoxGuestAdditions.iso. You can do so even when the guest OS is running. Virtual CD will become ready for you to mount and access it:
#mount /media/cdrom
Then you need to copy installer to your hard drive:
#cd /media/cdrom
#cp VBoxLinuxAdditions-amd64.run /~
and run it:
#cd
#./VBoxLinuxAdditions-amd64.run

Configure shared folder

Same as with Windows virtual box. That would allow you to share your PHP code with the host OS. Go to Devices -> Shared Folders... and click "Add shared folder" icon - the one with "+" sign. Then choose your projects folder from Mac, say /Applications/MAMP/htdocs/projects and name it, say "projects". Now that folder will be available to mount from your Linux (Debian) as... projects (read next point for explanation). It is probably a good idea to make it permanent if you don't want to repeat this step every time you start your guest OS.

Configure your Debian to mount shared folder on startup

Now everything is set up and ready we only need to mount projects folder from your Mac on your Linux virtual box. Assuming you want to access your projects folder as http://virtual-debian/projects and you don't want to mess around with Apache config too much (at least at this point) simple create the mount point and mount:
#cd /var/www/
#mkdir projects
#mount -t vboxsf projects projects
Now inside projects directory you should see contents of your Mac projects directory. To make this mount occur every time you start your Linux, you need to add a line to /etc/fstab config file. Open the file:
#nano /etc/fstab
and add the following line:
projects    /var/www/projects    vboxsf    ro    0    0
Save the file and you are sorted. From now on, whenever you boot Linux the folder will be mounted for you and ready to use. And don't worry about the mount error - it's because default Linux mount happens before the vboxadd service is loaded.

Setup Fixed IP Addresses for your Virtual Farm

My virtual boxes get IP addresses from DHCP server running within my network. Their IPs used to change every now and then and I must admit I found it quite annoying. To avoid that problem I have assigned IP addresses statically to both virtual boxes on my DHCP server. Now they still receive the whole information package (DNS, gateway and so on) but their IPs are same every time.

Access your virtual boxes by names

If you prefer to access your virtual boxes via their names (like virtual-winxp) rather then IPs you may want to add them to your /etc/hosts file on your Mac. It's dead easy and takes no time. Simply run your Terminal.app (it's in /Applications/Utilities directory) and switch to root:
$su -
here you enter your password, and then edit the /etc/hosts file:
#nano /etc/hosts
Here you need to add one line for each virtual box. First IP then the name you like, for example:
192.168.0.11    virtual-debian
192.168.0.12    virtual-winxp
Save it and job done.

Thanks for reading. I hope you found this guide useful, it worked for you and made you a bit happier. Please don't think twice before you leave your comment.