Debugging PHP Programs By Email

Okay, so this is pretty evil.

Ever write any Node.JS? I’m quite partial to the Express framework. Perhaps what I love most about Node/Express is that it’s so easy to debug when things go wrong. It’s just a matter of logging stuff to the console.

PHP isn’t quite so easy to debug. I’ll quote Silverdrag from StackOverflow on this one:

In PHP, you have 3 categories of debugging solutions:

  • Output to a webpage (see dBug library for a nicer view of things).
  • Write to a log file
  • In session debugging with xDebug

Learn to use those instead of trying to make PHP behave like whatever other language you are used to.

All of these solutions work, but aren’t exactly what you’d call great. Which is why I’ve started debugging PHP via e-mail. It’s exactly what it sounds like.

if (x = y){
mail('', 'x = y', x);
} else {
mail('', 'x != y', x);

Yes, I know it’s crazy. Yes, I know it’s a little bit evil. Yes, I know it’s ugly as hell. But it works!  And it’s still not as insane as implementing an SSH server in PHP.

Do you have an unorthodox way of debugging your web applications? I’d love to hear about it. Drop me a comment below, will you?

So, I Wrote (Another) Book…

You may remember that a few months ago I wrote a book for It taught readers the fundamentals of HTML5, and how they can use the new web standards to create better, more beautiful websites.


Well, I just wrote another. This time, it’s about PHP, and it aims to give the reader the foundations to start hacking on websites with this versatile programming language. In it, I teach the reader about basic PHP structures, how to interact with databases using MeekroDB and how to handle user authentication.

You can download it for free here, and is available in HTML, PDF and ePub format. If you’d like to read it on Kindle, you can buy it here for the princely sum of $1.29.

I’d like to thank Justin Pot and Angela Alcorn for their patience and help in creating this book. Their editorial finesse made this happen, and I’m incredibly grateful.

Have a read, and let me know what you think. If you enjoyed it, you might also want to also follow me on Twitter.

Making Beautiful Single Page Websites Is Easy With fullPage.js

Single-page websites are all the rage.

No complaints here, I love them. There are a huge number of reasons why you should look at using a single page website. They work nicely with touch-oriented devices. They’re reasonably simple to develop, and… Well? They look ridiculously cool.

There are some rather beautiful examples of single page websites out there, and OnePageLove has done a sterling job of aggregating the best of them.  My favorite is this painfully hip wedding invitation.  Have a look.


If you want to quickly make a simple single-page application, you’ll find that there are no shortage of JavaScript frameworks and libraries out there which make this possible. One of these frameworks is fullPage.js. I’ve used it a lot over the past couple of days, and I’ve become rather fond of it.

Created by Cambridge based programmer Alvaro Rotrigo, it makes it trivially easy to create simple, elegant websites using the single page paradigm. fullPage works by structuring each page into sections, with each of these sections occupying the entirety of a page.

The result is a product which has a logical flow and looks incredible. And fullPage.js makes it easy to create Single Page websites. Here’s how.

Using frontpage.js

Start off with a basic project skeleton.

|_ index.html
|_/ Styles
|_/ Scripts

Then grab the latest version of frontpage.js from Github. When cloning the repository, you’ll notice that it comes with all sorts of extraneous fluff which we’re not particularly interested in. Grab ‘jquery.fullPage.css’ and ‘jquery.fullPage.js’ and copy them into our Styles and Scripts folder respectively. While you’re at it, create a CSS and Javascript file where we’ll store our custom code. So, our project folder should now look like this.

|_ Index.html

Now, open up your index.html file, and create a simple HTML5 document structure. If you use Emmet in Sublime Text 2, you can easily create this by pressing ‘ctrl-alt-return’ and then typing ‘html:5’.

Now link to the stylesheets and scripts. You’ll also need to link to JQuery. It’s highly recommended that you grab these from the Google CDN, as I did below.

<link href=',latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href=“styles/style.css">
<link rel="stylesheet" type="text/css" href="styles/jquery.fullPage.css" />

Now, time to create the elements in our single page application. For each section of your page, you need to create a div with a class of ‘section’.

<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>

You can also create landscape sections by adding a div with the class of slide within a section.

<div class="section">
<div class="slide"> Slide 1 </div>
<div class="slide"> Slide 2 </div>
<div class="slide"> Slide 3 </div>
<div class="slide"> Slide 4 </div>

Nothing working? That’s because you need to instantiate frontPage.js. Open ‘scripts/frontPage.js’ and add the following lines of code.

$(document).ready(function() {

Huzzah, it works!


You can customize fullPage’s functionality in this function by passing it an object containing variables which define how fullPage works. There are literally hundreds of these options, so it’s recommended you read the documentation on Github.


As you can see, fullPage makes it trivially easy to make single page applications, and I’ve got quite a soft-spot for it. Give it a go, and let me know how you find it in the comments below.

Enjoy this article? You should follow me on Twitter.

Of Netscape 4.04 and Semantic Markup

Last week, I made a bet.

The bet was made with one of my friends. The prize was a cup of coffee. The challenge was to see if HTML5 semantic markup would work on an older browser.

How old, you ask? Netscape 4.04. Y’know. The one released in 1997.

Semantic Markup

Before we carry on, we should probably talk about Semantic Markup.

Have you noticed how news websites are pretty much all the same? If you read an article on the websites of the BBC, Al Jazeera, CNN… Whatever… You’ll notice that they all follow the same structure. You’ve got a main article. You’ve got a navigation bar. You might have an infobox on the side of a page. Pretty samey.


It used to be that you would create a Div element for each of these sections. This worked fine, don’t get me wrong. That said, it wasn’t a perfect solution. It lacked a certain elegance, and more importantly, the ID used in the Div element wouldn’t be standard across all websites. This wasn’t especially search-engine friendly.

As a result, semantic markup was created. Now, instead of creating a div for commonly used elements in a web page, you can just use a tag specifically created for that aspect of a web page, such as ‘section’, ‘aside’, ‘nav’ and ‘article’. You can probably guess what these do.

The creation of Semantic Markup has been awesome for developers; having improved code quality and readability and makes websites more readable to search engines too. There’s really no reason to not be using semantic markup right now. Or is there?

Semantic Markup and Older Browsers

It stands to reason that HTML5 features aren’t included in older browsers. These include the new (and awesome) JavaScript APIs for geolocation, link prefetching and fullscreen windowing.

But what about semantic markup? Unlike most of the features recently introduced to the HTML standard, semantic markup doesn’t actually do anything in the browser. Rather, it’s just a bunch of tags that act as a container for other tags based upon a logical grouping.

As a result, it stands to reason that an older browser shouldn’t have too many issues rendering content enclosed within two semantic tags.

With respect to this particular bet, I predicted that whilst the browser wouldn’t understand what a <section> tag is, it would just treat it as broken markup; skipping to the valid markup enclosed within and rendering it in the browser. Amusingly, this would result in the same results as if running semantic markup on a modern browser which explicitly support it.

My pal took a slightly different view, expecting the browser wouldn’t render it. Period. That’s a fair point, especially when you consider that Semantic Markup was only recently introduced into the HTML specification and Netscape 4.04 was released when I was six years old.

Running Netscape on a Mac

This is harder than you might think.

I first tried using Netscape with CrossOver Mac. This commercially supported implementation of WINE (an open-source compatibility layer for Windows applications) allows you to create ‘bottles’ which implement a number of key Windows DLLs. It is in these bottles where you can install Windows applications and run them on your Mac or Linux computer.


Whilst Netscape installed perfectly (using both a Windows XP and Windows 98 bottle), I couldn’t get it to run without it immediately crashing to the desktop. I had to try something different.


Few web developers would be seen dead using Windows as their main development platform. Despite this, Internet Explorer stubbornly clings to life; retaining a 50% market share.  As a result, Microsoft is on a PR offensive and trying to woo the affections of developers by giving anyone who wants it a free Windows VM, where they can test their applications against Internet Explorer.

I grabbed myself a free Windows XP virtual machine, fired up Oracle VirtualBox and set about installing Netscape on it.


Curiously, after having installed Netscape, I am asked if I would like to restart Windows or restart my computer. Because those are two obviously different questions.


It works! Incidentally, this is what the Google Homepage looks like with a 17 year old web browser. It’s… Uh… Beautiful.


Testing My Hypotheses

I started off by writing a simple little HTML document (using Notepad. Blegh). Inside the Body tags, I included an Aside and Section tag. Inside of these, I included two P tags each saying ‘Hello World!’.


To recap, if my hypothesis was right, I’d see ‘Hello World!’ printed to the screen twice. However, if I was wrong, nothing would happen.

As you can see in the screenshot below, my prediction was correct. For the sake of fairness and to prove that no shenanigans took place, you can see the contents of ‘View Source’ next to the browser window.



This was a fun trip down memory lane. I’ve actually got quite fond memories of Netscape Navigator, having had my first internet experience using it on a slightly shaky PowerMac with an even shakier ISDN connection. The 90s, eh?

That said, there’s a takeout message from this experiment. Namely, there’s figuratively no good reason to not be using semantic markup right now. Seriously, none.

It’s also ridiculously easy to transform your site into nice, modern, semantic HTML. I’ve written about it extensively in a book for MakeUseOf, as well as in a personal blog post.

I think I’ve earned my coffee. I’ll have a double espresso please.

Enjoy this article? You should follow me on Twitter.

After 17 years, CSS gets variables. Finally.

One of my favorite Zed Shaw rants (and believe me, there’s many) is in ‘The Web Will Die When OOP Dies’. In this talk held at a Norwegian technology conference, he unleashed a hilarious, profanity laden diatribe about the current state of web technologies that almost felt as though it was scripted by none other than Malcolm Tucker.

One of the targets for his wrath was CSS and its dumbfounding lack of variables. That’s a totally fair criticism when you think about it. I mean, you could have multiple instances of ‘#FF0000’ throughout a stylesheet. If suddenly the spec changes, or you want to update each of those of those rules, you will have to manually go through your stylesheet (these can be big) and replace each instance of ‘FF0000’ with something else.

If only there was some revolutionary concept where you could store a value and then reference it later. That sounds like crazy talk, right?

… Or, not. That’s called a variable, and they’re found in almost every single programming language ever. Except CSS. Until now.

Firefox 29 Nightly has taken the bold step of introducing CSS variables. Here’s how they work.

Defining, Referencing and Scoping Variables

All variables are prefixed with ‘var’ and are defined within a context. The example given on the Mozilla Hacks blog is of a hex value and a string being defined within the root pseudoclass.

:root {
 var-companyblue: #369; 
 var-lighterblue: powderblue;

Simple enough, right?

So, how do you reference them? Again, simple enough. You drop the ‘var-‘ and wrap your variable name in-between a ‘var’ function call with parentheses. Also stolen from the Mozilla Hacks blog.

h1 {
 color: var(companyblue);
h2 {
 color: var(lighterblue);

Scoping is pretty cool as well. You can re-use the same variable names and just place them within a different selector. This example also shamelessly stolen from Mozilla.

:root {
 var-companyblue: #369;
 var-lighterblue: powderblue;
#partnerbadge {
 var-companyblue: #036;
 var-lighterblue: #cfc;

Should you have any elements with an ID of partnerbadge which reference the ‘companyblue’ and ‘lighterblue’, they’ll use the second set of values. Nifty, right?


SASS and LESS are two stylesheet languages which compile down to CSS, and have had variables for a really long time. There’s been a huge need for this to be introduced for a good long while now.

However, this is still an experimental technology and is only really supported by Firefox Nightly at the time of writing. It’s not a good idea to start introducing CSS variables into production code right now. In a few months, however… Well, who knows?

Enjoy this blog post? You should follow me on Twitter.