Web Development

Client and server-side programming. Covers JavaScript, PHP, Perl and ASP.

Make a Rotatable 3D Product Boxshot with Three.js

14 November 2019 / 13 Comments

[This article was originally published on 12 August 2011. It was updated on 14 November 2019 to cover the latest version of Three.js and add mobile support.]

To say that JavaScript has come a long way in recent years is a bit of an understatement. At the turn of the century we were using it mainly for validating forms and opening annoying pop-up windows. These days, JavaScript can play HTML5 video and audio; generate richly-detailed graphics on the fly; query a mobile device to display its location; and even make a web server.

One area where JavaScript has improved in leaps and bounds is 3D graphics. Ten years ago, the idea of smooth, real-time, realistic 3D graphics running inside a web browser seemed out of this world. Nowadays it’s becoming commonplace, thanks to modern browsers supporting both the canvas element and WebGL, a library that adds hardware-accelerated, OpenGL-like 3D graphics capabilities to the browser.

Building on top of these layers, some enterprising folks have built JavaScript libraries that make it easy for the average coder — that is, someone without a degree in computer graphics — to create realistic, animated 3D scenes, right in the browser. This is opening up a world of possibilities for online games, interactive videos, web apps, and much more.

One such library that’s gained a lot of traction is Mr. doob’s Three.js. This library gives you all you need to create complex 3D scenes in the browser, using nothing but JavaScript.

While Three.js is relatively easy to use, it can still be daunting if you’re not familiar with the concepts involved in computer-generated imagery. In this tutorial, you’ll get a gentle introduction to Three.js’s basic features, and learn how to put them to practical use by creating a rotatable 3D boxshot scene.

jQuery Mobile 1.4: Cleaner, Faster and More Powerful

13 January 2014 / 2 Comments

jQuery Mobile is a great JavaScript framework that’s designed to help you build mobile web apps and mobile-friendly websites quickly and easily. The latest version, 1.4, came out last month, and it represents a big step forward for the framework.

In this article you’ll get an overview of the changes and improvements in 1.4, and learn how to apply some of these techniques to your own websites and web apps. You’ll look at:

The performance improvements in 1.4 that result in a smoother, faster experience for users
The new, simpler theming system
The new default theme and simplified swatches
1.4’s brand-new SVG-based icon set
The new flipswitch widget for smoother, more flexible flip switches
The filterable widget that lets you filter anything from listviews to tables and paragraphs of text
A new tabs widget for separating your page content into tabbed sections, and
A brief summary of the API changes and deprecations that are new to 1.4.

Let’s start with a quick look at how the jQuery Mobile team has improved performance in 1.4.

7 Exciting Up-and-Coming Web Technologies

1 October 2013 / 4 Comments

The world of building websites is always a fast-moving one. It seems like some amazing new framework or design app comes out every day! In this article you’ll get a rundown of 7 exciting new developments in the web design and development arena. These technologies promise to make it easier than ever to create beautiful, functional websites and web apps. Enjoy!

Ruby Tutorial for Absolute Beginners

11 June 2013 / Leave a Comment

The Ruby programming language is becoming increasingly popular, thanks to its clean syntax, its object-oriented features, and its range of high-quality libraries and frameworks.

In this tutorial, you get a gentle introduction to programming in Ruby. You learn:

How Ruby works, and what it’s used for
How to install Ruby on your Mac, Windows PC, or Linux PC
How to create — and run — your first Ruby script
Some of Ruby’s object-oriented programming features
How to create and use classes and objects, and
How to use Interactive Ruby to explore the Ruby language.

At the end of the tutorial, you also explore some resources for taking your Ruby skills further.

Let’s start with a brief introduction to Ruby, and take a look at the language’s features and benefits.

jQuery Mobile 1.3: What’s New?

1 March 2013 / Leave a Comment

jQuery Mobile is a handy JavaScript framework that makes it easy for you to build mobile web apps and mobile-friendly websites. jQuery Mobile 1.3 came out last week, and it has all sorts of lovely new features and improvements over 1.2. In this article you’ll get an overview of these changes, and see how to use jQuery Mobile 1.3 to enhance your websites and web apps even further.

You’ll look at:

Responsive web design improvements
Responsive grids
Two types of responsive tables for displaying data
A new panel widget
Improvements to range sliders and other form fields
A new navigate method and event for easy history manipulation
A new easy way to build autocomplete listviews
New options for dialogs and popups
Two new icons, as well as other icon improvements, and
A few miscellaneous enhancements to the framework and documentation.

We’ll start by taking a look at the concept of responsive web design, and see how jQuery Mobile 1.3 makes it easier than ever to build responsive webpages.

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

10 December 2012 / 8 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 / 5 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 / 6 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 / 93 Comments

View Demo » | Download Code

17 May 2019: This article and the code were updated for PHP7 compatibility.

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 clicking the View Demo link 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 / 13 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.

Web Development

Footer

Contact Matt

Follow Matt