Don’t Design Misleading Signup and Login Forms

One particular aspect I often found in signup and login forms, which I consider to be wrong design, is that if the site are using e-mail addresses instead of a username to signup / login a visitor the password field comes right after the e-mail field. Here’s a screen shot:

This is logically correct, but for not so experienced users might be misleading. They think they should enter their e-mail address and e-mail password when signing up / in.

When we’re designing our forms we should explicitly mention that the particular password doesn’t necessarily must be the user’s e-mail password.

Personally I think the best method is using a username instead of e-mail address for authentication.

Web Development in Mac OS X - Complete Guide

Finally, I switched entirely to Mac. It is a little frustrating that there is not a complete resource on how to set up a web development enviroment on Mac OS X. The majority of tutorials are outdated.

I will try to write this guide as complete as possible. I will cover the following key aspects:

• Installing Apache, MySQL, PHP and configuring them
• Adding XDebug to the package
• Installing Subversion
• Setting up an IDE for web development
• Setting up a Windows virtual machine for testing the websites/web apps. in Internet Explorer

Also I will try to create this enviroment from mostly free / open-source programs.

1. Installing Apache, MySQL, PHP

Fortunately we have three options to choose from:

1. Install XAMPP
2. Install MAMP
3. Install Apache, MySQL, PHP manually

Personally I consider installing the programs manually is a waste of time. Why do something that others already done before you. It remains XAMPP or MAMP.

Both flavors are very good.

MAMP comes in two packages a standard and pro version. Now if you know your stuff you can legally hack the standard version to benefit the features what the pro version is offering. I like MAMP’s folder structure, everything is in it’s place, but I chose XAMPP over MAMP. I don’t like how MAMP is handling all the server and PHP configurations…

XAMPP’s folder structure is not very organized, it’s a little bit confusing at first, but the configuration files are optimized and overall XAMPP has a better performance then MAMP’s. The new version has a control panel too, if you don’t like working from Terminal you can use this widget.

Okay, so let’s download XAMPP from their website. Download the Installer Version (first link). I’d like to mention that it’s not recommended to use this package in production enviroment.

Once it’s downloaded simply install it. This package contains Apache, MySQL, PHP all in one place, ready to go. The folder is situated in /Applications/xampp. Here you can use the control panel to start all the components.

Once started go to http://localhost to see if everything is OK. Go to the status page (link on the left) to see if everything is started correctly.

2. Configuring Apache, MySQL, PHP

These configurations are my personal preference, you can configure your package otherwise.

First let’s see what’s where:

/Applications/xampp/htdocs - here you put your web pages. It is the Apache document root, which we will change.

/Applications/xampp/etc - this folder contains the apache, mysql, php configuration files.

/Applications/xampp/xamppfiles/phpmyadmin - obviousely you find PHPMyAdmin here.

/Applications/xampp/xamppfiles/lib/php/php5/extensions/no-debug-non-zts-xxxxxxxx - contains PHP 5 extensions

/Applications/xampp/xamppfiles/modules - here you can find the Apache modules.

Configure Apache:

Apache configurations are in /Applications/xampp/etc/httpd.conf file. Open it with TextEdit or some other text editing program. Go to the LoadModules section. You can comment out any module which you won’t use, freeing up some precious memory.

Go to the DocumentRoot section and change the path from /Applications/xampp/xamppfiles/htdocs to /Users/<your-username>/Sites or to some other path which suits you better. This is where you will put your web pages. Don’t forget to change all the path to the new path in the file.

We want to enable Virtual Hosts so remove the # from this line: Include /Applications/xampp/etc/extra/httpd-vhosts.conf

Open httpd-vhosts.conf file and delete all the blocks starting with <VirtualHost…

Include this block:

<VirtualHost *:80>
DocumentRoot “/Users/<username>/Sites”
ServerName localhost
</VirtualHost>

Configure PHP

The PHP configuration file is in /Applications/xampp/etc/php.ini.

Search for error_reporting variable. Change that line to error_reporting = E_ALL

