2011/09/21 09:36:16 [error] 816#0: *5 upstream sent too big header while reading response header from upstream, 
  client: 192.168.56.1, server: v.piclyf.com, request: "GET /pics HTTP/1.1", 
  upstream: "fastcgi://127.0.0.1:9000", host: "v.piclyf.com", referrer: "http://v.piclyf.com/dashboard"

The fix that I found is to increase the values of fastcgi_buffer_size and fastcgi_buffers. Add these 2 directives to your PHP FastCGI config in Nginx (i.e. /etc/nginx/sites-available/default):

location ~ \.php$ {
  root /your/site/root;
  fastcgi_index index.php;
  include fastcgi_params;
  fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
  fastcgi_pass 127.0.0.1:9000;

  # set these two:
  fastcgi_buffer_size 16k;
  fastcgi_buffers 4 16k;
}

Using Predis as an example, if we put the code in:

/vendors/predis/lib/Predis

We’ll add it to Yii as an alias named Predis so classes under it can be autoloaded:

Yii::setPathOfAlias('Predis', '/vendors/predis/lib/Predis');

Now when we call new Predis\Client(), Yii will look for a file named Client.php in /vendors/predis/lib/Predis. The same holds true for other classes under subfolders (e.g. Predis\Commands\Append).

What we did to solve it was go back to basics: use plain JavaScript objects instead of plugins and group them using namespaces.

Plain objects vs plugins

This looks like a step back from making cool plugins but there are actually some benefits. Let’s look at this horizontal slider plugin as an example:

// start slider plugin
(function($) {

  var internal = {
    init: function($el) {
      $el.data('currentPage', 0);
    },

    showPage: function($el, page) {
      // do some fancy animations to show the given page
      $el.data('currentPage', 2);
    },

    currentPage: function($el) {
      return $el.data('currentPage');
    }
  };

  $.fn.slider = function(options) {
    if (typeof options != 'undefined' && options == 'currentPage')
      return internal.currentPage($(this[0]));

    return this.each(function() {
      if (typeof options == 'undefined')
        internal.init($(this));
      else if (options == 'showPage')
        internal.showPage($(this), arguments[1]);
    });
  };

})(jQuery);

// and use it like this:
$('#mydiv').slider(); // assume there's a <div id="mydiv"></div> in the HTML
$('#mydiv').slider('showPage', 2);
alert($('#mydiv').slider('currentPage')); // 2

We’re expecting an output like the Coda Slider. The above code is just a skeleton that shows how we’d probably make a horizontal slider plugin. If we were to convert this into a JavaScript object, it would look like this:

// the slider plugin as an Object
(function() {

  Slider = {
    currentPage: 0,
    $el: null, // a public reference to the HTML element we'll work with

    // this should be called first before doing anything else       
    init: function($el) {
      this.$el = $el; // save a reference to the element so we can use it later
      return this;
    },

    showPage: function(page) {
      // do some animations using this.$el
      this.currentPage = page;
    }
  };

})(jQuery);

// and use it like this
var slider = Object.create(Slider).init($('#mydiv')); // instantiate a new Slider object and pass in the <div>
slider.showPage(2);
alert(slider.currentPage); // 2

This pattern takes advantage of prototypal inheritance (Object.create) to create a new instance of Slider. The advantages of this are:

• It’s much cleaner and easier to understand since you’re sort of creating a “class” and one would just have to create a new instance to use it.
• It’s not tightly coupled with jQuery. If it ever happens that you’ll have to switch to a different library, it’ll be easier to do so.
• Object members are exposed (e.g. currentPage), can easily be inspected and used.

The disadvantages of this are:

• A single instance can operate on a single element only. You can easily work around this though.
• It’s not a jQuery plugin — it’s not cool (debatable)

Prototypal inheritance

The Object.create() method is not part of JavaScript but is a common pattern used to create a new object whose prototype is the given object. This allows us to inherit the members of Slider into a new (instantiated) object.

if (typeof Object.create !== 'function') {
  Object.create = function (o) {
    function F() {}
    F.prototype = o;
    return new F();
  };
}

There are more discussions about this from Douglas Crockford and Alex Sexton

Namespaces

Now that we have simple objects instead of plugins, we can easily group these into namespaces — objects within objects. We can have a base namespace:

App = {};

And then put our objects under it:

App.Slider = {
  // slider code here
};

// util functions under a base Utils namespace
App.Utils = {
  foo: function() {
    // ...   
  },
  bar: function() {
    // ...
  }
};

