factor[e] :: on the floor

Making a stand at factor[e]

Thu, 09 Feb 2012 12:22:00 -0500

Oh so many punsibilities with this little bit of news.

Over the past little while we've been reading a lot about the merits of standing all day vs. sitting all day. The general gist of most of them being that sitting will kill you. I really don't think it's all that bad, but given my amazing ability to slouch and *incredible* posture I figured it might be a good idea.

So, with Marc being the driving force and Martin (literally) standing in as our case study Marc and I have just set up our first standing desks.

It's only been a few hours, but the first thing I've noticed is how much more alert I feel. I've also noticed I need better insoles.Either way I'm starting to get into this. We'll post updates and let you know how it goes.

And in case you were wondering, everyone else in the office thinks we're crazy.

Here's a little bit of reading if you're at all curious:

Sitting is Killing You: The Truth About Sitting Down [Infographic] - This is a little dark, but it's an infographic so I enjoyed it more than all those articles with words.

Are You Sitting Down? Why Standing Up Might Save Your Life - A bit of history, a bit of information and a few links to other articles that have been written.

Some science for those who only trust scientists:
Physiologists And Microbiologists Find Link Between Sitting And Poor Health [Video]
Sitting May Increase Risk Of Disease
Role of Low Energy Expenditure and Sitting in Obesity, Metabolic Syndrome, Type 2 Diabetes, and Cardiovascular Disease

Also, try Googling "treadmill desk" or "cycling desk" for a few more energetic approaches to not sitting at work.

Hamilton Wins 4 EDCO Awards

Fri, 03 Feb 2012 12:10:00 -0500

Hamilton Economic Development (EcDev), the city's economic development division, collected four awards at the Economic Developers Council of Ontario (EDCO)'s annual conference last night.

Of those four awards, we're all very proud and honoured to be a part of three of them!

Last year, we worked closely with EcDev to design their award-winning website which took home the award of 'Best Economic Development Website'.

We also designed their 2010 annual report titled 'One Billion', which took home the award for 'Best Annual Report'. The book was titled 'One Billion' to reflect 2010 as the first year in which $1 billion was invested in the City of Hamilton. The book also featured the brilliant architectural photography of Dan Banko.

We were also part of an award-winning ad campaign with both EcDev and Maple Leaf Foods.

We'd like to officially congratulate EcDev on their successes last night. They are doing wonderful things for our city and it's been nothing but a pleasure working with them. We're on for another year as agency of record and we're all looking forward to being part of building up our city and telling the world how great it is here in Hamilton.

Today's article in the Hamilton Spectator
The post on EcDev's site

Furor Over Working Conditions At Apple Suppliers Is A Risk Of Globalization

Fri, 03 Feb 2012 07:19:00 -0500

The public relations nightmare that Apple is experiencing over working conditions at its suppliers is the result of the tension between its marketing and its image, and reality. It shows what happens when market forces in one country clash with market forces in another.

A report in the New York Times about working conditions at Foxconn and other Apple suppliers in China has triggered petitions for 'an ethical iPhone 5' and calls for a boycott of Apple products.

Apple has an extraordinarily good public image, and stories like these represent a significant risk to the Apple brand. It didn't take long, however, before people started to push back.

One of the most widely-cited counter-arguments is a piece called The Apple Boycott: People Are Spouting Nonsense about Chinese Manufacturing. In it, author Tim Worstall argues that workers in these factories enjoy a better working experience and overall standard of life than most Chinese workers, that suicide rates among Foxconn employees compare favourably against the Chinese national average, and that the incidence of serious injuries and fatalities at these plants compares favourably against the rate of accidents at American factories.

In fairness to Apple, much of this may be true. It is also true that these suppliers supply not just Apple but most of the major electronics companies, including Apple's most significant competitors.

At the same time, one cannot argue that working conditions are far different from what Westerners take for granted. In the Times piece, we learned that workers commonly work twelve-hour shifts, six days per week (and sometimes seven); that they live in crowded dorms with up to 20 people per 3-room apartment on-site at the factory; that riots have broken out over working and living conditions; and that some workers say they "stand so long that their legs swell until they can hardly walk". All this while performing intensely repetitive tasks at astonishing speed.

Worstall's response is blunt:

Well, yes, they’re poor people living in a poor country. That’s what being poor means, having to work extremely hard to make very little. Yes, that is a harsh thing to say but then reality can indeed be harsh.

No one can deny that reality can be harsh. At the same time, its undeniable that Apple - and, of course, the other electronics companies - does not truthfully convey that reality to its customers. Doing so would not be in Apple's best interest. However, if the calls for a boycott succeed, it would demonstrate that having this tension between reality and image is also not in Apple's best interest.

Worstall goes on to make the standard corporatist argument that the behaviour of corporations is outside of their control, because they are subject to market forces. For example:

Wages paid to manufacturing workers in China are not determined by the productivity of those specific workers. They are not determined by US wages, by the profits that Apple makes nor even by the good intentions of the creative types that purchase Apple products. They are determined by the wages paid by other jobs in China and that is itself determined by the average level of productivity across the Chinese economy.

But Apple is made up of humans. It is not a windmill that turns whichever way the winds of the Chinese labour market happen to blow. It is not humanly impossible to demand that a supplier adhere to higher standards than are prevalent in the rest of China.

Setting that aside, let's examine the issue purely from the standpoint of the marketplace, but rather than looking at the Chinese labour marketplace, let's look at the consumer goods marketplace in the West.

Humans respond to a variety of different factors when making purchasing decisions. It is not just about price and quality, but can also be about morality and emotion. In this instance, Apple's customers may be persuaded to boycott Apple because of these subjective factors.

That may seem unfair to some, but isn't that just a risk of globalization? After all, a global company must deal with market forces everywhere it operates: both market forces affecting who makes its products, and market forces affecting who purchases them.

Apple will be forced to balance these market forces, and when it does so, it may result in lower profit margins but better working conditions at its suppliers' factories.

Seen from this perspective, what is happening to Apple's image could be dubbed a market correction. Proponents of globalization should be pleased.

Reversible Rails Generators

Thu, 02 Feb 2012 16:07:00 -0500

In order to help us develop our sites more efficiently, we use some custom Rails generators, particularly one that creates a scaffold hand-crafted for our purposes. After generate-ing a new scaffold incorrectly, I destroyed it. I noticed, however, that one of the steps in the scaffold had been duplicated during the destroy, rather than being reversed. Hmm, how to fix that?

First things first, when you run a generator (either by invoking it with generate or destroy), every method is called once. So, the secret to creating a reversible method is in discovering how the generator was invoked. After doing a ton of Googling, then reading the Thor documentation and source code, I found out that you just need to check self.behavior inside the method, and tailor the code depending on the return value, like this:

def do_some_stuff
  case self.behavior
  when :invoke
    # do that stuff
  when :revoke
    # undo it!
  end
end

Bam! Reversible generator.

Bonus tip: One of the methods I wanted to reverse required some user action once the method had run. You can output coloured output from the method by using the say method, and passing it the string and the colour. To save you the googling, source code reading and head-scratching, you specify the colour like this:

say "WTF?!?", :red

Sponsoring Chocolate Fest: a yearly tradition at factor[e]

Fri, 06 Jan 2012 16:41:00 -0500

factor[e] couldn't be happier to begin its eighth straight year sponsoring the yummy Chocolate Fest fundraiser for SACHA, Sexual Assault Centre of Hamilton and Area. SACHA is one of factor[e]'s oldest clients and we congratulate them on all the hard work and dedication they bring to this vital cause each year. Chocolate Fest is an elegant evening of chocolate treats from Hamilton's finest bakeries and restaurants. Mark your calendars! This year's event is on Thursday February 9th, 2012. Get your tickets and we'll see you there!

Tricks Of The Project Manager's Trade

Fri, 06 Jan 2012 12:12:00 -0500

Being a project manager means that I have to be on top of everything. If something gets missed or slips through the cracks, it's no-one's fault but my own and I hate making mistakes.

As in any job, trying to remember the things you need to do, when to do them, and what's involved can be taxing at the best of times. When that's ALL your job entails, you have to figure out little tricks to help you along.

Post-it Notes

There is one thing I can't live without – in work and in my personal life: Post-it Notes. I love them! I love the different sizes to accommodate the length of the note and the colours to code different things accordingly.

Some have lines, some don't, but they all do their job 100% effectively: they keep me in-the-know. Admittedly, I use too many of them, but when you need to write things down as often as I do, they ensure things don't get missed.

A Paper To-Do List

The next love of my life is my to-do list. It keeps me in the loop on where things are at and what I need to do. I like to reward myself for getting things done, my inner geek comes out and I put little checks beside each item so when I'm finished the task, I can have a moment of victory when I get to literally "CHECK!" another thing off my list.

I also categorize my list into two sides. One side is for updates from the team - things I'll need to know that I may have to update people on. The other side is Tara-specific: items I need to personally take care of.

I like reflecting on this list often. I find the more I look at it, the more things I can think of that I will need to do now or later on. It helps me be proactive, and the more I learn the industry and the services we provide, the lengthier my lists get.

Reflection is really a key part of good project management.

Online Task Reminders

An extension of my to-do list is my online task reminder in Highrise. This is email-specific. Every time I read an email that requires me to follow up on something or light a fire under a colleague or client's toes, whether it's today, this week, this month or 6 months from now, I track it in my online system and set a reminder to pop up.

I always set it a few days in advance if it is something that requires relying on someone else. That helps avoid delays. Keeping things on time helps build trust with clients and coworkers.

And finally, I bring a pen and paper EVERYWHERE! I have them in my car, in my purse, and numerous places in my home. My desk is covered in note pads and writing utensils.

You never know when you are going to need to write something down, and for me it's all the time. It doesn't matter what I am doing, random things will pop in my head about things I'll need to do, and if I don't write it down right then, they're gone as quick as they arrived.

I've never been one of those fortunate people that have the ability to remember everything without writing things down. I always tend to forget at least one thing, but these tricks really help me stay on top of my game, and ultimately help the team provide the best possible service for our clients.

Access vs. Ownership

Thu, 05 Jan 2012 14:48:00 -0500

Last October I subscribed to Rdio, a music streaming service that's available for iPhone. For some reason or another, after syncing my contacts and calendars and mail accounts, I decided not to spend time syncing my music. Instead, I opted to look for an alternative.

The service is $9.99 per month and after three months of using it I'm still very pleased with collection of music it has to offer. What's more is that it provides recommendations based on my listening history - allowing me to discover new music at no additional cost.

This inspired me to look at design-related services I use that offer resources in a similar way:

Google Web Fonts
Historically, web designers have been relegated to use standard display fonts (Arial, Verdana, Times, etc.) because they were commonly owned. Services like Cufon an Sifr offer ways to embed fonts into websites but still require the designer to own them.

Google Web Fonts is a directory of fonts that is free to use and can be easily accessed. You can pick a font and choose an embed method or download the file to use in a mock-up. The library is constantly growing and the service allows (and encourages) designers to contribute.

iStock Photo
Has anyone hired a professional to photograph an attractive girl in a headset for a company's contact page? What about to illustrate a yellow stick-man walking up a bar graph? Probably not.

Even though I do support and advocate the use of professional photographers and illustrators, it's hard to deny the low-cost accessibility of stock photography websites - especially when working on tight budgets.

However, because the images are so accessible, you may find that same girl waiting to take your call on a number of different websites.

jQuery
This open-source JavaScript platform provides developers a way to quickly and easily write plugins (or modify exiting ones) that perform a variety of functions. As a basic example, consider the commonly used image rotator.

There's no longer a need to write a custom script to achieve such a simple effect. You can access the base script through download or Google API and customize it by using plugins or changing settings.

As a designer, I appreciate the accessibility of libraries like this because it gives me something to design for. Looking through tutorials and demos, I'm able to create a design that suggests not only the layout, but also an effect that is triggered once an element is clicked or hovered upon.

There are many more examples than the ones I've cited above and I'm excited to see how media and software will continue to evolve to accommodate the way people use it. I'm not the first one to suggest that access will trump ownership, but I feel that it will become much more apparent in 2012.

My Holiday Reading List

Fri, 23 Dec 2011 11:53:00 -0500

This year, I'm all about maintainable code. Making it, turning old code into it, making sure it stays that way. I'm so serious about it, in fact, that I'm declaring 2012 to be "The Year of Maintainable Code". We'll see how well that holds up next December.

In preparation for MMXII:TYOMC, I've got a stack of reading material for my Christmas break:

Code Complete by Steve McConnell. Even if you've already read this book, take the time to read it again. This is one of those books that you can open at random, read the page and go "Oh yeah, that's a good idea". Awesome awesome awesome.

Refactoring by Martin Fowler et al. I just picked this up and haven't read it yet, but I'm looking forward to it. I've written my share of "legacy code" this year and I'm hoping this will give me some good advice on cleaning up the messes I've made.

The RSpec Book by David Chelimsky et al. Test, test again, test some more. I know it's possible to write bad code that still passes all the tests, but it's pretty hard to justify turning bad code into good code if you don't know that it still does the same thing it used to.

Eloquent Ruby by Russ Olsen. I'm one of those people that learned Ruby via Rails rather than the other way around. I wish I had read this book two years ago. Having said that, it's still a good read now, especially when you get past "The Basics". Super useful for helping you write readable, ruby-like code.

Best American Comics 2011 edited by Alison Bechdel. I'm not a robot; this one is just for the fun of it. My Graphic Novel Book Club is reading this one for January.

Merry Christmas! See you in 2012!

Apple Made a Mistake

Thu, 15 Dec 2011 15:49:00 -0500

Most designers have a little OCD in them, in one form or another. My OCD usually manifests itself while looking at UI elements, typefaces and icons. Today though, the unthinkable happened - I noticed a mistake in one of Apple's icons in OS X Lion! Wait, what? Apple, champion of usability, detail and design made a... mistake?!

Yup!

The error lies in the rendering of the Launchpad icon. While I do like the cute little rocket ship, I'm afraid that somebody at Apple seems to have looked over a small detail - the radial gradient. The gradient is supposed to represent a piece of lathe-turned metal, not unlike a volume knob on a vintage hi-fi, but I don't think it's supposed to appear over the rocket ship. To my eyes anyway, I think the rocket icon is mean to appear as if its been embossed into the metal surface and then painted gray. It looks like it should also be matte finish, but even if it were supposed to be glossy gray paint, an angled highlight would have worked better than the continuation of the radial gradient from the metal. I can't think of any other reason for this, other than it being an oversight.

Nonetheless, I've gone ahead and ammended this for you, Apple.

Recent Identity Work

Thu, 15 Dec 2011 14:23:00 -0500

We've been working hard on quite a few branding projects recently. We love it when we are able to implement the full identity package, which typically includes business cards, letterhead and sometimes more. Here are a few examples of our recent work.

Amazing Bed Race 2011

Thu, 08 Dec 2011 11:19:00 -0500

factor[e] likes to get involved in the community as often as we can. We sponsor charities and various other events to show we care about the health and well being of the people, businesses and organizations in the surrounding area. In September we had the pleasure of sponsoring the Amazing Bed Race, held in Burlington, Ontario, all the proceeds of which go to support the Joseph Brant Memorial Hospital.

This was our first year sponsoring this event and in addition to sponsoring, our Project Manager, Tara actually participated in the race. Tara organized a team from her local sports league, the Hammer City Roller G irls, and worked directly with the organizers of the Bed Race to ensure that there was ample promotion and hype built up in the months prior to the event. With the help of factor[e] – Tara's team raised over $500 for the cause, and next year we'll be striving for more. The Amazing Bed Race officials have always been very appreciative of the team's involvement. They are quite a crowd favourite – despite not being the winning team.

Factor[e] is a very proud to sponsor the team, and we look forward to continuing the support in the years to come.

Compiling libRETS On OS X

Mon, 05 Dec 2011 15:25:00 -0500

This is very technical information suitable for developers who rely on libRETS for parsing real estate transaction standard (RETS) data, which we do for HomeFinder. If this doesn't describe you, move along, there's nothing to see here.

Here's how we've managed to successfully compile libRETS on OS X. These instructions are for Ruby developers, because they install the Ruby versions of swig and so on, but it's probably pretty trivial to modify these for Python, etc.

On OSX Snow Leopard & Snow Leopard With MacPorts

Notes: I have not been able to compile librets 1.5.2 under ruby 1.9. librets 1.5.1 seems to work fine, however.

Get the libRETS source from here - we recommend 1.5.1, as we had issues with 1.5.2. And go get MacPorts, as well, of course. If you already have MacPorts installed, you might want to update it first with:

 sudo port selfupdate

Then:

 sudo port install antlr
 sudo port install expat
 sudo port install openssl
 sudo port install zlib
 sudo port install boost # Note:  I was getting an error compiling librets with boost 1.46.0_0.  It worked with 1.45.0_0 and 1.44.0_0.  To install an older version, you have to find one in the MacPorts repository, e.g. https://trac.macports.org/browser/trunk/dports/devel/boost/Portfile?rev=73885, download the Portfile, copy it to some place like /usr/local (won't work in one of your folders), then run sudo port install
 sudo port install curl +ssl
 sudo port install swig-ruby

Then, go to the librets source directory and:

 ./autogen.sh
 ./configure --disable-java --disable-perl --disable-dotnet --disable-php --disable-python --with-expat-prefix=/opt/local --with-boost-prefix=/opt/local --enable-shared_dependencies
 make
 sudo make install

Hooray!

On OS X Lion With Homebrew and Compilation From Source

UPDATE: there is a recipe in Homebrew for libRETS now, so before trying the steps below, try running brew install librets - that may do the trick without all this other nonsense.

Homebrew doesn't have all of the recipes we need, so let's start with what it does have:

 brew install antlr expat openssl pcre

More recent versions of boost will not work with libRETS, so we need to install an older version. This is actually a pain-in-the-ass, but hey, you didn't expect this to be easy, did you? So here's what you do. First of all, make sure that Homebrew has an up-to-date git repository:

 brew update

Go to Homebrew's folder (probably /usr/local) and type git status, you should see normal git output. Now we want to try and find a version of the formula for boost when boost was at version 1.45.

 brew versions boost

You should see:

 1.48.0   git checkout fa1c5b9 Library/Formula/boost.rb
 1.47.0   git checkout 57665ff Library/Formula/boost.rb
 1.46.1   git checkout d0bcc2a Library/Formula/boost.rb
 1.46.0   git checkout 0476235 Library/Formula/boost.rb
 1.45.0   git checkout c65892f Library/Formula/boost.rb
 1.44.0   git checkout a18c756 Library/Formula/boost.rb
 1.43.0   git checkout 3640fb9 Library/Formula/boost.rb
 1.42.0   git checkout c5d56bc Library/Formula/boost.rb
 1.41.0   git checkout 0ff5680 Library/Formula/boost.rb
 1.40.0   git checkout 928317d Library/Formula/boost.rb
 1.39.0   git checkout 271acec Library/Formula/boost.rb

So, commit c65892f is the one we want:

 git checkout c65892f Library/Formula/boost.rb
 brew install boost

If you want to revert back to the HEAD version of boost:

 git reset HEAD Library/Formula/boost.rb
 git checkout Library/formula/boost.rb

Now let's go install some stuff from source.

Download and install swig from http://sourceforge.net/projects/swig/files/swig/swig-2.0.4/swig-2.0.4.tar.gz/download

 tar -xzvf swig-2.0.4.tar.gz
 cd swig-2.0.4
 ./configure
 make
 sudo make install

Download and install zlib from http://zlib.net/zlib-1.2.5.tar.gz

 tar -xzvf zlib-1.2.5.tar.gz 
 cd zlib-1.2.5
 ./configure
 make
 sudo make install

Then, go to the librets source directory and:

 ./autogen.sh
 ./configure --disable-java --disable-perl --disable-dotnet --disable-php --disable-python --enable-shared_dependencies
 make
 sudo make install

Hooray!

Poorly Designed, Broken Websites Are Costing Canadian Corporations Millions

Sat, 03 Dec 2011 07:23:00 -0500

Last night I had an experience which once again emphasized the wretched state of websites developed by large Canadian corporations.

In this case, it's the website for Pizza Pizza, and all I was trying to do was order a pizza online.

If you're not from Canada, especially Ontario, you may not be familiar with this chain, but they're the market leader in Ontario with over 500 locations, and they're publicly traded. Their pizza is quite good, and although I typically prefer ordering from local independent restaurants, not all of them deliver, so Pizza Pizza works when you're in a pinch.

All in all, a big company with lots of money that provides a quality product: the kind of corporation that ought to have a really well-designed, well-executed way to order their product online.

How wrong I was. Here's my experience in a nutshell:

Arrive at website, click 'Order'. I'm told I have to create an account. Stupid move already: there's no good reason to require an account for online orders unless you're ordering an online membership of some kind, and requiring account creation has a marked negative effect on conversions. But I'm hungry and the kids are crabby, so I create an account.
Immediately after creating an account, I'm redirected to a page that says 'Session expired. Please login again.' Odd system, I think, but okay.
I log back in and I proceed to creating my order. It's not the most attractive interface, but it works. I've got all my toppings selected and ready to go, and I'm ready to proceed to checkout, when suddenly: "Session expired"! Again! This is after being on the website for all of four minutes.
Maybe that was just bad luck, I think - maybe their system expires sessions once every X hours and my session was at a bad time. Kids are screaming. Wife is asking me why I don't just call. "Hang on," I say. I start over. If I can just perform my order really quickly, maybe I'll be okay...
I start over, fill out my order at lightning speed, fill in my credit card information to pay online, submit the order, and wham, session expired, AGAIN. You have got to be kidding me! Now I'm thinking, "fool me once, shame on you, etc.", but the problem is that I had filled out all my credit card details and submitted them. So now I don't know if I was charged or not, and whether or not my pizza is on its way. Once again I login. I manage to find my order, which is "incomplete". I retrieve it, try to pay online, my card is rejected (probably because of the previous attempt, or something), so I choose to pay at the door, and finally, my pizza is on its way (which I pay for using the same card that was rejected online).

What an appalling waste of time. But I'm the kind of web developer that always point out website issues so they can be fixed, so I go and find their contact form and write out this helpful message:

Your website's session management is broken. I'm a web developer, and while placing an order (rapidly, I might add), I was told my session had expired four times! Including one time immediately after I submitted my order, complete with credit card information. You need to fix this, because it's costing you a lot of money. More details, email: EMAIL ADDRESS.

Helpful, right? I submit this form and I end up on on this page with this message: "Could not send email."

Their web developers are apparently so bad they can't even design a contact form that works.

Here's another example. We often shop at a local grocery store chain called Fortinos. (Side note: when you visit their website, it forces you to choose your location, starting with selecting your province - but they only have stores in a single province, Ontario, so what's the point of that?)

They process photos in the store under the brand PhotoLab. I've processed photos there since my early twenties (over a decade ago) and at some point, probably around 2005, they started offering online photo processing.

And it was excellent: really quite straightforward and easy to use, relying on just standard form uploads to get the job done. We processed a ton of photos through this service, and would pick them up at the grocery store, which was very convenient.

Then, in 2008, they "redesigned" it and switched to a Java applet, and it went from functional and useful to outright terrible. So terrible, that even as a technologically proficient web developer, I found it impossible to actually upload photos and place an order. Here's part of the email I sent to them about it in April 2008 (as always, I was trying to help):

I'm sure the developers of your new photo uploader applet worked hard, and as a developer myself, I almost hate to say this, but here it is anyway: your new photo applet for uploading photographs is terrible.

Previously, my wife, who is above-average when it comes to her computer skills and frequents all of the usual web applications you might expect (Yahoo Mail, Facebook, etc.), had no trouble whatsoever ordering photos online. She ordered lots of photos all of the time, particularly since we have a young baby who we photograph like crazy. Many visits to Fortinos for groceries also entailed picking up an envelope of photos.

Some time ago she started complaining to me that the uploader had changed and that she was having difficulty with it. As a result she has not placed any photo orders since Christmas. Today, I told her I would help her with uploading the photos.

I did not anticipate that it would be terribly difficult. I was wrong. The applet is slow. It's hard to navigate. The interface and behaviour is totally unintuitive.

For example, suppose you've uploaded 30 pictures (a difficult process), creating a paginated list of photos. Then you want to add them to your cart. If you hit Select All and add them, only the ones on the page where you've hit Select All are actually added, so when you go to your cart to specify quantities, many of the photos you are expecting are not there. However, if you choose Select All and then delete them, ALL of them are deleted, NOT just the ones on the page. This behaviour is contradictory.

I got some stock response from their support team, and we tried it a few more times in the weeks afterwards, but nothing changed. We started using a different, less convenient service, even though we didn't want to.

I checked back on their website a few months ago, and it was still the same, although checking it now, I see they've changed it again. Perhaps it's better now, but they kept their online service in this appalling state for at least three years, costing them untold amounts of money.

I see stuff like this on the websites of big Canadian companies all the time, and as a professional web developer who cares about producing quality work, this situation is totally unacceptable to me. I obsess about things like A/B testing how well a certain piece of text on a button works. These companies are producing websites that just don't work at all. It's crazy, it's embarrassing, and it's costing them millions.

