Category Archives: Programming & Web Development

PHP Debugging with Xdebug

http://i0.wp.com/xdebug.org/images/xdebug.gif?w=625

Web development with PHP can get frustrating without the adequate tools. The most common thing a new web developer does when attempting PHP debugging is to add var_dump() calls to print out the value of a variable at a certain point in the program’s execution, in conjunction with an exit() or die() call.

Doing this will reveal the values of the variable you’re trying to check, but it requires you to add and remove lines in your code, and more often than not, those lines are forgotten to be removed, so they end up as bugs in the code.

A good way to develop your code is with test driven development, using unit tests to verify the output of your methods. But sometimes there are parts of the code that cannot be easily tested. For these cases using a proper step by step debugger is a better tool for the job. Xdebug is a PHP extension that does the job. With Xdebug you can set breakpoints in your code, display the contents of constants like $_POST and $_SESSION, give you a trace of the execution around the breakpoint or uncaught exception, and follow the values of any variables you want. You can also profile your application to detect performance bottlenecks.

There are several ways to install Xdebug on your development system. On a Debian-based system you install it with the following command:

sudo aptitude install php5-xdebug

For other systems and custom installations there is an installation Wizard, following the steps in the page will provide you with the instructions needed for your particular case.

Then check your php.ini file to configure the Xdebug extension to your liking. Check the documentation for all the features and options. Here’s a sample of the options:

xdebug.remote_enable=1
xdebug.remote_handler=dbgp
xdebug.remote_host=127.0.0.1
xdebug.remote_port=9000
xdebug.remote_mode=req
xdebug.idekey=default
xdebug.remote_log="/var/log/xdebug/xdebug.log"
xdebug.show_exception_trace=0
xdebug.show_local_vars=9
xdebug.var_display_max_depth=10
xdebug.show_mem_delta=0
xdebug.trace_format=0
xdebug.profiler_enable=1
xdebug.profiler_output_dir="/tmp/xdebug/"

The option xdebug.show_local_vars will display the number of local variables available at the breakpoint, so no need of several var_dump() calls for each variable you want to see. The xdebug.var_display_max_depth changes how many nested levels of arrays or objects will be displayed, where by default, var_dump() will only display 3 levels down. There are more interesting data display options in the documentation.

Make sure the remote log directory and profiler output directories exist in your system. Restart your web server and you’re good to go.

Your phpinfo() output page should now display a section like this:

file:////home/gabriel/xdebug_info.png

Now, here are some links to setup and use your development environment with Xdebug, depending on what you use.

Hope this helps and happy coding!

Free virtual box & other VM images to test website in IE

Cross platform IE testing

Testing your web design in multiple Internet Explorer browser versions is now easier. I’ve written before about how to test your website in IE using GNU/Linux machines. But now the process is simpler since Microsoft has finally began to distribute cross platform virtual images for testing against IE browser versions.

Of course, nothing from Microsoft can be well done. Not even something as simple as a zipped VM image. So they have put up a message saying that they’ve had problems unzipping the files in OS X and GNU/Linux and they recommend some specific programs to open it up. Not a big deal though.

10 PHP code quality tools to avoid a mess in your projects

img_2052

When programming in any language there are certain common errors that everyone makes as they mature and evolve their programming skills. In the case of PHP, I’ve seen a lot of ugly and complicated code around, since the language is very permissive.

To have a good and healthy PHP code base so it won’t resemble the unmanageable cabling mess in the picture above, your project needs to have the following:

  • no spaghetti code
  • code reuse (avoid code repetition)
  • avoid complicated nested loops
  • Encapsulation (organize code in classes)
  • Clean user I/O
  • Code Documentation
  • Consistent code conventions
  • Tests

Luckily there are some PHP code quality tools that can help us address most of these problems and give us a diagnostic of our project’s code health.

Documenting your code

PHP Documentor: Documenting code with PHP Documentor is very simple and easy. You just need to follow a very simple markup before your functions and classes and the tool will generate all the developer documentation for you. It’s also very handy when adding new people to your project or inheriting someone else’s work. Just by seeing the documentation comments in the code you can understand what a given function does, what each of its parameters need to be and what it returns. You can also expand the documentation to add use cases and even unit tests!

Code consistency

PHP Code Sniffer: A tool that analyses the syntax of your project’s code based on a PHP syntax standard. Known standards like PEAR or Zend syntax styles are included by default but you can also customize and define our own team’s style.

PHP Depend Analyzes the code for common issues and potential optimizations. Some examples of those are:

  • if your function is too long
  • if your function has too many parameters
  • variable names too long or too short
  • too many nested cycles
  • use of eval()
  • name convention consistency
  • unused methods or variables

PHP Mess detector: A fork of PHPDepend with a friendlier UI and configuration options

PHPCPD (Copy/Paste Detector): A tool that will detect copy/pasted code across your project that can be reused.

Testing

Unit testing

PHP Unit and Simpletest: Unit testing has been very useful in my experience on recent projects where I’ve been allowed to implement it. On personal project I always tend to do unit testing before layout out all my code. It might take more time to develop your project at the beginning but it will save you tons of time debugging and tracing back errors when you think you’re done programming.

If you’re using Ubuntu and have problems running PHPUnit, here’s a post about how to solve the problem.

Here’s a quick guide on how to start using Simpletest.

Integration Testing (browser emulation)

Mink and Behat are the tools you’ll need to do browser emulation to test your interfaces and how it’s all put together and interacting for the user.

Put it all together with Phing

