As a programmer/web-designer I dip into a diverse range of programming languages and frameworks. I often find that I get locked into a specific coding grammar/syntax and that it is then difficult to switch to a new one. This is when I find the following cheat sheets invaluable (and indeed comforting).

• Subversion (SVN) - 293 KB PDF
• Regular Expressions (RegEx) - 648 KB PDF
• mod_rewrite - 563 KB PDF
• PHP - 556 KB PDF
• CSS - 316 KB PDF
• HTML - 563 KB PDF
• Ruby On Rails - 753 KB PDF
• HTML Character Entities - 959 KB PDF
• JavaScript - 453 KB PDF
• MySQL - 348 KB PDF
• RGB Hexadecimal Colour Chart - 199 KB PDF
• OS X / Linux / Unix
• Photoshop CS3

Due to work and other commitments it’s been a while since I last posted here. In the meantime my RSS client periodically trawled the great ocean of the Internet and landed a rather decent catch of prime linkage. So, without further ado, I present a link anthology - the very best that’s passed before my radar over the last week or so.

Apple

• In “Steve Jobs and the Portal to the Invisible” Tom Junod becomes the latest in a long line of journalists to explore the enigma that is Steve Jobs — with a slightly macabre slant.
• Apple Publications Style Guide 2008 (2 MB PDF) and don’t be fooled into thinking that this is only relevant to the Apple audience!
• Leopard’s “Stacks” are a great addition to OS X but the dock icon handling is, ahem, shitty (sorry Apple). Stu Greenham provides a little cosmetic overhaul.

Art & Design

• 35 Beautiful Grunge Website Designs You May Not Have Seen Before.
• Is your website’s underwear showing? Remember to specify a background colour.
• ILoveSketch: A 3D curve sketching system that captures some of the affordances of pen and paper for professional designers.
• Behind the Design: 5 Stories of Great Inspiration.

Current Affairs

• The End: The era that defined Wall Street is finally, officially over. Michael Lewis, who chronicled its excess in Liar’s Poker, returns to his old haunt to figure out what went wrong.

Music & Video

• 60 Beautiful Music Videos: The music video is a unique art-form and Smashing Magazine has collected together 60 of the most original in one place. Use Jason Kottke’s “High Quality YouTube Video Hack” to enjoy them more fully.
• King Lines Trailer: Extreme climbing.
• 50 Beautiful Movie Posters: I’ve always loved movie posters and some of these are breathtaking.

Technology

• Gesture Based Control: Mgestyk is a new touch-free way to interact with your computer. It lets you control games and other applications just by moving your hands, allowing for more natural and immersive interaction. Gestures are processed in 3D, meaning that even depth-based gestures (like controlling the throttle of a plane) are natural and responsive to use. Mgestyk works even in total darkness! We eagerly await an OS X version.
• uplog: Freeform R&D.

After reading Ian Lloyd’s The Perfect 404, I’ve revamped my “Not Found” error page to be a little bit more useful because, as Lloyd writes, “a user-friendly website will give you a helping hand.” Previously my 404 page simply stated that an error had occured and offered links to the home-page and archives. I knew I could do better than that!

The simplest change I made was to remove the “404” error code. After all, while you and I understand what this means, my next-door neighbour wouldn’t. To Joe the Plumber this error code is simply redundant information.

I wanted to try to explain why the reader had ended up on the 404 page. So my body text begins with something like:

Sorry, but /[url_fragment]/ doesn’t exist on the Urban Mainframe at this time.

It seemed polite to explain that the error could either be mine (I might have changed a URL or removed a resource) or it could be that a referring link is incorrect. So I needed to determine whether or not there was a referring link and, if there was, I could then display an appropriate message.

The link at http://some-domain.com/bad_referrer/ is incorrect or /[url_fragment]/ has been moved, renamed or deleted.

A snippet of PHP code in my WordPress’ 404 template serviced this requirement:
<?
if ($_SERVER['HTTP_REFERER']) {
echo "<p>The link at <em><a href=\"" . $_SERVER['HTTP_REFERER'] . "\">" . $_SERVER['HTTP_REFERER'] . "</a></em> is incorrect or <em>" . $_SERVER['REQUEST_URI'] . "</em> has been moved, renamed or deleted.</p>";
}
?>
Then I present the reader with a couple of options by providing links to the home-page, the archives and, via Matt Mullenweg’s Random Redirect WordPress plug-in, a link to a random page on the website - just for a bit of fun.

The next bit’s really neat — using a (slightly modified) script I found, WordPress breaks the erroneous URL into its component parts (ditching the domain fragment) and uses those parts as keywords for a full-text search of all my published pages and posts. It then presents the reader with a list of page titles that might be what they were looking for in the first place. Granted, it’s a long shot, but they just might get lucky and, even if they don’t, it exposes them to a selection of my content that they might otherwise have missed.

Updated, 4th November 2008: You may not have full-text indexing configured in your WordPress database. In order for the full-text search to work you’ll first need to issue the following command to MySQL:

