PaulStamatiou.com - Tech News, Reviews and Guides

Startup Idea: User Retention as a Service

2011-12-21T10:00:00-08:00

It was the middle of our Y Combinator batch this summer. Akshay and I had a decently functioning version of Picplum that we were continuing to test and polish up. At the end of our office hours that day, Paul Graham said our product was good enough and that we should stop coding and start selling & marketing. I think about this quite often.

Picplum at YC office hours in July. Photo Credit: Garry Tan

tl;dr Trying to draw attention to the importance of lifecycle marketing. I build up the case, talk about where lifecycle marketing makes sense, show an amateur first attempt at it, then proceed to layout a grand idea for a lifecycle email marketing service I want to see someone build. Please share this post.

I was in that mindset when I decided to sit down a few weeks ago and hammer out some code that would help with that (typical engineer approach.. get code to do it for you). One of my perpetual to-do items in the few months following our launch was converting users that signed up but never did anything into users that sent out their first batch of prints. The latter is more or less our definition of an activated user. You can find more info about Picplum in my lengthy post-launch article, Thoughts on Picplum Automatic Photo Prints.

New users see a simplified onboarding UI; a simple 3-step flow for adding photos, recipients and then sending their first batch. But how many people signed up and never got around to adding photos? Maybe they just didn't have any photos at the moment and wanted to wait until after the holidays to add them.. and then they forgot. The same might be the case for people that have used Picplum in the past but haven't engaged recently.

somewhat unrelated but here's our onboarding UI

Enter lifecycle or drip email marketing. This is not the same as your traditional newsletter blast that goes to every registered user, nor a transactional/trigger email (such as instantly emailing individual users a welcome email when they signup or sending a notification that their package has shipped). Lifecycle email marketing depends on various factors that describe the state of their account. Let's say you have a complex web app involving a hairy 10 step onboarding process. You would write several different emails for each possible place a user could stop engaging. Say they fell out at step 4 of 10. You would send an email after some amount of time that is indicative of where they left off and what they did in the last steps. Not just a "finish setting up your account" email.

That's just one use case that happens to deal with getting a user onboarded. There are many more. I go a bit more in-depth down below.

Why lifecycle email marketing?

You're probably familiar with Dave McClure's Startup Metrics for Pirates: AARRR — Acquisition, Activation, Retention, Referral, Revenue

Startups spend gobs of time and money on user acquisition and then they just let those hard-earned new users slip through the cracks by failing to engage them and carry on with proper retention tactics. You might have happier users if you spent nearly as much time on user retention as you spent on that fancy user invite module that comes up before the user has even tried out your service.

This blog post is all about step 3!

Startups en masse are failing at this. I'm a curious person. I signup for new startups all the time, even if it's not exactly interesting to me. I want to see how they approach email marketing, what kind of design and UX choices they make (if you've read my design post, you know I take lots of LittleSnapper screenshots), et cetera. But guess what? I rarely hear back from any of these startups. At best I receive some generic "we have a new feature" newsletter that is a copy and paste of their company blog.

Startups, PLEASE EMAIL ME MORE. It's not a biggie. If I don't like your emails or service, I'll simply unsubscribe. No harm done.

Which are you?

So who's doing it right? I'm having a hard time coming up with examples of companies that do a great job of such lifecycle marketing but if you think of any please mention in the comments. AppSumo emails me a ton and I haven't unsubscribed yet. While their emails aren't indicative of lifecycle marketing and are more along the lines of daily deal updates, they are way up there there in terms of copywriting. Their emails do a great job of getting my attention and keeping it as I open the emails.

For the most part the startups that do email me a lot don't seem personal. The copy doesn't address whether I've been a long-time user well versed in everything about their offering, if I just signed up or if I'm somewhere in the middle. Lifecycle email marketing fills in these gaps by being informed about each user before reaching out. While it's outside the scope of this article, great copywriting for emails is just as important. I'm not an expert on that so I can't comment, but I'm looking to learn more if you can suggest any great web/email-targeted copywriting blogs or resources.

Lifecycle email marketing is for helping your users engage with your product or service in the intended manner. It's not simply sending reminder emails. It's offering useful help when you notice they haven't done a certain task yet. Maybe it was too hard? Offer them help and tips. Reward them on their last successful actions and offer positive reinforcement for continuining.

The Numbers

Alright, time for napkin numbers. You work hard all day and put up a Show HN post. You get 2,000 visitors to your startup's homepage. You get a decent signup conversion rate. Let's say 10%. You have 200 new users! Another 10% of those end up activating. Your definition of activating will vary, but let's say this startup is Greplin. They want people to link up data sources they can begin to index. Only 20 people activate right on the spot. That leaves a lot of unactivated people. I'll stop the numbers there but you can imagine that while some will come back when they remember or when Greplin sends out a regular newsletter, there's a lot being left on the table.

Now imagine if you were in a different business and you paid a lot to AdWords to acquire all of those users. You just lost a lot of money on paid users that did nothing.

Now here's the great thing about lifecycle email marketing: set it up once and it keeps on giving. The effects just keep on compounding forever and ever (until you change your product and your outdated email copy doesn't quite correlate anymore).

Fisher Price: My First Lifecycle Mailers

Now that you're sold on lifecycle marketing, back to my story.

I wrote three different mailers with varying copy. Then there's some logic that is informed about the following:

number of photo batches user has sent
time since last batch shipped
time since account registration
time since last retention mailer sent
what retention mailer was last sent

And it's all hooked up on a cron'd resque job, delivered by Mailgun with send events also tracked by Kissmetrics. This is done so we can see in Kissmetrics any flurry of activity following a retention email delivery.

For example, if a user signed up just over 2 weeks ago and hasn't done anything, they'll get a simple "We've missed you" email with some tips for getting started. If another user has sent one batch but it has been 40 days since, they will receive a different email. Users that have not done anything at all and already received that first email, we'll send them different retention email. As for users that have sent several batches with Picplum, I mark them as activated and don't send them any more retention emails (though I will be changing this shortly to add another mailer for such active users, maybe even prompting them to invite others -- going onto the second R in AARRR).

After I committed this first stab at user retention, Akshay offered up some scenarios. What about users that have recently logged in? This logic doesn't take into account those events. Should those users still get the retention email? What about new users that have added photos, but not recipients? Should we make the email more personal and send a different mailer with "add some recipients" helper copy?

Co-founder @Dodeja in Jabalpur for the holidays, converting farm animals into paying Picplum users.

Ah, a logic nightmare! Keep going down this rabbit hole and it's easy to see that a good lifecycle email marketing strategy will have lots of different email types for specific user lifecycles. Lifecycle email marketing is a bitch to do right. That's where the impetus for this blog post comes.

I want a startup to do this for other startups.

The Startup Idea (BUILD THIS)

While lifecycle email marketing is a part of many enterprise marketing automation products such as Pardot, SilverPop, eTrigue, StrongMail, Marketo, Eloqua and HubSpot (née Performable), I have yet to see any such products that directly address my startup needs. By that I mean that I don't want to use a complete marketing automation SaaS offering. I don't care about integrating with Salesforce right now. I want something that simply takes care of the lifecycle email mayhem I started talking about above and I'm sure I am not the only one.

How it would work

I would setup the service ('RETENTIONIZER') to track lots of events about each user. It could even piggyback onto our Kissmetrics reports and 85 different events we already have in place through their data export feature.

The RETENTIONIZER would then allow me to wire up a bunch of triggers, not unlike setting up a GMail filter or Kissmetrics report. They could simply be per-user based purely on events with some delay, or even per-cohort. It would even have it's own events — how the user responded to a past retention mailer. Only send this if they didn't open the last email, et cetera.

I would supply the marketing copy for as many mailers as I want and it would hook into my email service provider API and set the proper campaign tags when delivering. It would integrate closely with Mailgun/SendGrid/SES/Postmark so that it could receive all tracking data. The RETENTIONIZER would report back on whether or not the user engaged with the email in the desired manner for which you had set the success conditions. This would make it easy to correlate on-site user activity with retention mailers.

For example, if the RETENTIONIZER sent a relatively new, unactivated user an email about TASK X, it would know if the user opened the email, clicked through and then actually did the specified task on the site, or if the user just logged in but then unexpectedly clicked some button for unrelated TASK Y. The RETENTIONIZER would inform you if your marketing copy was failing to achieve the desired result (and let you A/B test different copy for the same mailer of course), or if something else on-site diverted users. It would use this data to automatically adjust delays for best engagement as well.

Can you tell this stuff is getting me really excited? I could go on for tons of use cases but the idea is simple. Keep users engaged by uniquely offering them a gentle reminder or tip that is exactly relevant to them. Nothing is more annoying than a retention email telling me to buy or do TASK X when I just did it the day before. Mailers need to be data-informed too.

This stuff really gets interesting if you have everything setup to automagically create cohorts for paid advertising campaigns. Say you run a Reddit promoted ad, Stumbleupon Paid Discover campaign, Facebook Ad, AdWords campaign and/or Kiip campaign. I'll leave that for another blog post..

Email marketers will tell you about some common segments for users: interested recipients, engaged customers, lapsed customers. But the product idea described above would make it easier to dive even deeper. Cohorts are magical. Dan Martell agrees.

In a nutshell

I send the RETENTIONIZER user events and tell it under which conditions it should send out one of the mailers I provide, and then it delivers the respective user retention email when appropriate. The service begins with smart defaults for delays and then learns as it sends out more and more and tracks user engagement with each.

Such an offering wouldn't be for everyone. At some point in a company's growth, they'll end up building this in-house or find themselves needing a miscellany of other features that those enterprise companies listed earlier are all about. I'm convinced that this will be a no-brainer for many, many startups. What do you think? Drop me a comment below.

Isn't there an easier option Stammy??

Or you can continue cutting into your customer's LTV and blow that cash on user acquisition with Google AdWords all day only to have those users forget about your service the next week. Getting user retention right is no easy task. It may not be your priority at the moment; finding product/market fit should come first. But then again, having more (retained) users to help you find that fit is good too. Chicken & egg.

This is a full-time job and not many startups can afford to do that. But they really need to get smarter with their email marketing. Which is why I want some startup to build this product! Take this blog post as a glorified letter of intent for me paying for this product when it emerges.

Email Template Dev Workflow

After being asked about how we did our emails by Ridejoy, Parse, and Hacker Newsletter, I wanted to share a bit about our process.

We got started with one of MailChimp's free Email Blueprints — a great, well-tested starting point that just needs your design. As the name implies they are really for use with MailChimp and we're going to be using them for every email including our transactional and retention emails sent by Mailgun. So we're going to need to strip out the merge tags and included <style> block.

MailChimp has a great article that provides some rules of thumb for working with HTML emails. Skim through it and come back. If you've really got some time to kill, MailChimp even has a massive Field Guide To Email Marketing. I'm just going to make a cappuccino over here.

Okay so the main things you need to know: you need to inline your CSS, tables are your friend, don't use too many images and don't expect any fancy CSS3 to work. For the latter, checkout this guide that shows what CSS each email client doesn't support, which should just be renamed "Why Outlook Sucks." If you avoid CSS3 and pseudo-selectors you're mostly there.

The hard part is working with an HTML email template where all the styles must be inlined. Fortunately there's Premailer (and the Rails wrapper of it). Premailer does a few things, but of note it'll automatically inline CSS styles from an email.css file you create and generate nicely formatted plaintext version of emails on the fly. Though there are a few cases where I still write my own plaintext emails. For example, an issue with premailer where it ignores alt/title tags on linked images, which we use for certain large call to action buttons.

As an aside, premailer hasn't been updated in a while, most likely as the author is working on the next major version. Be sure to stray away from the premailer default of ASCII-8BIT or you'll be subject to emails from some of your users saying they didn't like all the odd characters in their name. Premailer also has issues with certain CSS shorthands such as the following.

border: 1px solid #d4d6d7;
border-left-color: #c9cccd;
border-right-color: #c9cccd;
border-bottom: 2px solid #b1b7b9;

Akshay found a slick gem called letter opener that lets you preview emails locally instead of delivering them. I used to use MockSMTP.app for this but find letter opener easier. It opens up email previews in a browser tab and lets you toggle between plain text and HTML versions. But it's purely for basic testing; it might look great in there and still be horribly broken in GMail. When it's time to do some real testing, turn off letter opener and send emails to yourself in Gmail and a few other clients. Tweak as necessary.

Getting email templates right is still a pain in the ass. But if you have a pinch of patience and a nice beverage by your side you can get it done. The last thing to do is hook up the all important unsubscribe link. Make it easy for people to unsubscribe if they want to people are less inclined to report as spam.

You can either just link to your user settings page or take advantage of Mailgun's unsubscribe feature. Just include %tag_unsubscribe_url% (if you use campaign tags and only want them to unsubscribe from that kind of campaign) and Mailgun will replace that with their own unsubscribe URL and never let an email get sent to that person again, even if you accidentally do it on your end. However, I'm a bit paranoid and want those unsubscribe settings synced on our end too. (And I once ran into an issue where the incorrect email address was unsubscribed — I only use one email account in Google Apps, with about 7 other accounts either getting forwarded or imported in).

Time for webhooks! Little bit o' this

  # in the webhooks controller. please sign your webhooks
  def verify(api_key, token, timestamp, signature)
    # from http://documentation.mailgun.net/user_manual.html
    return signature == OpenSSL::HMAC.hexdigest(OpenSSL::Digest::Digest.new('sha256'),api_key, '%s%s' % [timestamp, token])
  end  
  
  # email_type provided in X-Mailgun-Variables header; if you have various types of things to unsub
  def unsubscribe
    User.find(params['user_id']).email_unsubscribe(params['email_type']) if verify(APP_CONFIG['mailgun_key'], params["token"], params["timestamp"], params["signature"])      
    render nothing: true
  end

Little bit o' that

  # from mailer
  # notice the X-Mailgun-Variables header where we provide some JSON
  # user id to verify correct user, avoids wrong email unsub issue explained above
  # be careful with JSON spacing or it wont work
  def retention_second_batch_reminder(user)
    @user = user
    tag('Retention: Second batch, first reminder')
    mail(
      :to => user.email,
      :subject => "We've missed you! Send some Picplum Prints today",
      'X-Mailgun-Variables' => "{\"user_id\": #{user.id}, \"email_type\": \"retention\"}"
    )
  end
  
  def tag(title, campaign = nil)
  # helps with setting campaign tags
    headers['X-Mailgun-Tag'] = title
    headers['X-Campaign-Id'] = campaign || title
  end

And there's a lot more you can do for tracking other Mailgun events. Of course Mailgun has their new HTTP sending API (faster than SMTP + no more MIME!), so I'll need to migrate to that in the near future.

Here's an example of one of our Picplum gift emails (though this trigger email doesn't have an unsubscribe link):

This particular HTML layout has the nice benefit of being Mailgun Approved:

Hey guys, very nicely done with design of your emails.
Not only they look great and don't abuse images, they're also very friendly on spam filters as well. Will take a screenshot and keep sharing with our users if you don't mind.
--
Ev Kontsevoy

If you read this far, you've won a Picplum account! Click below to signup.

We're hiring at Picplum!

We're hiring our first engineer! Want to work on a product that actually puts smiles on people's faces? We are a design-minded and data-informed team based in San Francisco working on problems that really affect people. Read more about Picplum and the team.

Want to hear more? Send us an email at founders@picplum.com. Be sure to link us to something funny on reddit too. Then we can tell you about our buzzwords like backbone, coffeescript and rails.

Special Thanks to Noah Kagan of AppSumo for reading a draft of this post. This post made possible by several seemingly endless blocks of time, Sennheiser HD 650 headphones, many Above & Beyond Trance Around the World sets and level 32 in Modern Warfare 3 (gamertag StammyHD). Follow @Stammy and @picplum on Twitter.

This was a long blog post and I no doubt made some errors in here. Please drop me a comment below for any you spot. Thank you and happy holidays.

Enjoy this post? Click through and leave a comment. It will make my day. Startup Idea: User Retention as a Service

Talking Startups and Picplum on BBC News

2011-12-14T18:19:47-08:00

After a gracious introduction to the BBC by Mr Amit Gupta, I appeared in a short BBC News segment about the Silicon Valley startup scene as compared to the NYC startup community. Click the screenshot below to watch the video!

On BBC News talking about Silicon Valley, startups and Picplum

While it's only a 3 minute segment with half that with me, there were quite a few things I mentioned on tape that did not get included. Definitely a more pleasant experience than my Nike commercial where a film crew of 16 people taped for 14 hours to create a 30 second ad, but I digress. I'd like to expand on my thoughts a bit here.

First off, I'm am super happy with the video (aside from my ever-present fast talking) and it was just in time for Picplum as Akshay and I begin switching gears from coding, coding, coding to focusing more effort on PR and marketing. I had to flip on a few more instances on Heroku in the morning when it was also mentioned on Huffington Post.

Silicon Valley is not SF

Some folks on Hacker News were clamoring about how the video appeared to use Silicon Valley and SF interchangeably. While I often said and referred to the "Bay Area" as a whole in the taping, as far as I'm concerned they are pretty much the same. There are tons of startups in SV and SF. That's all that really matters to me. Lots of startups that begin in SV move up to the city to attract young engineers that are lured by the SF lifestyle. And startups like AeroFS love it in SV (my assumption) as they tend to hire folks, such as senior systems engineers, that happen to be older, have families and want to raise them in SV. Both ways work well. And of course there's the Berkeley startup scene as well.

Chance Encounters & Paying It Forward

Call this the "echo chamber" if you want, but everyone in my vicinity in SF works on their own startup or for a startup. I can't walk to get lunch without running into founders. This is a good thing. It's these chance encounters (that Paul Graham so raves about) with people that are in a position to help you out in some way and want to help you that make this a great startup environment.

In the video I mentioned a few people that unfortunately did not get edited in: Hiten Shah, Dan Martell and Noah Kagan (though Noah has since moved to Austin he was instrumental in helping me get on my feet when I moved here).

These folks — and many others like them in SV — are the essence of the startup scene in my opinion. I can't run into them for 15 seconds without them asking "How can I help? What's the hardest thing for you now?" And it's not like they're paying me back for something, they are driven to help fellow entrepreneurs. I'm sure you can find some facet of that in New York, but not as much. Technology is just a tiny part of NYC's vibrant fashion, finance, advertising and PR industries.

When I was growing up I always heard the phrase "surround yourself with people smarter than you," a variation of an early David Ogilvy quote. Well that's what I'm doing in the Bay Area.

Soft Landings

Of course there's a plethora of funds investing in startups of all sorts, so I won't spend any time on that. But the thing that doesn't get mentioned much is the number of talent acquisition offers that get made. It happens a lot more than you hear about on TechCrunch. This is a byproduct of the surplus of founders, where startups are in a hiring crunch. It's almost too easy for talented individuals to start their own company and raise some capital to get started. Sean Parker has gone on record recently saying that small startups are ridiculously overfunded.

What does that mean? If you're talented and your startup isn't working out, or even if it is too early too tell, chances you will receive an email or call from another founder asking if you'd be open to a talent acquisition. These have come up for me a few times in the past and it almost seems like it's the norm in the Bay Area. In New York? Not so much (completely blind assumption added for effect, please dispute in the comments!).

Akshay and I in the office

Bias much?

I might seem like I'm being a bit overly pro-Bay Area and boasty in this post. I realize there are other places to run startups, but I love it here and wouldn't have it any other way. Come and visit for a few days, tour a few startups.. hopefully you'll be able to grok what I'm trying to portray.

I can see myself living in NYC at least for a year just to check it out (and find a Greek wife in Astoria) but as long as I'm doing a startup, I'll be in the Bay Area. Anyways, I felt like I need to write at least some sort of brain dump on my blog so you guys don't think I've abandoned it! Just been working a bunch. I have one other large post coming when I can get a chance to write again. It's about a startup idea that I'm not going to pursue but that someone definitely needs to build.

Send some prints!

Why not share the love this holiday season and buy a Picplum gift for someone in your family or send them prints of your own?

I need your help spreading the word about Picplum. Please do me a huge favor and tweet, Facebook, Google+, blog or whatever it is you do best, about Picplum. I would really appreciate it. Thank you for reading my blog.

Enjoy this post? Click through and leave a comment. It will make my day. Talking Startups and Picplum on BBC News

The Coding Zone

2011-10-23T01:27:52-07:00

I've learned there are three main things that set me up for a productive programming session.

My current coding wonderland.

Good Music

An endless supply of new beats works wonders. This is the absolute most important thing for me. If I have to context switch every 3 minutes to find a better song to play, not much is going to get done. Sometimes I'll loop through a Deadmau5 album on Spotify, or listen to a set like Trance Around the World. While I really enjoy leaks and mashups on Hype Machine, it is so hit or miss that I end up having to change the track often.

Getting in the coding zone starts by isolating myself from the rest of the world with my headphones. That's also a sign to Akshay, who works a few feet in front of me, that I'm in get-shit-done mode but have Campfire open if he needs anything.

No Chance of Interruption

I must have a seemingly endless block of time at my disposal. If I have a meeting in one hour that severely limits how much of a zone I can get into. My most productive work tends to happen at odd hours where there is no possible way that I will get a text about going out for lunch, an IM from Olark or a bunch of emails filling my inbox.

For example, it's early on Sunday morning, my cofounder is sleeping (I've slumped into a nocturnal phase.. we're in a no-meetings-until-we-ship-some-new-stuff mode) and I will probably be up until 7am in a blissful coding rage. Everything is perfect right now.

Organization

