John Wang

Remove the Heroku Toolbelt

2011-09-13T00:00:00-07:00

If for some reason you installed the Heroku Toolbelt and want to remove it. You can do so by running these 2 commands: rm -rf /usr/local/heroku rm -rf /usr/bin/heroku

Unfortunately, these aren't documented on the site yet and it gave me some issues with my heroku accounts plugin and heroku ruby gem.

Factory Girl Blocking Rake Database Migrations

2011-09-07T00:00:00-07:00

I use a couple of items for doing Behavior Driven Development. Primarily, Cucumber and RSpec. In conjunction with those, I use Factory Girl and Shoulda.

Sometimes, it seems that Factory Girl can get in the way of running rake db:migrate when you push your code up to your source control system, in my case GitHub, for others download and run it. Such was the case with the Jenkins CI server.

The Issue

The problem was that Factory Girl attempts to create factories for models that did not have database tables created yet. It was trying to run before the database migrations ran when the server tried running the rake db:migrate. (Note, yes, we always prepend bundle exec, but shortened it here for context.)

The Solution

It seems that you're not to load the factory_girl_rails gem in your Gemfile in the :development group at all. The configuration on the GitHub repo just says to add it to your Gemfile, but instead you should add it to your :test group only. For example: gem 'factory_girl_rails', :group => :test

More details can be found on the mailing list topic.

Android UI Patterns

2011-09-06T00:00:00-07:00

I previous wrote about iOS UI Patterns resources. There were 3 that I curated. At the time, I was having a hard time finding some for Android. I still am, but since thing, a new one has popped up. These 2 are the resources I've found:

Also, there's always the Android Developers Blog where every now and then a UI pattern post comes up. Like this one on Twitter for Android's UI.

If you know of any others, please share. I'm always looking for them.

Fuzzy and Document Searching with Solr

2011-09-05T00:00:00-07:00

Recently, I needed to get add Searching into a web app. I decided to use Sunspot and Solr. Luckily, Ryan Bates has already done a Sunspot Railscasts, which got me started. However, I needed Fuzzy and Document Searching. The first part is actually fairly trivial thanks to the Wildcard searching with ngrams and many other results from doing a simple Google Search.

Fuzzy Searching

For the fuzzy searching, it was a simple matter of changing the configuration for text fieldType to:

    <fieldType name="text" class="solr.TextField" omitNorms="false">
      <analyzer type="index">
          <tokenizer class="solr.StandardTokenizerFactory"/>
          <filter class="solr.StandardFilterFactory"/>
          <filter class="solr.LowerCaseFilterFactory"/>
          <filter class="solr.EdgeNGramFilterFactory" minGramSize="2" maxGramSize="15"/>
        </analyzer>
      <analyzer type="query">
        <tokenizer class="solr.StandardTokenizerFactory"/>
        <filter class="solr.StandardFilterFactory"/>
        <filter class="solr.LowerCaseFilterFactory"/>
        <filter class="solr.PorterStemFilterFactory"/>
        <filter class="solr.PhoneticFilterFactory" encoder="DoubleMetaphone" inject="true"/>
      </analyzer>
    </fieldType>

Document Searching

To add searching of attachments, I needed to add the Sunspot Cell add-on. It's important to note, that this is a fork of the Sunspot Cell that is linked from the main Sunspot Wiki. The reference for it, is by Mauro Torres who's fork is being used.

The first step was to download the Solr Cell dependencies that are needed and install the plugin through rails plugin install. They all go into the solr/lib with the rest of Sunspot's built in Solr server. I have uploaded them into 2 separate zip files. File 1. File 2. Combined, they are 26MB large. that's why it's not in the main sunspot project.

After that, the schema needs to be altered to include the _attachment dynamic type.

    <dynamicField name="*_attachment" stored="true" type="text" multiValued="true" indexed="true"/>     
    <dynamicField name="ignored_*" type="ignored"/>

Searching Amazon S3 Documents

Since I'm deploying to Heroku and Heroku doesn't support writing to the filesystem for persistent storage, we use the recommended Amazon S3. You can use other systems, such as Google Storage for Developers or RackSpace CloudFiles. I use Paperclip for handling file uploads.

Due to the S3 needs. We need to grab the URL and use that for the attachment search. This is a simple as changing the searchable to use a private method like so:

class Asset
    has_attached_file :file,
        storage => :s3,
        :s3_credentials => "#{Rails.root}/config/amazon_s3.yml"

    searchable do
       text :title
       attachment :attached_file
     end

  private
    def attached_file
      URI.parse(file.expiring_url(60))
    end
  end

Deployment with Heroku and WebSolr

I deployed to Heroku. The easiest way I found to deal with the Solr system was to use the WebSolr Addon instead of trying to bring up my own Solr server. The starting point is $20/month. Not too terrible. You will need to check the PDF/MS Word/etc Indexing checkbox in the Basic Configuration section. Then in the Advanced Configuration copy and paste your schema.xml that you have configured for the document search.

Gotchas

There seems to still be a bug in the sunspot gem when it is used for fuzzy and document searching. It seems to be due to multiple matches in a document. The issue is with line 230 of the abstract_search.rb file. I recall seeing a pull request being sent to the sunspot repository, but it doesn't look like it's been merged in yet. I forked the gem and patched it. I'm using the git url to get this working until it is merged back into the upstream gem repo.

Note that you need to invoke the sunspot rake command to reindex all the items you have already uploaded. The system will only index new uploads and not existing without invoking the rake command.

TL;DR

The full schema.xml can be downloaded from the GitHub Gist. Download the Solr Cell Dependencies [Part 1 Part 2]. And put them in the solr/lib with the other files.

New Google APIs Client Library for Objective-C

2011-08-31T00:00:00-07:00

A while back, I wrote a small tutorial on how to use Google's GData Client library for iPhone. It's a pretty popular tutorial that constantly gets questions. Today, Google announced a new version of the Google Data library for Objective-C. I'm pretty exicted about this for a couple of reasons. The new Client library utilizes JSON, which I'm a big fan of and it also the new OAuth2 for authentication.

It looks just amazing.

#import "GTLBooks.h"

GTLServiceBooks *service = [[GTLServiceBooks alloc] init];

GTLQueryBooks *query = 
  [GTLQueryBooks queryForVolumesListWithQ:@"Mark Twain"];
query.filter = kGTLBooksFilterFreeEbooks;

[service executeQuery:query
    completionHandler:^(GTLServiceTicket *ticket,
                        id object, NSError *error) {
      // callback
      if (error == nil) {
        GTLBooksVolumes *results = object;
        for (GTLBooksVolume *volume in results) {
          NSLog(@"%@", volume.volumeInfo.title);
        }
      }
    }];

And it also follows the Google Objective-C Style Guide which I'm also a fan of.

Check out the new version of the Client library at the Google Project page.

I'm going to try and get a new updated tutorial in a couple of days.

Lessons from Google I/O 2011

2011-05-16T00:00:00-07:00

This was my first Google I/O as an attendee. It was definitely a great experience and I'll be going again for the foreseeable future. I learned a lot, met a lot of great people (not just Googlers, though they were all great), and I got to see some really impressive work from the Sandboxes.

This year's I/O conference sold out in less than an hour. Luckily, I was able to get in during the madness and also managed to snag myself into the I/O Bootcamp. I already had some expectations and pre-conceptions about the conference, but those all changed.

Lesson #1 - Attend Bootcamp

The Bootcamp was great. I was able to get into all the sessions I had planned on attending and also get some great insight. It was definitely worth it, given that only a small 100 or so can get in, compared to the 5,000 plus that were at I/O. Bootcamp was not only a great way to get up to speed on some things, but it was also a great way to get to chat with the Googlers where the odds are not as hectic.

Lesson #2 - Go to Office Hours

By far the least utilized part of the entire conference was Office Hours. I saw tons of developers walking around and very few actually took advantage of the Office Hours. Next year, I definitely plan on bringing along all my problems to the Android, AppEngine, Chrome and GoogleTV teams.

Lesson #3 - Don't be a Jerk

I heard quite a few people who only went for the free stuff. That's really not what you should be going for. I was also in a session where a developer was just plain rude to the speakers due to something that was outside of their area and not in their control. If you have a problem with Google's decision on which library they choose to use, talk to the developers at Office Hours and don't cause a scene during a session. It's very unprofessional and you do not get any sympathy from the room full of developers.

Lesson #4 - Pick Yours Sessions Wisely

All of the sessions this year were live streamed and recorded. They're now all available on YouTube to be watched. Everyone knew that beforehand, so going to the sessions, was mostly making sure to pick the ones you were most interested in, and also the ones with the speakers you wanted to talk to and ask questions. Most sessions also had giveaways, such as t-shirts, socks, stickers, etc. Some sessions occur during lunch time and can cause people to run around to the lunch room and back. Pretty much every session will be packed.

Lesson #5 - Visit the Sandboxes

Probably the second least utilized area. There were always people interacting with the sandboxes, but there were times when I would see a bunch of them just trying to get people's attention. You shouldn't just brush them off because they're not Google. In fact, there are some really great conversations you can have with them. For example, what challenges they have run into while getting their apps integrated with the Google APIs and how they got around it.

Overall Thoughts

I got a lot more out of I/O than I had expected. I had gone primarily to get better at Android development, learn Google Go and get more information out of AppEngine. I had already expected to do some networking and that's something I will work more on as well. The energy, excitement and enthusiasm of being there is just amazing. The price was a steal for the amount of information and networking. It'll likely go up a bit next year, but that's more than fine. I look forward to more great future I/O events.

iOS UI Design Patterns

2011-05-07T00:00:00-07:00

A few iOS Mobile UI Patterns Galleries have popped up over the past couple of years. They do a pretty good job at putting together A set of screenshots per objective, like launch screens, navigation bars, etc.

Here are 3 that I've run into and have heard many others talk about. Note that none of these currently have an iPad galleries. For iPad, I recommend checking out ThoughtBot's great site, LandingPad

I also haven't found one for Android and this is the best I've found so far Android UI Patterns.

Please feel free to contribute in the comments and I shall add them to the list.

Learning MacRuby

2011-04-10T00:00:00-07:00

I recently started learning MacRuby. The successor to RubyCocoa, which when I last looked at, was messy to get into. Since then, MacRuby has come a long way and will be a private framework in Apple's OS X Lion (10.7). This primarily just means that it will be present, but you will still need to package MacRuby within your app for bit longer.

If you're interested in the differences between the two, there's a great resource on the MacRuby Documentation section titled Essential Differences between RubyCocoa and MacRuby.

So far it's been fairly painless and a great learning experience. It's also likely a lot easier to pick up if you already know a bit of Objective-C and/or have had some Ruby exposure. That way you're not trying to learn two completely different languages and trying to bind them together. That's not to say, you can't. It's very much possible and you can learn Objective-C along the way.

The MacRuby team does a great job at pushing out fixes and getting back to developers on their Mailing List and IRC channel #macruby. They've also just recently migrated over to GitHub which made me much happier about digging into the source and getting started a bit better.

I'm hoping to push out at least a couple of apps to the the Mac App Store using MacRuby and see how that goes. I also plan to convert the PGPane preference pane to MacRuby in a separate branch as an exercise.

Here are some of the resources I have been using to learn MacRuby.

Websites

Apple's Developing Cocoa Applications Using MacRuby at their Mac OS X Developer Library.
MacRuby.org's Documentation section has some great tutorials, screencasts and more.

Screencasts

PeepCode's PeepOpen app and Meet MacRuby screencast.
Mike Clark's MacRuby Screencast for Pragmatic Programmers
Mike Clark's Embedding MacRuby screencast for Pragmatic Programmers

Books

I also found this nice step by step blog post while listening to The Ruby Show. MacRuby & Xcode 4: Build a Self-Contained MacRuby Application

PostgreSQL Preference Pane

2011-04-03T00:00:00-07:00

I recently found myself having introducing interns to Ruby on Rails development with both mySQL and PostgreSQL. The downloadable version of mySQL found on mysql.com comes with a Preference Pane for Mac OS X. The prefpane allows users to do a few small things. Primarily, view the status of the database server, start and stop the server, and toggle the auto-start option.

For PostgreSQL, we install using HomeBrew. There's no accompanying Preference Pane when installed via:

brew install postgresql

I also looked around on the PostgreSQL download section and couldn't find anything. A couple of Google searches yielded some outdated information, but a very interesting framework for Cocoa called postgres-kit. I want to look a bit more into it at a later point, but I also needed something that was bit more quick and easy for the interns.

The Terminal could be a bit more user friendly for Designers. Wise Heart Design has a intro guide to the Terminal for Designers. It's worth a read if you're not familiar with the terminal and shell commands.

It's also been a pain point for learning as, there's long commands to learn, or we need to teach them how to create aliases in the bash/zsh shell. Something we want to avoid and get through quickly, so we can get the designers access to the CSS and view layers of the app for them to style.

This gave me an interesting option of creating a Pref Pane for Postgres that mirrors the mySQL pref pane.

It's available for download and if installed with HomeBrew, does not need admin access or permissions to run. The code is open source and available on GitHub.

There's still a few things here and there that I may eventually try to add, but for the most part, it's a decent functional alpha. Perhaps, I'll go through the exercise of rewriting it in MacRuby.

Moved to Jekyll and GitHub

2011-04-01T00:00:00-07:00

I just finished moving my website and blog over to Jekyll from WordPress. I also moved the hosting over to GitHub. The process wasn't overly complex with the Jekyll migration options available, but it was a bit time consuming, making sure things were back to normal. Converting the WordPress theme to the Liquid template system took a bit of time as well.

Why Did I Move?

I wanted to learn something new. Jekyll is a static site generator written in Ruby.
I was having trouble accessing the old site due to some DNS issues with my provider which was preventing updates and new posts.
I want to have the content under source control, and primarily use Git and GitHub.
I like writing in Markdown, and WordPress was doing some funky formatting with my content.
I got tired of having to update WordPress and it's plugins whenever there was some security issue with it or new version that came out.
I'm addicted to GitHub, though, this won't be a reason for everyone.

As always, there's pros and cons to any system you use. These are the ones that I've had so far on the move.

Pros

It's on GitHub
It's super fast with a 100 out of 100 score on Google PageSpeed
I can move it to Heroku or Engine Yard AppCloud if I ever need to with Rack-Jekyll
Focus on Content and not worry about system updates
Not PHP

Cons

Loss of Dynamic content management, ie. Photo Gallery, Comments, Search, etc.
Required paid GitHub account (cheapest is $7 per month.)
No Database - if you need a database and all.

Overall

I'm very happy with having Jekyll as the platform and GitHub as the hosting. It's allowing me to focus on what's important. Content. While there are some annoyances and issues with the losses, I've found that many of them are rather trivial and simple to overcome.

Overcoming the Cons

Comments are set up through Disqus which I was previously using anyway.

Search is now handled by Google Custom Search instead of the default WordPress search.

Tags and Categories are still an issue I plan to look at eventually, though there are plugins and extensions to Jekyll out there. Jekyll does support categories, but my permalinks structure is currently blocking use of the categories.

For the image hosting, I'm currently considering using Google Storage, Amazon's S3 and CloudFront or just Flickr. Leaning towards Google Storage, primarily because learning is fun.

Enable NSZombie in XCode 4

2011-04-01T00:00:00-07:00

Cocoa Developers, especially new iOS and Mac developers have all likely run into the famous EXC_BAD_ACCESS error message in XCode. I'm not going to go into what that error message is and how it gets trigger. There's plenty of content on that online.

The way we normally debug those errors, are through NSZombies. You can go through Instruments and find those, but you can also just use the XCode Debugger while you're running the app in Debug by turning on the Environment Variable.

In XCode 3.x, you would simply right-click on the .app file in the Product category and choose Get Info then set the variable NSZombieEnabled to YES in the Arguments tab.

In XCode 4, this has been moved. The right-click menu no longer has the Get Info option, and there's also no Inspector to help you. Instead you must now go to, the top menu and select Product-> Edit Scheme or use the " ⌘ <" keyboard shortcut to bring up the menu.

From here, you can simply verify that the Run scheme is selected and set the environment variable in the tab as you normally have in XCode 3.

Helpful Tools for iOS and Mac Developers

2011-03-05T00:00:00-08:00

These are some of the great Third Party Developer Tools out there for Cocoa developers. I've used these on mostly a daily basis and others on an as needed basis. They're very handy and have saved me quite a lot of time and typing. Hopefully they'll be as useful to you, as they have been for me.

Accessorizer - Code generation for pretty much everything you'll ever need in Cocoa development.
IConify - Drag in an image and it'll generate the icon files for your iOS app. XCode comes with Icon Composer which can help as well.
App Scanner - scans your app for private API calls, so you can check before you submit it to the App Store for review.
Localization Suite - Everything you need to get your Cocoa app localized, minus someone to actually translate the words and phrases.
Code Pilot - Quick project navigation through files
Ingredients - Cocoa Documentation Viewer

Some are free, others are not.

Three20 Google Chrome Extension

2011-02-11T00:00:00-08:00

Earlier this week, Roman Nurik released the Android SDK Reference Search Google Chrome Extension to search the Android SDK Docs. I wasn't aware that it was possible to add super powers to the Chrome Omnibox. Having wanting to create a Chrome Extension for quite some time now, but having no idea what do, I was inspired by Roman's idea and went through his source code and also the Google Chrome Extensions sample:Extension Docs Search.

The result, is a nifty little Omnibox for Three20's API library. This very simple extension adds an tt command to the Chrome Omnibox. For example, typing tt TTView will bring up a list of all class names in the Three20 Library API matching TTView - selecting a list item navigates to the relevant Three20 API Reference URL onapi.three20.info.

Install through the Google Chrome Extension Gallery

You can find the source code for the Three20 Chrome Extension on GitHub.

Teaching a One Day Intro to iPhone App Development Class at University of Hawaii

2010-12-15T00:00:00-08:00

The University of Hawaii Pacific New Media Outreach College has just posted the details for my one day Intro to iPhone App Development course. It's a limited class size, so if you are interested, don't hesitate and sign up today!

