blog.elliotjameschong.com

How to Add Outbound Link Tracking to Tumblr

Elliot Chong — Thu, 04 Apr 2013 03:12:35 +0000

I recently started a Tumblr blog to help gamers find the best prices on their favorite video games, and like any self respecting content publisher I immediately set about adding analytics to the site so that I could track how well my content was converting. I ran into a few snags along the way when adding outbound link tracking with Google Analytics, so hopefully this guide will help save the next blogger some time.

Click the customize link at the top of your blog.
Click the ‘Edit HTML’ button.

It should look something like this:
Add the below code into your blog’s HTML:

Don’t forget to swap in your domain and GA account id in the script block before the end of the body.

It’s also worth noting that the above code should work fine for adding outbound link tracking to Google Analytics on any website. Hope this was helpful, and happy Tumbling!

Underscore.js Deep Clone and Deep Extend Mix Ins

Elliot Chong — Wed, 10 Oct 2012 18:54:23 +0000

When combining and recomposing JavaScript objects the Underscore extend method is an invaluable tool. Essentially, it copies all of the extended object’s properties onto the originating object. This works great for simple objects that only contain Numbers and Strings; however, once you introduce nested Arrays or Objects with conflicting property names you’ll quickly find that properties you’d ideally like to recursively combine are actually just being overwritten.

This behavior starts to breakdown when you’re looking to combine nested objects, such as when I was recently working with Facebook’s Graph API Field Expansions.

Example use case below:

var user = { "name": { "first": "Earl" }, "friends": ["0","1","3"], "job": "Mad Scientist", "pets": { "dog": "Ralph" } }; var userUpdate = { "name": { "last": "Duncan" }, "friends": ["6","9"], "job": "Happy Scientist", "pets": { "cat": "Judy" }, "city": "Portlandia" }; _.extend(user, userUpdate); // results in user equalling: // { "name": { "last": "Duncan" }, "friends": ["6","9"], "job": "Happy Scientist", "pets": { "cat": "Judy" }, "city": "Portlandia" }

To help solve this I’ve created an Underscore deep extend mixin, usage below:

Feel free to download the CoffeeScript source, tests, and compiled JavaScript for Underscore deep clone and deep extend here.

Update: If you’re looking for a quick and easy deep clone mixin for JSON-compatible datatypes (i.e.: no Date support) try _.mixin({ deepClone: function (p_object) { return JSON.parse(JSON.stringify(p_object)); } });

Update: The excellent Lo-Dash library, an Underscore drop-in replacement that boasts speed improvements and an enhanced feature set, has released its own deep clone and deep extend (aka: merge) methods. Certainly worth checking out!

Using Facebook Social Plugins with AngularJS

Elliot Chong — Wed, 10 Oct 2012 00:48:05 +0000

I’ve been diving into AngularJS lately and came across a use-case where my Facebook Social Plugin-containing Angular templates were being rendered after the Facebook SDK’s init and parse method had already been called. Sad faces ensued as my Facebook Social Plugins were no where to be found in the rendered template. To work around this I’ve created a set of directives that will automatically parse Facebook plugins as they’re rendered by Angular.

module = angular.module 'FacebookPluginDirectives', [] createDirective = (name) -> module.directive name, -> restrict: 'C' link: (scope, element, attributes) -> FB?.XFBML.parse(element.parent()[0]) createDirective pluginName for pluginName in ['fbActivity', 'fbComments', 'fbFacepile', 'fbLike', 'fbLikeBox', 'fbLiveStream', 'fbLoginButton', 'fbName', 'fbProfilePic', 'fbRecommendations']

Feel free to download the compiled JavaScript here.

Caveat: The above code snippet only works for plugins instantiated using the HTML5 class-based method.

Adobe AIR for iOS Development Gotchas

Elliot Chong — Wed, 28 Dec 2011 07:48:15 +0000

Lately I’ve been diving into iOS game development using Adobe AIR 3.1 and have been really impressed by its overall performance and how easy it has been to get a game up and running. However, it hasn’t always been smooth sailing and I’ve run into a fair number of gotchas that I wanted to document in the hopes that it will help others troubleshoot Adobe AIR for iOS development. Happy coding!

Video Playback in Adobe AIR 3

http://blog.elliotjameschong.com/2011/10/16/air-ios-video/

Stage Dimensions Are Inaccurate during Initialization

Wait a few frames before initializing your application so that Stage has a chance to obtain the correct stageWidth and stageHeight properties.

protected var _waitFrames : int = 10;

// In constructor:
this.addEventListener(Event.ENTER_FRAME, initialize, false, 0, true);

protected function initialize(p_event:Event) : void
{
	if (_waitFrames > 0)
	{
		_waitFrames--;
		return;
	}

	this.removeEventListener(Event.ENTER_FRAME, initialize);

	// Application initialization goes here
}

Or detect the proper Stage dimensions with:

var width : Number = this.stage.stageWidth > this.stage.fullScreenWidth ? this.stage.fullScreenWidth : this.stage.stageWidth;

TouchEvents Must Be Enabled

To use TouchEvents you must define an inputMode, such as Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;, in your application’s constructor.

Check for Device Capabilities

Handling TouchEvents or MouseEvents based on device capabilities:

if (Multitouch.supportsTouchEvents)
{
	this.stage.addEventListener(TouchEvent.TOUCH_BEGIN, onTouch, false, 0, true);
	this.stage.addEventListener(TouchEvent.TOUCH_MOVE, onTouch, false, 0 ,true);
}
else
{
	this.stage.addEventListener(MouseEvent.MOUSE_MOVE, onMove, false, 0, true);
}