Now, I know that in each of these cases, there are big back-end systems that have to dispatch orders, coordinate jobs, etc. Those systems are complex, I can't see them, and maybe they're really well-designed (although I wouldn't bet on it). But when it comes to the end-user experience, they suck, and they really need to get their acts together.

WIN Hamilton Goes Public

Mon, 28 Nov 2011 15:18:00 -0500

One of the Rails projects I worked on when I had just become used to coding in Ruby on Rails (after about a year) has gone public. WIN Hamilton "offers information on services that assist job seekers and the community to discover local employment, training, and upgrading programs".

I'm personally fond of this project for a couple of reasons. First, it's the first Rails project where I think I pretty much did everything right, and the result is a clean, maintainable codebase that drives a nicely functional application.

Second, we worked really hard on this to create a really easy-to-use, attractive database of services and service providers (Inform Hamilton provides a similar though much broader service, and although it's an invaluable service the design and usability leaves much to be desired).

Third, we (that is, the client, HTAB, and associated partners including us) managed to get broad-based participation from many service providers, ultimately creating a very comprehensive database.

Unfortunately, the public couldn't get any benefit from it, since all the information was accessible by service providers only. The idea was that service providers could use the service to help them refer clients. However, we've long seen the potential of opening this up to the public, and we've finally done so.

It's a specialized niche, but we're proud of the work we've done and we hope it helps some people.

Website Launch Update

Tue, 22 Nov 2011 10:30:00 -0500

Whew! We've been so busy creating new websites that we got behind with our announcements. We've piled up quite a few and here is just a sampling.

Great Lengths - greatlengthscanada.com

Great Lengths is the leader in the worldwide market of bonded hair extensions. This reputation is largely built upon the depth of extensive product R&D, and sourcing of the highest quality hair on the market. We wanted to produce a website that would showcase the company's creativity, vision and modern aesthetic. It was great working with the team over at Great Lengths and we are very happy with the end result.

Hockey Now - hockeynow.ca

Hockey Now needed a new website that could organize large amounts of content and media across multiple regions and leagues. We delivered on that while also integrating tools for social media engagement, providing a clear path to improved SEO, and creating a fresh new design.

McCallum Sather - mccallumsather.com

McCallum Sather Architects is a leading architecture firm based in Hamilton Ontario. When we first met with them it was immediately apparent that this team of architects is very focused on the future. They are heavily invested in sustainability in their design, and this extends to their business practices and community involvement as well. We designed a grid based layout for the site which allowed us to present a comprehensive view of the current activities of this forward thinking firm.

Kataya - kataya.ca

Kataya is a boutique on Locke Street in Hamilton, and kataya.ca is its new, stylish website. Featuring the designs of owner Zoe Zimmerman, this site has a large online catalogue with oversize, professional photographs. The site also provides plenty of styling views so customers know how to mix and match their new clothing. Kataya.ca is built with Forge, and incorporates its built-in blog, custom pages and e-commerce modules.

And that's not all! When you get a chance, take a look at these other sites we've done over the last while.

Hamilton Economic Development www.investinhamilton.ca

Comstock Canada comstockcanada.com

Momentum Fitness Club getmomentum.ca

Bioenterprise bioenterprise.ca

Judy Marsales Real Estate j udymarsales.com

Ontario Road Builders Association orba.org

Hot Run hotrun.net

Celli's cellis.ca

Ontario Home Builders Association ohba.ca

Rainbow's End Community Development Corporation rainbowsend.ca

An Instrument for Every Child aninstrumentforeverychild.ca

Wolsak & Wynn wolsakandwynn.ca

The Village thevillagetnd.com

Recent Rodman Hall Art Centre print publications

Tue, 08 Nov 2011 12:39:00 -0500

The programming at Rodman Hall Art Centre always challenges us to design unique print publications which document their wildly diverse contemporary exhibitions. Here are two recent gallery publications we produced for them.

Grudge Match - Graeme Patterson

This CD publication documents Graeme Patterson's imaginative sculptural installation and stop-motion animation. The exhibition also spawned an artists' wrestling performance entitled "The Main Event" at Rodman Hall for which we designed the poster and invitation. The CD pack includes a 12 page booklet.

The Main Event - Poster and Rack Card Invitation

Theatrum Mundi - Catherine Heard

Catherine Heard is known for her sculptural work depicting things both monstrous and wondrous. Her installation Theatrum Mundi transformed the rear bay window wells of Rodman Hall's historic mansion into her own cabinet of curiosities. We designed this publication to function in part as a documentation of the installation as well as an element of the piece itself. We created a 40 page book with an original cover printed in gold ink on a velvety tactile deep brown paper stock that evokes an earlier era of fine craft. On the inside cover is a printed reproduction of a portrait of the Bearded Lady whose image resided in a drawer of the actual cabinet. The card was printed separately and die cut with scalloped edges. After the book and cards were printed and delivered, the artist added the "Genuine Souvenir" and inserted the card into the precut slits on the inside cover of the book by hand. This Artist Multiple provides an opportunity for the gallery visitor to carry home a piece of the curious world they've encountered inside the cabinet.

Local Not-For-Profit's Take A Multi-Disciplinary Approach

Thu, 20 Oct 2011 15:32:00 -0400

Over the years factor[e] has worked with many not-for-profit organizations to help get their message out. Recently we successfully completed two such projects for Hamilton's Sexual Assault Centre (SACHA) and the Hamilton YWCA.

SACHA's Workplace Harassment Training project uses a multidisciplinary approach; namely video and print to promote this important new service offering. From start to finish we produced a video which was loaded onto a custom flash drive. The drives were intended as giveaways to SACHA's target audience and were attached by a tiny ball chain to a printed hangtag that provides information about the program. In addition we produced two other info cards; one handout and one mailer. The flash drive housing was made of high density recycled paper and was screen printed on both sides.

Similarly, the Hamilton YWCA wanted to come up with an eye catching promo package for their "Women in Skilled Trades" program. The program offers specialized training to women interesting in pursuing a career in the skilled trades. The package consists of a unique printed cross fold brochure design which folds to a compact 3.5" x 3.5" size. When the piece is fully opened, the reader will find a QR code that directs potential students and employers to the YWCA website to view the accompanying video that completes the promo package.

In general not-for-profit organizations need to work within very tight budgets, and it is always rewarding when we can produce a successful piece within these constraints. These are just two examples.

We're presenting at DemoCamp tonight

Wed, 28 Sep 2011 11:19:00 -0400

Martin Eckart and Adrian Duyzer are presenting at DemoCamp tonight.

We'll be showcasing HomeFinder, the real estate search website we redesigned and relaunched a few months ago. HomeFinder is part of the family of Metroland Media websites and is, quite frankly, the best way to find a home.

We'll be discussing some of HomeFinder's internals and discussing how to present a clean and enjoyable user experience on a site that has a complex internal structure and hosts a vast amount of data. We also look forward to comments about the site and hope that some of the attendees might consider using HomeFinder the next time they look for a home.

We hope to see you there!

Hamilton Light Rail Initiative Launches

Fri, 23 Sep 2011 10:02:00 -0400

We just launched a redesign of the Hamilton Light Rail website.

Hamilton Light Rail is an independent group of citizens who believe that Hamilton needs an ambitious approach to economic development and urban revitalization based around high quality rapid transit. To that end, Hamilton Light Rail is dedicated to promoting the goal of building a light rail transit (LRT) system in Hamilton.

We support that goal and believed it was important to support it right now with a more effective website, in particular because of the upcoming provincial election and ongoing uncertainty at City Hall about the direction of the project.

On a personal level, we believe LRT would have a transformative effect on our city. As a business, we believe it is important to invest in modern, high-speed transit - and the type of urban development that follows LRT investment - in order to be able to attract the talented employees that are the core of our organization.

We hope you like the new site, and that you'll take a moment to read about the initiative and add your name to the list of supporters.

Just Completed: Bee Kind Organics Candle Boxes

Fri, 16 Sep 2011 09:57:00 -0400

I just received the samples of the candle boxes we designed for Bee Kind Organics, a small organic family farm, located in the Hasting Highlands of Eastern Ontario. Concern for the environment is a top priority for this grassroots producer of Pure Beeswax Candles, Natural Soaps, Cremes, Oils and Balms, among other things.

These boxes were printed by greenprinteronline.com on 100% recycled chip board using a single colour (dark brown) toner that is inert and VOC free.

We were especially impressed that Green Printer's finishing team took the extra time to test their scoring method to minimize any cracking that could happen when this fibrous stock is folded.

In addition, Green Printer provided us with our Eco Savings data for the order. Here's the data for this order of 500 boxes.

We're really happy with the results of this print project. These little boxes are sturdy and attractive in there simplicity. And they work nicely with the stickers we produced as well.

Welcome Matt!

Tue, 13 Sep 2011 10:18:00 -0400

We have a new addition to our family here at factor[e]. Matt McPeak Is a local guy who loves his city. He's active in the community and he's a great designer.

Matt graduated from Griffith University in 2006 with a degree in E-Commerce. Since 2007, he's worked as a Web Designer specializing in layout and front-end programming. Matt has a strong belief that ‘less is more’ and applies a simple, functional approach to his work. He has worked with small businesses and international brands before coming to factor[e].

I'm sure there are many of you that know him already, and the rest of you will get to know him soon.

We all look forward to seeing how Matt's design style and approach to work fits in here!

TIL: Integer#times yields a counter that starts at zero and goes to Integer - 1

Thu, 25 Aug 2011 21:41:00 -0400

I showed someone at work a method I had written which had this in it:

0.upto(my_string.length - 1) do |pos|   char = my_string[pos]   ... end

He said, "Why don't you use my_string.length.times so you don't have to use the ugly '- 1'?"

I said, "Because you will just have to use it in the block anyway to start and end at the right point of the string array."

And someone else said, "No, the counter starts at zero and goes to i - 1."

So, now I have:

my_string.length.times do |pos|   char = my_string[pos]   ... end

TIL: A better way of figuring out rails model attributes

Thu, 11 Aug 2011 14:58:00 -0400

I find it annoying looking through schema.db when I can't remember the name of an attribute on a rails model. It seems so... un-ruby. Anyway, there is a more ruby-like way, if you happen to have a console open:

ModelName.column_names.sort

TIL: Using .include in an AREL chain invalidates :default_scope

Fri, 05 Aug 2011 11:08:00 -0400

Imagine you have Car model:

class Car < ActiveRecord::Base
...
  has_many :photos
...
end

In the Photo model, you have

class Photo < ActiveRecord::Base
  ...
  :default_scope order => "sort_order ASC"
  ...
end

where sort_order is just a field where you can manually set the sort order.

In your CarsController, you have something like this:

class CarsController < ApplicationController
  ...
  @car = Car.include(:photos).find(params[:id])
  ...
end

and in your show.html.haml view you have:

...
- @car.photos do |p|
  = img_tag p.photo_file_name
...

And then you load the page and the car photos aren't in the correct order.

This is because when you add the include (for performance reasons, perhaps), it ignores the

:default_scope

on the Photo model.

Ruby / Rails Grab Bag

Fri, 29 Jul 2011 16:52:00 -0400

It's a long weekend, and I've had a rough week, so here's a quick post about some Ruby and/or Rails stuff that came in handy this week.

If you want to execute arbitrary SQL statements against your Rails database, you can do it like this: ActiveRecord::Base::connection().update("some sql here")
You can store an unsaved object in session[]. So, you could, for example, instantiate an Order object, save it from page to page while your customer adds products to it, then only save it when the credit card is processed
yield has always confused me. But I found a new way to think about it that makes it so much more obvious to me: Rather than think about it as stopping the method to allow the block to run (like, yielding to oncoming traffic), I now think about it yielding a result to my block (like, "this garden yields a lot of carrots")

Umm, that's about it. Have a good holiday!

The benefits of using vector shapes in Photoshop

Mon, 25 Jul 2011 09:07:00 -0400

Before Photoshop version 6, the Adobe product lineup was pretty clear - Illustrator was for vector graphics and Photoshop for was for raster graphics and image re-touching. Since the introduction of vector drawing tools in Photoshop version 6, the lines between the two applications have been blurred - for the better. Here's why:

1. Vector shapes let you work faster

Using vector shapes to draw page elements is fast. And as long as 'snap to pixels' is selected from the Geometry Options pull-down menu, your vector shapes will always lock onto the nearest pixel which is crucial for pixel-perfect web layouts. Additionally, each time you create a new vector shape, Photoshop will automatically create a new layer for each shape too. Brilliant.

2. Vector shapes let you work more accurately

Using vector shapes to draw rounded rectangles (for instance) let's you determine the corner radius before you draw it. This becomes increasingly helpful when you want to nest elements with rounded corners into other elements with rounded corners because you can gradually reduce the radius amount so the corners always look concentric.

Vector shapes can still be blended, faded and masked like raster shapes, but they always retain their mathematical precision and edit-ability.

3. Vector shapes let you make changes quicker

Changing the size or shape of a vector object is easy. Instead of using selection tools to copy/paste pixels around your layout, you simply grab it's anchor points with the direct select tool and move them around.

Changing and object's colour is also simple. Instead of selecting the layer or shape and filling with a background/foreground colour (which can result in ugly aliased edges), you need only double-click the layer thumbnail and the familiar "select a colour" window appears.

4. Vector shapes let you scale your design

I'm sure this has happened to everybody at one point or another - a request to "make a large-size print of the home page". Well, had you been using raster shapes for everything, you'd be in trouble. But since you're using vector shapes, all you need to do is change the resolution from 72 to 300ppi, choose a print size and voila! All your page elements and text (text was made fully vector in Photoshop 7) are re-sized without any loss in image quality.

Further reading: Combining vector shapes in Photoshop (by Method & Craft), Adobe Photoshop release history

Spotlight on Local Label Supplier

Thu, 14 Jul 2011 16:16:00 -0400

I’ve been asked many times to quote on small quantities of labels for our clients. And until recently it was often a difficult task to find someone who could do small runs for a reasonable price.

So I was thrilled to discover Reprolabels.net, and to add them to our list of excellent print vendors. Specializing in fine quality short run labels, Reprolabels are located on Brucedale Avenue right here in Hamilton. The labels they produce are the peel and stick variety and can be diecut to any shape. They offer transparent, white & metallic stocks and use waterproof, smudgeproof, durable ink. They can also do double sided and reverse printed labels.

We recently got labels printed for Bee Kind Organics, a small organic family farm that creates beeswax candles, natural soaps and earth medicine.

We did the design and Reprolabels produced 500 – 1.5” diameter white labels that can be used on products, packaging, carry bags etc.; a great option for startups and small businesses. Reprolabels made the process seamless and timely. And we were very pleased with the quality.

To come: Bee Kind Organics candle boxes printed on recycled chip board by another of our great area print vendors.

A Good Reason For Keeping Your Fixtures Directory Clean

Thu, 19 May 2011 10:52:00 -0400

After some recent updates to Forge, our tests stopped working. I don't mean in the "usual" way, like we had introduced a new bug into the code and a test which had formerly passed was now failing. I mean that every test we tried to run generated an error:

LoadError: Expected /Users/marckelsey/path/to/app/models/ckeditor/asset.rb to define Asset

The class definition in that file looked like this:

class Ckeditor::Asset < ActiveRecord::Base
  ...
end

which at first glance seemed right. And besides, the code ran fine in both the development and production environments.

After some thought, we realized where the problem occurred: loading the fixtures. There was an old, unused file in the test/fixtures directory called assets.yml. When the test environment was loaded, it went looking for a file called asset.rb in the models directory, found one, and tried to load the asset class. Boom!

Once that file was deleted, a second error started happening:

ActiveRecord::StatementInvalid: SQLite3::SQLException: no such table: ckeditor_pictures: DELETE FROM "ckeditor_pictures" WHERE 1=1

This error was easier to debug, having figured out the first one. With the refactoring, there was still a CKEditor::Picture model, but it was inherited from CKEditor::Asset rather than having its own table. Removing the old CKEditor fixtures solved that problem too.

HTML/ERB to HAML

Mon, 11 Apr 2011 12:09:00 -0400

I have a project coming down the pipes that is being sliced in HTML. I will need to convert those files to HAML before I can tie it all into Forge for the client. So, I did a bit of research and found quite a few solutions. This has been written about tons, but I thought I'd just compile my notes for future reference.

There are a number of ways to do this and they all use a command line executable that does all the dirty work -- html2haml. If you have the haml gem installed run haml --help for details.

A great script to find all erb files and list the command you would run to convert them:

http://shifteleven.com/articles/2008/06/08/converting-erb-to-haml-snippet

If you use Texmate you can add a pretty simple command to the Ruby Haml bundle:

http://autonomousmachine.com/2009/11/13/convert-html-to-haml-withint-textmate

There is also a web-based option. Dump your HTML in one field and out pops HAML in the other.

http://html2haml.heroku.com/

The source of the above site can be found here:

https://github.com/twilson63/html2haml

And, for my Vim friends. This seems like a pretty interesting list of solutions for you to try out:

http://vimgolf.com/challenges/4d3c51f1aabf526ed6000030

Copying specific files from one project to another

Wed, 06 Apr 2011 15:00:00 -0400

Recently I've been pulling a modules from various projects into my current project. Instead of copying files individually and creating new directories for views etc. I figured out how to do this the unix-like way...

find . -wholename "*model*" | cpio -pdumv ../destination_dir

Where "*model*" finds any file with the word "model" in it and ../destination_dir is the directory you want to copy these files and directories to. "-wholename" specifies that directories with that name are also copied (handy when you want to copy views and helpers).

For those of you who like turning this into a script:

#!/bin/bash
#Copy all files of a certain name to a new directory
NAME=$1
DEST=$2

find . -wholename $NAME | cpio -pdumv $DEST

Once I've done the copy, sometimes I want to call the model something new which involves renaming all of the files and view directories:

rename -v "s/oldname/newname/g" `find . -wholename *oldname*`

If, like me you're copying and renaming a rails resource to a new project, then you'll also want to rename your models inside the code:

sed -i "s/oldname/newname/g" `find . -type f -name *newname*`
sed -i "s/Oldname/Newname/g" `find . -type f -name *newname*`

More info than you can shake a stick at:

find: http://unixhelp.ed.ac.uk/CGI/man-cgi?find

cpio: http://unixhelp.ed.ac.uk/CGI/man-cgi?cpio

rename: http://unixhelp.ed.ac.uk/CGI/man-cgi?rename

sed: http://unixhelp.ed.ac.uk/CGI/man-cgi?sed

Snow Leopard, RubyGems and MySQL

Thu, 31 Mar 2011 14:39:00 -0400

I ran into a few issues while setting up my new macbook and I thought I'd share in case there were people out there who were running into the same issues.

MySQL and MAMP

The first issue was MySQL. If anyone has ever tried installing MySQL on OS X, you may know what I mean. I tried several methods: from source, through MacPorts, following the hivelogic directions, with the help of a co-worker, and I'm sure there were some combos of all of those. By the end of it I wasn't even sure what methods I had already tried.

After all this and a good night sleep, I tried a different tact. I set up MAMP and configured my mysql gem that way. It honestly took me about 30 minutes and worked on the first try.

These are the step by step directions (by Fred Wu) that I used: Using Ruby MySQL Gem with MAMP 1.8.x on Snow Leopard. Brilliant.

RVM and RubyGems

The other hangup I was stuck on was an incompatibility between the version of Ruby I was using (1.8.7) and the RubyGems version that RVM installed by default (1.6.1). The best explanation I found was on stackoverflow. When trying to run a project I was getting the error:

uninitialized constant ActiveSupport::Dependencies::Mutex (NameError)

The solution was to use RVM and install the version of rubygems I know worked with our projects (1.3.7).

rvm rubygems 1.3.7

This installs the version of rubygems you need and makes it the default for that rvm version of ruby.

Issues As A Result Of Internet Explorer 9

Mon, 21 Mar 2011 10:59:00 -0400

Microsoft has just released Internet Explorer 9 (IE9). Users of IE9 are experiencing many issues with websites that do not display correctly, including the following issues:

Specialized fonts fail to render properly or render at all: Changes to the way IE9 deals with SVG and VML means that technologies used to display specialized fonts (such as Cufon) no longer work or require updated versions to work correctly.
Minor display issues: users are reporting that minor display elements like rounded corners no longer appear correctly in IE9.
Minor to major layout issues users are reporting that the layout of some websites is either partially or wholly broken. This is often the result of relatively minor changes in IE9 that have caused website layouts that depend on precise positioning to no longer display correctly.

This is likely only a partial list of issues.

It is important to check how your website is currently displaying in IE9 if you have not done so already. If you're one of our clients, you can request that we examine your website for issues on your behalf.

If your website is having problems displaying in IE9, we feel for you. It's unfortunate that Microsoft has chosen to release a new browser that is not fully compatible with previous versions of Internet Explorer (and this is far from the first time they've done so). In an ideal world, you'd be able to bill Microsoft for the cost to upgrade your website to ensure IE9 compatibility.

We always take great care to test all of our websites in all modern browsers at the time that they are completed, but we can't predict what browser vendors will do in the future. Given Microsoft's track record with browser compatibility, we'll continue to recommend that our clients use alternatives such as Chrome or Firefox.

Make Halftone Dots using Illustrator's 'Transform Each' Command

Tue, 15 Mar 2011 14:38:00 -0400

Halftone is the printing technique that simulates continuous tone imagery through the use of dots, varying either in size, in shape or in spacing. Though it's existence was intended as a solution for reprography, it's become somewhat of a graphical phenomenon, especially celebrated in the Pop Art era. Since then, artists and designers have used it as a graphical element, rather than simply a bi-product. ‘Halftone dots’, as they’re commonly referred to, have been used in everything from logos to website design.

For a more detailed description and history of halftone dots, please read this entry.

There are as many online tutorials describing methods of emulating them with Photoshop as there are thousands of Photoshop brushes and patterns available to download. But none of them offers the flexibility and scalability of working with vector graphics, so this short tutorial will demonstrate how easily it can be done with Illustrator’s ‘Transform Each’ command.

Step 1 - Create a new document and turn the document grid on (Cmd+’) and then make sure ‘Snap to Grid’ is turned on (Shift+Cmd+”). Snapping to a grid ensures uniform spacing between all the dots you’re about to draw.

Step 2 - Draw a circle at one of the intersecting grid points using the ellipse tool (L). By holding down the (Shift) key as you click, the ellipse will be constrained to a perfect circle.

Step 3 - Now we’re going to create a row of circles, so copy the original circle by holding down the (Option/Alt) key, clicking on the circle and dragging it over to the right. Because we turned on ‘Snap to Grid’ in step one, the circle will be copied to a distance dictated by the grid, as well as be constrained to 90 degree angles.

To repeat the last transformation (in this case, copying the circle over to the right), press (Cmd+D). Press it repeatedly until you have an entire row of circles.

Step 4 - Select your entire row of dots, and repeat step 3, but this time copy the row down below the original row. Repeat this transformation (Cmd+D) until you have a sufficient number of rows.

Step 5 - Now, in this case I’ve decided that I’d like my fade to happen from left to right, so the dots in the left-most column will be the largest ones. Select the second column of dots and press (Alt+Shift+Cmd+D). This brings up the ‘Transform Each’ window. Since I have 10 columns of dots, and I’ve already determined that the first column will be the largest (100%), my second column will be 90% of the original size. Enter ‘90’ into both the horizontal and vertical scale fields and press ‘OK’. Because we’re transforming “each” element that is selected, they will all scale relative to themselves, meaning they will retain their respective center positions on the grid.

Step 6 - Continue across the columns, repeating step 5 and entering values of 80%, 70%... and so on. You should have a grid of dots that looks like this. Depending on how large or small you’ve made it, you should have a pretty authentic looking gradient of halftone dots.

Step 7 - Get creative! The sky is the limit here, so experiment with all sorts of grids, linear and radial gradients, angled grids and staggered dot placement etc. and have fun!

Escaping the Zone?

Mon, 14 Mar 2011 13:58:00 -0400

"I've got to get out of this rut and back into the groove." - Homer Simpson

As programmers, the holy grail of productivity is that sweet, sweet combination of concentration + motivation known as flow. You know you're there when you experience lost time, stop eating and walk to the bathroom with your eyes on the floor so you don't get stuck talking to co-workers and losing your train of thought.

As much as possible, I structure my day and my work environment to maximize my potential for flow. I try to batch common tasks, or group small programming jobs together so that I can make blocks of (potentially) uninterrupted time which I can fill with working on the larger, tougher projects. That doesn't necessary mean that I will achieve that flow-like state: phones still ring, colleagues still talk, priorities still change. I don't worry too much about it; tomorrow might be different.

What I DO struggle with, though, is being routed from flow. Last week, I was programming away on a project, completely in the zone, the end was in sight, and then things changed. A client called to report a pretty serious bug with their app, and I had to deal with it immediately. As I stopped what I was doing on my original task, making notes about what I was working on and saving my changes-in-progress, I noticed myself feeling annoyance and some anger. As I started working on debugging and fixing the new problem, I could feel the pull of the other issue, and had a hard time getting motivated on the new one. The bug got fixed, eventually, but I couldn't shake the negative feelings I had from having to shift mental gears so quickly.

I don't have any solutions for this. In fact, I am looking for suggestions. How do you pull yourself out of the flow and get into a new zone with minimal mental disorder?

Our New Project Manager

Mon, 07 Mar 2011 10:20:00 -0500

We're very pleased to announce that Tara Pledge has joined our ranks in the role of Project Manager.

Tara is an honours grad of Mohawk College's 3-year Advertising and Communication Media programme, after which she worked with a number of companies both small and large to maintain client relationships, devise strategies and collaborate with and manage in-house and external creative and production teams. Tara also held an extended-by-request internship at Ogilvy & Mather, during which she worked on the IBM and Kraft accounts.

Tara leads a violent, fast-moving second life as Scooby Doom, captain of the Hamilton Harlots roller derby team, and is a huge fan of terrible 80s movies and music - so pretty much a perfect fit for factor[e].

If you work with us, you'll probably get to know Tara quite well - she'll make sure you're taken care of. We're sure you'll be as happy as we are to have her aboard.

Moving Into Mobile

Mon, 28 Feb 2011 09:22:00 -0500

As previously discussed on factor[e]'s blog, there are primarily two types of applications you can develop for mobile platforms: HTML5 apps, which consist of web technologies like CSS, Javascript, and modern HTML capabilities, and are encapsulated within a browser; and native apps, which are written in source code that is compiled and then run directly on the device's processor, without the intermediate layer of a browser.

There are various advantages to each approach, but at this point, if you want to take full advantage of the capabilities of a given mobile device, there is no question that native apps have the edge. They are faster, tie in better with the underlying hardware, and can be used to create more compelling experiences.

For developers who specialize in web development, however, native app development poses a tricky problem. Much of the power of high level languages like Ruby and Python vanishes when one enters into the lower-level programming realm of, say, Objective C. New languages, new IDEs, new APIs, new libraries, and an entire new paradigm combine to create a substantial learning curve for web developers seeking to move into mobile.

The rewards for doing so, though, are significant, and I'm not just talking about money. The growing ubiquity of mobile devices capable of running advanced applications represents the most exciting advance in personal computing in decades. Major opportunities exist to shape the future of mobile development, changing lives in the process.

factor[e] is committed to participating in this computing revolution. We are well-positioned to take part: we have excellent design skills, a history of successfully completing complex technological projects, and decades of combined programming experience. Our developers have worked in a long list of programming languages: Ruby, PHP, Python, Perl, C, C++, Java, Visual Basic, ASP, Pure Data, Lisp, SQL and assembler. Adding Objective C to the list is not going to be a problem.

So, do you need a mobile app? Looking to target smartphones or tablets? Interested in getting in on the App Store gold rush? Contact us and let us know. We can help.

More than 20 Textmate shortcuts I use all the time

Fri, 28 Jan 2011 12:29:00 -0500

In a Mac environment, one of the favourite text editors for development is Textmate. Some people around the office have migrated to Vim, but I'll let them address that in their own posts.

I've been finding most of these shortcuts by accident. Usually by missing a usual shortcut with an inaccurate keystroke, then sudden, unexplained magic happens.

I've also discovered quite a few while watching Railscasts. If you watch the upper right hand corner of a Textmate shot you'll usually see what sort of shortcut is used to make the magic happen.

Here's a few I use all the time:

Cmd + T : List of most recent files and quick file search

Ctrl + Shift + D : Duplicates you current line/selection

Ctrl + Shift + K : Removes the entire line the cursor is on

Ctrl + Cmd + R : Show the file you are working on in the drawer

Alt + Cmd + Down : Opens the view of the action your cursor is currently in

Ctrl + L : Inserts " => " (in an .rb file)

Cmd + ] or Cmd + [ : Indent left or right

Alt + Cmd + ] : Align assignments within a block

Cmd + / : Comments out the line/selection of code using the appropriate syntax (most of the time)

Cmd + Del : Deletes everything after the cursor

Cmd + Backspace : Deletes everything before the cursor

Tab completion

This, like terminal, works more often than not. Depending on the bundles you have installed and the extension of the file you are coding, hitting tab following some snippet of code may complete what you are doing. You can also continue to tab through the options in blocks that have more than one condition/option/variable.

Loops

Def then Tab : def method ... end

Do then Tab : do |variable| ... end

If then Tab : if condition ... end

Validations

vp then Tab : validates_presence_of :attribute, :on => :create, :message => "can't be blank"

vu then Tab : validates_uniqueness_of :attribute, :on => :create, :message => "must be unique"

vf then Tab : validates_format_of :attribute, :with => /^[\w\d]+$/, :on => :create, :message => "is invalid"

Relationships

bt then Tab : belongs_to :object, :class_name => "Object", :foreign_key => "object_id"

hm then Tab : has_many :objects, :class_name => "object", :foreign_key => "reference_id"

ho then Tab : has_one :object, :class_name => "Object", :foreign_key => "object_id"

Migrations

mcol then Tab : Provides you with the options available for column migrations

mtab then Tab : Provides you with the options available for table migrations

And finally

Ctrl + Cmd + T : To see a list of all bundle items (shortcuts) available to the file you are currently working on

DIY

You can also make your own by recording and saving a Macro. In the menu under Bundles > Macros you can:

Ctrl + CMd + M : Start recording. This will record any keystrokes you make so that you can create your own shortcuts.

Shift + Cmd + M : Replay the last recording to see how it works or just repeat the last recorded action over and over.

Alt + Cmd + M : Record the last recording and assign a shortcut to it.

There are tons of bundles and shortcuts you can add use in textmate and this is only scratching the surface. Give it a shot and see what you find.

REFERENCES: http://szeryf.wordpress.com/2010/02/15/textmate-shortcuts-you-should-be-using/

Using Views to Connect a Legacy Database to Rails