No computer necessary, as the facilities will provide all the computers, network, and software required to build a working iPhone app. If you're interested in getting the app up and running on your iPod Touch, iPhone or iPad, you will need to be a paid Apple Developer. It costs $99 + tax per year. You can register for the Apple account here.

This is an introductory course, designed for those students that are comfortable with their computers and willing to learn some very basic programming.

My goal is to get your comfortable with the technology and to have a lot of fun. Therefore, we will be results focused and will ensure that you have a working application before the end of the day!

Tracking iOS Crash Reports with Hoptoad

2010-11-06T00:00:00-07:00

The folks over at thoughtbot have an great web app called Hoptoad to monitor exceptions. They've had support for a bunch of languages (PHP, Python, Ruby, etc) and frameworks (Merb, rails, Sinatra, etc) through their API. Until recently, I had been using a product called CrashBucket from the guys over at GUI Cocoa and Two Guys to track my iOS apps crash reports. Thoughtbot has now partnered with GUI Cocoa and Two Guys to bring the CrashBucket functionality into Hoptoad. The result of this partnership is the Hoptoad iOS Notifier and it was just announced on November 5th on Thoughtbot's blog.

While Crash Reports are available through the iTunesConnect portal, Hoptoad takes it a level further for developers. With the iOS Notifier, the crash reports are broken down by environment. You can also get crash reports for Adhoc app releases. Having these options are great for allowing the tracking down of crashes and bugs during development and beta testing. It's also great for those In-House apps that never make it to the App Store. That's the small requirement that iTunesConnect needs show reports.

[caption id="attachment_874" align="alignnone" width="300" caption="Image from Thoughtbot"][/caption]

Luckily for me, almost all of my apps are a combination of Ruby on Rails3 web apps and iOS apps. This makes it easy to see all of the reports for a bug in one place for both the Rails and iOS errors.

Hopefully Android support is on the way for Hoptoad as well.

GData on Rails on Google AppEngine

2010-06-10T00:00:00-07:00

There's a great article by Jeff Scudder on Retrieving Authenticated Google Data Feeds with Google App Engine on the Google App Engine Articles site. Jeff's tutorial utilizes the GDdata (Google Data) Python client library. The aim of this article is to replicate Jeff's Tutorial using GData on Rails on Google App Engine running on JRuby on Rails.

Requirements

Ruby 1.8.6 patch level 114+
RubyGems 1.3.1+
Rails 2.3.5
GData Gem

Introduction

I'm sure your mind is positively buzzing with ideas for how to use Google App Engine, and a few of you might be Google Data AtomPub APIs. Quite of few of Google's products expose a Google Data API, (a few interesting examples are YouTube, Google Calendar, and Blogger--you can find a complete list here) and these APIs can be used to read and edit the user-specific data they expose.

In this article we'll use the Google Documents List Data API to walk through the process of requesting access from and retrieving data for a particular user. We'll use Google App Engine's webapp framework to generate the application pages, and the Users API to authenticate users with Google Accounts.

Google's AuthSub APIs

Some Google Data services require authorization from your users to read data, and all Google Data services require their authorization before your app can write to these services on the user's behalf. Google uses AuthSub to enable users to authorize your app to access specific services.

Using AuthSub, users type their password into a secure page at google.com, then are redirected back to your app. Your app receives a token allowing it to access the requested service until the user revokes the token through the Account Management page.

In this article, we'll walk through the process of setting up the login link for the user, obtaining a session token to use for multiple requests to Google Data services, and storing the token in the datastore so that it can be reused for returning users.

Using the GData on Rails client library

Google offers a Data on Rails client library that simplifies token management and requesting data from specific Google Data APIs. In this article we'll use this library, but of course you're welcome to use whatever works best for your application. Download the Gdata on Rails client library.

To use this library with your Google App Engine application, simply install the library gem and require it as you usually would. There's nothing more to it than that!

Installing the Google Data Ruby Utility Library

To obtain the library, you can either download the library source directly from project hosting or install the gem:

sudo gem install gdata

config/enviroment.rb

config.gem 'gdata', :lib => 'gdata'

config.ru

[sourcecode language="ruby"] require 'appengine-rack' require 'image' require 'image-upload' require 'user' require 'gdata' AppEngine::Rack.configure_app(

:application => 'jruby-gdata',
:precompilation_enabled => true,
:sessions_enabled => true,
:version => "1")

AppEngine::Rack.app.resource_files.exclude :rails_excludes ENV['RAILS_ENV'] = AppEngine::Rack.environment

deferred_dispatcher = AppEngine::Rack::DeferredDispatcher.new(

:require => File.expand_path('../config/environment', __FILE__),
:dispatch => 'ActionController::Dispatcher')

map '/contacts' do use AppEngine::Rack::LoginRequired run deferred_dispatcher end

map '/' do run deferred_dispatcher end [/sourcecode]

Gemfile

[sourcecode language="ruby"]

Critical default settings:

disable_system_gems disable_rubygems bundle_path '.gems/bundler_gems'

List gems to bundle here:

gem 'rails_dm_datastore' gem 'rails', "2.3.5" gem 'appengine-apis' gem 'gdata' [/sourcecode]

Step 1: Generating the Token Request Link (AuthSub)

Applications use an API called AuthSub to obtain a user's permission for accessing protected Google Data feeds. The process is fairly simple. To request access from a user to a protected feed, your app will redirect the user to a secure page on google.com where the user can sign in to grant or deny access. Once doing so, the user is then redirected back to your app with the newly-granted token stored in the URL.

Your application needs to specify two things when using AuthSub: the common base URL for the feeds you want to access, and the redirect URL for your app, where the user will be sent after authorizing your application.

To generate the token request URL, we'll use the GData::Auth::AuthSub module included in the Google Data client library. This module contains a method, get_url, which automatically generates the correct URL given the base feed URL(scope) and your website's return address (next_url). In the code snippet below, we use this method to generate a URL requesting access to a user's Google Document List feed.

In our routes.rb file, we will define a URL mapping to create a separate URL for each step. Here's an example:

[sourcecode language="ruby"]

map.connect 'step1', :controller => 'step1', :action => 'get'
map.connect 'step2', :controller => 'step2', :action => 'get'
map.connect 'step3', :controller => 'step3', :action => 'get'

[/sourcecode]

To illustrate this first step of using AuthSub in the app, we will create a step1_countroller.rb that looks something like this:

[sourcecode language="ruby"] class Step1Controller < ApplicationController

def get

scope = 'http://docs.google.com/feeds/'
next_url = url_for :controller => self.controller_name, :action => self.action_name
secure = false  # set secure = true for signed AuthSub requests
session = true
@authsub_link = GData::Auth::AuthSub.get_url(next_url, scope, secure, session)

end end [/sourcecode]

Step 2: Retrieving and Updating a Token

Once we've generated an authorization request URL for a particular Google Data service, we'll need a way to use the token returned to our app to access the feed in question. Now, we need to retrieve the initial token returned to us for the Google Documents List API, and upgrade that token to a permanent session token. Remember that we told the service to redirect the user to the URL 'http://jruby-gdata.appspot.com/step1'. Let's extend our simple example above to do a few things. We'll call this new version step2.

Let's write the functionality that will handle the return request from the Google Data service the user signed in to. The Google Data service will request a URL that will look something like this:

http://jruby-gdata.appspot.com/?auth_sub_scopes=http%3A%2F%2Fdocs.google.com%2Ffeeds%2F&token=CKC5y...Mg

Which is just our return URL appended with the initial authorization token for the service which grants our app access for our user. The code below first takes this URL and extracts the service and the token. Then, it requests an upgrade for the token for the document list service.

We use two new methods to achieve this. First, we try to obtain the single use AuthSub token by examining the current page's URL. The params[:token] function handles token extraction for us. To upgrade this initial token to a session token, we use client.auth_handler.upgrade().

[sourcecode language="ruby"] require 'appengine-apis/users'

class Step2Controller < ApplicationController def get

@client = GData::Client::DocList.new
next_url = url_for :controller => self.controller_name, :action => self.action_name
secure = false  # set secure = true for signed AuthSub requests
sess = true
@authsub_link = @client.authsub_url(next_url, secure, sess)

if params[:token].nil? and session[:token].nil?
  @url = "nothing"
elsif params[:token] and session[:token].nil?
  @client.authsub_token = params[:token] # extract the single-use token from the URL query params
  session[:token] = @client.auth_handler.upgrade()
end

@url1, @url_linktext = if AppEngine::Users.current_user
    [AppEngine::Users.create_logout_url(request.url), 'Sign Out']
  else
    [AppEngine::Users.create_login_url(request.url), 'Sign In']
  end

@client.authsub_token = session[:token] if session[:token]

end end

[/sourcecode]

After we upgrade the initial token using the client.auth_handler.upgrade() method. Below, we will take you through the steps to use this token and fetch your user's feed in your application.

Step 3: Using a session token and fetching a data feed.

Now that we have obtained and stored the session token, we can use the AuthSub session token to retrieve the user's document list feed with our application. The final step is to get the user feed from Google Docs and display it on our site!

Lets add a new method to our app to request the feed and handle a token required message. We will call this method fetch_feed and add it to the Fetcher request handler class. In this example, the app uses client.Get to try to read data from the feed.

Some Google Data feeds require authorization before they can be read. If our app had previously saved an AuthSub session token for the current user and the desired feed URL, then the token will be found automatically by the client object and used in the request. If we did not have a stored token for the combination of the current user and the desired feed, then we will attempt to fetch the feed anyway. If we receive a "token required" message from the server, then we will ask the user to authorize this app which will give our app a new AuthSub token.

Here is the code for the fetch_feed method:

[sourcecode language="ruby"] def fetch_feed (client, feed_url)

if feed_url.nil?

'No feed_url was specified for the app to fetch.<br/>'

else

  begin
    @feed = @client.get(feed_url).to_xml
    # If fetching fails
    rescue GData::Client::AuthorizationError
      @error = 'authorization error'
  end

end end [/sourcecode]

Now that we have a method to fetch the target feed, we can modify the Fetcher class' get method to call this method after we upgrade and store the AuthSub token.

Our app also needs to know the URL which should be fetched, so we add a URL parameter to the incoming request to indicate which feed should be fetched. The below code for the get method adds the ability to find out which URL the app should fetch and fetches the desired feed.

[sourcecode language="ruby"] require 'appengine-apis/users' require 'appengine-apis/urlfetch'

class Step3Controller < ApplicationController

def get

@client = GData::Client::DocList.new
next_url = url_for :controller => self.controller_name, :action => self.action_name
secure = false  # set secure = true for signed AuthSub requests
sess = true
@authsub_link = @client.authsub_url(next_url, secure, sess)

if params[:token].nil? and session[:token].nil?
  @url = "nothing"
elsif params[:token] and session[:token].nil?
  @client.authsub_token = params[:token] # extract the single-use token from the URL query params
  session[:token] = @client.auth_handler.upgrade()
end


@url1, @url_linktext = if AppEngine::Users.current_user
    [AppEngine::Users.create_logout_url(request.url), 'Sign Out']
  else
    [AppEngine::Users.create_login_url(request.url), 'Sign In']
  end

@client.authsub_token = session[:token] if session[:token]

feed_url = params[:feed_url]

if feed_url.nil?
  @sample_url = next_url + '?feed_url=http%3A%2F%2Fdocs.google.com%2Ffeeds%2Fdocuments%2Fprivate%2Ffull'

end

fetch_feed(@client,feed_url)

end end [/sourcecode]

In the above, we request the feed by calling fetch_feed(@client, feed_url).

You can see the final program at work by visiting: http://jruby-gdata.appspot.com/. Also, view the complete source code, where we put all of this together at the Google App Engine sample code project on Google Code Hosting.

The AuthSub session tokens are long lived, but they can be revoked by the user or by your application. At some point, a session token stored in your data store may become revoked so your application should handle cleanup of tokens which can no longer be used. The status of a token can be tested by querying the token info URL. You can read more about AuthSub token management in the AuthSub documentation. This feature is left as an exercise to the reader, have fun :)

Conclusion

Using the Google Data on Rails client library, you can easily manage your user's Google Data feeds in your own Google App Engine application.

The Google Data on Rails client library includes support for almost all of the Google Data services. For further information, you can read the getting started guide for the library, visit the project to browse the source, and even ask questions on the 's Google group.

As always, for questions about Google App Engine, read Google's online documentation and visit our google group.

Appendix: ClientLogin

This example uses AuthSub to authorize the app to act on the user's behalf, but the Google Data APIs support other authorization mechanisms. In some cases, you might want to temporarily use ClientLogin while developing your application. If you are going to use ClientLogin, the Ruby library has a client class for each of the APIs and a Base class:

[sourcecode language="ruby"] client = GData::Client::DocList.new client.clientlogin('user@gmail.com', 'pa$$word')

client_login_handler = GData::Auth::ClientLogin.new('writely', :account_type => 'HOSTED') token = client_login_handler.get_token('user@example.com', 'pa$$word', 'google-RailsArticleSample-v1') client = GData::Client::Base.new(:auth_handler => client_login_handler) [/sourcecode]

You may receive a CAPTCHA challenge when requesting a ClientLogin token which you will need to handle in your app before you can receive a ClientLogin token. For this and a few other reasons, I don't recommend using ClientLogin in Google App Engine, but the above is how you could use it while developing your app.

Resources

JSON with Ruby on Rails on Google AppEngine

2010-04-23T00:00:00-07:00

Getting Started

Here's a list of what you'll need to get started with the demo:

a Google AppEngine account
Ruby 1.8.6
Rails 2.3.5
Ruby on Rails AppEngine Gem

Instructions

The first steps that you'll want to follow are from John Woodell's Gist on Rails 2.3.5 on App Engine with DataMapper.

As you'll notice, the last couple of steps generate a RESTful resource called Contact and also it's associated DataMapper Model.

Adding REST

Now in order to add JSON to the mix, we'll need a couple more things:

JSON gem
dm-serializer gem

We only have to make a few very small changes to the demo app that you got from the Gist to get JSON integrated. They're listed below, and also at this Gist.

Gemfile changes: adding the json-jruby and dm-serializer to the gems for bundler

[sourcecode language="ruby"]

Critical default settings:

disable_system_gems disable_rubygems bundle_path '.gems/bundler_gems'

List gems to bundle here:

gem 'rails_dm_datastore' gem 'rails', "2.3.5" gem "json-jruby" gem "dm-serializer" [/sourcecode]

config.ru changes: adding require 'dm-serializer' and 'json'

[sourcecode language="ruby"] require 'appengine-rack' require 'cgi' require 'json' require 'dm-core' require 'dm-serializer'

AppEngine::Rack.configure_app(

:application => 'iphone-json',
:precompilation_enabled => true,
:sessions_enabled => true,
:version => "1")

AppEngine::Rack.app.resource_files.exclude :rails_excludes ENV['RAILS_ENV'] = AppEngine::Rack.environment

deferred_dispatcher = AppEngine::Rack::DeferredDispatcher.new(

 :require => File.expand_path('../config/environment', __FILE__),
 :dispatch => 'ActionController::Dispatcher', :isolate => true)

map '/admin' do use AppEngine::Rack::AdminRequired run deferred_dispatcher end

map '/user' do use AppEngine::Rack::LoginRequired run deferred_dispatcher end

map '/' do run deferred_dispatcher end [/sourcecode]

and finally, the contacts_controller.rb needs the corresponding format.json render statements.

[sourcecode language="ruby"] class ContactsController < ApplicationController # GET /contacts # GET /contacts.xml # GET /contacts.json def index

@contacts = Contact.all

respond_to do |format|
  format.html # index.html.erb
  format.xml  { render :xml => @contacts }
  format.json { render :json => @contacts }
end

end

# GET /contacts/1 # GET /contacts/1.xml # GET /contacts/1.json def show

@contact = Contact.find(params[:id])

respond_to do |format|
  format.html # show.html.erb
  format.xml  { render :xml => @contact }
  format.json { render :json => @contact }
end

end

# GET /contacts/new # GET /contacts/new.xml # GET /contacts/new.json def new

@contact = Contact.new

respond_to do |format|
  format.html # new.html.erb
  format.xml  { render :xml => @contact }
  format.json { render :json => @contact }
end

end

# GET /contacts/1/edit def edit

@contact = Contact.find(params[:id])

end

# POST /contacts # POST /contacts.xml # POST /contacts.json def create

@contact = Contact.new(params[:contact])

respond_to do |format|
  if @contact.save
    flash[:notice] = 'Contact was successfully created.'
    format.html { redirect_to(@contact) }
    format.xml  { render :xml => @contact, :status => :created, :location => @contact }
    format.json { render :json => @contact, :status => :created, :location => @contact }
  else
    format.html { render :action => "new" }
    format.xml  { render :xml => @contact.errors, :status => :unprocessable_entity }
    format.json { render :json => @contact.errors, :status => :unprocessable_entity }
  end
end

end

# PUT /contacts/1 # PUT /contacts/1.xml # PUT /contacts/1.json def update

@contact = Contact.find(params[:id])

respond_to do |format|
  if @contact.update_attributes(params[:contact])
    flash[:notice] = 'Contact was successfully updated.'
    format.html { redirect_to(@contact) }
    format.xml  { head :ok }
    format.json { head :ok }
  else
    format.html { render :action => "edit" }
    format.xml  { render :xml => @contact.errors, :status => :unprocessable_entity }
    format.json { render :json => @contact.errors, :status => :unprocessable_entity }
  end
end

end

# DELETE /contacts/1 # DELETE /contacts/1.xml def destroy

@contact = Contact.find(params[:id])
@contact.destroy

respond_to do |format|
  format.html { redirect_to(contacts_url) }
  format.xml  { head :ok }
  format.json { head :ok }
end

end end [/sourcecode]

Final Notes

You may have noticed that by default you get RESTful XML when you generated the resource. It doesn't work without the needed dm-serializer. Remember, we're using DataMapper here and not ActiveResource. If you try, you'll get this beautiful error.
SEVERE: [1272067889120000] RuntimeError (Not all elements respond to to_xml)

