Pixelchild

objective-c singleton macro that supports both ARC enabled and disabled projects

Mon, 20 Feb 2012 18:27:00 +1100

Im a big fan of Matt Gallagher’s singleton macro and have been useing a slightly modified version of it by Oliver Jones.

Lately however I’ve been enabling ARC in my projects and came across the problem of including the macro only to have xcode winge to me about all the release methods. Im using a library so I wanted my macro to support both enviroments. I initially went back to Matt’s macro to see if he perhaps updated for this situation but it seems not so. I was also suprised to see that i couldnt really find any thing else usefull on the subject.

So back to basics, my buddy Adam Phin and I figured we can detect if ARC is enabled with the following preproccessing flag

#if __has_feature(objc_arc)

Using this flag we came up with this macro. You can download it here.

//
//  SynthesizeSingleton.h
//  Copyright 2009 Matt Gallagher. All rights reserved.
//
//  Modified by Oliver Jones.
//
//  Permission is given to use this source code file without charge in any
//  project, commercial or otherwise, entirely at your risk, with the condition
//  that any redistribution (in part or whole) of source code must retain
//  this copyright and permission notice. Attribution in compiled projects is
//  appreciated but not required.
//

#if __has_feature(objc_arc)
#define SYNTHESIZE_SINGLETON_FOR_CLASS(classname, accessorname) \
+ (classname *)accessorname\
{\
static classname *accessorname = nil;\
static dispatch_once_t onceToken;\
dispatch_once(&onceToken, ^{\
accessorname = [[classname alloc] init];\
});\
return accessorname;\
}
#else
#define SYNTHESIZE_SINGLETON_FOR_CLASS(classname, accessorname) \
static classname *shared##classname = nil; \
+ (void)cleanupFromTerminate \
{ \
classname *temp = shared##classname; \
shared##classname = nil; \
[temp dealloc]; \
} \
+ (void)registerForCleanup \
{ \
[[NSNotificationCenter defaultCenter] addObserver:self \
selector:@selector(cleanupFromTerminate) \
name:UIApplicationWillTerminateNotification \
object:nil]; \
} \
+ (classname *)accessorname \
{ \
static dispatch_once_t p; \
dispatch_once(&p, \
^{ \
if (shared##classname == nil) \
{ \
NSAutoreleasePool *pool = [[NSAutoreleasePool alloc] init]; \
shared##classname = [[self alloc] init]; \
[self registerForCleanup]; \
[pool drain]; \
} \
}); \
return shared##classname; \
} \
+ (id)allocWithZone:(NSZone *)zone \
{ \
static dispatch_once_t p; \
__block classname* temp = nil; \
dispatch_once(&p, \
^{ \
if (shared##classname == nil) \
{ \
temp = shared##classname = [super allocWithZone:zone]; \
} \
}); \
return temp; \
} \
- (id)copyWithZone:(NSZone *)zone { return self; } \
- (id)retain { return self; } \
- (NSUInteger)retainCount { return NSUIntegerMax; } \
- (oneway void)release { } \
- (id)autorelease { return self; }
#endif

How to create a Tweet Sheet the correct way in iOS 5

Wed, 30 Nov 2011 22:07:00 +1100

With the many new features introduced in iOS 5 I was particularly excited about the new Twitter.framework. Apple customers can now enjoy the pleasures of having their Twitter accounts baked right into the OS granting access to the twitter-verse from every nook and cranny in the device. While developers can now integrate twitter into their apps much faster and more easily than it has ever been before.

In this tutorial I will show you how to integrate the new Twitter.framework in your project as a weak link as well as posting your first tweet with a composer sheet. Unfortunantly we are not quite done with the days of including third-party libraries to authenticate twitter accounts, post tweets etc. While the new iOS5 Twitter.framework will do all the heavy lifting for us, we SHOULD still only include it as a weak link library and fallback on third-party solutions for users still yet to upgrade to iOS 5.. Who are we kidding, they are never going to upgrade.

For now, i am going to assume you already know how to integrate third-party libraries and concentrate more on the Twitter.framework. If not i recommend having a looksy here later on https://dev.twitter.com/docs/twitter-libraries

Getting started

I am also assuming since you are interested in the Twitter.framework which is new. You probably have already upgraded to xcode 4.1. Otherwise some of this isnt going to make much sense to you.

To begin you will need to add the Twitter.framework to your project. Do this by clicking on your project in the Navigator sidebar, then its target, and then going to Build Phases. You should see a list of options. Expand the “Link binary with libraries” options by clicking on the arrow next to it. If you havnt already, click the + button to add a new library. In the pop-up locate the “Twitter.framework” by typing it in the search box. It should appear under the iOS 5 folder. Select it and click the add button.

You should now see the Twitter.framework in your ‘Link Binary With Libraries’ list. To the right of it you should see the word Required with two arrows pointing up and down. Click the word ‘Required’ and change it to Optional. This will reference the library as a weak link which is the important part if you intend to build for older targets such as iOS 4.

The code

First off, include the framework in your header.

#import

As we referenced that framework as optional, the next hurdle is to determine if the framework is available. In this tutorial we are interested in the class “TWTweetComposeViewController” so lets check for this with the following.

-(void)displayTwitterComposerSheet
{
    //Check if our weak library (Twitter.framework) is available
    Class TWTweetClass = NSClassFromString(@"TWTweetComposeViewController");
    if (TWTweetClass != nil)
    {
        //Class exists
        
    }
    else
    {
        //Class dosnt exist, so will need to fallback on a third-party solution
        
    }
}

Using the above code, you may decide not to provide any twitter features at all to users running older operating systems. It will depend how heavily your app depends on having twitter features.

Once we have determined the framework is available, lets display a tweet composor sheet with a few configurations.

-(void)displayTwitterComposerSheet
{
    //Check if our weak library (Twitter.framework) is available
    Class TWTweetClass = NSClassFromString(@"TWTweetComposeViewController");
    if (TWTweetClass != nil)
    {
        //Create the tweet sheet
        TWTweetComposeViewController *tweetSheet = [[TWTweetComposeViewController alloc] init];
        
        //Set initial text (optional)
        [tweetSheet setInitialText:@"Hell yeah, Just integrated the #iOS5 twitter framework in my project (via @pixelchild)"];
        
        //Attach an image (optional)
        [tweetSheet addImage:[UIImage imageNamed:@"anImage.png"]];
        
        //Add a link (optional)
        [tweetSheet addURL:[NSURL URLWithString:@"http://www.pixelchild.com.au/"]];
        
        //Set our completion handler with a block
        tweetSheet.completionHandler = ^(TWTweetComposeViewControllerResult result){
            [self dismissModalViewControllerAnimated:YES];
        };
        
        //Present the tweet sheet
        [self presentModalViewController:tweetSheet animated:YES];
        
        //Release unless your one of the cool kids using ARC :)
        [tweetSheet release];
        
    }
    else
    {            
        //TODO: Add a twitter composer fallback
    }
}

The framwork will automatically shorten your links as well as take care of any authentication. If the user hasnt signed in yet, they will get a little alert asking them to configure an account.

Hope that helps :)

How to convert a html hex string into UIColor with objective-c

Mon, 14 Nov 2011 22:30:00 +1100

Typically you should be using RGB (Red, Green, Blue) UIColor’s. However, every now and then you will need to create one from a HEX string. Probably from an API you have to deal with. None the less there is an ubundance of different methods you can use converting hex strings into UIColor objects. This is the solution I swear by and never had a problem with it thus far.

To get started, Create the two following files in your project.

UIColor+PXExtentions.h

#import 

@interface UIColor (UIColor_PXExtensions)
+ (UIColor*)pxColorWithHexValue:(NSString*)hexValue;
@end

UIColor+PXExtensions.m

#import "UIColor+PXExtensions.h"

@implementation UIColor (UIColor_PXExtensions)

+ (UIColor*)pxColorWithHexValue:(NSString*)hexValue 
{
    //Default
    UIColor *defaultResult = [UIColor blackColor];
    
    //Strip prefixed # hash
    if ([hexValue hasPrefix:@"#"] && [hexValue length] > 1) {
        hexValue = [hexValue substringFromIndex:1];
    }
    
    //Determine if 3 or 6 digits
    NSUInteger componentLength = 0;
    if ([hexValue length] == 3)
    {
        componentLength = 1;
    }
    else if ([hexValue length] == 6)
    {
        componentLength = 2;
    }
    else
    {
        return defaultResult;
    }
    
    BOOL isValid = YES;
    CGFloat components[3];
    
    //Seperate the R,G,B values
    for (NSUInteger i = 0; i < 3; i++) {
        NSString *component = [hexValue substringWithRange:NSMakeRange(componentLength * i, componentLength)];
        if (componentLength == 1) {
            component = [component stringByAppendingString:component];
        }
        NSScanner *scanner = [NSScanner scannerWithString:component];
        unsigned int value;
        isValid &= [scanner scanHexInt:&value];
        components[i] = (CGFloat)value / 256.0f;
    }
    
    if (!isValid) {
        return defaultResult;
    }
    
    return [UIColor colorWithRed:components[0]
                           green:components[1]
                            blue:components[2]
                           alpha:1.0];
}


@end

Usage

In your class file remember to import the category header file. In this case #import “UIColor+PXExtenions.h” Then use the following code to create your UIColor.

UIColor *mycolor = [UIColor pxColorWithHexValue:@"#BADA55"];

Hope that helps :))

