Amber on Rails

Building Stripe's API

2013-02-28T00:00:00-08:00

Last week, I gave my first conference talk at the API Strategy and Practice conference in New York. Pretty exciting!

I thought it would be interesting to talk about Stripe's API, particularly lessons learned and what kind of things we did to try to make the API as easy to use as possible. I've included the slides below, but most of the content isn't on the slides so I'll try to cover some of the highlights.

Of course, we don't claim to have all of the answers. Every API is different, and a lot of what you see on Stripe today is the product of a lot of thought and discussion, as well as a lot of trial and error. We're constantly experimenting and improving.

Hopefully you find something here applicable towards your own API! (:

Highlights

Make it easy to get started

It may sound like a no-brainer, but the best way to get people to try out (and hopefully eventually use) your API is to make it really easy to get started.

To that end, we do things like including pastable code snippets throughout our site and documentation. One of the first things you'll see on our front page is a curl snippet you can paste into a terminal to simulate charging a credit card.

Regardless of whether you have a Stripe account or not (if logged in, we fill in your test API key, otherwise, it's a sample account's API key), you can see the Stripe API in action.

All of our documentation code snippets are similarly possible to directly copy and paste—we try to embed as much information as possible (API keys, actual object IDs from the account, etc.) so our users don't have to.

Language-specific libraries and documentation

Since Stripe's API speaks HTTP and JSON, you could easily integrate it into your application with any standard HTTP client library. However, this still requires constructing requests and parsing responses on your own.

We maintain and support open-source libraries in some of today's most popular web languages. It turns out people are pretty attached to their favorite languages.

We had a lot of internal discussions about whether we actually wanted to support our own client bindings or allow the community to organically start and maintain the projects themselves. Is it worth owning the projects if it means that you might have to maintain libraries for languages or frameworks in which you don't have expertise?

Maybe.

Official libraries have the benefit of being consistent: they all have the same level of quality, support the same interface, and get updates at the same time. Having our own libraries also makes it easier for us to have language-specific documentation and help our users with any problems they might be having with a particular integration.

We decided that it was worth it, but this may not be the right answer for everyone.

Have a focused API, but allow flexibility

We've found that it's critically important to keep the API focused and simple.

It's often tempting to add new features that are not obviously necessary to the core API. For example, our users frequently want us to add better analytics, tax calculations, or to send customers receipts¹. While these things are nice, every feature you add makes the API more complex and cluttered.

You can instead give your users the tools to be able to write their own extensions. We allow our users (and third party applications) to hook into Stripe in a couple of ways:

Webhooks

Stripe uses webhooks to let our users know when some interesting event has happened. This ranges from events triggered by an API call, like charge.succeeded or charge.refunded, to asynchronous events like customer.subscription.trial_will_end.

Our aim was to make it easy to layer additional logic on top of Stripe events (like sending customer receipts or enabling push notifications). Giving our users the ability to build this kind of customized functionality allows them to control the entire experience for their users as well.

Stripe Connect

Stripe Connect, an API we released just last year, is another way of building on top of the Stripe platform.

Connect is an OAuth2 API that allows a Stripe user to authorize access to their Stripe account to a third-party application. We've seen a variety of applications built on top of Stripe so far: marketplaces and checkout pages let users "plug in" their Stripe accounts to accept payments, and analytics dashboards fetch Stripe data in order to show interesting graphs or patterns.

Provide a testing environment

One of the most important things you need with an API is a great test/sandbox environment. This is particularly important for a payments API—our users shouldn't have to make live charges when they're trying to test their integration.

In our test environment, we allow users to send test webhooks of any type and provide handy test card numbers that trigger certain errors (like declines).

Doing this allows them to easily test the behavior of their own application in the face of different scenarios instead of having to manually trigger things that are nondeterministic, like declines, or time-dependent, like expiring subscriptions.

Help your users debug

We're developers too. We know from experience that debugging is a disproportionately large portion of the development cycle. We also (unfortunately) know that sometimes you spend a lot of time debugging something that eventually turns out to be really obvious or silly.

For common or easy errors, you (the API) likely know exactly what's wrong. So why not try to help?


    >> Stripe::Customer.create
    Stripe::AuthenticationError: No API key provided.  (HINT: set your API key
    using "Stripe.api_key = ".  You can generate API keys from the 
    Stripe web interface.  See https://stripe.com/api for details, or email
    support@stripe.com if you have any questions.)


    >> Stripe.api_key = TEST_KEY
    => ...
    >> Stripe::Charge.retrieve(LIVE_CHARGE_ID)
    Stripe::InvalidRequestError: (Status 404) No such charge: ch_17SOe5QQ2exd2S;
    a similar object exists in live mode, but a test mode key was used to make
    this request.

On the other hand, some errors are harder to diagnose (especially from the API's end, since you have limited information about what your user is actually trying to accomplish).

Where possible, we absolutely think it's worthwhile to try to anticipate our users' errors and help as much as we can.

Dealing with Change

Lastly, dealing with change is never fun. As much as you hope you'll never have to change the API, sometimes you need to make changes and sometimes those changes are backwards-incompatible.

There's no easy answer to versioning APIs. We keep a per-user version which reflects the state of the API the first time the user made an API request. Most of our new features are additions that aren't backwards incompatible, and they just work automatically for everyone.

Whenever we make a backwards-incompatible change², however, it doesn't affect the API behavior for any of our current users. Users can then choose to explicitly upgrade their version in the dashboard (after reviewing the detailed changelogs) or can send a version override header in any API request to test the behavior of a specific version.

Questions?

If you have any questions, feel free to email or tweet at me.

Thanks for reading!

Footnotes

Stripe may very well end up implementing these particular features in the future, but it's not generally feasible to try to accommodate everyone's use case.
We try to avoid this as often as possible.

Credit for various parts of the presentation content go to Greg Brockman, Sidd Chandrasekaran, Evan Broder, and Ross Boucher. And of course, credit to everyone at Stripe for actually doing the things I outlined in the talk.

Private methods in Ruby

2012-12-21T00:00:00-08:00

Consider the following code:

(This blew my mind the other day.)

class Hello
  def public_hello
    self.private_hello
  end

  private
  def private_hello
    puts "Hello!"
  end
end

You would expect that this would work fine: private_hello is a private method, but it's being called from within the class.

Nope.

>> hello = Hello.new
=> #<Hello:0x10d0cc200>
>> hello.public_hello
NoMethodError: private method `private_hello' called for #<Hello:0x10d0cc200>
  from (irb):3:in `public_hello'
  from (irb):13

I spent an embarassingly long time trying to figure out what was wrong ("Do I just not understand how private methods work?!"), and confused one of my coworkers as well in the process of doing so.

However, it turned out to be old news. One post puts the issue pretty succinctly:

private methods can never be called with an explicit receiver, even if the receiver is self

So, the problem with self.private_hello is that the private method is being called on an explicit receiver, even though the receiver is technically the same object—you'd need to call private_hello by itself instead.

Having learned access control modifiers in Java first, I thought this was really bizarre. I guess I need to learn Ruby a little better! (:

Discount Code Cards

2012-10-31T00:00:00-07:00

I love career fairs. In college, I loved going to career fairs to get swag—EECS majors are definitely ridiculously spoiled when it comes to getting free things like shirts and food (I even got a poker set once!).

Anyway, while planning our trip to the UC Berkeley Startup Fair this year, I wanted Stripe to stand out so I thought pretty hard about what my favorite types of things to get were.

Number one was shirts, probably. We already had that covered. But I also remembered happily going to the Dropbox booth every semester to get those nifty free space cards: discount codes that you can apply to your account to get 5-10gbs of space at a time.

What if we made free Stripe processing cards? Since we'd be going to a career fair where all of the students were software engineers, and more specifically, very hacker/startup-minded, it made even more sense as a marketing effort.

Implementation

Most of the discount code implementation was already in place from our invite system, so all I really needed to do was generate an extra couple of hundred codes for use at the career fair. The hard part, however, was trying to figure out how to print them.

Traditional business card printing services won't let you print out cards with unique codes on them unless you go through some kind of custom order. I didn't have too much time to spare, so John told me about this nifty hack he used with Moo.com (I later found the same solution on Quora).

Moo lets you do this cool thing where you can print a variable number of designs per order—for example, if you want to have a different photograph on the back of each business card. We found that if you upload 100 different "designs" for 100 different cards, each card would be unique.

Their Text-o-matic tool lets you create up to 100 "designs" that are text only:

I took one look at the page and realized I could easily use a script to automatically generate all of the cards (sigh of relief when I discovered the page was not written in Flash):

// Create an array of the discount codes you want to use here
var texts = ['CODE1', 'CODE2', 'CODE3'];

// Click buttons on the page for each code to create the design
texts.each(function(text) {
  jQuery('#txtFrontText').val(text);
  jQuery('div#divMakeCard input').click();

  // Set color/size
  jQuery('#a_000000').click();
  jQuery('#aReverseColours').click();
  jQuery('#aZoomOut').click();
  jQuery('#aZoomOut').click();

  jQuery('#btnSaveCard').click();
});

Really, really simple but pretty hacky (just run this in the developer console on the web page). After this, you'll just go into their general template wizard and upload the design for the other side of the card to finish them up.

Improvements

Of course, there are several drawbacks to this approach:

You can't really design the "variable" side of the card. You either need to upload the images yourself, or use Text-o-matic, which has a super limited set of options (you can't even add a new line or style separate parts of the text).
You can only print 100 cards per order. Since the max number of designs you can upload is 100, if you try to double the card count to 200, you'll end up with every unique card twice.

So what can you do?

Probably the only legitimate way to do this is to generate the to-print PDF yourself, either using some kind of software (like InDesign) or hacking something in PostScript. I'll be sure to write a follow up post if I end up doing either!

Goodbye, Wordpress!

2012-09-09T17:46:00-07:00

As you may or may not have noticed, this blog has recently undergone a pretty drastic change. Aside from pure design upgrades, I've moved off Wordpress (good riddance!) and joined the geek bandwagon by writing my blog with Jekyll. Here's my obligatory "I moved to Jekyll" blog post!

Why Jekyll?

Wordpress is bloated. I've never even used a third of the features—I wanted something super simple and lightweight that I could gradually add onto (if I wanted to).
Custom styling. Wordpress, I've found, is a nightmare to try to style. There are layers upon layers of templates, and I really hate trying to navigate through PHP code. Jekyll, by contrast, is a lot cleaner and easier to deal with.
Markdown/Vim > Wordpress editor. I've gotten to the point where I basically need to use Vim for everything (code, obviously, but also notes, to-do lists, etc). Markdown is great, and I like how all of my blog posts are now under version control.
Static pages. Blogs are almost pure static content (with the exception of comments, search, etc), so I figured that it would be simpler (and faster) to just have an entirely static site. This makes deploys super easy as well.

My setup

I'm not going to go through in depth how I got my Jekyll set up, because there are more than enough of those guides out there. Here are some of the main components that I used:

Standard boilerplate from Tom Preston-Warner himself, with pagination.
Category generation plugin from Recursive Design.
Disqus for comments. I don't really buy into the whole argument against using Disqus for static sites (that it defeats the purpose of having a static site).
RSS feed template from Recursive Design.

All of the templates and styles are handwritten. Being able to customize all aspects of the blog is definitely one of the major perks of using Jekyll!

Elasticsearch Space-savers

2012-03-18T18:13:41-07:00

After setting up ElasticSearch, you'll be faced with the task of optimizing your index configuration for speed and for size. There are millions of documents in our index, and, for performance, it’s important that all of that be kept in memory. As a result, index size is pretty important. We spent a while tweaking ElasticSearch to minimize its index size, and it turns out that there’s a decent number of low-hanging fruit.

_source

For example, ElasticSearch stores the original data along with the indexed data for each document and returns the full document with each search result. We just wanted ElasticSearch queries to assemble a set of document IDs to be fetched from the database, so this overhead is unnecessary. Cutting this data shrank our search index four-fold.

:_source => { :enabled => false }

_all

In addition, ElasticSearch stores an aggregated _all field on each document, which contains the analyzed output from all of the other fields in the document. This doesn’t add any new information, and its purpose is just to simplify the query interface.

We don’t need to be able to query all fields (for example, we only use user IDs to partition the index); setting a flag to exclude these from the _all field and preventing them from being analyzed saved us another 4-5GB for ~2 million documents.

'id' => { :type => 'string', :include_in_all => false }

Multi-field types

Other problems were a little trickier. How do we minimize the size of the email address index given that we’d like to be able to perform both prefix and substring searches on them?

Email addresses may be very long and overflow our ngram tokenizer (which maxes out at fifteen characters), and so we decided to construct a multi-field tiered index for certain fields in to accommodate all of the search use cases. We don't know if this is a best practice, but it seems to work pretty well for us.

Real-time Search with MongoDB and Elasticsearch

2012-03-15T15:15:17-07:00

Something I worked on a couple of weeks ago at Stripe was overhauling the entire search infrastructure. If you’ve ever used the search feature in manage, it may have appeared sluggish or may have even timed out on you - this is mostly due to the fact that our search consisted of running a query over our database (which you can imagine is very slow for full-text search).

We finally decided to make the switch to a dedicated full-text search engine and chose ElasticSearch, which is a distributed RESTful search engine built on top of Apache Lucene. I won’t go into the details, but you can read about ElasticSearch on the official website.

Setting up ElasticSearch

To set up ElasticSearch, I followed a third-party tutorial - it’s pretty straight forward, although you should be sure to swap in the current verison number.

Hooking up MongoDB

Assuming you’re already using MongoDB for the data that you want to index¹, you’re probably wondering how to hook it up to index documents in real-time - this is one of the major hurdles that we faced. ElasticSearch has a built in feature of Rivers, which are essentially plugins for specific services to constantly stream in new updates for indexing.

Unfortunately, there’s no MongoDB River (probably due to the lack of built-in database triggers), so I did some research and realized that I could use the MongoDB oplog to continually capture updates to our main databases.

The oplog is a special collection held by MongoDB for replication purposes - I was able to make use of a tailable cursor (which performs similarly to the tail -f command) for shipping new updates from MongoDB to our search server (we’re using Tire as our Elasticsearch Ruby DSL).

def initialize
  @host = ENV['MONGO_RUBY_DRIVER_HOST'] || 'localhost'
  @port = ENV['MONGO_RUBY_DRIVER_PORT'] || Connection::DEFAULT_PORT

  @db_whitelist = %w(payments customers invoices)

  @stream = Queue.new
  @max_bulk = 10000

  # Or, just set up a connection the normal way if you’re not
  # using a repl set
  @connection = ReplSetConnection.new(['database1', 27017],
                                      ['database2', 27017],
                                      ['database3', 27017],
                                      :read => :secondary)

  local = @connection.db('local')

  # Change to oplog.$main if running mongod as a master instance
  oplog = local.collection('oplog.rs')

  @tail = Cursor.new(oplog,
                     :tailable => true,
                     :order => [['$natural', 1]])

  while true
    tailer
    indexer

    # In production, we keep this constantly running in a busy
    # loop; we constantly have new things to index
    # sleep 5
  end
end

The code here basically tails the oplog and reads off new operations, pushing them onto @stream, until there are none left or we’ve reached the max number of entries that we want to batch at a time:

def tailer
  # While there are new entries
  while @tail.has_next?
    _next = @tail.next

    # We only want to index specific collections
    match = /some namespace regex/.match(_next["ns"])
    if match && @db_whitelist.include?(match[1])
      @stream << [match[1], _next]
    end

    # Upon hitting the maximum bulk size we want to send over
    break if @stream.length >= @max_bulk
  end
end

Afterwards, we pull rows out of @stream, transform them into hashes that we actually want to index into Elasticsearch, and bulk index them via Tire. Rinse and repeat.

def indexer
  bulk_index = []
  while !@stream.empty?
    _next = @stream.pop
    item = _next[1]
    type = _next[0]

    # Our TransformRow.transform_for method just returns a hash
    # to index. Ex. {:type => “customer”, :name => “Amber”}
    new_row = TransformRow.transform_for(type, item['o'])

    # Add keywords if they exist on the database object
    bulk_index << new_row
  end

  # Bulk index the data via Tire
  if !bulk_index.empty?
    Tire.index "search" do
      import bulk_index
    end
  end
end

Of course, this is a very basic synchronous example - you could imagine making this into a more flexible asynchronous producer-consumer model.

In addition, this sort of naive first pass doesn’t save any state, so if the driver crashes due to an timeout on the database side or if the search server is down, the restarted driver will start again from the very beginning. To combat this, I simply wrote a timestamp to /tmp to keep track of the last record indexed, and queried the collection to start at that specific timestamp the next time around.

(Update: I recently changed this to write to permanent storage instead; although not necessary, it's simple enough to do and is a better idea in general.)

@tail = oplog.find({
  'ts' => {'$gte'=> BSON::Timestamp.new(@last_ts, 0) }
})
@tail.add_option(Constants::OP_QUERY_TAILABLE)

But wait, there’s more! Scanning the entire collection in most restart scenarios can be pretty expensive (by the way, the oplog doesn’t allow any indexes), especially if your oplog is large like ours, at 2GB.

You can take advantage of a special flag for this kind of use only, called OPLOG_REPLAY. This flag is meant for replication purposes - it first starts from the bottom of the log and searches upward for around 100MB or so, assuming that you just restarted (which is usually the case if the tailer crashes and restarts immediately). If it can’t be found, it’ll continue by traversing extents in the most efficient manner possible.

@tail.add_option(Constants::OP_QUERY_OPLOG_REPLAY)

Running this tailer as a daemontools service, we were able to attain nearly real-time search latency. It takes around 3-5 seconds from the time a record is created or updated to when it gets indexed (and is searchable) in ElasticSearch - pretty cool!

Footnotes

It’s possible to use ElasticSearch as a data store itself (it’ll store the document data as well as the index data), but I’m not convinced this is a good idea in practice.

2012 CS Resolutions

2012-01-03T20:43:36-08:00

Matt Might's "What every computer science major should know" article is fantastic. I regret not reading this article in the beginning of the holiday break, but I guess I can use this as sort of a "2012 CS Resolutions" list since everyone seems to be making New Years resolutions right about now.

Master LaTex

In school, I never really used LaTex for typing up assignments until last semester for our project design docs. I actually don't know how feasible this will be to do now that I'm in the "real world", but I'll take any chance I can get to write up documents in pretty LaTex!
Be better at UNIX/Sysadmin-ing

Being traditionally a frontend person, I don't have a crazy amount of experience working with command line or doing sysadmin-y things. Sure, I know how to do some elementary things and I'm a vim fanatic (by the way, vim > emacs). However, I'd like to be able to count myself as an expert at writing shell scripts or configuring a web server.
Learn a couple of new languages

Not for the sake of "adding new languages on my resume", which is absolutely useless, but for exploring and mastering new programming paradigms. A few that sparked my interest/I've been meaning to pick up: Scala, Haskell, Erlang.
"Understand a computer from the transistors up"

Being an EECS major has exposed me to all of the "levels" of a computer, but I never took much effort in trying to piece things together and much of my EE knowledge is long forgotten.
Get some hands-on experience with Operating Systems

The semester I took it, Berkeley dramatically changed their traditional Operating Systems class into a hybrid (read: less in-depth/useful) systems class that covered minimal multi-programming and memory/scheduler topics but didn't actually give us any practical experience with how operating systems work. In particular, I'd love to learn more about file systems and possibly tinker around with the Linux kernel.
Catch up on reading systems papers

I have a giant list of systems papers to go through/that I semi-went through during winter break courtesy of my friend Sunil and the graduate cloud computing course at Berkeley. In addition, Stripe has super cute academic paper reading lunches, which I'm really excited about! I'm sure this will be an easy resolution to keep up with. (:

After reading the article, I'm not super satisfied with what I learned in my 3.5 years as a Berkeley EECS major. I'm looking forward to filling in the gaps now that I've graduated!

Paxos/Multi-paxos Algorithm

2011-12-02T12:53:33-08:00

A couple of posts ago, I talked about the distributed systems programming class I was taking here in my last semester at Berkeley. Our projects are really cool - we've done everything from a quorum KVS to a distributed lock manager, and for our final project, my group chose to implement Multi-paxos. I'll start by explaining general Paxos first.

Basically, Paxos is an protocol (or technically, a "family" of protocols, says Wikipedia) that solves the problem of getting a group of nodes to agree, or reach consensus, on a single value.

Why is this important?

If there's a stable master, there's hardly any use for this, because the master can just decide and propose values itself and have the other nodes always follow it. However, what if leader election fails (and it sometimes does), and there are two nodes proposing values?

The Paxos algorithm ensures that only one value is chosen out of all of the proposed values. Where this algorithm comes in handy is when you'd like your distributed system to decide on a sequence of values, or in other words, a consistent ordering over a set of values. As Ayende Rahien describes, if these values are events, then you know that all of the machines in the cluster have the same state or subset of the state.

Algorithm

The Paxos algorithm is divided into two phases, the prepare phase, and the accept phase.

Disclaimer: the text in this section is partially paraphrased from Leslie Lamport's excellent Paxos Made Simple paper.

Prepare Phase

In the prepare phase, the proposer selects a proposal number n (which is greater than any n it has previously sent, and distinct from any n that any other proposers' n values, I'll discuss this more later) and sends a PREPARE request to a majority of the acceptors.

On the acceptor side, if it ever receives a PREPARE request with a proposal number n greater than that of any other proposal number n that it has previously received, it responds with a "promise" to not accept any proposals with a lower numbered n in the future and the value of the highest-numbered proposal that it has already accepted (if any).

Starting to sound confusing? I had to read this over several times before I actually understood it, so maybe the pseudocode below will help.

# Proposer
for acceptor in acceptors
  send :prepare_req, next_n()

# Acceptor
if (req.n > highest_proposed_n)
  highest_proposed_n = req.n
  reply :prepare_resp, {
    :n => highest_acc.n,
    :value => highest_acc.value
  }

Accept Phase

After a proposer has received a response to its PREPARE requests from a majority of the acceptors, it then sends an ACCEPT to those acceptors with a value v, where v is the value of the highest numbered proposal among the responses, or any value if the responses reported no other proposals.

By contrast, when an acceptor receives an ACCEPT request, it always accepts it unless it has already promised not to in the prepare phase.

# Proposer
for acceptor in acceptors
  send :accept_req, responses.argmax { |i| i.n }.value }

# Acceptor
if (req.n >= highest_proposed_n)
  highest_acc = {:n => req.n, :value => req.value}
  reply :accept_resp

Multi-paxos

All this talk about Paxos. How does Multi-paxos fit in?

I mentioned in the introduction that one of the main useful applications of the Paxos application is having the group of participants decide on a sequence of numbers. Since one round of Paxos results in a decision of one value, the naive way to go about finding a sequence of numbers would be to run Paxos many times, right?

One optimization that can be made in this case, assuming a single stable leader, is to skip the prepare phase. If we assume that the leadership will remain "sticky", there is no need to continue sending out proposal numbers - the first proposal number sent out will never be "overridden" since there is only one leader.

Thus, we only need to do the prepare phase once. In subsequent rounds of Paxos, we can just send the ACCEPT messages, with n as the proposal number used in the original PREPARE request and an additional parameter that indicates the sequence number (the current round we're in). We don't have to worry about the worst case where leadership isn't stable (or distinct), because the algorithm will degrade gracefully into the general Paxos algorithm (both prepare and accept phases for each round). Cool!

Other Considerations

Persistent Storage

Machines must keep certain things in persistent storage to be able to recover from failures. In particular, acceptors need to be able to remember which PREPARE requests they have promised to follow, and which ACCEPT requests they have responded to in order to make decisions about which proposals to promise to and to pass necessary information back to the proposes.

Distinct Proposal Numbers `n`

In order for the algorithm to work, each proposer must propose monotonically increasing proposal numbers n that are distinct from any other proposers' numbers n.

To achieve this, we can assign disjoint sets of numbers for each proposer and have them only choose numbers from their own set (ex. assign each node a unique prime number, they choose multiples of that prime number).

Or, if we're assuming static membership of participants, assign each node a unique number i between 0 and k, where k is the total number of participants, and n = i + (k * round_number).

Conclusion

tl;dr Paxos is for getting a group of machines to agree on a value (or more usefully, provide a consistent ordering on a sequence of values). Multi-paxos is an optimization on using Paxos for consecutive rounds, where you can skip one of the phases if you assume a stable leader.

Hope this post was interesting and/or informative! Similar to the eventual consistency post, I don't claim to be an expert in this area, so I'd love to hear any comments or corrections.

Using Javascript Timeouts for Performance

2011-10-29T12:54:50-07:00

Wait, what? Doesn't setting timeouts in Javascript delay a piece of code from being run for an X amount of time, so how could it possibly help with performance?

Imagine writing a Javascript app that is doing some large, computationally-expensive task like adding a five thousand elements to the DOM:

var list = document.getElementByTagName("ul")[0];
for (var i = 0; i < 5000; i++) {
  var newElement = document.createElement("li");
  list.append(newElement);
}

Since Javascript is single threaded, executing Javascript will suspend any user interface interaction and/or updates to the page - some browsers like Chrome will even try to kill the script if it's been running for too long (have you ever seen that sad face "Oops" page?).

With the use of timers, we can split up the code into different segments (ex. 10 loops doing 500 DOM additions each):

var curr = 0; var max = 4999;
var step = 500;
var list = document.getElementByTagName("ul")[0];

setTimeout(function() {
  for (var end = curr + step; curr < end; curr++) {
    var newElement = document.createElement("li");
    list.append(newElement);
  }
  if (curr < max) { setTimeout(arguments.callee, 0); }
}, 0);

Setting the timer to 0 will tell the browser to fire off the timers as quickly as possible (in most browsers, the minimum timer delay is around 10-15ms). However, since the code is broken up into smaller pieces, it will allow the browser to do things like render updates to the page and respond to user events - basically, being more responsive (this is good!).

Eventual Consistency

2011-10-17T15:38:42-07:00

I mentioned in my previous post that I was taking a Programming in the Cloud class on distributed systems and programming this semester, and one of the perks of this class is that we occasionally have speakers from the industry come in to talk about various topics.

Last week, Doug Terry from Microsoft Research came in to speak about eventual consistency, which I found super, super interesting. I don't claim to be an expert on the topic now, but here are my notes (more or less from memory). First, the two opposite sides of the spectrum:

Strong vs. Eventual

Strong Consistency - guaranteed consistency across replicas

Strong consistency guarantees, well, strong consistency. Any read always returns up-to-date data, although this may result in lower availability since you're limiting the machines that you're able to read from to keep this guarantee.

Eventual Consistency - all replicas will "eventually" become consistent.

Although this weaker form of consistency has better availability because you can read to/write from any machine, you can only hope that the data will be fresh (for some applications, this is enough).

And everything in between

This isn't an exhaustive list of consistency models, but a couple of other models in the middle of the spectrum that Doug went over that day:

Read My Writes - guaranteed to be able to read updates you write

In applications where you're doing some sort of read then update operations (like x+=1), it's very important to be able to your own writes. The example Doug gave during lecture was a baseball analogy, where a scorekeeper is keeping track of the current score of the game with operations like homeScore +=1 for every home run scored for the home team. It's a different story if there are multiple scorekeepers, where you might need some causal consistency guarantees, but a single scorekeeper must at minimum be able to read his own writes.

Afterwards in class, we had a discussion about the various ways that this consistency model could be implemented. There needs to be some sort of versioning system for the clients to be able to compare with the machines to determine if their writes are stored there or not, or as an optimization, the client could store the writes locally and always be able to "read their own writes" if they take the union of their write set and any other machines' write set.

Consistent Prefix - updates returned are some prefix of all the updates, with no gaps

In case the title didn't make sense, a "consistent prefix" means that some prefix of all of the writes (assuming the writes have a global order) are applied such that the prefix is consistent ("up to date" up until the last write in the prefix, with no gaps).

For example, if the writes are A, B, C, D, E, F, you will be able to read some consecutive set of these writes, starting with A. Note that the empty set is also trivially a consistent prefix.

Why is this useful? Following the baseball analogy from before, if you are recording score writes of A: 1, B: 2, A: 3, B: 6, A: 5, B:7 and you don't have a consistent prefix guarantee, you could be reading a database that only has the third and last writes applied, giving you A: 3 and B: 7 when in reality, that combination of scores never existed.

Monotonic Reads - for each client, guaranteed to read a more recent or at least the same set of updates

Monotonic reads guarantees that you'll never "go back in time" in terms of seeing updates - you'll always see a set of updates that is at least as new as the updates you saw the last time you read from the system. The implementation of this requires a client to keep some kind of version of when it performed its last read, and search for a machine that has at least those writes. However, like Read My Writes, we can apply the same optimization of keeping a read set on the client (and performing a union whenever reading from the system).

Since we're only concerned with reading data that at least as fresh as the last time we read it, we can also introduce a notion of "stickiness" or "affinity", where a client stays with the last machine it read (until it goes down, at least) instead of re-searching for another machine that is more up-to-date. Assuming a single machine will never lose any updates it has applied, staying with the same machine is trivially monotonic.

Bounded Staleness

Last one! Hopefully you find this fascinating (like I do), and not boring. The idea of staleness allows consistency to be defined in terms of how old a replica can be compared to the most up-to-date data. In some applications, it's okay to have the data be a little stale - for example, weather reports can be a couple hours old. Strong consistency is a special case of Bounded Staleness where the amount of staleness is none.

Conclusion

Wow, this blog post took longer than I thought it would to write. I'm really interested in these topics (and databases/distributed systems in general), so I'm pretty excited for what the class has in store for us for the rest of the semester!

Again, I don't claim to be an expert in this field (and most of these notes are from memory), so feel free to point out any mistakes/incorrect assumptions or start a discussion in the comments. Thanks for reading! (:

Sorry for the long hiatus!

2011-10-05T22:51:57-07:00

I know I always write a post like this every couple of months or so, but I swear I'm coming back to blogging soon!

It's my (probably) my last semester at Berkeley, and I'm really excited and terrified at the same time. My workload this semester is intentionally light (well, "light" by Berkeley EECS standards) because I want to focus more on working on awesome side projects, but I've still been bogged down with projects and interviews.

I'm currently taking CS162, which was originally the upper-division OS course at Berkeley but now is an "introduction to systems" course, and a crazy fun experimental Programming in the Cloud class which focuses on distributed systems programming. Both of these classes have got me thinking about what I actually want to do when I graduate, because although I've primarily been a frontend person (go look at my portfolio), I'm super interested in databases and distributed systems and would love to learn more about these topics.

And speaking of graduating/jobs, I got my first ever full-time offer last week, from Google! I've also been going on a ridiculous amount of interviews with other large companies (Facebook, Microsoft, etc) and small startups trying to find a project I could be passionate about. Who knows, who knows.

Also - sorry, this post seems to be very scattered; I'm tired from working on my CS162 project - I went to my last ever (tear) Yahoo hackathon a couple of weekends ago, and we had a blast building a multiplayer/realtime WebGL Bomberman game called Bombermen. We won an honorable mention and I'm currently in the process of cleaning up the code (JavaScript at 3am = messy, unorganized JavaScript), so keep a lookout for a demo on my portfolio and/or HackerNews sometime soon!

Subtle Inset Styles

2011-08-18T20:45:08-07:00

It's the mark of a great designer when someone comes to your site and knows it looks good, but doesn't know why. I love using subtle styling in my designs and one of my favorites is applying inverse drop shadows to give the appearance that something is inset.

Take my portfolio, for instance. If you look carefully, you'll notice that the text has a thin white outline on the top of the text to make it look carved in:

How do you achieve this, you ask? Simple, just add the following style to your text - you can adjust the colors, blur, and position of the shadow to your own tastes.

p {
    text-shadow: white 0px -1px 0;
}

Another type of subtle styling I love is inset styling for text fields. I don't really like the standard UI for browser text fields, so I always override it (border: 0px; outline: none; for the win!) and apply my own minimalistic styling.

I've always really enjoyed the subtle inset style on Grooveshark's login fields (they use background images), but only recently discovered the CSS way of doing it, with box shadows. Well, I won't keep you in suspense any longer; here it is:

input.field {
    box-shadow: inset 0 1px 1px 1px #dedede;
}

Don't forget to add the -webkit and -moz prefixes to make sure your code is cross browser compatible! When done correctly, it should look like this:

(That's a sneak peek of something new I'm working on!)

Ajax Partial Loading

2011-07-30T04:35:21-07:00

In today's applications, it's common to use AJAX to load dynamic parts of a website without having to do a full page refresh. With Rails, it's easy to template these changes instead of using Javascript to update the DOM structure manually.

Imagine you have some portion of the page (say, a list of users that already has it's own partial) that you want to dynamically update with AJAX. You could: A) In your AJAX callback, construct the DOM elements manually and append them, like so:

var userList = $("#mylist");
$("<li>Amber Feng</li>").appendTo(userList);

This works perfectly fine in simple cases. But what if you later want to update the list elements to have a class named "user", and/or add a couple of spans inside of that list element to hold things like profile pictures, latest tweets, etc?

You'd have to change the partial to reflect that, for when the page is first loaded, and change your Javascript callback to reflect the changes for when you use an AJAX call to append things to the list as well.

This isn't DRY - and it's just plain messy to do manual DOM construction and appending. Instead, do this: B) Since you have a partial for the list of users anyway, just take advantage of this and have Rails generate the HTML for you to append. Stick a method in your controller for passing you back the html:

def render_partial
  render :json => {
    :html => render_to_string({
      :partial => "mypartial",
      :locals => {:v => v}
    })
  }
end

And just append the callback data to the container that your list is in.

$.get("/render_partial",
  {params: params},
  function(data) {
    $("#mylist").empty();
    $("#mylist").append(data.html);
  }
);

Voila! Now, if you ever need to change the template for what the user's list is supposed to look like, you do it in one place (the Rail's partial, in case you haven't caught on yet), and that will automatically be used every time the page is loaded and every time your AJAX needs to update the list.

Caution: This does put somewhat of a heavier load on the server because you're hitting up the Rails application stack again every time you need to change something via AJAX on a page instead of adding it client side via Javascript.

Rails Authlogic Conditional Validations

2011-07-10T14:25:55-07:00

When building a web app, one of the first features you usually add is the ability for users to register and log in to see their data linked with their personal account. And most of the time, you will be using validations on your User model to ensure that the email is formatted like a real email address, and password is at least characters, and so on.

(Side note: If you don't know about validations, check them out at the official Rails guide - they're dead useful.)

In this post, I'll be referencing the authentication gem Authlogic and the fact that it automatically handles user model validations for you. If you're using another gem/plugin or building your own authentication system, you're probably interested in the ActiveRecord's validation documentation.

Gradual Engagement

Anyways, so now you have your validations in place. But what if you want to enable access for "guest" users, or allow users to omit information like emails or passwords under certain circumstances?

Coined "gradual engagement" by the Rails/Authlogic community, there's a simple way to do this. I spent a couple of frustrated hours this morning stuck on this problem and hunting through Google Groups logs, Github Gists and various blogs, so I'm happy to share. From Kevin Triplett's Github Gist, all you need to do is add certain config options to your acts_as_authentic line in your model.

In my case (in app/models/users.rb):

acts_as_authentic do |c|
  c.merge_validates_format_of_login_field_options :unless => :guest?
  c.merge_validates_length_of_login_field_options :unless => :guest?
  c.merge_validates_length_of_password_field_options :unless => :guest?
  c.merge_validates_format_of_email_field_options :unless => :guest?
end

Multiple validation groups

Alternatively, if you want to have finer grained control over what validations are enabled when and have multiple "validation groups" to turn on and off, I stumbled across another solution that might interest you: Put this code in your lib/ folder. In your model of interest, add these lines to configure your validation groups (courtesy of Alan Gutierrez from the Authlogic Google Group):

class User < ActiveRecord::Base
  validates_presence_of :first_name, last_name, :email
  validation_group :invitation, :fields => ["email"]
  validation_group :registration, :fields => ["first_name", "last_name"]
end

And:

@user.enable_valiation_group(:invitation)
@user.save! # Will only validate email.

Easy peasy.

Being a Designer

2011-07-09T16:34:36-07:00

Being a designer is like being Priest in an MMO.

This is probably the nerdiest and geekiest thing I've ever said, but it's totally true. As far as I've seen (or maybe this is just in Berkeley), there's a disproportionate ratio of designers to developers so I'm constantly being called on by startups or project teams looking for UX work.

I'm definitely not complaining - this is awesome news for me. But it's a little lonely not knowing too many other designers in the area, and I'd love to be able to collaborate on projects or bounce ideas off another design-minded person. I got my first taste of this at my internship where there's an actual UX/design engineer on the team, and I have to say that I loved the experience!

So if there are any budding or veteran designers who go to Berkeley or are in the area, just holler. (:

Exporting SVN to Git

2011-06-18T09:54:03-07:00

I love Git.

So much, in fact, that when I switched web hosts last month I decided to move all of my SVN repositories and put them on Github or into private Git repositories. Github's SVN import utility is painfully slow (and maybe even broken, I'm not sure) - so here's how to do it yourself. First, create a mapping from all SVN authors to Git authors in a file of the format:

amber.feng = Amber Feng <me@amberonrails.com>
(no author) = No Author <nothing@amberonrails.com>

Create a directory for your new Git repository and use the following git svn command to export:

git svn --authors-file=path/to/authors_file clone SVN_REPO_URL LOCAL_DIR

You should now see log message Initializing empty Git repository ... followed by add, modify, and delete Git messages showing you the current status of the export.

The whole process can take from seconds to hours depending on how large the SVN repository is. Once, you're finished with the export, you can push the changes a hosted Git repository of your choice (Github, private, etc).

Paperclip + S3 with Rails

2011-05-26T20:17:11-07:00

When I revamped my portfolio, one of the major changes I did was to change my attachment process to upload files (screenshots of my projects, etc) to Amazon S3 instead of to the local filesystem.

Why S3?

Putting large media files on S3 (aka "content storage/distribution") is a great idea because:

You don't have to use up large amounts of storage on your web hosting plan, and S3 is super cheap. Even if you have an unlimited storage plan or aren't worried about using it up, this is still good idea because your files are all stored externally so you don't have to worry about backing them up or moving them if you want to switch hosts later (like I did).
Amazon S3 is cheap (can you say "less than five cents a month"?), fast, scalable, and reliable. And probably many more nice things that I'm forgetting.
Rails is slow, and going through the application stack to pull images all the time is slow.

Now that I've convinced you, I'm going to show you how incredibly easy it is to have your uploads upload directly to S3 with the help of a handy plugin called Paperclip.

Uploads with Paperclip

Note, this is assuming that you are already using Paperclip in your app for your file attachment service. To do that, there's a great Quick Start guide here.

First, add the aws-s3 gem in your Gemfile (you are using Rails3's bundler, aren't you? If not, get started):

gem 'aws-s3', :require => 'aws/s3'

Next, create a file called s3.yml in your config/ directory (where database.yml lives as well):

access_key_id: [YOUR AWS ACCESS KEY]
secret_access_key: [YOUR AWS SECRET KEY]

In whatever model you created for the uploaded object(s), for instance mine is Photo, add the following parameters to the usual Paperclip command like so:

has_attached_file :photo,
                  :storage => :s3,
                  :s3_credentials => "#{RAILS_ROOT}/config/s3.yml",
                  :s3_permissions => "public-read",
                  :path => ":filename",
                  :bucket => [YOUR S3 BUCKET NAME]

And that's it! Now whenever you upload files via Paperclip, the files will be automatically uploaded to the proper S3 bucket and the resource URL will point to the S3 static url.

Have fun uploading!

The Boy Scout Rule

2011-05-26T12:45:52-07:00

During the last couple of weeks I've been reading 97 Things Every Programmer Should Know online, it's a great book full of interesting and enlightening articles.

One that stuck to me in particular was #8 - The Boy Scout Rule. From the real-life Boy Scout rule "always leave a place cleaner than you found it", Robert Martin proposes a parallel to programming projects:

Always check in a module cleaner than when you checked it out.

Not making the code perfect, but taking a few moments to clean something up, whether it be abstracting a long method into several methods, documenting a line of obscure code, or changing a variable name to be more clear.

This way, rather than a codebase becoming messier and more outdated over time, it would be more maintainable and lead to a team working together to help improve eachothers' code (and actually knowing how other peoples' parts are implemented).

What a refreshing concept.

A busy semester..

2011-05-18T12:22:04-07:00

Abstract Syntax Trees. Target lists. Augassigns. Function types.

This semester I took a compilers course with Professor Hilfinger, who, despite his formidable reputation, quickly became my favorite professor at Berkeley. During the course of the semester, my group of four and I wrote a Python compiler in C++ basically from the ground up (in three parts, each around 200-300 hours each) - the reason I haven't blogged since February! I'm looking forward to learning more about compilers and now it's summer so I'll have plenty of time to blog again! (:

On my todo list this summer:

Fun side project: Javascript HTML5 Canvas Physics engine project (possibly to be ported later to WebGL) with my friend Franklin Hu. We started a bit yesterday, it's pretty fun so far (until we get to the really really hard physics).

Follow our GitHub if you're interested!
As an undergraduate researcher in UC Berkeley's AMPLab, I'll be working on the CrowdDb project - check out their SIGMOD paper.
Fun side project: Augmented Reality Android LaserTag/FPS game (probably too ambitious, but we'd love to give it a shot).
Finish reading Javascript: The Good Parts, and Smashing Book 2 (that I got for Valentine's day!)
Fun side project: Some kind of Android app for my new Galaxy Tab that I got from Google IO 2011!

Rails exception_notification Setup

2011-01-31T22:39:38-08:00

With any launched web app, it's a very good idea to set up some kind of exception notification - in fact, it's on my top 3 "Launch Checklist".

Exception Notification is a handy service that plugs into your existing app and sends you an email if (when) any exceptions are thrown in the course of people using your application. With Rails 3 and the exception_notification gem, it's almost laughably easy to set up.

First, add the following to your Gemfile:

gem "exception_notification",
    :git => "git://github.com/rails/exception_notification.git",
    :require => "exception_notifier"

Then, insert this little snippet in config/application.rb, in the config block:

# Exception Notification
config.middleware.use ExceptionNotifier, {
 :email_prefix => "[Website Error] ",
 :sender_address => '"Notifier" ',
 :exception_recipients => ['you@yourdomain.com']
}

That's it! Wasn't that easy?

Testing

If you're clicking through your application trying to get an exception thrown (but of course your application is written so well you frustratingly can't fire off an error), it might also be a good idea to create a method that tests your exception notification.

Just add a method that raises an exception in your app/controllers/application_controller.rb:

def test_exception
    raise 'Testing, 1 2 3.'
end

(Don't forget to add a route to config/routes.rb if you need it):

match "test_exception" => "application#test_exception_notification"

Now, you can visit http://yourwebapp.com/test_exception_notification to trigger the exception notification manually and test if the emailing works.

What if something goes wrong? All of the exception notification mailer's activity is logged, so go check out the relevant (development or production) log in log/

tail -f log/production.log

You also might want to turn off ActionMailer from sending email notifications when you're testing things out (application-wise, not exception notification-wise) on your development server. Just stick this code in config/environments/development.rb:

config.action_mailer.perform_deliveries = false

Cool, now you've got your very own exception notification set up! Happy debugging! (:

JQuery Autocomplete with hidden data

2011-01-27T11:41:33-08:00

This is a problem that I've encountered many times before when building Rails apps, but didn't know how to solve elegantly until one of my friends pointed out the solution was directly in the JQuery Autocomplete documentation (in my defense, it was at the very bottom).

Imagine you have an autocomplete field in a form that populates some Rails model, for example user's names. Naively, you would just pass an array of names to the JavaScript method like

["Amber Feng", "John Doe", "Harry Potter"]

and when the form is submitted, individually re-query the ID's for each of the names:

name = params[:user]
user = User.find_by_name(name)

Now this is super inefficient, if you're using some method to populate the autocomplete with User obejcts in the first place, why don't you just attach the id to the autocomplete to be submitted instead of just the name?

def find_users
  render :json => User.all.map {|c| c.full_name }
end

def find_users
  render :json => User.all.map {|c| {:name => c.full_name, :id => c.id } }
end

Then, with your Javascript you can pass objects to the Autocomplete plugin (with full name AND id information) instead of just name information:

// when /find_users only passes an array of names
$.ajax({
  url: '/find_users',
  success: function(data) {
      $("#user_query").autocomplete(data);
  }
});

// when /find_users returns an array of objects
$.ajax({
  url: '/find_users',
  success: function(data) {
      $("#user_query").autocomplete(data, {
          formatItem: function(item) {
              return item.name;
          }
      }).result(function(event, item) {
          $("#user_id").val(item.id);
      });
  }
});

You may have noticed in that last example I was doing a little something extra with the .result() function.

This function is a handler I've attached to the query field that is called whenever a user selects an option from the autocomplete. Here, I'm simply populating a hidden field I've added to the form called #user_id so when the form is submitted, the id of the user is sent (instead of just the name).


# much faster than User.find_by_name!
id = params[:id]
User.find(id)

If you feel like this way is too hacky or Javascript just isn't your thing, there are Rails plugins available like Model Auto Completer, but I haven't tried any third party plugins/widgets so I can't comment on how well they work or how easy they are to integrate into your application.

Sticky Footers

2011-01-08T12:43:56-08:00

Sometimes, in websites that you design, you'll find that you want to implement some kind of footer (with copyright information, contact links, etc). The naive way to go about adding a footer to your design to just add a div with some fixed (or auto) height at the bottom, like so:

<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>

This should work, right? Well, this works as expected in certain cases when your content is longer than the height of your browser (figure on the left). In the case where you have very little (or no) content on one of your pages, the footer "slides up", leaving an awkward looking space below your footer (figure on the right).

To force the footer to stick to the bottom, thus the name "sticky footers", you need to wrap all other content in a container div, and give this div a height of 100% and negative bottom margin of whatever the height of the footer is.

This way, the footer is always forced to the bottom in cases where the content isn't long enough, and still works as before when the content is long enough. You'll notice that the negative margin causes the lower portions of your content to overlap with the footer; this can be fixed with some simple bottom padding or a div fixed to the height of the footer.

<div id="container">
  <div id="header"></div>
  <div id="content"></div>
  <div id="push"></div>
</div>
<div id="footer"></div>

And the css:

html, body { height: 100%; margin: 0; }
#container {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto [footer-height];
}
#footer, #push {
  height: [footer-height];
}

And that's it! Simple, really!

Credits: I first learned how to do this from Ryan Fait.

My Launch Checklist

2010-12-24T20:20:51-08:00

Before you think about launching a site, make sure you have your bases covered! Here are the top three things I always have on my "checklist".

Cross-browser Compatibility

This seems like a no-brainer, but I'm usually pretty bad with this because I like to test and debug all of my designs and applications in Chrome and ignore Firefox and (cringe) Internet Explorer (well, with the exception of IE9). I was brought back to my senses after I foolishly released the new version of my portfolio with a gaping Javascript bug that broke in all versions of Firefox. Ever since, I've been testing my websites in all browsers - even going to great lengths to install Internet Explorer on my Macbook Pro.

There are a couple of websites I'd recommend for doing this:

BrowserShots is a website that takes a URL (mind that this doesn't work with localhost) and a list of browsers, returning a collection of screenshots taken of your site rendered in each of the different browsers. I've found this website pretty useful with making sure that my CSS styling and images are showing up correctly, but of course you can't actually play around with the website or test the Javascript. Did I mention it's free?
Adobe BrowserLab is another super cool screenshot service with a really nice interface (what do you expect, it's Adobe) and handy features like viewing screenshots from what they call "browser sets" side by side and overlaying screenshots on top of each other. There are lots more features that I'm too lazy to put in this post, but you can view them here! I don't think it's free, but I was able to sign up for a complimentary one year subscription.
If you'd like to actually like to test out your application, you might consider using CrossBrowserTesting (aptly named), which allows you to remote into their testing machines and actually try out your application in a bunch of different browsers and operating systems. I've never actually tried them before, but I've heard good things about the service. It's a little pricey, around $20 a month for 150 minutes of testing time a month.

Pro Tip: don't accidentally leave your session with them open on your browser.

Analytics

If you're like me, aka you take great pleasure in looking in all the page view statistics on all of your websites, you'll love having analytics installed. Make sure you install analytics BEFORE your launch, or you'll be sorry you missed out on the exciting graphs (I deeply regretted forgetting to install analytics on REOrganize before I launched).

I highly, highly recommend Google Analytics (free, as with almost every Google product). It's really easy to set up - you just insert a Javascript snippet on the page(s) you want to be tracked, and let Google do the rest of work! There are too many cool features to name, and I won't pretend to be an analytics expert. If you're really into analytics, you should check out Avinash Kaushik, a guru over at Google who has pretty interesting analytics insights over at his blog.

Exception Notification

If you're launching a web application (vs. a static page), it's essential that you have exception notification. Standard exception notification services will email you if any exception is raised in your application along with a log/stack trace, and may even offer premium features. You can usually find plugins for whatever app framework you're using - for example, Rails has an exception notification plugin you can install that uses your server's mailer.

(Update: I've written a post on how to use exception_notification here)

If you don't want to worry about installing anything, you can go for one of the many web services out there. I've used HopToad before, which offers a free "Egg" plan for one application and comes packaged with a gem you can easily install in a Rails application. Exceptional is quite good as well, but only for Rails (I basically only know about Rails services, if you haven't noticed already).

Conclusion

These are the top things that I'd recommend that most people never think to do before launching a website; maybe I'll mention some smaller (but still important!) things to check for in a future post.

PS: Merry Christmas/Happy Holidays!

Dynamic Stylesheet/Javascript Loading in Rails

2010-12-22T21:42:00-08:00

Sometimes when I'm coding Rails applications, it's useful to split up CSS and Javascript files by controller/views to prevent loading a huge CSS or Javascript file (containing all of the styles and code for the entire application) on every single page of the application when you only really need it for a specific set of your pages.

To load these dynamically (without having to include each named stylesheet by hand on each page), use the following code in the head of the main application layout:

<% filename = controller.controller_name %>
<% if FileTest.exist?  RAILS_ROOT + "/public/stylesheets/" + filename %>
  <%= stylesheet_link_tag "#{filename}" %>
  <%= javascript_include_tag "#{filename}" %>
<% end %>

This assumes that your stylesheets and javascript files are named according to the controller views in which they appear; if you'd just like to include javascript files of your choosing on certain views, put this in the head of the main application layout:

 <%= yield(:header) %>

And insert this code in your view with the appropriate CSS and javascript files you'd like to include:

<% content_for :header do %>
  <%= javascript_include_tag "file.js" %>
  <%= stylesheet_link_tag "file.css" %>
<% end %>

CS "Bucket List" 11/15

2010-11-15T23:09:41-08:00

Wow, I haven't written in here in a loooong time (over 2 months!).

School is getting crazy busy, between taking 3 upper div classes (which I love), TAing the Software as a Service course here at Berkeley, co-facilitating a web design class, undergraduate-researching over at the RAD Lab, and hacking on some awesome personal projects (but that's a story for another post).

Oh, and I'm flying up to Seattle next week for another Microsoft interview - exciting! After midterms have somewhat calmed down, I've decided to make a list of things that I'd like to hack on by the end of Christmas break.

Read more papers. I've been inspired by my friend Sunil to read more research papers about everything.

I'm feeling a little lame for not knowing too much about anything non-frontend-web-related. Currently on my list: Above the Clouds, Cassandra, BigTable, MapReduce, Spark, and Nexus (these last two and Above the Clouds are papers from the RAD Lab!).

Any other suggestions?
Hack on something in Python. All of our projects in CS188 (Artificial Intelligence) are coded in Python, and I think I'm falling in love. I feel like I'm cheating on Ruby a little bit (this blog is even cleverly named after Ruby on Rails), but Python is pretty much the perfect combination of every programming language I've ever liked. Maybe I'll change my mind as I work with it more?
Contribute to some open source project(s).
Work on a personal project non-web-frontend-related. I really need to get out of my comfort zone.

Fibonacci Times Three

2010-09-14T18:21:49-07:00

On the first day of my Algorithms class here at school, we learned three ways to implement the well known Fibonacci series generating algorithm.

Standard recursive

Everyone and their mom knows the recursive way to implement Fibonacci:

def fib(n)
  return 1 if n < 2
  fib(n-1) + fib(n-2)
end

This is an extremely inefficient algorithm - the running time is exponential, growing almost as fast as the Fibonacci numbers themselves! For example, to find the 200th Fibonacci number, the algorithm takes 2¹³⁸ steps! Obviously this is not feasible to compute even on a modern computer.

What's the problem with this algorithm? We can see that we are repeatedly computing the value of each Fibonacci number (ex. for the 4th fibonacci number, we need to add the 3rd and 2nd, and to calculate the 3rd, we need to add the 2nd and 1st, and etc).

Memoization

One way we can avoid this double-counting is to remember what Fibonacci values were already computed in a hash table so we don't have to launch into another recursive call for a value we already have. We can also switch to implementing this with an iterative method:

def fib(n)
  fibHash = [1, 1]
  for i in 2..n
    fibHash.append(fibHash[i-1]+fibHash[i-2]
  return fibHash[n]
end

Now this is pretty clever, but who knew that there was an even MORE clever mathematical way to tackle this problem?

Consider the following equations that represent the Fibonacci series:

We can write the first two equations in matrix notation:

The rest of the equations may be written in matrix notation, and if we substitute the value for [F1 F2] from the first equation, we notice a pattern:

Now wait a minute - have we really figured out a way to make an O(1) algorithm for the Fibonacci series?

Unfortunately, we need to take the multiplication and power operation runtimes into account because they are computationally more expensive than doing addition on large numbers. With the performance cost of using multiplication, we see that that runtime of this matrix implementation is actually O(n²), which is sadly not faster than our O(n) algorithm.

Credit: Material and screenshots taken from Algorithms by S. Dasgupta, C.H. Papadimitriou, and U.V. Vazirani.

Reversing Text with CSS

2010-09-02T18:55:19-07:00

A couple of days ago, I saw one of the coolest CSS tricks I've seen in a really long time. You know how people usually put their email as "amber DOT feng AT gmail DOT com" or something to that effect in an attempt to foil bots from spamming their email? Instead, you can type your email in backwards in the code (which is what will show up in the DOM and what bots will see) like so:

<span class='reverse'>moc.liamg@gnef.rebma</span>

..and apply CSS styling to reverse the text:

.reverse{
    direction: rtl;
    unicode-bidi: bidi-override;
}

Here's the snippet in action (try copy and pasting it somewhere!):

moc.liamg@gnef.rebma

Google Code Jam: Alien Numbers

2010-08-20T14:50:21-07:00

Lately I've been really into doing Google Codejam practice problems (aka I'm a nerd). I discovered I really need to brush up on my algorithms ):

The Problem

The decimal numeral system is composed of ten digits, which we represent as "0123456789" (the digits in a system are written from lowest to highest). Imagine you have discovered an alien numeral system composed of some number of digits, which may or may not be the same as those used in decimal.

For example, if the alien numeral system were represented as oF8, then the numbers one through ten would be F, 8, Fo, FF, F8, 8o, 8F, 88, Foo, FoF. We would like to be able to work with numbers in arbitrary alien systems.

More generally, we want to be able to convert an arbitrary number that's written in one alien system into a second alien system. Complete problem here.

My Solution (Ruby)

def hash_indexes(arr)
  hash = {}

  for i in 1..(arr.length - 1)
    hash[arr[i]] = i
  end
  return hash
end

def log(base, num)
  Math::log10(num)/Math::log10(base)
end

def to_decimal(source, num)
  num_arr = num.split("")
  hashed_source = hash_indexes(source.split(""))
  dec = 0

  for i in 0..(num_arr.size - 1)
    hashed_no = hashed_source[num_arr[i]].to_i
    dec += hashed_no * (source.size ** (num_arr.size - 1 - i))
  end
  return dec
end

def to_target(target, decimal)
  final = ""
  target_arr = target.split("")

  i = log(target.size, decimal).to_i
  while i >= 0
    value = target.length ** i
    times = (decimal/value).to_i
    final << target_arr[times]
    decimal %= value
    i -= 1
  end
  return final
end

def solve(line)
  arr = line.split(" ")
  to_target(arr[2], to_decimal(arr[1], arr[0]))
end

file = File.new("A-large-practice.in", "r")
output = File.open("A-large-practice.out", "w") do |f|
   num_lines = file.gets.to_i
   for counter in 1..num_lines
     solution = solve(file.gets)
     f.write("Case ##{counter}: #{solution}n")
     #puts "Case ##{counter}: #{solution}"
   end
end
file.close

Time to solve:

A-small-practice.in - 5.7ms
A-large-practice.in - 15.1ms

Storing Arrays in a Database Field w/ Rails ActiveRecord

2010-08-16T16:20:45-07:00

When I first started writing Expendite, an expense sharing web application targeted toward apartment-mates, I barely knew Rails. For each expense, I needed a way to record which users were involved as parties. Basically I needed a many-to-many association with a join table, though I didn't know it at the time.

Embarrassingly, I chose the method of storing an array of user id's (the involved parties) in a parties column in my database. Now I know better, but it still may be useful to know how to store arrays in a database that seemingly doesn't have any support for array objects.

Luckily, ActiveRecord has this support built right in!

First, the column in question should be changed to type text. If you've already created and used your database, a simple database migration is in order. Next, serialize the column:

class Expense < ActiveRecord::Base
    serialize :parties
    # other model code
end

That's literally all you need to do! Now, just save an array to the column like you would normally save a field value:

Expense.new(:parties => [1, 2, 3])

And when you call the parties on an Expense again, it'll spit an array back at you. It's also worth noting that this technique may be used for hashes as well!

Note: Storing arrays in databases is most likely not what you want to do.

There's probably a relationship/associations solutions (like my anecdote), or you can figure out another way to make it work with multiple columns.

CSS Shorthand

2010-08-10T14:25:20-07:00

For all of you CSS coders who are pretty lazy (myself included), you can use CSS shorthand to type out certain properties in one line instead of many many lines. Here's an example:

Say you want to add a background image to your fancy new website using CSS. And it should not repeat. And the position should be on the top left. Oh, and you also want to add a background color because parts of your image are transparent.

Instead of tediously typing this out:

background-color: #ccc;
background-image: url('../images/background.png');
background-repeat: no-repeat;
background-position: top left;

You can simply do this:

background: #ccc url('../images/background.png') no-repeat top left;

Not only does this save you from having carpal tunnel in the future, but it makes your CSS files smaller so they take less time to load as resources = less loading times for your website. It's a win-win for everyone!

Background

background:
     [background-color]
     [background-image]
     [background-repeat]
     [background-position];

background: #ccc url('background.png') no-repeat left top;

Be careful -- these need to be in the correct order and if you omit any, the browser will use the default values for each property which may not be what you were expecting.

Font

font:
     [font-style]
     [font-variant]
     [font-weight]
     [font-size]/[line-height]
     [font-family]

/* These two are equivalent */
font: normal normal bold 13px/11px Helvetica, serif;
font: bold 13px/11px Helvetica, serif;

Same deal as for backgrounds -- anything that is omitted gets applied the default property value. When in doubt, specify those values! There's another handy CSS shorthand guide here that lists various default values for different shorthand properties as well.

These next couple are pretty straight forward:

Margin/Padding

/* Remember this as clockwise from the top */
margin:
     [margin-top]
     [margin-right]
     [margin-bottom]
     [margin-left];

margin: 1px 2px 3px 4px;

margin:
     [margin-top]
     [margin-right AND margin-left]
     [margin-bottom];

margin: 1px 2px 3px;

margin:
     [margin-top AND margin-bottom]
     [margin-right AND margin-left];

margin: 1px 2px;

margin: [margin for all sides];

margin: 1px;

The same goes for padding properties.

padding: 1px 2px 3px 4px;

Border

border:
     [border-width]
     [border-color]
     [border-style];

border: 1px red solid;

JQuery Draggable and Droppable

2010-08-03T12:56:15-07:00

On a whim, I recently whipped together and launched REOrganize, a small JavaScript application that lets users simulate arranging furniture around in a room via dragging and dropping.

To build this quickly, I utilized JQuery's fantastic UI library full of ready-made effects and widgets. To take advantage of these effects for yourself, go ahead and do wnload JQuery UI -- you can even create your own custom build to strip out libraries you don't need and save space.

Draggable

JQuery UI makes adding effects absolutely painless. All you need to do is use a JQuery selector (I've written a quick cheatsheet on JQuery selectors back here if you need some refreshing) to select the elements you would like to be made draggable, and call the .draggable() method.

$('.class-to-drag').draggable();

That's the most basic implementation that will allow you the element to be made 'draggable'. Of course, you can add all sorts of extra options for more complex functionality:

currRect.draggable({
  containment: 'parent',
  grid: [factor, factor],
  snap: true,
  snapMode: 'outer',
  stack: '.rect-margin'
});

Here's some code from REOrganize.

The containment property allows you to specify if the element should be contained (ie. should not allow dragging outside of some container) -- for example, in REOrganize, each desk/bed rectangle cannot be dragged outside of the room container.

grid allows you to specify a grid for the elements to snap-to, otherwise they can be dragged pixel by pixel.

Similarly, snap allows elements to snap-to other elements (handy for users to line things up easily). You can also attach event listeners/callbacks for drag start, drag stop, and during drags like I did here to reset icon positions during/after drags:

currDoor.draggable({
  containment: 'parent',
  grid: [factor, factor],
  axis: 'x',
  drag: function() {
  resetInfoPosition($(this), wall);
  },
  stop: function() {
  resetInfoPosition($(this), wall);
  }
});

Be sure to check out more of these options and events on the Draggable API!

Droppable

Last year I participated in the Zynga Hackathon at UC Berkeley, an 18 hour overnight coding competition (we won Honorable Mention!).

One of the wow factors of our application was how we opened new content - a user would be able to select from a top menu of icons, drag and drop the icon into the open space, and a new window would blossom open.

How did we achieve this? With the help of JQuery, of course. Almost exactly like Draggable, you use JQuery selectors and the method .droppable() to assign droppable properties to an element:

$('.class-to-drop-on').droppable();

There are some helpful options you can include in the method arguments, but the real power comes from the event callbacks. You can detect if a draggable element is dragged over, dragged out, or dropped on the droppable element:

$( ".class-to-drop-on" ).droppable({
   drop: function() {
     //do something interesting
   }
});

More information can be found on the Droppable API. Go crazy!

Setting Cookies with JQuery

2010-07-23T15:11:23-07:00

I've never really used or dealt with browser cookies before because I felt like it was some complicated, advanced technique that required intricate knowledge of how browsers and sessions work.

Today at work, I was given a task that involved setting, checking, and removing cookies for our web application, but I pleasantly found that it was an almost laughably easy task with my best friend JQuery.

Download the Plugin

First, you need to download the handy JQuery cookie plugin here: JQuery Cookie Plugin!

Setting Cookies

To set cookies, all you need to do is type in the following in Javascript:

$.cookie("cookieName", "cookieValue");

This default cookie creation links this particular cookie to the session and it will be deleted at the end of some amount of time or if the user closes the browser, etc. If you want to have a cookie stay for a defined amount of time instead of linking it to the session, you can do something like this:

$.cookie("cookieName", "cookieValue", { expires: 1 }); // 1 day

The expiration parameter's unit is in days so if you want to, say, set a cookie for only 30 minutes you'll have to do something a little tricker (I found this cool tip on Stack Overflow):

var date = new Date();
date.setTime(date.getTime() + (30 * 60 * 1000));
$.cookie("example", "foo", { expires: date });

You can also set the path and domain of the cookie (default is the current path and current domain):

$.cookie("cookie", "1", { domain: "domain.com", path: "/" });

Reading Cookies

It's really easy to read back a cookie's value:

$.cookie("cookieName");

Really, that's it!

Deleting Cookies

Finally, to delete a cookie just set it to null:

$.cookie("cookieName", null);

Note that by default, this plugin won't let you delete a cookie from another domain so you'll have to explicitly specify the domain and path:

$.cookie("cookieName", null, { domain: "domain.com", path:"/");

Detecting Mobile Devices for Web Applications

2010-07-22T11:18:42-07:00

As mobile devices become a bigger and bigger platform for viewing web pages, web application developers need to start paying attention to making their websites mobile-friendly. Have you ever visited a website from a smartphone that was obviously not mobile optimized?

It's not a great experience, having to zoom in because the text is too small and scroll back and forth to read the information on the page. Some websites become all squished inside a mobile browser, obstructing important parts of the page and making it near impossible to use the application -- I had this experience recently with the Yelp on an Android phone.

One simple way to combat this issue is to have multiple stylesheets, and switch them based on which device is being used to view the web page.

For example, you can have a regular stylesheet named style.css, a stylesheet optimized for iPhones named iphone.css, and a stylesheet optimized for Android phones named android.css. Then, with little effort, you can detect the client and apply the appropriate stylesheet so the user gets a nice, optimized web experience no matter what platform they are using.

There are two relatively simple ways to do this: the Javascript way, and the CSS way.

The Javascript Way

You can use Javascript to check the current useragent variable for keywords like iphone, android, etc.

uagent = navigator.userAgent.toLowerCase();
if(uagent.indexOf('iPhone') != -1){ // iPhone device
  document.write('<link rel="stylesheet" href="style/iphone.css">');
} else if(uagent.indexOf('Android') != -1){ // Android device
  document.write('<link rel="stylesheet" href="style/android.css">');
} else{ // Default to desktop version
  document.write('<link rel="stylesheet" href="style/style.css">');
}

Wasn't that easy? Just stick that Javascript in the head tag and it should apply the correct stylesheet.

Want more options? There are many different keywords to check for, here are a few examples:

'webkit' // client is using a webkit browser
'blackberry' // Blackberry device
'palm' // Palm OS device

Of course, nothing in the world of cross-browser web application development is perfect (I wish!). If Javascript is not supported on the browser (which may be quite common in older mobile devices) or if the user turns off Javascript, this method will not work at all. Also, you're depending solely on the contents of the useragent variable, which may or may not be entirely accurate 100% of the time. But, there's another way!

The CSS Way

This method doesn't target specific devices, but instead uses their screen width as the independent variable. In your CSS link, you can add what are called CSS media queries (not supported by all browsers, unfortunately):

<link rel=”stylesheet” href=”style/style_320.css” type=”text/css” media=”screen and (min-device-width: 320px)”>

This way, you're not checking to see if a device is an iPhone or Android, but rather if it has a screen width of 320px or greater (or less, with max-device-width).

Of course, this has its share of issues as well -- Dean Hamack over at Bushido Designs has written a fantastic article on Bulletproof Mobile Detection and Stylesheets without User Agent Detection or Server-side Scripting that addresses many of these.

IDs vs. Classes?

2010-07-21T16:53:18-07:00

IDs should generally be used when the element is unique, whereas classes should be used when there are a lot of similar elements that need the same styling. It would be perfectly legal to use IDs for every single element on a page (if they are unique, of course), but this would be terribly bad style for two reasons.

One, your ID names will start to get pretty long and complicated.

Two, if there are certain elements that share the same styling, you'll have to duplicate code! Why not just label them as the same class, type out a class styling once and apply it to both of them?

For example, you could have many articles labeled with separate, unique IDs.

<div id='article1'></div>
<div id='article2'></div>
<div id='article3'></div>

If you want to apply some styling, your CSS would look unnecessarily long and not DRY (don't repeat yourself) at all!

#article1{
color: blue;
padding: 2em;
}
#article2{
color: blue;
padding: 2em;
}
#article3{
color: blue;
padding: 2em;
}

What if you just had some class article, and applied a class styling to all of the articles?

<div class='article'></div>
<div class='article'></div>
<div class='article'></div>

.article{
color: blue;
padding: 2em;
}

There, that's better. And of course, if you need each article to have a specific ID for some javascript effect purposes, you can include both a class and an ID:

<div id='article1' class='article'></div>
<div id='article2' class='article'></div>
<div id='article3' class='article'></div>

CSS/Javascript Summer Reading List

2010-07-15T11:20:05-07:00

Although I've been working with CSS and Javascript for quite some time, I still regard myself as a semi-beginner in terms of deeply understanding the foundations of these two languages.

Therefore, I've taken it upon myself to learn as much as I can this summer (as long as I have a free Safari Books Online subscription from my internship, haha)! I did a brief Google search and found an almost unanimous agreement on which are the "best" books to read on these topics:

CSS

CSS: The Definitive Guide by Eric Meyer
Pro HTML/CSS Design Patterns by Michael Bowers
CSS Mastery by Andy Budd
Bulletproof Web Design by Dan Cederholm

Javascript

Pro Javascript Design Patterns by Ross Harmes and Dustin Diaz
Javascript: The Good Parts by Douglas Crockford
Javascript: The Definitive Guide by David Flanagan

Have your own favorite CSS/Javascript books? Or even just fantastic general web design books, guides or tutorials? I'd love to hear about them!

SVN Ignoring Files/Directories

2010-07-14T17:47:24-07:00

I've been trying to learn more about using command line SVN because I'm not terribly familiar with it, here is a super quick reference guide to the most common/useful SVN commands.

Checking out a repository (with optional username/password flags):

svn checkout [SVN REPO] [LOCAL DIR] --username [USER] --password [PASS]

Copying a clean directory tree (no svn config files or folders):

svn export [PATH FROM] [PATH TO]

Updating/Committing local copy:

svn update
svn commit -m "[MESSAGE]"

Recently, I've also had to figure out how to ignore folders and files that I don't want committed to my repository (ex. local performance profiling data). I found the following useful commands in the SVN Book:

Ignoring files/folders

svn propset svn:ignore bin .
svn propset svn:ignore hello.gif .

Un-ignoring files/folders

svn propdel svn:ignore bin .
svn propdel svn:ignore hello.gif .

Viewing ignored files/folders (and/or editing in an editor of your choice)

svn propget svn:ignore .
svn propedit svn:ignore . --editor-cmd vim

Automatically Capturing Website Screenshots

2010-07-14T11:20:53-07:00

I've recently had inspiration for a new web application that fits my needs as a web designer (it's a secret for now), but it's not a standard CRUD web app so it requires a fair amount of new programming/customization that I'm struggling with.

One thing the application requires that I'm not sure how to do is automatically capturing website screenshots. I'd like some sort of service where I feed in a URL and it spits out an screenshot of the website at that URL. Researching on Google, I've found many commercial types of software that can accomplish this but I'd like to use some type of open source plugin or web service.

Furthermore, I'm planning on using this for my own web application so I'm not sure what the legal implications are. I'd like to write my own software for this, but I'm not quite sure how to start or what this would entail.

So far, I've found some interesting links that are almost exactly what I'm looking for.

Binary Moon found a that Wordpress had their own service for doing automated screenshots (ex. for theme galleries) with dynamic URLs, but I'm not sure Wordpress would be too happy if I spammed their servers with something non-Wordpress related.
I've also found this website called Miwim (it's in French, but I've applied a Google Translate) that offers a similar service. The only downside is you have to link back to the service -- which I'm sure I'd do, anyway.
Paul Hammond has also written a command line tool called webkit2png that accomplishes the same thing, but I'm not sure how to run terminal commands from a web application.
Here's another forum that offers some alternatives, though some of the links are long dead. I'm still searching for other services/ways to do it myself..if you have any ideas I'd love to hear them!

Basic (CSS) JQuery Selectors

2010-07-13T11:49:16-07:00

I love JQuery. Oh so easy to use, excellent documentation, and an abundance of third-party plugins and widgets ready made for almost anything you could ever need. Of course, one of the most important parts of the library are JQuery's selectors, easy CSS-like syntax to select specific DOM elements to manipulate. Here is my personal JQuery selector reference sheet, drawn from the JQuery API, the web, and other JQuery books/reference sheets I've read. These selectors use near-CSS syntax, they should be relatively easy to understand.

Matches anything

$('*')

Matches element with tagName (ex. a, span, etc)

$('tagName')

$('a') //matches all links
$('span') //matches all spans

Matches element with id elementId (with optional tagName)

$('#elementId')
$('tagName#elementId')

$('div#header') //matches div element with id = header

Matches element with class elementClass (with optional tagName)

$('.elementClass')
$('tagName.elementClass')

$('a.menu-link') //matches links with class = menu-link

Matches CSS family/descendent patterns

$('A B') //B elements that are a descendant of A
$('A > B') //B elements that are direct children of A
$('A:has(B)') //A elements that have B as a descendant

$('#header a') //matches links inside element id=header

Matching attributes

$('tagA[attr]') //tagA elements with an attr attribute
$('tagA[attr=value]') //tagA elements with attr is equal to value
$('tagA[attr^=startsWith]') //tagA elements with attr starts with startsWith
$('tagA[attr$=endsWith]') //tagA elements with attr ends with endsWith
$('tagA[attr*=containsThis]') //tagA elements with attr contains containsThis

$('img[alt]') //matches img elements with an alt attribute
//matches checkboxes whose names start with ch_ (ex. ch_1, ch_2,...) 
$('checkbox[name^=ch_]')

That's it for now, I'll post again soon with JQuery custom selectors (things like :disabled, :hidden, etc. that jQuery has added to its library to make things easier on developers) !

Color Scheme Designer

2010-07-01T13:24:50-07:00

Recently, I re-stumbled upon a website that I absolutely love using for choosing or playing around with different color schemes, Color Scheme Designer. Visually stunning, this online tool includes a color wheel where users can intuitively drag around color selectors and a number of scheme types such as "Mono", "Complement", "Tetrad" that automatically show schemes for real-time color selections.

Color Scheme Designer also provides random presets (in case you're lacking inspiration), advanced color customization, and handy hover-over hex codes for any desired colors.

There is even a "vision simulation" to show you how the colors would look from the view of someone with visual impairments! And "scheme previews" to show you how your color scheme would look on a basic table-based layout! Amazing -- definitely a find worth sharing.

JQTouch Animation Flicker Bug Fix

2010-06-29T17:54:02-07:00

I've been working with the jQTouch (a jQuery plugin for mobile development that imitates much of iPhone's UI and animation features) for quite some time now at work. It's pretty great, but I've been running into small little glitches like animation flickering for 'slide' animations that do not have fantastic documentation.

There's no official patch/solution yet, but I've found a quick code hack that will fix some of the flickering problems. (For the iPhone/simulators I've tested on, at least). Taken from the Google Code issue tracker, just enter in this code snippet (the code marked //HACK) into the appropriate places in your jQTouch.js file.

...
scrollTo(0, 0);

// HACK
var backwardsSign = (backwards ? '-' : '')
var toStart = 'translateX(' + backwardsSign + window.innerWidth + 'px)';
fromPage.css( 'webkitTransform', toStart );
// /HACK

// Define callback to run after animation completes
var callback = function(event){
  // HACK
  fromPage.css( 'webkitTransform', '');
  // /HACK
  ...

As one other person noted, you might also want to wrap these statements in if statements so it doesn't affect other types of animations, like so:

// HACK
if (animation.name === "slide") {
  var backwardsSign = (backwards ? '-' : '')
  var toStart = 'translateX(' + backwardsSign + window.innerWidth + 'px)';
  fromPage.css('webkitTransform', toStart);
}
// /HACK

...

// HACK
if (animation.name === "slide") {
  fromPage.css('webkitTransform', '');
}
// /HACK

Rails: Starting RSpec

2010-05-24T19:40:15-07:00

This is basically the same deal as the Restful Authentication post below. I've used RSpec in the past (these quick start-up guides are not for beginners), I just need somewhere to quickly reference the beginning commands/code snippets to start my Rails applications.

Here it goes!

Installing RSpec and RSpec for Rails

sudo gem install rspec
sudo gem install rspec-rails

Generate RSpec subdirectory for tests

script/generate rspec

Use RSpec scaffolding tool instead of regular scaffold! This way, you get the basic tests for each new controller/model/view you are creating.

script/generate rspec_scaffold model_name ...

If you're looking to learn RSpec, The RSpec Book is an excellent reference.

Rails: Restful Authentication Quick Start

2010-05-23T17:26:20-07:00

I almost always use Restful Authentication for my Rails applications. (For those of you who don't know what Restful Authentication is, it's a widely used Rails plugin for managing user authentication. In short, it's a plugin/gem that easily allows you to have users logins/etc on your application without the hassle of coding and debugging the entire thing yourself. The source code can be found on technoweenie's GitHub here.)

What's annoying to me is that I always forget how to set it up, and I hate going through loooong Restful Auth tutorial sites to find the specific commands/code snippets that I need. So here's what you need to set it up, short and sweet!

Installing the plugin

If this doesn't work, just download straight from the GitHub (link above) and include it in your vendor/plugins folder

ruby script/plugin install http://github.com/technoweenie/restful-authentication.git restful_authentication

Generation

Generate all necessary files. Skip the --include-activation part if you doesn't want users to have to "activate" their accounts via email.

ruby script/generate authenticated user sessions --include-activation

My generator fills in all the necessary routes automatically, but here they are just in case.

map.activate '/activate/:activation_code', :controller => 'users', :action => 'activate'
map.signup '/signup', :controller => 'users', :action => 'new'
map.login '/login', :controller => 'sessions', :action => 'new'
map.logout '/logout', :controller => 'sessions', :action => 'destroy'

How to use

Include this line in your ApplicationController:

include AuthenticatedSystem

Include this filter in any controller where you want users to log in before they see content. You can selectively filter certain methods with the only keyword.

before_filter :login_required

Up to this point, the application should work for simple user authentication without activation by email (let me know if I'm missing anything!). I'll be writing more on activation as soon as I remember how I did it before.

Amber on Rails

Building Stripe's API

Highlights

Make it easy to get started

Language-specific libraries and documentation

Have a focused API, but allow flexibility

Webhooks

Stripe Connect

Provide a testing environment

Help your users debug

Dealing with Change

Questions?

Private methods in Ruby

Discount Code Cards

Implementation

Improvements

Goodbye, Wordpress!

Why Jekyll?

My setup

Elasticsearch Space-savers

_source

_all

Multi-field types

Real-time Search with MongoDB and Elasticsearch

Setting up ElasticSearch

Hooking up MongoDB

Footnotes

2012 CS Resolutions

Paxos/Multi-paxos Algorithm

Why is this important?

Algorithm

Prepare Phase

Accept Phase

Multi-paxos

Other Considerations

Persistent Storage

Distinct Proposal Numbers n

Conclusion

Using Javascript Timeouts for Performance

Eventual Consistency

Strong vs. Eventual

Strong Consistency - guaranteed consistency across replicas

Eventual Consistency - all replicas will "eventually" become consistent.

And everything in between

Read My Writes - guaranteed to be able to read updates you write

Consistent Prefix - updates returned are some prefix of all the updates, with no gaps

Monotonic Reads - for each client, guaranteed to read a more recent or at least the same set of updates

Bounded Staleness

Conclusion

Sorry for the long hiatus!

Subtle Inset Styles

Ajax Partial Loading

Rails Authlogic Conditional Validations

Gradual Engagement

Multiple validation groups

Being a Designer

Exporting SVN to Git

Paperclip + S3 with Rails

Why S3?

Uploads with Paperclip

The Boy Scout Rule

A busy semester..

Rails exception_notification Setup

Testing

JQuery Autocomplete with hidden data

Sticky Footers

My Launch Checklist

Cross-browser Compatibility

Analytics

Exception Notification

Conclusion

Dynamic Stylesheet/Javascript Loading in Rails

CS "Bucket List" 11/15

Fibonacci Times Three

Standard recursive

Memoization

Reversing Text with CSS

Google Code Jam: Alien Numbers

The Problem

My Solution (Ruby)

Distinct Proposal Numbers `n`