If you inspect your DataMapper model, you'll notice that every field is a required field. This is key for when you're testing your POST method.

The last thing that is currently being looked into, is that the POST requires you to pass in the Class in lowercase for it to properly work. I'm not sure if this is a case-sensitive issue, or just purely needing to change the param to be ":Contact" instead of ":contact" in the controller.

Source Code

The fully working demo can be found running on Google AppEngine at: iphone-json.appspot.com
source is available on Github.
And there is an accompanying iPhone REST client also available on Github. (Android client is currently in development.)

Alternatively, if you just want to quickly test your newly created JSON RESTful resource, you can use the REST Client for Firefox or REST Client for Google Chrome.

Lessons Learned: Planning for a Successful Talk

2010-03-25T00:00:00-07:00

On March 20th, I had the privilege of being a speaker at Unconferenz. I also ended up hosting a couple of other talks throughout the day as well. I presented on the topic of Designing iPhone/iPad Apps and 3rd Party SDKs. The slides are available here.

I learned quite a few lessons as a speaker about giving a better talk.

Internet Access

I didn't run into any problems on Internet Access at Unconferenz, but I did make sure to ask the host if there would be Internet access provided. I also brought along a personal USB 3G Modem as a backup.

Power

Power actually could have been a problem. I currently use a MacBook Pro which about 2-3hrs of battery life. However, something to consider is the computer going to sleep mode while you're in the middle of a presentation. Also, the power outlet may not be somewhere remotely close to how long your power cable reaches. For this, I carry both my power adapter and also a 10ft extension cable. You may also want to be a kind person and bring a multi-outlet mini surge protector so not to take the only one or 2 power outlet available.

Backup Plan

Always have a backup plan. The one thing that I did not have at all was a Mini-DisplayPort to VGA adapter for my laptop to connect to the projector. That was a bad thing. Luckily, someone at the conference did have one and I was able to borrow it. There was also a computer in the room that I could have used as another fallback as long as I had my presentation on a USB Key or uploaded somewhere like DropBox on the web.

Contact Info

I ran out of business cards. That was a bad thing. Always bring lots of those. I was lucky enough that some people had iPhones with the Bump app to swap contact info and also some who were willing to either give me theirs so I could contact them or just quickly add me to either Twitter or Gmail email address.

Double-Check Everything, Maybe Even Triple-Check

I had uploaded my slides ahead of time in case anyone wanted to download them. Unfortunately for me, I misspelled the file name and the link was dead. I quickly corrected the link and made sure to tweet it back out. That was very embarrassing to say the least. Make sure your stuff is set before you announce it.

Resources

On 37 Signals' REWORK

2010-03-17T00:00:00-07:00

The folks over at 37 Signals recently released their new book called Rework. It's a business book on how they run their company and business.

REWORK is a brilliant book. Check out the book's website. The website contains videos and sample images of the contents.

Why You Should Read REWORK

The book is dirty cheap. It's under $10 on the Amazon Kindle and just over $12 in hardcover on Amazon. It's also an extremely short book coming in at just under 300 pages. I finished reading it less than 3 hours. All of the principles detailed in the book are brilliantly worded to the point that they'll feel like common sense. The principles are also nice and short so that you can actually remember and apply them. Jason and David don't throw a bunch of mumbo jumbo and useless buzz words.

This is a quick but very powerful read and definitely recommended for everyone. It's not a book just for business owners, CEOs or the cubicle workers. REWORK is a book that everyone at every level should read.

What's Next?

Head on over to the book's website and check out the PDF excerpt for a sample or just go straight to Amazon and order the Kindle version or Hardcover version.

Where I Am and Where I Want to Be

2010-01-28T00:00:00-08:00

I recently introduced my new venture called Fresh Blocks. A self-owned business of mine for web design and iPhone Apps. I've also recently become interested in documenting an actual process of things. Partly due to both John O'Nolan's monthly business reviews and also Aaron Irizarry's recent videocast series about Making the Transition.

So What Does This All Mean?

For starters, It means that I'm going to be attempting to move all technical related posts (maybe just the future ones) to the Fresh Blocks Blog.

Secondly, I'm going to do monthly and yearly goals for both Fresh Blocks and myself. Of which, I will be using the blog to document my progress, successes and failures similar to John O'Nolan's concept.

I plan on separating content into a few broader categories, such as following my Thoughts and my Learnings. I'll likely keep this page more personal and the Fresh Blocks page more professional.

Hello World

It seems appropriate in a way to start anew. But as we all know, Google never forgets. Some of the things that I am looking to document will be highly related to personal development. Of course, it will also overlap with what Fresh Blocks does, simply because Fresh Blocks is a large part of my development.

I'm going to be going over goals and what was achieved, what was not and why not. I will also go into noting special blog posts from around the web that have in some way contributed to my personal development.

The Year That Was 2009

Last year brought a bunch of changes. In the beginning of the year, I started up a company called Fresh Blocks. It was created to transition my freelance work from my personal name to a more distinguishable brand. The creation of Fresh Blocks also allowed me to learn what it takes to run a business and be a freelancer. I quickly became involved in social media networks such as Twitter and Friendfeed to connect to others in the fields and learn from them.

Another by product of Fresh Blocks was getting into iPhone app development. This of course meant learning a complete new programming language (Objective C) and framework of Cocoa (Touch.) I signed up for a developer's account and began reading through tons of Apple Documentation, Dave Mark's Beginning iPhone SDK Development book, and following along with Stanford's CS193P iTunesU iPhone Programming Course. I also joined various Google Groups, the iPhone Dev SDK forum and Apple's own Beta forum. I quickly developed 2 internal iPhone apps and 1 that was rejected by Apple's App Store due to being a purely self-marketing app. All in all, I learned a great deal and am still thoroughly excited about iPhone programming.

On the web design and development end of things, I got my feet wet with some jQuery, seeing as I haven't done much Javascript since back in 1999, it was quite a breath of fresh air. I also got started with some frameworks such as 960.gs and BlueprintCSS. I started getting down to learning Ruby on Rails and Python. I also introduced myself to Git towards the middle of the year and been working on transitioning from SubVersion over to Git.

And quite possibly, the biggest accomplishment of last year, was my engagement. One that I'm quite proud of and very excited about.

The Books

The following is the list of books that I read as part of my personal development last year.

The Principles of Successful Freelancing
Good to Great
Escape from Cubicle Nation: From Corporate Prisoner to Thriving Entrepreneur
Web Standards Solutions: The Markup and Style Handbook (Pioneering Series)
Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS (2nd Edition)
Don't Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition
Beginning iPhone SDK Development
The Principles of Beautiful Web Design
Learning jQuery: Better Interaction Design and Web Development with Simple JavaScript Techniques
Designing with Web Standards (2nd Edition)
CSS Mastery: Advanced Web Standards Solutions
iPhone SDK Development (The Pragmatic Programmers)
Adobe Illustrator CS4 Classroom in a Book
Free
Unclutter Your Life in One Week
The Complete Graphic Designer: A Guide to Understanding Graphics and Visual Communication
A Designer's Research Manual: Succeed in Design by Knowing Your Clients and What They Really Need

Where I Am Now

I've started my Mobile Programming course at Hawaii Pacific University. The course is centered around Google Android and iPhone OS programming. The class runs until the middle of May. I've also got an iPhone app I've been working on that I plan on finishing up and submitting it for an Apple Design Award. Hopefully winning one as well. I have a Magento project that I'm also working on.

I'm also in the process of re-arranging content and the overall design of this site. Primarily making it easier for future clients and employers to find information about me and at the same time documenting my personal development growth.

What's on Deck for 2010

I currently have the following upcoming for the remainder of the year:

Getting deeper into Android Development
Starting up on iPad SDK Programming and releasing some Beta apps
Finishing up some iPhone apps and getting them published on the App Store
Getting back into Ruby on Rails and Python/Google App Engine
Learning more about ExpressionEngine 2.0
Finishing up a Magento eCommerce site client project

And I'm fairly sure I'll come up with some more goals and such along the way.

Introducing Fresh Blocks

2009-12-14T00:00:00-08:00

It's Official

I've started a web and mobile design/development company called Fresh Blocks. The focus is on creating either website design and web apps or iPhone and Android apps. I've been working under the name since earlier this year, and the the small site launched for the company.

The idea of Fresh Blocks came around during a moment of "Designer's Block." Where I was looking for fresh ideas to work with. Hence the name of the company being born. A lot of work went into making sure the name was viable as a brand. ThinkVitamin has a great article about choosing a name: What's in a Name? What we're trying to do is help individuals and businesses grow their online presence through the web and mobile web.

Here's to new beginnings! Head on over and say hello to Fresh Blocks. Alternatively follow Fresh Blocks on Twitter or become a fan on Facebook.

Further Education

I've also registered as a Special Status Student at Hawaii Pacific University for the Mobile Application Development course. This course will be focusing on teaching both iPhone and Android Application Development. I'm looking forward to enhancing my knowledge of both the iPhone and Android SDK.

Review: Kapsoft's iPhone Stencil

2009-11-10T00:00:00-08:00

Overview

Hot off the trails of the news that Apress acquired the publishing rights to Kapsoft's iPhone Application Sketch Book, comes the new iPhone Stencil.

In Detail

The new Apress Book is has been improved. A new cover. It's now 1.5x scale (150% of actual size iPhone). Pages have been increased by 25 - that's 50 more templates. And the pages have been perforated for easy tear out.

The Stencil is also 1.5x scale but includes a 1.0x scale iPhone should you need it. It is made of green plastic, much the same as most stencils you buy at a design store. It also features a nice little ruler on the side. Something extra that I had not anticipated, but find very handy. The stencil itself, features the majority of UIKit elements you will use in sketch design and comes in very handy. While, it is a bit on the larger end, it does fit nicely within the new sketchbook pages for carrying.

The Stencil will cost you $9.99 while the new Apress version of the Sketchbook comes in at $14.99.

Compared against Design Commission's Stencil

While both stencils are larger scale than the actual iPhone size, the new Kapsoft one is a tad bit bigger. 1.5x the size of the iPhone. Design Commission's stencil seems to be roughly 1.25x scale.

Kapsoft's stencil is also cheaper in cost. $9.99 vs $17.95. Though, I'm sure that the material cost plays quite a role in this. Plastic against Stainless Steel.

I do find the Design Commission's Stencil to be much more portable due to it's smaller footprint. And the stainless steel material feels a bit more Apple-like and sturdier. Plastic can break easily.

Overall

You really can't go wrong with either Stencil kit. And you definitely should be sketching designs before jumping into XCode. If you are planning to use the Apress Sketchbook, you'll want to get the new Kapsoft Stencil due to the matching iPhone scale. Similarly, Design Commission offers both a downloadable PDF template and now a Sketchpad for $7.95 to go with their own Stencil Kit.

Gallery

[nggallery id=18]

For the Love of the Game: The Importance of Passion

2009-11-09T00:00:00-08:00

I just started getting caught up with all the podcasts I regularly listen to again. I got pulled away due to a recent project deployment that required long working days. The two podcasts I was working on are Boagworld and StackOverflow. More specifically, the same issue came up in episode 188 - Clearspace or Headleft? of Boagworld and episode 73 of StackOverflow.

The general questions were centered around: The importance of passion.

In the Boagworld podcast, there were quite a few thoughts and options to the questions since it was an interview with the Clearleft crew. So, you got the perspective of not only Paul Boag and Marcus Lillington from Headscape, but also Andy Budd and Jeremy Keith. The discussion centered mostly on how one finds the time to keep up with new trends, technologies, etc in the web design industry. The general consensus being that there's a very blurry line between the work-life balance when it comes to this kind of thing. One of the important takeaways from listening to Andy talk about it, was that if it's not making you all jumpy and gitty to want to know what's changing, what the new hot trend is, or what new technologies are coming out, that it raises a red flag and you should really take a step back and re-evaluate if this is really your passion. Of course, you could just be burnt out. As Paul mentioned that he does the majority of his RSS feeds reading in bed on his own time, it's important to remember, most of us would be doing this anyway because it's what we love to do.

Although, not exactly the same question, the same topic was brought up in a different manner on the StackOverflow podcast. This time in regards to what technology to choose to learn for future profit. Specifically, the listener was not interested in coding in Objective-C for the rest of his life, yet concerned if Ruby on Rails would still be a viable way to make a living in the area he currently lives in. To this question, both Jeff Atwood and Joel Spolsky answered similarly with:

<li>"Joel and I concur: it probably doesn't matter what language and toolchain you use, as long as it has a certain level of critical mass. What you should be more concerned about is the product you're creating.</li><br /> <li>If you're happy with your current tool chain, then there's no reason you need to switch. However, if you can't list five things you hate about your favorite programming language, then I argue you don't know it well enough yet to judge. It's good to be aware of the alternatives, and have a healthy critical eye for whatever it is you're using.

<li>Most programming languages don't evolve particularly well over time. They're usually replaced by other languages rather than new iterations of themselves. Why? What languages would you point to as the best example of growing and evolving in useful, relevant ways?"</li><br />

While neither Joel or Jeff mentioned anything along the lines of picking something because it'll make you a lot of money. I can't imagine either of them would even come close to making any suggestion like that to anyone. Picking something just because it's the new "money pot" or pot of gold at the end of the rainbow, is just asking for short term gain and potentially, long term unhappiness.

In the End

It's my own opinion that you should not do or choose a path just because it has the potential to make you a lot of money if it doesn't interest you at all. More so, if you have some inner hatred for Objective-C and think you should just suck it up and make something for the iPhone because it can net you a lot money. It's not my recommendation, but do as you will.

What are your thoughts on Doing for the Money vs Doing for the Love?

Review: Wacom Intuos4 Art Pen

2009-09-28T00:00:00-07:00

Wacom's new Intuos4 Art Pen just finally began shipping last week. Previously, it had be on back-order since the release of the Intuos4 Tablet. I just got my hands on both the Intuos4 Art Pen and the Intuos4 Professional Kit. Originally, I had planned to just purchase the Art Pen, but after user Featherbeard on the ConceptArt forums noted that it doesn't come with a Nib Extractor, I decided to just go ahead and get the Professional Kit as well. The Nib Extractor from the Professional Kit is the same as the one that comes with the Intuos4 tablet itself.

The Art Pen

The Art Pen itself has a much bigger tip area than the Grip Pen that comes with the tablet. The Art Pen's bigger tip area also doesn't have the user swap-able color rings. One thing to note, the nibs do only fit in one way and they will rotate a bit during use. The nib won't fall out, so you don't have to worry about that when swapping nibs.

Even though the drivers for the Intuos4 are a bit old, they were able to successfully identify the Art Pen just fine from the start. Wacom just updated drivers for the new Bamboo Touch series, Graphire and Cintiq tablets for Windows and Mac OSX, but the Intuos set hasn't been updated yet. As such, I still have to launch the 32-bit Settings for the tablet. Not a big deal.

After using the Art Pen with Corel Painter 11, I have noticed that I don't have much of a tactile response from the pen during barrel rotation. As such, it's really useful to have the Enhanced Brush Ghosting setting enabled while you get used to the feeling. It's quite a bit different than the Grip Pen. After spending a bit of time getting used to it, I was able to turn off the ghosting setting again.

The Pen Stand

The Art Pen stand also has exactly enough slots for all of the Nibs that come with the Art Pen with one nib in the pen itself. It also fits the Professional Kit's Nib Extractor in the middle spot of the stand just like the one that comes with the tablet and grip pen.

The Nibs

The Art Pen comes with 11 nibs. 1 on the pen itself and 10 replacement nibs. The 10 replacement nibs fit in nicely into the new housing of the Pen stand. The nibs have 1 shaft, just like the ones for all the other pens. This is a change from the Intuos3 Art Pen's nibs which previously had 2 shafts. The difference being that the 2 shafts on the Intuos3 version, prevented a rotation effect on the nib when rotating the Art Pen.

The Details

The following come in the box:

2 Chisel POM Nibs
2 Chisel Felt Nibs
3 Bullet POM Nibs
3 Bullet Felt Nibs
1 Pen Stand
1 Art Pen with 1 Bullet POM Nib inside

Model #: KP701E
Price: $99.95

Final Thoughts

Although Wacom's eStore states: "The Intuos4 Art Pen ships with the following accessories: 10 replacement nibs, a nib puller, and a weighted pen stand." The package does NOT come with a nib puller. There was not one anywhere in the packaging and others from the ConceptArt forums have had the same results.

As for the Art Pen itself, I love it. Barrel rotation is definitely it's main feature and it does it extremely well. It's an amazing feature to have. Corel Painter 11 recognized the barrel rotation immediately, and it also works wonderfully with Illustrator using the 6D Art Brushes set or in Photoshop, by using the Wacom Brushes 3. All in all, it's the one additional pen for the tablet that I need. I have very little use for the classic pen, airbrush pen or inking pen.

The Pictures

[nggallery id=17]

Review: Kapsoft's iPhone Application Sketch Book

2009-09-22T00:00:00-07:00

Designing an iPhone app? The concept isn't much different from designing a website. At least for me it's not. The primary process includes sketches that are used in meetings with either team members or clients before jumping into either OmniGraffle or Photoshop. The general idea is to stay away from the computer as much as possible in the initial design process to let creativity flow and not restrict yourself to the pixels on the screen.

If you've either taken or watched the Stanford iPhone Dev course from iTunesU (CS193P), then you have heard them constantly enforce the idea of sketching out your app screens and functionality before coding. Those who do web design will likely vouch for the same process. This is where Dean Kaplan saw an opportunity. He has created an iPhone Application Sketch Book.

I happened to be auditing the Stanford iPhone Programming course, says Kaplan, and one of the guest speakers discussed how he went about creating his user interface designs. Paper was one option he mentioned. Almost instantly the notebook idea light bulb went off. Other options of various computer programs were mentioned, but it always got back to paper and pencil. Subsequently, I did my own online survey that revealed designers prefer paper 95% of the time. - theAppleBlog