Mon, 24 Jan 2011 10:34:00 -0500

One of my first challenges as a new developer here at factor[e] has been to create a Rails application that runs on an existing database which is also the back-end for another php-driven website. Since Rails favours naming conventions in tables and keys this means a lot of translational code in the models. However, following inspiration from slide 20 of this presentation, I solved this using conventionally named views on the MySQL database.

What are views?

SQL views act as virtual tables in a database. They're primarily used for saving SELECT statements and exposing a specific data-set. Typically a view will join together information from a number of different tables (through JOIN statements), however, in order for a view to be updatable it must be associated with only one table.

From the MySQL reference:

"Some views are updatable. That is, you can use them in statements such as UPDATE, DELETE, or INSERT to update the contents of the underlying table. For a view to be updatable, there must be a one-to-one relationship between the rows in the view and the rows in the underlying table." - http://dev.mysql.com/doc/refman/5.5/en/create-view.html

For more info on views check this MySQL Views Introduction.

Views with Rails

In order to create effective views with Rails, they need to be updatable. Therefore we need to create a new view for each table that that we want read/write access to in the legacy database without JOINing any tables together (that's what we'll use Rails' has_many and belongs_to methods for). Creating a view is as simple as running a SELECT statement:

CREATE OR REPLACE VIEW employees AS SELECT * FROM Employee_Table;

However, for Rails this only solves the problem of having misnamed tables and not well-formed column names. For more control:

CREATE OR REPLACE VIEW employees AS SELECT Employee_Table.EmployeeID AS id, Employee_Table.CompanyID AS company_id, Employee_Table.FName AS first_name, Employee_Table.LName AS last_name FROM TEmployee;

Here we've effectively created a new view which has a conventional name, well-formed column names and properly named primary and foreign keys (id and company_id). Now we need to tell Rails to create the model and other viscera:

Rails generate resource Employee --migration false

or

Rails generate scaffold Employee --migration false

The "--migration false" option tells Rails not to create any migrations since we're working on an existing database.

Finally, to get the view to act properly with respect to entity relationships, we need to add methods for the foreign keys.

in app/models/employee.rb

class Employee < ActiveRecord::Base

belongs_to :company

end

Now we should have a fully functional Rails interface to the legacy 'Employee_Table' through the view 'employees'.

Automating the process

Since the database I'm working with contains 50+ tables, I decided that my time would be better spent writing a rake task that would generate the necessary MySQL statements and Rails commands.

First we need the database schema:

mysqldump -u username -p password --no-data=TRUE "db_name" > schema.sql

Next, create a rake task to parse the schema.

tasks/lib/create-views.rake

namespace :create_views do

  #load the database environment. Will get "database not configured" errors otherwise.

  task :load_config => :rails_env do

   require 'active_record'

   ActiveRecord::Base.configurations = Rails.application.config.database_configuration

  end

  desc "Create views from schema file"

  task(:views => :load_config) do

   @views = Array.new

   #filter out any reserved words that might break the SQL

   reserved = ["unique"]



   create = Regexp.new("CREATE TABLE `([^`]*)`") #table name

   column = Regexp.new("^\s*`([^`]*)`[^,]*.*$") #column name

   primary_key = Regexp.new("^\s*PRIMARY KEY [^`]*`([^`]*)`.*$") #primary key

   foreign_key = Regexp.new("^\s*KEY `([^`]*)`[^`]*`([^`]*)`") #foreign key

   table_end = Regexp.new("ENGINE") #end of table marker



   File.open('schema.sql').each do |line|

   match_create = create.match(line)

   if match_create #table name found

   @view = Hash.new

   @view[:columns] = Hash.new

   @view[:foreign_keys] = Array.new

   table_name = match_create[1]

   @view[:old_table_name] = table_name

# table_name = table_name.gsub(/^T/, "") #remove initial T from each table name

   table_name = table_name.tableize

   @view[:table_name] = table_name

   puts table_name

   end



   match_column = column.match(line)

   if match_column #column name found

   column_name = match_column[1].underscore

   #Check for columns wrongly named "id"

   if column_name == "id"

   column_name = @view[:table_name] + "_id"

   end

   #check for reserved words

   if reserved.index(column_name)

   column_name += "_val"

   end

   @view[:columns][match_column[1]] = column_name



   end



   match_primary_key = primary_key.match(line)

   if match_primary_key #found primary key

   primary_key_name = match_primary_key[1].underscore



   if !@view[:primary_key]

   @view[:primary_key] = primary_key_name

   end

   end



   match_foreign_key = foreign_key.match(line)

   if match_foreign_key #found foreign key

   foreign_key_name = match_foreign_key[1].underscore

   @view[:foreign_keys].push foreign_key_name

   end

   match_table_end = table_end.match(line)

   if match_table_end #found table end

   @views.push(@view)

   end



   end

   sqlfile = File.open("add_views.sql", 'w') #sql script to create all the views

   rails_script = File.open("rails_generate.sh", 'w') #shortcut to create all the "rails generate" statements

   @views.each do |view|

   viewquery = "CREATE OR REPLACE VIEW #{view[:table_name]} AS SELECT"

   #rename primary key to "id"

   if pk_index = view[:columns].index(view[:primary_key])

   view[:columns][pk_index] = "id"

   end

   if pk_index = view[:foreign_keys].index(view[:primary_key])

   view[:foreign_keys][pk_index] = "id"

   end



   view[:foreign_keys].each do |fkey|

   #if you want to do something with foreign keys, do it here

   end



   view[:columns].each do |old_col, new_col| #rename the columns

   viewquery += " #{view[:old_table_name]}.#{old_col} AS #{new_col},"

   end



   viewquery = viewquery.chomp(",")

   viewquery += " FROM #{view[:old_table_name]}"

   sqlfile.write(viewquery+";\n")

   rails_script.write("rails generate resource #{view[:table_name].classify} --migration false\n") # Rails 3

# rails_script.write("script/generate controller #{view[:table_name]}\n") # Rails 2

   end

   sqlfile.close

   rails_script.close

  end

end

Run the script with

rake create_views:views --trace

Check out the files to make sure the parsing worked properly

cat add_views.sql |more

cat rails_generate.sh | more

Be sure to edit add_views.sql if you want to change some of the column names to be more readable/reasonable.

Set the execute bit on our generated script

chmod +x rails_generate.sh

Create the views

mysql -u username -p password db_name < add_views.sql

Run the script

./rails_generate.sh

And now you should be able to update your models with proper foreign key pairings (with belongs_to etc.). I haven't been able to automate that portion yet, but I also want to be sure to edit each model anyway. Note that the parsing script was specific to the database I was working with and you'll need to tweak it in order to get better naming translations for your own system. Also note that this was done with Rails 3.

Hope this information can help some of you struggling with building Rails applications on top of legacy databases. If anyone can suggest a good way to automate the foreign key/belongs_to model building then please comment!

CSS Hexagons

Mon, 17 Jan 2011 13:05:00 -0500

One of my other nerdly pursuits is playing and designing boardgames, and so naturally I found myself wondering the other day, "Can you make a hexagonal map purely in html and css?"

It turns out you can, of a sorts, though there are a few problems associated with it.

Note: I designed this using Chrome, and briefly looked at it in Firefox and Safari, but as for IE YMMV.

Looked at the right way, a hexagon is just a rectangle bracketed by two triangles, and so could be fairly easily represented by a regular div and two css "triangles." I wrapped it in a container div to keep it as a single unit, and ended up with this:

 <div id="a1" class="hex blue">

  <div class="hex_left"></div>

  <div class="hex_centre"></div>

  <div class="hex_right"></div>

</div>

A little trigonometry and some css styling, and the hexagon is complete.

 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {margin:0px; padding:0px; }


.hex {position:absolute; width:200px; height:172px;}
.hex_left, .hex_right {float:left; border-width: 86px 50px; border-color:transparent; border-style:solid; width:0px; height:0px;}
.hex_left {border-left-width:0px;}
.hex_centre {font-family: Helvetica,"Helvetica Neue",Arial,sans-serif; font-size:36px; float:left; border:0px solid transparent; padding: 50px 30px; width:40px; height:72px;}
.hex_right {border-right-width:0px;}
 

.blue .hex_left {border-right-color:blue;}
.blue .hex_centre {background-color:blue;}
.blue .hex_right {border-left-color:blue;}

To make things interesting, I added some classes for different colours, and some ids for positioning, and ended up with this hexmap.

The biggest issue (demonstrated if you roll-over the hexes in the link above) is that the triangular divs overlap, so javascript selection of individual hexes might be problem. Also, I don't think it's possible to make outlined hexes without using some kind of border image.

Still, I am reasonably impressed with how easy this was to implement.

HTML5 vs. Native Apps

Fri, 31 Dec 2010 15:00:00 -0500

It is not always easy or straightforward to choose between HTML5 and native application programming when making a decision on the best technology to use for a mobile application.

If you're developing a game and you want to make money from it, the choice is pretty clear: you should develop a native app for the iOS platform and sell it in the Apple App Store. But for many other types of applications, the choice is not as straightforward. To help clarify your options, I've developed a chart that examines many different factors.

Click here to view the chart: HTML5 vs. Native Apps.

To Label Or Not To Label

Tue, 21 Dec 2010 14:42:00 -0500

So I've babbled on in my previous two posts about forestry certification, labeling and working it into the production workflow and still I haven't put one label on one printed piece! Yes - clients are getting interested in being "greener" and a few of those like the idea of really being recognized as such, yet somehow the opportunity to use a label seems to elude me.

One recent project is a case in point. The piece was a 12 x 24" poster that would fold down to 6 x 6". It was for a traveling art exhibition initiated by a large public art gallery. Since my eco printing consciousness has been raised of late, I made a special effort to specify a very "green" paper stock that was FSC certified. I had the job quoted by two FSC certified printers and the estimate was happily accepted by our client. I made a point of explaining to the client that we would be able to to use the FSC label and that it would identify this printed piece as being produced using paper from a responsibly managed forest and that the printer of the piece was certified. She was happy with that idea -- in theory.

But when the art was approved I asked our vendor for the placeholder label and took a close look at the guidelines for FSC label usage which had recently been updated. Unfortunately the size requirement for the label seemed quite obtrusive in the design of the piece and actually competed unfavourably for attention with the gallery logo. I didn't like it and neither did our client. In the end we decided not to use the label. The client's investment in being recognized as eco conscious did not outweigh her interest in producing an aesthetically pleasing printed piece.

So then I thought, why worry? The client knows the piece is "green" and we as the designers also know. We've made the responsible choices. How important is it that everyone else knows about it?

I guess in the end it comes down to the client's mandate. Some organizations, especially governmental and large corporations have made it part of their mandate to improve their environmental standards and they are willing and able to go the extra mile to make sure they are perceived as such. Other smaller organizations may not be quite there yet. And when it comes to arts organizations, aesthetics wins out in more cases than not.

So label or no label, I will concentrate on specifying paper from mills that purchase certified pulp in significant quantities and using certified printers.

But while we're on the subject, here's an excellent, eye-opening article from Paper Specs that discusses the complex subject of eco-certification, what the labels actually mean and how they work in practice. Would it surprise you to know that the FSC certified paper you buy may not actually contain any FSC certified pulp? Most people would say yes - and might also be quite outraged - a reaction that is described in this article. But as Sabine Lenz explains, that doesn't mean the whole eco-certification endeavour is a sham. Read the article for yourself and there are also some enlightening comments that are worth a read as well.

Image placeholders made easy

Fri, 17 Dec 2010 11:00:00 -0500

On the topic of slicing tidy PSDs, I've been using a service lately I came across a while ago called placehold.it.

I was finding that while slicing some designs I was spending a bunch of time doing one of three things to create temporary placeholder images:

Cropping stock images to fit into templates;
Using a styled div and having to go back to set up the images; or
Setting up Forge modules before I fleshed out the layout, which would, inevitably, result in rolling something back.

Either way I was probably spending more time on this than was necessary.

A few templates ago I started using placehold.it and haven't looked back. Put simply, it is quick and easy image placeholder. The only down-side is that you need to be connected to the internet to use it.

In your code all you have to do is insert a url as your source:

This becomes a 200 by 100 image:

If you'd like to change the colour:

How about custom text?

You can also create an image using the format of your choice by simply appending the extension after any option except the text. The default format is .gif.

This isn't a huge game changer and may not fit into your own workflow, but it has allowed me to focus on the task of slicing before jumping deeper into code.

Preparing PSD Files for Development

Thu, 09 Dec 2010 14:38:00 -0500

If you're designing for the web, and you work in an 'assembly line' environment as I do - whereby designers design and developers develop - you’ll be familiar with the moans and groans developers emit while dissecting a sloppy layout. In an effort to streamline productivity and keep the development time as efficient as possible, I have a few suggestions for designers.

Keep your photoshop documents as tidy and organized as possible. Half of the struggle developers endure is trying to find and isolate specific layers (or layer groups) within a document in order to create appropriate slices. This can be made MUCH easier if the designer takes the time to label the layers and groups with appropriate (and descriptive) names. It also helps to gather layers together into groups representing specific parts of the site.

Note to developers: You can also right-click anywhere in the photoshop document, and photoshop will bring up a list of layers under that click. This might make it easier to find a certain layer if the file is poorly organized.

If you’re using vector shapes (and you really should be) to draw objects, make sure to check the “Snap to Pixels” box under the shape options drop-down menu.

If you want clean and sharp graphics, this option will keep shapes on whole pixels instead of between pixels. If you have to edit a previously-drawn shape, zoom in, select the vector shape’s points using the Direct Select Tool (keyboard shortcut: A) and adjust with your mouse or keyboard.

Another thing that might help the process along is to create a developer-only mockup containing notes, font styles, button states, colour swatches and information on any non-web fonts. The client doesn’t care about this mockup in the same way a developer doesn’t care about the client-only mockup... but it makes it dead easy for a developer to extract only the relevant information required to create the code.

You can download the PSD for the above example to get an idea of what a good developer-only layout looks like. The font used in this example is Colaborate, available from Font Squirrel.

HeadJS: A Quick Review

Tue, 07 Dec 2010 09:39:00 -0500

HeadJS is a lightweight javascript...script...that has become pretty popular on reddit and Hacker News in the last week or so. HeadJS essentially does three things:

Loads and executes other javascript files
detects some browser / page properties and
adds classes to your <html> element

With those three features, HeadJS allows you to do some pretty interesting things:

1) You can determine how your javascript files will be loaded and executed. By placing only HeadJS in your html head and using it to load the rest of your scripts in your page, you can reduce much of the loading time associated with javascript blocking. You can also get some speed gains by loading the javascript files in parallel, and by running scripts as soon as their dependencies are loaded (as opposed to waiting for all the files to load. Though you can do that too, if you need to.).

2) You can craft your css to take into account browser and page features, or the lack thereof. When HeadJS loads, it checks the browser to see what kind/version it is and whether it supports various css properties. It then adds aptly-named classes to the html element based on its findings. For instance, if the browser is Firefox, HeadJS adds the "mozilla" class. If it supports border-radius, a "borderradius" class is added; if not, the "no-borderradius" class will be there instead.

In addition, HeadJS will assign a class based on the width of the current page, allowing you to style the site for different browser widths. While it does assign these width-based classes in realtime, as the page is being re-sized, the real benefit of it is that it allows you to style for mobile browsers, which are often as full-functioning as their "stationary" brethren, but just have less real-estate.

3) By allowing you to add your own classes to the html element based on any javascript function that returns a boolean value, you can trigger css styles based on things such as whether a user is logged in, the page name, whether a certain action has occured, and so on.

The CSS functionality (2 and 3 above) emphasizes a Certain Way of Doing Things, which may or may not mesh with yours. Do you want to detect the current page that a user is on, set a class in the head, and style elements accordingly? Or do you want to serve just the content that you need? HeadJS definitely favours the former approach. Similarly, do you want to create one html file and one stylesheet that contains all the divs and rules you might need to cover the various types and sizes of browsers? Or would you rather keep them separate and serve up the ones needed? Again, HeadJS emphasizes the first approach. And are you happy with designing for the lowest common denomonator, then adding styling for browsers support modern features (HeadJS), or do you like to use, for example, plugins like jQuery Corner that add functionality to obsolete browsers?

The real value of HeadJS is definitely the javascript loader, which can significantly improve your page load times (though can leave them succeptible to a FUOC). The author seems to know this, as he has split the loading functionality into its own script.

I have only played with HeadJS for a couple of hours, but my initial impressions are that the javascript loading features are probably valuable on any project, but the CSS functionality seems like it would be best suited for reasonably small/simple/personally controlled sites, where your markup/css aren't overly huge and you get to make the presentation decisions.

The Two Types Of Candidates We're Seeking

Fri, 12 Nov 2010 13:52:00 -0500

PLEASE NOTE: This position has been filled. More details on our new team member to come soon.

We're hiring: we have an opening for a web developer and we'd like to fill it in the next few weeks.

What You'll Do

You'll code using the latest web development techniques, mainly using Ruby, Javascript, HTML, CSS, Rails, and Sinatra. From time to time you might do a little PHP, but that's getting rarer all of the time.
You'll work on beautifully designed websites of all shapes and sizes.
You'll help build interesting web apps, start ups, and new ventures in all kinds of fields: business operations, mapping and geocoding, e-commerce, content management, social media analysis, and that's just scratching the surface.
You'll integrate applications with the latest APIs and web services.
You'll work on the content management system we developed, Forge. Sure, everyone's developed a CMS, but this one is sweet. You'll also work on some of the other startup ventures we're working on.
You'll get a chance to shape the company culture of a great company. You'll work with people who are intensely passionate about their work, who constantly strive to be the best at it, but who also understand - and maintain - work/life balance.
You'll also make a wage that will put you in a great spot if you live in Hamilton or nearby (or are interested in moving here), plus you'll get a nice benefits package.

We are seeking one of two types of developer:

Candidate #1: The Experienced Developer Who Wants A Change

You have several years - perhaps even a decade or more - of programming experience. You know several languages including at least a couple that you know really well. You've worked on a ton of different projects and you know the ins and outs of web development - languages like Ruby, Python, PHP, Perl and Javascript, MySQL and maybe some SQLite and/or NoSQL databases thrown in there as well, the complexities of cross-browser compatibility, web frameworks, jQuery or similar, and so on - like the back of your hand.

You love open source technologies, and perhaps you've contributed to some in the past (let us know!) If we're lucky, you also know Ruby and Rails really well, and you've worked on some complex RoR projects in the past, but this is not required.

You're also looking for a change, and you're willing to earn less than what you're currently making, or what you would make, doing this job in Toronto, in exchange for working at a different sort of company.

You don't want to work overtime. Perhaps you have a family and you want some flexibility to take days off, leave early to attend appointments with your kids, and so on.

You're sick of commuting. You're sick of traffic. You want to be able to buy a nice house with lots of space and a backyard in a nice neighbourhood for a price a third of what you'd pay in Toronto. You believe that life should be about more than work and you want to work with people who truly think - and more importantly, act, the same way.

Practically speaking, you'll make less than $60,000/year to start - but you'll get your life back. Why this salary range? Because we're based in Hamilton. The cost of living and doing business here is far lower than in Toronto, and as a result, rates - and thus salaries - are also lower. That may change eventually, but for now it's a reality.

Interested? Contact us.

Candidate #2: The Junior Developer Who Wants A Chance

You look at the requirements for candidate #1 with a sinking feeling. Looks like a lot of job postings you've seen and not qualified for. But damnit, you've got passion, determination, and creativity! You know you could be a great web developer if you'd just get a chance to work on complex stuff with talented people who don't mind teaching you how to get great.

You're creative. Although your web development experience is somewhat limited, you've got a long history of working on creative projects and making interesting things (they might have nothing to do with web development: we'll still want to hear about it). You're ambitious and energetic.

You love technology and you're comfortable with it. You're not a rank amateur: you've received formal education in software development, and/or you have some years of experience. You know at least one web programming language reasonably well (such as PHP). Knowing how to slice layouts and develop cross-browser compatible HTML and CSS is a substantial asset.

Interested? Contact us.

The 10 Basic Requirements Of A Political Website

Thu, 11 Nov 2010 10:00:00 -0500

I spent a lot of time looking at the websites of candidates during Hamilton's recent municipal election. I also carefully examined the campaign website of Mayor Fred Eisenberger, found it wanting, and sent along a lot of feedback, most of which his team ignored. (He lost: probably not because his website was terrible, but it sure didn't help.)

I've also worked on online politically-oriented campaigns that gave me some valuable hands-on experience in the sphere. And of course, there are certain principles that apply to almost any website, not just political websites. Here's what you absolutely must have on your website if you're running for office.

Basic Requirements

If you're somewhat web-savvy, many of these may seem blindingly obvious to you. I was astonished, however, by the number of candidates whose sites failed to meet some or all of these requirements.

You must have one: a website, that is. It's 2010. If you're running for office without a website, you may as well appear at public functions carrying a club and wearing a bearskin hide you tanned yourself.
It must look good and function well. You ought to have it professionally designed but you can make do with an attractive template and the assistance of a knowledgeable volunteer if you must. An ugly, hard-to-navigate, flaky website does not inspire confidence in your ability to govern. Ensure it has clear presentation of information, clear navigational structure, is suitable for display on mobile devices with decent browsers, and is search engine accessible.
A prominent campaign slogan. It also helps if it's good. Every challenger says something trite about "change", and most incumbents say something trite about "leadership" or "experience" or "results". Perhaps it's time for something different?
A positioning statement. Clearly and concisely communicate what you're about and why people should vote for you. Try to grab their attention in the process so they keep reading. If you're an incumbent, a short list of your most compelling achievements is helpful.
Strong calls to action for the things you want potential supporters to take right when they visit the site: donate to you, volunteer for you, request a lawn sign, or send your site to their friends and family (via email, social networks, etc.)
Recent news/blog. You must be able to respond quickly to events as they happen, counter your opponents, capitalize on good press, and so on. That means you need a recent news/blog section, and it must be something you and your volunteers can easily update yourself at any moment via a content management system (CMS).
Mailing list signup. Your site needs an easy way for people to sign up for email updates and you need an easy way to send them. A good mailing list is immensely powerful, particularly in a campaign situation. There will be moments when you badly want to communicate with the public, but the media aren't cooperating. Use this instead.
Social networking tie-ins, particularly with Facebook. Facebook drives more traffic than Twitter and it's also easier to maintain, because your supporters will write wall posts and talk to each other, keeping up the appearance of activity. This helps avoid a danger with social media: the unused profile. The only thing worse than having no social media presence is having one that is unused and unmaintained. Put the time into it: social media can feel like a waste of time but in political campaigns they can create a powerful advantage.
Your platform. Some voters will want to learn exactly where you stand on the issues (if only all voters had this desire!) Give them something meaty to digest in the form of a comprehensive platform.
An easy way to contact you. Don't assume that everyone who can help you will fit into one of the categories that you've created calls to action for. Some people may want to provide special assistance, communicate helpful criticisms, call you a fascist, etc. The best method: display an email address.

More Advanced Features

If you're running a grassroots campaign for a low-profile office (school trustee, councillor for a small city, etc.), then the list of basic requirements may be enough for you. But that list was just the bare minimum. Here's what you should have, in addition to what you must have.

Professionally designed and developed. Get a qualified team of professionals to design and develop a custom website that is perfectly suited to your campaign message and branding.
Professionally shot and edited video on the site (at least one clip). It should make you look trustworthy, responsible, and sane, even if you are none of those things. The video should play on mobile devices. There is nothing wrong with using YouTube to host it and you may get some additional traffic that way.
Nicely designed interactive elements to add some life to your site, such as an image gallery, polls, etc. Consider having comments on your news and blog post items, but only if you can tolerate public criticism, because censoring comments is a recipe for disaster (unless they are defamatory, constitute hate speech, etc.)
Events and event calendar. On a basic website you can use the blog/news section to advertise events, but at this level, you should be more focused. Let people register for events on your site, or use a third-party service like Constant Contact to handle it.

Taking It To The Next Level With Custom Development

The items listed here are just the standard bits that any decent political website ought to have, but to really take advantage of the opportunities the Internet can provide, you should consider taking things to the next level.

Automated telephone calls and text messaging with a web service like Twilio. Robocalls need not be the sole domain of candidates with big campaign chests.
Online tools that assist with campaign operations and volunteer coordination. In a hectic campaign environment, operations can quickly degenerate into an unmanageable flurry of emails. You can organize your team more effectively with the right technology.
Tap into public support for the issues you stand for and build your mailing list by asking site visitors to sign a pledge on your site or contribute their ideas for the city or region you are campaigning in.
These ideas still just scratch the surface of what you can accomplish with a great website. A strong, creative website will pay off with more votes, more donations, and more volunteers.

Good luck!

Latest Launches: October, Second Edition

Thu, 28 Oct 2010 09:00:00 -0400

Keeping very busy over here... Here are a few more sites we've launched in the past little while.

Detour Coffee

Detour Coffee is a wholesale roaster and retailer based in Dundas, Ontario. They were looking to consolidate their online presence in one site and build an online store.

Powered by Forge Cart, complete with shipping calculations, and tied seamlessly to Paypal, Detour Coffee folks can now reach out to coffee connoisseurs all over the world.

CiLLA

"CiLLA is an Active Lifestyle Brand for Women founded in 2007 by Professional Snowboarder Priscilla Levac along with the help of her mother and co-founder Suzanne Levac. Bringing freshness and style to first layers and active wear in the snowboarding industry CiLLA was an instant success.""

The CiLLA site is a simple, slick re-design of their old Flash-based site. The result is a much more dynamic, search-engine friendly and easily updatable site powered by Forge.

Stop Trolls And Improve Discussions By Creating A Troll Fantasyland

Fri, 22 Oct 2010 09:58:00 -0400

In this blog post I ~~introduce a new technique (new to me, anyway)~~ rehash an existing, very old technique to counter trolls, which I am calling the Troll Fantasyland.

