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

CSS3 columns in Internet Explorer and other unsupported browsers

CSS3 Columns

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.

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

Easy CSS editing with Emacs

Editing CSS in Emacs is very easy since the standard CSS mode comes included by default. But developer Julien Danjou created this nice minor mode called rainbow-mode which will display the color of the code as the background of the code’s text. It is very useful to immediately see the colors right there in the style sheet instead of trying to remember each code and then test in the browser window.

One of the problems I had was when opening any CSS file, it would open by default css-mode, but I had to manually load rainbow-mode every time. The elisp function auto-mode-alist is used to detect a file type by its name and running a function associated with it, generally the function to enable a major mode to edit that type of file. For minor modes I couldn’t find anything that would allow me to launch them without inhibiting the mayor mode’s startup.

So since auto-mode-alist takes a regular expression for the file type and only one function as its arguments, I wrote a function that will run both and use that as the second argument to execute.

;; CSS and Rainbow modes 
(defun all-css-modes() (css-mode) (rainbow-mode)) 

;; Load both major and minor modes in one call based on file type 
(add-to-list 'auto-mode-alist '("\\.css$" . all-css-modes)) 

Hope you find it useful and you like the combination of css-mode and rainbow-mode as much as I do.

Categories
Bookmarks Programming & Web Development

From my reading links: HTML5 forms and Django, Google API playground and Python development tips

  • Making Forms fabulous with html5 Great introduction to the new HTML5 form input types and what you can do with them.
  • HTML5 – Example Form validation and styling Form elements With the new HTML5 form input types and CSS3 properties, form validation is very quick and easy, as well as nice form element presentation.
  • Head JS A very interesting utility that will load all your js scripts (jquery, google analytics, etc) in parallel so page load times get shorter, plus a lot of other nice features like new HTML5 elements styling in browsers that don’t yet support them like some versions of Internet Explorer.
  • Google APIs code playgroud I didn’t know you could play with all the Google APIs in a single webpage, testing your code as your write it.
  • GeoDjango and google maps An interesting read if you’re trying to integrate Google Maps with Django
  • HTML5 and Django form inputs How to render the new HTML5 input types with Django form classes. It doesn’t require much, really easy and fast.
  • Emacs as Python IDE A bunch of tips to have a good Emacs Python development environment. I personally don’t prefer IDEs, so I don’t use ECB but the rest is very useful.
  • Setting up a Python Environment Good advice for those coming from a PHP world and are getting started on Python development. I didn’t know about virtualenv until I had to deploy my first Django app on a shared host web server. Then it all made sense.