The sketchbook contains 100 grid pages with an iPhone designed to scale on it. Each page has it's own header that allows you to put in the name of the app and the name of the screen. The pages are big. There is ton of free space for taking side notes during group sessions and team meetings. The notebook itself is paperback, plastic spiral bound, and can be ordered from Amazon.com for $14.99.

Q & A with Dean Kaplan

What are your plans for the future of the sketchbook? "There will be a huge exciting announcement concerning the book next week. Stay tuned."
Do you plan on creating a Stencil Kit similar to The Design Commission's one? Or perhaps making the iPhone on the pages slightly larger to be more compatible with the Stencil Kit? "LOL. Are you spying on me? As for size. I guess you are saying size matters. And I'm listening to feedback and it is likely that you might see a version that is 1.5X actual very soon. (DC's stencil is smaller then 1.5x and I don't think its very useable. )"
Have you considered perforated pages for easier tear-off? "I've heard the perforated request once before. Not likely on that one. As one reviewer told me he like to tear the pages right out of the book and paste them on the frig.)"
A folder built-in either the front or back cover for keeping materials given from other team members or clients together? "I love that idea. It crossed my mind a few months ago. Likely in a future UBER Sketch Book."

The Good

Keeps all your apps and screens together instead of having multiple pieces of paper that can get easily lost.
Grid pages are very handy for going from sketching to computer rendering.
To scale iPhone keeps you in the restriction of the small space while also reminding you to beware of your font sizes.
Cheap. $15! If you're just getting into iPhone app design, this can definitely help you on your way in keeping your ideas organized.

The Bad

Not compatible with The Design Commission has created an iPhone Stencil Kit. Different companies, Can't really complain.
The to scale iPhone on the page is also a bit harder to draw stuff inside it.
Since there's no stencil, you need to keep in mind what you get with the SDK and what needs to be custom made. Thought it's not that big of a deal.

The Pictures

[nggallery id=16]

Final Thoughts

Right now, I'm using a Moleskine Squared Notebook to do my sketches for iPhone apps and other web related work. It's much smaller than the iPhone sketchbook, but it does allow me to put other thoughts and ideas inside. For what the purpose it was designed for, the iPhone sketchbook delivers and does so very well. Compatibility with the Stencil Kit would definitely put it over the top. The last things that I would like included in the sketchbook, would be a small folder built in and perforated pages. Those are some very small personal requests though.

Special Note: If you order between September 10th and October 10th you'll be entered to win ONE free ticket to the Voices That Matter iPhone Developers Conference 2009.

More iPhone App Developing Resources

2009-09-17T00:00:00-07:00

The folks over at Fuel Your Apps have created a nice post titled: An Ever Growing iPhone Resource Thread. It's worth checking out as it will likely be constantly updated to add new content.

Also of interest is the a new sketchbook from Kapsoft called The iPhone Application Sketch Book. I'm currently waiting for my copy of it to come in and then will have a complete review of it.

Sneak Peak: SitePoint's CodeBurner for FireFox

2009-07-21T00:00:00-07:00

SitePoint's amazing reference add-on CodeBurner is breaking free from FireBug and later this week, it will become a full-fledged FireFox add-on. CodeBurner provides reference material for HTML and CSS such as syntax, code samples, live demos, and browser compatibility information all in a handy dock at the bottom of the browser and can also be a window on it's own.

[caption id="attachment_717" align="alignnone" width="718" caption="The new main window"][/caption]

The reference material is linked to SitePoint's Reference page. Clicking on a more link will open up a new browser window/tab for that item.

[caption id="attachment_715" align="alignnone" width="150" caption="The Reference Page"][/caption]

The new plug-in will continue to hook into the DOM crumbtrail, adding options to look up a selected item (ie. search for it in the Reference panel) or to view a sample code example.

[caption id="attachment_716" align="alignnone" width="150" caption="The new DOM view"][/caption]

Advantages over the FireBug version

Specialized interface gives more room for the reference information
works in Firefox 2 and has no other dependencies
The new DOM can load any web site for referencing. Not just the current site. You don't have to leave your current site to do your research.
No longer requires you to have FireBug installed.

Disadvantages over the FireBug version

No longer follows the FireBug inspector.

The new FireFox plug-in is much easier to launch. Instead of going to FireBug then selecting the Reference Tab, now you can just simply click on the CodeBurner icon.

Final Thoughts

With the FireBug version recently selected as one of the 13 Firefox Add-ons For Web Development, and the new FireFox version will be no exception. A web development reference resource just got better. There's absolutely no need for those HTML and CSS Cheatsheets with CodeBurner at your fingertips. Searching through a PDF or printout takes so much longer than simply opening up CodeBurner and using it's brilliant search capabilities. Be sure to catch the new FireFox edition of the CodeBurner and get a free eBook Build Your Own Firefox Add-on later this week!

5 More Free iPhone App Development Resources

2009-07-17T00:00:00-07:00

In continuing with the post 5 Free Resources for iPhone App Development, here are some more resources for iPhone Development.