Popular blogs and forums always attract trolls. (Note: in this post, I will use the verb form of troll, as in "trolling for reactions", as well as the noun form, as in "don't feed the troll". Please don't troll me by getting semantic.)

Dealing with them can be a bit of a pain-in-the-ass. One of the best methods is to use voting, a technique popularized mainly by Digg and Reddit that is now in use on many different sites. Trolls find their comments voted down consistently and usually obscured in some way (by getting pushed to the bottom, faded out, or even removed as the number of downvotes accumulates).

This technique is effective, but trolls have some counterstrategies that can allow them to continue to dominate and eventually destroy discussions.

For example, subtle trolls may write comments which appear legitimate and are virtually indistinguishable from normal comments. On a busy website, only very regular visitors will be able to detect this pattern of behaviour, leaving the rest of users vulnerable to the trolling.

Hyperactive trolls, on the other hand, will post responses to any new discussion item immediately, which lets them hijack it for a period of time until the accumulation of downvotes has its effect; or, the sheer volume of their comments means that downvotes simply can't keep up.

In this blog post I introduce a new technique to counter trolls, which I am calling the Troll Fantasyland (the technique is new to me, anyway, and so far as I know original). Edit: Nope, not original at all, as it turns out.

The general principle of the Troll Fantasyland is to create an alternate reality for trolls, one in which their comments appear on the website, attract votes and probably numerous downvotes (if voting is a website feature), and provoke angry responses. However, unknown to them is the fact that they are the only users who are seeing their comments, votes, and responses: all of this behaviour is totally invisible to the other users on the site.

The technique works as follows:

Administrators identify a troll based on past behaviour (on high traffic sites, this detection could be automated).
Monitoring commences. If the troll is a registered user, the particular computers they use (based on cookies, IP addresses, etc.) are noted. If the troll posts anonymously, a record for the troll is created, and the same computers are noted.
Once a certain period has elapsed and it is likely that the computers and devices the troll uses have all been identified, the trap has been set, and the troll is ushered into their very own private Fantasyland.
In Fantasyland, when they post a comment, it immediately starts attracting votes, downvotes, and angry comments. They see these, but no one else does. It may be necessary to employ some semi-sophisticated language processing algorithms to develop reasonably realistic responses for the troll from time to time, but it may also be sufficient in many cases for responses to simply voice disagreement or displeasure.
Result: the troll is gratified by the constant attention and controversy. Meanwhile, discussions among regular users continue as usual. The troll is locked away in Fantasyland, a miserable, angry place where they feel right at home.

jQuery and Rails 3

Thu, 14 Oct 2010 10:58:00 -0400

I got a little frustrated the other night trying to get an application working properly with jQuery. The problem I was having was related to the new unobtrusive javascript features introduced to Rails 3.

The Problem

I had a simple page delete button (HAML):

This creates the following HTML:

The resulting link was taking me to the show view for that page rather than destroying the record as I requested.

The Solution

I found the solution I was looking for here. This is a script that installs a template to a new Rails 3 app that uses the new jQuery drivers instead of the default prototype ones.

If you know you want to use jQuery on your new Rails project before you start the project, include the template by running:

If, like me, you've already got a project underway simply run this rake task in your existing project:

And make sure you remember to include the new rails.js and jquery.js files in your application:

Resources

Git repo with really clear instrucitons:
http://github.com/lleger/Rails-3-jQuery

The explanation post by the author of the script:
http://loganleger.com/rails-3-jquery

A nice simple explanation of the unobtrusive javascript features introduced in Rails 3:
http://therailworld.com/posts/26-Using-Prototype-and-JQuery-with-Rails3-UJS

Rails Gotcha With before_validation

Tue, 12 Oct 2010 09:30:00 -0400

Let's see if you can figure this one out faster than I did:

You have a Product model. Products can be physical, or virtual (like a pdf). If a product is virtual, there are certain attributes that can be ignored, like whether shipping should be charged. So, to standardize the data in these fields, you do something like this:

before_validation :clean_up_data ... some code ... def clean_up_data if self.is_virtual self.shipping = nil end end

Code works, data is great. Sometime later, you decides that Product.shipping should no longer allow nulls. You change the schema, and update Product.clean_up_data:

def clean_up_data if self.is_virtual self.shipping = false end end

Right? Wrong. Now, your products won't save, and you get no error messages explaining why. What's the problem?

The problem is this: validations tell rails that something is wrong by setting errors on the model. Callbacks tell rails that something went wrong by returning false. When I changed the line self.shipping = nil to self.shipping = false, I was returning false from the before_validation callback, and rails was happily cancelling the rest of the processing on the model, including the validations on the model.

Since the point of this model was not to stop the validations from happening, I added a true to the bottom of the function and everything worked again.

Managing Rubies and Rails with RVM

Thu, 07 Oct 2010 09:00:00 -0400

With Rails3 looking to become our project staple, I began looking into ways of managing many Ruby versions with different Rails versions. Enter Ruby Version Manager (RVM).

Installing RVM

There are a few ways to install RVM. I went with the github repo route, but you can use whichever way gets the job done:

bash < <( curl http://rvm.beginrescueend.com/releases/rvm-install-head )

Next step is to add the following to your profile at the very end after all the path loads:

[[ -s "$HOME/.rvm/scripts/rvm" ]] && . "$HOME/.rvm/scripts/rvm"

To see if RVM has been installed properly restart terminal then run the following:

type rvm | head -n1

If everything is good to go you'll see "rvm is a function." If not check the install page for trouble shooting tips.

For future reference RVM is installed here: ~/.rvm. This is where all your gemsets and ruby versions will be stored if you ever need to go looking for them.

Installing Rubies

To install a version of ruby:

rvm install 1.8.7

To find out what versions of ruby you have installed with RVM:

rvm list

This will return a complete list with an arrow pointing to the active installation:

rvm rubies

=> ruby-1.8.7-p302 [ i386 ]
ruby-1.9.1-p378 [ i386 ]

Gems and Gemsets

Each version of Ruby in RVM has its own collection of gems.

Do not use SUDO to work with rvm gems. When you do sudo you are running commands as root, another user in another shell and hence all of the setup that RVM has done for you is ignored while the command runs under sudo []more details].

Through RVM you can separate your project gems inside gemsets. In my reading I've found this to be the most logical way of doing it. Locally I've created "rails3" and "rails2" gemsets, but you can create a gemset for each project if you feel so inclined.

Note: Once created gemsets only belong to one Ruby installation. You can however copy, export and import gemsets as required.

Create the gemset:

rvm gemset create rails2

Installing a gem to the gemset is same as usualbut without sudo (see above):

gem install rails -v=2.3.5

Switching Rubies and Setting a Default

Run Ruby 1.8.7 with the rails2 gemset:

rvm 1.8.7@rails2

Run Ruby 1.9.2 with the rails3 gemset:

rvm 1.9.2@rails3

To set a default version, in this case ruby 1.8.7 with the rails2 gemset:

rvm 1.8.7@rails2 --default

If you want to use the system version of Ruby:

rvm system

Resources:

Fantastic article about setting up rvm and gemsets:
http://www.stjhimy.com/posts/10-five-quick-steps-to-set-up-rvm-with-rails-2-and-rails3

RVM Docs:
http://rvm.beginrescueend.com/

Steve Jobs' Office Worker Fantasy

Wed, 06 Oct 2010 13:56:00 -0400

I just looked at my desk and realized that it's Steve Jobs' fantasy of what every office worker's desk ought to look like.

From left to right: Macbook Pro, iPad, iPod Touch, Mac Mini.

And yes, this photo was taken with an iPhone.

I'm living inside Steve Jobs' fantasy. That makes me feel a little uncomfortable.

Latest Launches: October, First Edition

Tue, 05 Oct 2010 13:00:00 -0400

Busy, busy, busy. Here are some more sites we've launched since the last update.

Stay tuned, lots more to come!

Foodies

Foodies.ca is the new website for the fourth season of the popular cooking show (Sundays at 11:30AM on Global in Ontario).

The site features full episodes, tips for cooking and entertaining, and a large recipe database with basic and advanced search.

Under the hood, it uses a custom-built Forge module with a recipe-building wizard and tools to attach content to specific episodes of the show.

Actions Speak Louder

"Actions Speak Louder is a conference about culture building. This 1 1/2 day event is focused on engaging partners, creating dialogue and exploring creative solutions for livable cities.""

The Actions Speak Louder team needed a one-stop shop for event, session and venue information as well as ticket handling. They got it. Powered by Forge, Forge Cart and Paypal, everything you need to know about the conference can be found here.

Clustering made easy in Google Maps v3

Thu, 30 Sep 2010 10:48:00 -0400

I recently worked on a vacation rental site where listings are shown on a map of varying sizes (the world -> a city). To display a varying number of listings over a map of varying size, some method of listing clustering is required to make their display make sense. This used to be a real pain in the ass to do, but in the new version of the google maps API (v3) there is ready made clustering, which is dead simple to use.

This is a ruby on rails project, so I JSON'd out my listings, iterated over them to create marker objects and fed them to the markerClusterer. It handles all of the clustering/zooming automatically.

One interesting, if rather frustrating issue I encountered was when I tried to add an infoWindow for each of the markers. It seems as if you can only have one at a time, and when I was adding them directly to the marker, only the last one ever appeared, regardless of which marker was clicked.

Getting around this issue is done by making a closure action, and then recreating the infoWindow onclick.

Happy clustering!

Another jQuery plugin for my list

Mon, 27 Sep 2010 15:00:00 -0400

I'd like to append another plugin on to my previous list of three. I've used this one a few times of late and it's come in quite handy so I thought I would pass it on as well.

jQuery Backstretch

This plugin stretches an image to fill the entire background of the browser window. As the browser window changes size, the image will also stretch and scale to fill the window.

Make sure you use an image with the width of at least 1024px -- though the average screen monitor size seems to be increasing rapidly. Generally speaking, a smaller image will leave your background image pixelly in larger browser windows. A larger image will result in slower loading times. Use your own discretion.

Include the script:

Then simply add this to your .js file:

There are also three options to give you a little control over position and how long it will take the image to fade in, if at all.

centeredX(boolean), default => true - Centers the image on the x-axis.
centeredY(boolean), default => true - Centers the image on the y-axis.
speed(integer or jQuery speed string), default => 0 - The speed at which the image will fade in.

For example, this will cause the image to fade in rather than suddenly appear when your javascript loads:

Rails Console Barfs Too Much Data. Stop It.

Tue, 21 Sep 2010 09:06:00 -0400

I bet you frequently use Rails' console (script/console), especially in your production environment, to retrieve data, check up on bugs, etc.

When you do you'll often find yourself retrieving large arrays of data, for example, the results of ActiveRecord queries. Like this:

people.each { |person| puts person.name }

When you do this, you'll notice that first you get the names of people like you wanted, but then console barfs out the array of everything you are iterating through, in this case all of the people.

This is because it shows, not only what you puts, but also what the method returns - in this case, the array itself.

You can stop this behaviour with just:

people.each { |person| puts person.name }.size

It will show all of the names, and then a number for the size of the array instead of the array contents.

Chain of Custody: Who and What is Being Certified?

Thu, 16 Sep 2010 14:36:00 -0400

In my last blog post I introduced the subject of sustainability in the print and paper industries as means to become more familiar with environmental issues affecting my job and the job of print designers in general. As a starting point I discussed The Forest Stewardship Counsil (FSC) whose logos and labels are becoming quite common in the marketplace. But FSC isn't the only forest certification system out there. The following is a more complete list of the various systems in use, taken from the Forest Certification Resource Centre

The American Tree Farm System is a program for small, private, non-industrial landowners (family forest landowners). ATFS certifies contiguous parcels from 10 - 20,000 acres and was endorsed by PEFC in August of 2008.

The Canadian Standards Association is a national standard for sustainable forest management and tracking and labeling certified material. It covers operations in Canada.

The Forest Stewardship Council is an international system covering forest management practices and the tracking and labeling of certified products and paper products with recycled content.

The Programme for the Endorsement of Forest Certification Schemes is a mutual recognition framework for national forest certification standards.

The Sustainable Forestry Initiative® Program is a sustainable forest management standard targeting large industrial operations in Canada and the United States.

Additionally, there are several emerging forest certification systems in Asia, Australia and South America.

So now that we have some idea about who is doing the certifying, the next logical question is - What is Being Certified?

That's where the concept of Chain-of-Custody comes in. Chain-of-Custody is "the means of tracking a paper product along its supply chain - through its forest of origin, manufacturing, distribution, and printing". It includes all the operations that take physical or legal ownership of the paper. According to Spicers.ca, "a product that bears a forest certification logo, such as FSC, SFI or PEFC, can be tracked from the tree trunk to printed brochure. Buyers are guaranteed that the fibre originated from a forest managed according to relevant forest management standards". Another important point to stress is that "understanding and implementing forestry management practices ... not only effects the well-being of the forest and its biodiversity, but the social and economic livelihoods of the communities around it."

So with all this in mind, where in this chain do we, as the paper purchasers come in? Well - it can start with us or it can start with our client. Having become aware of the environmental and social benefits to choosing certified paper, whenever possible I will make the extra effort to specify it, when I begin a project. Or if it is important to our client to use certified paper, we as designers will make that part of the planning process from the start. The main thing to remember is that we as print buyers and designers do not need to be certified, but our printers must, in order to maintain the integrity of the chain.

Planning a Forestry Certified Print Project

In order to use a Forestry Management logo, you will need to find a certified printer or printers and obtain your print quotes through them. One source for finding a certified printer, if you don't already know of one, is at the Forestry Stewardship Council's website. Of course the printers listed there will be specifically FSC certified, but it's a place to start. The Sustainable Forestry Initiative offers a pdf of SFI Certified printers on their website, but it refers to only US printers as far as I can tell.

Once you've found your printer and have specified your certified paper for the project, you really just need to make sure your design works with the paper you've selected and that your time schedule works with the printer.

There are a couple of things to consider. First of all, is the paper a special order from the mill or does the printer have it available on the floor? If it's a mill order you need to leave enough time in your schedule for the order.

Secondly, if you plan to use a certification logo you will need approval from the certification body, for example, FSC. This step may add a slight cost to your project as well as a couple of days to your timeline. During the design phase, designers can use low res images of the FSC labels as a placeholder so the client can see how it will look in the layout. The placeholder labels are available at www.fsccanada.org/productlabel.htm.

Once the design is approved by the client, the designer must send an electronic file of the final piece - with the low res FSC label in place - to the printer. The printer will then need to send that file to the certifier for approval. If the printer is certified and is used to the process it shouldn't take too long. The key is to communicate with your printer so that all expectations are understood. Once the approval is given by the certifier, the high resolution label can be placed for output in the file.

--

For a nice overview on the subject of chain of custody and other print related environment/sustainability issues, go to Spicers Paper and click on the environmental tab.

--

Next Post: A discussion of certification labelling such as the Mixed Sources label.

Latest Launches: September Edition

Thu, 16 Sep 2010 09:39:00 -0400

Business is booming and we've been super busy as of late. As a result we haven't really gotten around to letting anyone know about all of the websites we've launched in the past while.

In a bit of a game of catch up, here's three of the more recent websites we've launched.

Bread Bar

Earth to Table Bread Bar is a new addition to the great community on Locke St in Hamilton. Artisan Bakery by day, Pizzeria by night.

Photos, videos and the store vitals -- including a full menu -- make up the content of this site.

Also included on this site is a complete install of Forge Press. This allows Bread Bar to manage and keep in touch with their mailing list directly through Forge. If they have a major announcement, upcoming event or special they can send out a customized HTML email to everyone on their list with the click of a button.

Best Agents

Bestagents helps real estate professionals improve their marketing skills in order to help their clients and themselves.

Through this site, Bestagents members have access to free downloads, MP3s, letter templates and other resources. With the integration of Forge Cart, visitors can purchase products, enter coupons and pay (in this case) via PayPal.

King Sh*t Magazine

This video-heavy online version of a premiere Canadian skateboarding magazine was designed to take full advantage of the mobile experience.

This site boasts video in a format compatible with iPhones and iPads, and an innovative online magazine browser optimized for the iPad.

(Warning: content may be offensive to some - actually, it probably will be.)

A Free Twitter Template

Mon, 13 Sep 2010 13:45:00 -0400

If you've ever needed to design a Twitter page - whether it's for a client's new social media initiative or your own company, you'll realize there's a lot of moving parts on that page that it would be handy to be able to edit - especially if you need to provide a mockup.

Enter the factor[e] Twitter template.

All the text, colours and so on are layered and editable, so you can make sure the page looks exactly how you or your client wants it before even venturing into Twitter's theming tool. It's also a great way to find out how your Twitter background art will look when covered up by the main interface.

The file's provided as a PSD, free of charge. Make cool things with it!

factor[e] Twitter Template PSD (397.4 KB)

Overwriting the Default nanoc Template

Fri, 10 Sep 2010 16:53:00 -0400

nanoc is a set of ruby scripts that let you generate a static website from a template and some simple content files. When you type "nanoc create_site my_site", nanoc creates a directory called my_site and populates it with a new nanoc app, including some default templates and content.

Very simply, this is how nanoc works: when you compile a site (with "nanoc compile"), nanoc looks at the files in your content/ folder, parses them one at a time, and sticks the parsed data into a template in your templates/ directory. The output goes in the output/ folder, which is a complete static site ready for uploading to your web server.

If you are only going to be creating a couple of sites with nanoc, the default content, templates and styles are fine. But if you are going to be using nanoc for a lot of projects, you might have other preferences. For instance, I have a basic html layout and an a reset stylesheet I like to start with when coding sites, so I would rather have nanoc generate those. Also, nanoc supports many filters: you can write your content and templates in html, haml, markdown, textile and so forth. Since I like using haml, that's how I want my default templates to be written.

There are a couple of ways you could work around this: you could have a default template you copy into each new project when created (boring and repetitive); you could edit the base nanoc code (and re-edit everytime you update it); you could plead with the developers to add a feature letting you specify a template (it might get added someday); or you could wrap the "nanoc create_site" call with your own ruby script and overwrite the defaults yourself (I called the file hammock.rb, for obvious reasons :)

Now, you can just type "./hammock.rb my_haml_site", ignore the warnings about overwritten constants, and start making your awesome site.

Ruby Gotcha With Array::uniq!

Mon, 30 Aug 2010 16:25:00 -0400

Here's one from the "I-Banged-My-Head-Against-The-Wall-Trying-To-Figure-This-Out-So-I'll-Post-This-So-You-Don't-Have-To" Department:

I had a method that added a bunch of stuff to an array, then did some clean-up to it before returning it. The method initially had some working code in it like this:

def get_stuff # collect stuff here... stuff.uniq! stuff.sort! { |x,y| x.list_order <=> y.list_order } end
Then, I realized that the method shouldn't sort the array, so I deleted the last line, like so:

def get_stuff # collect stuff here... stuff.uniq! end
At some point later, I noticed that my app was sometimes broken and sometimes worked fine, and then spent a bunch of time trying to figure out why. I got some other people involved and then Mark said, "Oh, I've done that before."

Can you see the annoyance in my code that Mark saw right away?

It turns out that Array::uniq! will return itself, i.e. a unique array ONLY IF IT ACTUALLY DID SOMETHING. Otherwise, it returns nil. So, when I deleted the line of code that did the sorting, I introduced the possibility that my method would sometimes return the value I was expecting, and sometimes not.

Arrgh.

Automatically Encode Video to HTML5 Formats With Zencoder

Fri, 20 Aug 2010 13:27:00 -0400

(Note to readers: this is a highly technical tutorial aimed at intermediate to advanced Rails developers who wish to add video encoding capabilities to their application.)

Online video is increasingly popular, so managers, clients, and most importantly users, are clamouring for integrated video capabilities on websites.

However, serving video online can be a tricky proposition. There are only a few video formats that are useful for the web, and many (or most) devices and video editing software suites produce video that falls outside of these formats. Additionally, you may have requirements such as a particular bitrate, a consistent size, or the generation of thumbnail images.

Sites like Vimeo and YouTube offer easy upload and encoding of videos, but very limited control. Integrating FFMPEG directly into your application also has its drawbacks, such as extensive CPU usage, and leaves you dealing with the headache of supporting a myriad of video formats and codecs.

There's an obvious market opportunity for services that do the hard work of researching codecs, developing encoders, and maintaining infrastructure for you. Several exist, but it was a relative newcomer that caught our attention: Zencoder.

Why Zencoder? In a nutshell, Zencoder offers a robust platform, an excellent and easy-to-utilize API, a superb web interface, reasonable pricing with pay-per-encoded-minute plans, and best of all, easy access to core developers who are willing to work with you to develop superb video encoding solutions.

No matter how easy they try and make it, however, video encoding is not an easy addition to any Rails project. This tutorial walks you through the process, focusing on all of the hard parts and providing plenty of source code that you can use in your projects. Views and standard controller actions (e.g. delete) are excluded - your Rails skills should be at a level where these are trivial for you.

Requirements

This relies on using Paperclip for file attachments, although the integration with Zencoder would work equally well using any other method for file uploads. The assumption that you have installed Paperclip and are reasonably familiar with it is made throughout this tutorial.

In our content management system, we use SWFUpload to upload the original video files, as they are often very large (up to a couple of gigabytes), so a regular HTTP upload is not suitable. We'll leave the details of that implementation up to you as there are plenty of tutorials on how to use SWFUpload and related technologies, and you may also be using something else to get the videos up to your server before transfer to S3 via Paperclip (e.g. FTP).

This also demonstrates using S3 to host the video files as this is the easiest way to retrieve the output files that are produced by Zencoder; as well, it's one of the cheapest ways to host large files. If you aren't interested in the S3 integration portion of this tutorial, you can skip the S3-focused portions and read just the Zencoder-related portions if you wish.

You'll need an account with S3 (https://s3.amazonaws.com/) and with Zencoder (http://zencoder.com - free accounts available for testing purposes) to complete this tutorial.

Integrating Your Video Model With S3 And Paperclip

Start with the model for which you want to encode video - in this case, we'll be using the obvious choice Video. We'll add in the Paperclip fields that are necessary for storing information about the video and a thumbnail image that we'll ask Zencoder to create for us.

Start by getting the Amazon S3 gem with gem install aws-s3.

In config/environment.rb, inside your Rails::Initializer.run do |config| block, add:

config.gem "aws-s3", :lib => "aws/s3"

Underneath the config block (or in an initializer if you prefer), add:

require 'aws/s3'

Now, assuming that you have a model called Video already, add fields to it for handling the attachments and some additional information that we'll be retrieving or setting with script/generate migration add_video_fields:

Now it's time to tell the Video model to use S3 for its attachments. In this case, we'll be using S3 specifically for the video attachments, allowing other storage (such as the file system) to be utilized for other attachments as necessary. If you wish, you can modify these instructions to use S3 for all attachments. In the next gists, comments will indicate where and what adjustments you would make to utilize S3 for all attachments instead.

Create (or modify if it exists already) the file config/initializers/paperclip_defaults.rb:

(Don't forget to restart your app after making this change, as without a restart these new settings won't be loaded.)

Note that this references a file called config/s3.yml. We need to create that as well if it does not exist, and put our S3 access keys into it. We'll add the standard development, test and production buckets.

development:
  bucket: YOUR-PROJECT-NAME_development
  access_key_id: # obviously, your actual S3 keys will go in here 
  secret_access_key: 

test:
  bucket: YOUR-PROJECT-NAME_test
  access_key_id: 
  secret_access_key: 

production:
  bucket: YOUR-PROJECT-NAME
  access_key_id: 
  secret_access_key:

Now we need to declare that Video has attached files for the video and the thumbnail image. Open up app/models/video.rb and add somewhere near the top:

Now it's time to set up your buckets in S3. There are lots of tools for this, but Amazon has released a decent web-based console that you can use.

Create buckets that correspond with the ones you've defined in config/s3.yml, so in this case, buckets for YOUR-PROJECT-NAME_development, YOUR-PROJECT-NAME_test, and YOUR-PROJECT-NAME. While you're at it, create a bucket for the encoded files that Zencoder will create (we'll store the bucket information in a separate config file that we create just for Zencoder). Call it YOUR-PROJECT-NAME_encoded.

Note that bucket names must be unique across all of S3.

Integrating With Zencoder

Now the fun begins. We'll be taking a lightning quick tour, source code provided, for how to integrate with Zencoder for video encoding that will impress your clients like practically nothing you've done before. We're not going to dwell too much on the technical details for how the integration works, for that, you can read their API.

Start by granting Zencoder the appropriate permissions to the S3 buckets we just created. Grant "list" and "upload/delete" permissions to the buckets (why the console does not display "READ", "WRITE", "READ/WRITE" and so on is beyond me) like so: select the bucket in the web-based console, click on Properties, select Add more permissions, enter "aws@zencoder.com" as the grantee, then check the appropriate checkboxes and click Save.

You should do this for four buckets (development, test, production, and encoded).

Now you need to add a method that will accept notifications from the Zencoder service to the controller, which I'm assuming is called videos_controller. (This is also where you'll have your new, edit, create, update, etc. methods for videos, which I'm assuming you are fully capable of creating yourself - you will need at minimum new and create actions so you can upload the original videos). Just drop in this dummy method:

# capture notifications from the Zencoder service about video encoding
def encode_notify
end

If your videos controller is under access control (e.g. it is part of an admin panel), you're going to want to skip the before_filters or whatever you are using for access control, for the encode_notify action. You're also going to want to drop the CSRF protection for that method:

protect_from_forgery :except => [:encode_notify]

Of course, you can also create a separate controller just to capture notification requests if you don't want to follow this approach.

Add in the route for this action as well - it should be a :post request.

We've now set up enough stuff that we can create a configuration file for Zencoder. Create a YAML file called zencoder.yml in the config folder, and drop in some settings for the encoded bucket and some other key information about your app and the way we want videos to be encoded. It should look like this, as a minimum:

s3_output:
  bucket: YOUR-PROJECT-NAME_encoded
  access_key_id: YOUR-ACCESS-KEY-ID
  secret_access_key: YOUR-SECRET-ACCESS-KEY
settings:
  notification_url: http://YOUR-ENCODE-NOTIFY-URL-HERE, e.g. http://myproject.com/videos/encode_notify

Note that for your app to automatically receive updates from Zencoder about video status, your encode_notify path must be accessible by Zencoder, i.e. the app must be online. However, Zencoder provides a handy alternative way to receive updates about video status that works well in development mode, which we'll cover in a minute.

Now we'll add a private method to our video model to retrieve these settings from the configuration file:

def zencoder_setting
  @zencoder_config ||= YAML.load_file("#{RAILS_ROOT}/config/zencoder.yml")
end

We can use in our video model to retrieve settings, as in zencoder_setting["s3_output"]["access_key_id"].

Next up, we're going to integrate with the Zencoder API. To do this, we're going to build a simple class based on HTTParty. Start by installing HTTParty with config.gem 'httparty' in your config.rb and then rake gems:install, or just gem install httparty.

Now drop a file into lib called zencoder.rb. Here's some code you can use that will take care of the basics. This has several limitations, including but probably not limited to just one output format and just one thumbnail, but you can modify for your purposes as you see fit (be sure to put in your API key):

Your video model is going to need some code that will deal with S3 and the Zencoder class we just created. This example model has everything you need for that in it, with everything else that you'll probably want in your app removed (for example, stuff dealing with user associations, commenting, swfupload, etc.) The comments provide useful information about how the methods work:

You'll also need code in your controller that will trigger the video encoding, as well as a fleshed out encode_notify method that will accept notifications from Zencoder.

In our case, because we are using SWFUpload for uploading videos, all of our videos go through a single method, regardless of whether the video is a new or an updated video. That lets us drop in @video.encode! just in that one method.

Here are example methods that show encoding and the encode notification:

So long as you've ensured that the critical bit here, @video.encode!, exists in whatever method you are using to upload your video (convention would indicate 'create' and 'update', but as stated previously we're using SWFUpload due to large file sizes), encoding with Zencoder should commence automatically.

When it's done, Zencoder will attempt to notify your application that it is complete. This will fail, however, because in all likelihood your application will not be accessible by Zencoder when you're working locally.

What you need is a different way to notify your application that encoding is complete, one that works on your local development machine. Luckily, Zencoder has provided this with the zencoder-fetcher gem: gem install zencoder-fetcher

You'll use this gem like so: zencoder_fetcher -u http://localhost:3000/ENCODE-NOTIFY-PATH API-KEY. This will notify your application of the status of any encoding jobs.

In your views, you can instantiate a video and display its status with video.encoded_state If its encoded state is "finished", then display the video! It's accessible at video.output_url. And, of course, you can display thumbnails with Paperclip's standard syntax, e.g. video.thumbnail(:original) for a full-sized thumbnail of the frame.

I realize this is a ton of code and a lot of concepts. If you have trouble, feel free to add a comment below - I'll get an email when you do and if I'm able I'd be happy to help.

Turn Wordpress into an Image-Slinging Warhorse in Three Steps

Mon, 16 Aug 2010 12:50:00 -0400

Wordpress: know it, love it. One of the largest publishing platforms in the world, used by everyone from CNN to Kobe Bryant to some guy in Provo who really likes Tetris Party. Wordpress: something for everyone.

Where Wordpress really starts to fall apart is in the image-handling department. It's pretty easy to make and embed image galleries and to put images directly into posts. No sweat. If that's all you want to do, stop here. You're good.

If you want to do anything more ambitious - say, attaching an image directly to a post and then pulling it out later at a predetermined size for use in your template - then read on, intrepid Wordpresser.

First, you're going to want to find and install a plug-in called Custom Field Template, written by Hiroaki Miyashita. The site for it is entirely in Japanese, but the plugin itself is so straightforward, you won't need to learn a foreign language.
(Note: if you already speak Japanese, you're ahead of the game! おめでとうございます!)

Once it's installed, you'll see a plug-in settings page like this:

Aww geez - that looks complicated! Luckily, we can ignore 90% of that jazz and concentrate on the part that says Template Content. This uses some custom markup to indicate what kind of hooks we're adding to posts and pages. This entire system uses Wordpress' existing 'custom fields' system, so if you decide later that Custom Field Template isn't for you, you're not locked into anything.

Let's make an upload field for our image attachment. Insert the following into the Template Content box.

[image-upload] type = file label = Hey, I can upload an image!

The part contained in the square brackets is the name of the Wordpress custom field that the uploaded image will be associated with. If it doesn't exist, it'll get created when you upload an image - zero configuration! The type = file part tells the plugin to throw up a file upload box for us, and the label is to tell you what this is all about. If you're uploading more than one image to a page or post, this would be a good place to put a reminder, like "Upload the header image! Remember: it has to be at least 440px!"

If you check out your 'New Post' or 'New Page' pages, you'll now see something like this:

.. and once you've attached an image to your post, it'll look like this:

The image is associated directly with your post or page. Fantastic!

But wait - 'shopping images really sucks! You've got better things to do, like write your next opus of a blog post. No time for fooling around with image editors! Not to worry. Wordpress has an image-crunching algorithm built-in. Check Settings > Media.

Put in your digits. In this case, we've got a medium-sized image of 440 pixels width - the zero indicates it'll resize the height with respect to the width, rather than a fixed, absolute image size. Handy! Obviously these values should be tailored to fit your templates.

By setting these settings, you never need to run through another Photoshop gauntlet to make a new header image, byline, or whatever for your site - all the image-finessing action is handled by raster-happy pixies on the server.

So we've got the image attachment. We've got the image handling done on the server. How do we get the size we want into our site?

All it takes is a big ball of front-end PHP. Part of really digging into the guts of Wordpress consists of chaining together some of Wordpress' internal functions. Not all of them make sense (if you've ever run into one of Wordpress baffling gaps in obvious functionality, you'll feel my pain) and a lot of them are poorly documented. Think of this as a nugget of code, freed from the code mines.

If you're a programmer by trade and not merely by circumstance, this might be perfectly obvious. That being said, pulling out attached images from Wordpress seems to be a bone of contention on the web at large, so I'm sharing this in the hopes of a brighter, happier Wordpress-templating future. Are you ready? Here it is:


<?php

$key = "image-upload"; 

$keymeta = get_post_meta($post->ID, $key, true);

$img = wp_get_attachment_image($keymeta, $size='medium', $icon = false);

echo $img;

?>

Urgh. Take a breath, it's not that bad. Let's break this down.


$key = "image-upload";

So here we're merely telling Wordpress what we want to pull out - the name of the custom field.


$keymeta = get_post_meta($post->ID, $key, true);

Hey Wordpress, remember that value I just gave you? Pull out the data in the custom field with that name, s'il vous plaît. (Yes, you could easily replace $key in this line with the value from the first line. This keeps things a little more parsable, in my opinion.)


$img = wp_get_attachment_image($keymeta, $size='medium', $icon = false);

Magic happens! Wordpress mashes up the post ID, the custom field value, and the size we want (medium), and pulls out a fully fleshed html <img> tag.


echo $img;

Finally, we nudge PHP to do some work and it turfs the aforementioned tag into your template.

There you have it - three pretty simple steps to make Wordpress into a macho powerhouse of image storing, styling and serving.

3 jQuery plugins I use all the time

Thu, 12 Aug 2010 09:36:00 -0400

When making anything over and over you tend not to notice repetitive actions. The other day I stepped back from what I do and I noticed a few things. I've used a lot of jQuery plugins. I started looking through some of the ones I use consistently and came up with these three.

jQuery Cycle

Fancy front page slide shows are all the rage right now and jQuery Cycle is my favourite solution. I've tried SerialScroll as well, but I've found over and over that jQuery Cycle is much easier to implement.

First include the files in the head:

Build your photo collection wrapped in a div:

Add some styles:

Then all you have to do is add the specs into your chosen applications javascript file:

This will cycle through each child of #rotating-photos. It is also very easy to add and style previous/next buttons as well as pagination. There are a pile of examples here to help you get started.

jQuery Corner

Have you ever noticed how designers seem to love rounded corners? To do this you used to have to make all kind of images then use some fancy CSS to get it all looking right. And once you get it working in Firefox or Safari you have to do it all over again for Internet Explorer. Good times.

jQuery corner is a cross-browser solution to those woes.

Create your object:

Style your object:

And tell your script to round the corners:

Don't forget to include the files in the head:

You can also do a number of other things to your corners such as "Sharp," "Fray" or "Wicked." There are quite a few possibilities that I don't think I would ever use, but it's always nice to have options.

jQuery Hint

This one is really straight forward. It provides a "hint" in a text field which disappears when the field is in focus.

Include the files in the head:

Add you field, which will obviously be part of a larger form:

Then simply call it up from your javascript file:

That's it! The title you've added becomes the hint in the text field.

Anyone else have any favourites?

Operator Precedence and Code Readability in Ruby

Fri, 30 Jul 2010 14:51:00 -0400

I was reading about operator precedence in ruby the other day and noticed that the "and" and "or" operators are NOT the same as the && and || operators. They are actually about 6 levels of precedence below && and ||, meaning that there is a lot of stuff that gets processed before "and" and "or" become relevant.

This means that your logical expressions can become a little more readable by using a mix of the two kinds of logical operators. Compare this:

(var1 || var2) || (var3 && var4)

with:

var1 || var2 or var3 && var4

Goodbye NetBeans, Hello Textmate

Mon, 26 Jul 2010 15:39:00 -0400

I recently decided to give up on NetBeans as my editor/IDE for my rails development as it was bogging my system down too much. It, coupled with 20 open tabs in Firefox, and my countless desktop widgets were making my system unusable. Rather than cut back on widgets, I've decided to give Textmate another shot, and have been really happy with it, after an initial period of adjustment.

This adjustment period has been made a lot easier by GetBundles. This handy little bundle, incidentally, has allowed me to continue with my plugin/habit habit. It itself, is an easy install, and it allows you to install other bundles through the TextMate UI.
There were initially a few almost show-stoppers for me, in particular the really slow "search in project" functionality. As a replacement, I've been using "ack in project" which I installed through GetBundles.

After modifying the .ackrc file as below to have ack search all file types and group, it returns useful search results REALLY quickly:
One thing that I still miss from NetBeans is the ability to ctrl-tab through my open files, like in Firefox. TextMate allows for switching b/w open files, but only from left to right in the list of files you currently have open. Has anyone found a way to get ctrl-tab type switching working in TextMate?

Other than this minor adjustment I've had to make in the way I navigate, I've found the switch fairly easy, and definitely appreciate the lack of overhead in this lightweight editor.

GeoTrail Featured on CBC News

Wed, 07 Jul 2010 16:04:00 -0400

The CBC nightly news in Toronto recently did a short piece on the GeoTrail website, check it out below!

CSS3 Transformations

Wed, 30 Jun 2010 16:45:00 -0400

Transforms are a feature of CSS3 that let you apply matrix-based transformations to html elements. There are two properties that you can use to apply the transformations: transform, which specifies the actual transformation(s); and transform-origin, which specifies where in the element the transformation acts on.

There are four basic transformations you can apply to an element. A translation just moves the element around, and I am not sure if practically there is any difference between this and top and left. I think you just get translations for free when you implement matrix transforms. Scaling means stretching or shrinking the element. It's kind of cool, because when you do it, the internal elements scale too, which means text gets bigger and so forth. Skewing an element means that you push it sideways and turn it into a parallelogram instead of a rectangle. And a rotation means spinning it.

And this is where the transform-origin property comes in. Using rotation as an example, the default is to rotate the element about its centre. If you want to rotate it about one of its corners, or any other point, you can change that by modifying transform-origin.

There are several ways of applying the transformations. If you are mathematically inclined, you can use the matrix() function and pass in your raw transformation. Luckily, there are helper functions that let you just specify a simple rotation, for example, with rotate(33deg).

If you are using multiple transformations, and you are not using the matrix method to indicate them, you must define them on one line, like this:

transform: rotate(45deg) scale(2);

Trying to define them on multiple lines won't work; writing:

transform: rotate(45deg); transform: scale(2);

will only apply the last transformation, as it's analogous to writing something like:

border: 1px; border: solid; border: black;

These transformations allow you to add a lot of interesting effects, and give you the option of some interesting layouts. Practically speaking, however, they seem to me to be most relevant in the context of fixed layout web sites. For example, in my bauhaus poster example above, I still have live, searchable type, which is a bonus, but the whole concept of page flow has been bent, broken, trampled, put through a shredder and lit on fire. Trying to dump dynamic content into this (without resorting to overflow:scroll;) would not be good.

Having said that, now that the designers in our office have seen this, I'm sure I'll be asked to make it work >:(

PS: It should go without saying that these demos only work on Mozilla- and Webkit- based browsers, mostly because I couldn't be bothered trying to figure out the math to make it work with IE's weird filter thingy.

Narcissism is the New Black

Tue, 29 Jun 2010 16:03:00 -0400

A Personal Recollection of Recent International and Personal News

Earlier this month a young person on a bus, speaking to a friend, commented on the sad state of humanity. "People," she said, "especially North Americans, are just spectators, who sit watching on TV as crisis after crisis devastates our planet."

In many ways she's absolutely right. I did not write a letter to Stephen Harper protesting the use of a billion tax dollars to turn downtown Toronto into a fortress for the G20. I did not help clean up the Gulf of Mexico after the oil spill. I did not fundraise to get Greece out of debt. I did not spend any time planning Middle East peace. Nor did I, in any way, help stop the violence in Kyrgystan.

Here is my personal account of recent news:

On April 20, 2010, an oil rig called Deepwater Horizon exploded, spewing a constant flow of oil thousands of feet underwater. Also on April 20, I had a group presentation worth 100% of the mark in one of my classes. When I finished that presentation I raced home to finish another project for the following day, so I could get to a printshop before it closed. I found out about the oil spill five days later.

May 5, 2010 was the date of the general strike in Greece and the country was paralyzed. Greek unions decided to strike in reaction to a huge aid package from other Euro nations that would inevitably have to be repaid by the Greek people. On May 5, I left Hamilton first thing in the morning for a portfolio review in Toronto, at a design firm I was considering working for.

I later stopped at a second location, to drop off a portfolio and introduce myself. Both interviews went well. On my return home I found that I had several voice mails from two clients and four urgent business emails.

On May 25, 2010, the Canadian Government announced that it was going to spend $930 million dollars on security at the G8 and G20 summits starting June 25. Also on May 25, I had an interview at factor[e] for an internship position. I was completely oblivious to political decisions being made hundreds of kilometers away.

In Kyrgystan, on June 7, 2010, a crime boss named Aibek Mirsidikov was assassinated. He had earlier attempted to seize control of the city of Jalal-Abad. Intense and prolonged violence in this city and others was driving this city into anarchy. June 7 was also the first day of my internship at factor[e].

Today, hundreds of other conflicts, political schemes and criminal activities are taking place everywhere. Meanwhile, I'm eating lunch and writing this factor[e] blog post in the fourth week of my internship at this organization.

Here is my personal prediction for the future:

There are going to be a bunch of wars and ecological disasters, corruption and crime will continue, people will be born and people will die. Meanwhile, many individuals and organizations will plan for the future, artists will make art and authors will write books and countless numbers of people will go about their day-to-day lives.

This afternoon I am going to work on a website or two and edit this blog post, but first, I'm going to get a coffee.

Migrating from sqlite to mysql -- UPDATED

Tue, 29 Jun 2010 13:42:00 -0400

We recently moved some of our sites, and in the process moved the older sites off of sqlite3, in favour of mysql. This sounds like a really annoying task, but it was actually rather painless. I made use of the handy plugin yaml_db, which does most of the heavy lifting for you.

Here it is in 3 easy steps:

First step is to install the plugin:

script/plugin install git://github.com/adamwiggins/yaml_db.git

The second step is to dump the database, using your current database.

rake db:dump

The final step (this one is tricky) is to build your new database with your old data.

Change your database.yml to your mysql connection.

Run rake db:load.

That's all there is to it!

One final thought is to make sure you modify any database specific functions, such as "RAND" to their mysql counterparts "RANDOM"

-- EDIT --

Ok, so I'm full of shit.

This works a lot of the time, but sometimes.... it doesn't.

I found another route, which is actually just a one liner:

sqlite3 db/development.sqlite3 .dump | perl db/convert.pl | mysql -uroot XXXXXXX_development

This assumes you are running from your project root, and have the convert.pl script in your db folder (and that you're using the root db user with no password). Just put your database name in where the XXXX's are.

The convert.pl script is a slightly modified version of a script I found on stackoverflow.com. I needed to add a couple of regular expressions to clean up some improperly escaped single quotes, and allow for the indexes to be created.

Here is my updated version:

This MAY work for you, or may need to be modified to catch whatever quicks are in your specific schema. Download and save the file locally as convert.pl.

Now that's all there is to it.

Going Mobile

Tue, 22 Jun 2010 12:10:00 -0400

It's pretty obvious: a big part of the future of the web is mobile - smartphones, iPads, other mobile devices. We're increasingly reading websites on smaller screens with new and different input methods. When I had a dumbphone, I thought, "Psh, web on my phone? That's dumb." Now that I have a smartphone, I use mobile browsing everywhere. Why? It delivers information when and where I want it.

Some sites and services have embraced this and produced really slick mobile versions. Gmail is a great example of this. Check this out - that's exactly the same mailbox - one's optimized for my giant desktop monitor and the other's designed specifically for the touch input and limited size of an iPhone screen.

On the other hand, a lot of other sites that are great on the desktop have a crummy (or non-existent!) user experience on mobile devices. Let's say I wanted to check my bank balance.

Desktop version: no problem. Mobile version - Whoa, what? I can't read that. I'm going to have to pinch and zoom like a madman to use this site.

What can we take away from this? There's a handful of lessons to learn here.

Think about what your users might want to do online. In the case of Gmail, this is obvious: read e-mail. Google's done a good job of optimizing their mobile interface to do just that, and not much more. I don't expect a mobile site to have all the bells and whistles - I'm not going to apply for a mortgage on my phone, for instance - but supporting those base functions should be job #1.

Think about the interaction model. Humans tend to have giant fat fingers, compared to the 1-pixel hit area of a mouse pointer. Clickable items need to be big and noticeable. That's great for iPhones, but what about Blackberries? And that's great for Blackberries, but what about Palm devices, etc.? Make sure you've covering all your use cases.

Think about the device itself, and its connectivity. Having a bare-bones mobile site is better than getting the full desktop experience on your mobile device. I don't want to load all those graphics! Data is expensive, man! Most of the mobile sites I came across in putting together this post were smart about this: text interface, great use of CSS, and images only where necessary.

I've been pleasantly surprised to find a super mobile version of a site way more often than I've had to deal with a compressed desktop version. Overall, I think there's increasing awareness of how to make a great mobile site, and why it's valuable. By thinking about these kinds of rules of thumb and best practices, we're helping to keep that awareness growing.

The mobile browsing trend is still accelerating. Let's make sure we're ready to build great experiences.

WTF is HTML5 and why we should all care

Wed, 16 Jun 2010 14:13:00 -0400

NOTE: I did not design this infographic, nor did I have anything to do with the making of it. However, as a designer who has very little development skills, I found this infographic to be quite good in explaining this new era of web technology.

Click HERE for a full-size view.

The Problematic Faucet

Mon, 14 Jun 2010 10:58:00 -0400

Sometimes as web designers, it can become difficult to consistently produce designs which maintain a high degree of originality. Sometimes we find ourselves in a bit of a rut, using the same styles and 'tricks' over and over again. And while they may 'work', and the clients may really like the design, it's not a very gratifying place to be, creatively. To me, creativity implies originality; and originality requires inspiration. Problem is, creativity isn't like a faucet that can be turned on and off again at will. Creative inspiration may come while kayaking around a harbour or riding a bicycle. Ideas and solutions may come in the middle of the night, or while watching a soccer match on a Sunday afternoon. But rarely does that faucet turn on at nine and off again at five.

So we as designers have to learn to cope with the fact that sometimes the faucet trickles, sometimes it gushes and yet other times it's completely dry. While we have no control over when inspiration will happen, I think the best thing we can do is to immerse ourselves in other worlds of right-brained creativity - worlds other than graphic and web design.

Look to Photography

Most times, a site's colour scheme is mandated by the company's branding, but sometimes we get to choose - though this sounds much easier than it actually is. When presented with virtually limitless hues, it can become a real challenge to settle upon only a few solid swatches. In recent years though, online tools such as Adobe's Kuler will help you attain some inspiration, but perhaps an even better method of selecting a colour palette is to look at photography - specifically landscape photography. Sometimes I'll spend hours looking at the photos taken by great photographers like Machel Spence, Jesse Estes and Helen Kvam, admiring the gorgeous hues in the brilliant vistas of their work. Millions upon millions of colours exist in nature, so why not let the natural world inspire you?

Look to Fashion Design

While I've never considered myself 'fashionable', I think the world of fashion design has much to offer us web designers. Fashion is tangible, and we all need it on some level or another (we all need clothes), so all of us can relate to at least one aspect of it. Colour, pattern, trim, fit, feel, material, practicality and even price have much in common with most other design disciplines, and since we live within a very fashion-forward culture, following trends in fashion can be an excellent way to stay ahead of the trends in graphic/web design. There may be better sites out there (remember, I'm not 'fashionable'), but here are a few sites I check out from time to time when I'm seeking out some inspiration.

fashionmagazine.com
next.co.uk
style.com

Look to Industrial Design

Thanks largely to guys like Jonathan Ive and Karim Rashid, we've all become accustomed to what industrial design is in recent years. Despite the lackluster title, industrial designers shape the way all the products around us look. Even the screen on which you're reading this blog post has been designed by an industrial designer. While us web designers work with pixels rather than pens, clay, foam or SolidWorks, we can certainly draw inspiration from the physical realm. Studying materials, texture, form, balance, practicality and of course user-experience can all help inspire us when designing for the screen. Here are a few sources to view the latest and prettiest in the world of industrial design.

yankodesign.com
core77.com
industrialdesignserved.com

Listen to Classical Music

I've always preferred instrumental over music with lyrics, because I think it leaves more up to the imagination. Instead of listening to a story being told to us, instrumental music and especially classical music leaves us to interpret the mood ourselves and make up our own story. This is an excellent exercise for us to keep our creativity as fresh as possible. The patterns, themes, variations, melodies and harmonies all combine to help create a setting, a mood, and a story. Go ahead and close your eyes while you listen, and let your imagination take over. If you don't know where to begin, might I recommend Gustav Holst, Johannes Brahms or Thomas Newman.

While looking to these other areas of creativity, keep an open mind and try to find beauty in the details. With a child-like sense of awe and wonder, appreciate the time and effort that went into the symphony, the product, the runway show and the surreal landscape photograph. And remember, the creators of these works were probably just as frustrated and stuck for inspiration as you have been.

No Aliens Required

Tue, 01 Jun 2010 10:19:00 -0400

The Washington Post recently reported on a conference that the US Library of Congress is having about portolan charts, which are maps produced as early as 1275 that are stunningly accurate.

It is a rare representative of one of the world's greatest and most enduring mysteries: Where and how did medieval mapmakers, apparently armed with no more than a compass, an hourglass and sets of sailing directions, develop stunningly accurate maps of southern Europe, the Black Sea and North African coastlines, as if they were looking down from a satellite, when no one had been higher than a treetop?

The answer is simple: aliens. At least, that's what some people think, says Evelyn Edson, one of the conference's speakers and author of "The World Map: 1300-1492".

The phenomenon of attributing major advances from historical times to aliens is pretty common. A lot of people think that the pyramids were built with extraterrestrial help, and the astronomy of the Mayans is frequently chalked up to alien contact.

If it's amazing and it's ancient, people are often easily persuaded that there's no way a human could have done it on their own.

What it really shows, however, is the widespread belief that people living in ancient times were not as intelligent as people who live now.

That, of course, is nonsense. Although modern industrialized societies have certain advantages over ancient societies that may help boost the baseline intelligence level of their populations (such as good nutrition), there is no reason to think that the average well-off citizen of ancient Rome or Maya was any less intelligent than the average citizen today.

The span of time between ancient Egypt and now is a blink of an eye in evolutionary terms and no significant evolution of the human brain has taken place in that period. So when we consider Egyptian achievements, we must do so keeping in mind that these were highly intelligent people.

A complement to the belief that people in ancient societies were generally stupider than people now is the idea held by many individuals that they, personally, are better educated and more knowledgeable than an individual living hundreds or thousands of years ago.

While it is true that on the whole modern societies are better educated than ancient ones, that does not mean that the average citizen of a modern society is better educated than the best educated citizens of ancient societies.

The theorem of geometry that states that in a right-angled triangle the square of the hypoteneuse is equal to the sum of the two other sides squared (a² + b² = c²) is generally attributed to Pythagoras, who was born around 570 BC, but the principle was known since Babylonian times. And yet, the average North American will give you a blank stare if you ask them about it.

Most people just don't need this knowledge, just like they don't need the knowledge required to create a detailed map without the use of satellite photography. And so, since they have no idea how they would go about solving a particular problem, they assume that people in ancient times would not either.

This is no more true than the assumption that just because they can't solve for x, neither could someone in ancient Greece.

The remarkable accomplishments of hundreds and thousands of years ago illustrate a fundamental fact: great solutions are designed by people who are motivated to solve great problems.

The people who drew the incredibly detailed and accurate portolan maps between the thirteenth and sixteenth centuries had no access to modern surveying and mapmaking technology.

They faced immense obstacles in designing an accurate, reliable map that would assist sailors over great distances through often treacherous obstacles. But the need to overcome this problem was great enough that, relying on their intelligence, education and ingenuity, they developed a solution whose origins baffle modern scholars.

No aliens required.

Applying / Merging Changes From One Git Repository To Another

Fri, 28 May 2010 07:00:00 -0400

This tutorial demonstrates how to apply changes made to a project hosted in one git repository onto a completely separate project in a different git repository: essentially, merging changes between two totally separate git repositories. If you don't use git, this will likely not interest you much.

Consider two projects that are both managed with git that do not share a commit history of any kind, i.e., one is not a branch of the other. It may be the case, however, that in real life they have a common ancestry.

For example, if you have a project in git that you copy into a new git repository, you will end up with two projects that as far as git is concerned are totally separate. However at the moment of copying they are identical to one another, and over time still share many similarities.

When changes are made in one repository, you may want an easy way to transfer them from that repository to the other, similarly to the way in which you merge changes from one branch to another. You can do that with patches.

We'll call the first project the "source" and the second project the "target". The source project is the one in which there are changes you also want in the target project.

Start by going to your source project's directory. Use:

git log

To find the commit you want to create a patch since. Use the commit that is the one immediately before the first one you want included in the patch (i.e. the commit you choose is not included in the patch). For instance, if your log looks like this (abbreviated):

commit 29cebfa985b3621b79b6d462393a91b97fea14bb 
Author: Adrian Duyzer <adrian@Macbook-Pro.local>
Date:   Thu May 20 00:00:38 2010 -0400 
fix issue with levels

commit 8a5cfe37cdc838c055e38a4783c724996a71d15f 
Author: Adrian Duyzer <adrian@Macbook-Pro.local>
Date:   Wed May 19 23:27:27 2010 -0400 
freezes and thaws

commit 5ebe34bcb343a272ffda331db2f30dfffa52240f 
Author: Adrian Duyzer <adrian@Macbook-Pro.local>
Date:   Wed May 19 16:15:34 2010 -0400 
notes, date report error fix

And you want a patch for the commits "freezes and thaws" and "fix issue with levels", you will want to start with commit 5ebe34bcb343a272ffda331db2f30dfffa52240f, which is the one right before the two that we want.

In this case, we're dealing with a different series of log messages, where the commit hash immediately before the changes we want is actually 34382279d69e676e7739c9c225ada307a864288b. Using that commit hash we now proceed to create a series of patches like so:

git format-patch 34382279d69e676e7739c9c225ada307a864288b

This will create a series of patches that are each named according to the particular commit that was created, e.g. like:

0001-removed-forgery-protection-from-application-controll.patch 
0002-cleaning-up-updating-spawn.patch 
0003-new-version-of-spawn.patch 
0004-dispatches-are-now-sent-in-the-background-via-spawn.patch 
0005-new-help-button.patch 0006-minor-help-text.patch

Each of these files contains the information needed to apply your changes to the other project. They are not difficult to read and in fact, you can make changes to them if you want (incidentally, Textmate will also automatically syntax-highlight the patch files and I'm sure it's not the only IDE that does so).

Now, copy these files to the folder where your target project lives, then cd to that folder.

For each of the patch files you want to:

Check what files are affected by the patch
See if you can apply the patch cleanly
If you can, apply it
If you cannot, you may need to edit the patch to apply it cleanly.

To check what files are affected:

 git apply --stat 0005-new-help-button.patch

To see if you can apply the patch cleanly:

 git apply --check 0005-new-help-button.patch

If nothing is returned, you can apply the patch with:

 git apply 0005-new-help-button.patch

Otherwise, you'll get something like this:

error: patch failed: app/models/mailer.rb:14 
error: app/models/mailer.rb: patch does not apply 
error: patch failed: config/forge_config.yml:1 
error: config/forge_config.yml: patch does not apply 
error: patch failed: config/routes.rb:33 
error: config/routes.rb: patch does not apply

If you have errors, the entire patch will fail to apply. However, if you want to apply just the parts that will work, you can do so with the --reject flag:

git apply --reject 0004-dispatches-are-now-sent-in-the-background-via-spawn.patch

This will create files with a .rej extension in the same folder as the files that it failed to patch. You can find these with:

find . -name *.rej

Take a look at those files to figure out how to proceed. Alternatively, just look at the output of git when it complains about stuff. It should be fairly easy to make the changes you want manually. Once you're done making those changes, delete the .rej files.

You can also manually edit the patch files as stated above.

When I did this, although I'm not sure if this is a best practice or not, each time I successfully applied a patch (or made the adjustments manually), I committed my changes and then moved on to the next patch. That way, if a patch applied really messily, I had an easy way of determining which files were changed or added (git status) and could revert if needed.

Incidentally, the more atomic your commits are, the easier this process is, because you can skip patches that you don't want. For example, you will often get rejected patches for things like configuration file changes, but if those were committed separately, it would not be a problem as you could just skip them. Yet another reason to create clean commits (with sensible commit messages!)

When you're done, delete your .patch files. You've successfully patched your app!

Final tip: you can also create a single patch with all changes in it. If you use the --reject flag when applying it, this is probably the easiest and fastest way to patch things. Do this like so:

 git format-patch REVISION --stdout > PATCH_NAME.patch

Building a Solar System with Raphaël

Fri, 21 May 2010 12:36:00 -0400

Remember the first time you looked at some Assembly code, and you thought, "OMG, WTF is this?" That's kind of how I've felt every time I've looked at SVG markup. So, when I stumbled across Raphaël, a javascript library that lets you create and manipulate SVG images on the fly, I thought that this might be a good way to finally learn something about this stuff.

SVG (w3, wikipedia) stands for "Scalable Vector Graphics." These are graphics that, rather than being defined on a pixel by pixel basis ("raster graphics"), are instead defined by mathematical equations ("Draw a line from (0,0) to (25,4). Now draw a funky curve to (-12,-8). Now draw a line back to the start. Fill it in with chartreuse"). The big problem with raster graphics is that when you try to scale them up, you don't have the information to do so, and you lose quality. With vector graphics, though, you just change the scale of the graph and run the calculations again, and your image is a smooth as butter. SVG markup is a language like html or xml that lets you create all those funky shapes and chartreuse fillings and render it in an html <canvas> element.

Raphaël's super-awesomeness is that it wraps up all of this stuff in javascript, with the following benefits:

because you are used to javascript, the barrier to entry on SVG is lower
SVG elements become objects, and attributes become properties, and this makes them easier and more intuitive to use
since you are probably using js to manipulate the rest of your site, why not put all this stuff in the same place?

There are a couple of downsides, though. For instance, you are still going to have to learn all the arcane syntax that lets you create paths more complicated than simple shapes, and gradient fills, and all that stuff (remember Logo and that damned turtle?). And, if you want to make complex shapes, you had better get some graph paper, because this stuff can get tricky to do in your head. And, since we have introduced another layer of abstraction, SVG features not implemented / improperly implemented in Raphaël will be unavailable to you (I'm thinking of the "viewport" property in particular, but I could be wrong about this.) Still, those are all arguments you could make about any language/library, I suppose, so maybe that's just being picky.

For my first Raphaël project, I wanted to pick something that was simple, but still kind of interesting. Around about the same time I discovered Raphaël, my 5-year-old son started getting into the solar system, and so we have been reading a lot of kids books about the planets and the sun and stuff. So, I figured that I would make him a little solar system in a box that he could play around with.

In creating this project, there were some interesting considerations before I even did any coding. My first thought was that I wanted to build an actual scale model of the solar system. That is, the planets' distances from the sun would be mapped to the same scale as their radii, so that you could get a real sense of their prominence. Taking Mercury as the smallest planet (Pluto is a DWARF PLANET! Get used to it.) and setting its diameter of ~4880km equal to 1px, I worked out that I would need a canvas 1,845,674px x 1,845,674px in order to fit in the orbit of Neptune. So, my solar system uses two sizing scales, one that scales the planets' distances from the sun, and one that scales their sizes.

My solar system is pretty simplistic. Among other things:

Planets are circular, not elliptical
Orbits are circular, not elliptical
There are no moons, dwarf planets or comets
The Kuiper Belt and the Oort Cloud aren't shown
The planets don't start in their current positions. Rather, they are just lined up like an astrologer's wet dream.

Also, there is a bug in here somewhere. If you speed up the animations, you will notice that the orbits get a little wonky after a few revolutions. Not sure if that is a timing issue, a bug in the code, a bug in Raphaël or a bug in the browser. If you figure it out, let me know.

Check it out here:

http://factore.ca/experiments/solar_system/index.html

Let me know what you think!

Add Search to Ruby on Rails Projects with acts_as_xapian

Wed, 12 May 2010 13:25:00 -0400

I recently built a search in a project using acts_as_xapian, and was quite impressed by the speed of the search, as well as the flexibility in setting things up... once I understood the documentation.
Here's a summary of what I found. Hope it helps someone!

How to install xapian and acts_as_xapian

You will need to install the xapian engine here if you don't already have it installed.
Install acts_as_xapian via script/plugins install http://github.com/frabcus/acts_as_xapian.git and you're good to go. There are other forks of the plugin, and other means to install it, but this is how I did it.
You'll need to set up the paths to your xapian databases, mine are in environment/xapian.yml

In your model

Include the following in any models you want indexed.

There are several key parameters to specify here.

This tells xapian which columns to index.

Here you specify an array of arrays, in the form [column, internal identifier (must be a capital letter), prefix to use in search]. This allows you to search for matches only on a specific field, e.g. last:smith&first:dan

Note that the internal identifier must be unique across you application, and cannot be any of the reserved values ('M' & 'I' -- perhaps some others)

Again, an array of arrays, in the form [column, internal identifier (must be a number), prefix, field type]. This allows you to specify sort order in the returned values.

An optional array of associated objects to eagerly load when returning the values from your search.

In your controller

In this case, I'm searching the User model, and have formatted my query to use the prefixes I've set up above in my model.

You can also easily include pagination in your results by using a pagination plugin such as will_paginate, and passing in the pagination values via the querystring.

In your view

Iterate through the collection in @search.results to show the matches.
You can paginate as follows

Indexing your content

You will need to run the xapian rake task to populate your xapian db. Remember that after each change to the xapian settings in your model, you'll need to rebuild the index.

There it is. Quick and easy!

Earth Friendly Paper and Print Production

Tue, 11 May 2010 16:21:00 -0400

As print production manager at factor[e] part of my day to day includes maintaining relationships with and sourcing new suppliers for printing and paper etc. Recently I've noticed an increased interest in environmentally friendly print materials from a number of our clients. I've discovered several printers and paper suppliers that offer "sustainable printing" and/or "environmental choices". But now I feel like I have more questions than answers.

So I've decided to do some research and to devote my next few blog posts to the exploration of the many areas where eco concerns meet the world of print production. I can't promise to be comprehensive, but I will pass on any demystifying tidbits I find along the way.

Where to start, hmm ... It's such a big subject.

I recently read that the papermaking industry is the third largest polluting industry in the world, right behind oil manufacturing. Although I wasn't able to verify this claim (let me know if you have figures to the contrary), there's little doubt that the industry has a major environmental impact, so I thought I'd start there.

These days in the world of paper and print, one of the most common acronyms you come across is FSC. You may have seen the FSC logo on packaging in your local grocery store and if you're doing any kind of printing it will probably seem ubiquitous.

So what is FSC?

I think about 5 or 6 years ago, I remember beginning to hear the term FSC certified to describe certain papers that were becoming available to designers through our paper merchants. FSC stands for Forestry Stewardship Counsel.

Here's the blurb from FSC Canada's website...

"FSC is an international certification and labeling system that guarantees that the forest products you purchase come from responsibly managed forests and verified recycled sources.

Under FSC certification, forests are certified against a set of strict environmental and social standards, and fibre from certified forests is tracked all the way to the consumer through the chain of custody certification system. The end result is products in the marketplace carrying the FSC 'check-tree' logo.

FSC certification is a voluntary and market-based mechanism for ensuring that our forests are healthy. Consumer demand for FSC-certified products encourages forest managers and owners to become FSC-certified. Independent third-party auditors conduct all FSC certification audits."

So essentially, FSC is a watch-dog over the forestry industry. But it only works if consumers demand more environmentally responsible forest management. There are other certification bodies, such as the Sustainable Forestry Initiative Inc. (SFI) and the Programme for the Endorsement of Forest Certification Schemes, (PEFC). But there seems to be agreement that FSC represents the ˜gold" standard of certification.

Oh, and FSC doesn't just certify paper manufacturers and mills, they also certify printers, but I'll get to that in a later post.

First, here's a link to a simple but effective video that I thought introduced the subject quite well. If you're looking for a reason to pay attention to the FSC designation, you may find it here ... . And maybe this kind of awareness campaign explains the growing number of requests from our clients for us to pay attention too.

Stay tuned ... here's my tentative list of future topics:

... more on Forestry Certification Organizations (a controversial subject)
Sustainable Printing
Eco Papers
Vegetable and Soy Based Inks
Waterless Printing
Designing to reduce paper waste - working with your printer
What do we mean by "environmental choices" - real vs perceived environmental responsibility
To print or not to print ...?
... and maybe more.

My main goal here is to make more informed choices in our print buying practices. And that will no doubt allow us to make more confident recommendations to our clients. That's the hope anyway.

The Often Forgotten Footer

Wed, 05 May 2010 14:37:00 -0400

We all say things like "designed from the ground up", but I wonder how often that's actually the case when designing websites. When starting a new website project, most designers will start with a very rough wireframe to plot out where the content will reside on the screen. I usually do this on paper to make it quick, and will draw a series of boxes and label them 'header', 'nav', 'main copy', 'pull quote' and so on. I've done this many times for many projects, but noticed that a) I always start from the top, and b) I've never really spent any time thinking about (or even drawing a box for) the footer.

When it comes time to produce the design in Photoshop, I'll throw in a footer, but often it's an afterthought. Sure, it'll include the usual suspects like copyright info, some brief contact info and maybe a text-based mini-nav, but that's about it.

This got me thinking - what is the real purpose of the footer? Does it even need to be there? Traditionally, I think footers in web design function in a similar manner to the first few pages of a book. In their most basic form, they will tell a user who owns the site, contain some legal information, the date of publishing and direct the user how to get in touch with the company. They might also contain navigation, which would be the equivalent of a table of contents.

Lately though, there has been a trend towards elevating the footer's presence - even celebrating it. Designers have been adding more and more 'stuff' into this often forgotten area of a website. Stuff like social networking links and blurbs, contact forms, photos, maps and even real content have been making their way to the bottom of websites in recent years. Although there is no real need for this added attention, I really enjoy seeing what some designers have done with this neglected area of a website. And why not celebrate this overlooked territory?

Being a designer, my favourite footer-trend is to use massive graphics at the bottom of a site. We've all been trained to scroll down when scouring through a site, so why not 'reward' the user with a fresh dose of graphics and/or colour? Take a look at the header of Vimeo.com - it's quite simple and unobtrusive.

Now scroll all the way down to the bottom of the site and BAM! On your way down you've absorbed some content, saw some neat things, maybe even clicked a couple of them, but then you reach the bottom and instead of just scrolling back up or hitting the 'back' button, all that work is made worthwhile with that whimsical illustration. The copyright and legal info are all still there, but the main focus of this footer is that rewarding image.

Instead of a 'reward image', another method of making the footer interesting is to seamlessly blend the footer into the content so it becomes difficult to determine where the content stops and the footer starts. This can be a good way to mask the 'boring' bits as actual content and keep the user reading right 'til the end.

Another technique is to use the footer as a sort of 'coles notes' version of the site. When a site as a huge amount of content the footer can be a useful place to summarize the site. I've even found myself skipping the content entirely and just heading down to the footer area hoping to find some brief blurbs, links and the like - something to tell me what the site is all about.

All this to say that I really enjoy this new trend of celebrating the often-forgotten bottom area of a website. And even though we view websites from the top down, having an awesome footer sets a solid foundation and to me feels better proportioned and structurally sound - like a skyscraper or a pyramid. I'm going to make a more conscious effort to place more focus on the footer of the sites I design - to make that space fun and useful - instead of just an afterthought.

If you want to be inspired by some remarkable footer designs, check out MephoBox and Pattern Tap.

Information Architecture in Two Really Easy Steps

Tue, 27 Apr 2010 10:45:00 -0400

Information Architecture is a term that gets thrown around by web designers. We like thinking about it, talking about it, and building it into your projects, and it sounds cool. But what is it? Basically, it's how to organize your information. A website is usually a meeting of the minds between you and your designer. Let's have better mind-meetings! Here's how: visualizing your own information architecture.

Before we start, here's a few things to think on. If you break it right down, information architecture is all about hierarchies. We're looking at the information you have for us - whether it's on an older site, a Word doc, in an e-mail - and figure out how it should all be related. What are the most important parts? What's the content that users are most likely to want? The answers to these questions will be expressed in site structure, visuals, typography and so on.

Let's get going - you'll need a piece of paper and a pen or pencil.

Step 1 - Let's Draw Clumps

Let's think about a website. There's the design, and then there's content, right? Nope, sorry. The content is the design. The design is the content. Lots of design with no content is like a cake that's 90% frosting: kind of gross, no nutritional value. Building the content is the most important part of any project, and it's also the core of building an information architecture.

So: clumps. Think about what should go on the homepage. Don't try to draw a page layout - we're just making a simple list right now. There should probably be contact information, and a tagline (if you have one!) and some paragraphs about your products or services. What else? Maybe some photographs or customer testimonials. Done! That's your homepage clump.

Let's make a couple more - let's say you want a Contact page, and an About Us page. Let's make a couple clumps for those, too. Maybe you want to talk about your employees - another clump.

Step 2 - Reach Out and Touch Someone

So you've figured out what kinds of content should go on each page. That's great! But how does it all fit together? Websites aren't just pages hanging out - they like making connections. Let's drawn some lines between our clumps. Hmm - Employees seems like maybe it belongs to About Us. Let's link it up that way.

Hey, it's like some kind of website or something. Yup, it's really that easy. By breaking your content apart, you can get a better idea of what works together, what needs its own page, and the relative importance of each piece.

If you're working with web designers who live and breathe information architecture, two things will happen. One, they'll praise you as the rare gem that you are for undertaking this task; and two, they'll be able to use this information to build a better website.

It's always beneficial to think about your information like this - as connected resources. Your website isn't a brochure that lives on the internet - it's a method for starting a discussion with your customers. By spending a little time on organization, you can make that discussion better.

The Painful but Essential Process of Imagining Failure

Thu, 22 Apr 2010 09:21:00 -0400

What I've discovered about business is that it is always easy to find the reasons for failure once failure has been demonstrated. Unfortunately, by then it's too late.

Four months ago, an independent office supply shop opened up down the street. They offered the usual products and services you'd expect: office supplies, printing, ink cartridge refilling, and so on. They sunk a lot of money into computers, high-end printers, and a beautiful, expensively furnished board room available for rent.

The owners, who were awfully nice, came by our office to introduce themselves. I hoped they'd be another success story on Locke St., one of Hamilton's most flourishing commercial districts. And why not? They were providing valuable services and they'd put a lot of money into their business.

They cared about their business, and it showed.

Four months later they've shut down for good. Four months was all it took to wreck their dream.

I'm not privy to the decision they made to close their doors, but all signs point to the obvious conclusion that they simply weren't making enough money.

The problem is they opened on a street that is bustling, but it's bustling with retail stores, restaurants, and hair and beauty salons. There are only about three offices on the strip, including ours. Of these, all (I believe) have their own boardrooms, so there goes that expensive boardroom and all the space it takes up.

Perhaps they also assumed that they'd also get business from people in the neighbourhood who need ink jet refills and paper. They may have been right that this is needed, but it would seem that they were wrong about how much money it would bring in.

In other words, it's kind of obvious why their business failed.

Or is it?

What I've discovered about business is that it is always easy to find the reasons for failure once failure has been demonstrated.

Unfortunately, by then it's too late. Dreams have been dashed and money has been lost.

I chose this business as an example because it's a simple business and because its failure is recent. However, the phenomenon of easy-to-find reasons for failure once failure has occurred is very common, including (and perhaps especially) among web startups.

In fact, it's so common that I think it's important to start facing up to unpleasant truths before resources are committed.

I propose a simple method for doing this: imagine failure.

Imagining Failure

Start by picking a sensible time in the future. A good time might be the date at which your startup capital runs out if your new business is not replenishing it.

Now, imagine locking up the doors of your office and heading home with the painful knowledge that this was your last day working on what you loved. Now you've got to sort out the bills, let your investors know its over, and if you've got a family, let them know too.

Your business has failed.

Why?

If you can't answer this question yourself - if you simply can't think of any compelling reason why your business idea is not 100% guaranteed to succeed - you're probably too emotionally invested in your business idea to make rational judgments about it, and you need to find somebody else to talk to.

If you can, find a stranger who is knowledgeable about your industry who is willing to give you a little of their time. Set up the business failure scenario, and ask them to analyze it with you.

You're far more likely, I think, to get an honest opinion about your business idea if you let somebody view it as a failure, for several reasons.

First, they will feel less of the social pressure to validate your idea based on how you feel about it. In other words, if it's just plain stupid, hopefully they'll tell you.

I sometimes wonder how much money has been lost because people didn't want to hurt someone else's feelings.

Second, most people are hesitant to make predictions about the future. We've all seen some crazy ideas succeed, so people are often willing to give ideas the benefit of the doubt before they're put into practice. That doubt disappears after a proven failure, which is what you're asking them to imagine.

Third, it changes the tone of the discussion by inhibiting your ability to defend your idea. You can no longer rely on the assumption that your idea is a guaranteed success, because it's actually an abject failure. Once the invincible armour of your brilliant idea has been removed, you and your advisor are free to consider the external forces that will affect the future of your business.

Lastly, this discussion should also help you prepare for what you will do if it turns out that this is more than just a thought experiment and your business really does fail. You should know when to cut your losses and have a plan in place to deal with failure if it occurs.

Rethink

By this point, you should have a list of reasons for failure (if you don't, someone is either being incompetent or dishonest, because there is no business idea that is immune to risk).

It's now up to you to go over these reasons in the most rational, objective way you can. You should be asking yourself two important questions.

First, is your business idea viable at all? Perhaps the list of reasons for failure is so long, or so compelling, that you would really be better off spending your time on something else.

Second, assuming that your business idea is still viable, what changes can you make to address the points of failure you have identified? How do you mitigate these risks?

The great thing is that at this point you haven't spent a penny. You're free to rethink your idea, plan your defenses against risk and conduct more market research. In many ways you are now much more likely to succeed.

"The OS As App" or "Developing Rails Apps on Windows (The Joyful Way)"

Tue, 13 Apr 2010 15:40:00 -0400

My situation may be specific, but I doubt it is unique. At work, I use a Mac Mini to develop Rails apps. This works well for me: I love working on Macs, Rails loves working on Macs, and life is good.

At home, though, it's a different situation. My old G4 laptop is woefully underpowered, both in terms of processing ability and battery life, and the current state of my bank account prohibits me from replacing it at this moment in time. The year-old family computer performs well, but is currently running Windows Vista, mostly because my wife uses it for work and, let's be honest, because she is comfortable and happy using it. So, if I want to write Rails apps at home, I have to find a way to do it on the Windows machine.

If you develop Rails apps for even a small amount of time, one of the first things you will notice is that you tend to be on the command line a lot. Assuming ruby and gem are already installed, rails is installed by dropping into a shell, typing 'gem install rails', and watching all the pretty text scroll by. From there, you will use the command line to: start your Rails app running; install plugins; check your Rails code into and out of your version control system; update your libraries; and deploy your app to its live home. If you are uber-hard-core, you might be actually writing your code there too.

(Photo courtesy katutaide)

Now, playing around in the command line on a Unix-like OS (OS X, Linux, whatever) is a joy. In contrast, playing around in the command line on a Windows system is like playing in a concrete-covered urban school yard, filled with vandalized play structures, broken glass and heaps of dog turds. In short, "not a joy."

I gave it a try, though, I really did. I installed ruby on the PC, then set up Rails. I installed Cygwin (an app that mimics a Unix-style shell on Windows) so that I could use it to install and run git. I tried to get sqlite3 to install with no luck, before I found out that sqlite3 probably doesn't work with ruby on Windows right now.

And then I thought, "Why am I trying so hard to make Windows work like OS X or Linux? Why don't I just INSTALL LINUX?" Now, I've been down the dual-boot road before, and I don't like it. In our house, the computer is on a lot, with my son, my wife and me switching back and forth between logins to play games, check email or develop apps (as the case may be). Having to log everyone out, restart, make sure my stuff is saved, restart, log my son in, restart, open my files again, etc. seemed like "not a joy." But luckily, that's not your only option if you want to run two different OSes on the same computer.

By using virtualization software, you can create a less-powerful version of your computer that runs on your installed OS, just like any other program. You fire it up and shut it down when you want, you can leave it running while you switch to another user, you can minimize it, whatever. The virtual computer is set up with a virtual network connection, and can use your USB connections and optical drives. On that virtual computer, you can install another OS. (On that OS, I imagine, you could even install the virtualization software and install another OS, but I haven't tried that yet.)

I chose to use VirtualBox as the virtualization software, and Ubuntu as my OS, mostly because they are both free and seem to be very usable and stable. Setting up VirtualBox was easy, just the usual download a setup exe and run it. Installing Ubuntu was just as easy. I downloaded the Ubuntu .iso file, and then created a new "Guest OS" on VirtualBox, using the .iso file as a virtual CD in the virtual CDROM drive.

After that, it was the usual "fresh OS install" stuff, like checking that I could connect to the internet, running the software updater, and changing the desktop image. After THAT, I installed the VirtualBox's "Guest Additions" for Ubuntu, which is a collection of software that modifies the guest OS installation so it integrates better with VirtualBox (stuff like automatically changing the display settings of the virtual computer to match the size of the window it's running it, and auto-grabbing the mouse and keyboard when you click on the guest OS). Finally, I installed ruby, rails, git, the sqlite3 driver for ruby (yay!) and now I'm happy again.

There are downsides to running an OS on top of another in this way, mostly performance ones. When you set up the guest OS, you need to specify how much of your memory it is allowed to command, and so that memory is unavailable to the host OS while it is running. Similarly, you also need to allocate a certain amount of hard-drive space to the guest OS. But in my case, these aren't that much of a worry. Ubuntu seems to run fine with the 384Mb of RAM I allocated to it, and web development is mostly text files, which aren't really that big.

I was very impressed by how easy it was to set this up my system. Being able to run an OS as just another app has allowed me to do things my way, and I am once again finding it a pleasure to develop on my home computer.

The future of computing?

Tue, 13 Apr 2010 14:20:00 -0400

factor[e] design initiative OBAA finalist video

Thu, 08 Apr 2010 13:56:00 -0400

This video was displayed at the event and was produced by Creative Artists Group (C.A.R.S.) Inc.Thanks Bill.

factor[e] design initiative OBAA finalist video from factor[e] design initiative Inc. on Vimeo.

factor[e] Recognized by Chamber of Commerce

Tue, 06 Apr 2010 15:03:00 -0400

On March 31, 2010, factor[e] was recognized by the Hamilton Chamber of Commerce for "Ongoing Contributions To Business Excellence In The City Of Hamilton" as part of their 2009 Outstanding Business Achievement Awards.

We were nominated in the Communication Technology category, and eventually became one of just two finalists.

The award ultimately went to the other finalist in the category, Atria Networks. We'd like to extend our congratulations to Atria for this prestigious recognition of their accomplishments in the past year.

We'd also like to thank the Chamber for nominating us for the award and selecting us as a finalist. And of course, a big thanks goes to all of our clients and employees: without you, this kind of recognition would never happen.

A full list of finalists for 2009 is available from the Hamilton Spectator.

5 Time-Saving Photoshop Tips

Tue, 30 Mar 2010 12:20:00 -0400

Photoshop is one of those applications that takes years to master. I've been using it for about 8 years now, and I'm still learning new things, or better methods of performing a certain task etc.. Here are 5 tips which can boost your productivity - even if by only a couple seconds at a time.

Draggable Fields

Instead of typing in a numeric value in a text field (the text size field, for instance), move your mouse just to the left of the field and you'll notice that your cursor now includes a left/right arrow. If you click and drag sideways, you can adjust the value in that field. This works for most of the text fields in your palettes - go ahead and give it a try!

Move a Selection

If you've made a selection (either rectangular or circular), but you're not happy where you placed it's origin, don't worry - you can move it around. While still holding the mouse button, hold down the space bar and move it around. By holding down the mouse button, you can still control the height and width of your selection. NOTE: This also work's in the OS X Finder's screen capture shortcut (Command + Shift + 4).

Toggle Through Tools

Some tools like the brush, the eraser and the pen have a few tools hidden in one icon. You can access these easily with your keyboard by pressing Shift + the letter of the tool you want. So for example, Shift + P will toggle through the various pen tools.

Opacity

To quickly alter the transparency value of a layer, simply press a numeric key while the layer you want to alter is selected. Pressing 4 will reduce the layer to 40%, pressing 5 to 50% and so on. If you want to bring your layer back up to 100% (not transparent) press 0. NOTE: you can also enter exact values by quickly typing in the percentage in rapid succession.

Frequently-Used Elements

To speed up the design phase, it's a good idea to create a document containing frequently-used design elements. This allow you to simply drag and drop these elements into your new design. Feel free to use the one we use, and add your own social media icons, buttons, tabs and even font styles. Download the PSD here.

How I Learned To Stop Worrying And Love The Tablet

Mon, 29 Mar 2010 09:15:00 -0400

A lot of concern has been expressed by developers about the closed nature of the iPad and its ecosystem.

Applications that run natively on the device (as opposed to web applications which run in the web browser Safari), are completely controlled by Apple. You have to purchase them from Apple's app store, and you can't modify them in any way. Nor can you modify any core part of the operating system, or the device itself, without hacking it.

This has upset many software developers. Many (including myself) are unwilling to develop for a platform that requires someone else's approval before people can use their software. Many also have philosophical objections: the iPad banishes tinkering; threatens open source software; takes away all control from its users and developers, and so on.

These concerns are not without merit. However, I believe that regardless of how you perceive Apple's business strategy (and it is a straightforward business strategy, namely vertical integration), the iPad is probably very good for both native application and web developers, although it does carry some risk.

The Attention Market

Authors and book publishers are realizing that the biggest threat to their livelihoods is not technology - the fear that they're next in line for demolition after the music industry - but the dwindling amount of attention people are paying to books.

People only have so much free time, and they spend very little of it reading books. One in four Americans reads no books at all, and the others don't read much: of those who do, the median quantity is nine books per year for women and five per year for men (to make it worse for novelists, those figures count religious books like the Bible).

People do, however, watch a heck of a lot of television. They also spend a lot of time on the Internet. Interestingly, in Canada, weekly Internet usage just moved ahead of television viewing for the first time since polling firm Ipsos-Reid started tracking it.

As time spent on the Internet grows, time spent in other recreational activities diminishes. Competing for people's attention is a zero-sum game.

So What Do Developers Want?

We want people to be using our software, whether it's a web application hosted on a server somewhere, or a native application running directly on a device.

We want to be able to effectively compete against the myriad other activities that people engage in: reading books, watching movies and television, listening to music, and even doing things that don't involve staring at a glowing rectangle.

That's why the creation and popularization of really compelling tablets is so good for developers. Tablets are much more suited to becoming part of people's living room activities than regular computers are.

The iPad is slim, attractive, easy to use on the couch, easy to hand to someone else, good for two-person gameplay, a compelling substitute for magazines - the list goes on. Any decent competitor to the iPad will share these characteristics.

That makes the tablet a new vector into the attention market.

Developers who care about an open ecosystem - the ones who object to developing for Apple's app store - just need there to be a strong alternative to the iPad to cash in on this vector. So how long before we see a compelling competitor?

I think we'll see the first of the competitors in 12 to 18 months. This is a different situation than the iPhone, where strong competitors have only emerged in the last few months, years after the introduction of the iPhone. In this case, all the ingredients you need for a tablet, such as a screen and an operating system designed for multi-touch, have been developed for phones. This is one excellent reason for Apple's patent lawsuit against HTC: they are seeking to prevent the launch of an iPad competitor in the near future.

The biggest risk to developers posed by the way Apple has chosen to develop the iPad is that it will prompt other companies to follow similar business models. This wouldn't be surprising: Amazon, for example, has taken this approach with the Kindle.

If every company that chooses to manufacture a tablet follows a strategy as closed as Apple's, developers will have no choice but to either stick purely to web development, or bite the bullet and accept the terms of an app store.

I think this is unlikely simply because of Google's involvement, along with the powerful financial incentives for other advanced device manufacturers to jump onto the tablet bandwagon. Google has shown its commitment to a different way of doing business in the smartphone industry by pushing Android as the best alternative to the iPhone OS for smartphone manufacturers that want to go head-to-head with Apple. Tablets are surely next.

That means that developers of native applications will soon reap the rewards of a new way to grab the attention of millions of people.

Web developers, of course, can reap those benefits immediately by developing for Safari on iPad, taking advantage of one of the best implementations of HTML5 features, built on the open-source rendering engine WebKit.

And just like Apple failed to be the primary beneficiary of the personal computing revolution it helped launch, so it may well fail to be the primary beneficiary of the tablet revolution it is popularizing.

Thinking about the Process - with Videogames

Thu, 25 Mar 2010 10:34:00 -0400

You might remember the first time you were dropped into the 8-bit world of Super Mario Brothers. Limited colours, unfamiliar mechanics, threatening turtles. With a little bit of work, you figured it out - how to interact with the world and find out that the princess was, indeed, in another castle.

At some point, you bumped the underside of a question block and discovered that some considerate individual had placed coins everywhere. That coin looked like this: a collection of orangey-yellow pixels. How did you know it was a coin? It made a proper coin sound effect, with animation reminiscent of a coin spinning. It had enough coin-ness to be convincing, even though a real coin looks nothing like this.

That blob of pixels was presented, and accepted, as a coin because it built an idea in the mind of players - a picture that looked more like this - the golden coin archetype.

How does this tie into design? A large part of what designers think about is user experience. Before pen is put to paper or mouse to Photoshop document, there's planning: how best to communicate the ideas that our clients want to present.

If we look at these two coins, one exists in the game, and one exists in the mind of the end user. For all of its sophistication, the web is still a nascent medium - we can do a lot in terms of interaction, presentation and thoughtfulness, but there are limitations. As designers, we strive to overcome those restraints. By building the collection of pixels, our goal is to build the idea.

Battle Royale: Client vs. Vendors

Fri, 19 Mar 2010 09:00:00 -0400

Thanks for visiting our blog.

You may notice the post you're looking for isn't here. Upon further reflection, and a really quick roundtable discussion in the office, we decided it was really sending the wrong message.

Sure, it was funny, but I realized I was jumping on the "clients don't understand design" bandwagon, which is not at all reflective of factor[e]'s actual views on the matter.

The truth is, clients do understand design. They have a great grasp on what it takes to run their business, just as we do for ours. Being able to teach prospective clients a little about what we can do for them is great, not a source of derision.

In light of this, what we find we're actually talking about is why this opinion is so prevalent among designers - a far more interesting discussion. We'd love to hear your thoughts on it.

Update: The full initial post as well as a short explanation can be found here.

2.0

Thu, 18 Mar 2010 09:04:00 -0400

It started life as a straight-forward, static web site with a reasonably simple design: #wrapper, #header, #content, #footer, done. Then, the client wanted a sidebar. The designer wanted a custom font. You wanted to make it work in IE6.

Small changes happened. The client wanted a blog, so you installed WordPress. The side bar got bloated with links, so you turned it into a multi-level menu. The client wanted a new space in the header to run banner ads. The designer wanted rounded corners on the footer.

Big changes happened. The client wanted to add a forum and a photo gallery. The designer wanted a semi-transparent background. You still wanted to make it work in IE6.

And then one day, you had an awakening. Maybe you were tracking down a missing semi-colon in a php file, or scrolling through obsolete css classes to find out why that damn link was the wrong colour, or trying to debug some javascript you lifted from a web site somewhere, but you realized that this project was no longer a tightly coded, fast-loading, straight-forward web site and was, in fact, a steaming pile of shit.

What happened next was up to you. Maybe you thought, "All my web sites suck." Maybe you said, "This client is a jerk, anyway," and then fixed the bug and went home. Maybe you thought, "Not my problem," and then left it for someone else to fix. Maybe you got a phone call and forgot all about it.

Maybe you said, "This site should be re-done from scratch," and then decided it was too much work. Or you were afraid that you would break it. Or you were afraid that the client wouldn't pay for it. Maybe you started to fix it, but got distracted by something else.

Or maybe you got all the people involved in the project together, and talked about the problem, and decided to deal with it. You made a plan, you had some late nights, you fought with your wife, you went over-budget and the client refused to pay the difference - but twelve months later, there was a brand new web site sitting where your dog's breakfast of spaghetti code had been a year earlier. And, to top it all off, it still worked in IE6.

Chromatics, Grids and the Golden Section

Thu, 11 Mar 2010 14:23:00 -0500

I figured that since this is my first attempt at writing a post to our blog (or any blog for that matter) that a natural choice for the subject would track how I entered into this industry. My background is in fine art (sculpture and painting) and I didn't own a computer until I decided to start this company with a few guys nearly 10 years ago.

In art school I got my first chance to use a computer as a means to create art, but it was completely experimental, and in the early days of Photoshop 3.0, before the advent of adjustment layers, actions etc. Layers had just been introduced! Basically, my classmates and I were taken into a room full of Power Macintosh 7100s and shown how to turn it on and start a project in Photoshop - then left alone for hours to tool around. I don't recall anything great coming out of these experiments, but I had a good time.

The interesting thing was that I did get quite a lot of instruction in more traditional applications of media for design and typesetting that tied directly in with my fine arts background. These same techniques have stayed with me, and I still think the same way as I used to when working on a layout, illustration or when art directing.

I find that too often, these traditional methods and old school ways of thinking are lost in modern design. I have a sweet spot for these processes, but over the years I've replaced much of the hand drawn and pasted together layout approaches to project conception with digital methods. Much of the reason for this is just the sheer speed in which you can cobble together ideas and variations - and be able to send something to a client and review directly without having to scan or send hard copies.

Design in my mind is kind of like the great great grandchild of Fine Art: theories and issues that Fine Art had established and solved decades ago are still used today. Chromatics, Grids, and the Golden Ratio are great examples of this. All of these influence how we look at things, and what we perceive as beautiful or pleasing to the eye. Design is everywhere, every day.

Chromatics and Colour Theory is how the eyes perceive colour. Colour can trigger emotions, feelings and memories that can influence what the viewer thinks about a layout or design before they even know the subject matter. This can obviously be either a positive or a negative reaction.

Grids are structures made up of a series of intersecting vertical and horizontal axes used to organize content. The grid serves as an framework in which a designer can organize text and images in a rational, easy to absorb manner.

In the late 19th century in Europe, especially in the United Kingdom, this movement began to separate graphic design from fine art. Piet Mondrian is known as the father of graphic design. He was a fine artist, but his use of grids inspired the modern grid system used today in advertising, print and web layouts.

The Golden Ratio - Since the Renaissance (and even earlier), many artists and architects have proportioned their works to approximate the golden ratio - believing this proportion to be aesthetically pleasing. Other names frequently used for the golden ratio are the golden section (Latin: sectio aurea) and golden mean. This theory is said to even describe beauty in the human face.

According to Jan Tschichold, "There was a time when deviations from the truly beautiful page proportions 2:3, 1:√3, and the Golden Section were rare." Many books produced between 1550 and 1770 show these proportions exactly, to within half a millimetre.

These are only a few traditional ways of thinking that end up as second nature, and you begin to examine everything this way.

This isn't to say that good design is solely based on these principles, but generally that feeling when you look at something and it just doesn't sit well is possibly because some of these theories were not taken into consideration.

Too many words, too little space

Tue, 09 Mar 2010 16:21:00 -0500

Recently one of our print clients had a dilemma. We had previously designed for them a standard 3 panel/2 fold brochure that was meant to be modified and reprinted several times throughout the year as the information changed. Their budget had already been approved by the powers that be. Then, as often happens in these situations, the content for then next brochure expanded significantly.

There was no way we could fit all the text into the original layout without making the type unacceptably small and/or remove most of the images. We would need a larger piece.

The challenge from a production standpoint is that when you stray from a very standard size and number of folds, the cost invariably goes up. And this was not an option.

I quickly consulted my new favourite print production related website, www.foldfactory.com for ideas.

This site provides info on all things related to paper folding. Folding is a critical, yet often overlooked aspect of many printed pieces and, as the site states, getting it right at the planning phase can greatly improve the final outcome. The site’s primary offering is a piece of software; a plug-in for InDesign that helps the designer create a print file that mathematically compensates for the dimensionality of the paper when it is folded.

Along with this great tool, foldfactory.com offers an “ideas” section where you will find videos that demonstrate a slew of various folding styles and options. One of my favourite features, and one that was particularly useful for our client’s problem, is that each print sample is identified by degree of difficulty, which helps when you are working within a budget.

We soon found a solution that would not be too difficult for the bindery and would allow us to stay within the original design parameters and print budget. The solution was to increase the size of the piece, choose a lighter paper stock and reduce the quantity slightly. To maintain the design, which included a tear off registration panel, we chose a 3 panel, letter fold with short interior flap. The cost remained the same, even taking into account the increase in mailing costs for the larger size.

In addition, the final size, 10” x 7”, made this piece stand out from the standard 3 panel brochure; an added bonus.

Easy access control in Rails using CanCan

Tue, 09 Mar 2010 09:34:00 -0500

A common problem when developing a web application is access control. A great, tidy solution I've found for this when building applications in Rails is CanCan. Rather than spreading permissions and access control logic throughout the application, CanCan centralizes permissions to a single class which gets initialized in the context of the current user and the item being accessed.

Installing CanCan

CanCan is available as a gem, so gem install cancan will do the trick. Be sure to include
in your environment.rb. You also need to have AuthLogic (or some other authentication scheme which gives you current_user) installed for this to work.

Defining your permissions Using Cancan

All of the permissions are stored in the Ability class -- you simply state which users can do what with what.

You get a user object containing the current_user, which can have roles associated with it. You can then do model specific tests to determine if the user has access to the item.

You simply include load_and_authorize_resource in the controller of the model you want restricted. In this case, my model is called Level.

This method will automagically populate a @level variable for your methods (new, edit, show, etc..) which has been run through the Ability class testing for permissions.

Testing permissions in views

In your views, you can test access to a resource by simply:

Potential Limitations

The only hiccup I've found in using CanCan to lock down access to resources is in the case when there is no model associated with a controller, such as a reports controller. A simple workaround I found was to create a dummy report.rb model in the models folder, which causes CanCan to pick up on it. Does anyone have any other solutions/workarounds for this issue?

Improve Usability by Tapping Into Your Own Experiences

Thu, 25 Feb 2010 10:27:00 -0500

Last year, against my better judgement, I joined a ball hockey team. I've always liked hockey, but as a small kid who couldn't skate well and hated mornings, playing it just seemed to be one of those things that wasn't for me. Still, when my friend told me he was starting a team that played on Sunday afternoons and didn't require any skating I figured "why not" and signed up.

I was nervous before my first game. I'm still not a big guy, I hadn't done any meaningful cardiovascular exercise since grade 9 gym class, and despite being pretty much unstoppable at EA Sports NHL video games since 1993, I more or less had no idea how to actually play hockey. Before the game I was told to play defense. When I jumped on the floor for my first shift, heart pounding from nerves, I promptly let a few goals in, got in the way, and was generally terrible.

"Play defense" may have been a meaningful instruction from a teammate who had been playing hockey since childhood, but for me it represented a general concept and not much else. I had the idea that I was supposed to help keep the ball out of the net, but I didn't really know how.

As web developers, it's important to remember that terms that are loaded with subtext for us don't always mean as much for our some of our users. It's easy to think of less experienced users as stupid or ignorant, but when I'm working on an application that requires user input, I find the better path is to think back on times when I was out of my wheelhouse and needed a little more information before I knew what to do.

If my teammates had told me to always stay between the opposing player and our net, lift their sticks to prevent them from receiving a pass, and shove them out of the way when they're parked in front of the net I would have been far more effective and confident from the start. Because they're not very complex instructions, it was just assumed that I knew what I was doing. I did not. In the same way, if we take the time to add a little bit of explanatory text to our sites our users will have more confidence when they use them.

For example, let's consider a signup form. At its most basic, a signup form tends to have four fields:

Username:
Email:
Password:
Password Confirmation:

Simple, right? If you're reading this blog post, there's probably nothing remotely challenging about this to you. But imagine for a minute that you haven't signed up for hundreds of sites over the last 15 years and you're just getting starting to get comfortable with surfing. You aren't going to get the implied expectations of those form fields. Let's fix it up to be a little more helpful:

Desired User Name: (Choose a name or nickname to represent you on this site.)
Email: (Enter your email address. It won't be shared with anyone.)
Choose Password: (Enter a password to use when you log in.)
Confirm Your Password: (Type the same password again.)

With a little bit of explanation we're able to make our sign up form much more approachable. In turn, we'll probably see increased signups as we have fewer people being turned away by their fear of doing something "wrong."

When you're putting together a web application, don't think about you the web developer. Think about you on your first day of Karate class, you the first time you tried to cook a proper meal, you the first time you home-brewed beer, you the first time you did anything that was outside your natural skill set. You weren't stupid or ignorant, you just didn't have the experience to expand simple words or concepts into their full meaning. Still, with a bit of helpful instruction from someone who knew that they were doing, you probably eventually found success. I'm still no Sidney Crosby at ball hockey, and at this point I'd be happy just to be as good as the girls on the Slovakian women's Olympic team. Still, armed with the knowledge of what I'm supposed to be doing, I can jump into the game with confidence instead of shying away from the experience.

Help your users, and yourself, by taking the extra five seconds to say what you really mean.

Designer/Programmer Harmony: We're Not Always Right (Just Usually)

Wed, 24 Feb 2010 12:30:00 -0500

Of paramount importance to designer-programmer harmony is an understanding within each camp of the other's capabilities. It is not enough for a designer to know what websites look like in order to design websites, despite where the bar may appear to currently rest. The designer has to know what capabilities the programmers have, what features are possible, what is worth the time and effort and what isn't, and how all of this can change overnight.

One major area in which this is especially pertinent is browser support. Countless hours have been spent and are still spent by programmers squashing bugs and jury-rigging websites to work in browsers like IE6. However, designers are also affected by legacy support; newer browsers boast a raft of features that expand support for everything from transparency to typography. In many instances, though, especially where clients are using older browsers or have less web-savvy audiences, these new features must often go unused. Never mind going from print design to the web -- the real hassle is in going from a static mockup to a live website. Web developers are understandably averse to anything that is trivial to create in Photoshop, but hard to implement in code. This often leads to programmers making design decisions on their own in order to comply with older standards.

To avoid this nigh-apocalyptic nightmare scenario, designers must be informed not just of their programmer colleagues' capabilities, but of the limitations that are often placed on those capabilities. As designers, we expect, or at least hope, programmers will come to us with design questions. This is an unreasonable expectation unless we are also willing to make sure our designs are not impossibly idealistic visions of an alternate reality in which hard-boiled internet cops arrest browser developers for refusing to comply with web standards.

It's not all about putting ideas on the chopping block, though. Designers aren't just responsible for how a website looks, but also for how it performs. The way things highlight, react, move, expand and contract, and animate are all within the designer's scope. New developments in programming often translate into new features in the designer's toolbox. For example, our website makes use of animated sliding elements and drop-shadows on text, two features that are standard features now but would have been impossible or represented an enormous effort in years past. However, designers can only implement what they're aware of. Working within traditional limitations often leads designers to behave conservatively.

The best way to foster this level of understanding is to communicate often and openly, to sit down together and discuss why this decision was made and why that change was necessary. Occasionally something may be thrown across the office, exasperated remarks might be found in the code comments, and designers may grumble about their layout not being exactly what they had in mind. But just as designers appreciate a programmer who can slice layouts in Photoshop and understands the use of leading and whitespace, programmers respect a designer who can write a style sheet, kill an Actionscript bug, and refrain, no matter how difficult it may be, from adding drop shadows to elastic rounded-corner drag-able gradient boxes.

For a couple more months, at least.

Top 5 FREE Apps I Can't Live Without

Tue, 23 Feb 2010 11:36:00 -0500

Readability

If you're anything like me, you're easily distracted while reading on the web. I try to stay informed by reading a number of design blogs, cycling publications, music reviews and general news stories. However, I have a very hard time reading anything longer than about 140 characters without being distracted by a flashing ad, a compelling photograph, or another headline altogether (if you've made it this far, you're already more focused than I am). Then I stumbled upon a life-changing browser add-on (bookmarklet) called Readability which strips out everything but the text of the main content and re-styles it into a much more readable format. There are a number of preset styles to mimic the layout of a newspaper, a novel or an ebook, and you can adjust things like margin size and text size to suit your reading preferences. Once you've done this, simply drag the Readability badge to your browsers bookmark bar, load up any site, click the bookmark and voila! You're cluttered news article has been transformed into a refreshing page of text.

Dropbox

I've tried many internet-based storage solutions over the years, but none has impressed me as much as Dropbox. Dropbox is different than so many others because it's also a filesharing and file sync app. Once installed, you're allowed up to 2GB of storage space which is easily accessible via a special folder on your computer. You can drop files or folders into it and it will instantly sync between any computers you've installed the app on, or access the folder via your own Dropbox URL. Perhaps the best feature of all is the ability to right-click on a file in your Dropbox folder to copy the public URL. You can now share this file or folder with anyone you like even when your computer is turned off. Best of all, each time you refer somebody to Dropbox and they sign up for an account, you receive another 250MB of storage space.

Fave4

This one is relatively new to me, but after only a week of using it, I don't see myself getting rid of it anytime soon. Instead of my browser opening up to a default Firefox/Google search page (I've never ever bothered to change this), it now opens to a simple screen showing four large buttons of my favourite web applications. Make sure you have cookies enabled, head to fav4.org, pick your favourite four websites or services and make it your browser's home page. Simple, clever and beautiful.

Digital Color Meter

Even though this app's title is spelled incorrectly (here in Canada, we use the Queen's English!), it's an invaluable tool for web designers and developers alike. Instead of opening up an image in Photoshop and then using the eyedropper tool to discover a particular colour value, I find it best to leave this application open at all times, and then Apple+tab to it when you need it. Once running, you simply hover your cursor over the colour in question and you get instant values in Hex, Lab, or a number of other colour formats... accurate down to the pixel. Best of all, it's already installed on every Mac (sorry Windows faithful).

Adium

Call me whatever you want, but I refuse to use Facebook. While I've come to accept the fact that the majority of communications among my friends happens through Facebook's instant messenger and email, I feel as though my life is better off without it. I do however still rely heavily upon instant messenger for both work-related and casual conversation, and over the years I've acquired many different chat accounts. Adium is a simple (Mac) application which brings all of those chat accounts under one application.

Going To The Source Of Open Source

Tue, 16 Feb 2010 14:57:00 -0500

One of the the best ways to improve your programming skills is to study other people's code. When your work revolves around open-source technology, you can study the code you use every day.

This has several advantages: you get to study code written by the very best programmers out there, you have an excellent idea of the problem it solves, and you gain a deeper understanding of your tools.

One of those tools is Rack, the interface, or middleware, between web servers and many popular Ruby frameworks, including our two favourites, Rails and Sinatra. Rack is an incredible piece of software that has brought an enviable consistency to Ruby web development.

Last night I was watching Olympic speed skating while sitting on the couch. I took advantage of the interminable delays between races caused by technical issues, damaged ice, and so on, to browse Rack's source code, in particular the code for Rack::Request.

It wasn't my intention to gain an understanding of the entire file, rather, I was just interested in seeing what I could learn from bits and pieces. This method caught my eye:

This looked like an interesting way of turning text like "text/plain;charset=utf-8" into a hash. Problems like this arise pretty frequently when you're doing development, so I decided to hack this apart. The easiest way to do this, I think, is to turn this bit into a stand-alone file, separate the method chains into new lines, and add a debugger line:

This allows us to step through the code line-by-line to see how content_type is transformed throughout the method. If you're interested, give it a try (just download the file and run it from the command line).

What I think is especially interesting is line 9:

This use of inject provides a simple and effective way of creating a hash from a pair of other values, in the process transforming them.

Today as I worked on a project, I found some code I wrote recently that looked like this:

Given a hash (representing an interval) like { :weeks => 4 }, this will return { :weeks => -4 }.

The similarity between this and the code from Rack was pretty self-evident. In both cases, we are creating a new collection containing transformed values from a previous collection. New version of this:

For me, this was a compelling example of the utility of reading open-source code: immediate applicability to one's own work, with the reward of better code - and better understanding.

Office Awareness

Tue, 16 Feb 2010 12:32:00 -0500

When it gets busy in the office (and it's always busy in the office) it's easy to lose track of what your fellow workers are working on. Forming ad-hoc teams to work on projects - a great way to get things done and promote project ownership - also causes isolation.

When you run into this situation, it's frustrating. Not all teams are prioritizing projects in the same way, and what's super-important to you might be bottom of the list for someone else. What's the best way to route around this kind of workflow block?

We use a number of methods to try to make sure everybody's on the same page; whether it's for scheduling, workload, current availability, and so on.

Once a week we have meetings with all high-level stakeholders: what's going on with your teams, trouble spots, etc. This is the time to talk about strategy and the basic business of keeping the company running. This is the high-level overview: it's good to take a step back from the work itself and look at the bigger picture.
Project teams meet multiple times over the course of the project - whether to discuss initial direction, clarification when the project moves from, say, static mockups to a functioning site, and more. This is mid-level management: making sure everyone involved with the project knows the details and shares the same overall vision.
Whiteboards: get them, love them. Each team within the office has their own big board to track projects, their status, who's responsible and other pertinent information. It's easy just by glancing across the office to see how busy each team is and what they're up to. This is the bottom-level organization - physically keeping tabs on what's going on.

Through a combination of these different levels of management, everybody in the office usually has a pretty good idea of what's up - they have office awareness. More than raw ability or skill, it's this awareness, of being embedded in a larger system, that truly makes an office work smoothly.

At Home in the Hammer

Tue, 09 Feb 2010 12:03:00 -0500

I didn't know what to write about when I realized it was my turn to write a post. I looked through my RSS subscriptions for ideas. I tried thinking about the various things I've learned in the past few months but random code samples didn't really seem interesting enough to warrent a post. While looking out the office window and watching a rented U-Haul moving truck trying to back up down Bold Street the wrong way it hit me. I should write about Hamilton.

Going back two years, I have to admit my initial reaction at the prospect of moving to Hamilton was a negative one. Though, in retrospect, it was a bit of a knee-jerk reaction. I had been living in Toronto for a few years and I loved it. By the time I left I had finally started to settle and figure out how to live the Toronto lifestyle -- aka broke and creative. Hamilton meant I had to start again and I did not relish the prospect.

I moved to Hamilton to take a job with Social Media Group in Dundas. A year later I found myself working here at factor[e] within walking distance of my Bay Street apartment. In that time I've been warming up to the thought of being here for a while. You might even say I've kind of been looking forward to it. The other day even changed my city on Facebook from Toronto to Hamilton.

So to celebrate my admitting on Facebook that I live in Hamilton I've compiled a small list of things I like about my new city.

Farmers Market: This is one of my favourite parts of Hamilton. It's up the street from my house and open Tuesday, Thursday, Friday and Saturday until 6.

Augusta Pubs: This is one of the great parts of living where I live. There are 5 pubs on Augusta, each of them offering their own charm and all of them within 7 minutes of my house. One night on my way out to watch the Leaf's lose at the Cat 'n' Fiddle we walked past the Ship where Brian Borcherdt (of Holy F**k fame) and Julie Fader were playing that night. So after the game we caught a concert. I thought that kind of night only happened in Toronto.

James St. Art Crawl: I've only actually made it out a few times, but the art scene in Hamilton has some good stuff going on. The art scene isn't limited to one night a month either. I strongly encourage everyone seek out the art community in Hamiton. Just walking up James Street you'll find all kinds of galleries open for business. The Art Gallery of Hamilton always has a few awesome exhibitions as well.

The Bruce Trail: The valley Hamilton is sitting in is riddled with hiking trails. Having recently adopted a young dog I'm pretty excited about starting to explore the trails more extensively. Bruce Trail Conservancy is also one of our clients.

HYPE: HYPE stands for Hamilton Young Professionals and Entrepreneurs. There seem to be a lot of us in this city. Kitestring is doing an awesome job pulling us all together every month or so for an after work unwinding without work talk. Here's the video from the first one.

The future: There are a lot of interesting projects on the horizon in Hamilton such as the LRT system and an encouraging focus on bike routes in the city.

All in all I'm happy in my new home and I look forward to discovering more of it. Any tips?

Claw your way to the top (of search results)

Fri, 22 Jan 2010 15:08:00 -0500

I was chatting with a client yesterday and I was telling him about a script I'd written that returns your ranking in Google search engine results for various keywords. Just give it a domain name and a list of keywords and the script takes care of the rest.

For example, if you're the first result in Google for a keyword, the script will return 1. If you're the fifth result on the second page, the script will return 15 (there are ten results on each page of results on Google by default - the script also ignores entries for Google maps and paid search results, this is purely about organic search).

My client was intrigued, because he's investing a lot of money in SEO currently. I told him I'd help him out.

I started work on the project last night. Few things are as satisfying as the rapid development of useful web tools, and that's especially true when you can leverage the strengths of a great programming language (Ruby). I chose the minimal and elegant web framework Sinatra for handling the web side of things, along with Datamapper and SQLite for data storage.

I dubbed it Clamber, because it's not easy climbing in search engine rankings. Brian Potstra whipped up a quick design and we had the app on our server at noon today. I sent my client a link. His response: "It’s a great tool - we’re always wondering if our efforts and spend is having any benefit and this helps quantify things for sure."

We'll be adding more features to the app in the days ahead and may provide access to the tool to our clients once it's a bit more polished. In the meantime, however, if you're curious how you rank in search engine results for various keywords, feel free to contact me and I'll send you a CSV.

Here's how:

1. Visit our contact form.

2. Enter your name and email address.

3. Begin your message with: "Attention Adrian - re. Clamber" or something similar.

4. Provide the domain for which you wish to see rankings, and at least 10 keywords that you're trying to rank for, separated by line breaks (feel free to send me up to 100 keywords). Note that the app does not retrieve results past the fifth page of results (rank 50) so please don't send in keywords for which you have no chance of ranking.

E.g:

Attention Adrian - re. Clamber

Domain: google.ca

Keywords:

search
search engine
local search

New site launch: carguidecanada.ca

Wed, 20 Jan 2010 13:20:00 -0500

carguidecanada.ca is the online version of Carguide Magazine and a very powerful online resource for researching your next new car purchase. From reviews to industry news, all the latest automotive information can be found at at your fingertips.

The most exciting element of the site is the comparison tool. I wish I could have found one of these when I was looking for a car last spring. This tool allows you to directly compare up to three different cars and provides you with every little specification you could possibly be interested in. From head room to gear ratios, you can compare it all.

carguidecanada.ca is the most recent in a series of websites we've designed and developed for Metroland Media Group Ltd. Like the others, carguidecanada.ca demonstrates Metroland's commitment to compelling content, online innovation and superior design.

Check it out and let us know what you think!

Useful Resource Sites for Designers

Mon, 11 Jan 2010 15:51:00 -0500

There are many great sites available that inspire, motivate and teach designers. The following is a list of design-related sites that are great for trend-spotting, design discussion, tutorials and new approaches to graphic design from professionals all over the world.

Psdtuts+ offers numerous Photoshop tutorials and discussions.
psd.tutsplus.com

Abduzeedo provides inspiration through its tutorials and interview/discussions.
abduzeedo.com

You the Designer offers freebies, articles and tutorials.
www.youthedesigner.com

Six Revisions includes designer & web-based articles and tutorials.
sixrevisions.com

Design Reviver offers inspirational articles and design showcases as well as tutorials and freebies.
designreviver.com

Fudge Graphics displays inspirational works as well as tutorials and freebies.
www.fudgegraphics.com

Colorburned provides a variety of tutorials and freebies.
colorburned.com

HOW Magazine offers design and business resources, as well as annual competitions.
www.howdesign.com

Smashing Magazine provides articles, tutorials, and inspiration to web designers and developers.
www.smashingmagazine.com

Inspired Magazine showcases tons of inspirational articles and design work.
www.inspiredm.com

Contract Advertising Position

Tue, 05 Jan 2010 15:52:00 -0500

factor[e] is seeking an experienced advertising professional to propose, develop, and conduct a marketing campaign with a heavy online focus.

The campaign will begin online as soon as possible, and will likely extend to traditional media, primarily radio, in the spring.

Responsibilities include proposal development and estimation, campaign design and development, and campaign management. factor[e] will be responsible for development of creative assets, including branding, logos, ads, websites, associated technologies such as monitoring tools, etc.

Your hours, contract duration, and compensation will primarily be determined by you, in the proposal you develop. Yes, that means you will be responsible, to a certain extent, for creating your own position. Free-lancers and part-timers are welcome.

The qualified candidate is experienced with:

advertising and marketing proposal development
social media and viral marketing campaigns
messaging and copywriting

To apply for the position, please contact us using our email form and reference "advertising position".

Designer/Programmer Harmony: Not Just a Myth

Thu, 17 Dec 2009 10:44:00 -0500

Life in the web game is a lot like Law & Order. Like the criminal justice system, the world of web development is split between two separate yet equally important groups: the designers who create the look and feel of a website, and the programmers who make it work. Actually, that's pretty much the only way it's like Law & Order.

As a web developer I've worked with a number of designers on dozens of websites. Some designers, like my colleagues at factor[e], are experienced in providing everything I need to turn a design into a functioning website.

However, as the popularity of the web grows and the design industry shifts jobs from the print department to the web department, a lot of designers may find themselves in over their heads as they make the switch from print to interactive design.

This can be frustrating for members of both camps. Programmers get annoyed when they receive a mockup that leaves a lot of its intention unclear or suggests functionality that doesn't exist or is needlessly complicated. Designers get annoyed when they see their original vision destroyed by the harsh realities of browser compatibility, differing resolutions, and web-only fonts.

In the interest of improving designer-developer relations and improving the quality of websites all around, I'm going to address a couple mistakes that I frequently see coming from less-experienced web designers.

Your designs are so edgy!

The number one issue I see with designers making the switch from print to web is having an 'edge' to their page.

Unlike with print, you are designing for a page whose size you don't know. "8 by 11 full bleed" is a fairly simple instruction, but when it comes to web design things get a little more complicated. Your potential users are running a variety of resolutions on a variety of different monitors. Some are widescreen, some are full screen, some are big, some are small. Some are handheld and some are projected on to a wall in a board room.

The background image you selected might just fit perfectly on your 960 pixel wide Photoshop file, but when it's uploaded to the web it will be viewed by people using resolutions much higher than that, and it will look sloppy on their screen. (A quick aside, you should always use pixels as a measurement when you're designing for web. There are no inches on the Internet - except for the ones promised in your spam folder).

Luckily, there are a few easy solutions to this problem. One popular method is to fade the left and right edges of your background picture into a solid colour. This is a good approach if your background image is a single image and not a pattern.

Another trick is to simply use a background image that can be repeated indefinitely like a pattern or a gradient. You can even just use a solid colour background - like just using white for something elegant. It's simple and effective.

Two examples of backgrounds - one a gradient, the other a repeating pattern - on sites we designed.

To sum up: the important thing is to consider what's going to happen with your site when someone resizes the browser window well beyond the defined edges of your Photoshop file.

Dealing with Dynamic Content

It's been said (by me) that web designers live in a fantasy world where every asset has been uploaded, every user-provided image is the same aspect ratio, and all content magically fits into the space provided.

When you're building a website that has dynamic or user-generated content, this is never, ever the case. Ever. That's why it's important to provide alternatives for when assets are omitted, or when they run long or short.

A good example of this is the big question mark image that shows up if you haven't uploaded a profile picture on Facebook. In any place where you expect a user to provide an image, you should provide a placeholder alternative as well. A good way to do this is to put it on a separate layer (or layer set) and hide it. (And while we're on the topic of layers and layer sets, I can't stress this enough: name them! You might know exactly what Layer 132 is supposed to be, but the programmer that's slicing your file has no idea.)

Another important thing to note when designing a website with dynamic or user-generated content is that you have little control over the amount of content a user is going to provide on a given page. If you have a design that only works when the content container is a certain height, you can pretty much guarantee that the user or client is planning on entering War and Peace on one of their pages.

A lot of designers that are new to the web game will overlook this issue during the design phase and then try to correct for it by adding interior scroll bars to the content area after the fact. Interior scroll bars (pictured below) are not only woefully out of style, they're also a usability problem because they require the user to place their cursor inside the (often small) content area before their scroll-wheel will work.

Interior scrollbar example on a site we did not design.

During the design process, it's important to keep in mind that your website will have some very short pages, some very long pages, and some very medium-length pages. If the design only fits for a certain number of paragraphs, you need to go back and make some changes.

The problems I've outlined above are only the tip of the iceberg when it comes to Internet idiosyncrasies, but they are also probably the easiest to remember and rectify. Ultimately, we've found that it's best to address potential problems with a site during the design phase. A great way to ensure disappointment is to consider your design complete without running it by your programmer first to hammer out any issues.

I realize this article places a lot of responsibility on designers, so stay tuned for our design department's response!

Free Fonts That Don't Suck

Mon, 30 Nov 2009 15:49:00 -0500

We all know where to find free fonts on the web these days, but it's actually quite difficult to find good quality fonts. While sites like www.dafont.com, www.fontriver.com and www.1001freefonts.com may actually end up offering you that unique or eccentric font you're looking for, as a self-professed type-nerd, I find that more than 95% of the fonts offered on these free font sites are quite terrible. And the time it takes to scrounge through all the rubbish hardly makes it worth the time. What's more, even if you do find a half-decent font, more often than not they're only licensed to be used for personal work.

Enter Font Squirrel. Developed and curated by fellow type-nerds, this fairly new site aims to offer only high-quality (read: well-designed, by real type foundries and type designers) fonts for design professionals. From the Font Squirrel site: "Font Squirrel is your best resource for FREE hand-picked, high-quality, commercial-use fonts. Even if that means we send you somewhere else to get them."

While the site is still in it's infancy, already there are over 240 fonts. That may not seem like much compared to the 1,000+ fonts available on other free font websites, but remember these are high-quality fonts. I've been browsing through the many categories on offer for a couple weeks now, and overall I'm very impressed with what I see. Whereas the percentage of decent fonts on most of the other free font sites has been less than 5%, I'd say that percentage is higher than 80% on Font Squirrel. It's that good.

Icing on the cake? Yes, there's that too. If you design for the web, you most certainly know what a giant pain-in-the-arse it can be to embed non-web fonts into your pages. There are many hacks, but no real solutions. With most of the fonts available on Font Squirrel, you also get an @font-face kit which includes 4 font formats, CSS and HTML code.

@font-face is a simply a CSS rule that allows web designers and developers to reference fonts not installed on end user machines without finicky flash replacement or glitchy javascript. Read more about this cheery new tech here.

Check out Font Squirrel and be impressed. Very impressed.

Reflections on the Office Dog

Fri, 27 Nov 2009 11:12:00 -0500

In our office, we have a colleague who frequently falls asleep on the job, steals others' lunches and randomly yells at passers-by on the street. While this type of behaviour would typically not be tolerated in a busy workplace such as ours, these antics have come to be accepted and almost expected of this individual. The colleague of whom I am speaking is our office dog, Shogo.

Shogo is an enthusiastic, happy black lab mix who spends the majority of his days at work with his owner, Jenn. He's a very friendly animal, and aside from the occasional fit of hysterics when faced with an intruding courier, very quiet and well behaved.

I've never worked in an office where a pet was present, but I've come to really enjoy the levity Shogo brings to the mood in our workplace. When things get to be a bit much around the office, a quick game of keep-away with long dog (Shogo's stuffed friend) always puts things in perspective, and affords everyone a good laugh.

This got me to wondering how commonplace animals in the workplace actually are. I got used to seeing dogs in the workplace of smaller companies like ours when I was living in France. Most every small business around us had a dog or two happily dozing away the workday. A quick google brought back many examples of companies who are pet friendly and encourage their employees to bring to their pets to work. Google is one of them (although they discriminate against cats).

Pets have long been known to have a positive impact health-wise on their owners, and it seems that many of the benefits also translate to the workplace. In a recent survey conducted by the pet industry group (APPMA), 73 percent of the companies reported increased productivity thanks to their pets in the workplace.

Remarkably, a further 27 percent of the participating companies also recorded a decreased absenteeism rate. 53 million Americans believe having pets in the workplace decreases absenteeism and 46 million people who bring their pets to the workplace work longer hours.

I don't know that Shogo is making any of us work longer hours, but he makes the time we do spend at the office more pleasant.

UPDATE: We are very pleased to announce that Shogo has been promoted to management!

Design Local - 2

Mon, 23 Nov 2009 10:40:00 -0500

Our second page in the Design Local series is up! This one looks at Hamilton web design:

It would surprise many outsiders to learn that there is a strong and active creative community here in Hamilton. This city produces more than its fair share of musicians, artists, and creative people of all kinds.

We also have a well-established industrial and manufacturing base (which we are much better known for). These two strengths - creative and artistic, and engineering and scientific - are the perfect combination for leading-edge web design, because developing for the Internet requires both creative and engineering skills.

Go take a look!

Print Case Study - Muscari Atelier

Mon, 02 Nov 2009 17:26:00 -0500

Identity, Design and Printing of Business Cards, Note Cards, Event Invitations and Website

When you step into Muscari Floral Atelier you are transported; your senses are subtly awakened. It's an exquisite space. To complement that feeling, the owners of Muscari wanted a distinct and sophisticated look for their new identity. We were excited to help our new Locke Street neighbour get off to a great start with their clientele. So we set to work getting all the particulars.

First, our design studio created a logo to reflect the elegant, exotic feel of the shop and the beautiful floral designs within. The next step was to produce business cards and this brought the designers together with the print production team.

We wanted to produce luxurious business cards and note cards that reflected the atmosphere of the shop and presented a stunning first impression to their clientele. This mandate gave us the opportunity to explore using a distinctive one colour ink and foil stamping treatment as a means to create a rich and mysterious look for their print materials.

We worked closely with the printer to choose a high quality uncoated stock and by printing both the business cards and the notecards in the same print run, it was possible to make full use of a minimum order of paper from the mill and stay within their budget and without much paper waste.

What we came up with is a very simple card: a double hit of rich black ink on one side while the opposite side was left white, unprinted except for the contact info printed in black.

On the black side the Muscari logo was hot foil stamped using a black metallic foil. The foil stamping gives the logo a slight debossed appearance on a creamy uncoated Strathmore Writing - Wove finish cover stock.

In consultation with the printer we decided to use a spot dull varnish overall except where the foil stamping would be hit. This gives the black a very matte look and makes the foil “pop”, as well as increasing the longevity of the cards.

The result is one of our favorite identity packages. Muscari was thrilled and so were we.

Design Local

Wed, 21 Oct 2009 10:24:00 -0400

You've heard of the Eat Local movement, a movement that champions the enormous benefits to buying your food from local producers. Eat Local helps the environment, improves your personal health and the health of your community, and provides critical support to farmers and agricultural workers.

factor[e] is proud to present Design Local, Hamilton, Ontario's homegrown initiative to promote design from the Hammer.

Over the weeks and months ahead we'll be featuring examples of homegrown design on our website, from print to web to video to logos and branding. We've started by taking a look at Hamilton print design and what that can offer you and your business.

Thinking Functionally on the Web

Mon, 19 Oct 2009 11:04:00 -0400

A large part of our business at factor[e] is designing and developing websites. Obviously, when we talk about web design, we have to consider the visual impact of the site - 'how it looks' is a large part of how it's received - and mostly, both clients and the public think of design this way. We always try to bring something else to the table: the design of how it works.

Making sure the site performs as a cohesive whole is just, if not more, important than the appearance of the site. While working away in Photoshop, we always try to remain aware that we're not designing a page, we're designing one element of a larger entity.

This aspect of design is often glossed over. Ultimately, what we, as designers, should be thinking about is not designing a site, but designing a system to ensure smooth and fulfilling interaction with the end user.

As we move forward in terms of internet technologies, especially with modern frameworks and extensions that drastically expand the functionality of the web, websites are moving from being simple pages to full-blown applications. Because of this, the focus on interaction has become more important. We have to consider the results of user actions (and reactions) to dialogs, asynchronous actions and more.

This aspect of what we do is largely invisible to our clients and the end users of the sites we build, other than as a sense of a site 'working right'. How can we talk about the value of designing interactions as well as the look and feel of a site?

An approach we use at factor[e] is one of the oldest forms of human interaction, storytelling. When we're talking to a client about their site, we describe complex functionality in terms what will happen, what the experience of the site will actually be for a user. This almost always excites a client much more than simply showing static comps - they're drawn in and made a participant. By understanding how the site will work, rather than simply how it will look, they understand operational decisions we've made and how the end result will shape user experience.

Looking to the future, thinking functionally will only become more important to us as a company and to the industry as a whole. It's important to maintain our focus on this hidden side of web design.

The Challenge of Creating Successful Web Applications

Tue, 06 Oct 2009 01:45:00 -0400

These days, everyone has an idea for a web application. The stunning success (and stunning valuation) of simple services like Twitter has made a lot of people figure the social media website bandwagon is a pretty easy one to jump onto.

We're a company that develops web applications, so we get approached with ideas for sites pretty frequently. Personally, I love talking about business and website ideas, whether the ideas are properly fleshed out or not, and whether money exists to build them or not. Some great projects I've worked on have been born that way. However, sometimes I come across certain proposals which demonstrate an extraordinary level of unfounded optimism.

These proposals confidently assert they will be as popular as Facebook, or Twitter, or some other super-popular site, or they claim some special characteristic or combination of features that will make them sure to catch on with a huge swathe of social media users. They are sure winners, great ideas that just need a technical team for execution.

It's just not that easy.

In The Stuff of Thought, author Steven Pinker discusses the origin of new words (neologisms). He talks about the difficult time word-inventors have when they try to popularize their inventions:

Even when a coiner pulls out all the stops to disseminate a new word to fill the lexical gap, an ungrateful populace will usually ignore him. In the year 2000, the conceptual artist Miltos Manetos noticed that the English language lacks a word for the high-tech aesthetic in product design, as in The new iPod Nano is really X, and a word for the genre of technologically driven artistic media such as video art, computer graphics, and digital animation, as in Our gallery showcases new artists working in X. Manetos suggested that a single word, used as an adjective and as a noun, could fill both gaps. In the spirit of the movement he was naming, he hired Lexicon Branding (the company that dreamed up Pentium, Celeron, Zima, Vibrance, Optima, and Alero) to generate candidates with their computer algorithm and staff of linguists. From the list they provided him, Manetos chose neen, which means "now" in old Greek. He rolled out the word at a packed event in a major New York art gallery, complete with journalists, critics, and a panel of commentators, including me.

Pinker predicted the word would fail, and it did. This was an easy prediction to make, he writes, "because most conspicuous coinages fail no matter what."

The same goes for many new websites. The combination of factors that lead to a super successful website are not easily duplicated. The luck component is not capable of duplication at all.

Facebook is the largest social networking site in the world, but it was not even close to the first social networking site invented: other large sites like Friendster and Myspace launched before it, and those are just the big ones. No doubt there were countless other sites that were based on the same or similar ideas that launched before Facebook did but failed to catch on (a colleague here at factor[e] built something similar for his high school years ago).

Many of the ideas behind these failed sites were just as good as the ideas behind the ones that succeeded. The difference in outcomes can be boiled down to execution and luck.

What does this mean for your web application idea? I think it means three things:

1) Refine Your Model

The book The Opposable Mind: How Successful Leaders Win Through Integrative Thinking by Roger Martin is about the ability of great executives to examine multiple models for business strategy, and rather than choosing one of them and accepting the trade-offs that are inherent in choosing an existing model, go on to creatively synthesize a new model that becomes wildly successful.

The book compellingly illustrates that any particular model we have of reality cannot be an entirely accurate representation of what is really going on, since it is just a model. Our brains are simply not capable of capturing reality precisely. Martin demonstrates the point: close your eyes, he says, and try to picture the room you are sitting in down to the last detail. When you open your eyes you will find that you have missed things.

It takes a serious commitment to come up with a truly winning model for a website. Most models that people have of what will make money and drive traffic online are not accurate.

Talk to a knowledgeable web professional about your idea and take their advice seriously. There's always a chance that your idea is very good but that they won't recognize it, in which case, talk to someone else. In many cases, however, they'll be able to provide valuable guidance, such as whether a similar web application exists already, or what you should do next. (Naturally, we think we'd be good people for you to talk to!)