I'm never far away from our Trello board, my own personal Trello "scratch" board, my trusty Pilot Hi-Tec C Cavalier 0.3mm pen and browser sketch pad on my desk. Anything that crosses my mind worth doing now goes on my sketch pad and anything worth doing later goes on our Trello. I used to hate Trello because I thought it was fugly, but the simplicity has grown on me.

For some reason I can't seem to shake the "to do.txt" file on my desktop. Nowadays it has evolved into more of a scratch pad as well — random snippets of code or copy that I don't need this moment but don't feel like having to browse through github to find later should I need it again.

Honorable mentions: A depth charge or cappuccino on my desk, being motivated about what I'm actually building (that's the easy part for me and why I have only ever worked on my startups), and having a clean workspace, both in my physical living area and on my computer's desktop and Picplum Dropbox folder.

In hindsight I would have rather purchased an external USB DAC and some quality Sennheiser headphones.

Organization as mentioned above also means mental clarity; knowing that both Akshay and I are on the same page about what we're building at all times and sharing our progress with each other as we execute each task. It makes for a smoother product roadmap when the bigger picture has been thought out and every deliverable builds up to it and is not a random wouldn't-it-be-cool-if.

The best thing we have done for Picplum? Purchased this 6 foot by 4 foot whiteboard (better than shower board and Whiteyboards in my opinion -- they become hard to erase after a while). We've got the next three months planned out on it and are constantly updating it with tasks, deadlines, who's doing what or explaining various new user flows or UIs to each other.

Thoughts? How do you dive your coding zone? Have you signed up for Picplum yet? We'll be pushing some cool stuff soon so be sure to sign up now so you don't miss out. :)

Enjoy this post? Click through and leave a comment. It will make my day. The Coding Zone

Thoughts on the Amazon Kindle Fire

2011-09-28T08:39:24-07:00

It was exactly one year ago that I received my first Kindle and fell in love with it. Why? They distilled the essence of a simple, superb reading experience into a lightweight, affordable and hassle-free device (as in WhisperSync and stellar battery life). While the affordability is definitely still there with the new Kindle devices announced today, I'm a bit wary of where Amazon is headed.

Amazon just released some new Kindles today: the $199 Kindle Fire Tablet, $149 Kindle Touch 3G, $99 Kindle Touch, and new $79 basic, no touch screen Kindle.

Amazon's New Kindle Touch, Kindle and Kindle Fire

For one, props to bringing the basic Kindle price down to $79. Aside from that Kindle, it appears that every other Kindle model is now touch screen. Of course, everyone's focusing on the new Android-based, color screen Kindle Fire tablet. It's being touted as a solid iPad competitor. Am I the only one thinking this is messing up the flawless Kindle brand? I think it should have been given a different moniker entirely.

The tablet features apps for Amazon’s Android Appstore, Kindle store, Amazon MP3, and Prime Instant Video. Nearly all of Amazon’s recent news, Amazon Cloud Player, Amazon Cloud Drive, Kindle Cloud Reader, the streaming deals with Fox and NBC Universal, were in preparation for the Fire. With these cloud services in place, the Kindle Fire is a legitimate iPad competitor. But it’s more than just Amazon apps. Users are free to load apps from Amazon’s Android Appstore including Pandora, Twitter, Facebook, and, most notably, Netflix.

TC: Amazon Fires $199, 7-Inch Tablet At Apple

Blah. Sounds like a lot of clutter to me. The original Kindle was purpose-built: create an amazing digital reading experience. The Kindle Fire's MO seems to be create an okay experience for apps, the web, books, movies, music and of course Angry Birds. I really liked Amazon's laser focus on the regular Kindle and that's why I travel with both my iPad and my Kindle. One is great for movies with a larger screen (and that is just about the only thing my iPad gets used for — my Air is not much bigger so I just take that for any real work that I need to do) and the other is super lightweight and makes it easy to read anything.

At first glance the Fire looks like a hybrid between the failed Barnes & Noble Nook and the also 7-inch screen Samsung Galaxy Tab. It sports a dual-core processor and a nifty 'cloud-accelerated web browser' called Amazon Silk.. it's clear that the Fire is being marketed as much, much more of a media device than the pure reading experience the Kindle came to be known for. Especially with all of the Kindle Fire screenshots showing Angry Birds on the home screen.

I was talking about the rumored Kindle Fire tablet with my cofounder the other day. My point was that for it to really work, Amazon would have to deliver on both the tablet/media aspect while simultaneously maintaining the solid reading experience — most likely through a hybrid screen that can easily switch to e-Ink when you are outside or wish to read in a glare-free, black and white mode. Such displays have been in the works since 2009 (search for Pixel Qi e-Ink / LCD hybrid), and it would be great to see Amazon pull a home-run with such tech in their latest device.

I am however most interested in a new Kindle feature that got slighted by all this Kindle Fire news — X-Ray. It's the one feature in today's announcement that is meant for the die-hard Kindlites:

Amazon invented X-Ray, a new feature that lets customers explore the “bones of the book.” With a single tap, readers can see all the passages across a book that mention ideas, fictional characters, historical figures, places or topics that interest them, as well as more detailed descriptions from Wikipedia and Shelfari, Amazon’s community-powered encyclopedia for book lovers.

The Kindle 3 I fell in love with

The regular Kindle got me amped up about reading. Just after six months of owning the new Kindle I had read an average of 2 books a month. It's clear Amazon wants to chase other, larger market opportunities with a more multi-purpose device. Let's just hope they don't wreck the Kindle brand with some cheap Android tablet.

What do you think about the Kindle Fire? Love it or hate it, I have to give it up to Amazon for shipping an entirely new product.

Enjoy this post? Click through and leave a comment. It will make my day. Thoughts on the Amazon Kindle Fire

Canon 7D Test Shots

2011-09-22T22:52:57-07:00

I've been playing with my Canon EOS 7D for about a week now. Just wanted to share a few recent shots. My workflow involves Adobe Lightroom 3, which I have grown to absolutely love. It's fast on my Macbook Air and can easily fix lens distortion with "profile corrections."

I previously enjoyed high-end photography equipment merely for the technological aspect of it and getting caught up in all the features. Now I'm taking the time to read up on techniques and recalling what I learned about photography while working on yearbook staff in high school. I'm sure I will write a beefy 7D-related blog post when I can carve out a few hours, but for now I'm just cranking away overtime on Picplum. Our upcoming photo uploader is slick — you see the photos you just dragged over before they have even uploaded. Gotta love FileReader.readAsDataURL() in HTML 5. Have you made a Picplum account yet? :-)

My nephew Michael

Bay Bridge

Infinity Towers

Playing with some Canon 'speedlighting' techniques and remote flash with the Canon 580EX II.

I have been flipping through some photography related Kindle books recently as well. The pick of the litter seems to be Speedliter's Handbook: Learning to Craft Light with Canon Speedlites (not an affiliate link because Amazon shutdown the Associates Program for California residents!).

Thoughts? What's your favorite photo blog or book?

Enjoy this post? Click through and leave a comment. It will make my day. Canon 7D Test Shots

Thoughts on Picplum Automatic Photo Prints

2011-08-22T10:00:00-07:00

Hey there! We've haven't spoken in some time. My apologies. For the past 2.5 months I have been keeping busy with my latest startup, Picplum. In this post I hope to dive far, far into Picplum in attempt to provide a critical review of my own startup just as if I was reviewing any other startup. This should prove interesting. Let's start with the basics first.

When in doubt, bokeh it out. Signup Now »

The 140

Upload your best photos. Picplum prints, packages and ships them to close family & friends automatically every month.

Why I'm Psyched

Picplum combines many of my passions. Front-end bliss and a magical UX (getting there..). Consumer web. And of course, photography:

Back in 2009 I presented "HDR Imaging for n00bs" at O'Reilly IgniteATL, based on these three blog posts: How To: Get Started with HDR Photography (Part 1), Part 2, Part 3.

Stammy makes for a horribly fast-talking speaker.

Everyone understand prints. I can walk into a random group of people at Starbucks (or more recently the moms that turn Crossroads Cafe in South Beach into strollerville at lunch) and tell them about Picplum in 10 seconds. They instantly get it. Word of mouth alone is actually a solid distribution model for Picplum.

How We're Running This Startup

User testing in progress

I will likely mention "experimenting" a few times in this post.. what gives? One fundamental thing we're doing differently with this startup is throwing all assumptions out of the window. Neither of us can get away with justifying a feature or default setting with "I think" or "most people." That's usually the start of some likely incorrect assumption. (A habit I believe I picked up from the Chirply brothers.)

Instead we experiment. A lot. Data and real user testing finds the solution for us. Seems obvious but I never really took this to heart with my past startups. Picplum as you see it now is currently on its third product iteration (we started from scratch the first week of June).

The app has essentially been rethought several times. Part of that is that we got better at backbone.js and kept refactoring but we also regularly sought out user feedback. I can't praise user testing enough. User test with family. User test with randoms. User test with peers at Y Combinator dinners and with YC partners at office hours. My love of user testing will probably rise again in a dedicated post later on.

An early version of Picplum before realizing we needed an easy user onboarding process.

One of the first things I learned through user testing is the stark difference between visual design and functional design. We had several UI elements we thought were very slick but when it came time to user test they failed utterly in terms of usability. Take for example my first stab at designing a recipients UI:

Old version of recipients UI

Even after I made the yellow bar that says "Receive photos by mail, email or both?" even larger, it still seemed to be entirely invisible to users. They would fill out a recipient's info and then later ask how they could adjust what that recipient received. Likewise, several users had trouble switching between recipients or knowing where to click to add a recipient. My flaw was making an interface designed for a person having many recipients when the typical user would have just a few.

Users on picplum

Paul Graham often has some brief but amazingly useful feedback: "ask your users." We'll be doing that continually over the next months. On that note, I must plug Olark. Olark is a little support chat tab that sits on the bottom of Picplum and lets us chat with users on our site. I'm sure you've seen it on many sites before. I love it. Here's why: I can see a list of users, where they came from, what pages they have loaded, where they're located, if they're logged in and then I can initiate a chat with them (and even change the page they're viewing!). It has never been easier to chat with your users. Even just a 5 minute chat with a user starting with something like "Hey there, I see that you've been reading our FAQ for a while -- is there anything I can help you with?" can turn a first time visitor into a paying customer. Not only that but I can ask them what they would like to see or how they plan on using Picplum.

We're also trying to be laser focused, finding what works, then moving on. That's why we only do one thing right now and are iterating until that experience is clean. A rigid dichotomy to launching with a bunch of features. That's how we're approaching this startup. Thoughts?

@dodeja @stammy at Y Combinator. Someone brought a 5D Mk II with a massive ring flash to dinner.

Picplum 101

Picplum makes it ridiculously easy to send photo prints. It does that by introducing an automatic component. Upload or drag-and-drop photos on the website, or email us your best digital photos as you take them. That's it. Every month Picplum takes what you've sent, prints them, carefully puts them in a nice package and ships them to people on your recipients list — grandparents, close family and friends.

Picplum works great for anyone but we're starting with new parents and parents with young children as our first users. Why? They don't have the time to print their baby photos any other way and the convenience of Picplum makes the most sense for them.

I can’t even tell you how many times I abandoned the shopping cart on Flickr. Numerous times. My intentions are there, the time and distraction-free-environment is not.
Tina Roth Eisenberg (@swissmiss) — Swiss Miss design blog/studio

I'm a newly-minted uncle and know how this goes — photos of my nephew stay on my sister's phone, point and shoot camera, laptop and DSLR. Maybe they end up on a photo dump site but then nothing happens. Well, sometimes I get this in my inbox:

Sis did you seriously just send me over 1,000 photos? What is this I don’t even.

Aside from the convenience of automatic delivery, there are a few facets that comprise how Akshay and I have been thinking about Picplum: premium prints, best moments and a great experience. All prints are done by a professional photo lab via lightjet chemical process on 4" by 6" lustre photo paper that's thicker than flimsy 9c prints found elsewhere online. Lustre prints have the color saturation of glossy, fingerprint resistance of matte all without the glare of glossy photo paper. The photography snob in me wouldn't have it any other way. (The photography snob in me is also waiting desperately for the Canon 5D Mk III to come out and pair with an 85mm f/1.2 L.)

Shutterfly was really disappointing: pixelated, poor colors, and just a cheap feel - we'll never use them again. [...] Still, none of them were as good when I took a photography class in grad school and went to a camera store for processing, or our wedding photos for that matter. So I think there's something to be said for professional / photographer-quality processing.
Dave Werner

Best Moments

Picplum is not trying to be your photo dump where you plug in your camera's memory card and unleash hundreds of photos thinking that you'll do something with them later. We just want your best photos. That may be just 5-10 a month, or it may be 25, but it's definitely not 300. Curation, uploading and remembering to do something with your photos are the main roadblocks for a utopian photo sharing experience. We're trying to solve this problem to separating the culling process from the uploading process and making everything else automatic.

Maybe that's not the right way to do it but we're starting with this hunch and are going to iterate. Likewise, prints are just the first step. We want to gather mindshare around being the place for your very best photos. If we can do that there are some interesting opportunities available to us. If you asked me where my best photos were, I wouldn't have an answer. I have 16,000 photos on Flickr but you'll have to wade through them to find the best ones. Maybe I tossed a few good ones in a set, but that's about it. I have hundreds more on Instagram, Facebook, iPhoto and Aperture/Lightroom (used both for a while before settling on Lightroom — fast!). We have some ideas about how to get your best photos from these services too and just curation in general. We'll be experimenting in the near future.

Experience

Just like when you see a red Netflix slip in the mail and immediately know what it is and get that giddy feeling, or open an Apple package, we’re trying to do the same for photo prints. When people talk about Picplum we want them to start with, 'I received this amazing package in the mail yesterday,' instead of 'look at this neat website.'
Paul Stamatiou on The Next Web

Crafting a memorable experience encompasses everything a user comes across when dealing with your product or service. For us this meant taking extra care to ensure the offline experience of the Picplum package was excellent. Most people (recipients) will hear about Picplum for the first time via our package so it's important to make a great first impression and ensure that it's not a stale experience in successive engagements.

It's still pretty early on so there's not much to share with what we have learned but we're starting with quality prints, a nice envelope the same color as our website, and an explanatory insert introducing the recipient to Picplum. More on this in the months to come.

The Review

Alright time to critique the actual web app. What's that you're muttering to yourself? Where's the mobile app? Simply put, we won't expand to mobile until we know that the general Picplum concept works first. One thing at a time, separated by validation. Trying to do too many things at once without much validation is a surefire way to spread yourself thin and fail. The peanut butter manifesto comes to mind.

[Now I pretend I'm not Stammy and enter user testing speak-aloud mode..]

Alright, let's signup. Here's the first screen I see:

First login

Oh nice, it has me following some steps: Add Photos, Add Recipients, Send Photos. It wants me to upload photos first. Hrm, I don't really know what photos I want to add right now. Let me see if I can skip to the second step by clicking "Add Recipients." Interface seems very snappy.

Okay that worked, here we go. Let's enter grandma and the parents. Grandma doesn't use email so I'm going to see if there is a Send Prints Only mode that doesn't ask for email in the dropdown; there is. Hrm, I don't know my grandmother's address off the top of my head. Have to switch to my email inbox and search for it, bummer. If I wasn't motivated I would have probably closed the tab and decided to come back later/never. Okay found the address in an old email thread and added grandma. Recipient added instantly; no page load!

Adding my sisters now too. Don't know their addresses off the top of my head either so I'll have to search GMail again. This is getting annoying. I wish Picplum could just ask for an email address and let me click a button to automatically send the recipient and email and have them fill out the info and explain to them what Picplum is all about. Okay, I've added my recipients. I'm going to click this big orange "Add More Photos" button.

Okay that button takes me back to the Add Photos page. This is the hard part. Hrm. What to upload? Opening up iPhoto, plugging in the SDHC card from my aging Sony Alpha NEX-5 into my MacBook Air. Loaded up my latest snapshots. Alrighty. The purple box says I can drag, let's try that out now.

Drag and drop!

I dragged the photos over and let go. They instantly started uploading! I like this uploading status. Makes it easy to understand what is happening and when it will finish. Oh nice, as the photos finish uploading they just appear. This thing is wicked fast. A new button labeled "Send Photos Now" appeared on the screen to proceed to the last step.

Alright, my photos are done uploading. Hrm what is this crap... my head is cropped off! Will it actually print like this? I hope they know how to deal with portrait photos. Can I do any basic post-processing or photo adjustment? Doesn't look like it.

I clicked on the photo and the larger version seems normal. Oh well, I'll go to the next step and see what happens.

Photos look sharp in a nicely modified facebox

I'm now on the last step which seems to be some kind of confirmation page.

Send Your First Batch page

I thought this was supposed to be automatic. Ah I need to send this batch first and then it will become automatic thereafter. Can I pause an automatic batch or will I get charged if I don't use it? I don't see a way to only order these photos and not subscribe to a plan. I guess they only offer a monthly subscription. Hrm, why is it $14 per month and then say that the first batch is free, but then show a $2.00 charge? Some of this pricing stuff is not very clear (in this case it's $7 per recipient and since one was international that's a bit extra).

I don't see any area to edit what I receive. It says it will send prints to my recipients. What kind? Can I include a message with these photos? Can I change my recipients later?

Adding my credit card info now. It seems odd that I need to click "Save Credit Card" and then the "Pay & Send" button — why can't it just be one action? What happens if I want to cancel during the 30 day trial?

Clicking "Pay & Send", let's see what happens. Okay it takes me to the photos page, a notice popped up saying I sent my first batch and some new site navigation appeared.

Now what? Flipping to my inbox to see if any confirmation or receipt was sent. Nothing. If I had "email only" recipients when and how would they receive the photos? How long will it take until my print recipients receive my photos in the mail? I think this step should bring up a modal or guiders.js box teaching me the new navigation that showed up. Can I add a photo for the next batch? I forgot when the next batch will ship.. where can I find that date again? I forgot to add someone to that last batch of photos, can I edit recipients after the fact? Blah! Closing the tab and going back to Hacker News.

[/End user testing voice]

Phew. There is definitely some room for onboarding flow tweaks, but it has come a long way since the middle of Y Combinator:

A very early version of this same new user onboarding flow... yuck!

After having watched real users go through the onboarding flow many, many times you begin questioning everything. Too much text is distracting. Too many unrelated UI elements could cause the confused user to click to other pages and get out of the flow. We've refined this part of Picplum several times. We have yet to add it but we want to put in positive reinforcement in-between steps so the user knows how things are going, and make their next action even more obvious (either by way of making the next action pulse/glow or using a guider box).

After the user sends their first batch of photos and completes the onboarding flow I want to acquaint them with the new UI elements. I'll fade in a help button on the header bar and show a guider box telling the user that if they ever need help with the UI they can click that button to walk them through the interface should they need to reference it at a later point.

But Prints Are Dying

Film photography is dying, not prints. People still want to frame photos, put them on the wall or share prints with close family and friends. Digital photos are surely growing but you will always want the most important ones printed and Picplum makes that ridiculously easy and convenient. We're aiming to make prints cool again — starting with the traditional 4" x 6". The next step may be physical, it may be digital. We'll see what the market tells us.

Checkout the Picplum blog for my mom's take on what photo prints mean to her.

Verdict

I give Picplum 8 out of 10 Stammys. I want to be able to signup without having to add any photos and just have it setup and ready to go for when I want to email in photos. I want larger prints and I want Picplum to send me a frame. I want Picplum to tell me how to take better pictures as it learns what I think my best photos are.

Sending photos every month may not be the right interval for everyone. What about every 2 weeks too? Or what about a "smart" batch that sees how you use it and sends prints accordingly. I want to be able to send different photos in the same batch to different people. I want Picplum to help me pick my best photos, from ones I manually import and ones I want imported from other services.

But first I'll have to see if these are things real Picplum users want too. Signup Now »

Try Picplum

If you've read all the way to this part, I would love for you to take Picplum for a test drive. Signup and send your first batch of beautiful prints today. The first ones are free. We have a pay as you go plan too. Questions? Fire away in the comments below.

Thoughts?

Spotted at Stripe.com HQ

Enjoy this post? Click through and leave a comment. It will make my day. Thoughts on Picplum Automatic Photo Prints

Bitcoin Mining

2011-05-19T21:21:28-07:00

Back when the Pentium 4E "Prescotts" were causing an outrage in the computer modding community for notoriously overheating, and around when Steve Jobs failed to deliver on his promise of 3GHz from the G5, I was an avid folder. Folding is the term for running a distributed computing program on your computer, Folding@Home, that donates your spare CPU cycles to help Stanford learn more about diseases created from misfolded proteins. This project became and is still hyper-competitive. People join folding teams, install it on as many computers as they can find and let them run 24/7 in hopes of completing many WUs (workunits) and ranking higher.

How does this relate to the title? Well I have recently been playing around with bitcoin mining and I can't help but draw similarities between the two. Just like folding you must run a program that uses (lots of) your computer resources to generate, or mine, bitcoins. But that's where the similarities end. So what exactly is bitcoin? A recently published Slate article, My Money Is Cooler Than Yours, has the scoop:

Bitcoin is a peer-to-peer currency, meaning it is not issued by a central authority, like the dollar or yen. The money supply grows as the network grows and will max out at about 21 million bitcoins. But right now, you can purchase them online on the Mt. Gox currency exchange or an over-the counter market. They do not exist in physical form—only electronically, owned and traded by members of a special, anonymous peer-to-peer network. No third-party intermediary, such as a payment processor or a bank, needs to keep tabs on or process the electronic transactions. The network itself does, with each participating computer running a special, secure program that ensures no user can spend a coin twice or create new money out of thin air.

GigaOm published a similar exploratory piece about Bitcoins: How Bitcoin Wants to Make Money Even More Virtual. As did TechDirt with Can Bitcoin Really Succeed Long Term? Bitcoin is just getting mainstream media attention. I briefly mined for bitcoins some six months ago but didn't really "get it" and the big vision, so I stopped mining. If only I had held onto my bitcoins instead of deleting the app!

My massive bitcoin empire is worth... ~14 cents. And I got those 0.02BTC from the bitcoin faucet. Been mining for all of 2 days on my slow MacBook Pro.

Unlike Folding@Home where you more or less knew how much progress you were making, mining bitcoins is fairly random. You might generate your first bitcoin in one hour or it may take 3 weeks. It depends if you are among the first in the community to solve that block with a hash; the more hashes your computer can generate, the better.

It's important to realize that block generation is not a long, set problem (like doing a million hashes), but more like a lottery. Each hash basically gives you a random number between 0 and the maximum value of a 256-bit number (which is huge). If your hash is below the target, then you win. If not, you increment the nonce (completely changing the hash) and try again.

Bitcoin Wiki

It becomes harder to solve a block as the total computational power of the network increases. As such, bitcoin miners often join pools where the pot is shared (depends on the pool but often in relation to your contributed power). Currently a single bitcoin can be sold on one of several bitcoin exchange websites for around $7. You can buy bitcoins or generate them yourself to then spend online. But wait.. how do you spend them?

I'm only skimming the surface about bitcoin mining and its specifics, but one thing is certain: bitcoin has some pretty lofty goals. If this is to be a viable virtual currency people must begin accepting them as currency. And that's exactly what is happening. Take for example this software developer that has begun accepting bitcoins for payment. And there are more and more directories of bitcoin-accepting service providers popping up; everything from online stores to flash games and web hosts.

To be frank, I'm not 100% on the viability of bitcoin as a currency but I am fascinated about the geeky bits: optimizing computers to mine bitcoins and achieving higher and higher Mhashes/sec rates. Lots of folks are working on custom mining setups to get the most out of their hardware.

While not cost effective in anyway at the moment, I'm currently tinkering around with bitcoin mining on an Amazon EC2 GPU Cluster. Below is completely unoptimized bitcoin install running on a cg1.4xlarge instance with 22GB of RAM and 2 NVIDIA Tesla “Fermi” M2050 GPUs. With some tweaking it's possible to get it up to around 140Mhashes/sec — still a far cry from the 800Mhashes/sec capable from an ATI 5970 Radeon HD video card or overclocked dual 5870s.

[ec2-user@ip-XXX-XXX-XXX-XXX 64]$ ./bitcoind getinfo
{
    "version" : 32100,
    "balance" : 0.00000000,
    "blocks" : 125020,
    "connections" : 78,
    "proxy" : "",
    "generate" : true,
    "genproclimit" : -1,
    "difficulty" : 244139.48158254,
    "hashespersec" : 16347145,
    "testnet" : false,
    "keypoololdest" : 1305759224,
    "paytxfee" : 0.00000000,
    "errors" : ""
}

I think a commenter on TechDirt put it best:

Bitcoiners don't know if Bitcoin will succeed but they're working hard on making bitcoin success.

Thoughts on bitcoin? I'm still pretty new to bitcoin and have a lot to learn. This post was just to share my enthusiasm for a budding new technology trend and virtual currency. I have yet to join a mining pool, but that seems to be the best way to get started, unless you happen to have a cluster of your own computers with beefy GPUs.

If you've got some bitcoins you want to share, send them to my address: 128jzNVjzacRWYqFsVFMjcPKvUMa6Yfvgx :)

Enjoy this post? Click through and leave a comment. It will make my day. Bitcoin Mining

Crash Course: Design for Startups

2011-04-08T10:00:00-07:00

I recently stumbled across screenshots of old websites of mine and was hurled into a state of reminiscent shock. I knew they were bad, but wow they were outstandingly horrible (redeemed only by their microformats support! I kid, I kid). Several years and a few Georgia Tech design and HCI courses have passed since those atrocities graced the web but I archived them in a sort of reverse portfolio as a personal reminder of how much my design sensibilities have matured. Only in the last year have I begun feeling slightly more confident about my design quality and process.

I have yet to consider myself a real designer and there are quite a few things I would do differently with my most recent work on Notifo and Pic A Fight. But I've learned why my work nowadays is better than from years past. I am aiming to somehow share some of these thoughts brewing in my head with this post today.

I have been brainstorming for the past few days about how to scope this article. Unfortunately I don't think I can distill everything about design into this or any number of posts. For one, design can be very subjective (or just plain wrong at times). Second, there's a sharp distinction between graphic design and user experience that deserves its own article. Third, there's a whole world of typography, color theory, gestalt laws, fitts' law, hick's law, visual hierarchy, UI patterns, layout mastery and copywriting that needs to be explored first hand. But most importantly, I'm still learning too. This is not a definitive guide, just a friendly pointer for startup folks getting into design.

What I can do is share what has worked for me. I won't get into how to do the technical side of things, because let's face it that's just a Google search away and you'll probably find a great article on Smashing Magazine showing you Sass, writing mixins, learning to put CSS3 vendor prefixes ahead of real properties and so on.

Subtle is key! Except when it's not.

When I was a wee pixel pusher I would overuse whatever graphic effect I had just learned. Text-shadow? Awesome, let's put 5px 5px 5px #444. Border-radius? Knock that up to 15px. Gradients? How about from red to black?

You can imagine how horrible everything looked. Now my rule of thumb in most cases is applying just enough to make it perceivable, no more. This usually means no blur on text-shadow and just a 1px offset, or only dealing with gradients moving between a very narrow color range.

Then what do I mean about "except when it's not"? Take for example visual hierarchy — where to draw someone's eyes first with color, contrast and proportion. If you are going to increase the font size of a particular element, don't increase it by 1 or 2 points. Increase it by 10. Here's a nice test: take a screenshot of your website or layout and make it 3 times smaller. Can you still see the main headline or call to action well? No? Make it bigger!

Get Inspired and Stay Thirsty My Friends Organized

This is not a new concept by any means, but it bears repeating: keep the right side of your brain engaged by regularly seeking great website designs, reading about design, sketching site layouts (or anything really) and more. Whenever I see a website I like, or even just a particular element of a site, I take a screenshot and archive it. I have been doing this for at least a year with the help of LittleSnapper. Be warned, the app is a little slow. I wish someone would make a better competing product. I would pay $100 for it.

Easy to use with their browser bookmarklet. LittleSnapper stays out of sight and saves the screenshots.

I have amassed over 700 screenshots so far. Not a day goes by that I don't archive something nice I see online. There is an app in the Mac App Store called Galleried which is the desktop app equivalent of browsing many CSS galleries and helps too.

Process

My typical site redesign process usually goes like this:

Get in the mindset of the target audience. Since this is your startup this probably won't involve much research as you are likely already the domain expert and ideal customer of your product. If not, checkout the Five W's of UX: Who, What, Where, When, and Why. Keep a clear cut use case in mind throughout the redesign.
Spend a few hours trying to formulate my thoughts about how the first step affects layout. Should it have one big call to action for a primary use case? Are there multiple needs and products that need to addressed? What will the hierarchy be like? What gets the most attention? Flip through the aforementioned screenshots I take everyday and find 5 or 6 layouts I admire most. It might not be overall layouts, but particular elements I like.

For example, these were some sites I had in mind when in the early stages of planning Notifo's layout. The key feature I liked from all these sites was strong header navigation. I always start with navigation, determine the primary call to action and accompanying graphic/illustration/video/et cetera. The rest seems to follow naturally.

The next step is either a few quick layout sketches with whatever I have on me — either my trusty Cambridge notepad and uniball Super Ink pen or UI Stencils pad — or straight to HTML/CSS. More often than not I start directly in HTML/CSS. This is a big point of contention for designers. There's a large camp of folks that start with mockups or wireframes with Photoshop, Mockingbird/Balsamiq, OmniGraffle and so on, and those that begin in markup. The points for starting with the former are that it's easier to change things on the fly and you're more open to trying radical changes that would usually require substantial markup changes. Kyle Neath of GitHub prefers a mixture of both methods: screenshot stuff, cut it up and tweak in Photoshop, then implement.

Little known fact: the Ballmer peak phenomenon doesn't only apply to coding, it works with design too. That explains the two buck chuck.

I sketch 2 or 3 simple layout variants on a notepad, no more than 20 minutes, then go straight to markup. I setup Sass, import my mixins, a reset and get to work. Once a basic semblance of a website is up I actually do a lot of design tinkering in Chrome Dev Tools. I used to staunchly prefer Firebug but webkit and Chrome Dev Tools have come a very long way.
And then I take more screenshots of the Chrome Dev Tools-edited variations I like. I probably had 10 variations before I went with the one I liked for Notifo.
I tend to start with grayscale then tinker with color after I have the visual hierarchy down. I use xScope to help align anything and everything. It's perfect for quickly measuring space between elements (the red lines and measurements in the first image in this post is xScope).

One such work in progress/tinkering with chrome dev tools screenshot. I had just started to add color and texture to the header. Up until then it was all gray. Not really worrying about copy just yet.

Color adjustments and typography tweaks usually continue through to the very last minute. I'm always experimenting to see what it would look like with other tones, hues and font stacks.
Most work up until now has been for the homepage. Mentally prepare a sort of style guide — modules or patterns that will be used throughout the site. Classes to use for various sidebar elements, secondary navigation and so on. Update layout to work for content pages and style one-off pages like login, signup and a tour or benefits page.
Ask around for feedback and incorporate changes.

For smaller sites like Pic A Fight I skip all this and just wing it in HTML/CSS. On the other hand sites like Skribit have several layouts — i.e. the homepage structure was completely different to the structure used on logged-in user pages, so there's some extra work there.

Required Reading

While I could easily recommend many great design books, such as "Universal Principles of Design" and Norman's classic "The Design of Everyday Things", I'll start with some of what I consider to be the essentials for web and graphic design.

Coders that get stumped usually do something non-code related for a while and come back to see that the code gremlins have fixed their problem or going for a walk helped them think outside the box. Something similar applies for design. Keep your brain active by constantly seeking new sources of inspiration and creativity. I got a Wacom tablet to doodle in Illustrator and found that helps with idea generation a bunch. Yes, this is a long caption.

Read the Non-Designer's Design Book and learn about basic color theory and C.R.A.P. — Contrast, Repetition, Alignment and Proximity. Cool colors like blue recede while warm colors like orange seem to move toward the viewer.

For example on Notifo I used a tint of orange and analogous colors for the foreground and call to action, respectively, with complementary blue as the background. Learn about color complements and analogous colors; they are used most often and absolutely come in handy when doing the most daunting task for new designers, picking colors.

Mark Boulton's A Practical Guide to Designing for the Web is fantastic. I purchased the PDF to help support Mark, but a free online version is available as well. There are some sections in the book about how to get started freelancing, business plan stuff, dealing with client briefs and so on, but you can skip that. You're already well on your way with your startup.

If you were going to only go with one design book, this would be it. Mark covers it all: type classification, typesetting, everything about color (with site examples), color as emotion, designing without color, using and not using grids, composition basics including lead room and movement¹. It makes for a fairly quick read. Knock it out on a lazy analog Sunday and achieve design enlightenment.

An old design class homework assignment of mine in Adobe InDesign. Reminds me of my PageMaker 6.0 days on high school yearbook staff.

The Elements of Typographic Style by Robert Bringhurst is widely considered to be one of the great works discussing typography but it is mainly concerned with print. Fortunately Richard Rutter and Steve Marshall have adapted Bringhurt's work vis-a-vis the web. The Elements of Typographic Style Applied to the Web is a great foundation in typography for the web, including various CSS snippets throughout. For example, never use line-height with absolute units as that can actually result in negative leading on browser font-size increases. Use a unit-less value² greater than 1.4 to keep leading proportional to text size.

More Homework

Get a Typekit account and rigorously browse through fonts. Take note of their organization structure. Learn about font stacks. Try out some fonts on a site of yours. Make sure you set fallback fonts. Experiment. Learn about lettering.js. Aim for contrast while avoiding conflict. Play with font size, weight, structure, form, direction and color. Typography is easily one of the most overlooked aspects of design for new web designers. It makes a huge difference and is worth exploring. Great designers treat text as UI has always been Cameron Moll's mantra.

A design is in conflict when you set two or more typefaces on the same page that are similar — not really different and not really the same. [...] When you put two faces together that look too much alike without really being so, most of the time it looks like a mistake. The problem is in the similarities because the similarities conflict.
Robin Williams, The Non-Designer's Design Book

Briefly read up on the Gestalt Principles as they refer to user interface design: proximity, similarity, good continuation, closure, common fate, past experience, figure & ground. And Fitts' Law too. Then find out what UX really means.

But Stammy, we launch in one week!!?!111

Yikes. In that case, here are a few pointers:

Nothing in this list matters if you have shitty marketing copy. Run your copy through a fine-tooth comb. Then do it again. Sell people on benefits, not features. How long has your site/service/app been around? Will you be around in a year? Tell me about your team (I want an about page with mugshots! ³). Who are your current customers and how do they use it? How can I trust you with my info? Can you share any interesting usage/et cetera numbers?
Buy a nice set of icons and use sparingly. If I see yet another site using Silk icon's I'm going to go crazy. Try Picons, Pictos or Helveticons.
Everything that can be clicked needs to have a hover state and preferably an action state as well. Feedback is important in good interface design. LoVe HAte: link, visited, hover, active

A button I added two states to for Skribit's (my first startup) Twitter integration.. feedback galore!

If it can be aligned, it should be aligned.
When selecting colors for gradients in Photoshop, keep in mind that adding black (shade) or white (tint) to a hue (pure color) desaturates it. Not always a bad thing per se but it often makes for some muddled colors. Spice it up by trying different blend modes.
Use complementary or analogous colors to start and don't have more than 2 dominant colors. There are many exceptions to this when you get better. For now, find some palettes on ColourLovers or pick tints/shades from 0to255.
Textures! Download tileables or make your own grain, fabric or other such texture and use as a transparent, repeating background for large elements that would otherwise just be solid colors. But keep it subtle! The texture should only be perceivable when looking closely, not when 3 feet away from the computer. Also make sure that your texture goes with the theme of your design. A rust texture doesn't play too well with your futuristic iPhone app landing page. That can conjure up some cognitive dissonance. Your app is telling me it's the new hotness while your rust background texture is telling me it's old and busted⁴. Similar issues can arise with picking fonts that don't go with the mood of your site.
"Always adjust opacity. Nothing is totally black or white, dark or bright. A semi-transparent black or white line, glow, shadow or shape goes a long way." -Mike Rundle
Put non-essential links (anything that doesn't help new user signup conversion) in the footer. That's the first place users go when they know what they're looking for. Regulars in the footer include a link to a contact page, about, blog, and sometimes sitemap. Available yet out of the way.
Plain edges are boring. Add a subtle 1px inner line slightly lighter than the background if dark. Use rgba(255,255,255, [value from 0-1]).
Not quite sure how to style a particular element? Browse through UI-Patterns.
More white space. A good rule of thumb is that your padding and margin should be roughly equivalent to the font size used near that element.
Do you have a definitive call to action on your homepage?
Aid gestalt proximity and closure by grouping related items together with light bounding boxes or borders.
Have a long list of elements? Zebra-ify them and use alternating and subtle background colors.
Putting padding on your form inputs! Tooltips or extra description for non-standard fields. Style :focus too.
Avoid having more than three levels of boxes inside of boxes — especially if they all have drop shadow and borders, they tend to make a bad effect on the bottom when you see 3 chunks of lines.
Is the largest element or headline on your homepage the most important thing? Make sure that's what you want them to see first.
Finally, you don't have to fill up all of your available space!

And if you have an extra minute to spare before launch, setup Optimizely⁵. Start playing with some simple A/B testing on your homepage. Yeah I know A/B testing sounds scary at first. Optimizely makes it easy, just give it a shot.

Try New Things

While it's not quite the best strategy for my inbox, whenever I see a new site or service launching I readily toss in my email so I can be sure to tinker with it first thing when it comes out. I get to experience new layouts, designs and good UX almost every week by doing this. My co-founder, Chad, is the same way when a new API comes out and must tinker with it.

Most of what I described in this post is about design, not user experience or usability. Your site can be sexy and pixel perfect but if the flow for a user to complete a specified task is unintuitive and requires too many steps, it makes for a poor experience. Likewise well-researched information architecture (layman's: the organization and labeling of your site's sections and pages) is crucial. UX is a field I'm just diving into. Check back in 10 years for my definitive UX how to guide. Probably best if you subscribe. :)

In the meantime, checkout 52 Weeks of UX.

More books..

For those that want a massive list of good design reading, indulge below. I've only read or skimmed through about half and heard good things about the rest. You'll probably want to start with Steve Krug's work. Much of the rest is not quite geared for the web but helps paint a bigger picture about design as whole.

Envisioning Information by Edward Tufte
The Elements of User Experience by Jesse James Garrett
Don't Make Me Think by Steve Krug
Rocket Surgery Made Easy by Steve Krug
User Interface Design for Programmers by Joel Spolsky
Designing Interfaces: Patterns for Effective Interaction Design by Jenifer Tidwell
The Nature & Aesthetics of Design by David Pye
Designing for the Digital Age: How to Create Human-Centered Products and Services by Kim Goodwin
The Humane Interface: New Directions for Designing Interactive Systems by Jef Raskin
The Inmates Are Running the Asylum: Why High Tech Products Drive Us Crazy and How to Restore the Sanity by Alan Cooper
About Face 3: The Essentials of Interaction Design by Alan Cooper
The Smashing Book by Smashing Magazine
The Web Designer's Idea Book #2 by Patrick McNeil (great for inspiration)
Designing Interactions by Bill Moggridge
The Information Design Handbook by Jenn Visocky O'Grady
Change by Design: How Design Thinking Transforms Organizations and Inspires Innovation by Tim Brown
The Art of Innovation Lessons in Creativity from IDEO, America's Leading Design Firm by Tom Kelley
Thoughtless Acts?: Observations on Intuitive Design by Jane Fulton Suri and Ideo

Thoughts?

Drop me a comment below. This post was very much a raw brain dump. There are many facets to design, especially ones I admittedly have no clue about and am learning, that I couldn't get much deeper than this without making it a 10 part series. Chad says I should. Maybe I will after my secret redesign and UX challenge starting this month. Thanks for reading.

Footnotes

¹ I can't stress enough how important this is! I very much dislike when sites have screenshots facing or angled the wrong direction. The subject of any photo or image can draw the reader where to look next.
² Aside from z-index, line-height is the only CSS property that can go unit-less
³ I want to know you and your company's story. This is a chance to make an emotional connection with the prospective customer. Lure them in so you don't have to waste your time with I N C E P T I O N later! Win.
⁴ MIB reference for $1000 Trebek. Did you know they're filming MIB 3? Crazy.
⁵ Full disclosure: Pete, who you can read about from the Optimizely about page (see footnote ³), once bought me a grande iced tea at a Starbucks on Van Ness.

Disclosure: some book links use my Amazon associates code because I'm broke as a joke.

Enjoy this post? Click through and leave a comment. It will make my day. Crash Course: Design for Startups

Code School is Amazing

2011-03-22T12:00:00-07:00

Learning to code is not all kittens and daisies. It's tough stuff but fortunately the Internet is loaded with a surfeit of resources to get you started. They vary from "Teach Yourself X in 7 Days" type books and dense technical reference behemoths to the occasional good blog post guides. If you're very lucky, the subject matter you are trying to learn is taught by dedicated folks producing screencasts like those found at Railscasts, PeepCode, TekPub, Nodecasts, Vimcasts and so on. But watching only gets you so far. Getting your hands dirty and testing your skills is when you really begin to chmod u+w your brain. If you're still with me after this cheesy intro, I'd like to introduce the latest creation from Envy Labs, Code School, which is launching today.

Intro video to one particular Code School course

Envy Labs perfected their learning by doing methods with a site called Rails for Zombies that taught introductory Ruby on Rails programming with a series of 10-minute screencasts followed by code challenges. The challenges use an in-browser code editor and once you're ready to submit your answer the site interprets your code and displays the response (for Rails courses, output is just like rails console). Rails for Zombies came out late last year and was a hit. The Envy Labs team took what they learned and decided to make this interactive online marketplace.

The winning formula is screencasts + code challenges + gamification. I went through Rails for Zombies a while ago and loved it. I was in the beta for Code School and completed one of their new courses, Rails Best Practices, and am convinced these guys are onto something. The material is presented in hyper-engaging format and the challenges immediately put to use what you've just learned.

While they're starting with Rails courses (Envy Labs is a ruby shop), they will be adding others on a variety of subjects with jQuery and HTML5 & CSS3 courses up next. So what's the business model? Charging for the courses of course. It appears courses will sell in the $75 range, with Rails Best Practices currently being on sale for $45. Completing each course gives you public badges to show off on your Code School profile along with discounts on other courses and from selected Code School partners like Inform IT.

Click for a larger version

A typical code challenge provides you with sample database data, any applicable routes, request and view info along with relevant files for you to edit in the browser. If you get stuck you can redeem some of your challenge points for a hint. The challenges associated with each level are bite-sized problems that are directly relevant to something just covered in the screencast.

You can download the handy course slides for future reference

Code School would not be worth it if the content and screencasts weren't well researched and thorough.. and they most definitely are. In particular, I like how Rails Best Practices does not just teach how to do certain things but rather showed off the wrong way of doing things. Correction - wrong ways of doing things. Gregg would start with some dirty code, then refactor it to still-dirty code a few times, walking through the viewer's potential but incorrect thought process and then showing off some of the better ways to solve those issues. By showing in detail the number of ways most people do things incorrectly, it helps to identify where your current skills fit in and how to adapt them. I love it.

Verdict

There is no hesitation in my mind — Code School gets 10 out of 10 Stammys. The content is superb and the format is ideal for how most people learn... by doing! I see no issues with the price point either. I could see myself ending up spending the same amount of money on several screencasts or books and this is all condensed down into a smooth experience. Well done guys!

The completed course displayed on my Code School profile

I wanted to write about Code School the second I completed the Rails Best Practices earlier this month — I was completely blown away — but held off until they launched.

Thoughts? Is this something you would pay for if they had a course relating to what you want to learn?

Enjoy this post? Click through and leave a comment. It will make my day. Code School is Amazing

iPad 2: Thoughts from a first time tablet user

2011-03-20T20:00:00-07:00

I make for one bad tech pundit. I proclaimed I was content with my BlackBerry Curve and saw no need for the first iPhone. Three iPhones later, I said the same of the iPhone 4, lured by recent Android devices with impressive hardware specs. Of course, I got the iPhone 4 after cracking my 3GS. I inked my love of netbooks and ignored the first iPad. The XOOM piqued my interest in tablets with impressive hardware specs but the price and lack of apps kept me away.

iPad 2 streaming a movie from Netflix. Malbec not included.

Well I picked up an iPad 2 last week (surprise surprise!) and have finally come to the conclusion that my years of gadget yearning should have taught me long ago. It is all about the apps and experience. Hardware matters only so much as it doesn't impede the experience. That's it.

This is not a post reviewing the iPad 2's hardware. Everyone else has already written about it left and right. From the genius of the smart cover and svelte frame to the low-quality cameras. Instead, I want to share how my first tablet ¹ is changing how I do things.

It scrolls like butter.²

After unboxing the iPad 2 I spent a good deal of time scouring through the App Store for news apps. I wanted the iPad to replace a good chunk of my desktop browsing, reading and general Internet consumption. At the very least, it should help with my morning Google Reader skimming and coffee routine. It has.

News, magazine and various aggregator apps galore

I started installing apps I have heard about thousands of times over. The Daily, Flipboard, Pulse and FLUD. Then I went on to personal favorites Instapaper and Reeder before installing various big name publication apps like NY Times, Wall Street Journal and CNN. Finally, I ventured to magazine apps such as Wired and Popular Science ³.

Steve Jobs was not lying, it is an absolute pleasure to browse the web on this thing. Scrolling by hand just feels natural. The hidden iOS 4.3 multitasking gestures (upgrade to 4.3, attach iPad to Xcode 4, click enable for development) make it a breeze to flip through apps. I can be chatting with Chad in Campfire via the great Sparks app, then four finger drag left to go back to Hacker News HD, and then once more to revisit Reeder, where I have perfected my power user controls — sidebar scrolling with left thumb and main article scrolling with right thumb or index finger.

The Daily

The real treasure for me has been using iPad apps that use tablet affordances to their advantage and engineer interactive news and magazine experiences. While I have only been a tablet user for all of 5 days, no app does this better than Wired. I am not just talking about embedded videos, but pieces of content that ask me to tap things to reveal details, infographics that change with my touch and different scrolling patterns; change article by going horizontally, continue reading the same article by scrolling vertically. This is not your "digital magazine" (ugh, Zinio) experience from years past that are basically just PDF readers. Some might consider this too much work for reading but I categorize it as a utopian experience. What about you?

Zite - "the pandora for digital magazines"

I have my Kindle for no-frills book reading while the iPad 2 immerses me into a new world of interactive magazines and publications. With 10 hours of battery life, I'll be prepared for long flights and not have to resort to overpriced airport magazine purchases.

Other iPad apps I have come to enjoy include Terra (web browser with tabs - more convenient than Safari's tabbing style IMO), Yelp, Food Network's In The Kitchen, Epicurious, Photogene (better than Photoshop Express), PhotoSync, 1Password (a must for me), Pandora, Netflix and Aweditorium.

Console Replacement

The iPad 2 wields some pretty powerful graphics, making it quite the console alternative for the casual gamer. I don't have any consoles myself and sold my gaming PC last year so the closest I get to gaming has been Tiny Wings or Angry Birds on my iPhone. After playing with some impressive games like Dead Space and Real Racing 2 HD, I'm speechless. The iPad is a serious piece of work. The graphics look fantastic for the display and most such games only cost $5-10.. a far cry from the $50+ price tag on console and PC games.

Here's some footage of me playing Infinity Blade (with one hand while recording).

Apps Apps Apps..

Taking a step back, this all may sound like blatant fanboyism and new gadget lust. I approached the iPad 2 and tablets in general as some sort of limited capability, locked-down laptop lacking a true form of data input. After getting to know the full iPad experience, my views have flipped. High caliber iPad apps exist for most things I need to do and they make them all more of a joy than a task.

What I've described thus far is my usage of the iPad 2 as a consumption device rather than a creation device. How does it fare for emails and note taking? While typing on the display was funky at first, and still is to some degree, my typing speed is largely uninhibited. And if you really want to get work done, you can pair a bluetooth keyboard to it. I tried that out briefly but quickly went back to the on-screen keyboard.

In less than 5 days, the iPad 2 has become my primary media consumption device. I'm at my desk most of the day and undocking my 17-inch laptop to retreat to the couch is always a chore. Instead I just pick up the iPad and head to the couch or local coffee shop and tap away. Bliss.

Thoughts? If you have a tablet, how does it get used in your daily life?

Footnotes

¹ Prior to the iPad 2 I have only ever played with my cofounder's iPad for about 1 hour over the last year.

² Phrase coined by Steve Jobs when describing new features in iPhoto at MacWorld 2006.

³ Some of these require subscriptions, per issue purchases or at least account registrations. The Daily costs $1 for a week, Wired is $4 per issue, Popular Science is between $3-5 per issue or something like $15-20 per year.

Enjoy this post? Click through and leave a comment. It will make my day. iPad 2: Thoughts from a first time tablet user

Behind the Project: Pic A Fight

2011-03-09T13:40:38-08:00

Last week was interesting. Chad and I took a random idea — a "photo off" FaceMash-like site built on the Instagram real-time API — from whiteboard to successful launch. The premise is simple: Pic A Fight displays two pictures, pick the picture you like the most, new ones load in, repeat. Users can even battle a particular user's pictures instead of globally, making it a bit more personal and incentivizing folks to share their battle pages. Here's a look at how Pic A Fight quickly came to fruition.

Pic A Fight at the whiteboard stage.

Results displayed after a round.

Nerdy Bits

Pic A Fight was built on Ruby 1.9.2 with RVM and Rails 3 hosted on several Amazon EC2 micro instances (we spun up 5 during load) behind an Amazon elastic load balancer instance, using Amazon RDS (it's like a database instance) for our MySQL store and with images hosted via Instagram's Amazon S3.

The crux of it all - top ranked pictures

We used the following Ruby gems:

mysql2, a faster MySQL library for Ruby
Chad's fork of the instagram gem
mixpanel for helping track some basic metrics like skips, likes, follows.
compass for my Sass usage
jquery-rails for replacing Rails' Prototype default with jQuery UJS (with Google CDN-hosted jQuery 1.5.1)

We also used whos.amung.us for basic real-time stats to find out how many concurrent users we had and what pages they were on.

Browse a user's pictures then click a pic to see the full version and its battle stats.

Overall nothing too complex about the app; our models were pretty light. The beefiest part of the app is probably a tie between sys admin stuff related to spawning all the EC2 instances and the Elo rating system used for ranking pictures. The first version didn't even have sessions like some of the screenshots in this post do with the username displayed as logged in after OAuthing Instagram. After a user connected their Instagram account, we accessed their recent media feed and sucked down all the metadata related to 21 of their most recent images. Instagram already has three sizes of users images handy (612x612, 306x306, 150x150) so we didn't need to resize anything ourselves.

For Elo rating, Chad stored two versions: global Elo wins and losses, as well as local Elo (just between a user's own pictures, enabling separate ranking for user battles). Some later optimization included removing low ranked images to keep things interesting — people like voting on aesthetically pleasing images and that keeps them using the site. As for Instagram's real-time aspect (inspired by Pubsubhubub), each new image published by a user auth'd with Pic A Fight would be POSTed to special Pic A Fight callback URL and we would add the new picture to that user's pics archive/profile and include the new image in battle circulation.

And so on. After each battle, the results would be tossed into an object and sent client-side via JSON to display in a bar under the battle pics.

As for the design, I wanted to try out a subtle "page curling" effect with :before and :after pseudo-class selectors on the main content div. I started making the site with a blue near Instagram's blue, as seen in the blue top wrapper div (which has a subtle top and bottom border of lighter and darker blues to make it smooth).

From there I wanted a "super" header and decided to go with a desaturated complement of the aforementioned blue. Sass makes this easy with some desaturate(), complement() and lighten/darken() tinkering. I was going to use a grain background but I had already done that for the body background and didn't want to overdo it so I experimented with a large pixelated transparent background. I ended up making use of CSS3's background-size to adjust the size of the blocks on the fly. The header navigation is bounded by a mostly transparent box (rgba(0,0,0,0.075)) and a slightly darker 1px inner shadow. I'm also a big fan of using a lighter text-shadow than the background, but subtle. Subtle is key. Overdone shadows just look awful. Avoid text or box shadow blur if you can.

The main content box has a 1px inner border to draw contrast to the 3px drop shadow and subtle blue gradient. I wanted to play with a new Sass mixin I wrote for CSS3 border gradients but it appears they're not yet supported by webkit. Since this was a quick and dirty project, I didn't spend the time to setup Typekit but I love the hell out of Typekit in all of my other sites.

Launch

Wednesday evening we had the prototype pretty much done and set it up on a random security-through-obscurity subdomain while the main domain was still displaying a GoDaddy parked page. We sent this URL around to some fellow Y Combinator folks to get basic feedback.

Paul Graham chimed in and suggested some vital things: 1) putting the images closer together making them easier to visually compare (and reduce the distance users had to move to their mouse to click) and 2) urging that we get higher quality pictures on the site ASAP. During this initial phase we only had two or three Instagram accounts connected via OAuth.

Anyone can vote on pics without an account, but we can only add images from Instagram users that connect to Pic A Fight with OAuth. It was important to seed the site with good pictures before pointing lots of people at it. As for reducing voting friction, we added support for voting with cursor and number keys:

Psst! Pro tip: Vote with your keyboard! Use the left/right arrows or 1/2. Skip with down arrow or 3.

That was one of the best decisions made and made it very easy for folks to play many rounds without fatigue. One particular user completed over 1,400 rounds! Another small update we did before launch was add a skip button. I got some feedback (it was either Ethan, Kyle or Aaron.. forgot!) saying that people don't like making hard decisions/close calls and just want to skip ahead to more interesting rounds. It turns out the skip button gets used a good deal.

With those tweaks ready and deployed to the live site, I direct messaged 10 or so friends on Twitter Thursday night. In particular these were friends that I knew used Instagram. I asked them for basic feedback and if they wanted to connect their Instagram account to preload the site with more pictures and to not share the site until 10am the next day.

Pic A Fight on Launch Day

Friday morning arrived. Chad and I greeted each other on Campfire, I made my morning eggs and then we got ready for getting the word out. It started with some tweets, sharing on Facebook and Tumblr, a posting on Hacker News, which then got picked up by The Next Web and TechCrunch. By the end of the first day Pic A Fight had been the subject of over 1,000 tweets, had over 100,000 photo battles completed, 15,000 Instagram photos added, up to 500 concurrent users on 5 Amazon EC2 micro instances.

The headlines:

TechCrunch: Instagrams Go Head-To-Head With Pic A Fight
The Next Web: Instagram meets FaceMash in Pic A Fight
Hacker News: Pic A Fight: Instagram meets FaceMash
Including some Twitter love from our pals at Photojojo and Laughing Squid.

By the end of the weekend, Pic A Fight had 43,000 photos added from close to 1,000 Instagram users, 180,000 completed battles and some interesting stats on popular filter usage:

mysql> select igram_filter, count(igram_filter) as c from pics group by igram_filter order by c desc;
+--------------+------+
| igram_filter | c    |
+--------------+------+
| None         | 9539 |
| X-Pro II     | 7239 |
| Lomo-fi      | 5365 |
| Earlybird    | 5058 |
| Hefe         | 3000 |
| Nashville    | 2012 |
| Sutro        | 1730 |
| Walden       | 1639 |
| Toaster      | 1561 |
| Lord Kelvin  | 1316 |
| Apollo       | 1266 |
| Gotham       | 1251 |
| 1977         | 1231 |
| Inkwell      |  675 |
+--------------+------+
14 rows in set (1.34 sec)

Just a brief look at a side project of ours that got some unexpected attention. :) The end.

Thanks to Chad Etzel for reading drafts of this.

Enjoy this post? Click through and leave a comment. It will make my day. Behind the Project: Pic A Fight

WakeMate and Fitbit

2011-03-07T23:37:03-08:00

As a user of both WakeMate and Fitbit for the past few months, numerous people have asked me which they should buy. I don't think that's the right question. While both have a bit of feature overlap, they are entirely different beasts and I don't see them as competitors. I'll briefly go through each one and share my thoughts.

WakeMate left, Fitbit and included accessories right

WakeMate

The $60 WakeMate is an interesting bit of kit. It's a wristband you wear to sleep and pair (via Bluetooth) with your iPhone, Android or BlackBerry device running the WakeMate app. It uses actigraphy to track your sleep and wake you up during a 20 minute window you specify; aiming to reduce your morning grogginess by waking you up when you are nearest to a light phase of sleep.

I preordered my WakeMate in November 2009 and finally received it 13 months later, due to various widely publicized manufacturing delays. But this post isn't about their past, it's about the product. I hesitated writing this post until the WakeMate folks had some time to work out the kinks. The product has a snug-fitting wristband (to be worn on your non-dominant hand) that started getting fuzzy and losing WakeMate letters after two months. The battery is good for about two nights.

The iPhone app is actually pretty slick. I really enjoy the simple interface for setting the alarm — two sliders for hour and minutes. No extra menus to save the alarm like the iPhone's native clock app. The problem I had was getting the app to pair with the phone and stay paired. Well technically it is not the actual Bluetooth connection but some sort of state the band must have to properly begin logging data. If WakeMate didn't think this was good, it would prompt me to power cycle the wristband. That would then require waiting 20 seconds for the app to realize it was back on again. At worst, this would happen two or three times in a night. All I know is that I got frustrated with it.

For example, I would set my alarm, flip over to Angry Birds for some pig punishment, then flip back to the app (app must be in foreground when you go to sleep) before locking the phone. Maybe 30 seconds later WakeMate would start buzzing telling me I needed to power cycle the wristband to get it working properly. Of course, I later realized this was not the proper way to do things since WakeMate was already be logging and later calculating that into the "time to fall asleep" metric. Moving on.

Does it work? I can't say I have ever felt better in the mornings using WakeMate to wake me up, but I really like the sleep metrics it gives me. These are just two screenshots. WakeMate also provides movement data, breakdown of how long you were in each phase of sleep per night and so on.

You can also tag your nights when setting the alarm. For example, if you are really stressed out at work you might want to tag it work and then later on compare your stressed out sleep with other logged nights.

That being said, I never really learned anything about my sleep patterns from this data. It's nice to look at but there's no intelligence sprinkled on top. Every night WakeMate had logged still only said "your sleep quality was about average."

My New Year's Day sleep

However, after the novelty of the sleep metrics wore off I found myself not using WakeMate anymore. It was too much of a hassle to ensure the wristband was charged, put it on, turn it on, open the app, wait for it to recognize the wristband, set the alarm, lock the screen.. then realize I wanted to check something in another app before going to sleep, then flipping back to WakeMate when I was done, only to have it complain that I needed to power cycle the wristband and reset the alarm. Arrgh!

Verdict: 5.5 out of 10 Stammys.

Fitbit

The Fitbit on the other hand, is more about your daily activities than your nightly sleep health. At first glance, it's a glorified pedometer selling for $99. But you're not just buying the hardware, you're buying access to a comprehensive logging and tracking system, with additional analytics available for an extra $50 per year. Setup is pretty easy. Just plug in a USB charging station/dock, install some software and login for the first time to setup your profile and tell the system about your weight and height.

The Fitbit has a sexy VFD-esque display that reminds me of 90's VCRs.. I love it.

From then on you just clip the Fitbit onto your belt or anywhere else comfortable (it suggests women like wearing it on their bra) and go about your daily business. Throughout the day you can tap a button on the Fitbit to see how may steps you've taken so far, miles traveled and calories burned. You don't even need to use the website if that's all you want to know.

Fitbit's main dashboard (click for more)

It can do much, much more if you put the effort into it. For example, you can have it track weight, body fat percentage, measurements (neck, bicep, forearm, chest, waist, hips, thigh, calf- geez!), what you've eaten each day, how much water you've had to drink, activities to log, sleep, your mood, allergies from day to day, your daily resting/normal/exertive heart rates, blood pressure and last but not least your blood glucose levels. Phew.

If I had to nitpick one thing though, it's that Fitbit breaks up days strictly by, well, days. I'd rather have my days split up by my sedentary hours (AKA when I sleep). I'll be out past midnight and want to check out my miles for the day to see that it's already reset for the day. I'll often have to manually add my totals for days together to be able to know that I walked 10.51 miles from 9am Saturday to 4am Sunday. That's nice to know!

Unfortunately for the Fitbit folks, I'm the type of user that doesn't want to do extra work. The most I'll do is clip it onto my belt each day and check out how many miles I've gone for the day and just that data keeps me content with the Fitbit. I have logged into the website maybe 5 times in the last two months.

Verdict: 9.5 out of 10 Stammys.

Disclosure: I was provided a Fitbit by one of Fitbit's investors.

Thoughts? Do you own a WakeMate, Fitbit or any of their competitors?

Enjoy this post? Click through and leave a comment. It will make my day. WakeMate and Fitbit

Thoughts on OS X Lion SSD TRIM Support

2011-02-28T00:49:57-08:00

There has been a plethora of noise surrounding the upcoming version of OS X, Lion. So much so that I logged into my developer account, downloaded the 10.7 Lion developer preview and installed it on my other drive (a dying SSD I refuse to use for anything critical).

Site Note: In case you missed the announcement in my WordPress to Jekyll post, this blog now has a new section called Bits, where I publish shorter pieces more frequently. Bits have their own RSS feed and email list.

After 30 minutes of tinkering around with Lion I didn't really think too much of it aside from some very nice eye candy sprinkled throughout. I like how 10.7 makes no distinction between regular and server versions so you can install the server stuff if you wish. One neat feature of Lion is iPad file sharing (WebDAV). Depending on what emerges on Apple's March 2nd event (rumored iPad 2 launch), this could be one reason why Apple decided to bundle Lion Server into Lion; more consumers can have this seemingly powerful iPad-friendly feature.

Lion LaunchPad. iOS convergence much?

TRIM!

But I digress, this post is about SSDs. Lion will support SSD TRIM. As someone who has owned three SSDs since 2008 (back when 80GB cost $700), the first of which died after 9 months, the second of which started corrupting things at 15 months and a third that has considerable performance degradation, I can tell you that this is HUGE! Mac OS X has been lacking TRIM support for a while now. Backtracking a bit, what is TRIM?

a TRIM command allows an operating system to inform a solid-state drive (SSD) which blocks of data are no longer considered in use and can be wiped internally. [...]

the typical way in which operating systems handle operations like deletes and formats resulted in unanticipated progressive performance degradation of write operations on SSDs. TRIM enables the SSD to handle garbage collection overhead, that would otherwise significantly slow down future write operations to the involved blocks, in advance.

OCZ Vertex 3 SSD. I'm waiting for its big brother, the Vertex 3 Pro with a SandForce SF-2500 controller, to come out next month. 550 MB/s... unfortunately I won't see all the benefits in my SATA 3 Gb/s MBP.

In short, TRIM support is a great thing for SSD owners and will keep SSD performance degradation to a minimum and ensure maximum possible life. Now is an especially good time to give SSDs a chance if you haven't taken the plunge yet — very smart SSD controllers are emerging that are phenomenal at keeping performance degradation at bay. TRIM affords OS-level garbage collection and helps with wear leveling and fragmentation; otherwise SSDs must blindly assume that blocks written to at least once are still in use by the OS. TRIM tells the SSD what data should be ignored by GC and is in use by the filesystem. This combination also helps reduce write amplification (increased number of flash writes incurred from needing to erase blocks before writing new data), a factor in random write speeds.

If you want to get a new SSD before Lion ships, 1) wait until next month when all the "next gen" controller SSDs come out and 2) keep at least 20% of your storage space free so that wear leveling works better. Then update to Lion the day it comes out to get TRIM.

Lion System Info - Listing X25-M with unsupported TRIM

The big question is what SSDs Lion's TRIM command will support. Early reports state TRIM support only works for Apple-shipped SSDs and not third-party SSDs like my Intel X25-M. I would assume this TRIM support will expand to include all SSDs once Lion escapes later this summer.

Speed Demon

Here's what I'm wishing for:

Lion to launch with TRIM support for all SSDs
Lion to support TRIM in the software RAID controller
Apple to update the MacBook Pro line with SATA Rev 3 (6 Gb/s).

Why's that? If my three wishes come true, I will upgrade my 2 year old MBP to a newer one, rip out all drives, put in two Vertex 3 Pros (or whichever SSD is top dog then), assemble in RAID 0 as I've done prior and enjoy 1.1GB/s read and 1.0GB/s write bliss.

Hey, I can dream can't I?

Then again, I guess it would be possible to build a crazy external SSD RAID array, attach to a MacBook Pro via Thunderbolt and have a script (probably just something as easy as a regular Carbon Copy Cloner task) to synchronize changes back to a local drive whenever going mobile (cloning from SSD to SSD is crazy fast).

Alas

Until then, I will limp along with my dying, TRIM-less 80GB X25-M and use a 2.5-inch 500GB Seagate Momentus XT that I ordered as an internal backup/media/clone drive until SF-2500 SSDs and Lion TRIM come out. I'm not one to like spinning disks but the Momentus XT is actually pretty slick: 32MB cache, 4GB SLC NAND memory, 7200RPM disk. It's a solid-state hybrid. Expect a bit about it when it arrives and I install it.

Mission Control. Notice how a Space can be occupied by a full-screen app (Safari).

Thoughts on Lion, SSDs/TRIM?

Enjoy this post? Click through and leave a comment. It will make my day. Thoughts on OS X Lion SSD TRIM Support

Sony Alpha NEX-5: Going from DSLR to SLD

2011-02-21T14:31:30-08:00

If you've been following along since my move to San Francisco, I have been in this minimalism phase where I prefer owning less. I sold many gadgets and things I owned — from a 50-inch plasma HDTV to PlayStation 3 — except for my laptop of course. The last remaining piece was my Nikon D90 DSLR and its many accessories. I also had a Kodak Zi8 HD video camera for shooting video on the go. Several months ago I finally consolidated my video and camera needs by picking up a Sony Alpha NEX-5 after selling the D90 and Zi8.

Sony Alpha NEX-5 (with Tiffen UV filter) on a suction cup mount

I was initially going to publish a sizable review on the Sony NEX-5 camera but life happens and months passed without me saying a peep about it. I figure I should at least talk about it a bit after 6 months of ownership. First off, what is the NEX-5 all about? Is it just a high-end point-and-shoot? Not in the least.

Note: This is not a full review, just some brief thoughts. If you have any specific questions, please ask in a comment below.

I have found the NEX-5 to be a viable and small replacement for a full-blown DSLR. It's not a P&S camera, rather something called an EVIL or SLD: Electronic Viewfinder in Lens, Single Lens Display or Mirrorless Interchangeable Lens Camera depending on which acronym suits your fancy. The NEX-5 uses a 14.2MP APS-C format image sensor; the same size used in the Nikon D90. That's impressive for a camera of this diminutive size.

360 Modena on Great Hwy near Ocean Beach. CCCLX is also the name of an Xbox piracy group...

NEX-5 quality is good enough for me! Same picture at 100%

The Bad

There are a few downsides to the NEX-5. First, it carries an SLR-like price. The NEX-5 with the 18-55mm E-mount lens goes for $699 USD. Second, there are not many E-mount lenses available. Officially, just three from Sony: 18-55mm, 16mm "pancake" f/2.8 wide-angle and an ~$800 18-200mm. The NEX-5 does not have in-body image stabilization so you'll want to opt for lenses that have OSS. Third, attachments like flash (included and not too powerful), optical viewfinder (optional) and external microphone (optional) use a proprietary Sony interface. No chance of using your own high-quality external microphone for compact HD video recording.

NEX-5 recording closeup HD video with the display angled up

As a note, the 18-55mm lens is a tad wide-angle so you'll have to correct that in post-processing. Adobe Lightroom detects the NEX-5 lens in use and can apply a quick fix. This might not be the case if you are using a third-party adapter and lens.

The Good

Fortunately, the NEX-5 has a great deal going for it. Sony sells a mount adapter so you can use A-mount lenses, of which there are many available. It is only with this Sony adapter that you get auto-exposure and auto-focus control with A-mounts (you will need to upgrade to the latest firmware). You can also use many third-party adapters to use pretty much any lens you wish, but chances are you will have to run it in full manual mode.

NEX-5 Panorama

Next, the flip-up display is very, very handy! You can angle it up to be almost perpendicular or angle it down about 45 degrees; a pretty good range of motion. Third, I actually like the interface for controlling the camera settings. Easy to navigate with the jog wheel. More important though, the NEX-5 supports nifty features like built-in panorama, HDR and low-light modes. And of course, you can always opt to shoot in RAW. Fourth, this thing is tiny and supports SDHC memory cards.. that seems to be a first for Sony and their dreaded Memory Stick format.

Muni in NEX-5 HDR. Click for original.

Below is an example of NEX-5 audio and video quality. It was a clip I took of Zuck at Startup School. You'll notice that sometimes the camera has to hunt and peck to find optimal focus. Part of the time that is me forcing it to re-focus by tapping the shutter button. I could have used it in manual mode if I wanted too. It doesn't help that the lens was almost completed zoomed in here, limiting the adjustable focus range. Please keep in mind that I'm not a good cameraman, by far.

Verdict

Overall, I am rather happy with this camera. Good-enough-for-me quality photos sprinkled with nice value-adds like panorama mode made it an easy sell for me. I only own the NEX-5 and 18-55mm lens. I had considered buying the A-mount 16mm lens but it has bad reviews (soft edges IIRC). My first option would be the Sony LA-EA1 adapter paired with a Sony SAM SAL50F18 50mm f/1.8 (75mm-equivalent focal length). I give the Sony Alpha NEX-5 8.5 out of 10 Stammys. I just wish some things weren't as proprietary: E-mount and the accessory mount. Good luck finding a compatible strong bounce flash.

If you're looking for a full review of this camera be sure to check out DPreview but keep in mind Sony has since added functionality through several firmware updates. If you want to see some more example shots taken with the NEX-5, this active flickr group is the best place to visit.

Thoughts? What camera gear suits your needs?

Enjoy this post? Click through and leave a comment. It will make my day. Sony Alpha NEX-5: Going from DSLR to SLD

Review: Henge Docks docking station for Apple MacBooks

2011-02-13T00:00:00-08:00

Despite tons of press surrounding Henge Docks, I only recently heard about it while reading about Matt Biddulph's setup. My curiosity piqued as I got up to speed on what Henge Docks was all about; not just a glorified vertical stand for Apple notebooks, oh no. It's the first real docking station solution for Macs and it's brilliant.

Sherlock approves.

At the office and at my desk at home I plug into a dock from Henge Docks with a 27" Cinema Display. I've never been able to get my head around the two screens of an open laptop and a big monitor; I prefer one large screen.

Matt's reasoning behind his single screen setup is exactly why I love the Henge Docks station. If I'm going to have two screens, they need to be the same size and PPI, otherwise looking left to a 27-inch and looking right to a 17-inch propped up off the desk is too jarring. I simply use this Apple display as my only display, which leaves one annoyance: unplugging a squid-like mess of cables when migrating to ~~another room~~ (kidding, I live in a tiny SF studio..) a coffee shop.

Thirty minutes after first hearing about Henge Docks (this demo video did it for me) I put my order in for my MacBook Pro version, an older generation 17-inch "Rev A" (the ports are slightly different from the newer version). The 17-inch version costs $75, 15-inch is $70 and the 13-inch Henge Docks docking station goes for $60. That pricing isn't bad considering vertical stands for MacBooks that don't have any docking magic go for around $50. Unfortunately, Henge Docks does not offer a MacBook Air version due to the fact that the Air has ports on both sides so you'd still need to manually connect cables, defeating the purpose entirely.

Setup + How It Works

The actual docking station is constructed of sturdy plastic with rubber feet on the base to avoid slipping and desk scuffs. It provides a close enough fit for cables and ports to line up perfectly, but not quite tight enough to be considered snug or provide undue burden on notebook insertion and removal.

Once unboxed you will find a myriad of extension cables: Ethernet (one end being clipless), Firewire 800, 2 audio and several USB. In addition there is a little bag with a hex wrench, a set of small headless hex screws and three small bracket contraptions meant for keeping your MagSafe adapter in place.

Setup seemed easy enough: pick the cables you want to use, flip the docking station over, slide in the extension cables (make sure you have them oriented correctly! I'm looking at you USB) to the correct height, then fasten with screws. Before inserting the MagSafe connector, you need to place it in the proper rectangular clip of the three included. Current Henge Docks models support all MagSafe versions.

Do not over-tighten.

That was the easy part. Getting the cables to hide under the station turned out to be a bit of a chore. In particular, the USB cables are too long for my needs with the Apple LED display cable. I just need a tiny 3-inch USB extension but instead I have to cram the included long USB cable under the space.

Too many cables, not enough space.

My setup involved two USB cables (one for my iPhone dock and one for the display), MagSafe and Mini DisplayPort. I can't imagine what this would look like if I had to hide a DVI to Mini DisplayPort adapter under there as well as Ethernet, Firewire 800 and audio. Though to be fair, I was hiding all excess cable under there instead of letting it exit.

Finally! cables all neatly wired and tucked out of the way.

After setup was complete I took it for a test drive and slowly slid in my MacBook Pro. The recommended way to use the docking station is to hold the base with one hand and then slide the laptop in with the other. I can forsee the heavy 17-inch MacBook Pro slipping from my death grip during this process so it made me a bit nervous at first, but I digress.

Good luck using an ExpressCard device like a 4G modem with this..

Upon first use nothing happened. It wasn't turning on. I took the MacBook Pro out, flipped over the docking station and made sure everything was at the proper height and tightened correctly. The culprit was the MagSafe connector. It was sitting a tad too low and not making a solid connection. I fixed that and it worked great from then on. I've had over 50 "docking cycles" so far without issue. Here's a quick video:

Edit: This video also had me removing the laptop but YouTube has an issue with clips merged in QuickTime.. sigh

Concerns

"What about heat?" That's the question I always get when telling or showing people my Henge Docks setup. First off, I've been using my laptop in clamshell mode with an external display for years now, without recourse. I will say that prior to Henge Docks, I used to crack it open a bit so that air could get sucked in through the keyboard/speaker grill whenever I compiled something or watched video. Having the laptop situated vertically does help dissipate more heat than usual, so it seems like a fair compromise. If anything, I will manually crank up the fans with smcFanControl if I get worried about temperatures but this has not been an issue in my month of ownership.

My other nitpick comes with audio and Ethernet. Take for example a user with an Apple display with integrated USB speakers. Sometimes you may want to listen via the display's speakers and other times you may want to plugin your headphones. Unfortunately, you can't switch between these two options with the Henge Docks docking station. If you insert the audio extension cable to have a headphone jack handy, it will instantly override any audio setting and assume you are using headphones. I have tried software solutions to force it to use the USB speakers but nothing worked. I ended with the conclusion that it is a hardware issue and the headphone jack on my MacBook Pro is a DPST NC (double pole single throw normally closed) switch such that anytime something is plugged in (regardless if it's an actual audio device or just an extension cable like in my situation) it will not allow you to use any other device. So that's one rather large annoyance for me. Any ideas?

In regards to the Ethernet cable, Henge Docks should include a coupler so I can easily hook it up to my existing Ethernet cable. The included one is far too short to reach my router. For anyone that uses a NAS with any regularity, having a gigabit Ethernet connection feels much better than even the best simultaneous dual-N Wi-Fi connection. Not a big deal though; Cat6 couplers are cheap.

As for those that hate resizing and moving windows that move about as you switch to and from displays of varying resolutions, there's an app for that: Stay.

Stay ensures that your windows are always where you want them to be, even as you connect and disconnect displays.

Verdict

Overall I'm rather pleased with this docking station solution. It is sturdy, sleek and has great build quality. The Henge Docks docking station gets 9 out of 10 Stammys. Snag a Henge Docks docking station for your MacBook Pro setup.

Thoughts? Do you currently have a laptop + display setup? Is this something you might like using? I'd like to hear what's on your mind.

Enjoy this post? Click through and leave a comment. It will make my day. Review: Henge Docks docking station for Apple MacBooks

Review: Etymotic hf3 Earphones

2011-01-31T00:00:00-08:00

A few months ago I was in the market for some high quality earbuds, just ahead of several holiday flights across the country. While I was still content with my Beats Studio by Dr. Dre headphones and the noise cancellation performed well on flights, they were large enough to become cumbersome during frequent travel. After a bit of poking around, I purchased a set of Etymotic hf3 earphones (retail $180).

hf3 earphones + Nexus One + Pandora. I wish the jack wasn't angled like that. 90 degree angle preferred.

Many of you probably haven't heard of Etymotic before. They only manufacture high-end audio gear but have definitely made a name for themselves in the consumer audio space in the last few years. Etymotic is known for some of their rather eccentric services for audiophiles. For example, most of their products support something called "Custom Fit" — you can get a mold made of your ear canal impressions from an audiologist, send the mold to Etymotic and they will send you custom eartips for your headphones (for a $100 fee).

hf3 retail packaging

On that note, I'll start talking about the hf3s I picked up. They're unlike any set of earbuds I have picked up. They're not actually earbuds or what you think of when you see typical consumer-oriented in-ear earbuds. They get nestled very deep in your ear for an airtight and noise canceling fit. They are completely different beasts from the $50 Sony earbuds I have been using for the last few years.

hf3 earphones with their included triple flange tips

They come with a wide variety of tips and I've become fond of the larger white triple flange tips they come with. Etymotic recommends replacing them every several months so I also ordered an extra set of tips directly from Etymotic for $14. The hf3s also have replaceable filters in the driver housing and come with a special tool for that purpose. The drivers themselves are single full-range balanced armature transducers. In layman's terms, they're much better than moving coil drivers found in cheaper earphones.

The cable has an interesting texture due to its kevlar reinforcement and is 4 feet long, which I find to be the perfect length. I would have preferred flat cables though to allay cord tangling. I've only seen flat cables on some Monster / Dr. Dre earbuds though.

Fit

It took me a few days to get used to the hf3 earphones. The fit is deeper than I have ever experienced with any earphones. If the fit is not airtight the sound quality is ruined. Even after using these for a few months, they're not the kind of earphones you can just push in and go on your way. I always need to fiddle with them for a few seconds to get it just right. This ends up being a rather large annoyance when you're out ordering coffee for example and have to take an earbud out for a while, then fiddle for a while to get it back in just right. Sometimes you'll end up pressuring your ear since the fit is air-tight, so you'll have to move it to pull it out and try again.

Etymotic actually has fairly thorough instructions for how to put the eartips in:

For best results, moisten the white soft plastic eartips before insertion. Using your right hand, grasp the eartip with the red plug. With your left hand, pull up and back on your right ear to straighten your ear canal. Carefully insert the right earphone so that it seals deeply and comfortably in your ear. Repeat procedure for the left ear, using the earphone with the blue plug. Remove earphones slowly with a twisting motion to gradually break the seal.

Intense.

Performance

But... when these things are in perfectly, it's pure bliss. First off, these are not your typical bass-emphasizing earbuds from Best Buy aimed at rap-loving youth. Hf3 response is relatively flat and well-balanced; like reference earphones. Bass isn't overemphasized, nor is treble. Everything sounds like it all should. Noise isolation is rated at 35 dB - 42 dB and I would say that is accurate. The white 3-flange tips I prefer block out closer to 35 dB while the black foam tips (that have an odd fit IMO) are closer to 41 dB average external noise isolation. Once properly in, I can no longer hear the ~~air conditioning~~ heater (San Francisco..) or any of the ambient buzz/hum associated with flying. The only downside is that noise travels very easily through the cable. If you're walking or jogging and the cable isn't secured with the included shirt clip, you will hear the cable moving around more than your music.

Overall, the hf3 noise isolation is surreal. Random office noise and chatter gets eliminated. I don't dare wear these when walking back home late at night because that just makes it all too easy for a mugger to sneak up behind me undetected.

built-in iPod/iPhone control is lightweight and doesn't weigh down the cable

The hf3s also include a tiny, inline iPhone control module. Adjust volume, mute/unmute and answer phone calls. The controls also have an integrated microphone that performs only okay. You get the best results by holding the mic closer to you so person on the end of the line can hear you at a decent volume. Don't expect a Jawbone-like experience here. I rarely talk on the phone, much less with a headset so this was of minimal concern to me.

Taking off the earphones after wearing them for a few hours feels a bit odd; as if the eartips forced your ear canal to get larger. I have tried all the included eartips. To get a proper fit as recommended, it will be fairly snug. The question is if that is too uncomfortable for you in the long run. Pro tip: dampen the eartips before putting them on.

Verdict: Amazing noise-isolating earphones at the expense of a tighter-than-you're-used-to fit. Perfect for coffee shop coworking. 8.5 out of 10 Stammys. Cable length is perfect but the 45 degree angled connector is really annoying.

Checkout the Etymotic hf3 earphones on Amazon.

Thoughts? Do you use any such high-fidelity in-ear earphones on a regular basis?

How To: WordPress to Jekyll

2011-01-25T00:00:00-08:00

Over the winter vacation I relaxed and spent time away from thinking about the startup fundraising process. I had a latent interest in Jekyll ever since Tom Preston-Werner (Cofounder of GitHub) created, released and wrote about it in Blogging Like a Hacker. I finally got the chance to sit down and fully grok Jekyll. I decided to migrate my site from WordPress to Jekyll. I designed a new layout, imported my database and created some custom features to get it all to my liking. If you're reading this in an RSS reader, you will want to click through to see the new site.

Yup, still love my Kindle.

(Disclaimer: At over 8,000 words this is the longest post I have written (runner up). If you have any questions or if anything in here is presented in a confusing manner, or is just plain wrong, please don't hesitate to leave a comment or send me an email. I will clean up my Jekyll blog repo soon and make it public.)

Why the big move?

Like any other hacker I just wanted to learn a new tool.

I have been running this blog on WordPress for about 5.5 years. I first ran into WordPress when I was running a MediaWiki-powered website about computer modding and was curious about other CMSs. I fell in love with WordPress and set it up on my 1.42GHz G4 Mac Mini (which I had overclocked to a whopping 1.5GHz by unsoldering two SMT resistors). My first few months of blogging were surreal — several of my posts made it on digg and Lifehacker in 2005. I thought that was the coolest thing ever. I continued writing.

I soon received enough traffic to kill the 2.5-inch hard drive in my Mac Mini, which had been hosting this blog in my Georgia Tech dorm. It was around this time that I began modifying my site and picking up basic web design and development skills. I moved my blog over to Media Temple and have been happy there since. I am now on a developer-aimed VPS called the ProDev (ve) — 4GB of RAM on a dual quad-core 2.26GHz Xeon with lucid-flavored Ubuntu.

I am not leaving WordPress for any frustrations or problems. WordPress is a very capable and extensible CMS. Most anything you want done with WordPress is a search away. If you think your WP-powered site is slow, there are a number of fixes for the speed freaks, including generating static files and working with a CDN. The WordPress community has been amazingly helpful. I went to WordCamps, sponsored one and helped out other WP users through tutorials and forums. A big thank you to folks like Matt Mullenweg, Michael Heilemann and Mark Jaquith.

Content is king

I wanted to start from scratch and completely rebuild this blog. This time around I was going to focus on content. Over the last few years I have experimented with monetizing this site, as you may have noticed. I tried various affiliate programs, CPA ads, AdSense, Amazon Associates, RSS ads and private sales. It was starting to work. I wasn't the next John Chow but I was making $3,000 a month during this blog's financial peak around mid-2009.

Then it went down to a few hundred a month over the next year and a half. There are a few reasons for that:

I began posting less and less due to increasing startup obligations. That's to be expected. This blog is a great side-project and hobby but not a full-time job.
This blog had become known for in-depth, long-form content and as such I didn't blog unless I knew I had enough substance to make for an interesting article. Things I would have written about, but to a lesser extent, would go unpublished entirely.
I made a few SEO mistakes that knocked down my PR, and thus traffic, down. The first was using an early version of bbPress to run forums here. That version did not rel="nofollow" links to websites on user profile pages. Tens of thousands of spammers signed up and those profile pages linked to all sorts of sites. Google did not like that. My second mistake was running a translation plugin that generated every article in many languages. It eventually got to the point where Russian-translated posts would rank higher than the English posts and it became impossible for readers to find articles. I couldn't even find my own posts on Google, even when I knew the exact title. Third, I had some mysterious redirection issue that plagued my site for too long. Pages would randomly redirect. I couldn't reproduce it, Media Temple couldn't reproduce it. But I got tons of reports about it from my readers. I thought I had fixed it but it still occurred once every 50 or so page loads. Google ended up indexing articles with different URLs. It was a mess.
Google noted that my site loaded 88% slower than other sites. It was partially all the ads my site was running and partially all the images I put in my long posts.

Traffic also dwindled during this period. It was time to reboot. Whatever I was going to do needed to change all this and get me blogging more, one way or another. I fixed that with bits. More on that later.

What is Jekyll?

Oops, guess I didn't explain exactly what it is yet. Here's what the repository says:

Jekyll is a simple, blog aware, static site generator. It takes a template directory (representing the raw form of a website), runs it through Textile or Markdown and Liquid converters, and spits out a complete, static website suitable for serving with Apache or your favorite web server.

Jekyll is not really a CMS. There is no admin panel to edit, write and manage posts. But there is vim, emacs, TextMate, gEdit, Redcar, Notepad++ or your text editor of choice. In a nutshell: write your posts in markdown or textile (or in my case just keep using HTML like I've always been using in my posts and keep it future-proof), run jekyll and it will create a site directory filed with beautiful static, flat HTML files. You don't need even a database on your server...

sudo apt-get remove mysql-server-core-5.1

I freaking love having my entire site in static files. It's a nerd feeling that's hard to explain. As a Mac user, I just need to activate Spotlight with two keystrokes and I can instantly find any old blog post.

You'll want to tell Spotlight to ignore the _site directory. Seductive wallpaper by Silk.

Or while I'm in my editor of choice I can activate PeepOpen to find and open any post. Or I can run Ack in Project in TextMate to find any string inside of my posts. Or maybe I was curious and wanted to list the top 5 posts by word count?

~/jekyll-blog/_posts(master) $ wc -w * | sort | tail -n6
    4182 2010-03-05-review-23andme-dna-testing-for-health-disease-ancestry.markdown
    4189 2010-02-17-live-blogging-startup-riot-2010.markdown
    4777 2009-06-04-review-2009-lincoln-mks-with-microsoft-sync.markdown
    4888 2010-01-14-how-toreview-surf-securely-with-vyprvpn.markdown
    6393 2009-11-27-review-2011-ford-fiesta-and-the-fiesta-movement.markdown
  576265 total

Flat files are just cool.

The Plan

After I was sure that I wanted to embark on this journey I had to think about how this would all work and what sacrifices I would have to make. I would need to implement some custom stuff to get some features and pages I was used to with WordPress. It was also important that I kept the exact same URL structure.

Here was the initial list of tasks that had to be completed/built:

Import WordPress database and retain tags
Move all images to Amazon CloudFront and rewrite posts to use new image URL
Make HTML files for regular pages and 404/500
Make a search page using Google Custom Search
Be able to parse 's used in WP posts and show post up to that tag for previews.
Create entire new layout and use Typekit because it makes the wannabe-designer in me happy.
Figure out layouts and includes for various parts of the site
Tags and individual tag pages + fix Jekyll issue with not supporting tags with spaces
Archives listed by month/year and individual archive pages to keep URLs like /2011/01
Sitemap that lists posts, archive pages and tag pages
Create a feed template and ensure it correctly redirects to FeedBurner
Create include in feed so I can put RSS ads at some point
Compass for Sass
List related posts
Do lots of .htaccess work to make sure URLs are as close to the old structure as possible and use link rel="canonical" where appropriate.
Ditch Mint for web stats and go database-free with something like Chartbeat or Reinvigorate (I also have Google Analytics)
Migrate all comments to Disqus
Get next/previous post links working
Create new section of the site for short-form content, create separate archives page and feed
Be able to put custom meta descriptions from content in YAML front matter in posts if wanted.
Write a rakefile to ease some routine tasks like generation and deploy
miscellany...

A lot of work was ahead.

Getting started with Jekyll

The first thing I did was create a new GitHub repository for the blog. Then I had to begin creating the file and directory structure Jekyll expects. Here's what my Jekyll directory looks like:

~ $ tree ~/jekyll-blog/ -L 2
/Users/Stammy/jekyll-blog/
├── 404.html
├── 500.html
├── README.markdown
├── Rakefile
├── _bits
│   └── # some of my bit-style posts, not a standard jekyll feature
├── _config.yml
├── _drafts
│   └── # ideas for next blog posts/bits
├── _includes
│   ├── bit_listing.html
│   ├── comments.html
│   ├── cta.html
│   ├── header.html
│   ├── load_last_js.html
│   ├── nav.html
│   ├── post_footer.html
│   ├── post_listing.html
│   └── rss_footer.html
├── _layouts
│   ├── bit.html
│   ├── default.html
│   ├── home.html
│   ├── page.html
│   └── post.html
├── _lib
│   └── wordpress_import.rb
├── _posts
│   └── # lots of posts
├── _site
│   └── # generated site goes here. don't manually put anything here
├── about.html
├── apple-touch-icon.png
├── archives.html
├── bits-feed.xml
├── bits.html
├── config.rb
├── contact.html
├── favicon.ico
├── feed
│   └── index.xml
├── index.html
├── robots.txt
├── sass
│   └── screen.sass
├── search.html
├── sitemap.xml
└── stuff-i-use.html
11 directories, 2318 files

Rather than creating all these files from scratch, a good first step is to fork someone else's Jekyll blog and modify as you see fit. My Jekyll repository isn't public yet, I still have a lot of cleaning up to do but Tom Preston-Werner's Jekyll repo is popular for forking. Just be sure to remove all of his posts and images before you publish your new site.

The directory tree listed above is not what you put in your web server's public html directory. Instead, you point the web server to the _site directory. That's where the entire generated site and static HTML files are stored. Posts written in markdown, textile or regular HTML go in _posts while _layouts and _includes are reserved for HTML/Liquid markup layouts for various content types (page, post, homepage, etc) and any necessary HTML fragments/partials, respectively. As you can imagine, the _drafts folder is where you can stash posts you don't want to be generated and published until you're ready to move them to the posts folder.

Jekyll pays close attention to files that contain YAML Front Matter and Liquid template tags. A YAML front matter block at the beginning of any file can contain custom page variables as well as predefined ones such as: layout, title, date, tags and categories.

---
layout: post
title: "How To: WordPress to Jekyll"
tags:
- wordpress
- jekyll
- ruby
- github
description: "This is a custom variable that I access via Liquid..."
---

Liquid on the other hand is a markup language created by the Shopify folks that makes for easy layout creation. Liquid tags are either bound by curly braces and modulos, or double curly braces. The latter is for outputting content while the former is for conditionals and setting up loops. Here is part of my index.html file:

You can see it has a bit of YAML front matter, then it includes a file (my yellow "call to action" bar) that is stored in the _includes directory, then creates a few post loops and outputs content. I have two loops here because I want the first post displayed differently (that's what the post_listing.html include is for) and then the rest displayed in a simple list.

Here's what the post_listing.html include looks like:

While in the site.posts loop, this include has access to the template data for each post. There are some sections where variables are piped through filters. Several are included with Jekyll, such as date_to_string.

You can also specify no layout with "nil" and still access template data. For example, here's how I created my atom feed.

That's the basic gist of Jekyll layouts and templating. My particular setup is a bit more complex with 5 layouts and 9 includes, whereas Tom's blog contains just two layouts and no includes. Learn from his setup and expand as you see fit! I'm purposely being a bit brief here as getting the layout setup is pretty straightforward.

_config.yml

Jekyll's config file is a good place to start while building out your site. The default configuration and various configuration settings are explained on the Jekyll wiki. The default settings should be satisfactory, but you'll want to set markdown to rdiscount (explained later) and adjust the permalink style.

You may opt to put in various custom variables like I did with description and root_desc that I use in various parts of my layouts. Also, base_url is handy. When you're developing locally you can keep it to forward slash so that when the site is generated it links to other local posts, but when you're ready to deploy live adjust the url to your domain. There is no definitive argument for why you need to include the full domain versus relative, SEOs go both ways on it, but I simply prefer including the entire url.

multiviews: true
#only works with https://github.com/stammy/jekyll, explained below

source:      .
destination: ./_site
includes:    ./_includes

pygments:    true
markdown:    rdiscount
permalink:   /:title.html

base_url: http://paulstamatiou.com
#base_url: /
description: "A blog covering Tech News, Reviews, Guides and Startups from developer and startup guy Paul Stamatiou."
root_desc: "PaulStamatiou.com - Tech News, Reviews and Guides"

rdiscount:
  extensions: []
  
exclude: ['Rakefile', 'README.markdown', 'config.rb']

Local Dev Environment

By now you'll want to actually install Jekyll itself. If you don't plan on doing any Jekyll hacking and will just be using it as is, you can just use the ruby gem:

sudo gem install jekyll

If think you'll be doing some Jekyll hacking of your own, or using someone else's fork (there are tons of great Jekyll forks to be found), it's best to fork, clone and add the path to your bash profile. For example, cloning and running my Jekyll fork:

~ $ mkdir -p ~/Projects/jekyll-stammy
~ $ git clone git@github.com:stammy/jekyll.git ~/Projects/jekyll-stammy
Cloning into /Users/Stammy/Projects/jekyll-stammy...
remote: Counting objects: 3341, done.
remote: Compressing objects: 100% (1727/1727), done.
remote: Total 3341 (delta 2053), reused 2625 (delta 1482)
Receiving objects: 100% (3341/3341), 379.48 KiB, done.
Resolving deltas: 100% (2053/2053), done.

Now you just have to add that freshly-cloned Jekyll to your path.

vim ~/.bash_profile

Add this line near the end, editing the path and directory name for your fork accordingly:

# Jekyll (use dev version, not gem)
export PATH=/Users/Stammy/Projects/jekyll-stammy/bin:$PATH

Then run source ~/.bash_profile. Or you could use caret quick substitution: ^vim^source. It edits the last entered command but replaces "vim" with "source" and runs it. Handy tip for your bash repertoire.

RDiscount

Discount is a fast C implementation of John Gruber's Markdown markup language while the RDiscount extension makes this Discount Markdown processor available via a Ruby C Extension library. If you write posts in Markdown, you will need RDiscount to process the markup and convert the post to HTML. I don't usually write in Markdown, but like that it does basic things like add <p>'s for separate lines. There are other options like Maruku instead of RDiscount but I would not recommend it. Maraku was slow for me and didn't know how to render some of my post markup, resulting in errors like "REXML could not parse this XML/HTML". Stick with RDiscount and you should be fine:

sudo gem install rdiscount

If you use RDiscount you'll have to use Pygments for code syntax highlighting (what I use in this post). There are other options as well, such as CodeRay, which appears to only work with kramdown (a pure-Ruby Markdown converter that is slower than RDiscount, though CodeRay is faster than Pygments). Or you can just use GitHub Gist embeds for all your code needs.

I went with RDiscount + Pygments was my choice and I've been happy with it so far. You'll need the easy_install (a package manager like RubyGems but for Python) to install Pygments if you do not have it yet.

sudo easy_install Pygments

jekyll.dev

The next thing I did was setup Jekyll's _site directory with Apache on my MacBook Pro for easy local development. Jekyll comes with its own web server that's great for local testing (jekyll --server) but I prefer setting up a vhost.

You probably know the drill with adding directories and virtual hosts to Apache but here's a refresher. Open up the Apache conf file in your editor of choice. This can be found at /etc/apache2/httpd.conf in OS X. Add the sections below, editing the name of your jekyll directory and ServerName as necessary. The VirtualHost section usually goes at the very end of httpd.conf. If you want to be in good form you can create another .conf file altogether instead of editing the main Apache conf, but I digress.

<Directory "/Library/WebServer/Documents/jekyll-blog/_site">
    Options Indexes FollowSymLinks MultiViews
    AllowOverride All
    Order allow,deny
    Allow from all
</Directory>
<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host2.example.com
    DocumentRoot "/Library/WebServer/Documents/jekyll-blog/_site"
    ServerName jekyll.dev
    ErrorLog "/private/var/log/apache2/jekyll.dev-error_log"
    CustomLog "/private/var/log/apache2/jekyll.dev-access_log" combined
</VirtualHost>

The jekyll-blog directory doesn't actually live in /Library/WebServer/Documents/ on my setup; I prefer to have jekyll-blog in my home directory and just symlink it into the WebServer Documents folder.

/Library/WebServer/Documents $ ln -s ~/jekyll-blog/ jekyll-blog
/Library/WebServer/Documents $ ls -l
lrwxr-xr-x   1 Stammy  admin   26 Nov 19 13:44 jekyll-blog -> /Users/Stammy/jekyll-blog/

Then add the line below to the end of your /etc/hosts file.

127.0.0.1 jekyll.dev

Restart Apache and try heading to http://jekyll.dev in your browser. You should get some generic Apache page if you don't have any files in the _site directory yet. When you generate the site you can start browsing the complete site locally.

Compass for Sass

I'm a huge Sass advocate and have been using it to generate my CSS for the last two years. Compass, a popular "Sass-based CSS Meta-Framework", was one of the first things I setup when designing the new site. For those new to Sass, here's how the official site describes it:

Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

sudo gem install compass

Then create config.rb and place it in the site root.

http_path = "/"
css_dir = "_site/sass"
sass_dir = "sass"
output_style = :compressed

Run compass compile or compass watch to generate the CSS. Later in this post I share a rake task for site generation that compiles the Sass too.

Importing WordPress Posts

Now that you know how Jekyll processes files and generates the site, it's time to import your database. A set of migration scripts already comes with Jekyll and currently supports CSV, Drupal, Marley, Mephisto, MovableType, TextPattern, Typo, WordPress and WordPress.com. I ended up slightly modifying another user's custom WordPress migration script that added the ability to add tags to posts. My tweak dealt with rewriting image URLs in my posts:

# Process the content and replace URLs pointing to wp-content/uploads/
# with my CloudFront CNAME'd URL turbo.paulstamatiou.com/uploads/
def self.transformUrls(domain,content)
    baseurl = "%s/wp-content/uploads/" % domain
    return content.gsub(baseurl,"turbo.paulstamatiou.com/uploads/")
end

Here is the complete WordPress importer script I used. It's easiest to copy your database to whichever computer you'll be running the script from and importing it into MySQL then providing the script with those database credentials. After running the script, I had a new _posts folder filled with all of my posts in markdown files with the correct YAML front matter including tags and title. The date was not placed in the YAML but is present in the name of the file (ex: 2011-01-20-my-post-slug.markdown), which is used when generating the site. However, if you post many times per day, the date in the slug is not specific enough and you might run into issues where Jekyll doesn't know which order to display posts published on the same day. To fix that you'll want to edit the importer to include a timestamp in the YAML for each post. I believe Harper Reed's migration script does just that.

CloudFront for Images

As for how I was going to move 460MB of images from my server to Amazon S3 for use with CloudFront, I used a nifty command line tool on my server called s3cmd. But it can be done easily via drag and drop with something like Cyberduck or Transmit. Just remember to change the ACL such that all images are publicly viewable. If you opt for the s3cmd route, after installing via brew or apt-get run s3cmd --configure to get started.

Structure of my S3 bucket deployed as a CF distribution. For CF distribution details, type s3cmd cfinfo, find the distribution ID, then try s3cmd cfinfo cf://[ID]

After the initial big upload, I wrote a task in my rakefile to make it easy to upload new images for a post. When I write a post I usually have a temporary folder on my desktop called new_post where I put all the images I want to use in the new post. I often link images to larger versions of the images and wanted this task to detect similar file names (example_img.png and example_img_1200.png, with the latter being a 1200px wide version of the former) and generate the proper HTML for an image linked to a larger version.

Example of the types of filenames in the new_post folder:

~/Desktop/new_post $ ls
new_screenshot.png
new_screenshot_1100.png
single_image.png
superlarge.png
superlarge_1900.png
test_screenshot_regular.png
test_screenshot_regular_1200.png
yet_another_single_image.png

Now I just run rake cloudfront to upload the images with the proper ACL, clean up the filename, insert alt/title tags, detect different versions of images and provide me with the code for easy copying in TextMate. I know this is tied to my particular blogging workflow and may not apply to everyone but I wanted to share as it saves me lots of time.

desc 'upload imgs to cloudfront'
task :cloudfront do
  puts 'uploading images in ~/Desktop/new_post/ to cf'
  post_dir = "/Users/Stammy/Desktop/new_post/"
  month = Time.new.strftime("%m")
  year = Time.new.strftime("%Y")
  sh "s3cmd put --acl-public --guess-mime-type #{post_dir}* s3://pstam-cloud/uploads/#{year}/#{month}/"
  
  # create URLs for handy copying
  # detect large version of same image and link it to smaller version
  # or just provide img src to orphan if no larger version
  # works b/c Dir.glob returns files alpha by extension
  # yes I know THIS IS DIRTY, I'll refactor later...
  puts "Uploaded. Here are your CF URLs \n\n"
  Dir.chdir(post_dir)
  img_urls = ''
  images = Dir.glob("*.{png,gif,jpg}")
  images.each_with_index do |image, index|
    cur = image
    desc = cur.gsub('pstam_','').gsub('_',' ')[0...-4].capitalize
    if !images[index+1].nil?
      nxt = images[index+1]
      if cur.gsub(/_1[0-9]00/,'')[0...-4] == nxt.gsub(/_1[0-9]00/,'')[0...-4]
        if /_1[0-9]00/.match(image)
          large = cur
          small = nxt
        elsif /_1[0-9]00/.match(nxt)
          large = nxt
          small = cur
        end
        img_urls += <<-HTML
<div class="center"><a href="http://turbo.paulstamatiou.com/uploads/#{year}/#{month}/#{large}" title="#{desc}"><img src="http://turbo.paulstamatiou.com/uploads/#{year}/#{month}/#{small}" alt="#{desc}"/></a></div>\n
HTML
      elsif !(/_1[0-9]00/.match(image))
        img_urls += <<-HTML
<div class="center"><img src="http://turbo.paulstamatiou.com/uploads/#{year}/#{month}/#{cur}" alt="#{desc}"/></div>\n
HTML
      end
    else
      # if last
      img_urls += <<-HTML
<div class="center"><img src="http://turbo.paulstamatiou.com/uploads/#{year}/#{month}/#{cur}" alt="#{desc}"/></div>\n
HTML
    end
  end
  puts img_urls
  filename = (0...8).map{65.+(rand(25)).chr}.join + "_imgurls_tmp.txt"
  path = File.join("/tmp", filename)
  File.open(path, 'w') do |file|
    file.puts img_urls
  end
  system "open -a textmate #{path}"
end

(View this CloudFront rake task as a gist instead)

Disqus for Comments

Jekyll is all about static files so I can't do anything like serve my own commenting system. I decided to migrate my ~25,000 WordPress comments to the popular Disqus commenting system. I was worried this would be a long and painful process but was actually surprised at how easy it was. I simply installed their WordPress plugin and told it to migrate my comments to Disqus. The process did take a while — about 10 hours — until I noticed all the comments for each posts were properly loading. Comments that were threaded in WordPress were properly threaded in Disqus. Sweet!

As long as I kept the post URLs the same, there would be no problem adding Disqus to the Jekyll site. I created a comments.html include of the Disqus embed code that I put in my post layout.

That's all there was to it! There is one slight drawback, or plus depending on how you view things, to this approach. Disqus loads all comments after page load, via JS. This means that comments will not be indexed by Google. That's good if you write with SEO prowess and don't want user comments mucking up your perfect mix of keywords. That's bad if you're like me and think that user comments add tremendous value and want others to be able to find posts while searching for something mentioned in a comment.

Website Analytics

For the last few years I ran both Google Analytics and Mint. Google Analytics tends to be my "backup" analytics logging tool. I don't really check it too often but I like knowing that it's there keeping track of everything. I used Mint to simply look at more recent traffic patterns, popular referrers for the day and so on. I would check it more often than Google Analytics; up to maybe 5 times on a new post day.

With this site migration I decided it was time to lay Mint and it's MySQL database to rest. I didn't want to run a mysqld process anymore. I decided to sign up for both Chartbeat and Reinvigorate until I decided which one I liked more. Both cost roughly $10 per month at my tier. I have been using both for about a month. I'm not in love with either of them at the moment. Chartbeat has a neat dashboard with real-time data but makes it hard to get basic information like unique visitors and pageviews per day. I know that's not their target metric but it would be nice to add. It's like selling me a car that tells me current MPG but not average MPG.

Reinvigorate on the other hand does not give off quite the real-time vibe as Chartbeat does (and for some reason Reinvigorate reports roughly half as many active visitors as Chartbeat does; guess they have different definitions for active visitor). Reinvigorate has loads of data, much like Google Analytics, and you can get access to hourly, daily, monthly traffic, heatmaps, visitor details, top referrers, keywords and more, but it's spread out over some 20 pages and will take you an afternoon of clicking to find what you're looking for.

Maybe I'll just stick to Google Analytics and invest the money saved in a nice low expense ratio index fund. Or a haircut.

Features vs Generation Time

In the end, even after I built out complete archives pages and tag pages, I ended up ditching them entirely. Why? For simplicity and in interest of keeping site generation time minimal. With all these features and extra pages to generate, it took Jekyll 50 minutes to generate my site. That was 50 minutes between me and publishing a new post, changing something in the layout, et cetera. Running through 1,100+ posts and hundreds more archive and tag pages processing markdown, pygments and liquid is no easy feat. Jekyll is not made for large sites.

I ended up taking that restriction and using it for the better. Did I really need tags and individual archive pages? I asked a bunch of people on Twitter whether they used tags for site navigation. It came back as a resounding no. Most people considered them clutter. Search is the killer app now, no need for tags in my opinion. I yanked them all out and 301 redirected tag and individual archive pages to my single archives page.

Site generation time went down to around 6 minutes on my 2.8GHz Core 2 Duo after I took them out.

~/jekyll-blog(master) $ rake generate
(in /Users/Stammy/jekyll-blog)
time jekyll
Configuration from /Users/Stammy/jekyll-blog/_config.yml
Building site: . -> ./_site
Successfully generated site: . -> ./_site
      395.46 real       249.75 user        86.82 sys
compass compile
   exists _site/sass
  compile sass/screen.sass
   create _site/sass/screen.css

Generation by this task in my Rakefile:

desc 'nuke, build and compass'
task :generate do
  sh 'rm -rf _site'
  jekyll
end

def jekyll
  # time to give me generation times
  # I'm just curious about how long it takes
  sh 'time jekyll'
  # compass already configured via config.rb in root
  sh 'compass compile'
end

Before this run-in with archives and tags I got related posts ("Latent Semantic Indexing") working after compiling and installing GSL with rb-gsl. It took a while to generate the list of related posts when I only had a handful of posts in my local Jekyll environment. When I put all my posts in and tried to generate them it took longer than 10 hours. I don't know exactly how long because I tried it twice and killed it after 10 hours — that wasn't going to fly and I decided to just list recent posts instead. I had considered spinning up a large EC2 instance to generate it but doing that each time I had a new post was going to be a pricey nuisance.

For those with fewer posts interested in implementing tag pages, I made a rake task for it as shown in this gist. Getting individual archive pages working required adding some of the archive support built by Mike West into my Jekyll fork. While I didn't end up using the full archive page support, it did allow me to organize the post listing in my single archives page by month and year (mentioned below).

Custom Features

A few features I did end up implementing and keeping include a second post type called "bit", MultiViews support, a filter to recognize WordPress "more" tags and collated posts.

MultiViews

There are two main ways of getting Jekyll to create permalinks. In the _config.yml you can either set permalink to something ending in .html or not. If the permalink structure ends in .html, Jekyll will end up generating posts as html files and dump them directly in _site and Apache will serve them as yoursite.com/your-post-slug.html. Jekyll will also link to posts on the site with the .html extension (that's what putting post.url in a posts loop will output).

If you set the permalink structure without any html extension, Jekyll will generate a ton of index.html files stored within their own directory named the slug of the post. Apache will serve it without any extensions as well, but will by nature keep a trailing slash since it is loading the index.html file inside of the directory. For example: _site/some-long-post-slug/index.html => yoursite.com/some-long-post-slug/

Alright Paul, so where's the issue?

I don't want a bunch of long name directories with index.html files. It makes it hard to search for posts locally if everything comes up as index.html. Just having post html files and less directories is much easier to deal with IMO.
I don't want permalinks to end in .html
I also don't want a trailing slash on permalinks (which is what happens with the index.html route)
I want Jekyll to generate post links without the .html extension even though I told it in the config to use .html

MultiViews is an Apache feature aimed at content negotation — serving up files for resources that don't exist. So even though /long-post-slug doesn't exist, Apache will end up serving /long-post-slug.html.

The effect of MultiViews is as follows: if the server receives a request for /some/dir/foo, if /some/dir has MultiViews enabled, and /some/dir/foo does not exist, then the server reads the directory looking for files named foo.*, and effectively fakes up a type map which names all those files, assigning them the same media types and content-encodings it would have if the client had asked for one of them by name.

Apache docs

I already set up MultiViews in the Apache configuration (you can also set it in .htaccess) so the only pieces left are 1) coaxing Jekyll into processing post urls without the html extension and then 2) having Apache redirect post-slug.html to the extension-free post-slug (otherwise both versions would load and Google would index both, detect duplicate content and spread PageRank amongst both.. not very canonical).

Fortunately both were a quick fix away. I ran across Henrik's Jekyll fork where he introduced a MultiViews setting in _config.yml and then rewrote the url method to remove the extension if multiviews is enabled and placed the url logic in another method. I applied the same method in an updated Jekyll (v0.10.0). Just set multiviews: true in the config file.

And finally, some a few .htaccess lines to take care of the duplicate urls:

# External redirect any /post-slug.html to /post-slug
RewriteCond %{THE_REQUEST} ^[A-Z]+\s([^\s]+)\.html\s
RewriteRule .* %1 [R=301,L]

content filter

This allows me to return just the part of the post before the more tag in my templates. For example, I wanted to use this on tag pages, archive pages and on new posts on the homepage. Alternatively, if you don't use or don't want to use the more tag in your posts, you can get the same effect with something like {{ post.content | truncatewords: 75 | textilize }}.

I added this to filters.rb in my Jekyll fork:

# Returns all content before the first-encountered WP-style MORE tag.
# Allows authors to mark the fold with an <!--more--> in their drafts.
# ex: Liquid error: private method `split' called for nil:NilClass
def before_fold(input)
  input.split("<!--more-->").first
end

Bit post type

I wanted a post type similar to an aside but wanted it to remain entirely separate from regular posts. Bits would not share tags, be listed in the main RSS feed, et cetera. Something like this could have been done by adding another field to the YAML front matter in each bit and checking for the presence or exclusion of that value while looping through posts, or by simply making a bits folder and manually adding posts there, but then I wouldn't be able to loop through them for a bits archive, feed or the sitemap.

For ease of use, cleaner logic and faster generation times (less stuff for Liquid to do) I decided make a Bit class. It's essentially a direct copy of the Post class with appropriate variable changes/additions made throughout the Jekyll.

View bit.rb on GitHub.

Collated posts

And last but not least, I wanted slightly better archive pages. I didn't just want a list of every post. I wanted them broken up into sections for year and month.

This snippet, among some related archive code, was added to the render method in site.rb:

self.posts.reverse.each do |post|
  y, m, d = post.date.year, post.date.month, post.date.day
  unless self.collated.key? y
    self.collated[ y ] = {}
  end
  unless self.collated[y].key? m
    self.collated[ y ][ m ] = {}
  end
  unless self.collated[ y ][ m ].key? d
    self.collated[ y ][ m ][ d ] = []
  end
  self.collated[ y ][ m ][ d ] += [ post ]
end

That allowed me to use this crazy markup to create the archives page:

View the complete archives file in this gist.

Performance

By nature, Jekyll will be fast — as fast as your nginx, Apache or other web server setup can dish out tiny static html files. By offloading all image resources to a CDN, I reduced the amount of HTTP requests the server has to reply to for a single page load. I could have also done the same thing with my Sass-compiled CSS but I change it so often that I prefer having it served from my server rather than dealing with CDN cache invalidation and versioning issues. I ended up keeping Apache as my web server; I don't get the kind of traffic to warrant an nginx setup. My box can handle a 50,000 pageview day no problem and that's the most I've seen from any sort of Hacker News/Reddit/&c fiasco.

I decided to install the much-hyped Apache 2.2 module by Google called mod_pagespeed:

# confirm this Ubuntu server is x86_64
~ $ uname -a
Linux paulstamatiou.com [...] x86_64 GNU/Linux  
# yup, good to go with 64-bit mod_pagespeed
~ $ wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-beta_current_amd64.deb
2011-01-24 19:43:02 (1.83 MB/s) - `mod-pagespeed-beta_current_amd64.deb' saved [764256/764256]
~ $ sudo dpkg -i mod-pagespeed-*.deb
~ $ sudo apt-get -f install

Pagespeed should be installed and you'll see some new files in the /etc/apache2/mods-enabled/ directory. Now let's take the red pill and see what kind of configuration options are available. Open up pagespeed.conf and uncomment/enter these lines:

ModPagespeed on
AddOutputFilterByType MOD_PAGESPEED_OUTPUT_FILTER text/html
AddOutputFilterByType MOD_PAGESPEED_OUTPUT_FILTER text/css
ModPagespeedRewriteLevel CoreFilters
ModPagespeedEnableFilters collapse_whitespace,elide_attributes

Read about more mod_pagespeed filters and settings in the docs; this is only scratching the surface. In particular, take a look the rewrite_images filter as well as ModPagespeedDomain if you do any CDN stuff. Pagespeed can also provide basic statistics if you enable the following:

ModPagespeedEnableFilters add_instrumentation

<Location /mod_pagespeed_beacon>
      SetHandler mod_pagespeed_beacon
</Location>

<Location /mod_pagespeed_statistics>
   Order allow,deny
   Allow from localhost
   # Add your IP below and uncomment to be able to view remotely
   # Allow from XXX.XXX.XXX.XXX
   SetHandler mod_pagespeed_statistics
</Location>

After you're done fine-tuning pagespeed settings save the conf file and then restart Apache:

sudo /etc/init.d/apache2 restart

Fire up Chrome browser and load up your site. Right-click anywhere on the site, click Inspect Element, click the Network tab then refresh the site to fill up the network pane. Click on the name of the actual HTML for the page. Make sure it's not a 304 (that's generally good but if it's coming from cache you can't see the mod_pagespeed headers to confirm if properly installed). Load a page you haven't visited before, clear your cache or try enabling private mode. Once you're able to load a page with a 200 you should see X-Mod-Pagespeed at the end of the Headers pane:

If you click on the Content tab to view the source of any page you might also see some differences depending on your pagespeed configuration. I saw three markup changes: 1) a timer script at the beginning and end of the page for statistics, 2) collapsed whitespace and 3) an adjusted and processed CSS include.

I'm just touching the tip of the iceberg with server optimizations. If you care about performance you'd end up tinkering with nginx in the first place. I might end up doing that later on but I'm content with Apache. That and I'm not looking forward to rewriting my .htaccess rules into nginx.conf.

htop showing how happy my server is with the new setup

While I was at it I decided to upgrade my box from Ubuntu 9.04 to 10.04 LTS. I did the typical sudo apt-get update, upgrade and then do-release-upgrade, but received this error:

Can not run the upgrade. This usually is caused by a system were /tmp is mounted noexec. Please remount without noexec and run the upgrade again.

It turns out this error is pretty common. It's safe to keep /tmp as noexec but it has the downside of restricting certain release upgrades like this. My first thought was to simply remount /tmp as exec as the nice error suggested:

~ $ sudo mount -o remount,exec /tmp

warning: can't open /lib/init/fstab: No such file or directory
mount: can't find /tmp in /etc/fstab or /etc/mtab

Hrm, no go. Lets try chroot:

sudo mkdir -p /root/chroot /root/tmp
sudo mount --bind / /root/chroot
sudo mount --bind /root/tmp /root/chroot/tmp
sudo chroot /root/chroot

I ran do-release-upgrade again and it worked. A few minutes later:

~ $ cat /etc/lsb-release 
DISTRIB_ID=Ubuntu
DISTRIB_RELEASE=10.04
DISTRIB_CODENAME=lucid
DISTRIB_DESCRIPTION="Ubuntu 10.04.1 LTS"

Writing

Alright, your Jekyll setup is pretty much all complete but you want to write a post about your new setup before deploying the new site. Now what? Simply create a new file in the format of "year-month-day-post-slug.markdown" in your _posts directory. Add the necessary YAML front matter to the top of the post and then generate the site.

I wrote a rake task to save a few seconds each time I have to create a new post. You will need to install the chronic gem first though. It creates the new file in the proper directory and then opens the file in TextMate.

# ignore the "bit" stuff.. only relevant to my custom jekyll fork

desc 'create new post or bit. args: type (post, bit), title, future (# of days)'
# rake new type=(bit|post) future=0 title="New post title goes here" slug="slug-override-title"
task :new do
  require 'rubygems'
  require 'chronic'
  
  type = ENV["type"] || "bit"
  title = ENV["title"] || "New Title"
  future = ENV["future"] || 0
  slug = ENV["slug"].gsub(' ','-').downcase || title.gsub(' ','-').downcase

  if type == "bit"
    TARGET_DIR = "_bits"
  elsif future.to_i < 3
    TARGET_DIR = "_posts"
  else
    TARGET_DIR = "_drafts"
  end

  if future.to_i.zero?
    filename = "#{Time.new.strftime('%Y-%m-%d')}-#{slug}.markdown"
  else
    stamp = Chronic.parse("in #{future} days").strftime('%Y-%m-%d')
    filename = "#{stamp}-#{slug}.markdown"
  end
  path = File.join(TARGET_DIR, filename)
  post = <<-HTML
--- 
layout: TYPE
title: "TITLE"
date: DATE
---

HTML
  post.gsub!('TITLE', title).gsub!('DATE', Time.new.to_s).gsub!('TYPE', type)
  File.open(path, 'w') do |file|
    file.puts post
  end
  puts "new #{type} generated in #{path}"
  system "open -a textmate #{path}"
end

Pygments

What about getting code syntax highlighting working with pygments? Simply place your code in this curly brace liquid highlight block markup. To find out what lexers pygments supports, visit (and bookmark) this page. Here's a handy list of common language short names for use in pygments (they're guessable for the most part): python, perl, clojure, ruby, c, cpp, java, scala, csharp, common-lisp, erlang, haskell, console, mysql, cfm, django, css+php, css+ruby, erb, jsp, vim, actionscript3, css, haml, html, js, php, sass.

This is an image because using liquid markup to show liquid markup is a PITA. There's a tricky solution though.

The last thing you'll need to do is get the CSS for the syntax highlighting and paste it in your stylesheet. Since I'm using Sass, I'll go ahead and convert it to Sass right off the bat. Pygments supports various styles you can use.

pygmentize -f html -S default > syntax.css && sass-convert syntax.css syntax.sass && mate syntax.sass

Paste the contents of syntax.sass into your primary sass file. Or you can ignore that line and just use the GitHub syntax style that you've come to know and love.

Deploying

There are a number of ways to deploy Jekyll to your live site. Use whichever method you prefer to move a bunch of html files to your web server's html directory. I went with a simple rsync solution added to my rakefile. This method requires that I generate the site locally and not on the server. I prefer this route for a few reasons:

No need to keep my server up-to-date on all the gems and related software I use
Easy to do a simple check locally and see if everything is all good, Sass correctly compiled, et cetera before deploy
rsync just works

desc 'deploy to pstam via rsync'
task :deploy do
  # uploads ALL files b/c I often do site-wide changes and prefer overwriting all
  puts 'DEPLOYING TO PAULSTAMATIOU.COM'
  # remove --rsh piece if not using 22
  sh "rsync -rtzh --progress --delete _site/ --rsh='ssh -pCUSTOM_PORT' user@domain.com:/var/www/domain.com/html/"
  puts 'done!'
end

I might end up writing another rake task to archive the previous deploy and give me the ability to rollback between dated deploys within seconds. Maybe even use anemone post-generation to crawl the site locally and check for dead links (which has happened before with dirty htaccess rules).

Thoughts

I'll be the first to say that this kind of blogging setup is most definitely not for everyone. Using Jekyll is pretty much just for developers and those that feel comfortable tinkering around with git, rsync, a ruby project and writing some basic Liquid markup for templates. In a lot of ways this can be seen as a step back from typical dynamic blogging systems. Having to generate static html pages? That might bring back horrors of early Perl-based Movable Type installs.

Running Jekyll for your publishing needs is akin to running vim for everything you do. It doesn't seem efficient to those not familiar but it's small enough (about 2000 lines of code excluding tests and blank lines, according to cloc) and easy enough for hackers to edit and streamline into their workflow as they see fit. Once you get it to your liking, that's it! You never have to update it, worry about security issues (aside from keeping your server up-to-date of course) or anything.

I'm extremely happy with my Jekyll setup. If I were to change anything, I might get around to hacking on the ability for Jekyll to do incremental generation. In the cases where I don't make site-wide layout changes and am only editing a single post, Jekyll won't end up needlessly generating the entire site. Oh wait, someone already did that. Time to fork.

What do you think? What is your currently blogging setup? Would something like Jekyll ever tickle your blogging fancy or is it all just too much work to setup?

Enjoy this post? Click through and leave a comment. It will make my day. How To: WordPress to Jekyll

Startup Fundraising is a Time Sink

2010-12-21T00:00:00-08:00

"Which one of you is going to be doing the fundraising?" queried a calm and collected Tom Robinson while in a loud venue one Saturday evening at a Startup School after-party. Tom had good reason to be relaxed that evening. His startup, 280 North, had been acquired by Motorola for $20 Million a few months prior. I had just shared that my co-founder Chad and I were just getting started with fundraising for Notifo. "Oh, we both are," I stuttered before gulping my drink. "Good luck!," he replied. I had no idea what the next months had in store.

Note: This post is intentionally vague. Perhaps one day, after an arbitrarily long epoch, I can divulge much more interesting details. For those not familiar with Notifo, it is a mobile notifications platform that makes it easy for developers to send push notifications without having to develop their own native mobile apps. It went through Y Combinator's Winter 2010 batch, officially launched in March and had a revamp in September.

Check out a great discussion of this post on Hacker News

I had always heard that fundraising was a pain in the ass and can often come close to killing a startup. If you haven't read the essay linked below by Paul Graham, it's definitely worth a read. Everything in that essay rings true.

But although for most startups raising money will be the lesser evil, it's still a pretty big evil—so big that it can easily kill you. Not merely in the obvious sense that if you fail to raise money you might have to shut the company down, but because the process of raising money itself can kill you.

Paul Graham

For Notifo, it was the latter — the fundraising process itself. We weren't desperate — we had money thanks our utter frugality and a friends and family round we completed early in the summer. No office, few expenses¹, and no salary². Notifo had made significant strides in traction³ since launch and we felt that by getting a jump on the fundraising process we would be able to hire and grow quickly. The push space is still in its infancy and there has yet to be a clear and defined 800lb gorilla. There are several known companies working with push, each combatting different aspects of the same business. It was still a race, or so we thought.

Getting Started

We were set on fundraising. But how much? I've since learned that saying how much you want to raise is a bit of a game. You could say you're looking for $300K but then really want $500K and bank on being oversubscribed, et cetera. Stating you want a larger amount doesn't help you out when prospective investors tell you to keep them in the loop and let them know when you've already raised some portion of your round. That's why PG suggests not answering the "How much are you trying to raise?" question and being flexible. The amount we wanted to raise changed throughout our fundraising process. Initially we did not want to raise too much — just increase our runway and stay lean — but then some investors convinced us that now is the time to raise a bunch and move fast.

Team Notifo in-between Skype calls with prospective investors.

We updated our executive summary and made the first draft of a deck in Keynote. We got our story and angle down. We were raising to focus on problem X to cater to market segment Y with business model Z. We were the I for J. Nothing could stop us. We were going to win. Raising money would just get us there faster.

From a talk by Naval Ravikant - Before you raise money

Notifo is a very technical startup at the outset — a mobile notifications platform. What does that even mean? How were we going to distill this into a few key points that all types of investors were going to understand? We latched onto a few things:

1) developing mobile apps is a PITA and not feasible for the market we were targeting
2) SMS is expensive
3) our push implementation provides a richer experience than SMS

The next step was finding relevant investors that were willing to listen to us. The structure of our round was going to be done with convertible notes⁴, similar to our small F&F round in the summer. On the grand scheme of things, this aspect of fundraising was not the hardest. It just required a lot of repetition and emailing. A lot of emailing. We had a few amazing resources to help us out: Y Combinator, dedicated angels that came in during our F&F round, and AngelList.

The Grind

We got a large number of investor intros through trusted connections. We did our research on each investor before reaching out and chatting with them; sometimes even reaching out to their portfolio companies to get a sense of how the investor worked. While there is something to be said about having investors that prefer a hands-off approach, we have also learned that having investors that have the time to take a call or have lunch with you whenever you need advice is extremely beneficial. One of our angels, Gabor Cselle, took us out to dinner and noticed we weren't as chipper as we usually were, thanks in no small part to this fundraising mayhem. He insisted that we all go gokarting so Chad and I could clear our minds. We went and had a blast. Another one of our angels, Harj Taggar, has always been extremely easy to get a hold of. It could be the oddest hour but Chad and I had a burning question to get an outside opinion on so we'd just click the call button on Skype and he would magically appear with the wisdom we were looking for.

It's great to have a strong connection with our investors. They know exactly what is going on with the company. As such, we were looking for angels with some mixture of experience in product development, platform creation, mobile and running a technical startup. AngelList proved immensely helpful in this regard. It lets entrepreneurs easily see what kind of background investors have and their past investments. We chatted with Naval, he approved our application, helped us clean it up and then sent it out.

We got past the first few emails with about 40 investors and had at least one initial call, Skype or meeting with them. Several didn't reply to our first forms of contact, and we probably could have gotten in touch with them had we been more pushy⁵. There were several investors we internally dubbed the "untouchables" — investors you hear about everywhere and it doesn't matter how many amazing connections you have but you just can't get a hold of them. We got somewhere around 5 different intros to a few of those, from everyone ranging to some of their portfolio companies to other angels. Nothing. In hindsight, perhaps we should have realized we were spinning our wheels going after those big names.

This period of our fundraising process was the most lengthy and depressing. We just couldn't get much work done. We had several calls/meetings per day and the time left in-between was not suitable for getting wired in and coding. We were too distressed thinking about the fundraising.

In the middle of fundraising we got some great advice from people like Hiten Shah and Tim Ferriss. Our lunch with Hiten was inspiring and the guy is a straight-up riot. Hiten, an Internet friend I first met along with Neil Patel while interning in California in 2006, is the founder of KISSmetrics. He taught us things like how to deal with investors that don't understand your product or space:

This is a new technology and not everyone gets it

and to look at companies X, Y, and Z in the space.

He told us how to explain trends we were seeing to investors: Mobile web/HTML5 apps are the next big thing. Not everyone is going to have their own mobile native apps; many will have HTML5 apps and need to integrate with services like Notifo to access functionality of the host OS.

He also said how to reply to investors that wanted to see more traction:

That's okay. We're looking for early-stage investors that are ready now.

And then how to deal with many customers that keep asking for certain small features/updates:

Don't fix it until you get one passionate user complaining about it/emailing you an essay.

With each new pitch, we heard the same comments from investors. We had prepared for these and provided the best answers we could each time. Questions usually sprung up around our distribution model, our thoughts about the market and thoughts on getting around the barrier to entry (users must install the app). Some investors asked for things like our viral coefficient and our pro forma; we knew those were not the kinds of investors we were looking for. Other investors saw this as platform play with certain network effects (the more services signed up, the more benefit to users etc) and asked us if they could speak to our biz dev team — to which we informed them it was just the two of us.

Describing a technical platform only gets you half of the way there when trying to explain it to investors. You have to have simple, concrete use cases; ones that are currently out there as well as use cases that your platform could support. Speaking of technology, a rare few investors were highly technical and asked us about our infrastructure. That's when our faces lit up and we could get nerdy about how everything was built in-house and how much we love redis, which lets us do cool things like because it's stupid fast.

The hardest part is not hearing back. They would say they would get in touch next week, but nothing ever came. With a few notable exceptions of firms that got back to us quickly, many angels had to be reminded or emailed once a week. Sometimes they would ask for additional info about our convertible note specifics and would return with a commitment, or not and ask us to keep them in the loop with regards to the round's status. Other times we had a Skype video chat with someone overseas on a Saturday morning and they would say they're in and ask for our bank account number the next day. And then there were cases where people were interested but did not like that we were doing a convertible note round. Investors can be interested and just not get back to you in a timely fashion; they're busy people and it's your job to (politely) stay on top of them. Talking with other startups it seemed to be the norm that they would try to get a hold of them once a week if they had not responded by the time they said they would.

What about the investors that passed? Well this is the most surprising thing — they turned out to be exceedingly helpful. Any connections or intros we wanted? Done. Help with press connections? Done. We had one situation where we were having a first call with a new investor and unbeknownst to us he had already heard great things about us from an investor that passed. Every investor we have been in contact with has genuinely wanted to help us out and that's what I love about Silicon Valley and entrepreneurship in general. For example, we talked with a startup that pitched Andreessen Horowitz. They said that even though did not invest, it was the most pleasant experience they have ever had with an investor. Andreessen Horowitz focused on who the founders were, as people, for the first hour or two of their meeting.

Big thanks to everyone we chatted with during our fundraising process.

One important thing I learned: do everything you can to get a meeting with a partner, not an analyst.

It was just utterly unpredictable. Not to mention that fundraising before the holidays was probably not the best time to start.

Months In

Before we started fundraising I began using Mercury App, a web app pings me everyday to record my feelings on a 1 to 5 scale. It's a simple decision making tool that we found because they integrated with Notifo for their beta users. As you can see, my mood was all over the place ⁶.

Mercury App

We had been at it for close to two months in when we took a step back and looked at the big picture. While we had raised more money, we realized it was coming close to killing the company it was trying to boost. We felt like crap as a result of not having actually built anything in a very long time. Did we really want to hire at this exact moment?

Everything you hear about startups is about raising millions, hiring tons of developers and growing fast. Are those the only conditions under which fast growth can occur? Can two insanely motivated developers and a caffeine IV⁷ get the job done?

Chad and I booked office hours at Y Combinator with Paul Graham one afternoon. We told him where we were with Notifo and the fundraising process. Paul quickly picked up on our distressed mannerisms, pointing out at one point that Chad and I had the same expression and stance throughout the meeting. Chad then took the opportunity to tell the story of a time when I picked him up to drive down to South Bay for an investor meeting and we happened to be wearing the exact same thing.

We talked financials a bit and PG suggested that we just cut off the fundraising round where it stood. PG offered two routes: optimizing for users or optimizing for revenue. We chose the latter.

It so happens our meeting was on the day Y Combinator announced Paul Buchheit and Harj Taggar coming on as partners

Ultimately, Notifo is in the product/market fit phase of its growth. We have a great product and passionate user-base⁸ but we're still tinkering with the exact offering. It's best to stay small, nimble and agile at this point. We'll be keeping a keen eye on various Notifo metrics to see what we need to optimize and reaching out to current users and seeing how they use Notifo and what else they want out of it.

Optimize for Happiness

After this hectic fundraising process, Chad and I retreated to our office fort (my apartment) where we took out some expo markers and made a list of things that would make us happier in the day-to-day of the startup. Here is the complete, unedited list we made a month ago, not knowing it would ever be published:

Coffee Maker
Food supplies/drinks/snacks/booze
Hackdays (never schedule meetings Monday or Friday)
Notifo Apparel/Swag
Meetups (get out in the community, partner with other startups and host developer drinkups)
Livable Salaries
Laptop (for Chad.. he has a deathly-slow first gen MBP)
Coworking (work out of the apartment from time to time)
Company Fieldtrips? (to clear our minds from time to time)
Healthcare (I have a $5k deductible plan, and had to pay a clinic $150+ just to get a bad cough looked at)

What now?

Looking back on this process, I can only draw similarities between Rand Fishkin's (Co-Founder SEOmoz) post about his VC fundraising process:

Here’s my advice to other entrepreneurs, particularly in these irrationally exuberant times: Don’t start pitching until you’ve been pitched.
...
The time I spent trying to raise a B round was the most wasteful 3+ months I’ve had at my job. Product was ignored; vision went unfulfilled; opportunity went unexecuted. Don’t make the same mistake – generate buzz with your success, your traction and press (PR is invaluable in the VC process – another big misstep we made). And let the investors come to you.

Chad and I are going to relax over the holidays and reset our brains. I'm going to the East Coast to play with my baby nephew (who was born at the same time as the iPhone 4 keynote!) and Chad is going on a cruise. When we return, we'll get back to hacking away on a new roadmap filled with long hours of productive coding, optimizing for revenue and keeping our users happy. We have more money in the bank than when we started and enough runway to make a difference.

While fundraising is an evil many startup entrepreneurs don't look forward to, I would say the hardest part of a startup is how you deal with advice. We have received conflicting advice on many aspects and challenges of our company. Knowing how to filter all the advice and not being taken over by happy ears is an important skill. I recently read the TechStars book, "Do More Faster", on my Kindle and thoroughly enjoyed it. There's a chapter that focuses on conflicting advice. There is also a section on the book that covers how we thought it was a race and that competitors we didn't even know existed were going to one day crush us and that's why we wanted to raise a bucket of money and hire quickly. And to get another perspective on things I am currently reading Start Small, Stay Small. While we're talking books here I also just finished reading I Will Teach You To Be Rich, which reminded me to buy some life-cycle funds when I can afford the minimum price.

Thoughts? Where are you with your startup?

Questions? Shoot me an email.

A big thanks to Paul Graham, Gabor Cselle, Harj Taggar, Jeff Miller and friends/family we've bugged many times for help during this process.

Footnotes

¹ Can't skimp on the coffee machine.

² We are now paying ourselves a modest stipend. Rent isn't cheap and my decrease in blogging here due to work has limited my monthly revenue which used to more than pay for rent.

³ Our primary metrics are notifications sent per day and number of services signed up

⁴ Relevant read: The New Funding Landscape by Paul Graham

⁵ Reminds me of "How I Screwed Up My Google Acquisition"

⁶ Most of my positive ones were because I was happy with a really awesome sandwich I made. "It's all in the sauce: How you can make cheap meat taste good" is the title of my cooking for startups book...

⁷ As of late I have been following along in Tim Ferriss's 4 Hour Body book and taking workout supplements like N.O.-Xplode that have high levels of caffeine, so that is my tea/coffee replacement for the time being.

⁸ One such user recently emailed us a drawing of a new feature he'd like to see

Related to Keep Calm & Carry On: Great post by Alexis Ohanian

Enjoy this post? Click through and leave a comment. It will make my day. Startup Fundraising is a Time Sink

Review: Startup Approved Comfy Sacks Lounger

2010-11-26T00:00:00-08:00

I'm no stranger to large, fluffy and unusual beanbag-esque furniture. During freshman year of college, some hallmates had a massive Lovesac that one guy actually used as a bed somehow. A few years later I picked up a SumoSac, which I rated at 6 out of 10 Stammys as I questioned the value of a $399 beanbag (the puppy disagreed). But I had to get rid of that when I moved to San Francisco. I think I found a worthy replacement now — the 6 foot Lounger by a company called Comfy Sacks. Essentially, it is identical to the last sacs/loungers I have experienced but comes in at a more reasonable $276.

The 6 foot micro suede Comfy Sacks Lounger

Startup Approved™

I live in a small studio that doubles as Notifo's San Francisco headquarters. I didn't really have room for a couch that could only serve one purpose and not be readily moved around, so I decided to check out the Comfy Sacks Lounger. One of their main marketing points is that more and more tech companies have their loungers in their headquarters, including Apple, Amazon, Zappos and Zazzle. After living with a lounger around for the last few months, I can say it's a great fit for the hectic startup lifestyle.

My co-founder and I have each taken our fair share of power naps on it while waiting in between early morning conference calls with the East Coast. More frequently it has been used as our discussion chair of sorts. We take turns pacing around, nervously playing out different scenarios or discussing product direction while the other plops on the lounger and ponders these ideas. And of course there are the times when stress and frustation set in and we jump on it to see how high we can launch objects placed on the edge (sorry Android figurine). Ah, good ol' startup life!

Setup

Unlike a couch, the lounger can actually be shipped in a medium-sized box. How can they do this? The polyurethane foam pieces used as cushioning are highly compressed. This thing is one solid, heavy block upon arrival. That explains the protective nylon bands ensuring the box stays compressed. The SumoSac I used to own arrived in the same compressed fashion although their box was weaker and it arrived like this.

Despite the warning I opened this with my box-cutting weapon of choice — a Smith & Wesson Extreme Ops knife.

Now that the compressed polyurethane uncomfy block is unleashed, it was time to let it expand. It wasn't going to do it on its own very quickly so I helped it out with 30 minutes of forcing chunks apart, rolling it around and sitting on it a bunch. After that workout, it looked like this:

Still rather deflated looking. A few days later it reached ~~88 mph~~ maximum fluff. Huge!

Technical Specs

Coming in at 49 pounds, the Comfy Sacks lounger is definitely a behemoth of a beanbag. Once fully expanded and in an uncompressed form it boasts 6 ft x 3.5 ft x 3.5 ft dimensions. I'm not sure if the pictures convey it well enough but it's big and it's not even the largest one (there's a 7.5ft 75lb lounger). There are a few color and fabric options for the cover but I opted for the familiar micro suede. Micro suede is pseudo liquid resistant so you have some time to clean up the spilled beer before it gets absorbed into the fabric. Of course, the cover is also washable but taking it off and putting it back on is the biggest pain in the arse so I avoid it.

Competition

In the interest of a fair and balanced review, I must point out that there are many, many competitors in the bean bag/sac/lounger space. I already mentioned a few that I have personally experienced in the beginning of this post. Others that I have not tinkered with include Slacker Sack, Sacks of Love and Ultimate Sack. If you have any experience with these sacks, I'd love to hear your feedback below.

Verdict

Giant bean bags and loungers are fun to have around and relax on but they are by no means a replacement for the tried and true couch. For example, you can't exactly sit upright on it and eat a meal. It is very difficult to get comfortable on this lounger. You have to roll it around to "reset" the polyurethane shreds and climb on it just right to get in your desired position or you'll end up pushing the foam in the wrong places and you'll have to try again. Pro tip: prop it against a wall and make a sort of triangle seat, then plop down with your laptop. Still a tad cumbersome though.

Sitting down to watch a movie is a 5 minute process, especially with the lounger being heavy and unwieldy. However, when you find that sweet spot it's great! It's large enough for a couple but two friends can't share the lounger without being awkwardly close to each other.

Is this worth $276 USD (including shipping)? For personal use, probably not. For company use for employees/hackers/founders to relax on while their code is compiling? Absolutely! Ask your local startup founder if their HQ has a giant bean bag yet. For the latter use case, the Comfy Sacks Lounger gets 7.5 out of 10 Stammys.

Disclosure: I was provided this lounger for the purpose of this review.

Thoughts? Would you consider something like this or is the price too high for novelty/alternative furniture? Would you like to have one at your workplace? Anything I left out? Feel free to ask below.

Enjoy this post? Click through and leave a comment. It will make my day. Review: Startup Approved Comfy Sacks Lounger

Review: Apple 27-inch LED Cinema Display

2010-11-21T00:00:00-08:00

I've had an interesting past with large monitors. Back in 2007 while I was still in college, I decided to purchase a Dell 30-inch LCD display. Astute PSTAM fans noticed that display in the background of my Nike ad. That was back before glossy displays were ubiquitous, when most people had never heard of Mini DisplayPort, when the first generation iPhone had only been out for 3 days (and I still had a BlackBerry Curve) and when I thought Logitech 2.1 computer speakers were the pinnacle of aural excellence. Ah, college. I digress — back to that mammoth 30-inch Dell that educated all of its owners on what dual-link DVI meant. I sold it just a few months later and downgraded to a 24-inch display. Why you ask? I thought it was too frickin' huge! The person I sold it to sold it a few weeks later; he thought it was large as well! I loved the resolution but hated having to move my head around to see the other side of the screen. Maybe my desk at the time wasn't deep enough and I sat too close. But now I'm ready. Ready to try another huge display.

Stammy in 2007 before the Startup Diet. The Nike video producers had never seen a display that large before. I recall giving them a tour of apache-top for some reason.

Enter the 27-inch Apple LED Cinema Display (specs). Currently the only LED-backlit 27-inch display capable of 2560x1440 resolution. Dell's comparable 27-incher is more expensive and has a CCFL backlight. Yeah, you read correctly. An Apple product that is actually cheaper than a similar Dell product. This should be interesting.

Unboxing

Thanks to Amazon Prime, I ordered the display and received it two days later. While the display retails for $999, it was only $950 on Amazon (or you can use a student account to purchase it for $950 directly from Apple).

I was overly concerned about having issues with this monitor.. hauling this sucker on the Muni to the Apple Store for repairs would redefine PITA.

Not much to setup. Just attach the power cord then hook up to your computer.

Setup & First Impressions

I ended up placing my MacBook Pro on top of the display's stand and was fairly pleased with this setup. I had tried placing the laptop under my desk on top of a bookshelf but the cord is barely long enough (which makes me wonder how Mac Pro users deal with having their computer on the floor and away from the display) and the bluetooth connection to the mouse started acting up and got jittery.

In typical Apple display style, the three primary connections are encased in a single fat cable.

The display didn't take over my desk. It didn't feel overly large and only took a few minutes to get used to compared to using my 17-inch MacBook Pro. Looking straight ahead at the display is much more natural than looking down and bending over the laptop. Turning on the display for the first time, I was quickly able to discern it was LED backlit. It instantly came on and full brightness could be achieved easily. CCFL backlit LCD displays take noticeably longer to reach your desired brightness level upon powering it up. My old Dell 2407WFP-HC was like that.

There is no OSD for settings and no controls of any sort on the monitor itself. Not even a power switch. Everything, including brightness, is controlled by Mac OS X. If you are hooking this display up to a PC you will need to install Boot Camp (even if you are not actually in a dual-boot Boot Camp setup).

No surprise here — 2560x1440 is substantially larger than 1920x1200.

The 27-inch Apple Cinema Display is a comparatively thin display but has a slightly thicker bezel than I would like. The USB ports in the back are somewhat handy, but plugging stuff in there without craning your neck around is kind of a blind fumble around. Fortunately, I don't have many devices to plug in.

The integrated 2.1 49-watt stereo speaker system won't replace your studio monitors and lack any sort of high-volume punch. It doesn't help that the speakers are down-firing.

Alas, they are satisfactory for most purposes. I watched several movies with the integrated speakers, with me sitting about 8 feet away. The volume was at about 90-95% to be able to clearly hear voices in the movies. I did discover a sound issue though. The speakers cease working if you disconnect them while the display is on then try to reconnect them. They only continue working after you completely unplug the computer from the display then reattach it. More on that issue on the Apple Discussion support forum.

ACD + MBP setup playing 1080p Avatar

The Apple display affords you no fancy adjustability settings. Just a slight up/down tilt (-5 to 25 degrees). That's the one thing I hated about my old 24-inch iMac; I couldn't adjust the height. I ended up getting a hydraulic VESA arm for that. The Apple 27-inch display's height doesn't seem to bother me much yet though I do not comfortably see the top of the display at eye level (what I keep hearing to be the ergonomic preferred setup). I might end up lowering my desk by an inch.

Not for Professionals

Despite the high-end price tag, this display is not for professionals. This is for people that appreciate the Apple aesthetic, the convenience of having an integrated MacBook charger in the display, require an integrated webcam and/or those that do not care about the color profile much and would rather benefit from deep blacks associated with a glossy display while watching movies and other such video content. While LED backlit displays have perks like lower power consumption and "instant on" backlighting, the particular setup in this Apple display is a step down from CCFL backlight setups, such as that found in the Dell U2711.

I'll tell you why. Apple cheaped out and used white LEDs for the backlight (actually a blue LED with a yellow phosphor coating) rather than RGB LEDs. This negatively affects the color gamut of the display. CCFL backlights or RGB LEDs are better with regards to color reproduction for LCD displays, with the latter being rather expensive at the moment. RGB LEDs as a backlight actively adjust the temperature of the white produced. White LEDs on the other hand lack much in the green and red department, which is why professionals deem the Apple 27-inch Cinema Display as having a slight blue tint without performing proper color calibration first. I believe it might be more common to begin seeing displays with WLEDs and local dimming in the near future than a ubiquity of RGB LED backlight displays. Local dimming doesn't fix the gamut issue associated with WLEDs but helps boost contrast.

High quality IPS LCD panel means it looks good at extreme angles.

Moving on, the ACD uses an 8-bit panel. The CCFL backlit Dell U2711 also uses an 8-bit panel but with FRC (Frame Rate Control) — temporal dithering that quickly flips between two shades to simulate shades beyond the native capabilities of the 8-bit panel (only supported by certain video cards). If this all makes sense, you'll probably be more interested in the Dell 27-inch display, the 10-bit Dell U3011 or something in the HP DreamColor line if you can really justify the cost.

3 port USB hub on the back

Glare

The display glass is a (fingerprint attracting) thing of beauty but is surely the largest point of contention with the display. My MacBook Pro has a matte screen and I love it. Glossy, glare-creating desktop monitors are much harder to use than glossy laptop displays because you simply can't move the display easily to adjust the glare. That being said I have oriented the lights in my room to either come from behind the display or way off to the side, but never directly behind me as that causes the most glare. Though I'm afraid that most people will not have the ability to adjust their room lighting easily, such as those working in an office with fixed fluorescent lighting. If that is the case, you will want to avoid this display. At full bore, the glare is really unbearable at anything but maximum display brightness.

Verdict

I purchased this display to get more resolution out of my MacBook Pro while cleaning up the nest of cables on my desk. Now that I don't have to use my charger when at my desk I can keep it bundled up and ready to go in my backpack. I use Skype video chat frequently so the integrated iSight was a must. And when I have some downtime (heh, rarely) I use the display to watch movies as I don't have a TV. That's why I actually like the glossy display. The lack of other video inputs limits how I can use the display. Only my MacBook Pro has Mini DisplayPort. Otherwise I will have to purchase something like the Kanex XD if I want to attach an HDMI device like a Vudu box (and even then it will only support 720p over the connection).

I must say that when Apple announced this display I was actually shocked it was only $999. I could have seen Apple easily charging $1,399. The Apple 27-inch LED Cinema Display is not among the highest performers but it is one of the only 27-inch displays capable of 2560-by-1440 resolution and by far the sleekest display on the market. I find the size to be perfect and am quite happy with it. I give it 8 out of 10 Stammys.

Thoughts? What is your current computer/display setup like? Glossy or matte? Would you consider a large glossy display like this?

Enjoy this post? Click through and leave a comment. It will make my day. Review: Apple 27-inch LED Cinema Display

PaulStamatiou.com - Tech News, Reviews and Guides

Startup Idea: User Retention as a Service

Why lifecycle email marketing?

The Numbers

Fisher Price: My First Lifecycle Mailers

The Startup Idea (BUILD THIS)

How it would work

In a nutshell

Isn't there an easier option Stammy??

Email Template Dev Workflow

We're hiring at Picplum!

Talking Startups and Picplum on BBC News

Silicon Valley is not SF

Chance Encounters & Paying It Forward

Soft Landings

Bias much?

Send some prints!

The Coding Zone

Good Music

No Chance of Interruption

Organization

Thoughts on the Amazon Kindle Fire

Canon 7D Test Shots

Thoughts on Picplum Automatic Photo Prints

The 140

Why I'm Psyched

How We're Running This Startup

Picplum 101

Best Moments

Experience

The Review

But Prints Are Dying

Verdict

Try Picplum

Thoughts?

Bitcoin Mining

Crash Course: Design for Startups

Subtle is key! Except when it's not.

Get Inspired and Stay Thirsty My Friends Organized

Process

Required Reading

More Homework

But Stammy, we launch in one week!!?!111

Try New Things

More books..

Thoughts?

Footnotes

Code School is Amazing

Verdict

iPad 2: Thoughts from a first time tablet user

It scrolls like butter.2

Console Replacement

Apps Apps Apps..

Behind the Project: Pic A Fight

Nerdy Bits

Launch

WakeMate and Fitbit

WakeMate

Fitbit

Thoughts? Do you own a WakeMate, Fitbit or any of their competitors?

Thoughts on OS X Lion SSD TRIM Support

TRIM!

Speed Demon

Alas

Sony Alpha NEX-5: Going from DSLR to SLD

The Bad

The Good

Verdict

Review: Henge Docks docking station for Apple MacBooks

Setup + How It Works

Concerns

Verdict

Review: Etymotic hf3 Earphones

Fit

Performance

Related Audio Posts

How To: WordPress to Jekyll

Why the big move?

Content is king

What is Jekyll?

It scrolls like butter.²