iphone-exif
An Exif Tag library editor that enables direct viewing and editing of EXIF Meta Data tags in Jpeg files on the iPhone. The most obvious use is to manage Geo location tags into the image. However, it is also possible to edit any of the Exif tags or add your own that are not in the spec. This is really useful for image uploads from the phone for sites like Picasa and Flickr.
json-framework
This framework implements a strict JSON parser and generator in Objective-C. You get free XML parsing support from the official iPhone SDK, but not JSON support. This is a way to add it.
openssl framework
It is specifically intended for use in building secure iPhone applications alongside SQLCipher (http://www.zetetic.net/software/sqlcipher).
iphone-smtp
This code implements a quick class for sending one off messages via SMTP on the iPhone.
cocos2d
framework for building 2D games, demos, and other graphical/interactive applications. It is based on the cocos2d design: it uses the same API, but instead of using python it uses objective-c.

Review: Design Commission's iPhone Stencil Kit

2009-06-25T00:00:00-07:00

The guys over at the Design Commission [@designcom on Twitter] have gone and made an iPhone Stencil Kit as a follow up to their popular Website Stencil Kit. Initially they had 1,000 stencils made for sale, but due to popular demand, have since made many many more. I received mine on Monday and have started using it for an iPhone App that I am currently developing.

The details:

The kit costs $16.95 + shipping&handling [Domestic shipping is $4.95 and international is $15] and includes:

One iPhone UI Stencil
Zebra mechanical pencil
2 Design Commission stickers
Downloadable .PDF letter-sized paper template

Using the kit

The kit is really created with the intended use of the printable PDF templates. It doesn't have a full iPhone body stencil to draw your iPhone on a separate paper. It does do a decent job at half-skeleton of one though. You'll have to fill in some missing lines yourself. The notable missing seems to be status bar, the section with the wifi, 3G, and battery icon area, not being stenciled. The other small problem I ran into so far is that it's made of stainless steel. I can't see what's under the stencil as I try to approximate the needed spacing between Tab Bar icons. Although, I do need to keep in mind that it's made of stainless steel to be more durable than plastic and also that I'm making prototype designs to show clients, not finalized work.

Overall, the only real downside I can see, is that you really do have to use a mechanical pencil. The one provided by Design Commission, is a Zebra, which are extremely good. But, if you use a regular #2 pencil, you will likely run into some trouble on some of the smaller stencil bits, requiring you to constantly sharpen your pencil tip. Other than that, it's a really great addition to any iPhone developer's arsenal.

Now of course, this is all for paper prototyping. And if you have been following Stanford's CS193P iPhone Programming class on iTunes, Steve Marmon discussed the importance of paper prototyping for iPhone App design in his lecture How to Build an iPhone App that Doesn't Suck [iTunes link.]

If you prefer digital prototyping, Balsamiq has updated their software to include iPhone designing, and in my previous post: 5 Free iPhone Resources, I have links to Omnigraffle, Adobe Fireworks, Photoshop, and Illustrator stencil kits.

[nggallery id=15]

5 Free Resources for iPhone App Development

2009-06-09T00:00:00-07:00

[caption id="attachment_681" align="aligncenter" width="738" caption="Joe Hewitt's Three20 Project"][/caption]

With Apple's WWDC currently going on and the upcoming 3.0 iPhone OS getting closer to release, there are tons of new developers jumping onto the platform. Whether you're a new developer or have been developing for a while, here are some great free resources for designing and developing your iPhone Apps.

Google Objective-C Data APIs
Google generously provides a large set of their APIs in Objective-C for both Mac and iPhone development. These APIs include:
- Google Base
- Analytics
- Blogger
- Book Search
- Calendar
- Code Search
- Contacts
- Documents List
- Finance
- Health
- Picasa Web Albums
- Spreadsheets
- Webmaster Tools
- YouTube
Check out my previous post on How to add the Google APIs to your iPhone App project.
Joe Hewitt's Three20 Project
Joe Hewitt is the developer behind the popular Facebook iPhone App and the Mozilla Firefox plugin Firebug. He's created a new projected called Three20, which is a collection of iPhone UI classes, like a photo viewer, and general utilities, like an HTTP disk cache. The project and instructions on getting it into your iPhone App project are hosted up on GitHub.
iPhone Photoshop PSDs
It's always a good idea to start with a design before you start developing your iPhone App. It's also easier to show a potential client a PSD mock-up of the app before doing actual development even though Interface Builder makes it an easy process. Here are a few Photoshop PSDs to get you going.
Note: If you are planning on using these for making an iPhone Apps website, make sure either you or your client has gone through Apple's Available on the iPhone App Store logo license program to avoid any legal issues. This can be found in your Apple Developer Connection Program Portal's Distribution -> App Store tab.
OmniGraffle Stencil Kits
If you're on a Mac and use Omni Group's OmniGraffle for wireframing or mindmapping web design, you can do the same with iPhone apps.Here are 3 iPhone Stencil sets for OmniGraffle. Also, Yahoo!'s set can be found on the Yahoo! Developer site with stencils for many other things and also in makes them available in Photoshop PSD format.
Glyphish - iPhone Toolbar Icons
The Glyphish designer has generously put out 80 free icons for use in your iPhone App's toolbar. These are all free and licensed under Creative Commons.

3 Bonus Resources

Mercury Intermedia's iPhone UI Vector Elements for Adobe Illustrator.
Working in Illustrator instead of Photoshop? These free vector elements great for designing.
eddit's 120 iPhone Toolbar Icons
While this one isn't free, it is a really good and worthwhile one. Eddie Wilson over at eddit has created 120 iPhone Toolbar Icons for sale at $69. If you want the vector format, it'll cost you a pretty $189 for the PSDs.
Open Source iPhone Apps

WordPress iPhone App

FreshBooks iPhone App

Have I missed any others? Do you have any more free resources? Please feel free to share them in the comments!

Edit 6/23/09:

An additional Adobe Fireworks set of UI elements has been found thanks to Building43.

Fireworks toolkit for creating iPhone UI mockups by MetaSpark

Also check out Building43's video on designing iPhone Apps with Adobe Fireworks.

How To Use Google APIs with iPhone SDK

2009-06-08T00:00:00-07:00

Adding Google API support to your iPhone App could not be any easier. Google provides Objective-C APIs for:

Google Base
Analytics - (Only available via SVN Trunk or manual download)
Blogger
Book Search
Calendar
Code Search
Contacts
Documents List
Finance
Health
Picasa Web Albums
Spreadsheets
Webmaster Tools
YouTube

Step 1

The first step, is to head on over to the Google Code website for the Objective-C Client, download and extract the zip file source code. Alternatively, you can get the latest and greatest version via Subversion using:

 svn checkout http://gdata-objectivec-client.googlecode.com/svn/trunk/gdata-objectivec-client-read-only

If you downloaded the zip file from the website, you'll have version 1.7.0, and if you used the svn code you'll have a -read-only folder.

Step 2

Open up the GData XCode Project from your downloaded folder as well as your iPhone App XCode project.

Step 3

Drag over the GData Sources Folder from the GData project to your iPhone App project and add it as reference. Don't check the box for Copy items into destination group's folder (if needed). You do not need to copy over all the files into your project. You can, but it's not required.

This will add a ton of files to your project. You may delete the APIs you are not planning on using, but make sure that the files GDataXMLNode.m and GDataXMLNode.h in the Common/Optional/XMLSupport group are not removed from your project as they are required for iPhone builds.

Step 4

Open up the build settings for your iPhone App project. Located and set the following settings.

Header Search Paths: /usr/include/libxml2
Other Linker Flags: -lxml2

For the Debug build configuration only, add the Other C Flags setting so that the library's debug-only code is included:

Other C Flags: -DDEBUG=1

Step 5 (Optional for iPhone 3.0 Beta SDK)

If you downloaded the zip file version (1.7.0) of the API, you will also run into this error message when you attempt to first build your iPhone App project:

...Source/Networking/GDataHTTPFetcherLogging.m:224: error: 'NSTask' undeclared (first use in
...Source/Networking/GDataHTTPFetcherLogging.m:224: error: 'task' undeclared (first use in this
function)

Apple has removed the NSTask from the Foundations Framework in the iPhone 3.0 SDK. In order to fix this, simply open up the GDataDefines.h file, find the developer section and add:

#define GDATA_SKIP_LOG_XMLFORMAT 1

Note: This fix is only needed if you downloaded version 1.7.0 of the GData Objective-C API and are using iPhone 3.0 Beta SDK. If you downloaded the latest Subversion read-only trunk of the code or are using iPhone 2.2.1 SDK, you do not need to do this.

Step 6

At this point, your iPhone XCode project should build successfully and you can begin using the Google APIs by simply importing the appropriate header files. i.e.

#import "GDataAnalytics.h"

Step 7 (Optional if downloaded GData version 1.7.0 Zip file)

If you downloaded the zip file version (1.7.0) of the API, you will be missing the Analytics API. That has not yet been zipped up for the download. You may want to download those separately.

Additional Resources:

Google Releases Page Speed

2009-06-05T00:00:00-07:00

Google just released Page Speed, their competitor to Yahoo! YSlow. Both plug-ins for Firebug. Obvious requirements include Mozilla Firefox and Firebug plug-in.

So far it's been pretty to look at. There's 2 tabs instead of YSlow's 1 tab. You can also Record Activity and measure page loading speed as well.

The one thing I do not like right now is that Page Speed creates 2 folders in my home directory on the Mac OSX. I'm not sure where the folders go in Windows systems yet. These folders just hold some cached items when you run the Page Speed to analyze performance.

Google's Page Speed results are a bit different than Yahoo! YSlow. YSlow gives you "grades" and Page Speed just gives you green, red, or yellow signs. It also gives you an explanation of what you can do to make your pages load faster. Page Speed also does not give you the little icon next to Firebug that tells you how long it took to load the initial page. Something I actually like to know even if I'm not performance tuning my own website.

So far, Page Speed is a welcomed addition to the Firebug arsenal. Also check out SitePoint's CodeBurner Firebug plug-in. It's a great little reference for HTML and CSS. And Robert Nyman's FireFinder for Firebug is handy search for Firebug.

What are your thoughts on Google Page Speed? Are you using both Yahoo! YSlow and Google Page Speed?

Introducing Page Speed - Google Code Blog

The Legal Minefield

2009-06-04T00:00:00-07:00

Disclaimer: I am not a lawyer, law student or anything remotely close and/or in any way related to the law field.

That said, I do still have my own legal issues to be aware of. Recently, I have started up my own company, which brings even more legal nightmares. As for my design and development work, there are quite a bit of legal things that I needed to be aware of.

Copyright

These are pretty easy to register. At least in the U.S. it is. I'm not so sure about how other countries work. For the U.S. head on over to the U.S. Copyright Office's website and do the online registration. It costs about $35 per copyright. This is good for just about all design work and also includes the programming code.

Licenses

These are the ones that have most recently driven me crazy. You can license your code, design work, photos, etc with various different licenses such as Creative Commons, MIT, GNU and many more. There are a lot of resources available online for these and Creative Commons helps you pick the license you want to use. My confusion comes from having both a Copyright and License on the same material. As a general understanding, everything I write and put on my website is Copyrighted. But at the same time, I have some code that is freely available for downloading and modification under MIT license both on my website and also on GitHub.

Another issue I am working on figuring out all the legalities of, is how to properly license out work to a client. I have seen quite a few articles online and even some books stating that it's best to retain the Copyright for the websites I design and build, while licensing out the design to the client. That's a great idea, but there's no legal paperwork or explanation on how this whole process works. AIGA has a pretty good write-up for designers.

I'm still trying to figure this all out, but I have run into some good resources.

Additional Resources

Disney Goes Green

2009-04-22T00:00:00-07:00

Happy Earth Day!

Disney has gone green and launched Disney Nature (on April 21, 2008). Today is the release of the much anticipated movie Earth. The movie is narrated by James Earl Jones and Produced by Alastair Fothergill of Planet Earth and Blue Planet fame.

Disney Nature has 6 more projects lined up for release through 2012.

The Crimson Wing: Mystery of the Flamingos Co-directed by Matthew Aeberhard and Leander Ward, and produced by Paul Webster (Kudos Pictures), this film will take viewers to mysterious lives of flamingos. Worldwide roll-out begins December 2008

Oceans -- Nearly three-quarters of the earth's surface is covered by oceans. French co-directors Jacques Perrin and Jacques Cluzaud have set out to capture the full expanse of these waters that have played such a crucial and constant role in the history and sustenance of man. The deep and abundant oceans are places of great mysteries and dangers that this film will dare to explore. Domestic release 2010

Orangutans: One Minute to Midnight - Directed by Charlie Hamilton James and produced by Frederic Fougea, this film tells the true story of a six-year-old male orangutan and his little sister, who must take an incredible journey to find a home and a family. Worldwide release 2010

Big Cats - Audiences will get to meet three mothers - a lioness, a leopard and a cheetah - as they explore their world on the great plains of Africa. Co-directed by Keith Scholey and Alastair Fothergill and produced by Alix Tidmarsh, this film will show how these magnificent animals survive on their power and their cunning, while they protect and teach their cubs the ways of the wild. Worldwide release 2011

Naked Beauty: A Love Story that Feeds the Earth - In this film, nature is ready for its close-up, a very close-up, as exacting macro photography takes us to the realm of flowers and their pollinators. Acclaimed filmmaker Louie Schwartzberg introduces us to a bat, a hummingbird, a butterfly and a bumblebee, demonstrating their intricate interdependence and how life on earth depends on the success of these determined, diminutive creatures. Naked Beauty is produced by Blacklight Films and Alix Tidmarsh. Worldwide release 2011

Chimpanzee - Alastair Fothergill and Mark Linfield co-direct this intimate look at the world of chimpanzees, with Christophe Boesch, head of the Wild Chimpanzee Foundation, serving as principal consultant and Alix Tidmarshas producer. To be shot over three years in the tropical jungles of the Ivory Coast and Uganda, Chimpanzee will help us better understand this exceptionally intelligent species. Worldwide release 2012.

Press Release in PDF

Are you going to see the film?

Review: Apress Beginning iPhone Development

2009-04-07T00:00:00-07:00

I've been working through Apress'sBeginning iPhone Development: Exploring the iPhone SDK. The has it's own website where the writers host a forum and source code samples. It's a great book to get you started with iPhone App Development. The authors do a great job walking you through the steps and explaining the lines of code you're writing. They also keep updated source code and Errata. This book is for the SDK 2.0 and not the newly released iPhone 3.0 OS and SDK. It's also important to note that book emphasis that you have some knowledge of C, Objective-C or at least pick up the Learn Objective-C on the Mac (Learn Series) book and work through that first. This is an introductory book. It is by no means a cookbook or a book on advanced topics for iPhone development. What the book does do really well, is give you a great foundation to build on. Instead of hacking together code and seeing what it does, the book shows you how to do things in ways minimize your future headaches and also give you some standard process of development.

Pros:

Great introduction to the SDK
Up to date Source Code for the book on the website
Book forums for asking questions and interacting
Great way to get started in iPhone development

Cons:

No sounds API examples or chapter
Needs some more XCode help as most developers are learning XCode for the first time.
Needs a bit more help on debugging iPhone code
More on device development

Upcoming Apress iPhone Development Books

Other Resources:

Follow Apress on Twitter
Apple iPhone Dev Center
Stanford's CSP193P iPhone Dev Course - Available on iTunesU podcast.

Amazon Kindle 2 for Web Design and Development?

2009-03-11T00:00:00-07:00

Over the past couple weeks, I have been testing out the new Amazon Kindle2 for reference use on Web Design and Development. I went through the Amazon.com Kindle Store to see what books were available to get on the Kindle. I also looked at all the books to see if eBook PDF versions were available so that I could convert them to the Kindle. I was able to find a few Print books to compare with the Kindle and also some PDF books too. Here are some pictures comparing the same section of the books.

Kindle vs Print

I used 2 separate books for comparing Print to Kindle formatted books. Jeffrey Zeldman's <em>Designing with Web Standards</em> and Andy Budd's <em>CSS Mastery</em>. They are both available on the Kindle Store and in Print format. The Kindle version of the book compared very well to the Print version. The only real difference I noticed was the loss of color pages if the Print version had them. Other than that, reading was very easy and comfortable. Images were the only concern, and Amazon managed to do a pretty good job at having it scale properly. You can change the size of the images that show up throughout the book if you want to see it bigger. The text formatting was interesting, as it's fixed-width font and center-aligned. So every now and then you may only see 3-4 words per line depending on your font size choice. Overall, I am enjoying the experience so far.

[nggallery id=12]

Print vs PDF Converted

The book used for this comparison is Jason Baird's <em>The Principles of Beautiful Web Design</em>. The book is published by Sitepoint and available in Print and PDF eBook format. I converted the PDF version of the book using <a href="http://www.mobipocket.com/en/DownloadSoft/ProductDetailsCreator.asp">Mobipocket Creator 4.2 Publisher Edition</a>. It's a free Windows ONLY application. The process is quite simple. Select the PDF, import it, fill out the required metadata, build the PRC file and copy it over to the Kindle via the USB cable. Once that's done, you can begin reading your book.
Comparing the 2. The converted PDF did have some issues with images and their sizes. Not really all too surprising. The main part where it seemed to have issues, was with text inside of a box. The converted software takes the text out of the text box and creates an image for the text box. As for regular images. It's mostly random. The screenshot of the Website in the book converted fairly well. However, as you will see in the next section, some images were not resized as expected. It doesn't cause too much of a problem for reading the actual text though.

[nggallery id=13]

Kindle vs PDF Converted

For this comparison, I chose to use Jeff Croft's <em>Pro CSS Techniques</em> book. It's published by Apress and available on the Amazon.com Kindle Store. The Converted PDF actually reads very well. As I said before, the images sometimes tend to have resizing/scaling issues. One thing that the converted PDF does have issues with, is sidebar-type quotes or text. It tends to incorporate them into the book based on it's location on the page instead of keeping them separate. So, that does take some getting used to. For standard plain text PDF books, it works wonderfully. I have not yet tried sending Amazon a PDF to convert and see if their results match up. I also haven't tested other means of converting the PDF such as using <a href="http://www.lexcycle.com/">Stanza</a>. For the Apress books, since every one that I've gotten from them are all in grayscale anyways, there isn't any issue of loss of color. For Sitepoint books though, I can see loss of color as an issue. If there is color-coded code in the books, I can see it become an issue. Since most of the Web Development books I found available are Apress books, I haven't run into that issue.

[nggallery id=14]

iPhone App

The <a href="http://www.amazon.com/gp/feature.html/ref=amb_link_83811991_2?ie=UTF8&docId=1000301301&pf_rd_m=ATVPDKIKX0DER&pf_rd_s=right-1&pf_rd_r=0174MN67FSHSXA06B61H&pf_rd_t=101&pf_rd_p=471118251&pf_rd_i=133141011">Kindle iPhone App</a> is freely available on the Apple iTunes App Store. You can only read the books you purchase through the Kindle Store. As of right now, converting PDF files to Kindle format cannot be read on the iPhone. Here are some screenshots of CSS Mastery and Designing with Web Standards on the Kindle iPhone App.

[nggallery id=9] [nggallery id=10]

A Small sampling of books available in the Kindle Store

CSS Mastery: Advanced Web Standards Solutions (Kindle Edition) by Andy Budd
Designing the Obvious (Kindle Edition) by Robert Hoekman
Communicating Design: Developing Web Site Documentation for Design and Planning (Kindle Edition) by Dan Brow
Beginning CSS Web Development: From Novice to Professional (Kindle Edition) by Simon Collison
Beginning Google Maps Applications with PHP and Ajax: From Novice to Professional (Kindle Edition) by Michael Purvis (Author), Jeffrey Sambells (Author), Cameron Turner (Author)
Pro CSS Techniques (Kindle Edition) by Jeff Croft (Author), Ian Lloyd (Author), Dan Rubin (Author)
Pro JavaScript Techniques (Kindle Edition) by John Resig (Author)
Bulletproof Ajax (Kindle Edition) by Jeremy Keith
Designing with Web Standards, Second Edition (Kindle Edition) by Jeffrey Zeldman

Conclusion

Overall, I am enjoying using the Kindle as a reference material for Web Design books and Web Development books. I have converted all of the Sitepoint PDF eBooks that I have bought and also the vast majority of the Apress eBooks as well. Having them all readily available and search-able is really convenient. Also, the note-taking and highlighting capabilities of the Kindle are very easy-to-use and helpful. [nggallery id=11]

Your Thoughts and Comments?

What do you think of the Kindle as a viable replacement for Print books, Textbooks or reference books?

How to change com.yourcompany in Xcode for iPhone Applications

2009-03-10T00:00:00-07:00

Having been doing some iPhone App development lately, I've run into one of the little issues abound. In order to test your application on an iPhone and also deploy it to the Apple iTunes App Store, you need to properly configure your application's Bundle Identifier in your Info.plist file. All the books tell you this. And Apple makes it a point to tell you how to do this before you try to deploy on the App Store.

After creating App after App though, it becomes a very tedious task. I've searched far and wide online and couldn't find anything that pointed me to how to change it. I did manage to find information on how to change it for developing Mac Desktop Applications. Didn't really help my case too much.

In any case, what you're looking for is in the directory path: /Developer/Platforms/iPhoneOS.platform/Developer/Library/Xcode/Project Templates/Application

In there, you'll find directories for each type of iPhone Application template that you can create from Xcode.

Navigation-Based Application
OpenGL ES Application
Tab Bar Application
Utility Application
View-Based Application
Window-Based Application

In each directory, there is a file called: Info.plist Here you can change your default Bundle Identifier by finding the Key String pair. [sourcecode language='xml'] CFBundleIdentifier

<string>com.yourcompany.${PRODUCT_NAME:identifier}</string>

[/sourcecode] Simply change yourcompany to your new default save. Once you've done that. Any new iPhone App you create from Xcode's iPhone Application templates will be pre-filled with your new identifier.

Much easier than fixing it for each new iPhone App you make. Hope this helps!

Personal MBA Kindle Books Availability List

2009-03-04T00:00:00-08:00

Yesterday I introduced the idea of using Amazon.com's newly released Kindle 2 as a tool for the Personal MBA program. We saw that there was a large number of the Personal MBA's 77 Recommended Books List available in Kindle format.

Price Comparisons

Core Print Total	Core Kindle Total	Supplement Print Total	Supplement Kindle Total
$542.09	$406.52	$130.53	$111.02

For the 77 Core Books the total savings if you buy all the Kindle versions instead of the Print version is $135.57. As for the Supplemental books, your savings would be $19.51. It is important to note that there is actually one book currently available in Kindle format which would be cheaper to purchase the Print version. That book is Judgment by Noel Tichy & Warren Bennis.

Below you will find the same list found on The Personal MBA Book list page, but with the additions of whether or not the book is available in Kindle format and if so, the corresponding prices in Print and Kindle formats.

Disclaimer: Prices subject to change per Amazon.com decisions and book list subject to change per The Personal MBA's decision.

Getting Started

Book	Kindle Format	Book Price	Kindle Price
10 Days to Faster Reading by Abby Marks-Beale	X
StrengthsFinder 2.0 by Tom Rath	yes	$13.17	$9.99
Lead the Field by Earl Nightingale	X
The Art of Exceptional Living by Jim Rohn	X

Productivity & Effectiveness

Book	Kindle Format	Book Price	Kindle Price
The Effective Executive by Peter Drucker		$11.55	$9.99
Getting Things Done by David Allen		$9.43	$9.43
Bit Literacy by Mark Hurst		$15.63	$3.99
The Creative Habit by Twyla Tharp	X
The Path of Least Resistance by Robert Fritz	X
The Simplicity Survival Handbook by Bill Jensen		$13.11	$9.99
Cut to the Chase by Stuart Levine		$13.57	$9.99
The Unwritten Laws of Business by W.J. King	X
Making Things Happen by Scott Berkun	X
Results Without Authority by Tom Kendrick		$13.57	$9.99

Psychology & Communication

Book	Kindle Format	Book Price	Kindle Price
How to Win Friends and Influence People by Dale Carnegie		$9.00	$4.80
Crucial Conversations by Kerry Patterson, Joseph Grenny, Ron McMillan, and Al Switzler		$10.67	$9.99
On Writing Well by William Zinsser	X
Presentation Zen by Garr Reynolds		$19.79	$16.49
Made to Stick by Chip and Dan Heath		$16.50	$14.85
Influence: The Psychology of Persuasion by Robert B. Cialdini	X
Sources of Power: How People Make Decisions by Gary Klein	X
Secrets of Consulting by Gerald M. Weinberg	X
Deep Survival by Laurence Gonzales	X

Design & Production

Book	Kindle Format	Book Price	Kindle Price
Product Design and Development by Karl Ulrich and Steven Eppinger	X
The Design of Everyday Things by Donald Norman		$11.53	$9.99
Universal Principles of Design by William Lidwell, Kritina Holden, and Jill Butler	X
Getting Real by 37signals	X
The Goal by Eliyahu Goldratt	X
Lean Thinking by James Womack and Daniel Jones	X

Marketing, Sales, & Negotiation

Book	Kindle Format	Book Price	Kindle Price
All Marketers Are Liars by Seth Godin		$16.29	$14.27
Indispensable by Joe Calloway		$18.45	$9.99
Getting Everything You Can Out of All You've Got by Jay Abraham	X
The Sales Bible by Jeffrey Gitomer	X
The Ultimate Sales Machine by Chet Holmes		$16.47	$8.75
SPIN Selling by Neil Rackham	X
Bargaining For Advantage by G. Richard Shell		$9.59	$9.59
3-D Negotiation by David A. Lax and James K. Sebenius	X

Entrepreneurship

Book	Kindle Format	Book Price	Kindle Price
The New Business Road Test by John Mullins	X
Bankable Business Plans by Edward Rogoff		$16.47	$9.99
Ready, Fire, Aim by Michael Masterson	X
The 4-Hour Workweek by Timothy Ferriss		$13.57	$9.99
The Art of the Start by Guy Kawasaki		$16.89	$14.82
How to Make Millions with Your Ideas by Dan Kennedy	X
Getting Started in Consulting by Alan Weiss		$13.57

Management & Leadership

Book	Kindle Format	Book Price	Kindle Price
First, Break All The Rules by Marcus Buckingham & Curt Coffman	X
12: The Elements of Great Managing by Rodd Wagner & James Harter		$17.13	$14.27
What Got You Here Won't Get You There by Marshall Goldsmith		$15.71	$9.99
Growing Great Employees by Erika Andersen		$11.25	$10.13
Hiring Smart by Pierre Mornell	X
Judgment by Noel Tichy & Warren Bennis		$7.99	$14.82
The New Leader's 100-Day Action Plan by George Bradt, Jayme Check, & Jorge Pedraza		$17.13
The Halo Effect by Phil Rosenzweig		$18.46	$9.79
The Essential Drucker by Peter F. Drucker		$12.21	$9.99
Ethics for the Real World by Ronald Howard & Clinton Korver		$16.47	$9.99

Strategy & Innovation

Book	Kindle Format	Book Price	Kindle Price
Purpose: The Starting Point of Great Companies by Nikos Mourkogiannis	X
Competitive Strategy by Michael Porter		$26.40	$15.00
Blue Ocean Strategy by W. Chan Kim and Renée Mauborgne		$20.75	$16.47
Seeing What's Next by Clayton M. Christensen, Erik A. Roth, Scott D. Anthony	X
Learning from the Future by Liam Fahey & Robert Randall	X
Innovation and Entrepreneurship by Peter F. Drucker	X
Myths of Innovation by Scott Berkun	X
Green to Gold by Daniel Esty & Andrew Winston		$18.15	$12.21

Finance & Analysis

Book	Kindle Format	Book Price	Kindle Price
Essentials of Accounting (9th Edition) by Robert N. Anthony and Leslie K. Breitner	X
The McGraw-Hill 36-Hour Course in Finance by Robert A. Cooke	X
How to Read a Financial Report by John A. Tracy		$13.57	$9.99
Turning Numbers Into Knowledge by Jonathan Koomey	X
Show Me The Numbers by Stephen Few	X
Marketing Metrics by Paul W. Farris, Neil T. Bendle, Phillip E. Pfeifer, and David J. Reibstein		$26.39	$17.59
Web Analytics: An Hour a Day by Avinash Kaushik	X
The 80/20 Principle by Richard Koch		$10.85	$9.99
How to Lie with Statistics by Darrell Huff	X

Personal Finance

Book	Kindle Format	Book Price	Kindle Price
Your Money or Your Life by Joel Dominguez & Vicki Robin		$9.75	$9.75
The Millionaire Next Door by Thomas Stanley & William Danko	X
The Lazy Person's Guide to Investing by Paul Farrell		$10.17	$9.99
The Boglehead's Guide to Investing by Taylor Larimore et al		$12.89	$9.99
Work Less, Live More by Bob Clyatt		$12.23	$9.78
It's Not About The Money by Brent Kessel		$16.47	$9.99

SUPPLEMENT: Business History

Book	Kindle Format	Book Price	Kindle Price
Money and Power: The History of Business by Howard Means		$21.15	$19.04
Brand New by Nancy F. Koehn	X
Founders at Work by Jessica Livingston		$17.15	$11.01
Citizen Marketers by Ben McConnell & Jackie Huba		$16.50	$14.85
The Book of Business Wisdom by Peter Krass	X
The Book of Leadership Wisdom by Peter Krass		$34.16	$30.74
The Book of Management Wisdom by Peter Krass	X
The Book of Entrepreneurs' Wisdom by Peter Krass	X

SUPPLEMENT: Business Reference

Book	Kindle Format	Book Price	Kindle Price
Business: The Ultimate Resource from Basic Books	X
The Streetwise Small Business Book of Lists edited by Gene Marks	X
Every Manager's Desk Reference from Alpha Books	X
Finance for the Non-Financial Manager by Gene Siciliano		$10.85	$9.99
The Copywriter's Handbook by Robert Bly		$12.24	$9.99
Principles of Statistics by M.G. Bulmer	X
Law 101 by Jay M. Feinman		$18.48	$15.40
2008 Business Reference Guide by Tom West	X

What are you thoughts?

Amazon Kindle 2 and The Personal MBA

2009-03-03T00:00:00-08:00

First of all, let's get the disclaimer out. I am in not saying in any way shape or form that The Personal MBA is a replacement for an accredited MBA University program. Ok. Now with that out of the way, I pre-ordered the Amazon Kindle 2 shortly after it was announced on February 9th. I did receive it on February 24th and was able to queue up books to be delivered on first activation of the Kindle. I'm not going to review the Kindle 2 itself. For that you can read Engadget's review or Gizmodo's review.

The Personal MBA

The Personal MBA has a list of 77 recommended books. And that's what I am going to go through. As a freelancer and entrepreneur, Business Management is something of extreme value to me. And going to Business School for an MBA right now is not an option. Even so, I am one of those people who like to consistently be learning something new. And with the Personal MBA, I am learning how to better run my Freelance business.

A Kindle?

I originally wanted to get the Kindle for a few other reasons. These reasons are:

Being "green" or "environmentally friendly"
Ability to carry multiple books without the added weight.
Taking notes and wireless downloading

When researching if the Kindle would be a good fit for the Personal MBA, the main concept was the availability of the 77 Books in Kindle format. After going through the list, I found that 39 of the 77 books are available in Kindle format. Which means that 38 books are not. That's 1 book over half. 2 if you count that one of the books is 37 Signals' Getting Real, which is available for free reading online.

Cost

The cost of the Kindle version of the books are not considerably cheaper than the paperback versions. If you are looking at hardcover books though, then it is a pretty penny. While, the cost is a pretty big deal for me as a freelancer, space was more of an issue. I have a fairly small office and having 77 books in addition to Web Design and Development books can get a bit out of control. It is important to remember that the Kindle itself costs $359 alone.

Conclusion

Overall, I am very happy to see that a large portion of the Personal MBA's recommended books are available in Kindle format and have found reading on the Kindle to be very comfortable and easy use. I have also managed to convert a few PDF books to Kindle format and will discuss those in a future entry related to using the Kindle 2 as a Web Designer and Developer's research tool.

What are your thoughts on the Kindle as a Freelance tool?

Environmentally Friendly Programming

2009-02-23T00:00:00-08:00

[caption id="attachment_546" align="alignright" width="289" caption="Flickr photo from kimberlyfaye"][/caption]

Environmentally Friendly thinking can apply to Programming. We're not talking about your programming environments here. What we are talking about is using the 3 R's, Reduce, Reuse, and Recycle as part of your Coding Practices. These principles are taught at most schools. At least it was at mine. However, when you start off on your own with no formal education, you can run into some problems. Let's take a look at these basic principles.

Reduce

Reducing code is fairly simple. Quite frequently used as part of defining "Beautiful Code," using the least amount of code to accomplish the task at hand. Since that's the case, it's also usually the hardest to accomplish. Minimizing processing time and file loading size. You can do even some small things to reduce your coding efforts. Such as using CMS plugins already written instead of writing your own, or even modifying existing plugins to do your bidding. Here's a very simple C example in reducing lines of code via initialization. [sourcecode language='c'] void foo() {

Complex c;
c = (Complex)5;

}

void foo_optimized() {

Complex c = 5;

} [/sourcecode]

Reuse

How do we reuse code? Very simply, we use functions. Instead of copying the same code in various places, functions allow us to reuse the same code again. Similarly, using a global Debug boolean to turn on/off debugging is another way to save some time. Here is a small piece of code not performing reuse. [sourcecode language='c'] unsigned int random_number1; unsigned int random_number2; rand_seed = rand_seed * 1103515245 +12345; random_number1 = (unsigned int)(rand_seed / 65536) % 32768; [/sourcecode] And the same performing reuse. [sourcecode language='c'] int rand() { rand_seed = rand_seed * 1103515245 +12345; return (unsigned int)(rand_seed / 65536) % 32768; } int main() { random_number1 = rand(); random_number2 = rand(); return 0; } [/sourcecode]

Simple and elegant. This also allows us to make changes to the function and having it take effect in all the places the function is called. Whereas, the opposite, would require us to go and make the changes in all of the places we used the same code.

Recycle

Recycling code can be fairly easy. Creating code clips/snippets that you frequently use and having them readily accessible is a great way to recycle code. Panic's Coda helps you do this via their "Clips" tool. Another way is to create general use codes such as reset.css, typography.css, etc. A sandbox starter theme for your CMS of choice is yet another way to recycle code. Recycling can cut down on the development time you need to do things significantly.

How do you use the 3R's in your programming practices?

6 iPhone Apps and their Mac Desktop Parents

2009-02-12T00:00:00-08:00

There are way too many Apps on the App Store to go through. It is also harder to find applications that integrate to desktop applications. Here are 6 iPhone Apps that add some value to their Mac Desktop App counterparts.

Evernote - a note capturing application that uses a cloud. Your notes everywhere. The desktop application allows you to easily take both full and partial screenshots, text notes, and even some OCR. On the iPhone app, you can take a photo note using the iPhone camera or manually type out some text notes. Everything syncs up to the cloud and is available to you online at any internet accessible computer, your phones or desktop app.

Things - Things is a task management program from CulturedCode. Providing a beautiful and easy to use interface, Things has elements of David Allen's Getting Things Done, but does not force you to use the system. The Desktop Application has a quick entry form that is easy and simple to fill out. You can have recurring/scheduled tasks, tags, and even sync with your iCal to-dos. The Things iPhone app has a similar interface to the Desktop App, making it easy to use both. Providing sync capabilities with the Desktop App allows you to add/complete/delete your tasks on either platform and have everything sync up. The iPhone App currently does not allow you to add recurring/scheduled tasks, but the folks over at CulturedCode have been working hard at it.

Omnifocus - Omnifocus is another task management application. This one comes from the Omni Group. Omnifocus is a complete Getting Things Done system. This is not just a to do list of any sort. The Desktop Application very flexible and fast. Omnifocus does expect you to use the GTD system. It is a bit harder to get started if you're not familiar with GTD. Omnifocus is a great application for those using GTD. I've found it to be a little bit too involved and require a bit too many steps. The iPhone App for Omnifocus adds Sync supports for tasks, task creation/editing, and organization. One feature that Omnifocus has that Things does not, is Location-Aware. The Omnifocus iPhone App will use the GPS of the iPhone and tell you which tasks you have to complete in the nearby area.

1Password - 1Password is a Password Manager from Agile Web Solutions. 1Password does much more than just Password Management. The Desktop App has integration with Safari, Firefox, Flock, Camino, OmniWeb, DEVONagent, Fluid, and NetNewsWire. It can auto-fill usernames/passwords, Credit Card info and Demographic Info such as addresses. 1Password can also significantly shrink your wallet with their Wallet group where you can save information like credit cards, bank accounts, memberships and reward programs, etc. And of course, this all syncs with the free iPhone App. Although, I haven't tried this myself, 1Password on the iPhone also has the ability to auto-login from the app if you tap a saved login.

Keynote Remote - Keynote Remote is a remote control app for Apple's Keynote 09. It does require you to have Keynote 09. Does not work with Keynote 08. The App costs $0.99 on the App Store. The Keynote Remote lets you use your iPhone or iPod touch to control your presentation from anywhere in the room using Wi-Fi. See your slide with notes or both the current slide and the next slide in the palm of your hand. Just swipe to advance.

Apple iTunes Remote - The iTunes Remote App from Apple allows you to control your iTunes/AppleTV/AirTunes library from your iPhone. You can edit playlists, search, and of course play, pause and volume control. It does require iTunes 8.0 and iTunes to be actively running. Also does work with the Windows version of iTunes 8.

How To: Add an external link image via CSS

2009-01-30T00:00:00-08:00

Pop up links suck. The twitterverse also responded when asked: Should Links Open in a New Window? Twitter Web Designers Voice In. But sometimes you need to use them. Sometimes you are required by your clients to use them. Or sometimes it is best to use them. It would be nice to at least let the person know that clicking on the link will open a new window/tab. Here's an easy way to add a little image to the external links using CSS.

The CSS [sourcecode language='css'] a[rel="external"], a.external { white-space: nowrap; padding-right: 15px; background: url(/images/external.gif) no-repeat 100% 50%; zoom: 1; } [/sourcecode]

The HTML To use the CSS, you would add the rel="external" to your html link like so: [sourcecode language='html'] External link [/sourcecode]

The Result Here's what the final result looks like after using the CSS and HTML. (This is an image! Not a real link.)

Do you do this differently? Have a better solution? Please feel free share thoughts, feedback and comments.

Should Links Open in a New Window? Twitter Web Designers Voice In

2009-01-22T00:00:00-08:00

Yesterday I asked the Twitterverse the question:

Here are their responses:

Readers Voice Your Thoughts! `target = _blank` friend or foe?

Disqus Custom Author CSS WordPress Hack

2009-01-21T00:00:00-08:00

Custom CSS Styling for Post Authors are really nice. It's a great way to differentiate the author's comments from other readers' comments, in addition to threaded comments. The problem with the threaded comments, is that other readers may also write response comments which should be threaded to maintain conversational aspect. So styling helps much more.

Disqus is a wonderful commenting system. I was introduced to it by reading Louis Gray's blog from FriendFeed. Since using Disqus, I have found it to be a very great network. Disqus provides many features including:

Threaded comments and comment ratings
moderation and admin tools
spam filters

There are tons of WordPress comment hacks to do custom CSS styling for Author's comments. I have listed some at the bottom of the post. There's even plug-ins that will style author comments. Unfortunately, Disqus does not offer up any solution to this. And after posting on the Disqus forums, I got no response for this feature. But, Disqus does offer some Custom CSS for comments.

Out of the Box

Disqus actually does give us quite a bit of customization options. We are able to customize:

The box where a post is typed into
The form elements (Name, Email, Website).
The submit button "Post".
The main wrapper for the comment system.
"Add New Comment" and "# Comments" are enclosed in <h3> tags.
The toggle button for the thread options.
The links within the thread Options
The entire comment thread list.
A single comment in the thread.
The comment rating arrows for posts.
The header at the top of comment posts.
The avatar image for the registered user.
This is the meta information about the post (time stamp and points).
The message body of a single comment post.
The footer contains the link to "reply."
This contains and determines the style for the pagination links.

The Problem

As you can see, this is a lot of customizing power. Unfortunately, none of them is related to the blog post's author.

The Solution: Hack the Planet!

We are going to modify the official Disqus WordPress Plug-in. The files being modified are: comments.php and disqus.php Note: We are also making the assumption that authors will use the same e-mail address to write posts and comments. This is generally true for most users.

Identifying the Post Author

First we need to find the post's author. We could just hardcode the email address, but this does not help multi-author websites. To find the author's email address we need to go into diqus.php

Inside disqus.php there is a function called: dsq_comments_template Here we are going to add a global variable called $author_email and set it to $author_email = get_the_author_email();

Here's the full function code: [sourcecode language='php']function dsq_comments_template($value) { global $dsq_response; global $dsq_sort; global $dsq_api; global $post; global $author_email; // Added by John Wang

if ( ! (is_single() || is_page() || $withcomments) ) { return; }

if ( !dsq_can_replace() ) { return $value; }

if ( dsq_legacy_mode() ) { return dirname(FILE) . '/comments-legacy.php'; }

$author_email = get_the_author_email(); // Added by John Wang

$permalink = get_permalink(); $title = get_the_title(); $excerpt = get_the_excerpt();

$dsq_sort = get_option('disqus_sort'); if ( is_numeric($COOKIE['disqus_sort']) ) { $dsq_sort = $COOKIE['disqus_sort']; } if ( is_numeric($GET['dsq_sort']) ) { setcookie('disqus_sort', $GET['dsq_sort']); $dsq_sort = $_GET['dsq_sort']; }

// Call "get_thread" API method. $dsq_response = $dsq_api->get_thread($post, $permalink, $title, $excerpt); if( $dsq_response < 0 ) { return false; } // Sync comments with database. dsq_sync_comments($post, $dsq_response['posts']);

// TODO: If a disqus-comments.php is found in the current template's // path, use that instead of the default bundled comments.php //return TEMPLATEPATH . '/disqus-comments.php';

return dirname(FILE) . '/comments.php';

}[/sourcecode]