ALTER TABLE `wp_posts` ADD FULLTEXT `post_related` (`post_name` ,`post_content`);

To draw the reader’s attention to even more content, I also display a list of my most recent posts with another PHP code snippet:

<h3>Recent Posts</h3>
<ol style="margin-left: 40px;">
<?php $postslist = get_posts('numberposts=5');
foreach ($postslist as $post) :
setup_postdata($post); ?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ol>
The options end with a link to my contact form so that the reader can send me an email if further help is required.

Bonus: While I was putting this together, I tried various combinations of URL in order to test the error handler and I discovered something rather neat in the process. If I enter a URL that doesn’t directly match one that’s valid on the Urban Mainframe but that’s similar to another that’s unique, then WordPress automatically redirects to the other rather than respond with a 404. For example, if I enter the non-existant URL http://blog.urbanmainframe.com/insight/ then WordPress automatically redirects to http://blog.urbanmainframe.com/2008/08/insight/ — that’s pretty cool!

It goes without saying that I want as few visitors as possible to see my 404 page but, for those unfortunate souls who do arrive there, I hope that the options available will help them on their way and hopefully keep them on my website longer than they would otherwise have stayed.

What do you think? Is there anything I can do to improve the page further? What’s on your 404 page? Let me know in the comments.

I must confess that I am an addict. I have become addicted to creating computer-generated images. Having recently posted about Processing and Oxidizer, I have found another image generator called “Context Free.”

Context Free “is a program that generates images from written instructions called a grammar. The program follows the instructions in a few seconds to create images that can contain millions of shapes.”

Creating images with the software is a piece of cake. One can download from a gallery of “grammar” files or create your own scripts. Downloaded scripts can have their output modified by entering a three-character code into the Context Free application, leading to millions of permutations of the work.

It’s a fascinating program to play around with and some of the output is simply stunning.

Best of all — the software is free, open-source and is available for Windows, OS X and various flavours of Unix.

The promise of advanced fabrication technology that can copy itself is a truly remarkable concept with far reaching implications.

Imagine having a machine hooked up to your computer that’s like a printer only, instead of printing in two dimensions on paper, it “prints” in three dimensions by building up layers of plastic.

Imagine that this same machine is able to reproduce 60% of the parts required for its own construction. So that it can, in effect, almost reproduce itself — save for a few electronic components and a selection of nuts and bolts.

Imagine being able to design, on your computer, a widget that you can then immediately manufacture a prototype of — in the comfort of your own home!

Imagine the material costs of this machine to be only around €500 and that the plans for its construction and the software to drive it are available free of charge and licensed under the GNU General Public License.

Is this science fiction? An impossible fantasy?

You might think so. But you’d be wrong. Such a machine exists and it’s called RepRap (Replicating Rapid-prototyper).

Researchers at the University of Bath in the UK have designed and built such a machine and, in what might well turn out to have been a truly historic moment, on the 29th May 2008 the RepRap achieved self-replication.

[RepRap] has been called the invention that will bring down global capitalism, start a second industrial revolution and save the environment…

I think this is absolutely amazing. I’d love to have one of these at home. I can think of so many circumstances where it would be handy to make a little widget at short notice. The RepRap guys tell us that the next version of the machine “will be able to make its own electric circuitry - a technology we have already proved experimentally - though not its electronic chips. After that we’ll look to doing transistors with it, and so on…”

Where does this end? Will my children and future generations simply download files from the Internet and produce their own goods on demand? How would this affect the market economy? Is this beginning of the end of the manufacturing industry or, as The Guardian newspaper proclaims, the dawn of a new industrial revolution? The sociological, political and economic impact of this is surely massive. Imagine what could be achieved in the Third World with manufacturing at this level…

Whatever the future of the RepRap machine and its descendants, I’m certain it’s going to have major repercussions on our way of life once it gets out of the lab.

A quick Google led me to the free OS X software, Oxidizer. A few minutes of experimenting and I was soon creating great fractal images of my own.

It’s great fun and I highly recommend you give it go. Post your best images in the comments.

It’s that time of year when the trees turn golden, the sun stays close to the horizon and the early morning mist rolls down off the hills. That’s right folks, autumn is here again (fall for our American friends). The days are getting shorter and the nights longer and you’re likely to spend more time indoors than out.

In short, it’s the perfect time to “reboot” your weblog with a new design or feature set. Why not take inspiration from nature’s glorious autumnal colours and refresh your website. To help you along the way, I’ve put together this little list of website design “thingies” that you might want to integrate into an autumn reboot.

The Unstandard WordPress theme is designed to break the standard inverse chronological weblog design. An eye-catching theme, Unstandard is based around a image-based front-page that is sure to set your weblog apart from the crowd. Kick off your autumn reboot in style.

CSS Decorative Gallery: Decorate images and photo galleries without editing the source images. Thumbnails will never be the same again.

