SHOP

So, I Wrote (Another) Book…

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

php-featured

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.

frontPage.js

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.

singlepage-jess

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.

/OnePageProject
|_ 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.


/OnePageProject
|_ Index.html
|_/Styles
|_/Styles/jquery.fullPage.css
|_/Styles/style.css
|_/Scripts
|_/Scripts/jquery.fullpage.js
|_/Scripts/fullpage.js

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='http://fonts.googleapis.com/css?family=Inika&subset=latin,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>
</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() {
$.fn.fullpage();
});

Huzzah, it works!

singlepage-layout

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.

Conclusion

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.

SEMANTIC MARKUP

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.

semantic-news

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.

semantic-crossover-netscape

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.

Enter Modern.ie.

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.

semantic-vm-install

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.

semantic-vm-restart

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

semantic-vm-google

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!’.

semantic-vm-notepad

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.

semantic-vm-final

Conclusion

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.

CSS VARIABLES

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?

Conclusion

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.

Help Raise Money For Amnesty International

01-12-2013

 

Amnesty International is without a doubt my favorite charity. Since the 60s, they’ve perfected the art of making life difficult for anyone who would seek to infringe upon basic human rights. Sadly, winding up dictators and despots costs a fair bit of money, and they’re dependent on donations of time and money by their supporters.

Next month, six members of Liverpool Hope University’s Amnesty International society (of which I am a member) will take to the streets of Merseyside. It is here they’ll run a five kilometer marathon, dressed as everyone’s favorite Turkish gift-giver with the aim of raising a good chunk of cash for Amnesty International so that they can continue doing their essential work.

Whilst I won’t be joining them on the run*, I’d be really honored if my friends could chuck a few quid in the way of this JustGiving page. It’d mean a lot to me, as this is a cause I’m really passionate about.

p.s. If you do donate, please send me an email with your postal address. I’d love to send you a little thank-you note.

* 5km? I’d probably die.

Code It Better

%d bloggers like this: