jazzychad's blog

Announcing Tetra

2013-08-22T00:00:00-07:00

Today I am very pleased to announce the launch of Tetra - a new iPhone and iPad game app that I have been working on over the last three months.

Tetra is a 2-player puzzle board game. The goal is to get 4-in-a-row on the board, but it's not as simple as it seems...

For more information, and to see the full set of rules you can check out http://tetragame.com.

Tetra is available on the App Store.

Implementing Letterpress UI in UIKit

2013-07-30T00:00:00-07:00

Good artists copy. Great artists steal. — Steve Jobs, (mis)quoting Pablo Picasso.

Letterpress is a fantastic game. I remember how magical and fun the UI felt when I first played it. Letterpress was released when I was in the midst of completely rewriting the Exec Errands app, which involved a lot of custom UI components. I learned a lot about custom UI for iOS during that project, but Letterpress had some super advanced mojo happening in its UI. I wondered if I would ever be good enough to create something quite so magical as that. I was also shocked to learn that the entire UI of Letterpress is written using OpenGL instead of UIKit. I guess that's why they say, "You never go full Brichter."

For quite a long time I have wanted to write a 2-player turn-based game using Apple's Game Center infrastructure. Recently I was inspired by a board game that my family enjoys playing, and I decided it was just the right kind of game to turn into an app and experiment with turn-based game development.

I gave myself two challenges while developing the app:

Create an abstractable turn-based game library that could be used to create subsequent game apps. All I would need to do in the future is write the game specific logic and interface, then the library would take care of the rest of the game-state and turn-based logic for free. Other boilerplate things like Themes and Sharing actions would also be handled by this library. This turned into a library of code called CCCGameKit.
See how much of the Letterpress aesthetic I could achieve using my newfound custom UI chops, but I could only use UIKit, Core Graphics, and Quartz Core. This should also be a library that could be used in any app. Rewritten components like Alert Views and Action Sheets should have drop-in API and delegate protocols so that, as much as possible, standard UIKit components could just be replaced with these custom implementations without much code changing. This library of code eventually turned into CEKit.

CEKit turned out to be pretty compact:

...while CCCGameKit was a bit more complex:

With the combination of CEKit and CCCGameKit, I produced an app that is pretty darn close to the look and feel of Letterpress. Thus, Tetra for iOS was born.

Below are some screenshots and gifs of parts of the game, especially demonstrating some of the similarities betwen the Letterpress and Tetra UI.

Disclaimer: gifs are displayed at 15 frames per second, but rest assured that the app runs at a full 60 fps rate on hardware all the way back to iPhone 3GS.

Launching the game:

"How to Play" prompt on first launch:

...which leads to the game instructions:

The list of current games and turn states:

Swipe to remove a game (I am most proud of this interaction because it was the most difficult to get working correctly; sample of some of the code at the end of this post):

Game board view controller:

Menu action sheet spawned by the Hamburger Button in the top right of the screen (in Letterpress all menus are alert views, however I still like action sheets for many-choice menus):

Alert View with flat pill buttons:

The alert view animates in from the top of the screen and falls off the bottom when dismissed. Each time it appears the amount and direction of rotation are random so each alert is unique:

Bubble labels pop open and closed to display ephemeral messages:

Animated bubble label (sample of code at the end of this post):

When the game ends in a tie (which is very rare), the board does something a bit whimsical, just for fun:

One new view controller I created for the app was a custom Matchmaker View Controller for starting a new game. The standard Apple Game Center matchmaking interface is quite cumbersome and can take up to 5 taps to start a game with a friend. I decided it could be done in 1 tap:

There is also a theme system in the app which will re-skin all the components with different colors:

The second hardest thing to accomplish while trying to achieve Letterpress-level UI exactness was implementing the navigation bar which adds a slight shadow when the content below is scrolled up underneath the navigation bar:

Somewhat more difficult is also animating the navigation bar color to a lighter shade when a dark theme is in use (sneak peak of code at the end of this post):

Graphics

With the exception of the pre-loaded screenshots for the "How To Play" view controller, there are only four graphic assets in the app. All of the other visual elements (including all of the game pieces, disclosure indicators, hamburger buttons, etc) are drawn programmatically using Core Graphics and Quartz Core and cached as UIImages. The only graphics that are fetched remotely are the player avatars from Game Center.

Results

Overall I am really happy with how things turned out. This has been the most challenging software product I have built as a side-project. I started the app on May 14, 2013 and have been working on it during random hours on nights and weekends. In total it has been about 100 hours of work. Making this app has been extremely satisfying because it forced me to learn many new things about UI code and forced me to think about how to abstract and generalize functionality from the beginning so that the code may be reused in future apps.

This has certainly been the culmination of my 3 years of professional Objective-C programming. I don't think I went Full Brichter, but maybe I was able to go Half Brichter.

Some stats according to cloc:

4707 lines of code in CCCGameKit
2158 lines of code in CEKit
4498 lines of code in Tetra-specific files

Frame rates:

60 fps on iPhone 5
60 fps on iPhone 3gs
60 fps on iPod Touch 5th gen
50+ fps on iPad Mini
50+ fps on iPhone 4

I'm sure if I worked a bit more on image caching and compositing I could get the iPhone 4 and iPad Mini up to 60 fps. Perhaps in v2.

Things I didn't implement for v1

There were a few things I purposefully did not implement for v1 because of time constraints (or more likely, they are just out of my grasp to implement in UIKit, for now...)

Drag panning alert views - In Letterpress, you can drag alert views up and down the screen with your finger. You can dismiss alert views by pressing a button or by flinging them off the screen by pulling them down quickly. This feature didn't seem strictly necessary to me, however now that I have a handle on UIPanGestureRecognizers from getting the "Swipe to Remove" interaction right, I think I know how to implement this in v2.
Swipeable view controller navigation - Much like Windows Phone's Metro UI framework, Letterpress allows you to move between screens in the navigation stack by swiping across the screen to move between them. For now I am just using a stock UINavigationController to handle view navigation (and doing my own navigation bar magic within the stack). Swipe navigation was not something I wanted to tackle in v1. I suppose this could be accomplished using a custom Container View Controller, but this seemed beyond the scope of the app for now. Maybe this was something that was easier to implement in OpenGL.
Game-preview-to-game-board-zoom - When you tap on a game in the main game list in Letterpress, the game preview (represented by colored squares) magically zooms from the preview frame to the full screen while also fading the letters and rest of the game chrome into view. I also render a preview of the current game-state, however for now I just do a simple push to the game board. I plan to make this transition more magical in v2.

Sneak Peek of the Code

For the curious, here are a few glimpses into the codebase.

The logic that handles adding/removing the shadow (and changing the color) of the navigation bar when content scrolls beneath it:

After setting all of the properties, the creation of the pill buttons UI happens almost exclusively in the layoutSubviews method:

Similarly, the hamburger menu button is rendered in code during layoutSubviews:

Everytime I see a bubble label appear it makes me smile because it reminds me of Pop-Up Video. Here is some of the animation code responsible for displaying a bubble label:

In order to correctly implement the Swipe to Remove in the game list cells, I had to implement part of the UIGestureRecognizerDelegate protocol. I learned that UITableViewCells also implement this protocol, so I had to be careful to call super in the case my recognizer was not the one being triggered by scroll or swipe gestures:

