Really, just top notch.

It’s hard to believe it’s been nearly a decade since I came here from Edmonton and I actually can’t remember if I ever intended to stay in BC this long. I’ve met and befriended some truly awesome people (@justinlove, @xer0x, @adamtindale, @rossangus just to name a few) and as I’m preparing to hit the road for life 3.0 in Calgary I thought it would be a good idea to recap a bit of the last few years to see what got me here in the first place…

Part 1: My Short-lived Career in Broadcasting

I moved to BC in January of 2001 for an internship at CIFM in Kamloops which, after about a month, took an unexpected detour to Prince George when I was offered a job as a radio copywriter at CKKN/CKPG. It was an interesting enough job but it paid horribly (barely enough to pay student loans and rent) but it led to what I would still call the sweetest gig I’ve ever had – writer/producer in PGTV’s creative department.

Television was pretty different from radio… mostly because it was profitable. My client list was about half as long as it was in radio and instead of producing 3-4 spots a day I produced 3-4 spots a week. And it wasn’t just less pressure, it was a lot more fun.

But after about a year of hanging out with our video editors I decided that I had to learn more about video (Mike Clotildes and Mick Harper, thank-you!) and applied to University of Victoria’s Visual Arts Department. I still have a passion for video and continue to work in the medium as an artist, but a funny thing happened on the way to my Visual Arts degree: the web came of age.

Part 2: Life Online

While at UVic I worked at the Fine Arts Faculty’s Studios for Integrated Media helping students with multimedia projects and the like. One day my boss asked me to take a shot at redesigning a few websites. And it was pretty much the coolest thing ever. I started off mucking around with html and this newish thing called ‘CSS’ and soon enough had two major successes under my belt; the site redesign for my own Visual Arts Department and also for the Theatre Department (which is still live five years later, check it out!)

Soon enough I was doing contract work populating sites, designing layouts and getting my hands very, very dirty with php, javascript and css/html. Before long I was hacking ridiculous things together with stuff like Gregarius, Serendipity, Gallery and Broadcast Machine. I was particularly in love with RSS (and still am). Later I caught on to Wordpress and Drupal, found jQuery and finally fell head over heels for front-end development.

I’ve never looked back. I’ve been lucky to work for great studios with amazing designers that love the web as much as I do, most recently at Veratta in Vancouver and before that with Trapeze in Victoria. Nothing beats working with creative people who love what they do.

Part 3: #YYC (aka. Calgary)

As unpredictable and frustrating as the web can be, I feel it is the most rewarding and exciting medium to be working in today. It is entertaining and inspiring and growing exponentially year by year. Almost every day it seems like we’re reinventing ourselves, improving how we work and most importantly, sharing our tricks, stories and success with each other. It’s frickin’ great.

So the final question is, why leave? Well Vancouver is heinously expensive for one. But mainly we’re moving so that my partner can pursue her teaching career – something that is at this time nearly impossible to do in Vancouver. An added benefit of moving to Calgary is to be closer to family which as we all know starts to gain importance as you get older. And I actually feel like I’m bringing a lot of the best stuff about BC with me anyway, because 99% of the people I consider close friends will still be there via Twitter, Facebook, Flickr… the list goes on and on. And I’m pretty sure that whenever I come back to the coast we’ll sit down over a pint and start catching up — not from when I moved away — but from when we last shared a story.

First off: my requirements. On a daily basis I’m editing/creating/writing graphics, php, css, html, working on multiple local machines as well as different servers running all kinds of web apps. I swore off windows years ago (although I do agree that windows 7 is looking more human-like) so my preferred platform is a mac running os x. I also edit a lot of text and images, use ftp, create pdf’s and other documents.

Dropbox [storage]

Dropbox syncing is just too good to be true. Flawless and effortless sharing and syncing between up between computers, 30 days of backup and restore.. blah, blah, blah it’s awesome. And the first 2gb are free. Get it.

Related: I also use dropbox to sync Things (task management), Snippet (snippet library), Sidenote (note taking app, free)

Photoshop/Illustrator [graphics]

I wish it weren’t so. It seems awful and wrong that it’s the beginning of a new decade and I’m still using a sledgehammer to pound in finishing nails… the metaphor won’t be lost on anyone that has to deal with the behemoth adobe suite for creating and editing graphics for the web. A few things are on the horizon though — Pixemator and Inkscape have been gaining ground. Here’s hoping the Adobe cartel won’t be with us when the next decade comes around.

Coda [text editor]

Coda is an integrated text editor, ftp, subversion, terminal app with extensions and even with all that it seemed a bit pricey for me at first. A year later all I have to say is that Coda is a hell of a bargain at $99.

