Making sense of the difference between AMD, CommonJS, RequireJS and Browserify

A colleague starting on javascript frameworks asked me what’s the difference between AMD, CommonJS, RequireJS and Browserify. He was under the impression they are 4 separate technologies so here’s a quick overview for those who might be confused. Take note this article is not meant as an in-depth discussion but more of an overview for people unfamiliar with the terms and not sure where to begin.

For a start, we need to understand they are not from the same category. Asynchronous module definition (AMD) and CommonJS are styles/specifications of writing modular code in javascript, while RequireJS and Browserify are 2 popular implementation/helper for them respectively. RequireJS allows you to work with modules the AMD way in the browser, and Browserify for the CommonJS way.

AMD

Asynchronous module definition is designed for the browser from the start. It allows your frontend application to load the starting point of your app, which in turn loads it’s dependencies on the fly. When using the requireJS implementation, it’s syntax looks like: Continue reading

Ryan’s Drupal 7 troubleshooting checklist

New to Drupal or a little rusty? This checklist is to help speed up your troubleshooting process. The list is currently at version 0 and I hope to improve it by giving more structure along with associating/clustering each item with symptoms. Let me know if you want to help! Continue reading

Triggering default Ajax behaviour in Drupal textfields for better UX

By default, the addressfield form elements triggers Ajax requests on change, which means textfields only triggers when blurred. This may leave the user wondering what to do if the next field depends on the results of the Ajax request. To trigger the default Ajax behaviour on other events, you can do


$('body').on('change keyup paste', '.selector.for.your.element', function(e) {
var current_value = $(this).val();
// Do some checks before the request.
if (current_value.length === 4){
// Blur the textfield.
$(this).trigger("blur");
return false;
}
});

A few notes:
on() is used so that the event is live. i.e. still bound after the element is updated, which is common in Ajax forms. If event listeners are added to the element directly, it is lost after the form is updated.

The events ‘change’, ‘keyup’, ‘paste’ is used to capture common events where the contents of the field might change.

Adding even and odd classes to checkboxes in Drupal 7

While theming a page for a client, I came across an interesting challenge: adding even and odd classes to checkboxes. Normally I would have gone with javascript or CSS3 (:nth-child), but I wondered if it can be achieved in ‘the Drupal way’ and achieve the best cross browser support. Google didn’t turn up any results so I decided to do a quick exercise on form element theming. Here’s how I got it to work.

Add our own checkboxes processor. See hook_element_info_alter.

function MYTEMPLATE_element_info_alter(&$type){
  // Append our processor
  $type['checkboxes']['#process'][] = 'MYTEMPLATE_process_checkboxes';
}

Implement the customer checkboxes processor to add the classes we want. See form_process_checkboxes

function MYTEMPLATE_process_checkboxes($element){
  // Loop through options to add striping class and attribute
  if (count($element['#options']) > 0) {
    $i = 0;
    foreach ($element['#options'] as $key => $choice) {
      $element[$key]['#attributes']['class'][] = ($i % 2 == 0) ? 'odd' : 'even';
      $i++;
    }
  }
  return $element;
}

I quickly realized that while this added the even and odd classes on the <input> elements, it would be easier for the themer to have it on the form element wrapper as well. So I decided to add a ‘striping’ key to ‘#attributes’ so that I can identify it in the form element wrapper.

The new processor:

function MYTEMPLATE_process_checkboxes($element){
  // Loop through options to add striping class and attribute
  if (count($element['#options']) > 0) {
    $i = 0;
    foreach ($element['#options'] as $key => $choice) {
      $element[$key]['#attributes']['class'][] = ($i % 2 == 0) ? 'odd' : 'even';
      $element[$key]['#attributes']['striping'] = ($i % 2 == 0) ? 'odd' : 'even';
      $i++;
    }
  }
  return $element;
}

Next, modify the template_form_element() to add the classes on the form element wrapper.

function MYTEMPLATE_form_element($variables) {
  ...
  if (!empty($element['#attributes']['striping'])) {
    $attributes['class'][] = $element['#attributes']['striping'];
  }
  $output = '<div' . drupal_attributes($attributes) . '>' . "\n";
  ...
}

Clear the class registry and we are done. This is by no means the best method available, but is definitely the most straightforward way that jumped at me. If you have a more efficient way do share in the comments.

Building with old iPhone SDKs with new XCode versions