2) Make Your Own Luck

To a certain extent, you can make your own luck by executing well, iterating rapidly, and seizing on opportunities. Unless you're already a top-notch web developer, good execution means partnering with a good team. It doesn't matter how good your idea is, if it doesn't look good and perform admirably, people will move on and they won't come back.

You're going to need a solid marketing plan, and you're going to have to stick with it. It's not going to be easy convincing the many people who surf just a few of the same sites every day to start adding your site to the list of sites they visit. A great site, based on a great model, will go a long way.

3) Be Realistic

The combination of factors that lead to the skyrocketing success of a site like Facebook or Twitter are as rare as winning the lottery. Buying lottery tickets is not an investment strategy. Relying on the assumption that your web application is destined for superstar success is a good way to wind up disappointed.

Instead, start by creating a plan to make you (and your employees) salaries that you can live on comfortably. After all, if your site is making enough money to pay your mortgage and your bills, it is already more profitable than Twitter!

By focusing on a realistic, manageable goal, you're less likely to face disappointment later. You'll be able to show a return on investment sooner and the case for further investment will become easier to make.

And if you develop the right product, who knows, you may find yourself at the helm of a skyrocketing success. There is certainly plenty of room for innovative companies online – perhaps more than ever before. In fact, this is one of the best times for startups in years. Good luck!

Comments are go!

Mon, 21 Sep 2009 10:36:00 -0400

I've been with factor[e] for almost five months and I'm now fully into the swing of things. When I arrived I was thrown head first into learning Rails, Ruby, Haml and jQuery and I have to say I'm loving it. I've also been working a lot with Forge, our content management system. Planning has already begun on Forge 3 and it's looking like it's going to be a powerful package.

Shortly after my arrival here Adrian suggested that I look at creating a social media strategy for factor[e]. I wrote a few reports outlining some suggested uses and best practices for a number of platforms. This was followed up by a list of next steps. As we find time in our busy schedules we'll slowly be hacking away at those steps.

Today's step is RSS and comments on our blog as well as an update to the archive section. We're going to start posting a little more frequently too. Stay tuned for biweekly posts about some of the back room discussions, ideas, research and shenanigans. All filtered for public viewing of course.

We'll also be keeping everyone in the loop as we launch projects. We've always got a pile of projects on the go and lately we've been launching some big ones. Check out our new portfolio to see some of the projects that are already out there.

There will be lots more to come so stay in touch!

ProfitnessProgram.com Launched

Mon, 15 Jun 2009 10:47:00 -0400

The Profitness Program is an industry-leading personal training sales system and we're happy to have lent a hand getting the word out with their new look, logo and website.