// group related objects under a single namespace
App.SidebarComponents = {
  About: {
    // ...
  },
  TagCloud: {
    // ...
  },
  CategoryList: {
    // ...
  }
};

// create a slider
var slider = Object.create(App.Slider).init($('#div'));
// call a util function
App.Utils.foo();

This now looks at least more organized and maintainable. And you’d have a nice DOM view (FireBug):

What we can learn from this is that jQuery doesn’t really force you to follow a specific design pattern. It’s excellent at DOM manipulation, but it doesn’t provide much outside that. This is actually good, since this means that you can apply your own design on top of it. jQuery should be part of your project and not the backbone of your project.

Speaking of backbone, Backbone.js is a great complement to jQuery that’s definitely worth checking out.

#!/usr/bin/env ruby

require 'rubygems'
require 'aws/s3'

bucket = 'bucket_name'

AWS::S3::Base.establish_connection!(
  :access_key_id     => 'our_access_key',
  :secret_access_key => 'our_secret_key'
)

last_key = nil
while true do
  puts "Getting objects " + (last_key == nil ? "" : "after #{last_key}")
  objects = AWS::S3::Bucket.objects bucket, :max_keys => 10, :marker => last_key

  objects.each do |object|
    # download file if it is the original and if it doesn't exist locally yet
    if !File.exist?(object.key) && object.key.match(/^\w+_o.\w+$/)
      puts "Downloading #{object.key} "
      open(object.key, 'w') do |file|
        AWS::S3::S3Object.stream(object.key, bucket) do |chunk|
          file.write chunk
        end
      end
    end
  end

  last_key = objects.last.key if !objects.empty?
end

The scripts loops through all objects from S3 and downloads only the original image files (ours have the “*_o.jpg” pattern). If it reaches the end of the loop, it will wait for new objects.

This is really just a simple silly script but it’s a good Ruby exercise :)

We’ve just recently deployed a custom endpoint to allow Twitter for iPhone users to post their pics through PicLyf.

When you attach an image to a tweet, Twitter for iPhone will upload that image to the image service of your choice. It allows you to choose from various image services (e.g. yFrog, Twitpic, TweetPhoto) or a custom image service. In our (PicLyf) case, it was custom. We made a custom endpoint: http://api.piclyf.com/twitter. Using this url as the custom image service, attached images will be uploaded to the user’s PicLyf account.

Implementation

This functionality works through the use of OAuth Echo. From Twitter:

OAuth Echo is a means to securely delegate OAuth authorization with a third party while interacting with an API. Within the Twitter ecosystem, we use OAuth Echo as a means to allow your application to use services such as Twitpic and yfrog.

You may want to read about OAuth Echo first. Basically, Twitter for iPhone sends you the image along with the OAuth credentials of the user who wants to upload the image. Note that the OAuth credentials also includes the app’s consumer key. What you’ll have to do is use these credentials and verify them with the Twitter API. If the verification succeeds, you will receive the user’s Twitter information. You may then save the image in your server and link it with the user’s Twitter account. Lastly, you will have to return the correct response to Twitter for iPhone specifying the url where the image can be viewed:

<mediaurl>http://foo.com/bar/pic-url.html</mediaurl>

Sample code in PHP

Here is a sample class which encapsulates the OAuth Echo process:

class TwitterOAuthEcho
{
  public $verificationUrl = 'https://api.twitter.com/1/account/verify_credentials.json';
  public $userAgent = __CLASS__;

  public $verificationCredentials;

  /**
   *
   * @var int
   */
  public $resultHttpCode;
  /**
   *
   * @var array
   */
  public $resultHttpInfo;
  public $responseText;

  /**
   * Save the OAuth credentials sent by the Consumer (e.g. Twitter for iPhone, Twitterrific)
   */
  public function setCredentialsFromRequestHeaders()
  {    
    $this->verificationCredentials = isset($_SERVER['HTTP_X_VERIFY_CREDENTIALS_AUTHORIZATION']) 
      ? $_SERVER['HTTP_X_VERIFY_CREDENTIALS_AUTHORIZATION'] : '';
  }

  /**
   * Verify the given OAuth credentials with Twitter
   * @return boolean
   */
  public function verify()
  {
    $curl = curl_init($this->verificationUrl);
    curl_setopt($curl, CURLOPT_USERAGENT, $this->userAgent);
    curl_setopt($curl, CURLOPT_HEADER, false);
    curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, 2);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($curl, CURLOPT_HTTPHEADER, array(
        'Authorization: ' . $this->verificationCredentials,
      ));