If you have recently updated to the latest version of XCode you might be wondering how to get your 6.1 iPhone SDK back. The new XCode versions do not come with previous iPhone SDK’s so we need to obtain them from older XCode (download them from Apple) and symbolic link them to the right place. First, copy the SDK’s from the download and place them somewhere which wouldn’t get replaced on future XCode upgrades. For my case I left them in /SDKs/iPhoneOS.platform/Developer/SDKs. Next, show package contents of your current XCode.app and navigate to Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs, and make the link with this:

sudo ln -s /SDKs/iPhoneOS.platform/Developer/SDKs/iPhoneOS6.1.sdk iPhoneOS6.1.sdk

Just remember to redo the links whenever you update XCodes.

Exporting your developer and distribution certs and keys from PC to Mac

Migrating my iOS developer and distribution identities from PC to Mac turn out to be a little more involved than expected. I assumed I can import the .cer and .key into my keychain and be done with it, but my Mac does not seem to recognise .cer files at all. So if you’re figuring out how to get the .cer and .key pair to install on your Mac, here’s how.

Before you begin
Have your certificate, key, and Apple’s World Wide Developer Relations (WWDR) certificate ready (available here). Mine’s named ‘developer_identity.cer’, ‘developer_identity.key’ and ‘AppleWWDRCA.cer’, so remember to replace with your own naming when running the following commands.

Open terminal and cd into the directory where the files are residing, then run these commands:

openssl x509 -inform der -in developer_identity.cer -out developer_identity.pem
 
openssl x509 -inform der -in AppleWWDRCA.cer -out AppleWWDRCA.pem
 
openssl pkcs12 -export -out cert.p12 -inkey developer_identity.key -in developer_identity.pem -certfile AppleWWDRCA.pem

What’s the AppleWWDRCA.cer for?
It’s Apple’s World Wide Developer Relations (WWDR) certificate required to certify your builds. Think of it as Apple’s signature on a “the internet trusts this application because Apple trusts it” agreement. You had your signature from the developer_identity obtained from Apple, and now you have Apple’s signature.

Collaborative Consumption Reputation

Collaborative Consumption Reputation Score – A way for various platforms to work together?

Think of it as your Klout score, but instead of measuring social influence, it’s a aggregate score of your reputation across various collaborative consumption platforms. Implementation wise it can be as simple as an automatic crawler that collects these statistics from the public profiles from each platform, or having each platform adhere to a standard set of rest endpoints returning the scores for each user in the platform.

It would be a place where people can find out whether you trashed your last AirBnB room, whether you returned the car in proper condition on iCarsClub, whether you provided accurate description on RentTycoons, or even if you did return the items you exchanged on Leendy by the stipulated time. In time, this score might be as, or even more, valuable than your social influence score. Especially when Collaborative Consumption isn’t a trend, it’s a way of life and it’s here to stay.

The score itself might be represented as a percentile within each system. e.g. if the user’s rep is above 75% of all users in AirBnb, his component from AirBnb would be 75, etc. Then each component from different platforms would be normalized by the the number of actions/transactions made on each system, and in time it may be modified with recency as well.

AFNetworking failing with “Garbage at end” when using php’s cURL

If you don’t set CURLOPT_RETURNTRANSFER to true, cURL outputs the results of the CURL operation directly into the response, which is then sent back to AFNetworking. If the cURL operation outputs anything but valid JSON, this most likely will cause the JSON decoding to fail with:

Error Domain=NSCocoaErrorDomain Code=3840 "The operation couldn’t be completed. (Cocoa error 3840.)" (Garbage at end.) UserInfo=0x753e5c0 {NSDebugDescription=Garbage at end.}

To turn on CURLOPT_RETURNTRANSFER, do:

curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);

Hope this helps prevent some hair-pulling during midnight debugs.

12 Reasons why developing software is like raising kids (and life in general)

  1. Spend some time in the alpha version before rushing (or skipping) to beta. Early childhood development is important but often overlooked.
  2. It’s easier to modify feature sets before they reach release. Habits, like badly designed features, takes a long time to phase out and remove completely without user frustration.
  3. You can release updates, but it’s up to the user to get them. You can bring the cow to the water but not make it drink. Sometimes it takes a major data corruption, service failure, or some other crisis to make the user install the updates you have been pestering them to install months ago. Similarly, kids often need to experience it themselves before they learn the lessons.
  4. Good looking software can trend, solid features will stay. Users may be attracted by sleek interfaces, but they stay for its features and reliability, and history has shown that appearances can go out of date way faster than features. Barring a successful career on the runway, solid skills and a good personality generally matters more in life.
  5. Even a single line of bad code can affect the overall quality of the entire app. Foster a healthy environment by surrounding yourself with role models and generally people with good influences. mysql_query($_GET[‘query’]) anyone?
  6. Continue reading