How to fix "this class is not key value coding-compliant for the key"

Mon, 17 Oct 2011 11:24:00 +1100

If you ever come across this error:

*** Terminating app due to uncaught exception 'NSUnknownKeyException', reason: '[setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key ...'

It is likely you have either renamed an IBOutlet property or removed a nib (.xib) file associated with your class.

If you removed the nib and decided to go nibless you can fix this error by simply selecting “Reset Content and Settings” from the ios simulator menu or “delete” the app from your device. You may also have to perform a “Clean” in xcode (Product > Clean).

Otherwise, If you still have your nib and renamed an IBOutlet property then simply open the nib file and reconnect your IBOutlet with its corresponding UI control. You may also need to disconnect the old one. It should appear grayed out.

Repair -weak_library /usr/lib/libSystem.B.dylib for Urban Airship

Mon, 26 Sep 2011 21:21:00 +1000

This week I was implementing Urban Airship into my application when i came across this weird behaviour. I followed the documentation and implemented all the steps only to find the application would crash with “EXEC_BAD_ACCESS” before if even finished loading. A little confused I tried to NSZombie the root of the cause however instruments wouldn’t attach to the target and I had to force quite instruments just to regain control of my computer.

Going back on my steps I narrowed the issue down to setting the following flag in the targets “Other Linker Flags”

-weak_library /usr/lib/libSystem.B.dylib

You will most likely have that reference because your are either using Urban Airship or Flurry analytics in your projects.

Apparently this library is not available on the ios simulator above SDK version 4.2. So, If you are experiencing problems with this I suggest you try using the following flag instead.

-weak-lSystem

New Badass Features in Visual Studio 11 for Front End Developers

Tue, 20 Sep 2011 21:57:00 +1000

Microsoft Visual Studio is my primary weapon of choice for web development and the new set of features coming in the next edition can only be explained as badass!

The first thing you’re going to notice is you can now single click (highlight) files from the solution explorer to open them. Quickly traverse files with the up and down arrow keys and watch the contents of each file flash in front of you as go. I’m actually surprised at how quick they seem to load. This is fantastic as I’ve always hated how you had to double click files and end up with a massive amount of tabs. If you’ve ever used xcode before, this now works in the exact same way.

I was pretty keen to start editing some CSS as this is the first edition that supports CSS3 right from the box. I’ve also read Microsoft rebuilt the entire css editor from scratch so I had high expectations. First off as expected the intellisense now has all the new CSS3 properties, in fact there is 250 of them. It was so nice to type “box” only to see intellisense suggest “box-shadow”. I wondered about some more trickier ones and typed a dash “-” and intellisense immediately responded with every mozilla extension under the sun.

Something even cooler is you can now type the first character of each word separated by hyphens to reveal a new awesome shortcut. For example a property like “border-top-color” can be selected by typing “btc”. When you type the colon it gets replaced with the full property name. Very cool.

One feature im really excited about is the new color picker widget. Done are the days of copying hex color values from photoshop. Now for example you just need to type “background-color:” and you are presented with this new color widget. Use the picker to select colors from anywhere on your screen. Want to drop the opacity? No problem, just adjust the opacity slider and watch the editor set an rgba value.

Poking around the Text Editor options for css you will notice there is a new checkbox for “Hierarchical indentation”. What this means is you will get indentations that relate to your hierarchical rules. You should already be coding in this fashion, however visual studio 11 now just makes it that much easier for you.

For those people that hate scrolling through long css files, there is something new for you too. Set regions in the css and you now have a collapasable block.

If you’re worrying about all the new CSS3 features and old browser support you can relax. Visual Studio 11 will allow you select the scheme for your project (CSS 1.0, 2.1 or 3.0).

For the javascript side of things, Im sorry to say it was also rebuilt but still functions much the same way. It is still frustratingly missing the dropdown at the top of the editor listing all the functions available in the file, much like the one you get when editing a cs file. The only good thing about it is it now supports ECMAScript 5 and regions. The rest of the javascript features is a long list of how well it integrates with Internet Explorer 10 and hell would have to freeze over before I start using that as my primary dev browser. Thankfully google chromes inspector is getting seriously cool and has me covered on that bases.

