Packaged as a Ruby Gem, Dandelion is super simple to install: gem install dandelion. To setup, you create a tiny YAML config file in the same directory as your Git repository with the server connection details. Then you can run  dandelion deploy. Pure awesome.

Why not use Capistrano? I’m definitely not a Capistrano expert, but I don’t believe it’s as easy to set it up to deploy over FTP, SFTP, or Amazon S3. From what I understand, it’s primarily designed for use over SSH. Unfortunately not all web hosts offer SSH access and those that do sometimes require time to set it up. As a result, I’d been using the Transmit‘s Sync feature for years. It’s slow (needs to check each file for changes) and a break from my command line workflow. Dandelion keeps my workflow on the command line and is much quicker to upload changes. A nice little bump to developer happiness.

I’ve been deploying WP App Store to WP Engine with Dandelion for a couple weeks now and it has been fantastic. As I bring on additional developers and deployment becomes a bit more complex, I’ll likely move to deployhq.com.

I go through phases where the engineer takes over. There’s an itch that has been irritating him for weeks, maybe even months, and damn it, he’s going to scratch it. He starts writing some kind of framework, or refactoring some code, or implementing some new, fascinating approach he read about, or working on a cool, new feature that is out of scope. At the same time, from the back seat, the entrepreneur starts nagging for updates on the overall progress of the project. Unfortunately though, scratching these itches rarely moves the project forward, so the entrepreneur is relentless. With every line of code, the entrepreneur is becoming more and more irritating. Eventually the nagging is more irritating than the original itch, so the engineer drops his tangential coding and resumes hacking the project forward.

When I only had client work, I allowed the engineer to scratch a few itches per project. It improved my code base, often saving me time on the next project, and increased developer happiness. Sure, the project price was set and I would make more money by just hacking, but I valued developer happiness and it was worth the tiny cost.

But now in the throes of building a new business, I can’t afford to let the engineer take over at any point. A founder’s time is expensive and any time spent working on the business should be moving it forward. A balance is needed between the engineer and the entrepreneur. Neither should take over completely. The entrepreneur keeps things moving forward and the engineer ensures that hacking doesn’t create a complete disaster.

New businesses need to hack things together so they can start generating revenue as soon as possible. Adii shares a great inside story on this. WooThemes hacked together their membership and payment processing backend when they started. And hacked away at it for three years, until they were in a better position to rewrite it. The engineer cringes at the idea of hacking away at crappy code for three years, but the entrepreneur slaps him, quoting WooThemes’ success.

Fortunately, I’ve found that the entrepreneur’s nagging is much more intense when there’s no revenue, which makes it easier to keep the engineer in check. That’s not to say the engineer doesn’t try to take over as often as before. He does. But the mere threat of intense nagging sends him back to hacking.

Vote this up on HN:
http://news.ycombinator.com/item?id=3620954

We needed to build the site around a large volume of photo-based content. WordPress seemed like it might be able to handle the job, and Brad made it work without question. Lots of really cool custom WordPress stuff going on behind the scenes that makes it incredibly easy to manage content and keep the site alive. We definitely recommend Brad and his web dev wizardry. — Adam Melnyk, Visual Orgasm

Check out the nice, clean, custom URLs in the photo archive. It took some extra work with all the varieties of meta data in there, but it was well worth it. This was my first Shopify project, but I was impressed how easy it was to work with and surprised how well it turned out.

Visit the site »

WordPress Workshop

After a 5 min intro including what’s new in the latest release of WordPress (and what’s coming in the next version), I’ll ask attendees what they’d like to hear. Do you want me to show you how to install WordPress? Maybe you’d like to hear what a child theme is? How about some awesome WordPress plugins? It’s like a choose your own adventure, but with WordPress instead of dragons.

The following are my notes for the session. There are no slides.

Tweet your questions, comments, etc to me @bradt and I’ll answer them during the session. If I run out of time, I’ll answer the rest on Twitter afterward. Don’t forget to tag your tweets #podcamphfx so everyone can find them.

What is WordPress?

• Web Software
• Free, open source
• Publishing system
• Content management system (CMS)

What does a WordPress web site look like?

• Mostly any web site could be using WordPress
• Check out my portfolio of WordPress projects for examples

Why is WordPress popular?

• Very popular: WordPress.org Download Counter, WordPress.com Site Counter
• Excellent UI
• WYSIWYG sucks less than most
• Easy to use
• Strong development community
• Commercial backing (Automattic).

What’s the difference between WordPress.org and WordPress.com?

• .org – a project of the WordPress Foundation, a non-profit organization devoted to developing the WordPress software and supporting its community
• .com – a for profit corporation offering free WordPress hosting and makes money by selling domain names and other upgrades

Why wouldn’t you always go with WordPress.com over hosting it yourself?

• Far less flexible
• Limited list of installable themes
• No plugins
• No ecommerce.

Where can I get WordPress web hosting?

• Most web hosts support WordPress
• Cheap web hosting sucks. Read my article: Stop complaining about $4 web hosting
• Zenutech Web Hosting – I’m a founder. 1-click install of WordPress. $6.95/month and up.
• phpFog & Pagoda Box – Cloud hosting with 1-click installs of WordPress. ~$29/month and up. Free trial.
• WP Engine & page.ly - Specialize in performance WordPress hosting. $49/month & $20/month and up. Free trial.

What’s new in the latest WordPress 3.3 release?

How do I properly setup WordPress after installing?

1. General Settings: Update tagline and timezone
2. Discussion Settings: Turn comments on/off
3. Permalinks: “Month and name” is a good option for SEO-friendly links
4. Appearance: Settings depend on theme

How do I change the home page to a content page instead of a list of posts?

• Create two new pages, one named “Home” and one named “Blog”
• Go to Settings > Reading
• Change “Front page displays” to “A static page”
• For the “Front page” choose “Home”, for the “Posts page” choose “Blog”
• Add whatever content you like to your the “Home” page

How do I install a theme through WordPress’s built-in directory?

• Go to Plugins > Add New.
• Search.
• Click “Install Now”.
• Activate.

How do I install a theme I downloaded from a web site?

• Go to Plugins > Add New > Upload.
• Choose the file you downloaded.
• Click “Install Now”.
• Activate.

Where can I find quality themes?

• WooThemes
• Press75
• Themify.me
• StudioPress
• App Themes
• Theme Garden

Where can I find quality plugins?
The following plugins are all free except when stated otherwise.

• Akismet* - prevent comment SPAM
• Disqus* & IntenseDebate* - (free & paid packages) comments with social features
• WordPress SEO* - define all your title tags, generates Google XML Sitemap, etc
• Google Analytics for WordPress* - very handy when using Google Analytics
• bbPress* - fully featured forums
• BuddyPress* - turns WordPress into a social networking site
• WPTouch* - (free & paid versions) adds a mobile-friendly version of your site
• WordTwit* - (free & paid versions) automatically send tweets
• ProPhoto* - (paid only) excellent plugin for photographers
• JetPack* - bundle of useful plugins from Automattic
• Gravity Forms* - (paid only) beautiful form building without any coding
• JigoShop* & WooCommerce* - online store plugins
• AddThis* - add social media sharing widgets to your posts and track use
• Events Calendar* - (free & paid versions) great calendar plugin
• Backup Buddy* - (paid only) backup, restore, and migrate
• ScribeSEO* – (paid only) helps you write content that is more search engine friendly
• WPML - (paid only) for multilingual sites
• Subscribe to Comments* – allows your commenters to subscribe to email notifications of follow up comments
• W3 Total Cache* – speeds up your WordPress site

* Can be found by searching WordPress’ built-in plugin directory for the plugin name.

How do I hire a web designer or web developer to build my WordPress site?

• Designer or developer? Doesn’t matter.
• Search “wordpress developer canada”
• WP Candy Pros Directory
• Freelance Switch Job Board
• WordPress Jobs
• Authentic Jobs

What does it cost to build a WordPress web site?

• Depends. Doesn’t matter that it’s WordPress. To get an idea of cost, read my article, What does it cost to build a web site?

