Blog

Here you’ll find articles about website development, WordPress, and other topics that I’m interested in. I hope you enjoy them and find them useful. Comments and feedback are always welcome!

PHP Anonymous Functions: What Are They, and Why Use Them?

10 December 2012 / 7 Comments

In this tutorial you’ll explore anonymous functions in PHP. Anonymous functions are a PHP feature that you probably won’t use that often; however, they can be really useful in certain situations, as you’ll see.

You’ll look at the following concepts in this tutorial:

What anonymous functions are, and how you create them
How to assign anonymous functions to variables
How to call anonymous functions
Using anonymous functions to create neater callbacks, and
Creating closures with anonymous functions.

Ready to dive into anonymous functions in PHP? Let’s go!

Build Responsive Sites Quickly with Foundation

31 July 2012 / 3 Comments

Responsive design is a big topic these days. A website with a responsive layout adapts to different devices — from widescreen desktops down to mobile phones — by resizing and rearranging the content in the page, as well as showing or hiding content.

While a basic responsive layout isn’t too hard to create, things can get fiddly once your layout starts getting more complex. On top of that, there are cross-browser issues to deal with, as well as setting up nice defaults for typography, colours, buttons, forms, menus, and so on.

This is where frameworks like Foundation come in. Foundation takes care of a lot of the “grunt work” involved in setting up a new site, with a responsive grid, cross-browser CSS, and good-looking default settings for all sorts of page elements.

In this introduction to Foundation, you’ll get an overview of Foundation’s features, and see how you can use the framework to rapidly prototype and build your next website. Enjoy!

Knockout Tutorial: Build Dynamic, Interactive Web Pages Easily

25 June 2012 / 4 Comments

View Demo »

Download Code

JavaScript is a great language, but building complex user interfaces for websites and web apps using JavaScript alone can get tedious and fiddly. You have to deal with cross-browser issues, as well as write long-winded functions to manipulate the DOM (document object model), handle events, and more.

For this reason, a large number of useful JavaScript libraries have emerged in recent years to make your job as a JavaScript coder easier and more fun.

One recent library that’s growing in popularity is Knockout. It’s small, easy to use, and plays nicely with other JavaScript libraries such as jQuery. Using Knockout, you can build complex user interfaces in a fraction of the time that it would take you to code everything by hand.

In this tutorial, you learn Knockout from the ground up. You explore the key concepts behind Knockout, and learn how to create interactive web pages quickly and easily. At the end of the tutorial, you work through a complete “product selection” example that shows how to use Knockout in practice.

How to Add Image Uploading to Your CMS

31 May 2012 / 77 Comments

View Demo »

Download Code

In my tutorial Build a CMS in an Afternoon with PHP and MySQL, I showed how to build a simple but useful content management system with PHP and MySQL. I also showed how to extend the CMS to allow article categories.

In this tutorial, you’ll look at another way to extend the CMS. You’ll take the original CMS code, and modify it so that the administrator can upload an image for each article. Then, when a visitor views an article page, the CMS will display the image at the start of the article. In addition, our CMS will generate a smaller thumbnail version of each article image, and display this thumbnail next to each article headline in the homepage and article archive pages.

You can see the finished result by pressing the View Demo button above. Notice the thumbnail images next to each article headline. Click a headline or thumbnail to view the corresponding article, along with the full-size article image.

Easy HTML Templates with Mustache

27 April 2012 / 11 Comments

Templates are a great way to separate your website’s code from its design. There are many great web template systems available for different languages and platforms, including Smarty for PHP and the Django template language for Python.

In this tutorial you’ll explore Mustache, a relatively new and very simple template system that you can easily use to create HTML templates. You’ll look at various topics, including:

The advantages of using Mustache
How to install and use the Mustache processor
How Mustache tags, variables, and data objects work
Using sections to create conditions and loops
Including one Mustache template inside another
…and lots more!

Along the way, you’ll see plenty of code examples that show you how Mustache works. At the end of the tutorial, there’s a complete example that uses Mustache, along with jQuery, to create a simple Ajax-based product list page.

jQuery Mobile 1.1: Smoother, Faster, Nicer

16 April 2012 / Leave a Comment

The latest version of jQuery Mobile, 1.1, has just hit the streets, and it has some great new features and improvements over 1.0. In this article you’ll get a quick run-down of jQuery Mobile 1.1, and all that it has to offer you as a mobile web developer.

You’ll look at:

Improved fixed header and footer toolbars
Enhancements to page transitions, and two new transition effects
Loading spinner and text improvements
Cute mini form elements
Nicer-looking flip switches
Improved sliders
Disabling markup enhancements and Ajax handling for entire containers, and
A few other minor improvements in version 1.1.

At the end of the article, you’ll also get a brief taste of the new features and widgets that are slated for the upcoming jQuery Mobile 1.2 release.