Coming Soon

Tetra should be available on the App Store by the end of August. I just need to clean up a few bits of UI here and there, and then I can ship it.

Thanks to Loren Brichter, Karen Cheng, Eric Florenzano, Jason Kozemczak, Dan Loewenherz, Chris Mitra, Paul Stamatiou, and Cristian Strat for proofreading this post.

2013 Resolutions

2013-01-01T00:00:00-08:00

• Earn 1 Bridge Master Point

• Drop 20 pounds

• Read the A Song of Ice and Fire series

• Read 3 graphic novels

• Walk 1000 miles (~20mi/week)

2012 Year in Review: Side-Projects

2012-12-31T00:00:00-08:00

One of my favorite pastimes as a programmer is to work on personal projects outside of work. I use side-projects as a creative outlet to work on new and interesting things. I also use them as a learning exercise. If I start a side-project, there must be "one new thing" about the project I don't know how to do already. This can mean learning a new language, API, framework, algorithm, whatever. The end result is that I level up my skillset with each project. I recommend this system for every programmer.

Here is a list of side-projects that I started, developed, and shipped in 2012:

BankersBox

I wanted to learn about HTML localStorage for storing local preferences in internal web apps at Twilio. After finding the localStorage APIs a bit lacking, I wanted to write a Redis-like wrapper around localStorage to make it easier to handle.

Date: March 05, 2012

Link: http://www.twilio.com/engineering/2012/03/05/open-sourcing-bankersbox

Source: https://github.com/twilio/BankersBox

Stack: javascript (for source), coffeescript (for testing)

One New Thing: HTML localStorage

Notes: I consider this a side-project because it was never an official task inside of Twilio. I worked on it around my other assignments after hours on nights and weekends. Since I developed BankersBox to help with internal apps, it was open-sourced under Twilio's umbrella.

Mailblog

I wanted to know how difficult it would be to create your own Posterous-like "blog-by-email" system. Combining a few puzzle pieces made it fairly easy.

Date: March 12, 2012

Link: http://blog.jazzychad.net/2012/03/12/create-your-own-posterous.html

Source: https://github.com/jazzychad/mailblog, https://github.com/jazzychad/mailblog-files

Stack: php, ruby (jekyll), mailgun, S3

One New Thing: Learning to use Mailgun's webhook system

Notes: I worked on this project over a weekend. I published the post describing it Monday morning, and later that day Posterous announced it had been acquired by Twitter. The timing was purely coincidental.

ExportMyPosts

After Posterous was acquired, it occurred to me that there was no easy way to export your blog data. People were worried what would happen to their blogs during the transition to Twitter. I built ExportMyPosts in response to provide a simple one-click export tool.

Date: March 20, 2012

Link: http://exportmyposts.com/

Stack: php, Redis, S3, Posterous API, Stripe API

One New Thing: Using Stripe to take online payments

Notes: I built this site in the four days between my departure from Twilio and starting at Exec. I published a post describing the making of the website shortly after it launched. There have been ~$550 revenue on ~50 sales so far. At this point it is about break-even with the server costs. I may take it offline soon as the rate of sales has slowed way down.

dcpubin

When Notch announced his new game, 0x10c, he released information about a in-game computer called the dcpu which players could program to affect their environment. The dcpu programming spec was in its own assembly language. I love assembly, so writing an emulator sounded like a fun project. I also thought that players might want to share code back and forth in an easy manner, so I created a specialized pastebin for dcpu code.

Date: April 07, 2012

Link: http://www.dcpubin.com/

Source: https://github.com/jazzychad/dcpubin

Stack: node.js, mongodb, heroku

One New Thing: dcpubin spec

Notes: Around the same time, another dcpu emulator pastebin appeared at http://0x10co.de/. It had more features and took off much more quickly with the 0x10c community. I abandoned the dcpubin project, and it is mostly filled with spam at this point.

node-heroku-express

I was starting to write several node/mongodb/heroku apps in my spare time, and each time I had to jump through the same hoops to get it up and running. Finaly I just decided to create a boilerplate starting point repo for these types of projects.

Date: April 25, 2012

Source: https://github.com/jazzychad/heroku-node-express

Stack: node.js, mongodb, heroku

StepStats

I had a Fitbit for about six months, but I was not extremely motivated by the data because the default graphs on their website are not very insightful. I wanted graphs with longer bigger data sets and trendlines, so I created the graphs I wanted using the Fitbit API and set it up as a website anyone with a Fitbit could use.

Date: April 30, 2012

Link: http://stepstats.com/

Stack: node.js, mongodb, heroku, Fitbit API, flot.js (graphing)