Identifying the Author's Comments

Now we know the blog post's author. Off to comments.php Inside of comments.php, the first thing we need to do is add $author_email to the list of globals.

[sourcecode language='php']<?php echo("<?php" ); ?> global $dsq_response, $dsq_sort,$author_email; // Added author_email variable! $site_url = get_option('siteurl'); ?> [/sourcecode]

Once that's done, we need to find the comments and figure out if any of the comments were written by the post author. To do this, we'll be using the Disqus array $comment['user']['email']. This gives us the current comment's author's email address. We'll be comparing that to our global variable $author_email. On line 131 of comments.php we add the PHP if condition: if ($comment['user']['email'] == $author_email ).The complete line now looks like this:

[sourcecode language='php']

if ($comment['user']['email'] == $author_email ) echo ("-author"")?> ">[/sourcecode]

The same change can be made for the class dsq-comment-header on line 82, dsq-header-avatar on line 83, and dsq-comment-footer on line 154.

It's Styling Time!

Styling author's comments

Here's the easy part. All you need to do now is add the CSS code to your WordPress Theme for the appropriate classes. For example. This would change the background color for the author's comment.

[sourcecode language='css'] / Disqus CSS for Author Comments. Margin and Padding is set to be the same as other comments /

dsq-content #dsq-comments .dsq-comment-body-author {

margin-left: 20px;
padding-top: 5px;
background: #e2fddc;

[/sourcecode]

The Results

Here's what an author's comment would look like now with a reader's comment.

Download the complete modified plug-in..

Do you style your author's comments? Do you use something other than Disqus? Any feedback?

Update from Disqus.com

Recap: Design Community Twitter Hours 1/15/09

2009-01-16T00:00:00-08:00

Chad Engle (@ChadEngle) hosts Design Community Twitter Hours every Thursday 6-8PM EST. To join in, just use #DCTH and others will respond to questions. Chad will also respond via @DCTH. You can follow the live tweets via search.twitter.com.

Yesterday's Topics Discussed:

The best file format for a illustration being used in a book to be posted online
Tips on how to start freelancing
How to best follow live updates of DCTH
Adobe InDesign vs QuarksXPress
Design books recommendations
PHP SQL Injection protection
Time restrictions on clients. Dealing with difficult clients.
What a corporate blog should look like? Similarities to the website?
Suggestions for a "cutesy" font
Steve Jobs' illness
Whether or not to back up your clients data/websites
What can make DCTH better
What app do you code in?
know of a good video podcast for CS4?
What is your favorite font currently?
Web standard resolution? 800x600?

The actual tweets:

<?php quote_search("DCTH","2009-01-15","2009-01-16") ?>

Share your thoughts and comments on DCTH.

Upcoming Books Release List

2009-01-15T00:00:00-08:00

Freelance Folder just released their ebook The Unlimited Freelancer and Envato's Collis Ta'eed just released How to be a Rockstar WordPress Designer. And since I just finished reading Miles Burke's The Principles of Successful Freelancing, it seemed like a good time to see what else is coming down to a bookstore near you. Here are some of the books I'm looking forward to their release this year.

Programming Ruby 1.9: The Pragmatic Programmers' Guide by Dave Thomas, with Chad Fowler and Andy Hunt Available March 2009 This is the Pickaxe book, named for the tool on the cover. The original PickAxe was the first English-language book on Ruby. Each edition of the book tracks the latest Ruby release, and each is the definitive reference to Ruby. This time we've broken with tradition. This isn't a third edition. It's technically a separate book. That's because it reflects all the new features of Ruby 1.9, and we want both it and the second edition (which covers 1.8) to be available at the same time.

Agile Web Development with Rails, Third Edition by Sam Ruby, Dave Thomas, David Heinemeier Hansson Available March 2009 The Third Edition of the Jolt Award winning book that shows you a new approach to web development, updated for Rails 2. Sam Ruby joins the team to add his world-class knowledge of web application development, making this the most up-to-date and authoritative Rails book out there.

iPhone SDK Development by Bill Dudney, Chris Adamson, and Marcel Molina Available April 2009 Jump into application development for today's most remarkable mobile communications platform, the Pragmatic way, with iPhone SDK Development. This Pragmatic guide takes you through the tools and APIs, the same ones Apple uses for its applications, that you can use to create your own software for the iPhone and iPod touch. Packed with useful examples, this book will give you both the big-picture concepts and the everyday gotcha details that developers need to make the most of the beauty and power of the iPhone OS platform.

Website Owner's Manual by Paul Boag of Boagworld. Available March 2009 Website Owner's Manual helps you form a vision for your site, guides you through the process of selecting a web design agency, and gives you enough background information to make intelligent decisions throughout the development process. This book provides a jargon-free overview of web design, including accessibility, usability, online marketing, and web development techniques. You'll gain a practical understanding of the technologies, processes, and ideas that drive a successful site.

Web Design for Developers: A Programmer's Guide to Design Tools and Techniques by Brian Hogan Available May 2009 Web Design for Developers will show you how to make your web-based application look professionally designed. We'll help you learn how to pick the right colors and fonts, avoid costly interface and accessibility mistakes your application will really come alive. We'll also walk you through some common Photoshop and CSS techniques and work through a web site redesign, taking a new design from concept all the way to implementation.

What's on your to read list? Any suggestions for our readers on upcoming books to read?

How to Add DesignBump, Vot.eti.me, and FriendFeed to WordPress plugin Sociable

2009-01-14T00:00:00-08:00

Since I tend to write mostly about web design and development, sometimes people like to "bump" or "vote" for articles. Sociable currently only has the DZone and DesignFloat links by default. So here's how you can add DesignBump, Vot.eti.me, and FriendFeed links and icons to Sociable.

DesignBump

Save the icon: and copy it to sociable/images/directory.
Open sociable.php.
Find the array called $sociable_known_sites.
Copy / paste the code below [sourcecode language='php'] 'Design Bump' => Array( 'favicon' => 'designbump.png', 'url' => 'http://designbump.com/node/add/drigg?url=PERMALINK&title=TITLE', ),[/sourcecode]
Save the file.

Vot.eti.me

Save the icon: and copy it to sociable/images/directory.
Open sociable.php.
Find the array called $sociable_known_sites.
Copy / paste the code below: [sourcecode language='php'] 'Votetime' => Array( 'favicon' => 'votetime.gif', 'url' => 'http://vot.eti.me/login.php?return=/submit.php?url=PERMALINK&title=TITLE', ), [/sourcecode]
Save the file.

FriendFeed

Save the icon: and copy it to sociable/images/directory.
Open sociable.php.
Find the array called $sociable_known_sites.
Copy / paste the code below: [sourcecode language='php'] 'FriendFeed' => Array( 'favicon' => 'friendfeed.png', 'url' => 'http://friendfeed.com/?url=PERMALINK&title=TITLE', ), [/sourcecode]
Save the file and reactivate the plug-in.

Results

This is what the finished version looks like with the 2 services enabled through Sociable Options. And working version of the icons are used in this website. See below for an example.

Final Thoughts

I have also submitted the code to Joost de Valk,the author of the Sociable Plug-in, in hopes that he adds them for everyone's use.

Download the complete code here

Review: The Principles Of Successful Freelancing

2009-01-13T00:00:00-08:00

After reading Adelle Charles ( @adellecharles ) review [Are You Freelance Material?] of The Principles of Successful Freelancing by Miles Burke ( @milesb ), I decided to get the book as a Christmas present to myself.

Initial Impressions:

The book seemed very light and small. It has the traditional Sitepoint look and feel to it.

Finished Reading Impressions:

Miles does an excellent job with the many aspects to consider prior to starting freelancing. Even more so, he talks about his experiences and failures in embarking into freelancing. The book's chapters are very nicely broken down into well manageable sections. And the book is short enough to read on a long flight. Similar to the length of Steve Krug's Don't Make Me Think!

Miles takes us through the freelancing journey of 2 fictional individuals. At the end of each chapter, explaining their decisions on the principle emphasized in the chapter. And also provides various links to resources discussed in the chapters. Such as finance software examples and start-up cost examples.

I also liked that the book did not end with the completion of the first year, but also provide advice on where to go and what to do after success has come. Miles did an amazing job bringing out the hidden costs and fees that a lot of potential freelancers come across in their first year as a surprise. There is a lot of emphasis on proper planning before you leap into the sea. And rightfully so. Planning is by far one of the most important principles of success in any field. He goes through the do's and don't's for success very nicely.

While the book does center a bit around a web design freelancing aspect as that is Miles Burke's specialty, it is a very informative resource for anyone considering freelancing in any industry.

The book's Sitepoint website provides an in-depth list of the chapters and descriptions as well as a free sample chapter to read before you decide if you want to purchase it.

Final Thoughts:

I thoroughly enjoyed reading the book. The material was very well written and did not overwhelm. I highly recommend it to anyone considering freelancing as a career and even those who have already taken the leap.

Your Thoughts?

Have you read the book? What did you think? Will you read the book?

Simple WordPress Security Measures?

2009-01-08T00:00:00-08:00

With the recent Twitter hacking fiasco, web designer Chris Herbert (@ChrisHerbert) provided us with some helpful tips for securing WordPress.

One of the tips is regarding security measures. These tips come from head of Google's Webspam team, Matt Cutts. Matt talks about securing your wp-admin directory, creating a wp-content/plugins/index.html, and subscribing to the WordPress development blog.

The one tip I have for securing your WordPress instance is:

Don't use the admin account

Using the default admin account normally leaves you open to Dictionary attacks depending on your password. Instead, create a very strong password for the admin account and create a separate administrator account of your own. See UX Booth's How To Pick Passwords That Protect Your Online Experience. You can also downgrade the authority level of the admin account if you so chose.

I would also recommend regularly using an author or editor account if you don't need any of the administrative power.

Got any WordPress security tips? Please share them in the comments.

Moleskine - 960 Grid System, Divine Proportion, Rules of Thirds

2009-01-05T00:00:00-08:00

People are always talking about the importance of sketching as part of a process in web, logo, or graphic design. For example: A List Apart, David Airey, and PSDTuts all have an article putting some sort of emphasis on it. Jason Beiard also touches on it as part of his layout chapter in his book The Principles of Beautiful Web Design. And even the Twitterverse of Web Designers gave an overwhelming response when asked about sketching.

I can understand why people will bypass the sketching process in favor of jumping straight into Fireworks, Photoshop, or Illustrator as it does add a step and slow you down a bit. Even more so if you have access to a graphic tablet such as the Wacom Intuos or Cintiq.

Personally, I don't mind the slow down and find it more helpful to do the sketching. I use a Moleskine Large Squared Notebook. It's a small grid notebook (13 x 21 cm) with 240 pages. Recently, I have been trying to incorporate the concepts of The Divine Proportion, Rule of Thirds, and 960 Grid System into some designs. But first, I needed to find a way to incorporate them into the Moleskine for sketching. Unfortunately for me, a few Google searches came back with empty results and I was left to do them myself.

The Divine Proportion

The magical irrational number 1.61803 (phi) that makes all things proportioned to it, aesthetically pleasing. I mostly just use this to separate content in website design. Divinely proportioning the Moleskine should be easy as it's dimensions of 13 x 21cm are within 0.2% of said Golden Ratio. Anyways, the math comes out like this:

Horizontal format: 20/1.618 = 12.97 cm ~ 13cm (25 boxes.) That leaves us with 8cm (15 boxes) on the other side.

Vertical format: 13/1.618 = 8 cm (16 boxes) by 5 cm (10 boxes.)

The Rule of Thirds

A simplified version of the Divine Proportion. And much easier to do without doing math. This was also the easiest to implement with the Squared Moleskine. The dimensions of the notebook I gave you previously (13 x 21 cm) does not really lend itself to making this easy. But, having painfully counted the number of actual squares and measuring them I found the notebook is also 25 x 41 boxes. So, I gave myself a rectangle with 1 box border on the right, 2 box border on the top, 3 box border on the bottom and half a box on the left. Making an internal box dimension of 36 x 24, which is easily divisible by 3.

Vertical format: 6 x 4

The 960 Grid System

The 960 Grid System provides downloadable templates for PDF grid paper, Fireworks, OmniGraffle, Photoshop & Visio, and CSS framework with demo HTML. That's pretty wonderful considering it's all free. The problem for me was, the PDF is not in my Moleskine and not the size of a Moleskine page. So it was back to doing more math. The 960 Grid System uses a 12 column or 16 column format. This was a bit more complicated. Probably the most complicated of all. Anyways, Nathan Smith does a great job at explaining everything on the website. Of particular interest to me was the Dimensions section where I found the needed numbers to incorporate the columns into the notebook. Unfortunately, it was too difficult to incorporate it in a vertical format. At least for now. I may revisit it later. Below are the results.

12 Column - 0.5 box margins, 2.5 box column width

16 Column - 0.5 box margins, 1.5 box column width

Looking for feedback. Do you sketch out designs? Do you use any of these concepts in designs? What do you use?

Completed the Honolulu Marathon 2008

2008-12-22T00:00:00-08:00

I participated in the Honolulu Marathon on December 14, 2008. The race started off with a bang. Actually a series of bangs. Prior to starting, there is a fireworks presentation for all the participants. 20,302 people started the race this year. And 20,058 finished. Starting off with pouring rain for the first 2 hours and 30 minutes. Later the weather started to clear up and the sun came out as the vast majority of people passed Kahala Mall and headed towards the halfway point in Aina Haina. It was a great to see the various costumed runners as well. There was a Pikachu, Yoda, Darth Vader, many a santa hats and costumes, maids, brides, grooms, and many many more. It was definitely a great part of the event fun. Though, I did feel bad for them when the race started with pouring rain.

Once getting into Hawaii Kai, it was a very beautiful way to see the scenery and the overlook of the Hawaii Kai marina. Coming into the end of the run, it was very nice to see the sun overlooking the Waialea Beach Park from the top of the mountain hill. Around the half mile left mark, you can start to see the Finish line.

Unfortunately, I injured my right foot around the 11 mile marker and was forced to limp the remaining part of the marathon. While it was disheartening, I did finish and have fun participating in the event. I completed both of my goals for this marathon. Perhaps next time I will be able to run the entire marathon and post a better time.

My official results can be seen at the Honolulu Marathon website.

[nggallery id=5]

To Sketch Or Not to Sketch? That is the Twitter Question.

2008-12-18T00:00:00-08:00

I am sketcher. I like to draw out preliminary designs as much as possible. Even if it's just a layout or something relatively quick. I also use a Moleskine notebook to do all my sketches in. Yesterday, I posed a question to the Web Design community on Twitter. The responses were overwhelming. So overwhelming that it required me to break it out of it's original intention. Thanks everyone! Greatly appreciated!

Question to all web designers: Do you sketch/draw out your preliminary designs on paper first or just jump into Photoshop?

Thank you all so much for your insights. They were all greatly appreciated and helpful.

How about the readers? Do you sketch or jump straight into Photoshop?

The Honolulu Marathon 2008

2008-12-12T00:00:00-08:00

I've always had goals. And one of them happen to be running in a marathon. I'll be doing that this Sunday, December 14th. It's going to be my first marathon. And I won't be alone. Zen Habit's Leo Babauta is also running the same exact marathon, as is Boston Red Sox Pitcher Hideki Okajima. As the title says, we'll be doing the 36th Annual Honolulu Marathon.

You can track our progress online at the Sportstats website. I am runner #9061, Leo is runner #8482, and Okajima is #37. The race starts at 5:00AM Hawaii Time. There will be just shy of 27,000 participants.

I have been following a Runner's World training routine as I needed to train on my own time. Others have been following the Honolulu Marathon Clinic. A free clinic that gets together on Sunday mornings. Highly recommended if you're interesting in pursuing running the Honolulu Marathon.

I have 2 goals for this weekend's marathon.

Have fun
Finish

I'm very excited for it and I'm feeling very good. I believe I will be able to accomplish both of those goals. I have set aside all of my running items (ipod, shirt, shorts, shoes, socks, gels, powerbars, water bottle, etc.) I have no completion time goal and that should make it easier to take it easy if I need to.

I am also planning on stopping at every water aid station (every 2-3 miles) to drink water/gatorade slowly and walk a little bit after taking the water before running again.

While Leo won't be carrying a cell phone during the race, I will be. Would there be any interest in getting Twitter updates as I get past checkpoints? I had wanted to carry a small camera to take pictures as I went along, but that doesn't seem like a good idea anymore. Although, I will write a follow-up post with my experience running the race.

Have you run a marathon? Got any last minute advice? Good luck wishes?

Product Review: Tom Bihn's 4Z Brain Cell for Late 2008 MacBook Pro

2008-12-04T00:00:00-08:00

I recently purchased the new unibody Apple MacBook Pro. I also commute to various places at times. So I wanted something to protect my laptop while I carry it. It only seemed fitting that I get a Tom Bihn Vertical Brain Cell since I use a Tom Bihn Brain Bag to carry all my stuff in anyways. Though, just about any other laptop sleeve would probably do the job just fine. And there are quite a few good ones out there. For example, Booq and Waterfield. Anyways, it arrived last week and I have been testing it out with the bag and as a case on it's own. Here's my experience with it so far.

The Packaging

First thing I noticed right away was the packaging. Kind of obvious I get. The box it comes in has a nice Tom Bihn logo. USPS must have had a blast with my package because this is what it looked like when I got it.

Though, I wasn't too concerned with it as it's a bag inside the box, it was a bit disheartening. Inside the box was also a Tom Bihn sticker. I'm not quite sure why they come with them, but I always welcome stickers. The last one ended up on one of my Moleskine notebooks. Free advertising for them I suppose. But hey, I like their products so it's a decent way to recommend them.

The Brain Cell

The Brain Cell I ordered is the Vertical model. This was because the Horizontal version does not fit in the Brain Bag. Oops, let's restate that. The Horizontal does fit, just not in the way it's intended to protect your laptop. I'll trust their judgment. They designed it of course. I do also have a Horizontal Brain Cell that houses my Lenovo T61 laptop that I use that to do my .Net coding.

The case does a great job at protecting the laptop. There is a lot of protection for the top and bottom of the laptop. I wish the sides and bottom of the Brain Cell had a bit more cushion to protect it, but that's also carried over from all Brain Cells. It does fit like a glove around the laptop, so it doesn't move around inside of the Brain Cell. That's definitely a plus. I have found it to fit inside very nicely and completely safe. Here's a picture of that.

Vertical vs Horizontal

The Vertical Brain Cell has 2 pockets compared to the Horizontal version having 1 large pocket with 2 buttons. Also, using the Vertical version, I cannot fit the Snake Charmer on top of the Brain Cell, which I can with the Horizontal. Can't really complain about that as the MacBook Pro is quite a bit bigger than the T61. Another plus of the Brain Cells, they give you the option of adding a Shoulder Strap to carry them on their own. As I mentioned before, it does close via Velcro. And Velcro is quite noisy. It doesn't bother me, but it does bother some. Those who prefer zipper closure, sorry.

Conclusion

Overall, I am really enjoying the Brain Cell and highly recommend it. It does a great job at what it's for and complements the Brain Bag very well. If you're using the Empire Builder, I believe the Horizontal is the way to go.

What do you use to carry your MacBook Pro or other laptop?

WordPress Sharing Plugins: Sociable and ShareThis

2008-12-02T00:00:00-08:00

There are to 2 very popular Wordpress plugins for catch-all content sharing: Sociable and ShareThis. They are both very good. And they each come with their associated pros and cons. Here's a quick look at them in terms of a web designer's blog use.

What Both Have and Don't Have

Together they provide sharing capabilities to the large major sharing services such as Digg, Reddit, StumbleUpon, Delicious, Twitter, etc. They also both provide sharing capability through email and printing. They are also both customizable to some extent. You can choose which services are available to be shared to. Sociable provides 98 services and ShareThis provides 36. Also, noteworthy for designers, neither plugins offer DesignBump as an option.

Individually

Sociable Pros:

DesignFloat available
DZone available
98 services to choose from
logos are easily recognizable
Can be included in RSS feed

Cons:

Larger footprint - Multiple logo images on your posts
No FriendFeed

ShareThis Pros:

FriendFeed available
Small footprint - Just 1 small image
Reporting on Click-through (If you register)
Post to Blog option

Cons:

no DesignFloat
Only 36 services to choose from.

Overall Conclusion

They're both great. You can't really go wrong with either of them. I tend to favor Sociable more since it includes some designer-specific social sharing sites (DesignFloat and DZine.) At the same time, I very much like the small footprint of ShareThis.

Which one do you use? Why?

When NOT to Use Flash

2008-12-01T00:00:00-08:00

I'll admit it. I hate Flash. That's not right. Let's rephrase. I dislike improper use of Flash. And it's not Adobe's fault. Flash is definitely a great tool for the web. It's just not used properly and most of the time quite overused. I have seen some really terrific websites using Flash, but at the same time, I've seen at least twice as many making terrible use of it. Here's some advice regarding your use of Flash.

Don't use Flash as your ENTIRE website!

You're website shouldn't be built completely as a .swf Flash file. Why? Here's a few reasons:

Not everyone has the Flash plugin installed on their computers. And they may not be able to install it.
It's not SEO friendly. Google has a decently hard time searching through Flash content.
Or Analytical friendly for that matter. Sure, Google Analytics recently added Flash tracking, but it's not perfected.
It's hard to bookmark a specific "page" of your Flash file for the user. Users don't want to bookmark your "Main" page and have to navigate to the content they want every time they need to get there.

For your Navigation Menu

Seriously? This also isn't SEO friendly and it's rather annoying as a user to have to wait for your animated navigation menu to load each time I go to a different page. Just use AJAX please.

As a container for your content

Okay. Now this one I really don't understand. You made an HTML page and then put your content in Flash. Why?! This makes no sense if all your content is text and links. And I've seen quite a few of these. Please don't do this.

To protect your pictures from being "stolen" or hot-linked

Yes. Putting all your images in a Flash file will stop someone from hot-linking. But that doesn't mean you should use it for that. There are other ways around it. And if they really want the picture, they will find a way. As for stealing them, not so much. There are various screen capturing programs out there. And the ever so popular, Print Screen button. I always hear this as the reasoning. Especially for Photographers. It's stupid. Don't use it as an excuse for poorly made Flash use.

For your Intro Page

Ok. I hate Intro pages. They're dumb. But people (usually movie-based websites) make and use them. I still haven't quite grasped the reasoning behind making the consumer wait to get to your content, but whatever. That's a different topic for a different day. As for using Flash in your Intro Page. Go ahead, just make sure you have a "Skip Intro" button. And trust me, I will always press that button.

Where do you not like seeing Flash? What are your pet peeves regarding Flash use? Please share your experiences.

Commenting System Battle: IntenseDebate vs Disqus

2008-11-24T00:00:00-08:00

Recently, there's been quite an up stir on commenting systems. And rightfully so, as comments are very important to bloggers. Since we're in the times of "following" others online in any social network available, it only seemed inevitable that social commenting systems would come. Welcome Disqus and IntenseDebate.

What they provide:

Comment Threading
Comment Tracking
Comment Ranking/Rating
Posting to Twitter
Commenter User Profile
e-mail Replies
Comment Spam blocking
FriendFeed integration

These services provide a nice and easy way for you to manage your commenting on other blogs. So you can just log into the system and comment without having to fill out the normally required form fields.

Supported platforms include:

WordPress
Blogger
Tumblr
Movable Type
TypePad
Drupal
b2evolution
Graffiti
Joomla
RubyGem

Does this sound too good to be true?

As with all things, there's always some negatives. In these cases, in order for you to use your Commenter Profile, the blog you're posting on has to have the system installed on it. And with that comes a price. And that price is Styling. Or to be more specific, lack of full CSS customizability. Disqus does offer some custom CSS, but no where near as customizable as your traditional blog comments. You're pretty much stuck with the style that they come with. For better or worse. Chris Coyier of CSS Tricks touches on this in his 1 week review of IntenseDebate. Another problem is that there isn't a standard choice for the platform. While this isn't really a problem. It means, as a commenter you may need to have an account on both commenting systems. If you so choose of course.

It is also important to note that commenters may still leave comments without having an IntenseDebate or Disqus account. It's merely another option for them.

Enter the Dark Horse

While not a direct competitor to Disqus and IntenseDebate, BackType is another system that has recently picked up some steam. There was a rather length debate on FriendFeed as to where BackType fits in. The main reason as to why BackType doesn't fit into direct competition is because it does not require you to install anything into your blog. Instead, it searches and aggregates all your comments into one place for you to share and view. It does this by searching the "Website" optional field when you submit a comment to another website. BackType also allows you to have a Commenter profile and "follow" other commenters. It does not have a login capability so that you don't have to fill out the required and optional fields. And you must fill out the "website" field accordingly in order for it to attribute the comment to your profile. Louis Gray has quite a few write-ups on BackType on his Disqus-powered blog.

Okay. This is great and all, but which one do I choose?

Well, the answer to that is of course. It depends. If you use FriendFeed, all 3 of these are supported and can be imported into your feed. If you're searching for a system for your WordPress blog, I would probably choose IntenseDebate as it was recently purchased by WordPress's parent company, Automattic. Disqus does currently offer more platforms support. In case your platform is not supported by IntenseDebate. I'm looking at you Drupal and Joomla. Disqus also seems to be a more widely-chosen system. In case that matters to you.

Also, if you're looking for reasons to use Disqus, Venture Capitalist, Fred Wilson offers you his 3 reasons. While Robert Scoble points you towards some Disqus enabled blogs and on the Disqus-only feature of Seesmic video comments. Keep in mind that version 2.7 of WordPress is just around the corner. And if you're only looking into these systems for threaded comments, the new version of WordPress will have that built-in.

As for my recommendation. I say, as a commenter having a profile in each can't hurt. But if you need to chose just one, I'd go with BackType. It supports both IntenseDebate and Disqus comments along with the blogs with neither of these.

What about you? What did you chose? What do you recommend? Are there other options out there?

Beginner Web Design Resources

2008-11-21T00:00:00-08:00

Having been in Web Design for such a long time, I frequently get asked "Where/How do I start?" After thinking about it. It's a pretty hard question to answer. I needed to probe further and ask follow-up questions to fully understand what they were asking. It's easy to just point someone to Google and tell them to search for Web Design. They'll get a lot of information that way. Unfortunately, there's way too much information out there. Books, websites, magazines, blogs. It's very easy to get information overload and confused. It's also very easy to start off and go completely the wrong way and get discouraged. So I've compiled a small list of books and websites to help get you started. The vast majority of these did not exist when I started and I wish they had been.

As a beginner, there are a few key concepts that you should understand before hopping into your favorite text editor and hacking away. These concepts are: Standards and Usability. And these are the building blocks upon which your foundation is built. Just like a building with a bad foundation will collapse, so will a website. These resources are specifically aimed at giving you a clear and stable foundation to build on.

Books

Don't Make Me Think: A Common Sense Approach to Web Usability by Steve Krug

Web Standards Solutions: The Markup and Style Handbook by Dan Cederholm

Designing with Web Standards by Jeffrey Zeldman

Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS by Dan Cederholm

Web Resources

Please keep in mind that this list is merely to help you get started on the right foot. It is by no means an end-all list to how to become a great web designer or provide you with advanced information. We are only just setting the groundwork here.

Please feel free to share your beginner resources. And correct anything I may have missed.

Web Design History: Oh, How Far We've Come

2008-11-18T00:00:00-08:00

Once upon a time (1994), free web hosting was available with no advertisements. Your web host limited you to a size of 2 MB. And URLs were even more obscure. These were the days of GeoCities, Tripod, and Angelfire. It was hard to tell someone to visit your website when your URL was in the form of http://www.geocities.com/tokyo/temple/4460. Enter the social web of the 90s, Web Rings. The SEO technique of submitting your website to a circular network of similar subject websites that required a small badge on your website.

This was were my adventures in web design started. I began with GeoCities in 1996. Having to own an entire block of a neighborhood to host images due to the 2MB limit, which was later raised to 5MB then 10MB, etc. Joined Web Rings to promote my websites. Stuffing as much keyword meta tags as possible. And submiting them of the search engines of the world. Search Engines before Google exists. AltaVista, Excite, Lycos, DogPile, MetaCrawler, InfoSeek, Northen Light, WebCrawler, HotBot, and Yahoo.

Back then, there was no CSS to style your site. People had to used HTML Tables instead of Divs. Animated Gifs and background Midi music ruled the web. These were the days of Netscape Navigator, where you needed to use a text editor or Dreamweaver to code a website.

Enter the era of Microsoft FrontPage, HomeSite, and Adobe Go-Live. Now anyone can create a website if they know how to use Microsoft Word. And everyone did just that. WYSIWYG allowed anyone to put up a website. Failure to have valid code never mattered. W3C had no impact on anyone. And FrontPage extensions to boot.

The new century quickly brought us the world of blogging through Blogger, MovableType and LiveJournal. I first started a LiveJournal blog thanks to TechTV's Megan Morrone providing me an invite. It was the beginning of many things to come. In a world now dominated by WordPress, TypePad, MovableType, and Blogger.

Not much later, in 2002, Friendster came out. The beginning of Social Networks. Quickly following suit were MySpace, Bebo and Facebook. The current state of the web now dominated by Blogs, Facebook, Twitter, FriendFeed and many other Social Networks. Web 2.0 has taken the world by storm and it's showing no signs of letting go.

Care to share you history of web design? How did you get started in this business?

Product Review: 2008 Dahon Speed D7 Folding Bike

2008-10-30T00:00:00-07:00

I have been riding the Dahon Speed D7 folding bike for a little over a month now. In that time, I have put in just shy of 130 miles on it. Dahon has been in the business of folding bikes for 25 years now. And the Speed D7 model is their best-selling folding bike. It was also awarded BusinessWeek's Best Value Folder Award.

The Bike Specs:
Weight: 25.74 lbs.
Speeds: 7
Folded Size: 33 x 64 x 81 cm (13" x 25" x 32")
Tire Size: 20"

I have been commuting about 3 miles during weekdays. I have taken the bike out for a longer run of 8 miles and the ride was still quite comfortable. It is a bit challenging on the steep hills when compared to a standard 26" mountain bike.

In the past month, I have run into a few problems with the bike.

Every now and then, the quick-release for the handle-bar will loosen.
In addition to that, the handle-bar post loosened as well. The latter is much harder to adjust without the appropriate tools. The quick-releases are quite easy to tighten, so that's not too bad.
There is a wheel magnet that aids in holding the bike together when folded. The magnet sometimes would either fall out or come out when unfolding the bike. Again, this can be remedied by applying superglue.
The elastic bands on the back rack lose stretchiness fairly quick. It can be adjusted, but replacements cannot be purchased.
It is very hard to mount a water bottle on the bike. But it can be done.

All said, there is quite a list of great things to say about the bike.

The bike folds very small. It's small enough to fit under my cubicle desk at work.
The bike is fairly light. You can carry it on the bus if you'd like. Dahon does have other lighter bikes also.
The small wheels allow you to accelerate fairly quickly.
The rack on the back of the bike is very handy. (Some models do not come with this. It is a separate accessory.)
It is a great conversation starter. You will get a lot of people inquiring about it.

Dahon has a Flickr group where you can meet other Dahon bike owners and also see various pictures. On their own website, Dahon has a forum and picture gallery which you can contribute to.

This is a wonderful bike to start commuting to work and zipping around town. There are special baskets that fit perfectly on the front of the bike for going to a farmer's market. I highly reccommend this bike. If you're looking for something a little lighter, I would take a look at the Mariner. It's essentially the same bike as the Speed D7, but comes with a tire pump built into the seat and is made of Aluminum (making the bike rust-resistant NOT rust-proof!!!)

5 Things That Annoy the Mac Switchers

2008-10-21T00:00:00-07:00

Moving to a new OS is never an easy task. You have to get all new applications that are compatible with the new OS. You probably want to transfer all your data from the old one to the new one. And you may even need new hardware if your old one isn't compatible with the new OS (ie. wifi cards, keyboards, webcams, etc.)

After observing some PC switchers at a local Apple Store, there are a bunch of things that I noticed bugged the average PC (Windows) user trying to switch to a Mac to no end.

No "Home, End, Pg Up, Pg Down" buttons. Not sure why this is, but that's the way it was designed for better or worse.
No "Delete" button - ok, ok. Technically there is a "Delete" button, but to a Windows user, that translates to "Backspace."
No "Insert" button - I haven't figured this one out myself yet.
Tapping the trackpad does nothing! This seemed to be a big one. Especially with the new MacBooks and MacBook Pros. You have to physically press down on the trackpad to click a link in Safari. This seemed to drive some of the users nuts. Go figure.
No "Right-Click" button. Simple enough to understand that a PC user is used to having a 2-button trackpad. As soon as the Apple Genius told them that they needed to just press with 2 fingers, the users seemed ok. Though, still confused as to why not just put 2 buttons there.

Of course, these annoyances are easily overcome once the user has gone through the learning curve or a workshop.

Were you a switcher? What growing pains did you go through?

5 Easy Ways to Lose Great Designers and Developers

2008-10-02T00:00:00-07:00

As managers, team leads, project managers, and supervisors, we have a responsibility to those we lead. And most often than not, the reason we lose them is our own fault. It's a very hard realization to learn that you are the problem and not them. That's not to say that there aren't cases where they are the problem. There's plenty of those too. From my past experience as a developer, leader, co-worker, and designer, here are the biggest reasons that I've seen cause either myself or another great person to leave.

Recognition
Not recognizing that the person has done outstanding work is a big turn-off. Especially if you have never recognized their work. Worse yet, taking credit for their work. Just because the project was a huge hit and you were the Project Manager or Team Lead, does not mean that you don't give credit where credit is due. The person definitely feels betrayed, un-important and unmotivated to perform at a high level.
Loyalty
Being loyal to your employees is huge. Sticking up for them definitely makes them feel important. And to put yourself on the line for them will make them go the extra mile to thank you. Randy Pausch touched on this during his Last Lecture and explains it much better than I ever could.
Over-supervision
This one is easy. Telling an expert developer/coder how to do their job definitely puts them off. They're already good at their job. Probably better than you. They don't need you to tell them how to write a "for" loop. Don't undermine their intelligence. They may need some encouragement, praise, or rewards.
Passion
Don't kill their passion. You can't teach someone to be passionate about something. But you can teach them the right techniques and skills. If they're passionate about doing Web Design, making them write Requirements documentation or putting them on Tech Support duty, which they hate, does not make you look good. No matter how great they are at those. If they can't do what they're passionate about for you, they're going to go do it for someone else who does let them do it. Don't lose a great talent to that. Help them get to where they want to be.
Tools
This is perhaps the easiest one of all. Try as hard as possible to give them the tools and resources they need to get the job done. I have had several face-palm moments in regards to this one. Simply because the Lead or Manager doesn't have any experience in the field and believes he or she does. Some examples are:
- • Not updating the Designer's software. Using Adobe Photoshop 7 right now seems a bit strange when CS4 has just been announced. And there are plenty of new features that make it a more powerful and valuable tool.
- • Not giving them the right tools. Oh boy. Someone once told me that I didn't need Adobe Photoshop or Fireworks because Windows comes with MS Paint and that's how they do all their web graphics. Don't do this!
- • Giving them the wrong tools. Another person who had "built" websites told us to use Dreamweaver to do our websites. Sure that doesn't sound all bad right? Well, it is when we're a .Net shop. Dreamweaver over Visual Studio. Which would you want to use?

If this all sounds like common sense to you, it's because it is. But sometimes we lose track of common sense and do the wrong things because we're seeing everything from a different point of view.

What issues have you run across that have caused you to either leave or become un-motivated because of your leadership team?

Review: Yahoo! oneConnect for iPhone

2008-09-29T00:00:00-07:00

Ever since the iPhone 3G came out, I've been looking for the perfect Twitter iPhone app. I've tried Twitterific, Twinkle, Twittelator,TwitterFon, Twittervision, and Twitxr.

Some of them are actually good and have some really interesting features. Such as: attaching pictures to a tweet (Twitxr), GPS location posting and seeing if anyone is near-by (Twinkle), and searching + add to following list (Twittelator).

But all that said, I've found my favorite Twitter app for the iPhone in Yahoo's oneConnect. It's a free app and it has a nice UI that is very user friendly.

Yahoo! oneConnect doesn't currently allow you to search for new people and "follow" them, yet. Nor does it the location-aware features of the iPhone just yet. This is of course, a preview version of the application. So it's still in beta. Then again, just about all of Google is in Beta forever.

It does have some other features which won me over as well. Particularly, it's integration with Flickr. Being able to quickly see any new Flickr uploads of my Flickr friends is just great. I don't have to wonder if anyone posted new pictures.

oneConnect also ties into Facebook, which is just perfect since I have friends who don't use Twitter, but do use Facebook to update their status, pictures, etc.

oneConnect can also tie into your Bebo, Dopplr, Last.fm, MySpace and Youtube. I don't have accounts on those yet, but it's nice to have 1 app for all these.

Of course there are some cons of oneConnect.

You have to have a Yahoo account. (Accounts are free. And most people have one anyways. Plus, Yahoo has push mail for the iPhone, so why not?)
The Contacts tab of the application does not tie into the iPhone's address book. Instead it uses the Yahoo's contacts from your mail account. Albeit this doesn't really bother or impact me at all.

Not to say this doesn't change. And Yahoo has stated that they are going to be adding in new application tie-ins also.

Here's the phobos (iTunes) link to download the app.

So, what's your favorite Twitter iPhone app? Why?

Great Free Tools for the Web Designer on the Cheap

2008-09-25T00:00:00-07:00

There are some wonderful and useful free tools available for Web Designers and Developers. Here's a small taste of some.

The Google Suite: Google has created an entire set of tools for free.

Google Docs - A great replacement or addition to Microsoft Office or an alternative to OpenOffice.

GrandCentral - This is great for freelancers abound. The greatest feature for them is the ability to automatically send calls to voicemail during specific time periods. It helps a lot when you have clients in different timezones and you're trying to sleep.

Google Analytics - A great way to see statistics on your websites.

Google Webmaster Central - Another way to see statistics and errors on your websites.

Google App Engine - Although you're currently limited to 3 applications, it's a free way to play or host your Python projects on Google's servers.

Skype - Free internet calling, also available on the Sony PSP for those who actually own a PSP mic. Supposedly, they are considering an iPhone application.

Evernote - a wonderful tool for taking screenshots, pictures, notes and having them synchronize to all your computers and even the free iPhone application. Definitely handy for having your notes everywhere.

Remember the Milk - A wonderful to-do list application. Also has a mobile version with a 15-day trial. You need to sign up for their Pro services to continue use of it afterwards.

Tada List - Another great to-do list written with Ruby on Rails.

Notepad++ - A super-powered version of Notepad. Has a massive plug-ins community base.

What tools do you use? What did I miss? Any suggestions for alternatives?

The Web and the Sensory System. Where is the Web Going?

2008-09-24T00:00:00-07:00

Sight

Web Interaction started out purely visual, obviously being the sense of Sight. This still is and will remain the most compelling and important aspect of the web. Where is Sight going? It's staying put on your monitors, but also going mobile. The iPhone has recently obtained 0.87% of the web browser market. This is without having any Flash support. With the newly announced Google Android phone, T-Mobile's G-1, along with RIM's Blackberries getting better support, the web is sure to be going mobile.

Hearing

Sound interaction of web design started well over 10 years ago with embedded midi and wav files. The main use was background music for users while browsing websites. At the time, this was very innovated, though very annoying when there was no option to turn off the background music. Now, the use of Mp3s are primarily used on musician websites to showcase their latest records, songs, or promote purchases. Sound effects are also present in just about every single Motion Picture website out there. Primarily embedded in Flash for user interaction of opening doors, drawers, or anything else Flash designers can think of. Where is Sound going? It may go mobile, it may not. It all depends on how well Flash mobile gets adopted, if at all. The large bandwidth required is a limitation that cell phone companies don't really want in their cell network. Remember, it's "unlimited" data, which isn't really "unlimited." Sound will not disappear, as it's the main way for bands, musicians and the like to showcase their hard work.

Touch

Welcome to the new world. Since Apple's introduction of the iPhone, the mobile and touch interaction has taken the world by storm. And Apple isn't the only one pushing Touch. Microsoft has their Surface interface technology out and showcasing in some exclusive locations. Let's not forget HP just recently released their TouchSmart PC. Touch is also one of the most touted features of the new Windows 7 Operating System set to debut Summer of next year. Adobe has also hinted at the rise of the Touch generation in a slightly hidden new feature of their newly announced Photoshop CS4. The feature is currently Mac specific as Windows does not support Multi-touch. Where is Touch going? It's coming and coming strong. It'll be interesting to see how Adobe moves forward with Flash for touch and also how web designers and developers are going to create websites for the future.

Taste and Smell

Taste and smell aren't here. And it's going to be a scary world if and when they do come.

Where do you all see the Web going forward?

Adobe's CS4 Event

2008-09-23T00:00:00-07:00

Today, Adobe held their web broadcast announcing the 4th version of their Creative Suite. It was an hour long session and definitely did not cover a lot of the new features and changes.

Gizmodo has already written up a brief summary listing PDFs of "What's New" for each application along with the Press Release from Adobe.

VectorTips and GoMediaZine have taken a quick round-up of the new features of Illustrator.

Some things to note, a slightly cheaper version of the Web Design Suite (Web Standard) is available, which does not include Adobe's Photoshop. It's basically Macromedia's old suite of Dreamweaver + Fireworks. Similarly, there's also a Design Standard edition, which loses Dreamweaver, Fireworks and Flash, along with the "Extended" version of Photoshop.

Dreamweaver has gotten a new user interface (as have all of the applications.) More importantly, it has now gained support for Subversion. Definitely something useful for developers on the cheap.

Other nice things that were added:

Live View - Integrated browser-like viewing mode for testing out interaction.
Code Navigator - Live code highlighting during interactions to see what code is getting executed.
Javascript framework support for JQuery.

Some things that I would have liked to see:

Some API support for MoveableType, TypePad and/or WordPress.
Support for Application Platforms like Google App Engine, Amazon's S3.

That said, it seems as though Dreamweaver will remain the standard solution for most PHP, ColdFusion, and XHTML/HMTL designers/developers. Pre-ordering is available through Amazon.com with an estimated release date of November 14th. Though, the Press Release states late October.