    $this->responseText = curl_exec($curl);
    $this->resultHttpCode = curl_getinfo($curl, CURLINFO_HTTP_CODE);
    $this->resultHttpInfo = curl_getinfo($curl);
    curl_close($curl);

    return $this->resultHttpCode == 200;
  }
}

The setCredentialsFromRequestHeaders method saves the OAuth credentials sent by the consumer (e.g. Twitter for iPhone, Twitterrific). These credentials will be used in the verify method which sends the verification request to Twitter.

Using the class above, your custom image service page (e.g. http://api.piclyf.com/twitter) should handle the request like this:

$oauthecho = new TwitterOAuthEcho();
$oauthecho->userAgent = 'My Custom Image Service App 1.0';
$oauthecho->setCredentialsFromRequestHeaders();
if ($oauthecho->verify()) {      
  // Verification was a success, we should be able to access the user's Twitter info from the responseText.
  $userInfo = json_decode($oauthecho->responseText, true);
  $twitterId = isset($userInfo['id']) ? $userInfo['id'] : null;      
  // You can use $userInfo or $twitterId above to maybe check if you have a record of this user
  // in your db.

  // You can access the uploaded image using $_FILES. Save it and create a url where it can be accessed.

  // Return the image url back to the consumer
  $imagePageUrl = 'http://somwhere.com/image1';
  echo '<mediaurl>' . $imagePageUrl . '</mediaurl>';

} else {
  // verification failed, we should return the error back to the consumer
  $response = json_decode($oauthecho->responseText, true);      
  $message = isset($response['error']) ? $response['error'] : null;      
  if (!headers_sent())
    header('HTTP/1.0 ' . $oauthecho->resultHttpCode);
  echo $message;
}

The code above is just a sample and your final code will look very different especially if you’re using a framework. I’ve also left out the part where you’ll get the image from $_FILES and save/process it. That is beyond the scope of this article.

Notes

The note in Twitter for iPhone’s custom image service screen says you can get more (developer) info in this url: http://developer.atebits.com. As of this writing, the information on that page is no longer accurate. Twitter for iPhone no longer sends you the user’s username and password. The info at Twitterrific is more accurate. And yes, if your service works for Twitter for iPhone, it should work on Twitterrific too.

Further reading:

• Creating A Custom Image Upload Service For Tweetie (Twitter For iPhone) Using ColdFusion
• Using OAuth Echo

If it were just me, I’d have built PicLyf using Ruby to make it more exciting. But there’s the city talent pool we had to think of. Currently, it’s hard to find good PHP developers. I reckon it’ll be more hard to find those who know Ruby.

The problem now is Zend Studio doesn’t seem to support this kind of setup. At least, that’s what I concluded after so many hours of googling. Then I found this super awesome article. We can use Putty! Or just plain ol’ Terminal on a Mac (Linux should be the same I think).

Tools needed

Of course you need Zend Studio for Eclipse. You just need Putty if you’re on Windows. You’ll just need the already available/installed Terminal on a Mac (it’s in Applications > Utilities).

Proxy setup

Open up Putty/Terminal. Enter this into the console:

ssh -D 8080 username@proxydomain.com

The “8080″ should be an unused port on your machine. In most cases, port 8080 is fine. The “username” should be the user name you need to login to the proxy server (ie proxydomain.com). You should be prompted with the password after entering this command. This will create a tunnel on the port 8080 where all HTTP traffic will go through the proxy server. That is, if an application uses the port 8080 as a proxy. This won’t have any effect on your current applications (i.e. browsers) unless you modify your settings to use this proxy. Please note that you’ll have to keep the terminal window open so your proxy session won’t be destroyed. There are probably other ways to make it work without the window left open but I’m content with this.

Modifying Zend Studio settings

Since we now have a proxy available, we need to instruct Zend Studio to use it.

1. Open Zend Studio.
2. Go to Preferences (located under the Application menu on Mac and under Window on Windows)
3. Navigate to General > Network Connections
4. Set the proxy setting to Manual proxy configuration. And enter 127.0.0.1 in the SOCKS proxy field and 8080 on the Port field beside that.

Your setup should look something like this:

Zend Studio Network Settings

Save the settings and you should be ready to open up a connection to the target server (in this case, the main development server). Create a remote connection to your target server like you normally would. I couldn’t discuss that here but this might help.

Other References

• How To: Surf Securely with an SSH Tunnel
• Use SSH to Create an HTTP Proxy
• Use PuTTY as a secure proxy on Windows
• Zend Studio Remote Systems View