In summary Visual Studio 11 is going to help make you a more productive fed. The guys at Microsoft have made a remarkable tool and I gotta hand it to them. They make seriously crap browsers but I’m absolutely in love with this IDE.

How to recursively copy files using MSBuild Copy Task

Mon, 19 Sep 2011 20:28:00 +1000

Today I was faced with the problem of copying a set of files into a new location using a MSBuild task. Previously we got the job done using an xcopy command post build, while this was okay it’s not ideal for front end developers.

The problem is front end developers are constantly tweaking files usually followed by refreshing the website over and over. In my case today we where building from a kernal, so the task of building the dll’s and waiting for iis to recompile is all very time consuming.

This was my solution to copy css and javascript files recursively into a new location using the MSBuild Copy Task.

The double stars (**) is used to set the task as a recursive copy, it will also maintain any folder structure you have.

Using this method enables you to quickly build the CSS and Javascript files without changing any dll’s. This means the website refresh is instant and you will be much more productive.

Tips for making jQuery selectors faster

Mon, 19 Sep 2011 00:25:00 +1000

Unfortunately jQuery selectors aren’t stupid proof. Its all too easy to chuck a long string of junk into your selector and not have a single problem. You might have the attitude of, “meh it works” and not give it any more thought of if there is a better way.

The upside of actually paying attention to your jQuery selectors is: the faster they execute the faster your page is going to render and operate. This is especially true for browsers with slower javascript engines like Internet Explorer and phones/devices with lower memory.

I hope that you find using my following tips your jQuery selectors will become optimised to the fastest execution time humanly possible.

Let me introduce you to “Sizzle”

Sizzle is the selector engine jQuery uses and was created by John Resig and the jQuery team. To begin writing optimal selectors you need to first understand how Sizzle works. Given this selector $(‘.content .foo .bar’). Have a minute to think about how you would actually go about finding all the bar elements that are a child of foo and that is a child of content if you were to code a selector engine yourself.

Sizzle’s solution is by reading selectors back-to-front. So looking at the selector again $(‘.content .foo .bar’) you need think right to left. It will find all of the bar elements, then with the results find all the ones with a parent of foo. With those results it will find all the ones with the parent content. This may seem strange but its actually the fastest way to filter the DOM for your desired element(s).

If you now understand how sizzle works we can start optimising what we tell it to look for. So perhaps in the DOM all we needed to look for was $(‘.foo .bar’) and this would execute faster.

Its all about the context

When you pass a string into a jquery selector the constructor method tries to figure out what you passed in. When context is a DOM element jquery will transform $(selector, context) into $(context).find(selector).

In this case, you can give jquery a helping hand by calling that method your self and avoid all the logic the constructor would have to do to figure it out.

Its a good idea to keep selector strings to the bare minimals so we are not asking the constructor to do time consuming logic.

Harness the power of the ID

Sizzle has been optimised for selecting ID elements with the native javascript function. getElementById() which is the fastest native way of selecting DOM elements.

Always use id’s as your first preference.

Tag before Class

The second fastest selector is selecting elements by their tag. eg $(‘div’)
The slowest is selecting elements by class name eg $(‘.foo’)

With this knowledge tags should definitely be used with classes where possible.

$('div.foo') //faster
$('.foo') //slower

Study the scheme of your elements

Using the correct jQuery methods with our selectors is a very powerful way of speeding up execution time. For example lets have a look at this html snippit from a page and a few ways you can write a selector for the list(

) items in the list.


	my link

We could select bar in the following ways:

