Tutorial

Make a Rotatable 3D Product Boxshot with Three.js

14 November 2019 / 9 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.

Once 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.

Wordfence Tutorial: How to Keep Your WordPress Site Safe from Hackers

7 June 2018 / 7 Comments

[This article was updated on 7 June 2018 to cover Wordfence 7.1.]

Hundreds of WordPress sites get hacked each day. How can you make sure yours isn’t one of them?

Let’s face it: WordPress security is a big topic. It can also seem a little scary at first glance. There are so many different ways that hackers can break into sites. How can you begin to protect your site against all these attacks?

Well, you can stop worrying! In this tutorial, I’ll show you how to install and configure a WordPress plugin that will dramatically beef up your site’s security, with very little effort on your part. The whole caboodle takes about 20 minutes to set up.

By the time you’re done, you’ll be able to relax, safe in the knowledge that your WordPress site is well-protected against those pesky hackers!

But first, let’s take a look at exactly how hackers do what they do — and why they do it.

How to Make Awesome-Looking Images for Your Website

22 January 2018 / Leave a Comment

Great images make a huge difference to the look and feel of your website. Whether it’s product photos, a headshot of your gorgeous self for your About page, or some inspirational images for your blog posts, eye-grabbing imagery will help your customers trust you and your business.

But we’re not all professional photographers, right? So how do you go about making these amazing pics? There are many fantastic stock photo libraries, of course, which are a great place to start. But sometimes you need to take your own photos. Even a stock photo might need some tweaking to work well on your site.

That’s why I wrote this guide to creating great images for your site! In it, you’ll learn:

How to choose an image-editing app that meets your needs
The best way to crop your images for maximum effect
Ways to tweak an image’s brightness, contrast, and colours to make it pop
A clever trick to make the subject of your photo stand out
How to reduce pesky noise in a photo to make it look cleaner and load faster, and
How to improve soft images with sharpening so that they look more pro.

Ready to get started? Let’s begin by choosing the perfect image editor for you!

Set Up Google Analytics for Your Website: A Beginner’s Guide

2 December 2016 / Leave a Comment

Want to set up Google Analytics on your website? You’ve come to the right place!

Everyone says Google Analytics is fantastic for understanding your visitors, website, and online biz. But how the heck do you get started with it?

Maybe you had a go at setting up Google Analytics, but couldn’t get it working properly with your site. Or maybe it all seems too hard to even begin!

If this sounds like you, I’ve got you covered. In this tutorial I walk you, step by gentle step, through creating a Google Analytics account, linking it to your website, and testing it all works. You’ll also learn about stopping pesky Google Analytics spam, and find out what to do once you’ve set up Analytics with your site.

By the time you’ve finished reading, you’ll understand the whole setup process and you’ll feel like an Analytics pro!

To keep things simple, I focus on linking Google Analytics with WordPress. If you don’t have a WordPress site, don’t worry — most of this tutorial still applies, and I’ve also included links that explain how to set up Analytics with Joomla, Wix, Weebly and more.

Ready to set up your Analytics? Let’s go!

UpdraftPlus Tutorial: How to Set Up Backups to Keep Your WordPress Site Safe

18 November 2016 / 8 Comments

So you have a WordPress site, and you know you should be backing it up. You know that WordPress backups are essential for keeping your site safe and secure.

You’ve heard about the free UpdraftPlus backup plugin and decided it to try it out on your site. Hey, good decision! UpdraftPlus is one of the world’s most popular and respected plugins for backing up WordPress sites.

But like all complex technology, UpdraftPlus can be a bit of a minefield. First you have to install it and work out all the settings. You need to link it up to your Dropbox or other cloud storage; set up schedules; and check it’s all working OK.

There are also tons of paid add-ons for UpdraftPlus. Are they worth it? Which ones should you buy?

Finally, if the worst happens and your site breaks, how do you use UpdraftPlus to restore everything and get it all working again?

You’ll learn all this — and more — in this tutorial. I’ll guide you through the process of installing UpdraftPlus; linking it to your Dropbox; setting up backup schedules; choosing add-ons; and restoring your site if disaster strikes.

By the time you’ve finished reading, you’ll understand exactly how to set up and manage your backups with UpdraftPlus, and you’ll be confident that your WordPress site is nice and safe!

Let’s start by taking a quick look at UpdraftPlus’s features.

How to Make Gorgeous Video Intros with Keynote & iMovie

7 July 2016 / 2 Comments

Videos are a super-effective way to get your point across.

Whether it’s an explainer video for your business, a video course that teaches your expert skills, or a promo video for your latest product, videos really help to deliver your message.

But how should your video begin? You can just launch straight into the meat of the video, but often it’s nice to lead your viewers in gently with a short intro. The intro can explain what the video is about, and might include your logo and other info too.

Getting a professionally-made video intro can cost an arm and a leg, but there is a way to do it yourself on a budget — and you can get great results too! In this tutorial, I’ll show you how. All you need is a Mac, the Keynote & iMovie apps, and some free fonts, graphics, and music.

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.

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 / 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 / 83 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.

Tutorial

Footer

Contact Matt

Follow Matt