No TouchEvent Sizes

There is no way to obtain a user’s finger size on iOS, a TouchEvent’s sizeY and sizeX properties will always be 1.

Beware stageX / stageY for MouseEvent.MOUSE_MOVE

MouseEvent.MOUSE_MOVE will report incorrect stageX and stageY values when you release your finger on a Touch enabled device.

To account for this:

function onMouseMove(p_event:MouseEvent) : void
{
	if (p_event.stageX > this.stage.fullScreenWidth || p_event.stageY > this.stage.fullScreenHeight || p_event.stageX < 0 || p_event.stageY < 0)
	{
		return;
	}
}

App Switching

Respond to Stage Event.DEACTIVATE / Event.ACTIVATE events for when an application loses and gains focus.

Adobe AIR for iOS Video Playback

Elliot Chong — Sun, 16 Oct 2011 06:26:17 +0000

Adobe’s latest release of AIR (version 3) finally brings StageVideo to iOS AIR applications. Sadly, getting StageVideo to work properly within AIR was not exactly plug and play and took several hours before finally getting it to work. I’ve jotted down a few notes on the final solution, hopefully this post will help to save the next developer some frustration.

Settings for Adobe Media Encoder:

MP4 format is required.
Codec: MainConcept H.264 Video
TV Standard: NTSC
Profile: Baseline
Level: 3.1
Bitrate Encoding: CBR
Bitrate: 1.1

The property in the app configuration XML must be set to ‘direct’ or ‘gpu’.

In additional compiler arguments within Flash Builder, you must be exporting as Flash Player 11 with the parameter ‘-swf-version=13′

Debugging Facebook Applications for Fun and Profit – Firefox 4 & Firebug

Elliot Chong — Mon, 04 Apr 2011 18:05:03 +0000

Are you Facebook developer and frustrated by your inability to use a JavaScript console to debug your application on Facebook? Good news, with the release of Firefox 4 and the latest version of Firebug (1.7.0)- now you can!

To access an iframe Facebook application’s context enter cd(frames[0]); into your Firebug console. This will work on both Canvas and Tab applications.

UPDATE – 2011/06/13: It appears that Facebook has modified their code. You now have to enter cd(frames[0]);, instead of cd(frames[1]);, to access the appropriate frame within Firebug.

By default, command line expressions are relative to the top-level window of the page. The Commandline API for Firebug’s JavaScript console exposes a ‘cd(window)’ method to alter the context of the console to a different window; however, prior to the release of Firefox 4 and Firebug 1.7.0 this functionality was throwing an error citing cross-domain issues. An excellent reason to upgrade if I do say so myself!

Debugging within a Facebook application's context

Note: The Webkit JavaScript console (latest Chrome and Safari builds as of the time of this post) currently does not allow switching the context of to a frame loaded from a different domain.

Flash is Dead! Long Live Flash!

Elliot Chong — Tue, 08 Mar 2011 02:50:20 +0000

Heading to SXSW this year?

Join @Toby Miller and @I as we embark on a deep dive into the world of ‘Flash hating’, and what it means for the future of the internet. (#flashdebate)

Update 04/04/2011 – Embedded presentation below.

Since this is my first SXSW I’ve been doing a little research on what I might expect when I meet ‘the internet’ IRL (in real life.) Thankfully, Alex Blagg has me covered with this informative How To Be South By South Best video:

How to Add an iframe to a FBML Tab

Elliot Chong — Wed, 09 Feb 2011 15:28:03 +0000

Update – Facebook has released iframe support for Tabs. Please use this method of implementing iframes moving forward.

This is a temporary workaround for loading iframes into FBML tabs until FBML is fully deprecated in Q1 of 2011. This method requires a click to activate to load the iframe. Once the deprecation is complete this FBML code will need to be replaced with Facebook’s prescribed solution.

Check out the live example & source of the code below.

How to Add a Facebook Like Button to a FBML Tab

Elliot Chong — Mon, 03 Jan 2011 05:27:38 +0000

Due to Facebook’s restrictions on JavaScript and iFrames within FBML tabs Like Buttons were once considered a feature of the Facebook elite, namely: Canvas Applications and external websites. Thankfully this walled garden is no more, and through a little CSS trickery we can commandeer the fb:comments’ Like button and bring its power back to the people!

fb:comments' Like Button

As an added bonus this hijacked Like button can reference any OpenGraph object, including Fan pages and official metadata-created Like buttons, which isn’t possible with the standard Facebook Like button.

Using the fb:comment's Like Button to bring the Like button to a FBML tab.

Note: IE does not support CSS that is defined within a style tag in FBML, so as a best practice I’ve loaded the CSS from an external stylesheet. Ignore this step and bake the CSS right into the FBML if you don’t mind those silly IE users seeing your page render incorrectly. Besides, Facebook doesn’t support IE6, why should you?

External StyleSheet ‘likeHack.css’

/**
 * Hide the Comments component.
**/
div.comment_body { display: none; }

/**
 * Uncomment the line below if you'd like to constrain the width
 * of the Like component.
**/
/*div.like { width: 200px; }*/

/**
 * Uncomment the line below to disable the Friend Pile under
 * the Like button.
**/
/*div.connect_widget_sample_connections { display: none; }*/