Phing is a tool like GNU Make or Apache Ant but it’s in PHP and extensible via PHP classes. You can put all of these tools together with Phing, so you can automate all the checking, testing and even deployment and cleanup of files or databases.

With these tools you can have a very robust quality assurance workflow on your project. Of course, this doesn’t mean that there’s not going to be any bugs or that your project will have the best code, but at least it will reduce very common problems, will increase code maintainability and help you spot problems easier. The transitions from adding or removing people from the project (like in large teams or dynamic organizations) will be smoother, as well. Also those transitions will be even smoother if you consider using an established web framework for your project instead of writing your own.

I gave a talk at FSL Vallarta 2012 about this, you can download the slides for the talk “Herramientas de calidad en codigo PHP” here. (slides in Spanish)

How to test your website on Internet Explorer with GNU/Linux and Virtualbox

Virtual machines As a web developer, you are always required to test your website code on Internet Explorer. And everyone knows how much of a pain that alone can be. But for GNU/Linux-only users the fun starts even before taking a look at your code on IE. The trouble starts with how are you going to run IE when you have no Windows computers at hand. Fortunately there’s a simple way to do so using virtual machines. That way, you can even have IE7, IE8 and IE9 running at the same time without conflicts.

Microsoft provides virtual machines for free so you can do your IE website testing. Visit the Microsoft VM download site to grab any of the different Windows and Internet Explorer versions that you would like to use for your testing.

These are images for Microsoft’s VirtualPC so to run them on VirtualBox you’ll need to change the file extension from .exe to .rar and unpack it to get the VHD file to use as hard disk on your virtual machine. Once you boot your machine, it will ask you for a password to log in. The password is “Password1″.

For more detailed instructions or if you have trouble with the network drivers check out Jon Thornton post about installing the MS virtual machines on VirtualBox.

There is also a simple script that does all the downloading and installing for you at https://github.com/xdissent/ievms

On a personal note, I sometimes tend to charge extra for Internet Explorer development, specially for IE8 or earlier. Never accept to make a site compatible with IE6 anymore. Not even the industry’s big players support IE6 anymore. I hope, as I guess many other web developers do, that someday IE will be a good player and will support web standards like everyone else.

HTML5 a jump backwards in web standards?

html5 logo

Web standards have always been about good markup, keeping things in order and cleaned up, etc. Using transitional or strict DTDs and validating our markup with different tools was a good practice encouraged by many. With HTML5 things seem to be going a bit backwards regarding structure and markup rules. Google’s HTML styleguide shows an example of how many tags in HTML5 are now optional. The good part of it is that markup is more simple and file sizes get reduced a lot. For high traffic websites like Google’s, every byte saved can be a big difference.

Back when HTML4 was being widely used, there was a lot of messy markup, incomplete tags and many ugly things done by different tools or even made by hand. Then XHTML came in to establish good practices. Web standards were not exactly born then, but got established, more widely known and adopted. XHTML brought a lot of structure and rules on the markup, all with the promise of being forward compatible with whatever new technologies would bring. By having a very well structured document and a correct markup, there would be no ambiguity for the markup parsers of that time and the ones the future would bring.

w3c valid

But now with HTML5 everything that XHTML came to establish seems abandoned. The HTML markup has always been very permissive, as browsers tend to fix any unclosed tags and minor details like that. But the fact that the specification itself is also very permissive with lots of thing as optional, makes me think that we’re going backwards and contradicting everything that was told on the XHTML “web standards days”.

Very little effort is needed to update any XHTML document into HTML5. The move with HTML5′s new tags is to have a more semantic web and it seems to work fine. The question is: will HTML5′s loose markup be as forward compatible as XHTML markup turned out to be?

Using Git with Subversion repository subdirectory

Git logo

Interacting a local git repository with a subversion one has been very useful and is very common on old projects. The way to do that is by using the git svn commands. But sometimes there are situations where there is one large repository with several projects as subfolders in that repo.

Using the standard svn cloning command:

git clone my_svn_repo_server.com/repository

Will checkout the whole SVN repository (all subfolders, hence, all projects) into your local machine. This can be very large if the codebase and history is big, and very slow to interact with, since getting your local repository updated will involve getting changes from all other projects.

To make git clone a subdirectory from an SVN repository, use the following:

git svn init http://my_svn_server.com/repository/path/to/directory/of/project
git svn fetch

This way you not only clone that subdirectory, but also you will get updates from only that folder, making faster code pulls and pushes to the central SVN repository.

While I consider a very bad practice to have one large Subversion repository with several projects inside it as subfolders, I’ve come across such setups several times and it drove me crazy to have to checkout the whole thing. Hope this helps out.

CSS3 columns in Internet Explorer and other unsupported browsers

http://i0.wp.com/www.csscripting.com/wiki/images/4/4b/Diagram-css3multicolumn.gif?w=625

Recently I’ve been working on a project for a client that makes use of CSS3 columns in its layout design. The problem with CSS3 columns is that it’s not supported by any stable version of Internet Explorer so far (surprised? no? good!). At the time of this writing IE9 is the latest version.

Luckily there’s hope. The CSS3 Multi-column script helps render columns in browsers that do not have this capability. All you need to do is download the file and add it to your HTML after all your stylesheet declarations. It will read all your CSS3 column declarations and render the content accordingly.

The script uses some crossdomain ajax calls to work its magic, but IE8 does things differently. I’ve patched the library with the fixes needed for it to work correctly in IE8.

Download the patched CSS3 Multi-column script.

Thanks to Tobin Titus, Internet Explorer Performance Manager, who helped me track the bug down.