For this project, we provided a full suite of recommendations before getting started, covering everything from branding, look & feel, message presentation, and online marketing techniques. Once the project was commenced, we worked carefully to ensure it met expectations at every step of the way. The result is something the Profitness Program team is very happy with.

Jeff Russo, CEO of The Edge Fitness Consulting, the company behind the Profitness Program, had this to say about what we created - as well as the collaborative, consultative process we're known for:

factor[e] design initiative did an outstanding job in recreating our company logo and web site.

Their extensive questionnaire allowed me to get a better understanding of my brand and product and they were able to translate that information into a contemporary look and web site that thoroughly represents our company and services.

What I appreciated most was their willingness to take into consideration my team's requests in the design process and to accommodate these changes to the point where we were truly pleased with the final version. A most pleasant and unexpected surprise is the increased confidence and excitement for the sales process amongst our team of fitness business professionals.

The response from our clients has been so positive that it just reinforces that factor[e] design came through in a big way for us!

Jeff Russo
President/Owner
Pro Fitness Program
The Edge Fitness Business Consulting

Thanks Jeff, we appreciate it!

Junior Web Developer Position Open

Fri, 13 Mar 2009 11:33:00 -0400

We are seeking a junior web developer to join our Web Division.

The factor[e] Web Division is responsible for developing complex, cutting-edge web applications as well as building a constant stream of beautifully designed smaller websites. You will be joining an agile development team that develops advanced software using the latest in open-source technologies and platforms, including Ruby, Rails, and jQuery.