$(‘li’)
$(‘#foo li’)
$(‘#foo’).find(‘li’)
$(‘#foo’).children(‘li’)

So lets think about which one will execute the fastest. You should be able to do this without the need for benchmarking simply by stoping and thinking about the logic jQuery will need to do for each one.

The first one is asking jQuery to traverse through every single DOM element in the page. This is badly expensive.
The second one is better, we are specifying an id at least however sizzle’s constructor logic is going to transform that into something that looks similar to number 3 anyway.
So number three is looking good yes? Well, we are only interested in the

element(s) and find() is going to look into into the elements as well looking for any more

’s that we can clearly see aren’t there.
Number four is only going to traverse the immediate children of #foo and is absolutely the fastest selector out of these options. Give your self a pat on the back if this is the one you chose.

A hitch hikers guide on how to improve jQuery performance

Sat, 17 Sep 2011 18:37:00 +1000

I see all to often the simple mistakes developers make when coding with jQuery.

Hopefully these tips will appear simple to you and thats because they ARE. These basic changes to your coding habits will have drastic performance improvements to your jQuery.

Use the latest version of jQuery

If you’re too lazy to read past the first tip then this is for you (mr lazy developer).

Simply updating your jQuery to the latest available version can improve the performance of your website without changing a single line of code. jQuery is constantly being tweaked and refactored to improve its performance. For example have a look at the following graph of the performance boost for the attr() method from jQuery 1.5.2 to 1.6

Just remember to thoroughly test your code in a staging environment when upgrading jQuery and read the docs to see what might have been deprecated.

Use a CDN (Content Delivery Network)

Take full advantage of frameworks that are more than likely to be already cached client side. The more developers that use it, the faster all our sites load. I like to use googles jQuery CDN with a fallback like so:

Visit http://code.google.com/apis/libraries/devguide.html for the latest jQuery location and usage.

Use smarter fast selectors

Selecting elements by id is the fastest method and uses the native javascript method getElementdById()
Selecting elements by tag is the 2nd fastest method and uses the native javascript method getElementByTagName()
Selecting elements by class is the slowest method and uses the native javascript method getElementByClass()

Always descend from the closest id in your selectors.
If you need to use a class selector, at least add a tag in front when possible. $(‘span.btn’) is faster than $(‘.btn’)

Eliminate query waste

jQuery executes on a liner thread (except for when using async stuff), it basically means it can only interperate one line of code or function at a time before moving to the next. I see the often mistake of developers dumping all their code into the document ready callback. You should never do this, its is more ideal to only run code/functions that are applicable to the page you’re viewing.

The best way to do this is break your code into separated class functions. Then initialise the code from inline scripts as they are needed.

Javascript

var myCustomClass= {
	init: function(){
		$(document).ready(function(){
			//code
		});
	}
};

Html

The DOM is not a database

Create what you need in memory then update the DOM at the latest moment. Direct DOM manipulation is expensive. An example of this would be to build html into a string variable and only append when its ready.

Good (fast)

var htmlString;
for (i=0;i<100;i++){
	htmlString += "Another list item";
}

//All finished so lets inject into dom
$('ul').append(htmlString);

Bad (Slow)

for(i=0;i<100;i++){
	$('ul').append('another list item');
}

Cache your jQuery DOM elements. It’s a no brainer!

Querying the DOM for your elements is an resource expensive task. Its more ideal to save the element into a variable instance. Its also good practice to prefix your variable names with the dollor ($) sign as its a good indication the variable is a jQuery DOM element.

/* Lets save a list with the id 'aList' into memory */
var $myList = $('#aList');

/* Now that its cached into a instance variable we can 'cheaply' query it multiple times */
var listHeight = $myList.height();
$myList.children('li').eq(1).hide();
$myList.fadeOut(700);
//etc..

Use .delegate() it rocks!

Are you still using the old school hover() functions or maybe you have moved onto bind() or live(). The delegate() method was added to jQuery 1.4 and i was a huge fan instantly. There is certainly no shortage of event listner methods to choose from so here is why i recommend you start using .delegate()

It forces you to specify a context which gives you a performance head start.
It dosnt wait for your event to bubble all the way up the DOM.
It works for future elements. (eg. when using append/ajax)

For example, this is how I would typically use delegate for a hover effect on a list of items.

$('ul').delegate('li', 'mouseenter mouseleave', function(e){
	if(e.type == 'mouseenter'){
		//Mouse over code
	}
	else
	{
		//Mouse out code
	}
});

Utilise chaining properly

The one thing i love about jQuery is the ability to chain multiple method calls together. For example this is commonly used to switch states with a class

$('element').removeClass('active').addClass('de-activated')

Pretty straigt forward right. But jQuery chaining can go so much more eleberate than that, and the beautiful thing about it is we cut right down on our selector calls.

$('element')
	.removeClass('active')
	.find('div')
	.css({background:'#000'})
	.end()
	.append(' a new span ')
	.animate({left: 400}, 'slow');

Its common practice to write chaining methods on individual lines when there are lots of them. This helps with readability and remains valid javascript.

Use .empty() not .html(“”) to clear elements

If you empty a div or list by making its html equal an empty string, this can actually cause a memory leak for any events assigned to child DOM elements. The jQuery docs says:

To avoid memory leaks, jQuery removes other constructs such as data and event handlers from the child elements before removing the elements themselves.

Memory leaks can become a particular problem with devices such as phones. So always be safe and use .empty()