Categories
Programming & Web Development

HTML5 boilerplate for sectioning tags

I’ve seen a lot of confusion on the use of the new HTML5 sectioning tags <article> <section>, <nav>, <aside> and the role left for the old <div> element we used often in previous versions of HTML specifications.

After reviewing the documentation and consulting several examples of usage, a basic practical skeleton for an HTML5 document should look something like this:

<!DOCTYPE html>
<meta content="utf-8">
<title>Your page title</title>
<div id="wrap">
  <section id="main">
    <header>
      <h1>My page title</h1>
      <nav>
        <ul>
          <li>Website main section 1</li>
          <li>Website main section 2</li>
          <li>Website main section 3</li>
        </ul>
      </nav>
    </header>
    <article>
      <header>
        <h1>My content piece title</h1>
      <header>
        <p>My content text</p>
    </article>
    <article>
      <header>
        <h1>My content piece title</h1>
      </header>
      <p>My content text</p>
    </article>
  </section> <!-- closing #main -->
  <aside>
    <p>Sidebar content</p>
  </aside>
</div> <!-- closing #wrap -->
<footer>
  <p>This is my footer</p>
</footer>

Here’s a colored chart to understand better the nesting of the elements:

HTML5 basic sectioning structure

The <div> element has no meaning in semantic web development practices. It should only be used for styling purposes. In my example, I used it as a wrapper for centering the main content with CSS styling. I could have used <section>, but semantically there was no point on having a section that has nothing else but another section immediately inside it. I only need to wrap all the content so I can style the margins and colors of the background. So I use <div> when I need to wrap some content just for presentation purposes.

I always struggle when deciding to use <section> or <article> for a particular piece of content, or how to layout the document’s structure.

The W3C defines the <article> element as:

The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

For the <section> element, the specification says:

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

So in that sense, you can nest <article> in <section> or <article> in <article> and <section> in <article>. Yes, I know, this is still confusing.

On my example structure, I put a main <section> with the ID of “main”. This means I have a “main” section on my page, with a list of articles. Each article has its own heading and content. Some articles might have subsections, hence having <section> nested in <article>.

For the case of nesting <article> in <article>, the W3C exemplifies with a blog post and it’s comments. Since the comments are related to the article, they must be inside the tag, but each comment is an independent piece of content that can be individually distributed (direct link to a comment).

So in that way, the HTML structure will look like this:

<article>
  <header>
    <h1>My blog post title</h1>
  </header>
    <p> my post content </p>
  <section id="comments">
    <article id="comment-1">
      <header>
        <h1>Comment subject</h1>
        <p>by line</p>
      </header>
      <p>Comment text</p>
    </article>
    <article id="comment-2">
      <header>
        <h1>Comment subject</h1>
        <p>by line</p>
      </header>
      <p>Comment text</p>
    </article>
  </section>
</article>

Here’s the colored chart:

HTML5 nested article tag

I hope this give a clearer view on how to use the sectioning elements in HTML5 and this example code serves as a quick boilerplate for your projects.

Categories
Programming & Web Development

PHP Debugging with Xdebug

https://i2.wp.com/xdebug.org/images/xdebug.gif?w=580

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!

Categories
GNU/Linux Free Software & Open Source Programming & Web Development

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.

Categories
GNU/Linux Free Software & Open Source Programming & Web Development

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)

Categories
GNU/Linux Free Software & Open Source Programming & Web Development

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.

Categories
GNU/Linux Free Software & Open Source Programming & Web Development

HTML5 a jump backwards in web standards?

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 html5 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?