Let’s start with one of jQuery Mobile 1.1’s headline features: its vastly improved fixed header and footer toolbars.

Ajax with jQuery: A Beginner’s Guide

6 March 2012 / 4 Comments

Many modern websites — and practically all web apps — use a technique called Ajax to provide a smooth, fast experience for the user. From apps like Gmail and Google Maps through to JavaScript frameworks like jQuery Mobile, Ajax is a popular way to fetch data from a server in the background and update the page dynamically.

Writing Ajax JavaScript code from the ground up can be fiddly. However, many JavaScript libraries, including jQuery, have excellent high-level support for Ajax, making it easy for you to build Ajax-driven websites and apps with minimal hassle.

In this tutorial, you’ll learn the basics of making Ajax requests using jQuery. You’ll look at:

Exactly what Ajax is, how it works, and why it’s a good thing
How to make various types of Ajax requests using jQuery
Sending data to the server along with an Ajax request
Handling the Ajax response from the server, and capturing any data returned in the response
How to customize jQuery’s Ajax handling and change default settings, and
A few links to some more advanced Ajax-related info and tips.

To keep things simple, this tutorial concentrates on the JavaScript side of things, rather than delving into server-side coding. However, it’s pretty easy to write server-side scripts that work with Ajax. If you want to learn a server-side language, check out my PHP tutorials.

Ready to learn Ajax? Let’s get started!

Responsive Web Design: 5 Handy Tips

17 February 2012 / 2 Comments

In my previous article Responsive Web Design Demystified, I explained the concepts behind responsive web design, and showed how to build a simple responsive layout from the ground up.

In this article, you learn five additional techniques that will help you build great responsive layouts. You’ll put each technique into practice as you build on the responsive layout created in the previous article.

Here’s what you’ll learn in this article:

How to hide non-essential content on smaller screens
Creating collapsible blocks of content to make the best use of mobile displays
Scaling images in proportion to the available screen width
How to create responsive images that are optimised for different screen sizes and network speeds, and
Resizing type according to browser width.

Ready? Let’s get started!

How to Add Article Categories to Your CMS

25 January 2012 / 58 Comments

View Demo »

Download Code

Since publishing my tutorial Build a CMS in an Afternoon with PHP and MySQL, many readers have asked how to add more features to the CMS. I thought I’d answer some of these questions by writing additional tutorials that build on the original simple CMS.

In this tutorial, you’ll learn how to add article categories to the CMS. Categories give your site more flexibility: as well as listing all articles on the homepage, you can create separate section pages of your site, with each section page listing the articles belonging to a particular category.

For example, our original CMS demo lumps all types of article — news, reviews, and interviews — together on both the homepage and the archive page. By creating separate News, Reviews, and Interviews article categories in our CMS, we can then create individual archive pages for news, reviews, and interviews in our site.

You can see how this looks by clicking the View Demo button above. Notice that each article title on the homepage has a category name below it (Interviews, Reviews or News). Click a category to view its archive page, which lists all articles in that category, along with the description of the category at the top of the page.

jQuery Mobile Masterclass: Build a Simple, Attractive Twitter App for iPhone

31 October 2011 / 2 Comments

View Demo »

Download Code

(Open on your iPhone or iPad!)

jQuery Mobile is a great framework for building mobile web apps, and as the 1.0 release gets nearer it’s really starting to mature into a stable platform.

In my previous jQuery Mobile article, I gave a quick overview of jQuery Mobile’s headline features. In this tutorial you’ll delve deeper into jQuery Mobile. You’ll build a simple, nice-looking, easy-to-use iPhone Twitter app called “CloseFriends” that displays your closest Twitter friends’ latest tweets.

You’ll explore the following topics as you work through the tutorial:

How to build a web app using just HTML, CSS and JavaScript (no server-side code).
Making an app that can be installed and launched from the iPhone home screen.
Creating rich mobile interfaces using jQuery Mobile, including page transitions, list views, buttons and dialogs.
Using Scott Jehl’s excellent pagination plugin to create a sequence of draggable “latest tweet” pages, much like the native iOS Weather app.
Tweaking the pagination plugin to create a nicer swipe experience.
Working with the Twitter API using JavaScript.
How to use HTML5 local storage to store data persistently in the browser.
Creating your own jQuery Mobile swatches to theme your app.
Working with jQuery Mobile events.
Adapting to different device screen sizes and orientations.
…and lots more!

You can try out the finished app on your iOS device by tapping the View Demo button above, and download the complete code and image files by clicking the Download Code button.

To get the most from this tutorial, it helps to have some familiarity with JavaScript, jQuery and jQuery Mobile. A great way to get up to speed quickly with jQuery Mobile is to read my comprehensive eBook, Master Mobile Web Apps with jQuery Mobile.

Ready to build the CloseFriends app? Let’s go!

Blog

Footer

Contact Matt

Follow Matt