We want all errors to show in the development enviroment, including notices and warnings.

Change register_globals to Off (how silly is to leave it)

3. Adding XDebug to the package

Thanks to Felix Geisendorfer post from debuggable.com we can use XDebug on Mac OS X. Here are the steps to follow:

First go to ActiveState Remote Debugging page and download the latest PHP Remote Debugging package for Mac OS X. In this archive you can find a file called xdebug.so

Copy this file to xampp’s php extension folder (/Applications/xampp/xamppfiles/lib/php/php5/extensions/no-debug-non-zts-xxxxxxxx - where x stands for the package date, there should be a folder named like this).

Then include this line at the bottom of your php.ini file:

zend_extension=/Applications/xampp/xamppfiles/lib/php/php5/extensions/no-debug-non-zts-xxxxxxxx/xdebug.so

Once again the x part of the no-debug-non-zts are stands for the package date (you should check your folder’s name)

Okay. Restart xampp. And visit http://localhost and check the phpinfo for everything to be good. Make sure you copy the content of /Applications/xampp/htdocs to your new path.

4. Installing Subversion

This is the easiest step just download the universal binary from the subversion site install it and that’s it.

5. Setting up an IDE for web development

Choosing a good IDE is the hardest of them all. There are many different flavors, but I think the best free IDEs are Aptana Studio and Eclipse PDT, and a commercial version editor is TextMate

Personally I prefer Aptana, but I’m considering to buy TextMate, I read so many nice things about it, I think it’s worth a try.

Okay, Aptana is a massive editor, but it got all the things I want from an IDE: HTML, PHP, CSS, Javascript, project management, FTP and Subversion editor.

Download it, install, run. Go to Help menu -> Software Updates -> Find and Install. In this window select Search for new features to install. Check all the entries you want to install. Make sure you check Subclipse this is the Subversion editor plugin. Install them and restart the application. Done.

6. Setting up a Windows virtual machine for testing the websites/web apps. in Internet Explorer

There are many different ways to run Internet Explorer in Mac OS X. I will tell you how I did it.

Let’s see: we got VMware Fusion, Parallels both commercial versions and Sun’s virtualization software called VirtualBox which is free.

Okay, Microsoft rolled some Virtual PC images with Internet Explorer preinstalled. These enviroments are preactivated and they will expire after some time (it would be too nice that Microsoft would give away their precious OS for free ;))

You can download an image at Microsoft’s Application Compatibility page. I downloaded the IE6 with XPSP2 image. And I want to note some facts that how Microsoft ensures you use his virtualization software. First the images are compressed in .exe files, so you need a Windows box to extract them. Second it contains a .vhd (specific Virtual PC image format), but not a .vmc (specific Virtual PC machine format) along with it, which we would need to convert properly to Parallels .hdd or VMware’s .vmdk format.

First I tried using Parallels Transporter to convert this VPC image, but no luck. When I wanted to start the newly converted image it simply froze. That’s it, I wrote on forums, to support, nobody knows why is this happening.

Okay, second I tried VMware Converter Starter Edition a free windows app, which successfuly converted the image, but again you need a Windows enviroment to do this work. Okay, so I copied the .vmdk file to my Mac. Downloaded the VMware Fusion Trial and started it. It works flawlessly.

Virtualbox unfortunately does not have a converter, it would be the ultimate coolness, you would have a free virtualization software, BUT Virtualbox actually can run .vmdk files. Tried and worked very well, except I couldn’t cloned my network adapter which unfortunately is needed if you want to test your sites.

Summary

I hope you enjoyed this article. Here is a summary of what software to use:

If you want to get away with it for free then use:

1. XAMPP or MAMP

2. XDebug and Subversion

3. Aptana with Subclipse or Ecplipse PDT

4. Use VMware Converter and the preactivated Windows VPC image from Microsoft

5. Use Virtualbox to run the converted VPC image.

If you have some cash to spend then:

1. XAMPP or MAMP

2. XDebug and Subversion

3. TextMate

4. VMware Fusion and VMware Converter