If you’ve done a Google search for a solution to defining the image crop position, you will likely find several articles on how you can hack the WordPress core to change the crop position. Gross! Not only is it terrible practice to edit core WordPress files (#1 reason: makes upgrading a royal PITA), but this solution also changes the crop position for all your images. What if you want different crop positions for different image sizes? The following solution accomplishes this without hacking the core.

Copy and paste the following code into your theme’s functions.php file (or create an include file) and use the function bt_add_image_size instead of add_image_size. Once the patch is implemented in a core release you should be able to revert to using add_image_size and remove the code you copied into functions.php. As a bonus, I’ve included code that properly rotates photos containing EXIF data indicating the photo should be rotated for viewing. If you need to regenerate your previously uploaded images, I recommend Alex’s Regenerate Thumbnails plugin.

Wouldn’t take much to make this into a plugin, but it’s not worth going through the whole process for me personally.

This is looking great, very tasteful and exactly what I’m looking for.
— Joe Dee, Technology Director, Tribal DDB

It went well! Your code was apparently very easy for someone to take over and make small changes. You’ll notice we got to keep the beans and we didn’t have to make any major changes to what you had done. Thanks so much for the great work!!
— Sarah Lasch, Producer, Tribal DDB

Visit the site »        Visitez le site »

Thanks for the solid work on this Brad.
— Joe Dee, Technology Director, Tribal DDB

Visit the site »        Visitez le site »

Getting Started with WordPress

In this session, we’ll briefly go over why WordPress is a great choice. We’ll dive into setting up your own WordPress web site step-by-step, from ordering your web hosting to publishing your first page. We’ll explore buying beautiful, well-built themes and how to install them. We’ll navigate the overgrown jungle that is WordPress plugins and discover a few you absolutely must have. This is a workshop, not a formal presentation, so I’ll be more of a tour guide than a presenter. I’ll try keep the acronyms and techno babble to a minimum. You’ll be encouraged to ask questions throughout the session by voicing them or thumbing them to Twitter.

The following are my notes for the session. There are no slides.

Tweet your questions, comments, etc to me @bradt. Don’t forget to also tag your Tweets #aimhalifax so everyone can see them.

Download Counter
Excellent UI. WYSIWYG sucks less than most. Easy to use. Automattic support.

WordPress Site Counter
~30 million self-hosted WordPress sites

phpFog & Pagoda Box
Cloud hosting that supports WP.

My Article: Stop complaining about $4 web hosting
Cheap web hosting sucks.

Zenutech Web Hosting
My web hosting company. 1-click install of WordPress.

Post-Install Checklist:

1. General Settings: Update tagline and timezone
2. Discussion Settings: Turn comments on/off
3. Permalinks: “Month and name” is a good option for SEO-friendly links
4. Appearance: Settings depend on theme
5. Change home page to a content page instead of a list of posts.

Install a theme through WP’s built-in directory.

Install a theme from a download.

Quality Themes:

• WooThemes
• Press75
• Themify.me
• Studio Press
• App Themes
• Theme Garden

Quality Plugins:

• Akismet - prevent comment SPAM
• Disqus & IntenseDebate – comments with social features
• WordPress SEO - define all your title tags, generates Google XML Sitemap, etc
• Google Analytics for WordPress – essential for Google Analytics
• bbPress - forum plugin
• BuddyPress – turns WP into a social networking site
• WPTouch - adds a mobile-friendly version of your site
• WordTwit – automatically send tweets
• ProPhoto – excellent plugin for photographers
• JetPack - bundle of useful plugins from Automattic
• Gravity Forms – build forms without any coding
• JigoShop & WooCommerce – online store plugins
• AddThis – add sharing features to your posts
• Events Calendar – great calendar plugin
• Backup Buddy – backup, restore, and migrate
• ScribeSEO - helps you write content that is more search engine friendly
• WPML - for multilingual sites
• Subscribe to Comments – allows your commenters to subscribe to email notifications of follow up comments
• W3 Total Cache – speeds up your WP site

Most of these plugins can be found in WP’s built-in plugin directory.

Visit the site »

Here I describe some of the most common steps taken to produce a web site. That is not to say that every web site build requires all of these steps. Depending on the project some of these steps may not be necessary. The client may also wish to skip some of the steps in an effort to drive down cost. It’s true that skipping a step will lower the cost, but usually not by much. Because each step lends itself to the next, skipping one step often just adds extra effort to the next. For example, if you were to skip wireframing and get right into designing the mockups, it would most likely take longer to produce the mockups. All the considerations that would have been sorted out in the wireframing would have to be considered while doing the mockups.

Project Brief

First, the project needs to be defined. Sometimes the details are nicely laid out in a project brief document, other times it’s a few scribbles on a dirty napkin. I often receive emails to the tune of, “I’d like to build a web site similar to abcxyz.com ASAP. How much would that cost?” It’s difficult to take these requests seriously. On the flip side, when a designer or agency contacts me, they’ve almost always already helped the client hash out a detailed project brief.

A project brief saves time and money for both parties involved. And anyone can write it. You don’t need to know the technical details. And it doesn’t need to have an executive summary and appendix. A project brief consists of a description of the business, organization, product, or whatever the web site will be about. It details why the web site is being built, the goals it is meant to achieve. It points out similar web sites and basic descriptions of important features (for example, maybe a blog is required).

Depending on the project, sometimes a project brief still isn’t enough detail. If the project involves a lot of programming and some complex workflows, a requirements analysis may also be necessary.

Requirements Analysis

The product of a requirements analysis is a detailed document explaining precisely what needs to be built and how it works. It’s sort of a blue print of the site’s functionality and how users will interact with it. The document may contain “use case” analysis, describing what users with different roles can do in the system. For example, an auction site may allow an Administrator user to cancel any auctions but a Subscriber user can only cancel auctions they create.

Complex web sites (auction sites like eBay or social networking sites like Facebook) are referred to as web applications, or web apps for short. If you’re developing a complex web site or a web app, you should definitely go through the process of defining the requirements. A requirements analysis will help you identify the essential features and discard those not needed (or push them to a later phase of the project). Without this exercise now, you will undoubtedly be wasting time during design and programming working on features you will discover aren’t necessary for launch.

Content Strategy

So you have a bunch of content. That’s good enough, right? Wrong. Someone needs to sort through it and separate the useful stuff from the junk. If you were putting together slides for a presentation, you wouldn’t just throw in everything you have, would you? What if it was a 5-minute presentation? Content needs to be chosen. You need to constantly ask the question, “Why?” Why should this content be presented? This is content strategy.

Information Architecture

It is vital to the user experience that you take the time to organize your content, decide which pages are most important and how each page is related. Done properly, it ensures that users will easily be able to find what you want them to find. The product of this exercise, a graph showing a hierarchy of content and their relationship is called an Information Architecture (IA).

Of course, if the site is small and simple the IA should be quick and easy to do. Large web sites that were built without any forethought of the IA are almost always poorly structured and organized and can be very frustrating to use. Developing an IA shapes the way your web site flows, helps navigation and shows how your users will find content on your site. Many university and college web sites could benefit from a proper IA during their next redesign.

Copywriting

Are you a good speller? Why not write your own copy then, right? No. There are other things to consider when it comes to copy and the web, number one being Search Engine Optimization (SEO). Professional copywriters who specialize in writing for the web have an understanding of SEO practices and will make special efforts to write copy that targets the keywords your intended visitors will be searching for. Search engines love to snack on these keywords, especially when they are titles. Coming up with titles that contain search keywords but are still readable and relevant can be a challenge. If your copy doesn’t contain the right keywords people won’t find your site but if your copy contains too many keywords people won’t read it (and search engines may figure out it’s just a dump of keywords and ignore it). Writing good copy for the web is a bit of a dark art.

Branding

Branding can be complex when you start getting into evoking emotions, brand associations, etc. In its basic form branding involves designing a logo, choosing/developing typography, selecting colours, and coming up with different treatments. Typically you might have a black and white treatment and a colour treatment for your logo. Maybe also a treatment where the logo sits above the company name and one where it sits to the left of the company name. In Canada, we often require different treatments for French and English.

A brand guide document is often a product of branding. It details all of the different treatments and provides a reference document for anyone who works with the brand. This helps maintain consistency across print, television, web and other media.

The large companies and organizations I’ve worked with have always outsourced their branding to an agency who specializes in brand development. When Future Shop rebranded they had a typographer develop a special font just for their brand. Many companies get their branding done with the design of their other print materials before the web site is built, but others do ask for branding with the building of their web site.

If you’re interested in branding, check out Brand New, an excellent critique of brand designs.

Wireframes

Some web designers like to do detailed sketches with paper and pencil. Others like to use thick markers to ensure minimal detail. Others again like to start in a vector drawing program like Visio or Omnigraffle. No matter what the method, wireframes set the structure of pages and how your users will interact with them without the distraction of colours, shadows, and other aesthetic elements.

Currently I use Omnigraffle to trace the layout of pages, header, footer, navigation, sidebars, tables, forms, and other elements. I also describe how users will interact with the pages, for instance what happens when a form is submitted or a button is clicked (see example).

Having a solid set of wireframes to work from not only saves designers and developers time in subsequent phases of the project, it allows them to better focus and produce a product of the best possible quality. Wireframes gets you involved early, allowing you to provide feedback before design and development get started.

Mockups

Usually web designers work in some Adobe product (Photoshop, Illustrator, Fireworks, InDesign, etc) or some other graphic software. They craft an image of each page (or each distinct page template) approximately how it will look in a web browser. These images are often called mockups (though I’ve heard them called comps, screens and designs as well).

There has recently been a small movement of designers who are skipping this step and doing mockups right in the browser with HTML and CSS. The advantage being that you (the client) view the mockup in your web browser of choice and are not aware of any features that a different browser might have. For example, if the client is viewing the page in Internet Explorer 8 they would see square corners, unaware that in Firefox, Chrome, and Safari users see subtle rounded corners on certain elements.

Frontend Development

When we say ‘frontend’, we are really talking about the web browser. It’s the technologies that the web browser uses to display a web page and allow you to interact with it: HTML, CSS, and Javascript. However, a frontend developer also needs to understand semantics, SEO, and accessibility issues. Designers are often frontend developers as well, so your designer may be the one doing this work.

The frontend developer uses the previously produced mockups as a guide for dimensions, colours, typography, etc. When necessary they will “cut” out a piece of the mockup and create an image that will be loaded into the page. For example, a grainy texture that sits behind the content would be cut out of a mockup and saved for use as a background image in the web page.

Sometimes the HTML and CSS is done by one frontend developer and another who is better at programming handles the Javascript coding. The backend developer may actually do the Javascript work.

Backend Development

Also referred to as “coding” or “programming”, backend development involves writing code to handle processing of actions taken by someone using the web site. For example, when you submit a contact form the submission is checked for validity, and if valid, emailed to the site owner. If invalid, an error message is shown. The validating and emailing is done on the backend. Another example of backend development would be writing a new plugin for WordPress or another CMS.

Coding can be quite simple (like the form example above) or very complex and challenging. I recently completed a project that involved development of a recommendation engine (a simpler version of Amazon’s “You may also like…” feature). This involved research and implementation of an algorithm that guesses what you might like based on your previous ratings and other users’ ratings. In addition to a tough implementation, there were performance issues that also had to be resolved. (This type of recommendation algorithm is actually an area of study in Computer Science know as collaborative filtering. There was even a competition called the Netflix Prize awarding $1M to anyone that bested their algorithm by 10%.)

Quality Assurance & Testing

When building the site is done, it is necessary to go through all the components, test them, and fix any bugs that crop up. For example, if the site contains a form, you would submit it empty to see if all the validation works, fill it with non-typical information to see how it handles it, and see if the email message is sent after submission and is properly formatted. If someone finds a bug, they need to submit a bug report describing what is happening, what is supposed to happen, and the steps to take to reproduce the bug.

For a small project, the QA team may just be the client and a designer and/or developer. With larger, more complex projects, the QA team may be a dedicated group whose sole responsibility is to test the site for bugs and report them to the designers and developers.

Documentation

Very few developers will produce documentation unless you explicitly request it. Most developers see documentation as a waste of time because they don’t need it. They already know how everything works. You don’t.

Some developers do not enjoy writing documentation, so they avoid it like the plague. They don’t mention it and may even try to talk you out of it. They may be right however. If you’re developing a small site, just taking notes during a training session would probably be enough documentation. If you’re developing a large, complex web site or web application, documentation is absolutely necessary. Especially if it’s only one developer working on it. (“We need documentation in case you get hit by a bus.”) Unfortunately, of the many times I’ve heard clients express legitimate concern for a lack of documentation, there are very few times that the resources were committed to producing it.

Ideally, get on this right from the beginning. Work documentation into your budget and ensure that it is a project deliverable that you can ask for in the end.

Training

Unless this is a simple site built on a CMS you’re already familiar with, some kind of training is going to be necessary. Generally, training involves walking through the site, exposing you to all the features, and teaching you how to manage it. Many developers use WordPress or some other CMS which has standard features that many people are already familiar with. If they aren’t familiar with the CMS, there’s usually lots of tutorials and help readily available.