From a usability point-of-view Safari’s input field highlighter is a neat touch, providing much needed visual feedback on focused form fields. From a designers point-of-view it’s a nightmare. The glowing blue highlight spoils your carefully crafted embedded web forms, looking particularly grim on non-rectangular designs (and blue is not an autumn colour). The Removing Safari’s Native Input Highlight tutorial eases your pain by explaining how to remove the blue glow, remember to provide an alternative visual cue for field focus though!

Vibrant, realistic background images are becoming a new trend. In their “Textures and Patterns Design Showcase” article Smashing Magazine explains how to create a tile or pattern for your website. They also showcase a large selection of websites that have already deployed a textured pattern as their background.

Textures or patterns not to your taste? Try a large photographic background… pure eye candy.

When you’re looking for an exciting way to display your multimedia content, slideshows are always a good choice. Here’s a selection of 10 cross-platform, absolutely stunning slideshows, carousels and sliders, based on Mootools, JQuery, Yahoo! User Interface, and Script.aculo.us.

Beautify your <hr /> line: The <hr /> line is an often neglected element in today’s web design. Recognising this Smashing Magazine recently ran a <hr /> design contest and were gifted with more than 1200 submissions! The very best of these are available for integration in your own website from the <hr /> Contest Results page. Go on, treat yourself (bonus points for creating an autumnal <hr />).

You may have noticed that the most appealing websites are usually those with the most beautiful imagery. You can spice up your website and increase its “stickiness” by introducing breathtaking photography or computer graphics to your prose.

But what if you’re not the next Ansel Adams and your digital images are worse than the works of art you produced in infants school? Have no fear, follow the 25 Amazing Photoshop Drawing Tutorials and you’ll be leading the digital imaging renaissance faster than you can say “computer graphics God” (Disclaimer: Okay, I’m not promising miracles here — but the tutorials are really, really good!)

And whilst we’re thinking of Photoshop and our autumn reboot why not spend some time working through 40 Photoshop Tutorials on Rain Showers and Water Drops? If nothing else, all these tutorials should keep you occupied right through autumn and perhaps even winter!

There are a few special techniques or effects that can spice up just about any web page. These are the top 20 Ajax effects that every web developer should know about. They’re essential parts of any web developer’s toolbox. If you haven’t seen them yet, you no doubt will in your future web development endeavors.

Retro and vintage web design styles are the new black. Why not consider an “old fashion” redesign for your website? Smashing Magazine jumps into the fray once again with their highly inspiring article “Retro and Vintage in Modern Web Design”. Discover the secrets of vintage and retro designs and take inspiration from their showcase of websites that have employed the retro motif.

UPDATED 15th October, 2008: See also “35 Beautiful Vintage and Retro Photoshop Tutorials.”

And finally… if you’re going to consider an autumn reboot, why not go the whole hog and take your website into the depths of today’s cutting-edge website territory? The Web 2.0 Design Style Guide will show you the way.

Have you rebooted your website for autumn? Let me know in the comments.

All photos were taken with my Nikon D80 DSLR camera. The lenses used were the Nikon 50mm f/1.8 D and the Nikon 18-70mm f/3.5-4.5 AF-S DX. I also used the Nikon Speedlight SB-600 flash unit both on-camera and as a remote slave. I shot exclusively in RAW and post-processed all photos with Aperture on my Apple Power Mac G5. A handful of photos were further processed in Photoshop for various effects. Click any photograph to view an enlargement.

We begin with the obligatory portrait of Rachael taken once the hairdresser had finished doing her thing. Doesn’t she look gorgeous?

I absolutely love this shot. A candid portrait of Rachael taken during an unguarded moment. I think she looks stunning here but, of course, I’m biased — she’s my baby sister after all!

Darren and Rachael hired an enormous stretched Hummer limousine for the event. Rachael hit the champagne once we got under way (and I could tell that she really enjoyed it too).

Another portrait of the beautiful bride, an entirely unposed one too.

Rachael walks down the aisle on the arm of her stepfather, Terry. He looked so proud that day!

Darren and Rachael make their vows. The wedding was a civil service but nonetheless this was a special moment and one that I will cherish for the rest of my life.

Rachael signs the register with Darren by her side. Along with converting this shot to black & white, I also added the vignetting and grain with the Totally Rad! Action Mix in Photoshop.

Another portrait of Rachael and the wedding register. Again I’ve applied some effects with the Totally Rad! Action Mix.

Darren and Rachael are finally man and wife. Here they are walking down the aisle as they make their way to the wedding reception. I converted this shot to black & white and bumped up the contrast for added impact.

The bride and groom look lovingly into each other’s eyes. You only have to spend a short time in Darren and Rachael’s company to see the depth of love they share. For my part, I’m delighted to see my sister so happily married and I will never forget the priviledge of sharing that special day with her and her husband.

I wish you both the very best for your future life together and I look forward to celebrating many happy anniversaries with the two of you.

flickr Panda: More flickr goodness!