One New Thing: Fitbit API, flot.js (ok, that's two new things)

Notes: I have asked to be added to the Fitbit app gallery several times, but each time I have had no response.

Pixit

During a vacation in June, I ran into a problem I'm sure many people have when out and about with friends. People were taking fun pictures with their phones that I wanted to post to Facebook or Twitter. Asking them to send me the pictures from their phone is somewhat cumbersome and takes many steps. I thought up an app that would make it extremely easy to send many pictures to a group of friends in one go.

I wrote a beta version of the app that I use with my family, and it works great. It just isn't polished enough for mass release. I'm not sure if it would be worth the time and effort to wrap it up and ship it. The monetization model is not clear (probably ads?) and the hosting costs for photos would be non-trivial. It is extremely useful, though.

Date: June 2012

Stack: Objective-C, Parse, Facebook API

One New Thing: Parse framework

Adian

When app.net released their API, I decided to throw my hat into the ring of iOS clients. I took my codebase from TweetFire and refactored it into an app.net specific client. It was the second app.net client available in the App Store.

Date: August-September 2012

Link: https://directory.app.net/app/32/adian/

Stack: Objective-C, app.net API

One New Thing: app.net API

Notes: Adian has sold ~1,000 copies since release. Once Tapbots released Netbot (their port of TweetBot) it decimated sales of just about every other client on the market. I dropped the price from US$5.99 to US$1.99 and now it sells maybe 1 copy every few days.

AdianBugs

During development of Adian, I was getting too much user feedback to keep up ad hoc. So, I built a bug report/feature request system for users to give structured feedback.

Date: August 2012

Link: http://bugs.adianapp.com/

Stack: node.js, mongodb, heroku, app.net API

One New Thing: Create a custom ticket system

TunesPost

I wanted to learn about the Apple Scripting Bridge system in OSX, so I thought up a little task bar utility app that could read the currently playing song in iTunes and then post it to app.net.

Date: September 01-03, 2012

Link: http://longposts.com/1226802

Stack: Objective-C, app.net API

One New Thing: iTunes Scripting Bridge

SpotCast

Someone suggested I build a system that would allow someone to be a DJ using Spotify. One person would play music, and others could "tune-in" to their channel and their Spotify app would change songs along with the DJ. Just like turntable.fm, but using Spotify to supply the music instead. I thought, sounds cool - why not? It works incredibly well, and I love having someone else queue up my music throughout the day.

Date: September 03-05, 2012

Link: http://gist.io/3625870

Stack: Objective-C, Tornado framework (for real-time message bus)

One New Thing: Spotify Scripting Bridge

Notes: I did not realize that there was already a Spotify app called Soundrop that did exactly this. Oh well.

LongPosts

Over the app.net Weekend Hackathon, I created an "instant blogging platform" for app.net users. Since app.net posts support annotations of up to 8k characters (still waiting, Twiter... lol), it seemed like a good way to store longer-form blog post data. So, I cooked up an annotation format to support blog posts and just store them in app.net post objects. I found that longposts.com was available, so I grabbed it and built a frontend website around the annotations.

Date: October 20-21, 2012

Link: http://longposts.com

Source: https://github.com/jazzychad/longposts

Stack: node.js, mongodb, heroku, app.net API

One New Thing: Use app.net post annotations

Notes: So far ~170 posts have been written on LongPosts. On December 20 I open-sourced LongPosts so that others can contribute to its ongoing development.

CEGuideArrow

As part of the Pixit app, I created a custom UI arrow control that would point at different parts of the interface during the onboarding/tutorial phase of the app. Pixit was never released (yet?), but I thought others might enjoy the arrow control, so I cleaned it up and open-sourced it.

Date: November 04, 2012

Link: http://www.cocoacontrols.com/platforms/ios/controls/ceguidearrow

Source: https://github.com/jazzychad/CEGuideArrow

Stack: Objective-C

One New Thing: CoreAnimation framework

Notes: Gained 74 stars and 7 forks on GitHub after being published on CocoaControls.

Bridge Trainer

At some point I looked around and decided I was doing too many side-projects. I wanted to improve my life skills in some other fashion than programming. I have always wanted to learn how to play Bridge, and so I decided to make that my next long term side-project. However, while learning about the bidding system, I needed a way to train myself since there are many rules to learn. So, what do I do? I break my rule of no more programming and write my own training software (at least it is Bridge related, right?).

Date: November 2012 - Present

Link: http://bridge.jazzychad.net

Source: https://github.com/jazzychad/bridge-trainer

Stack: BankersBox, coffeescript, Bootstrap, S3

One New Thing: model the game of Bridge in code, create a completely client-side web app

Notes: Currently only opening bids are covered by the trainer. Once I feel confident in my abilities there, I will move on to adding responses and rebids. Then will come the defensive bids. During the course of development I also got a Makefile update accepted to Bootstrap.

So there you have it. 2012 was a busy year. Hopefully 2013 will be a bit slower with non work-related programming, and I will start earning my first Bridge Master Points.

A Better Makefile for Bootstrap

2012-12-04T00:00:00-08:00

tl;dr Bootstrap's Makefile is not so good. So I'm starting to make it better.

A little bit of backstory:

My current side-project is learning how to play Bridge. To help learn about the bidding process, I am making a simple static site web app out of a coffeescript playing card library, BankersBox for client-side storage, and of course Bootstrap for layout and styling. The project is called bridge-trainer.

Since each component has a compile step, I decided to take a Jekyll-like approach by compiling the overall site into a _site directory which I then sync to S3 as a hosted bucket.

You can see the github repo, but the general setup is an html, js, and css folder with BankersBox, and Bootstrap living as git submodules underneath their respective directories.

When I'm ready to test a change, I background emacs with ^Z and type make to compile the site into a _site directory which I can load locally in my browser. You can see the first version of the Makefile which compiled the site.

The Makefile would create the _site directory, compile the coffeescript files, run the Bootstrap make file, then copy all the necessary files into the _site hierarchy.

Trouble was, Bootstrap would compile from scratch each time I ran make. This seemed rather unnecessary as none of the source files for Bootstrap were changing between site builds.

Here you can see near the top of Bootstrap's Makefile:

Original Makefile

Bootstrap's Makefile is being used as a glorified shell script to run a bunch of commands and not using make's real power: a compilation asset dependency graph. Also, there is no all target, so if you just run a normal make command, the first target is run by default. In this case the first target is build which builds the docs for Bootstrap. This takes about 2.4 seconds each time.

$ time make build

##################################################
Building Bootstrap...
##################################################

Running JSHint on javascript...             Done
Compiling LESS with Recess...               Done
Compiling documentation...                  Done
Compiling and minifying javascript...       Done

##################################################
Bootstrap successfully built at 06:17PM.
##################################################

Thanks for using Bootstrap,
<3 @mdo and @fat

real    0m2.480s
user    0m2.299s
sys     0m0.170s

Run the same command immedately afterward, and you get the same thing.

$ time make build

##################################################
Building Bootstrap...
##################################################

Running JSHint on javascript...             Done
Compiling LESS with Recess...               Done
Compiling documentation...                  Done
Compiling and minifying javascript...       Done

##################################################
Bootstrap successfully built at 06:17PM.
##################################################

Thanks for using Bootstrap,
<3 @mdo and @fat

real    0m2.440s
user    0m2.271s
sys     0m0.172s

Another 2.4 seconds down the drain even though no input sources were changed.

At this point I decided I didn't want to wait 2.4 seconds each time I changed one line of html for my site and recompile to test it in my browser. At first I modified my project's Makefile to deal with Bootstrap's compilation dependencies as can be seen in this commit, but I thought it was a bit silly that I had to worry about that in my Makefile.

So, I did what any insane person would do. I forked Bootstrap.

Here is the updated Bootstrap Makefile using proper make target dependencies:

New Makefile

After running a make clean to start from scratch, running make bootstrap again takes 2.x seconds to compile.

$ time make bootstrap

real   0m2.711s
user   0m2.552s
sys    0m0.168s

But now if you run it again, nothing needs to happen because nothing changed! Voilà!

$ time make bootstrap
make: Nothing to be done for `bootstrap'.

real  0m0.032s
user  0m0.029s
sys   0m0.002s

This allowed me to have a much cleaner Makefile in my project's repo now that Bootstrap was worrying about itself.

Now if I cd back to my repo's root, compiling the site from a fresh start takes ~6 seconds while Bootstrap is compiled and BankersBox is minified by Google's closure compiler.

$ time make site

real   0m6.111s
user   0m2.567s
sys    0m0.236s

However, after I make an edit to one of the repo's files (like my playing card coffeescript) and recompile, it is lightning quick because all of the Bootstrap and BankersBox dependencies are already fulfilled.

$ touch js/coffee/cards.coffee
$ time make site

real   0m0.248s
user   0m0.217s
sys    0m0.030s

Mission accomplished. If I do decide to customize the look of the site by editing Bootstrap's .less files, my project's Makefile will automatically trigger a Bootstrap rebuild (but only the css files!) because of the build dependencies.

make can be a very powerful tool. It was designed to save developers' time by not repeating unnecessary compilation steps between builds of large programs. Use it wisely in your projects, and you just might save valuable seconds of your fellow developers' lives.

The New Exec iPhone App

2012-11-27T00:00:00-08:00

Three months of intense work later, the new Exec iPhone app is here! I did a full overview of the development process on the Exec blog. Hopefully I will be able to do some deep-dive technical posts about actual implementation of some of the custom UI classes at some point. In the mean time, enjoy the new app!

Read the overview writeup here!

Dreaming of Space

2012-10-19T00:00:00-07:00

After reading the post Small by Alex MacCaw I was moved to recount a dream I had recently because the experience was similar to that described in the post.

Two nights ago while I slept, for the first time I had a dream about going into space on the shuttle. I have wanted to go into space since I was a child, so in my dream I was extremely excited about going into space.

I dreamt of the launch, the G-Forces, the adrenaline rush, and finally the sky turning from blue to black as we escaped the atmosphere.

Then the shuttle turned over so we could see the Earth. As the cockpit window rotated and Earth came into view, the feeling of sheer terror washed over me as I saw how small the planet looked. I had a panic attack in my dream from looking back down at Earth.

I woke up a few minutes later as if from a nightmare. It was the strangest experience, and the imagery and feelings are extremely vivid in my memory. I wonder if humans have an innate emotional response to this size perspective, but this seems somewhat related to the Overview Effect described in the article.

Adian for App.Net Update

2012-10-12T00:00:00-07:00

Apple just approved the v1.0.28 update of Adian for App.Net! This update includes many updates requested by users, but here are two updates which might be nice for most people to know about.

Push Notifications for Netbot

Since Netbot does not have push notifications, Adian has added a setting which will redirect its push notifications to open Netbot to the specified post instead. You can set it from the Accounts page by tapping on the blue arrow next to your username.

Temporary Price Drop

Adian is now US$1.99 for a limited time so new users can get in on the fun and current Netbot users can grab a great utility app to add push notifications without having to spend another giant sum of money (slight sarcasm added). The price change is propagating through the App Store, so keep checking if you don't see it.

Many Other Updates

iOS 6 support
iPhone 5 screen support
Reposts
Stars
User Search
Hashtag Search
Tons of bug fixes
See more: Adian Bug Tracker

Go Get It!

You can get Adian for App.Net on the App Store now!

IFTTT Needs Webhooks, Stat

2012-08-05T00:00:00-07:00

If This Then That (IFTTT for short) is a cool web service that lets users manipulate and react to events on different websites by taking other actions in response.

For example, I can tell IFTTT: IF I post a new photo to Instagram THEN take that photo and store a copy in my Dropbox folder.

IFTTT currently has 50 channels (or services) that you can wire together in similar fashion to create all sorts of interesting combinations of events.

However, one output channel is sorely missing: Webhooks.

Granted, webhooks are not for the general user. This is why IFTTT is great, because it is trying to solve the webhook case for most consumer needs.

But, as a developer I want access to my event data so I can use it however I please. In this way, webhooks would be the perfect solution as an output channel for IFTTT.

When IFTTT announced its partnership with WeMo to do interesting things with real-world hardware, I assumed IFTTT was headed in the direction of helping to power the Internet Of Things and really get it off the ground.

Last night, I needed a way to be notified each time I posted a new tweet. So, I went to IFTTT to setup a Twitter-to-webhook recipe and found that I could not.

@jazzychad there's so much potential for it, it's definitely on our list for development consideration.
— IFTTT (@IFTTT) August 5, 2012

Hmm, this says to me, "Thanks, but it's not even on our todo list."

That's unfortunate. IF IFTTT wants to become a platform and become the central hub for the evented web THEN they need to make it as appealing as possible for developers to love the system and start to build cool things with it. Developers will be inspired to tell their friends about it, and IFTTT will continue to gain traction in the consumer space.

Myabe I'm way off base. Maybe their consumer growth traction is fine and they don't need to cater to the power-user/developer edge cases in order to reach their goals.

All I know is I want webhooks.

Array Iteration Interview Problem

2012-08-01T00:00:00-07:00

Over the past year, I have interviewed several cadidates for programming positions at tech startups. The following problem is a variation of a question I have asked in each of those interviews.

I say that the candidate can use any language they choose, and most use ruby. I am not a rubyist. My background is in C and functional languages like Lisp, so the answers I see in ruby are sometimes a little bit strange to me.

Maybe it's the Ruby Way, and I'm not used to it. So, dear internet, I open the floor to you to show me your implementation of the following problem statement.

Implement the following function:

# add1 - increments items in an array matching specified value
#
# param: arr - array of integers to manipulate
# param: val - integer, value to increment
# param: n   - integer, control value specifying behavior of manipulation
#   n == 0 means increment all occurrences of val
#
#   n > 0  means increment up to n occurrences of val
#          from left-to-right (forward)
#
#   n < 0  means increment up to n occurrences of val
#          from right-to-left (backward)
#
# return: arr with proper values incremented

Examples:

# add1 [1,4,1,5,1], 1, 0 -> [2,4,2,5,2]

# add1 [1,4,1,5,1], 1, 2 -> [2,4,2,5,1]

# add1 [1,4,1,5,1], 1, -2 -> [1,4,2,5,2]

Ok, have you done it? Right. Now here are some questions to consider about your implementation:

Are you manipulating the array in-place? If not, can you change it so that it does (in which case I guess rubyists would say the function name should be 'add1!')?

Do you have 3 separate cases for handling the value of n (n == 0, n > 0, n < 0)? Can you collapse it down to 2? How about only 1?

Let's say that n is positive (> 0) and the array has a billion elements, but you've already incremented n values after the first 100 or so elements. Does your implementation continue to loop over the whole array, or can it short-circuit and return early?

Did you use array#reverse twice somewhere in your code? (Lots of people do this, which is fascinating to me, to handle the negative n case)

Are you using iterators like .each or .map, or are you using a normal, index-based for loop?

I find the wide variety of answers I get very interesting, but almost all use a double reverse technique when handling negative n values (reverse the array, use .each or similar, reverse array again before returning it).

To be clear, this is not a 'gotcha' question. I am not looking for a particular answer which I consider correct. I care more about how the candidate can explain the choices they made in their implementation and how they communicate while they code. A working implementation counts for a lot, of course, but I know there is more than one way to skin a cat. Whether I consider their answer to be optimal or something that I would use in production is another issue, but it is not something that weighs much in my overall decision.

My background is mainly in embedded systems programming. My main concern when I code is for speed and efficiencey, both in runtime and in memory consumption.

Since this is the internet, and nothing is at stake, I pose the following challenge: I want to see your most optimal implementation of this problem. Mainly I want to see the array updated in-place and with no wasted cycles while looping. I'm mostly curious to look at the ruby answers.

For reference, below is my implementation written in javascript (since I have no idea how I would do this similarly in ruby), just so you can see how my mind thinks about this type of problem.

/*
 * add1 - increments items in an array matching specified value
 *
 * param: arr - array of integers to manipulate
 * param: val - integer, value to increment
 * param: n   - integer, control value specifying behavior of
 *              manipulation
 *   n == 0 means increment all occurrences of val
 *
 *   n > 0  means increment up to n occurrences of val
 *          from left-to-right (forward)
 *
 *   n < 0  means increment up to n occurrences of val
 *          from right-to-left (backward)
 *
 * return: arr with proper values incremented
 */

function add1(arr, val, n) {

  var step, start, stop, count;

  if (n >= 0) {

    if (n == 0) {
      n = arr.length;
    }
    start = 0;
    stop = arr.length;
    step = 1;

  } else { // n < 0

    n = Math.abs(n);
    start = arr.length - 1;
    stop = -1;
    step = -1;

  }

  count = 0;

  for (var i = start; i != stop; i += step) {
    if (arr[i] == val) {
      arr[i]++;
      count++;

      if (count == n) {
        break;
      }
    }
  }

  return arr;

}

By the way, we are hiring at Exec, so you should come join us!

Startups, Fix Your Blog Links

2012-05-28T00:00:00-07:00

In this next installment of my "Startups, fix your X" series, I present another issue that has irked me for some time, but I have finally been bothered to write it down.

Dear Startups,
Please add a link to your main homepage from your blog's navigation links.

There, was that so hard? It seems so simple, yet so many companies leave their readers stranded on their blog with no way to figure out what the company actually does.

Here is an example of Flattr's Blog, which I was linked to from Hacker News:

I'm not just picking on Flattr, they are just the last in a long line of blogs that have done this.

What is flattr? I guess I should go to their homepage. Clicking on the giant "FlattrBlog" logo leads me to blog.flattr.net. Ok, well, that makes sense. So I guess I'll click "Home," and that should lead me to the homepage. Nope, just another link to blog.flattr.net. There is not one link in the header of Flattr's blog that takes me to their homepage.

I'm a reasonable person, I could very well deduce that the homepage is at flattr.net, but I'm lazy and just want to click my way there, not spend the time manually editing the URL in the address bar. I'm sure most people are the same way.

Your company's blog is usually your main PR outlet. It's how you get links spread across the web. Articles you write are how you get linked on news sites, Facebook, Twitter, etc. Once users are on your blog, they are one short click away from learning more about your company or product. How could you possibly waste that opportunity by not adding a simple link?

Fixing Obfuscated Emails in Gmail with Dotjs

2012-05-25T00:00:00-07:00

Even though moderm email spam filters have become sufficiently good at protecting our inboxes, people (including myself) still feel the need to obfuscate their email addresses when listing them on public websites so spam scrapers don't get their address. Seems reasonable.

However, when I want to email someone who has done such obfuscation, I need to copy their address, paste it into Gmail and then manually correct the obfuscated parts so that Gmail will recognize the email format.

This became tiresome. I wondered why Gmail couldn't be smart enough to recognize some of the common patterns and just auto-correct it automatically.

Then the thought occurred to me: maybe I could write a custom dotjs file to do this for me. If you don't know about dotjs files, you should check it out at https://github.com/defunkt/dotjs. Basically it is a Chrome extension that acts as a better version of Greasemonkey scripts that can customize any webpage.

The script itself is pretty simple:

$(document).ready(function() {

  // automatically fix obfuscated email addresses pasted into
  // to/cc/bcc fields                                                                                                                                                              

  $("textarea[name=to], textarea[name=cc], textarea[name=bcc]")
  .live('blur', function(e){
    var text = $(this).val();
    text = text.replace(" at ", "@");
    text = text.replace("_at_", "@");
    text = text.replace("[at]", "@");
    text = text.replace(" dot ", ".");
    text = text.replace("_dot_", ".");
    text = text.replace("[dot]", ".");
    text = text.replace(" daught ", ".");
    text = text.replace("_daught_", ".");
    text = text.replace("[daught]", ".");
    $(this).val(text);
  });
});

It can also be found in my .js repo on github: https://github.com/jazzychad/.js/blob/master/mail.google.com.js

When you paste in an obfuscated address, the script will automatically look for common patterns and replace them with the appropriate characters when you tab or click to the next field. So, pasting in emails like this:

...become this:

Piece of cake!

Startups, Fix Your "From" Field

2012-03-24T00:00:00-07:00

A short rant. I have seen this problem happen too many times to stay quiet anymore. I have reached out in private when this happens, but I'm going to write a public rant so I can stop repeating myself.

Dear Startups,
Put your company's name in the From field of your notification emails.

There, was that so hard? It seems so simple, yet so many companies fire off bacn email without letting me know who they are in the From or Subject lines, and it just looks like spam.

Here is an example from a new startup whose website I joined yesterday:

I have no idea what these emails are about or where they came from. Do you?

Here is the fix. Format your From address like so:

"Company Name" <notification@company.com>

This will show Company Name in the From section of GMail, Outlook, and literally every other email inbox service. Then I know why I got your email at a glance without having to open it and be mad at you.

If you just use notification@company.com, most inboxes will either show the part before the @ symbol (like GMail), or if you are lucky it will show the entire email address, but now you are forcing the user to parse the email address for your domain name. Blech.

There is a corollary to this rant:

If you use a person's name as the From address to make your company look more personable, then put your company name in the Subject line somewhere.

I have seen several companies send out newsletters using a person's name as the sender (founder, head of marketing, etc), but the Subject line is meaningless without more context if I don't recognize your name as being associated with a company I know.

Just sneak it in somewhere. Any of these will do:

[Company Name] Check out our new features!

Hi from Company! How do you like us so far?

Your order from Company has shipped!

Please fix this. Please let me know who you are while I skim my inbox so that I don't glance over it, or worse, hit the delete or spam button without reading it.

Behind the Scenes: Launching ExportMyPosts.com in 4 Days

2012-03-21T00:00:00-07:00

In the time between finishing at Twilio and starting at Exec, I had four days off. A few days prior, Posterous had been acquired by Twitter. This gave me an idea, and it was one I knew I could build in those four days. This post will explore how I built and launched ExportMyPosts.com in those four days, and what building-blocks I used to get there.

The Idea

On March 12, Posterous was acquired. This was great news for Posterous and Twitter, but many users were left wondering about what would happen to their blogs and their data. Posterous' response at the time was very vague (their response since then has cleared a little bit).

Their main response at the time was, "If you want to export your data, you can use our API for that." This is true, of course. It is possible to get one's data out that way, but most users wouldn't even know where to begin with that recommendation.

However, I was familiar with Posterous' API from previous projects, so I knew what would need to be done in order to extract all the information and files you would want out of your blog. I thought it would be neat to build a tool that could be used by anyone to export their blog in the simplest way possible: the click of a button.

The "New Thing"

I have a rule for every personal side-project that I build. There must be at least one "new thing" I have to learn that I have never done before in other projects. I have had this rule for years. After dozens of personal projects under my belt, I now have an entire arsenal of skills to use on future projects. I recommend this rule to everyone. This is how you can become The Starter, The Architect, The Debugger and The Finisher all in one person and accomplish things very quickly (though I am more of a Starter than the other three).

There were a few "new things" in this project, but main one was using Stripe to take payments on the website.

I have used PayPal before and taken credit card payments with a Merchant and Gateway account for a previous business, but I had yet to play with Stripe to really see how easy it was. That was the "new thing" this time.

Building Blocks

Here is a list of the pieces I put together to assemble the site:

Servers

Rackspace Cloud virtual servers running Linux. I use Apache2 as my web server, PHP as my language, and Redis as my datastore.

Dev setup: One 512mb slice which runs a web server, the export worker and email daemons, and the redis db.

Production setup: One 512mb slice to run the web server. One 512mb slice to run the redis db. One or more (depending on load) 256mb slices to run the export worker and email daemons.

PHP on CodeIgniter 2.x

Haters gonna hate, but I love PHP. I learned it in 2002, and I know it backward and forward. I know how to configure it with Apache to get maximum performance without even thinking about it anymore. This means I can write PHP code very fast. Believe it or not, it is actually possible to write good PHP code.

A couple years ago I came across CodeIgniter, which is a pretty nice MVC framework for PHP web apps. The community is a little devided on some issues, but the code is nice and makes creating websites quick.

Redis

I love Redis. You love Redis. We all love Redis. Here's why:

Having a schema-less datastore meant that I could iteratively tweak and adjust my models without having to worry about updating schemas or tables or rows or anything. Do I need to store another attribute about this user? Great, just set another key and I'm done. Everything I need to know about users, blogs, payments, promo codes, and jobs can be expressed as key-value pairs, lists, and sets.

(Let's not start a war about NoSQL vs RDBMS, ok? I still love SQL, too. There is a time and place for everything. Use the right tool for the job, and all that.)

However, there is another awesome power that Redis had for me in this project: queues. Antirez published a post about Redis reliable queues in the middle of this project, so I took a few pointers and tweaked my queue implementation.

Because the lpush and rpop commands are atomic, it meant that I could use a Redis list as a distributed queue to dispatch export jobs to worker daemons. In addition, because of the atomic incr and decr commands, I could use a Redis key as a locking mechanism between worker processes to serialize API requests to Posterous so I would play nice with their rate-limits.

Email

At first I hadn't even thought about adding email to the site. It's not something that most projects need. Then I thought how strange it would be for users to click "Export" and have to wait around while their blog was queued for processing. How would they know it was done? So, it became clear I would need some notification mechanism: email.

I have configured and stood up more Postfix servers than I care to remember. That was once a "new thing" that I learned, but after dealing with it again and again, I have finally taken down the "Get Off My Lawn" sign and decided to go with a shiny web 2.0 Email API service from here on out.

My personal favorite service is Mailgun. There are many similar services out there, but Mailgun happens to work really well for my use-cases, and likewise for this project. I had to write a simple PHP wrapper for their API, but it still took about 10 minutes to start delivering email to my inbox from the app.

Stripe for Payments

I have dealt with web-based payments before. PayPal is nice, but they are becoming increasingly scary. I have had online Merchant and Gateway accounts. Those are a giant mess and rife with fees and shady practices. I consider that whole world to be the seedy underbelly of the internet.

After hearing much praise about Stripe (not to mention knowing the founders through many YC connections and events), I decided to give them a spin to see if they lived up to the hype.

The short answer is: yes. The long answer is: yes, but it still takes lots of effort to properly integrate payments into a website. Much of the logic and implementation is application specific, and no company can fully remove that pain. Stripe certainly eases the pain (a lot), but the greatest thing they provide is a one-stop service. They act as both the Merchant and Gateway accounts. In fact, you don't even have to know what those mean to use Stripe. All you have to know is, "people pay with their credit card on my site, money lands in my bank account." What normally takes three separate services is rolled up into one.

The second greatest thing is that there are no monthly fees. I only pay Stripe when I am paid. So, if I go a whole year without making a sale, I am out nothing. I don't know of any other payment systems with that deal.

Anyway, I don't want this post to turn into a Stripe ad, but it was the "new thing," so I paid special attention to it.

Worker Daemons

I have two types of worker daemons (again, written in PHP) that run in the background: an email daemon and an export daemon. The email daemon is just a simple loop that pulls email jobs off another Redis queue and sends them through Mailgun.

The export daemon does the heavy lifting for the whole project. It is responsible for communicating with the Posterous API to extract blog data and download associated media files (images, videos, audio, etc). Then it zips them all up into one file and uploads it to S3. Then a link is sent to the user to let them know their blog is ready for download.

I designed the export worker to be scalable, so that more can be run at the same time if there are many pending jobs. The only tricky part was to serialize the Posterous API requests betwen the workers because the API has a very strict requests per hour limit with second granulatiry. As I mentioned before, I just use a Redis key as a mutex to make sure that only one worker is making a request at any one time and sleeps a bit before giving up the lock.

Bootstrap and Bootswatch

Twitter's Bootstrap seems to be popping up everywhere now, but for good reason. It is a great frontend framework for non-designers (like me) to make a decent looking website without having to worry too much. I don't begrudge anyone using Bootstrap, but I don't like seeing the same default theme everywhere. Thankfully, there are sites like Bootswatch which provide some different themes and ability to customize your Bootstrap look and feel. I also added a textured background image from Subtle Patterns to give the site some extra depth.

The Four Days

Thursday

I started work on the site. First I wrote the worker daemon to see if it was even possible to export the blog data the way I wanted to. This was also the first day of the NCAA Basketball Tournament, and I also run my own Bracket Challenge. So I wrote code, setup the dev server, and watched basketball.

Mostly I watched basketball.

Friday

More basketball.

Started work on the website frontend. Played around with Bootstrap and Bootswatch until I found a theme and design I liked. Then I added enough code to be able to login via Posterous and export a blog with the website as a GUI instead of running the worker from the command line. At this point I integrated Mailgun emails so users would get an email when their blog was queued, started exporting, and finished exporting. I had a couple friends test exporting their blogs to make sure the system was working as expected.

Saturday

More basketball.

Payment integration day. If I didn't want to take payments for this site, it would have been mostly done by now. Adding payments to a website means inserting payment-related logic to lots of things in the app. Is the user allowed to do this action? Have they paid for it? Have they paid for one of these items, but not two? What items do I display to the user based on what they have or have not already purchased? Make sure a user can "purchase" the same item again, but this time don't charge them for it. Etc, etc... All of these issues are answered with code that isn't even related to integrating with your payment service!

Integrating with Stripe was fairly straightforward. Their test mode is amazing, so you can try out every conceivable user interaction flow and see how their system will respond before flipping to production.

Sunday

More basketball and a Dim Sum lunch with the Exec team.

More payment integration coding. Once I was satisfied that I had all my bases covered, I went about thoroughly testing the system. I nuked the database and started from scratch to make sure that nothing was dependent on data I had manually manipulated in the database. I added a Promo Code system so that I could give away some free exports at launch. I spun up my production servers and configured them depending on which role they played. I added Terms of Service and a Privacy Policy. Everything was go for launch.

The Launch

On Monday, I rested. Well, I rested from the project, but it was also my first day at Exec, so there wasn't much rest at all!

I have learned to wait an extra day between "finishing" a project and launching it. There are always one or two things you think of that need fixing, and you'll be thankful you waited. And so it was with this site. Monday night I came home and tweaked a few things, ready to go on Tuesday morning.

Tuesday (yesterday) morning I hit the Big Red Launch Button by sending out a few tweets, posting to Hacker News, and emailing a story to TechCrunch and Mashable.

Some Stats

The initial response has been ok but not overwhelming. The HN post only garnered a meer 34 points. I was expecting a bigger reaction there since the original Posterous acquisition thread got close to 600 points.

After the first day, only 27 people logged into the site out of ~1500 visits.

Four people actually bought export packages (all within the first hour of launch), for a grand total of $39.00 in revenue so far. One of those purchases came from someone who bought an upgrade after using one of the promo codes, and that made me happy.

I gave out a Promo Code on HN good for the first 25 people to use it. So far, only 14 have claimed it. Same story with a promo code I gave on Twitter several times. Only 3 of 10 claimed. It's somewhat frustrating to think that I can't even give this service away.

The Future?

I'm not sure if this project has legs, but it was very fun to build, and I have very positive feedback from the people that have used it. I think it would be a valuable service even if Posterous wasn't acquired. Being able to export your own data has value.

I could see it expanding to interface with other services that hold users' data (blogs, photos, etc).

As always, building is the easy part, marketing and finding users who actually want your product is the tricky bit.

Submit to Hacker News.

Joining Exec

2012-03-16T00:00:00-07:00

Once in a while, an opportunity comes along that you can't refuse. Two weeks ago, one such opportunity came knocking. After careful thought and deliberation, I am excited to announce...

I am joining Exec!

Exec is a great service that will let you outsource tasks or errands that you might not have time for or want to do. You can check out more info on the Exec homepage.

Exec just launched a few weeks ago, and is still very young. I will be joining as the 5th member of the team along side Justin, Daniel, Amir, and Matt. My first day is next Monday, March 19th.

I love the atmosphere of early-stage startups, and I love wearing lots of hats to get the job done. Exec combines several areas that I am very passionate about (real-time communication, scheduling algorithms and logistics, mobile development, and solving hard problems), so it feels like a natural fit. I will be mainly foucsed on developing the mobile apps, but I'm sure that's not all I'll be doing.

I have known Justin Kan from interacting with him at various Y Combinator events and even interviewing at Justin.tv last August. He reached out to me about the opportunity and vision of Exec, and I was sold.

I am very excited about working with Justin and team to move the vision of Exec forward. I am also very excited about getting back into the fray of the crazy days of an early-stage startup. I can't wait to get started.

Create Your Own Posterous with Jekyll, PHP, Mailgun, and S3

2012-03-12T00:00:00-07:00

A few weeks ago, I decided to create an email-powered blog that is hosted in an Amazon s3 bucket as a website. I wanted to be able to email new posts to the blog and have them published automatically. I use the email subject line as the title of the post and the email body as the text of the post (written in markdown).

This blog (the one you're reading right now) is powered by jekyll and hosted on s3, so I decided to reuse most of that setup and add some extra glue to handle posts by email. It does require an extra server to be running on the open internet (to handle incoming mail webhooks and publish new content to s3), but it can be a small, cheap 256MB slice since it does not have to handle any blog traffic (s3 takes care of that).

The result is http://mailblog.jazzychad.net. I am hoping to use it when I want to quickly publish small posts or passing thoughts.

Overview

Email is sent to a special address handled by Mailgun.

Mailgun posts the email data to a webhook on my mailblog server. PHP/Apache is running on the server to handle the incoming data.

The PHP script formats the email data into a new post markdown file, writes it into my jekyll _posts folder, and calls a do_blog.sh script.

The do_blog.sh script causes jekyll to compile the blog and then sync the files to my s3 bucket.

DIY

The whole process took about 3 hours to complete. Most of that time was spent struggling with RVM because ruby and multi-user rvm are nuts. I managed to distill the commands down to the magic incantation in this post.

All of the commands required to reproduce this setup are listed step-by-step below. I tested them in a brand new server instance, so it should work as advertised. If not, please let me know so we can debug.

Initial Setup

Disclaimer: These setup instructions are specific for setting up a server on the Rackspace Cloud. I used a 256MB RAM instance of Ubuntu 10.04 LTS.

On Rackspace, when you create a new instance, you are given a root account and password. This works differently on other cloud hosting services, so your initial setup steps may be different if you use a different provider. The goal is just to create a user account for yourself and give yourself sudo privileges.

Boot up a new server, login as root, change your password, update the system, then reboot.

# initial root login
   passwd
   apt-get update
   apt-get upgrade
   # reboot
   shutdown -r now

Log back in as root, add new user ('chad' in this example), and add to sudoers file.

   adduser chad
   apt-get install emacs22 -y
   chmod u+w /etc/sudoers
   # edit file to add new user
   emacs -nw /etc/suoders
   # return permissions
   chmod u-w /etc/sudoers
   exit

Install required packages

# install stuff
   sudo apt-get install git-core -y
   sudo apt-get install s3cmd -y
   sudo apt-get install php5 -y
   sudo apt-get install php5-cli -y
   sudo apt-get install build-essential -y

Install RVM and gems

#install rvm and gems
   curl -s -o rvm-installer https://raw.github.com/wayneeseguin/rvm/master/binscripts/rvm-installer
   chmod u+x rvm-installer
   # install globally as sudo. VERY IMPORTANT
   sudo ./rvm-installer stable
   source /usr/local/rvm/scripts/rvm
   sudo usermod -a -G rvm chad
   newgrp - rvm # the - is VERY important
   rvm pkg install zlib
   rvm install 1.9.2
   rvm use 1.9.2
   gem install compass --no-ri --no-rdoc
   gem install liquid --no-ri --no-rdoc
   gem install maruku --no-ri --no-rdoc
   gem install rdiscount --no-ri --no-rdoc

Additional Steps

# let www-data use rvm
   sudo usermod -a -G rvm www-data

# /var/www/ writeable
   sudo chmod o+w /var/www
   sudo /etc/init.d/apache2 restart

# configure s3cmd
   # make sure to have aws access keys setup at:
   # https://aws-portal.amazon.com/gp/aws/securityCredentials
   s3cmd --configure
   mv .s3cfg .s3cfg_mailblog
   chmod g+r .s3cfg_mailblog

# install blog template, mailblog-files, and jekyll
   git clone git://github.com/jazzychad/mailblog.git blog
   chmod g+w blog
   chmod g+w blog/_posts
   mkdir -p scripts/ruby/gems
   cd scripts/ruby/gems
   git clone git://github.com/jazzychad/jekyll.git jc-jekyll
   cd ~
   git clone git://github.com/jazzychad/mailblog-files.git

Configure you S3 Bucket

Go to https://console.aws.amazon.com/s3/home
Create a bucket named exactly like desired url domain (e.g. mailblog.example.com)
Click on your bucket
Click on Properties button
Click on Website tab
Check Enabled
Set Index Document: index.html
Set Error Document: 404.html
Click Permissions tab
Click Add Bucket Policy
Paste in bucket policy from mailblog-files/bucket_policy.txt,
Insert proper bucket name in policy
Update your domain's DNS to add CNAME to point to bucket domain

Configure and Customize Your Blog

You will want to replace all references to 'example.com' and system paths which have 'chad' in them. You can also customize the sass and layout files to style your blog however you like.

# configure and customize blog directory
   cd ~/blog
   grep -rHn "example\.com" .
   grep -rHn "chad" .
   # edit files to customize blog, update paths in Rakefile, etc

Setup do_blog.sh and Test

The do_blog.sh script will be called by your incoming mail webhook (this is why we added www-data to the rvm group). Place it in your home directory. You can test that everything is working so far by running it. This will publish your blog to your s3 bucket. If everything was setup correctly, you should be able to go view it at your mailblog domain (if the DNS has updated already) or the full s3 bucket url.

# get do_blog.sh
   # add do_blog.sh to home dir
   cp ~/mailblog-files/do_blog.sh ~/do_blog.sh
   chmod u+x do_blog.sh
   chmod g+x do_blog.sh
   # test setup so far
   ./do_blog.sh

Configure Mailgun

Tell Mailgun how to route incoming mail to your mailblog server. You can choose an email address you want to use and set the webhook on your server. You can choose any webhook address you want, just make sure it matches the path you use in the next step.

Login to Mailgun.net
Go to https://mailgun.net/cp/routes
Click Create Route
Filter expr: match_recipient("mailblog@domain.tld")
Add Action: forward("http://mailblogserver.domain.tld/mailgun/hook.php")
Add Action: stop()
Click Save

Add Webhook to Your Server

# add mailgun hook.php
   mkdir -p /var/www/mailgun
   cp mailblog-files/hook.php /var/www/mailgun/hook.php

You're Done!

Go ahead and try to send an email to your new mailblog address. A few seconds after sending, you should see your new post appear in your s3 bucket and your mailblog homepage update to show your new post.

Caveats

A few warnings. First, there is no access control. This means that anyone can post to your blog if they know your blog's email address. You could add some basic security to this by adding a check of the from address in the hook.php script (and also verifying the webhook signature value to make sure the call is authentic). So, a bit of security by obscurity (which is admittedly terrible and lazy).

Second, this setup only handles text posts right now. Eventually I would like to support handling image attachments to the emails and using the email text as the caption or something.

There are many improvements that can be made on this system, but this is a good start. Try it, and let me know what you create!

Repos

Custom jekyll gem: https://github.com/jazzychad/jekyll

Mailblog template: https://github.com/jazzychad/mailblog

Mailblog-Files: https://github.com/jazzychad/mailblog-files

March Madness Bracket Challenge 2012

2012-03-11T00:00:00-08:00

I have been running an NCAA March Madness bracket challenge on my website since 2005. It's back this year!

Head over to http://brackets.jazzychad.net and create as many brackets as you like.

You can also create pools so that you can rank your brackets against friends or co-workers. I know a couple of companies that use my site to run their office pools each year. Pretty cool.

BankersBox - A Redis-like API for localStorage

2012-03-05T00:00:00-08:00

Today I am happy to announce the open-sourcing of BankersBox, a javascript library I have been developing inside Twilio.

BankersBox is a Redis-like API wrapper for javascript client-side data storage. By default it uses localStorage as the persistence layer.

I have a more detailed writeup over on the Twilio Engineering Blog, and there is extensive documentation on the official BankersBox repo at GitHub.

Here are some of the things you can do with BankersBox:

var bb = new BankersBox(1);

bb.set("foo", "bar");
bb.get("foo"); // returns "bar"

bb.set("myobject", {greeting: "hello", thing: "world"});
bb.get("myobject"); // returns the object

bb.set("count", 10);
bb.incr("count"); // sets "count" to 11, returns 11

bb.incr("newcount"); // sets "newcount" to 1, returns 1

bb.lpush("mylist", "hello");
bb.lrange("mylist", 0, -1); // returns ["hello"]

bb.rpush("mylist", "world");
bb.lrange("mylist", 0, -1); // returns ["hello", "world"]

bb.sadd("myset", "apple");
bb.sadd("myset", "oragne");
bb.smembers("myset"); // returns ["apple", "orange"]
bb.sismember("myset", "apple"); // returns true
bb.sismember("myset", "lemon"); // returns false
bb.scard("myset"); // returns 2

BankersBox has an MIT license, so please fork and contribute!

My Mixergy Interview

2012-01-23T00:00:00-08:00

Last week, Andrew Warner asked to interview me on Mixergy about my experience with Y Combinator and Notifo.

We recorded the 90-minute interview on Friday at noon. We had a very brief pre-interview session in which Andrew made sure a few facts he had were correct. Other than that, I had no prior knowledge of the questions he would ask or where the interview would go. This made the entire dialog feel very natual and candid. Andrew was a very professional interviewer and a pleasure to talk to. There were many parts of the story which weren't able to be told (we ran out of time). Someday I will write an unabridged post-mortem of the entire Notifo story.

In the mean time, please enjoy my interview here.

Fouling Out and Moving On

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

Today is a bittersweet day. I am closing one chapter of my life and opening a brand new one.

My startup is dead.

You can read the official announcement on the Notifo Blog. After 20 long months of trying to build the best notification platform for the modern, mobile web I must come to terms with the fact that I failed in one critical area: creating a viable business model. There is no money left, so the journey must end here.

I am feeling alternating waves of several different emotions as the finality of this decision sinks in: anger, grief, disappointment, guilt, relief, sadness, anxiety, excitement, and fear. I honestly believe that I tried my hardest to make things work. After it looked like Notifo was not going to be the success I hoped it would, I tried creating several other apps in hopes of scoring a hit and reviving the company. No such luck. I am most disappointed in myself because even though I feel I tried my best, I must admit my best was not good enough. I have learned so much going through this process, and yet I feel as if I am letting those people who believed so strongly in me down.

The gist of Paul Graham's essay "How Not to Die" is "Don't give up." Well, sadly I give up. I'm done. After critical examination of my physical, mental, emotional, and spiritual health (not to mention for the sake of my marriage), I have decided that I cannot continue on this way. I need to reset my life and get back on track for a while before wearing the founder hat again.

Fouling Out

I was discussing my situation with a close friend a few weeks ago. I told him things were looking bad, and I was looking for my next move.

He asked, "So what happens when you foul out?"

I said, "I don't know. I guess I'll find out."

I still don't know exactly. I'll be dealing with the process of shutting down the company over the next couple of months as I deal with taxes, legal papers, refunding investors the little money that is left, etc...

But, I liked the way he phrased that question. The world is filled with sports metaphors, and being a huge baseball fan I really enjoy that variety. Usually when people goof up or fail they are said to "strike out." I played little league baseball as a young lad, and as a batter, striking out is no fun. There are two ways to strike out: looking and swinging. Striking out looking is the absolute worst feeling. It means you just watched a perfectly good ball fly by and did nothing about it. Striking out swinging is a little better because at least you made an effort to swing the bat, but you just didn't make contact.

Fouling out is still hard to swallow, but it means something different. It means you stood up to the plate, swung the bat as hard as you could, and made contact with the ball. But, in the end, you're still out.

This startup was my first at-bat in the major leagues. I stood up to the plate, tried as hard as I could, made contact a few times, but was never able to put the ball in play. Now my at-bat is over. The good thing is, there is more than one at-bat per game, but it might just be a while before I step up to the plate again.

Moving On

As I saw this day approaching, I starting preparing for my next role in life. During the past few weeks I spoke with several companies in the SF Bay Area about potential opportunities with them. I hope to write another post sometime about that whole process.

After making some very tough decisions, I am happy to announce that I will be joining Twilio as a Senior Software Engineer working toward the betterment of the real-time web, something I am deeply passionate about. I have had a great relationship with Twilio for the past two years working with their products and getting to know people that work there. Twilio's vision of improving communication in the cloud is something I firmly believe in, and I am excited to help create the magic that they provide to improve the lives of developers the world over.

A bittersweet day. One chapter closes, another one begins...

Further discussion on Hacker News.