Related: Coda is definitely a swiss army knife but even swiss army knives need help from time to time. I backup coda with Smultron (basic text editor, free), CSS Edit (CSS editor by MacRabbit) and Cyberduck

Firefox [browser/development]

Ask me in a few months when xmarks is compatible with Chrome and I might have changed my mind — but for development work I don’t see anyone bypassing firefox any time soon. The built-in inspector in Chrome and Safari is pretty slick, however at the end of the day firebug still has my vote. Syncing across multiple machines is a snap with xmarks, which also supports pretty much every browser these days.

Google Docs [word processing]

It’s simple, it’s fast and it’s everywhere that I need it. Google Docs could easily be overtaken if they don’t keep up with the feature sets of new and upcoming office apps, but as a hardcore gmail user I don’t know how much anything would affect my usage of Docs.

Related: Spreadsheets are still totally useless in Google Docs. And although it is shameful, I still have to use one Microsoft product — Excel. It’s functions are very useful for manipulating tabular data especially for those massive Drupal imports! I haven’t had the chance to try out Numbers but I’ve heard it’s mostly just good for the graphs.

I’ve seen a few people on drupal.org how to implement Facebook Share and asking for modules, etc. However with the share widget provided by Facebook it’s really very easy to implement FB Share at the template level. To make it really easy, use CCK.

Step One: Get the Widget

To start off, FB provides you with this code in their widgets section

<a name="fb_share"></a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"><!--mce:0--></script>

Which gives you a little widget on your webpage that looks like this,

That’s pretty quick and easy. Using that bit of javascript you’ll get a little FB button that you can stick basically anywhere on a page (or, more precisely in your node.tpl.php file) and when the user clicks it, they’ll be prompted to login to facebook (if they’re not already) and then they can share your link on their wall. FB is pretty good at scraping pages but if you want fine tune control over what image and what text is displayed with your link you need to go a step further.

Step Two: Take Control!

As an example, this is the code I added to my page.tpl.php template right underneath my <title> tag:

I’ve made references to three variables here; $title is just the title of my page, $node->field_fblink_teaser[0]['safe'] is a CCK field that I’ve created which allows users to specify a meta description of their page and lastly $node->field_fblink_image[0]['filepath'] is an image that user uploads that is used to create a thumbnail for the FB Share wall post. I’ve defaulted this image to 100×100px since that is what FB seems to like. For more info on linking different kinds of media including audio and video, check out this page. Although there are no guidelines given anywhere else, FB does actually have minimum/maximum sizes for images, so if you’re image isn’t showing up try changing the dimensions.

In the end you should end up with a wall post that looks like this,

Disclaimer: I don’t advocate using Facebook. For anything. It’s a popular platform and website, yes. But you should be aware that Facebook likes to change their rules, often without warning. It can be a bit of a nightmare for developers. That said, Facebook Share is relatively low-impact though (all authentication takes place via facebook) and that makes it quick to implement.

Recently I was asked to summarize the parts of a drupal theme. I came up with the following semi-literate guide to my own theme framework, sp0xx6 for Drupal 6. This is not a very technical guide but I think it’s none the less important to document my perspective, especially for newcomers to drupal who are having a hard time with the way information is presented on drupal.org.

Please note: The text below makes reference to a set of theme files for Drupal themes. That theme is sp0xx6. You can download sp0xx6 from google code. For free. To keep. Forever. Drupal rocks! Thanks to everyone on drupal.org that makes my life easier and more interesting.

.info

The .info file registers your theme with drupal along with your theme’s regions (area’s content appears in) your CSS and javascript.

template.php

Your template file allows you to customize practically everything in your theme. You can rewrite the appearance of forms, lists, links, taxonomies and add all sorts of functionality.

node.tpl.php

Unless you have a separate node template defined (as with node-gallery.tpl.php), every content type will use the default node.tpl.php file to render the contentof each page.
The node template is made up of two sections, the teaser and the main template the teaser is usually used in lists and the main template is used when you are displaying the actual page your node is located on.
The teaser section is optional, it simply provides another way to render the shortened layout of your template.

Main $components of node.tpl.php

$teaser — the teaser format of the node, can be customized and manipulated
$title — title of your node
$submitted — user that submitted the node followed by published date
$content — the content of the node body
$terms — taxonomy terms assigned to the node

page.tpl.php

This is a crucial part of the theme, but most of the components of this template are actually quite arbitrary. This is one of the reasons I really like Drupal — you can use plain html/css to do just about anything to a page before you get drupal to load some content in it. To function properly the page template requires the following pieces,

$head — prints meta tags and other important stuff
$styles — prints all styles from your .info file and Drupal modules
$scripts — prints all javascript, including your script.js (see below) and Drupal module scripts
$content — prints node content
$closure — prints everything in the footer of your page (it’s easy to miss so check twice!)