Our team is small, dedicated, passionate, and very talented. We're also easy-going, and our office is gorgeous. We are small, but we're on our way to making a name for ourselves.

Qualifications

Eventually, your role will be as a Ruby developer, however, we understand that there are very few Ruby programmers in our area. For that reason, experience in any web programming language will qualify you for this position: ASP, .NET, Java, PHP, Perl, Python, etc. Ruby experience, of course, will be a definite asset.

In order to quickly attain productivity in our team, you also have web design skills: the ability to take an existing layout in Photoshop and create a (mostly) table-free HTML and CSS layout from it that is cross-browser compatible with minimal browser hacks. Experience with Javascript and jQuery is also an asset.

We are NOT interested in hiring a contractor OR a company for this position, you must be available to work in our Hamilton office as a full-time employee of factor[e].

Requirements

A passion for web development
Programming experience or education in at least one web programming language
Web design skills, including Photoshop, HTML and CSS

Compensation

Salary will be commensurate with education, experience, and the fact we are based in a small city, where the cost of living is low (houses here are a third of what they cost in Toronto) and the rates we can charge our clients are less than if we were based in New York or LA. For that reason, candidates who are from our local area, or who are willing to relocate here, would be happiest.

Send applications to jobs@factore.ca with resume and portfolio.

Introducing has_foreign_language: An Easy Database Internationalization Plugin

Wed, 21 Jan 2009 10:39:00 -0500

has_foreign_language is a Ruby on Rails plugin by factor[e] that makes it easy to internationalize your database without mucking up your views and controllers or having to write a bunch of YAML. Just create fields for each locale you want to support in addition to your default field and has_foreign_language will automatically call the appropriate one based on the current locale.

Installation

Install it into your Rails application by running

script/plugin install git://github.com/factore/has_foreign_language.git

Example

First create your model:

script/generate model books title:string title_fr:string title_de:string author:string

Then specify which fields need to be internationalized in your model:

class Country < ActiveRecord::Base
 has_foreign_language :title
end

Now let's create a book in the console and see how this works:

I18n.default_locale = "en"
b = Book.new(:title => "Slaughterhouse Five", :title_fr => "Abattoir Cinq", :title_de => "Schlachthof Fünf")
b.title # Slaughterhouse Five

I18n.locale = "fr"
b.title # Abattoir Cinq

I18n.locale = "de"
b.title # Schlachthof Fünf

Calling title on the model returns the appropriate column depending on which locale we're in. This also works when we change the attribute:

I18n.locale = "de"
b.title = "Etwas Anderes"
b # Book id: nil, title: "Slaughterhouse Five", title_fr: "Abattoir Cinq", title_de: "Etwas Anderes"

If you want to set or return the default language attribute while in a different locale, you can call it the way you would call any other. Assuming the default is "en", you would run:

b.title_en # Slaughterhouse Five
b.title_en = "Something Else" # Book id: nil, title: "Something Else", title_fr: "Abattoir Cinq", title_de: "Etwas Anderes"

Validations

Validations with has_foreign_language are easy. Just run the validation on the default field name and it will apply to whatever locale you're in.

class Country < ActiveRecord::Base
  has_foreign_language :title
  validates_presence_of :title
end

I18n.locale = "de"
b = Book.new(:title => "Etwas Anderes") # Book id: nil, title: nil, title_fr: nil, title_de: "Etwas Anderes"
b.valid? # true

I18n.locale = "en"
b.valid? # false

b.title = "Slaughterhouse Five"
b.valid? # true

Our Internet Predictions for 2009

Wed, 31 Dec 2008 14:44:00 -0500

Here at factor[e], we're not just design and web professionals. We're also futurists, always several steps ahead of the game when it comes to the technologies we so love. With that in mind, here are our predictions for the Internet in 2009. Happy New Year from all of us here at factor[e]!

Facebook and MySpace expand into the antisocial-networking space, launching a new site where you start off as friends with everybody and have to get rid of them.
Upon its release, Internet Explorer 8 is fully standards compliant and passes the Acid3 test. It is also completely incompatible with Windows Vista.
PHP is ported over to the JVM so that applications can be written in PHP which run using Java, similar to jRuby and Jython. Enterprising PHP programmers jump on this new technology in order to write applications for mobile devices, causing many of them to lock up harder than a 30 GB Zune on New Year's Eve. The technology, mockingly called jBug or Jamateur by professional programmers, is defunct by the end of the year.
David Heinemeier Hansson knee-drops Adrian Holovaty off the turnbuckle at the first and last 'Framework Smackdown' conference.
VRML will make a major comeback with the announcement of Facebook Telescreen, a new feature that allows partner sites to view virtual walk-throughs of your house, 24 hours a day.
Flickr, after the success of allowing people to upload 'long pictures', also allows users to upload short sounds. 2 months later this feature is removed as it is used mainly for fart noises.
The NSA releases a fleet of ultra advanced insect-size flying surveillance bots in order to keep a close eye on the activities of American citizens. The bots become a favourite meal of crows, which soon start hanging out near falafel restaurants and Code Pink meetings.
The CSS3 advanced layout module to allow tighter control over column layouts is finalized. Microsoft introduces the Advanced Internet Layouts Professional Edition 2009 module, which opens 6 new security holes and only works in IE6.
Wordpress is edged out by Xanga as the number one blogging platform for web professionals and political analysts.
The MPAA files suit against a 3-year-old, a lumber yard and a dolphin for downloading Blu-Ray rips of "You Don't Mess with the Zohan".
Gradients and drop shadows become a thing of the past in web design trends, being fully replaced by checkerboard and magic-eye backgrounds.
Yahoo! and Hotmail combine their webmail services to offer users the ability to store a whopping 12 gigabytes of CiALi$ spam.

Reading List: Programmers

Thu, 13 Nov 2008 16:53:00 -0500

factor[e]'s programmers are not just master information manipulators. We are also addicted information consumers. Here's a small sampling of the sites on the factor[e] Programmer's reading list:

Ruby Inside - Ruby and Rails News Site
Programming Language Synchronicity - the blog of Ola Bini, master programmer
John Resig - the man is insanely good at Javascript and writes about it here
Ryan's Scraps - Ryan Daigle keeps his blog updated with the latest in Ruby and Rails info
Rails Inside - All about Rails
Giant Robots Smashing Into Other Giant Robots - the blog of another fine company

And of course the constant stream of developer info on Reddit and DZone...

Reading List: Designers

Wed, 12 Nov 2008 15:58:00 -0500

Our designers are avid consumers of all things both fresh and designery. To that end, they like to keep their designer minds cooking by consuming the latest in design trends, news, and flavour. As a little glimpse inside what's going through our feed readers lately, we present the Designer edition of the factor[e] Reading List:

QBN - Design Industry News & Discussion
Design-Feed - An aggregated feed site featuring feeds from 281 design-related sites
Brand New - Opinions on Corporate and Brand Identity Work
FontFeed - FontShop's blog
ilovetypography - A blog devoted to fonts and typefaces
The Skinny - Veer's top-notch blog about creative goings-on
Signal vs. Noise - 37signals' ruminations about usability, design, pop culture and more
Ministry of Type - exploring the world of packaging, typography and more

Join us next time when we bust out: Reading List: Programmers!

Thanks for stopping by!

Mon, 08 Sep 2008 09:24:00 -0400

After a rainy start, we had a beautiful day at the Locke St. Festival and met a lot of great people. Quite of a number of Locke St. patrons have seen our giant superhero-esque logo on the building but have no idea what we do - the Festival was great for getting the word out.

To everyone who stopped to talk and pick up some of our literature (and a sweet factor[e] tote bag!) thanks very much!

(Thanks to Larry Strung for the great photography!)

We're At The Locke Street Festival

Fri, 05 Sep 2008 02:10:00 -0400

Come check out our booth at the Locke Street Festival on Saturday, September 6.

The Locke Street Festival is Locke Street's biggest annual event, with local merchants, guest vendor stalls, live entertainment, food, and children's activities.

We'll be there giving out balloons for the kids and swag for whoever wants some.

This is your chance to come meet us face-to-face. We're looking forward to seeing you there!

Blast Off!

Thu, 21 Aug 2008 12:45:00 -0400

Hello! Welcome to the brand new factor[e] design initiative website. Our clients were keeping us pretty busy, but we pulled up our socks and burned some midnight oil. The result: our shiny new web presence.

A large part of what we do is web-centric - it's definitely the fastest growing part of our business - and we felt our own site had to represent the message we're trying to send: A robust website is important to the health of any company! A website is more than design or information architecture - it's a way to connect directly with your customers and clients in your own voice. Our voice was a little quiet. This site is our megaphone.

We've built this site on top of Forge, our content management system. Literally every part of the site is managed from within Forge, from portfolio to content editing to this blog.

Over the last year we've re-invented ourselves as a company - new brand, new office, new outlook on how we work. This site was really the last piece of that particular puzzle and we're very happy to finally unveil it. Have a look around, see some of the things we've done and keep an eye on us - this is only the first step.