Web Development

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

Smooth Fading Image Captions with Pure CSS3

29 September 2010 / 2 Comments

CSS3 promises to usher in a new wave of gorgeous web design, with lovely features such as drop shadows, text shadows, rounded corners, gradients, and border images.

One CSS3 feature that is really starting to gain traction now is transitions. CSS transitions allow you to smoothly animate an element’s CSS properties from one state to another, without using a single line of JavaScript.

Most modern browsers now have good support for transitions, including Firefox 4, Safari 5, Mobile Safari and Opera 10. IE sadly doesn’t (and this includes the upcoming IE9). Fortunately, transitions usually degrade gracefully in browsers that don’t support them—instead of elements slowly moving from one state to another, they simply jump instantly between states.

In this tutorial I’ll show you how to use CSS3 transitions to create a nice fading caption effect on images. View it in action — as you hover over an image with the mouse, you’ll see its caption fade in. (Assuming you’re not using IE, of course.)

Naturally, mobile browsers with touchscreens don’t have a concept of hovering. Instead, you can tap an image to see its caption.

Along the way, we’ll also use some new HTML5 elements like figure and figcaption to create nice semantic markup.

Ready? Let’s get started!

Make Your Own PHP Functions: The Newbie Guide

16 September 2010 / 4 Comments

You’re no doubt familiar with using functions in PHP. The language contains hundreds of built-in functions that you can use for all sorts of handy jobs — from manipulating text through to reading files, sending email messages and processing images.

You’re not limited to using just the predefined functions, though — you can create your own functions too! In this tutorial, I’ll show you how. You’ll learn:

Why it’s good to create your own functions
How to create and use a function
How to make your functions flexible by using parameters
All about optional parameters and default values, and
How to return values from your functions.

Ready? Let’s get started!

25 Web Tech Buzzwords Demystified

9 September 2010 / 5 Comments

The web is a fast-moving industry, and it seems as if a new web technology buzzword emerges every time you blink. From Ajax to WOFF, the array of buzzwords — and the technologies behind them — can be quite bewildering at times.

How are you, dear web developer, to keep up with it all?!

In this article I list 25 key web buzzwords that every modern web developer should understand. For each buzzword, I explain its meaning, talk about why the technology is useful, and include a few links for further reading.

Enjoy!

Banish JavaScript in Web Forms with HTML5

3 September 2010 / 4 Comments

View Demo »

Download Code

For years now, most Web forms have included at least some lines of JavaScript code. Typically this JavaScript is used to validate the form — that is, check all the fields have been filled in correctly before the form is sent to the server. JavaScript is also used to enhance forms with additional functionality, such as calendar widgets and the like.

While using JavaScript for these purposes is a pretty good solution, it’s not without its problems:

Not all browsers have JavaScript enabled, or can even run JavaScript.
Each Web developer builds their JavaScript form validation and widgets differently. This means that, when confronted with a new form, a user has to learn the form’s unique quirks and foibles in order to use it.
Adding decent validation to a form — not to mention creating custom widgets for things like dates and number ranges — is both fiddly and time-consuming.

The good news is that these dark days of JavaScript-laden Web forms may soon be coming to an end. Thanks to the joys of HTML5, we can now create forms with built-in validation and rich widgets for dates, numbers and so on, all without including a single line of JavaScript code. Hallelujah!

As with most cutting-edge Web stuff, there’s a catch to all this, and that is browser support (or lack of it). Fortunately, there are a few JavaScript libraries out there that can emulate HTML5 form validation and widgets, as we’ll see later in the tutorial. Sure, this does mean we’re not exactly banishing JavaScript for now, but at least we can remove it once the browsers catch up!

In this tutorial I’m going to walk you through the process of creating a nice, self-validating, widget-rich, HTML5 Web form. It’s an online order form for an imaginary software company.

You can play with the form now by trying out the demo. Fill in a couple of fields, then click “Place Your Order” to see the validation kick in. Try clicking the “Expiry date” field and see what happens.

Ready to code it? Let’s get started!

Create Smooth Rotatable Images with CSS3 and jQuery

25 August 2010 / 18 Comments

View Demo »

Download Code

With the advent of CSS3 transforms, we can do some nice tricks with elements in a web page, including rotation, scaling, and skewing. Once we start throwing jQuery into the mix too, we can start doing some really nice tricks!

In this tutorial I’ll show how you can use CSS3 transforms, along with some jQuery, to add smoothly rotatable photos to a web page. You can try it out right now by clicking the “View Demo” button above. Hold down Shift, then click and drag on a photo to rotate it.

I’ve based the code on this photo light table tutorial that I wrote a couple of months ago. In that tutorial, you could drag photos around the table, and click a photo to view it in a lightbox. Now, with this latest addition, you can also Shift-drag a photo to rotate it smoothly about its centre. Nice!

I should point out that this tutorial won’t work in IE at all, since IE (as of version 8) doesn’t support CSS transforms. I suspect it might work in IE9, although I don’t have it to test with. It also won’t work in touchscreen mobile browsers (yet) due to the lack of a Shift key!

Here’s how to code this baby up. Bear in mind that we’re starting with the script from the last tutorial, so if you want to follow along then you can download that code and work from it.

Easy Ways to Sort Arrays in PHP

16 August 2010 / 2 Comments

As I mentioned in my earlier article, Creating Arrays in PHP, arrays are very useful if you need to store and manipulate a large amount of data in one go. One useful way you can manipulate this data is to sort it in a particular order.

PHP gives you a large number of sorting functions that can sort arrays using many different criteria. For example, you can sort in ascending or descending order, by key, or by value. These functions make it really easy to sort arrays without getting bogged down in the details of sort algorithms.

We won’t try to cover every single PHP array-sorting function in this tutorial. Instead, you’ll learn about the functions that you’re likely to find the most useful in your everyday coding.

Let’s get started!

A Snazzy Animated Pie Chart with HTML5 and jQuery

11 August 2010 / 84 Comments

View Demo »
Download Code

In this tutorial I’m going to show you how to build a lovely, interactive pie chart using the latest HTML5 technologies. Not that long ago, this kind of thing was only practical to do with Flash. Now, thanks to advances such as the HTML5 canvas element, we can create pretty nifty animated effects using nothing but JavaScript, CSS, and a small sprinkling of maths!

Super-Easy Animated Effects with jQuery

3 August 2010 / 6 Comments

One of the lovely things about jQuery is it makes it ridiculously easy to animate page elements. Whereas you previously had to mess around with setTimeout() or setInterval(), and lots of JavaScript code, with jQuery you can work wonders with just a line or two of code.

In this tutorial we’ll cover some of the more common effects you can achieve with jQuery. We’ll look at:

Fading elements in and out
Showing and hiding elements
Sliding elements up and down
Animating any numeric CSS property
Creating an animation sequence
Inserting delays into an animation, and
Stopping animations.

Ready? Let’s get going!

Using Multidimensional Arrays in PHP

19 July 2010 / 7 Comments

Array elements in PHP can hold values of any type, such as numbers, strings and objects. They can also hold other arrays, which means you can create multidimensional, or nested, arrays.

In this tutorial you learn how to create multidimensional arrays, how to access elements in a multidimensional array, and how to loop through multidimensional arrays.

Your First 10 HTML Tags

13 July 2010 / 7 Comments

Just starting out with HTML? Here are 10 essential HTML tags that you’ll need to know when building your web pages. If you learn how these 10 tags work then you’ll have enough knowledge to put together a basic page.

At the end of the tutorial you’ll find code for an example web page that includes all 10 tags, so that you can see how to use them.

Web Development

Footer

Contact Matt

Follow Matt