Other notable pieces,

A few custom regions (defined in .info and can be placed into content-type templates),

$left, $right, (left & right are defined by default in drupal) $content, $header, $footer, $precontent, $content, $subcontent, $mainnav, $subnav, $searchbox

page-front.tpl.php (not included in sp0xx6)

Page-front is the default frontpage template for Drupal. This page will automatically override your homepage unless you have specified a different page in your theme settings. sp0xx6 does not include this file, but you can simply duplicate page.tpl.php and rename that file to create your own front page for drupal. After you rename the file you can customize it with whatever markup you like and it will only change your homepage.

script.js

Contains all of the javascript stuff you need for your regular templates. Other js elements can be added on a case by case basis using drupal_add_js (http://api.drupal.org/api/function/drupal_add_js)

search-block-form.tpl.php

An optional template that allows you to modify your search form.

style.css

This is the main stylesheet of your theme and will be included with every template. You can add additional styles to specific templates with drupal_add_css (http://api.drupal.org/api/function/drupal_add_css/6) You can also add other css styles in .info

Custom node template example –

node-gallery.tpl.php

node-gallery.tpl.php is an example of a content type called “gallery” that has an image gallery built into it using CCK image fields and the imagecache module that is presented in lightbox form.

In the template you can see that the field_imagefile cck field is rendered as thumbnails using the gallerythumb imagecache preset.

pl00 is a minimal theme that is easy to customize

Why did I create pl00? Because I was sick of digging through lots of code to make little changes to the stock themes provided with wordpress. pl00 uses a tiny bit of css, most of which is from my lightweight stylesheet template called ‘lifto’. I can’t take all of the credit for pl00 though – the tabs are straight from the grandmaster himself, Doug Bowman.

keywords:
fixed width, three columns, valid CSS, valid XHTML, white, simple, widgets, widget ready, 3columns, right sidebars, SEO friendly, gravatars, hover effects, text-only (well, mostly text-only).

Here are some extra vanity shots of pl00 on flickr. Sexy!

Download pl00.zip from wordpress.org.

Taxonomy Quick Find
“This module provides a set of blocks which show ‘related’ content based on a selected term.”

http://drupal.org/project/taxonomy_quick_find

Home Box
“Home box allows your users to have a page that behave the same way as iGoogle, Netvibes or BBC.co.uk.”

http://drupal.org/project/homebox

Autosave
“The autosave module automatically saves a snapshot of your content type form using AJAX. If the user’s browser or machine dies while editing a node; the edits will be presented to the user the next time they return to the node.”
http://drupal.org/project/autosave

Popups API (Ajax Dialogs)
“API for building modal ajax dialogs.”
http://drupal.org/project/popups

Watcher
“Watcher offers your site’s users, registered and anonymous visitors, a way to easily watch nodes for changes and new comments without having to post themselves.”
http://drupal.org/project/watcher

]]> http://blog.atworkinthecloud.com/2009/06/drupal-ajax-plugins/feed/ 0 http://blog.atworkinthecloud.com/2009/06/things-that-have-impressed-me-lately-0-10-2009/ http://blog.atworkinthecloud.com/2009/06/things-that-have-impressed-me-lately-0-10-2009/#comments Thu, 11 Jun 2009 05:32:08 +0000 admin http://roguescience.org/robotoverlord/cloud/ablog/?p=312 Drupal forms are awesome, until they suck and then there’s always
http://www.lullabot.com/articles/modifying-forms-5-and-6

The sugary sweetness of the media temple knowledge base
http://kb.mediatemple.net/

Simon Schama’s A History of Britain documentary series
http://en.wikipedia.org/wiki/Simon_Schama%27s_A_History_of_Britain

A site that catalog’s all of the very best SMS messages that people send
(864): sometimes i wish i was able to text my cat and tell him i miss him and that i’m thinking about him
http://www.textsfromlastnight.com/ (Warning: NSFW) via @creativestable

But Cantos was just the start of the week — we went on to open Grand Theft Bicycle at the Stride Gallery on Friday night. I have some shots of the opening up on flickr, but they’re not the best quality. Hopefully some one will share their pictures on facebook or something. GTB will be showing at Stride until June 20th so if you live in Calgary get your ass off the couch and go try it out.

Upcoming Shows

May 22, 2009 – Art Crawl at VISA with Jackson 2bears
May 30, 2009 – Exploding, Plastic & Inevitable at Computational Aesthetics (the ‘Large Room’ at the  Delta Victoria Ocean Pointe hotel in Victoria)

Stride Gallery
http://www.stride.ab.ca

Cantos Foundation
http://www.cantos.ca