CTGradient contains an incredible diversity of built-in gradients, gradient styles, and methods for creating fancy rainbows, radial gradients, linear gradients, aqua gradients, and a number of other interesting class and instance methods. It allows you to dynamically alter gradients by adding or removing colors, changing the level of transparency, filling NSRects or NSBezierPaths, rotating the gradient, etc. For demonstration purposes, all these features are excellent. For production, this is a nightmare.

CTGradient.m weighs in at over 1300 lines of code.

Ignoring Mr. Weider’s unique style of formatting, take a look through the code. If you’re putting this class in an application, you can immediately remove over a thousand lines. Just like that. But if you take some time to understand what’s going on, you can optimize this thing till it runs like a Ferrari.

You’ll notice Trimmit uses a gradient background for it’s window. Let’s cut down CTGradient until it matches the level of optimization of Trimmit’s gradient code.

Clear the junk

Firstly, let’s remove the methods we know for sure we won’t need. Remove the following methods completely from both the interface and the implementation (scroll down for more):

// We don't need the preset gradients

+ (id)dividerGradient;
+ (id)statusBarGradient;
+ (id)aquaSelectedGradient;
+ (id)aquaNormalGradient;
+ (id)aquaPressedGradient;
+ (id)unifiedSelectedGradient;
+ (id)unifiedNormalGradient;
+ (id)unifiedPressedGradient;
+ (id)unifiedDarkGradient;
+ (id)sourceListSelectedGradient;
+ (id)sourceListUnselectedGradient;
+ (id)rainbowGradient;
+ (id)hydrogenSpectrumGradient;

// We won't make any drastic modifications to the gradient once created

- (CTGradient *)gradientWithAlphaComponent:(float)alpha;
- (CTGradient *)addColorStop:(NSColor *)color atPosition:(float)position;
- (CTGradient *)removeColorStopAtIndex:(unsigned)index;
- (CTGradient *)removeColorStopAtPosition:(float)position;
- (CTGradientBlendingMode)blendingMode;
- (NSColor *)colorStopAtIndex:(unsigned)index;
- (NSColor *)colorAtPosition:(float)position;

// Now we don't need to conform to the NSCopying and NSCoding protocols

- (id)copyWithZone:(NSZone *)zone;
- (void)encodeWithCoder:(NSCoder *)coder;
- (id)initWithCoder:(NSCoder *)coder;

// We only need to fill a simple NSRect

- (void)drawSwatchInRect:(NSRect)rect;
- (void)radialFillRect:(NSRect)rect;
- (void)fillBezierPath:(NSBezierPath *)path angle:(float)angle;
- (void)radialFillBezierPath:(NSBezierPath *)path;

// Remove the entire (Private) category;
// but leave -addElement:

- (void)_commonInit;
// move setBlendingMode code into init
- (void)setBlendingMode:(CTGradientBlendingMode)mode;
- (CTGradientElement *)elementAtIndex:(unsigned)index;
- (CTGradientElement)removeElementAtIndex:(unsigned)index;
- (CTGradientElement)removeElementAtPosition:(float)position;

The following C functions are now unused:

static void chromaticEvaluation(void *info, const float *in, float *out);
static void inverseChromaticEvaluation(void *info, const float *in, float *out);
static void transformRGB_HSV(float *components);
static void transformHSV_RGB(float *components);
static void resolveHSV(float *color1, float *color2);

And also remove the following from the header:

typedef enum  _CTBlendingMode
    {
    CTLinearBlendingMode,
    CTChromaticBlendingMode,
    CTInverseChromaticBlendingMode
    } CTGradientBlendingMode;

Remove the <protocols> and unnecessary instance variables so the interface looks like this:

@interface CTGradient : NSObject {
    CTGradientElement* elementList;
    CGFunctionRef gradientFunction;
}
+ (id)gradientWithBeginningColor:(NSColor *)begin endingColor:(NSColor *)end;
- (void)fillRect:(NSRect)rect angle:(float)angle;
- (void)addElement:(CTGradientElement *)newElement;
@end

Before we go further, we’ll need to take a detour and fix the remaining code so that it compiles. That’s easy enough - just remove any references to code we’ve removed.

If you’ve been following along, your CTGradient should now look like this (also made it readable!).

In a few short minutes, we’re down from more than 1300 to a little over 200 lines.

It gets better.

Optimize it

First stop, fillRect:angle:. Since the gradient for Trimmit’s window only runs vertically (angle 90), we can straight away take out the angle argument, and also cut the entire if / else structure with the angle down to the two lines that are under the if(angle == 90). Ah, much better.

Now things start getting a teeny bit more complex - and fun.

The CTGradient code is written so that one can have many different color stops. The CTGradientElement struct has a nextElement which points to the next CTGradientElement and the position of the current element is stored under the float position. However, we need just two - the starting and ending shades.

Let’s take a look at cutting the multiple elements down to just two.

The addElement: method has a lot of looping to insert the element at the correct place. However, since we know that we only ever need two, we can cut it down to this:

- (void)addElement:(CTGradientElement *)newElement {
    if(elementList) {
        // elementList exists, add second element
        elementList->nextElement = malloc(sizeof(CTGradientElement));
        *(elementList->nextElement) = *newElement;
        elementList->nextElement->nextElement = 0;
    } else {
        // no elements - add first element
        elementList = malloc(sizeof(CTGradientElement));
        *elementList = *newElement;
        elementList->nextElement = 0;
    }
}

Similarly with dealloc,

- (void)dealloc {
    CGFunctionRelease(gradientFunction);
    free(elementList->nextElement);
    free(elementList);
    [super dealloc];
}

While we’re at it, let’s clean up init as well:

- (id)init {
    if(self = [super init]) {
        CGFunctionCallbacks evaluationCallbackInfo = {0 , &linearEvaluation, 0};
        static const float input_value_range[2] = { 0, 1 };
        static const float output_value_ranges[8] = { 0, 1, 0, 1, 0, 1, 0, 1 };
        gradientFunction = CGFunctionCreate(&elementList, 1, input_value_range, 4, output_value_ranges, &evaluationCallbackInfo);
    }
    return self;
}

Now we head to the linearEvaluation function. info passed in refers to elementList (see the CGFunctionCreate call). Again, since we know that we’ll only ever have two elements we can reduce it to:

void linearEvaluation (void *info, const float *in, float *out) {
    float position = *in;

    CTGradientElement *color1 = *(CTGradientElement **)info;
    CTGradientElement *color2 = color1->nextElement;

    out[0] = (color2->red - color1->red)*position + color1->red; 
    out[1] = (color2->green - color1->green)*position + color1->green;
    out[2] = (color2->blue - color1->blue)*position + color1->blue;
    out[3] = (color2->alpha - color1->alpha)*position + color1->alpha;
}

And now we can finally remove the lines from +gradientWithBeginningColor:endingColor: where the positions are set, and also remove the position float from the CTGradientElement struct.

We’re now down to a little over 100 lines. Your CTGradientElement.m should now be looking something like this. Going well, but let’s take things up a notch.

For Trimmit’s background, we’re not interested in the red, green, blue and alpha components - we just need a grayscale shading. This is the most fun part.

Instead of float red, green, blue, alpha; in the CTGradientElement struct, we can have just float shade;.

Now, during init we have:

CGFunctionCallbacks evaluationCallbackInfo = {0 , &linearEvaluation, 0};
static const float input_value_range[2] = { 0, 1 };
static const float output_value_ranges[8] = { 0, 1, 0, 1, 0, 1, 0, 1 };
gradientFunction = CGFunctionCreate(&elementList, 1, input_value_range, 4, output_value_ranges, &evaluationCallbackInfo);

The third argument, input_value_range is the domain. This gets passed into linearEvalution through *in.This is the independent variable. When we’re drawing the gradient, linearEvaluation is called with *in (the domain) starting at the first value of input_value_range and ending up at the second. So, something like 0.000, 0.001, 0.002 … 0.998, 0.999, 1.000. The function’s job is to set the the color components for each given value of the domain.

The first optimization we can make here is to return only one channel instead of four. This changes it to:

- (id)init {
    if (self = [super init]) {
        CGFunctionCallbacks evaluationCallbackInfo = {0, &linearEvaluation, 0};
        static const float range[2] = {0, 1};
        static const float domain[2] = {0, 1};
        gradientFunction = CGFunctionCreate(&elementList, 1, domain, 1, range, &evaluationCallbackInfo);
    }
    return self;
}

This change impacts back on the linearEvaluation function - now it only needs to return one channel:

void linearEvaluation (void *info, const float *in, float *out) {
    CTGradientElement *color1 = *(CTGradientElement **)info;
    out[0] = (color1->nextElement->shade - color1->shade)*(*in) + color1->shade;
}

And don’t forget +gradientWithBeginningColor:endingColor:. We improve performance here, as we only need the shade - not a color. We can rename it to something appropriate.

+ (id)gradientWithBeginningShade:(float)begin endingShade:(float)end {
    id newInstance = [[[self class] alloc] init];
    CTGradientElement color1, color2;

    color1.shade = begin; color2.shade = end;

    [newInstance addElement:&color1];
    [newInstance addElement:&color2];
    return [newInstance autorelease];
}

Now we’re only returning one grayscale channel. But hold on, we’re still in the RGB colorspace! That’s easily fixed. In fillRect:, replace:

#if MAC_OS_X_VERSION_MAX_ALLOWED >= MAC_OS_X_VERSION_10_4
    CGColorSpaceRef colorspace = CGColorSpaceCreateWithName(kCGColorSpaceGenericRGB);
#else
    CGColorSpaceRef colorspace = CGColorSpaceCreateDeviceRGB();
#endif

with:

CGColorSpaceRef colorspace = CGColorSpaceCreateDeviceGray();

CGColorSpaceCreateDeviceGray is device-dependent on Mac OS X 10.3 and below, but starting from Tiger, it’s now device-independent which is good in terms of appearance.

While we’re in fillRect:, we can also make a few more improvements:

- (void)fillRect:(NSRect)rect {
    CGContextRef currentContext = [[NSGraphicsContext currentContext] graphicsPort];
    CGContextSaveGState(currentContext);
    CGColorSpaceRef colorspace = CGColorSpaceCreateDeviceGray();
    CGContextClipToRect(currentContext, *(CGRect *)&rect);
    CGShadingRef myCGShading = CGShadingCreateAxial(colorspace, CGPointMake(0, 0), CGPointMake(0, NSMaxY(rect)), gradientFunction, 0, 0);
    CGContextDrawShading(currentContext, myCGShading);

    CGShadingRelease(myCGShading);
    CGColorSpaceRelease(colorspace);
    CGContextRestoreGState(currentContext);
}

I moved the startPoint and endPoint CGPoints straight into the CGShadingCreateAxial call. Also, we only ever fill the whole view with the gradient, so just put in 0 instead of using NSMinX and NSMinY. We could replace the CGPointMake(0, 0) with (CGPoint){0,0}, but I’m not sure if that’d be noticeably faster.

Our code is at a lean 80 lines. Now for the biggest change yet.

Heading back to dear old linearEvaluation. Look at this line:

out[0] = (color1->nextElement->shade - color1->shade)*(*in) + color1->shade;

What’s happening here? Think about it like this:

Essentially, we’re just "graphing" a straight line:

y = mx + c

where x is the position, *in, and y is the shade we return (out[0]), and c is the initial shade.

Since our x value only goes from 0 to 1 (see domain in CGFunctionCreate), at x = 0, we will have y = c. At x = 1, we’ll have y = m + c.

So we only need the start shade as our *info value, since we can have m as the difference between the final and initial shades. Let’s effect this in our code.

We can get rid of the CTGradientElement struct. Remove from the header:

typedef struct _CTGradientElement {
    float shade;
    struct _CTGradientElement *nextElement;
} CTGradientElement;

Instead of the struct, we’ll use a single shade instance variable. We don’t need the +gradientWithBeginningShade:endingShade: anymore, nor do we need -addElement:. So our interface now looks like this:

@interface CTGradient : NSObject {
    float shade;
    CGFunctionRef gradientFunction;
}
- (void)fillRect:(NSRect)rect;
@end

From the implementation, we can remove the free calls in dealloc as well as the whole of +gradientWithBeginningShade:endingShade: and addElement:. We can set the shade in the init method (and replace &elementList with &shade), and change the linearEvaluation function to:

void linearEvaluation (void *info, const float *in, float *out) {
    out[0] = *(float*)info + (*in)*0.1;
}

The 0.1 is what determines how much brighter the top of the gradient is (it’s the m value of our straight line) compared to the bottom.

But since the (*in)*0.1 will go from 0 to 0.1 (as *in goes from 0 to 1), we can actually change the domain we declare for CGFunctionCreate to {0, 0.1} and have our function as:

void linearEvaluation (void *info, const float *in, float *out) {
    out[0] = *(float*)info + *in;
}

You can now add accessors for shade if you need to change the shade of the gradient or you could even have an initWithShade: method. In fact, here’s an Xcode project with the gradient.

Lean Gradient Xcode Project

We now have our gradient code down from 1300 lines to just over 30 lines.

We’ve almost reached a similar level of optimization to Trimmit’s gradient. There will be further optimizations you can make, but it depends on what you’re using the gradient for. For example, if the gradient you’re drawing is always the same, you can optimize further by removing the shade instance variable and all references to it, and hardcode the value into the linearEvaluation function.

Getting to the end of this article, you’re probably thinking that it would be a bit of a waste to use CTGradient if by the time you optimize it for your application, it doesn’t resemble the original at all. And you’re quite right. The documentation already shows you how to draw gradients, yet the number of applications using CTGradient - the whole 1300 lines of it - is astonishing.

Please: When you use other people’s code, don’t put it in without a thought. Go through it, understand it, and optimize it for your specific need. For the better performance and reduced RAM usage, computers will thank you.

El problemo

Write some code that prints 543210012345.

You code must meet the following conditions:

• You must use single a loop (eg. for or while) and each iteration of your loop may only print one character digit.
• No if statements, no ternary operators.
• No strings, no arrays. Numbers only.
• You may only use at most one variable.
• You may use language-specific functions / methods (but it’s not necessary).

As always, use any programming language you like and post up your answers in the comments. Once there have been several attempts, I’ll post up my suggested answers. It’ll be interesting to see the different ways people do this, and the various optimization techniques that are utilized.

Good luck!

Note: When leaving a comment, indent your code blocks by four space or one tab so the formatting is saved and you don’t have to escape characters. For inline code, wrap it in backticks, eg. `This is some code`

The new iFone¹ mobile needs to be able to find and connect to the nearest phone tower. Each phone is fed a list of Cartesian coordinates of the towers within range, and a coordinate of the phone’s current position.

The coordinates and IDs of the phone towers are passed to the phone as soon as they are within range.

Write a function that takes parameters of the ID, x and y coordinates of a phone tower and if it’s closer than the current connected tower, calls the connectToTower() function passing the ID of the tower.

The phone’s coordinates are two global variables, phoneX and phoneY, while the currently connected tower has coordinates stored in cTowerX and cTowerY.

A little pseudo-code to help you along the way:

function checkTower(towerID, towerX, towerY){
    // phoneX, phoneY, cTowerX and cTowerY are available...
    find distance to currently connected tower
    find distance to passed tower
    if( passed tower is closer than currently connected tower ){
        connectToTower( towerID );
    }
}

This should be fairly straightforward. As usual, post up the answers in the comments using any programming language you like. Good luck!

Write a function that returns the height of a bouncing ball above ground in metres after specified time (in seconds) if the ball is taking five seconds to complete each bounce (up and back down) and reaches a maximum height of 3 metres at the peak of each bounce. The initial position of the ball (after 0 seconds) is at ground level (0 metres).

Your function should take as a parameter the time elapsed in seconds (t) and return a numerical value of the height of the ball after that many seconds. Any approximations should be to at least four decimal places.

Bonus points earned if your function uses only one line of code.

Hint: Think periodic / cyclic function and half your work is done. Duoble Hint: You could use Grapher.app to check your answer…

Part B

Expand your function from Part A so that every time the ball hits the ground, the boink() function is called. (Assume boink() is already defined)

Easy? I’m sure many people wouldn’t bother reading past the first sentence, but it just shows how important it is as a programmer to be familiar with math and physics, and to be able to apply your skills. Those application tasks that you hated at school were good for you.

While a lot of this could be done through using or examining readily available source code or libraries, it’s beneficial to be familiar with the basic concepts. Quoting howstuffworks, “it’s good to know”.

Continue to challenge #2

• PHP includes a function called parse_str() that takes a string and parses it as if it were the query section of the URI.
• The fopen / fwrite functions can be used on almost any ASCII files - even PHP files.
• Including a PHP file with a simple include() is much faster than using fopen to connect to and read the contents of a text file.

(Very basic) pseudo-code

Here’s essentially what our code needs to do in (partial) pseudo-code. Database.php is the file that’ll store our data, but we’ll come to that later. If you don’t understand this section, just skip it; it’s only meant to be a brief explanation of how the code needs to be structured. index.php

if ( $_REQUEST['data-type'] is set) {
        include 'database.php'
        get_settings_from_database.php()
        echo relevant_settings
        exit;
}

admin.php

        start_session()
        if( user not logged in || logging out ){
                show_login_form()
        } else {
                show_administration()
        }

The real deal

index.php

In index.php, we only need code to echo the relevant settings. In this example, I’ve outputted the results as javascript to be included in script tags.

<?php

if( isset($_REQUEST['app']) ){
    include_once 'database.php';
    parse_str($theData, $sets);

    $appInfo = $sets[$_REQUEST['app']];

header("content-type: application/x-javascript");
echo "latest = new Array('";
echo implode ( '', '', $appInfo );
echo "');";
}
exit;
?>

admin.php The admin.php file takes care of the database editing. Note that this example only has one table. You could easily add more if you needed to.

<?php
session_start();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<title><?php echo $title; ?></title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="style.css" />

</head>
<body>
<?php

// your 'oh so secure' password...
@define('MY_PASSWORD','');

// fields you're going to have in your 'table'.
$fields = array('Build No','Version','Download','Info URL');

// the following could be written better, but there's really no need for this basic example.

if( isset($_SESSION['loggedIn']) && $_SESSION['loggedIn']== 'LOGGEDIN' ){
    if( isset($_POST['logout']) ){
        $_SESSION['loggedIn'] = 0;
        logInForm();
    } else {
        backEnd();
    }
} else {
    if( isset($_POST['login']) && $_POST['pwd'] == (MY_PASSWORD) ){
        $_SESSION['loggedIn'] = 'LOGGEDIN';
        backEnd();
    } else {
        logInForm();
    }
}

function logInForm(){
        echo "
<form action='' method='post'>
<input type='password' name='pwd' />
<input type='submit' name='login' value='Log in' />
</form>
";
}

function backEnd(){
    if( isset($_POST['edited']) ){
        set_options();
    }
    backEnd_form();
}

function backEnd_form(){
    $output='';
    $output .= "
<form action='' method='post'>
<input type='submit' name='logout' value='Log out' />
</form>
";
    $settings = $GLOBALS['fields'];

    include_once 'database.php';
    parse_str($theData, $sets);

//  print_r ($sets);
    $output .= "<form action='' method='post'><table><tbody>";

    foreach( $sets as $key => $value ){
        if( is_array($value) ){
            $output .= "<tr>
<th>{$key}</th>
<th><input type='checkbox' name='del_{$key}' id='{$key}' />
<label for='{$key}'>delete</label></th>
</tr>n";
            foreach( $value as $keyd => $data ){
                $output .= "<tr>
<td>{$settings[$keyd]}</td>
<td><input type='text' name='a[{$key}][]' value='{$data}' /></td>
</tr>n";
            }
        }
    }

    $output .= "<tr>
<th colspan='2'>Add new:</th>
</tr>
<tr>
<td>Add new:</td>
<td><input type='text' name='add' value='' /></td></tr>n";
    $output .= "<tr><td colspan='2'>
<input type='submit' value='Edit Updates' name='edited' /></td>
</tr>";
    $output .= "</tbody></table></form>";

    echo $output;
}

function set_options(){
    $result = '<?php
    $theData="';
    $num_fields = count($GLOBALS['fields']);

    if( $_POST['a'] ){
        foreach ( $_POST['a'] as $keys => $keydata ){
            if( !$_POST['del_'.$keys] ){
                foreach ( $keydata as $value ){
                    $result .= $keys."[]=".urlencode($value)."&";
                }
            }
        }
    }
    if( isset($_POST['add']) && ''!=$_POST['add'] ){
        for ( $k=0; $k<$num_fields; $k++ ) {
            $result .= $_POST['add']."[]=&";
        }
    }
    $result .= '";
    ?>';
    $myFile = "database.php";
    $fh = fopen($myFile, 'w') or die("error");
    fwrite($fh, $result);
    fclose($fh);
}
?>
</body>
</html>

database.php

<?php

?>

Adding info

Navigate to admin.php, and login with your password. Type in a name in the “add new” section and submit the form. You’ll be presented with an editable list of keys / values that you can configure.

This procedure is really not recommended for commercial products, but for simple personal applications, this is the perfect way to store data. I use a slightly modified version of this method for the update-checking functionality of my Gregarious plugin for WordPress.

Variations on a theme

Instead of using a php file for a database, you could also use a .ini file. PHP has a built-in function called parse_ini_file which gets the contents of the ini file as an array.

The lesson to be learnt here is that if you’re after something that’s not already available - innovate. Plan it, think it, write it.

Now, I know the code above could be written a lot better. I also know that I made claims of this technique being superfast without performing any quantitative tests. So, let me know how this could be improved or any other tips and tricks you know to get the most out of your code.

Ermm…

Just to clarify, the idea presented here is extremely useful - I use it all the time for small scale personal projects. However, please don’t copy and paste the code straight into your public web app as (at the very least) it needs filtering for php injection. Joachim points out that serialize / unserialize is a safer and more robust option for use in this circumstance, and I have used that in the past.

So if it’s years since you last used SQL or a database is just overkill, now you have an alternative!

But the web designer is not doomed to be eternally editing CSS. The HTML needs to be written as much as the styles, and it’s really very obtrusive and awkward to have to search through your CSS to see what a particular class or ID looks like. Which where style guides come into play.

A style guide is critical for any designer undertaking a project of a decent size. Not only does it help you remember your classes if you’re working on multiple projects or if it’s been a while, it’s also a great way to get instantaneous updates, and easy cross-browser rendering to see what your styles look like in different browsers. A style guide will also benefit any other person working on the same website who may not be familiar with the styles you have created.

The benefits of having a style guide are numerous, and fairly obvious (Refer to this article), but often the time and effort taken to write up a style guide can be a deterrent. Not any more.

stylesay

stylesay is, to my knowledge, the first ever style guide generator, and it couldn’t be easier to use. It’s been written with a single, clear goal in mind - to provide designers with a resource from which CSS style guides can be created quickly, and with minimal effort.

Currently, stylesay is still being developed, but the feature-set is now near enough to completion that it does its job. There is no syntax to learn; stylesay recognizes CSS elements, classes and IDs, so you can copy and paste portions straight from your stylesheet. For the moment, the default text includes some basic documentation in the comments, but that will eventually be moved when the project goes final.

Would you find stylesay to be useful? Or are there any features that you would like to request?

function writeNumber(number){
    print( number );
    print( " and " );
    writeNumber(number + 1);
}
writeNumber(1);

If your first language is a programming languauge rather than, say, English, you would realise immediately that the preceding code will, in theory, execute for eternity - kind of like counting to infinite. The output would be 1 and 2 and 3 and 4 … and it would keep increasing forever: 75374524 and 75374525 and 75374526 and 75374527 and …. It’s not as bad as:

for( i = 0; i >= 0; i++ ){
    print( i );
}

but in both cases the script would either time out or have to be terminated. Another common mistake while we’re on the topic of inifinite loops is the forever while.

i = 1;
while ( i < 10 ){
    echo i;
}

Again, the output is not pretty. (As I said, it may be hard for beginners to spot the mistake in this one. The problem here is that i is always less than ten as we’re not changing it, so the loop continues forever as i is always 1. Adding a simple i++; line before closing the loop will solve the problem.)

There are a lot of ugly connotations related with topics such as this, especially if you’ve encountered (or written) some of the above code. So if you panicked when I said a function that called itself could be useful, I completely understand your apprehension.

But have no fear; I am not completely crazy (yet) and taking over the world through blatant misinformation is still a long way down on my todo list. So, cast aside your doubt for the time being, and allow me to demonstrate to you how this sort of recursive programming that I’m talking about can make a serious impact in your code.

The most beautiful way of using this technique (yes, inspiring code is beautiful) is to run through files and folders, arrays or collections of any sort that contain children collections (such as XML markup).

Here’s an example in PHP:

function loop($array, $parent=''){

    foreach( $array as $option => $value ){
        if( $parent != '' ){
            $option = $parent . '[' . $option . ']';
        }
        if( is_array($value) ){
            loop($value, $option);
        } else {
            ?>
        <div><?php echo $option; ?> = <?php echo $value; ?></div>
            <?php
        }
    }

}

loop ( $names );

Ingenius, isn’t it?

If the above code is not clear to you, let’s take a look at some example usage. I’ll be working in PHP, but the language doesn’t really matter; the principle is the important thing.

Let’s say I have an array, with usernames in it, like so:

var $names = array ();

$names[0] = "Bobster";
$names[1] = "Billy";
$names[2] = "Matty";
$names[3] = "Joey";
$names[4] = "Jacko";

To output these values just requires an easy peasy:

foreach ( $names as $name ){
    echo $name;
}

So why in the world did you just write that loop() function, I hear you exclaim. In this case, it’s summarised in one word: extensibility.

We’ve decided that the usernames aren’t enough. We need to store the the first and last names in the array as well.

var $names = array ();

$names[0] = array (
    'username' => "Bobster",
    'firstname' => 'Bob',
    'lastname' => 'Johnson');
$names[1] = array (
    'username' => "Billy",
    'firstname' => 'William',
    'lastname' => 'Gates');
$names[2] = array (
    'username' => "Matty",
    'firstname' => 'Matthew',
    'lastname' => 'Jefferson');
$names[3] = array (
    'username' => "Joey",
    'firstname' => 'Joseph',
    'lastname' => 'Carlton');
$names[4] = array (
    'username' => "Jacko",
    'firstname' => 'Jack',
    'lastname' => 'Richardson');

Our array is now multi-dimensional. So, to get Bob’s username, we’d call $names[0]['username'];. Now, outputting all the values isn’t so easy:

foreach ( $names as $userarray ){
    foreach ( $userarray as $field => $key ){
        echo $field . ' = ' . $key . '';
    }
}

Do you see where I’m heading? What happens when instead of having firstname and lastname keys, we make is another array containing the first and last names like $names[0]['name']['first']? The array is now three-dimensional and we start to run into some problems in outputting our values:

foreach ( $names as $userarray ){
    foreach ( $userarray as $field => $key ){
        if( is_array($field) ){
            foreach ($field as $sub_key => $value ){
                echo $key . ' ' . $sub_key . ' = ' . $value;
            }
        } else {
            echo $field . ' = ' . $key . '';
        }
    }
}

Boy! Did that double in size or what! Becoming clearer now? If we decide to make another field that has another array in it, so we get four dimensions, the code will again need to be changed. But, what if we have an array where we don’t know how many dimensions it has? This is exactly the situation developers are faced with when trying to traverse files and folders. We don’t know how many levels of nested folders exists inside a particular loction. Trying to write a single function that traverses a filesystem is like trying to write a single function to crawl the internet. And guess what? I already showed you how its done.

Rather than nesting an arbitary number of foreach statements, we finally get back to our loop function.

function loop($array, $parent=''){

    foreach( $array as $option => $value ){
        if( $parent != '' ){
            $option = $parent . '[' . $option . ']';
        }
        if( is_array($value) ){
            loop($value, $option);
        } else {
            ?>
    <div><?php echo $option; ?> = <?php echo $value; ?></div>
            <?php
        }
    }

}

loop ( $names );

In the loop function, we go through the array, and if the array contains another array, we run loop on it. The beauty of this function is that we pass the key as well as the child array, so we don’t lose the level that we’re on. An entry located at $names[0]['admins'][2]['superadmins']['users'] = 'Bob' would be correctly displayed by the loop function as names[0][admins][2][superadmins][users] = Bob The quotes aren’t printed by this example, but you easily add them in.

Similarly, archiving files could use a function that looks at the contents of the current folder, archives any files, then runs itself on any subfolders.

Find this code inspiring? Or do you know of any other techniques that save time and effort?

What is logical programming? Programming in the most efficient manner, and providing the best user experience to the user where everything “just works”.

Logic: reasoning conducted or assessed according to strict principles of validity or the systematic use of symbolic and mathematical techniques to determine the forms of valid deductive argument.

What distinguishes a good programmer from a great one? Plenty of comments? Clean and readable code? Geekiness? These are all fine, but (as you can probably tell from the title) one of the most important things a programmer must know is logic, an integral part of math.

You can call it logic or lateral thinking or even insanity, but the fact remains, that to be able to write code - good code - you must be able to use conditionals, loops and increments; all of which make up a part of mathematics. Since logic is a portion of mathematics, I’ll be referring to logic, thinking, and calculating under the umbrella term of just ‘math’.

Without math, programming wouldn’t exist. Every time you write an if else statement, a for loop, or a while loop; that’s math. Every time you manipulate variables, or process data; that’s math. Most programmers don’t realize the importance of mathematics, and will probably dislike the very subject that earns them a living, however we use it without realizing all the time.

Conditionals

So we know that we use math a lot, and that it’s important, but how? Well, let me show you. For my Core Graphics demonstration app I had a window that would animate using a cube transition once a tab view item was changed. Simple enough, but I wanted the window to behave like a real cube. A cube has six faces, so the window had to show the distinct top, base and four other sides. I wanted the first face to move up, then across until four faces had been shown, then finally up once more to show the base of the cube. Let’s have a look at the code:

int option; // for direction

if(toTab > fromTab){ // moving forward
    if(toTab == lastTab || fromTab == 0){ //to last tab or from first tab
        option = CGSUp;
    } else {
        option = CGSLeft;
    }
} else if(toTab < fromTab){ // moving backwards
    if(toTab == 0 || fromTab == lastTab){ // to first tab or from last tab
        option = CGSDown;
    } else {
        option = CGSRight;
    }
}
[self _turnWithTransition:transitionStyle option:option duration:TRANSITION_DURATION];

Structure

<

p>Notice how I’ve grouped the logic into two sections; one part deals with moving forward through the tab view items and the other is for moving back. If we really wanted to, we could fit most of the above code in one line:

<

p>

option = (toTab > fromTab) ? (toTab == lastTab || fromTab == 0) ? CGSUp : CGSLeft : (toTab == 0 || fromTab == lastTab) ? CGSDown : CGSRight;

It’s exactly the same but uses less less code. Why don’t we use this instead of the longer method? You take a look at both and tell me which one is easier to understand ;). More thinking if someone tries to figure out what’s going on equals more hassle. I wont expand further on the code, but do look at how I’ve written it. Can you think why this technique might be better than using a select case routine or by running through if (toTab==1)... else if(toTab==2)... etc?

Error Prevention

The above example is also a demonstration of basic error checking. Okay, not really error checking, but more error preventing. Rather than write code for six tab view items, I’ve added integers to hold values for the indices (plural of index) of destination, origin, first and last tabs. So now if I only have two tab view items, and I run the code, it doesn’t throw a nasty error. In fact, if you open up the demo app and change the number of tab view items, it wont ever be thrown out of whack.

Archiver

Part of error checking (yes, we do real error checking this time) is the order in which you assert your data. One of the places I worked at required an application to scan through the network and archive files which were older than a specified date. It was (surprise, surprise) for Windows to be written in Visual Studio. In short, the user was to be given the option to punch in the number of days that a file’s creation date had to be be over for it to be archived, as well as the directories in which to scan and location to archive any files. (Of course, there were a lot more features than this, such as generating tables of file types, files sizes, keeping logs, etc.) Oh, and when I say “archive”, I mean “move the file to the archive location, replacing it with a text file of the same name explaining that the file is gone.”

Since I am now an Apple convert, let’s translate this into the Mac equivalent. Here is mockup of this (not a real app):

In the Apple context, let’s say the user chooses Macintosh HD and tells the application to to archive files more than a day old. Houston, we have a problem. Files more than a day old would probably include the majority of the files, including system files, any documents, folders, or applications. Essentially you would be wiping out your hard drive, replacing everything you have with a nice little text file explaining that the file has been archived on this date to this location. So, we need to show an error; possibly in a sheet (or a modal dialog which, using Apple lingo, I belileve could be deemed a “panel”). The way you show the error is not that important. What you show is of more value. Let’s take a look.

The errors or problems with the settings on the Archiver could include:

1. That the user has chosen the entire Macintosh HD to delete archive.
2. Files more than one day old is going to include almost everything that exists.
3. The user has unchecked the “simulation only” option, which means the program will actually delete everything more than a day old, rather than just report how much space could be saved.

So, what do we tell the user? “Are you sure you wish to run Archiver on Macintosh HD?”, “Are you sure you don’t want to run a simulation?”, or “You’ve opted to remove everything more than 1 day old. Are you sure you want to do this?”. Or perhaps we should present them with a list with everything that’s wrong or dangerous. As with most scenarios such as this, there is no right or wrong answer. However, there are some options which work better than others.

We really don’t want to simply say “Are you sure you wish to run Archiver on Macintosh HD?”. Imagine you’re an average user who doesn’t know the ins and outs of the Mac, and doesn’t realize there is actually a whole heap of stuff buried in /Library/ that keeps your computer operational, and doesn’t think that his photos, music and work will be deleted. Would you have a problem with that dialog? Why should you worry, right? A dialog such as this could also be taken as the “annoying confirmation of everything” that Windows gets a lot of and Apple is starting to see more of. Either way, it’s bad news for the user when he realises that all his “stuff” is now no longer on his computer. Okay, it’s archived, but do you really think that restoring everything would be a matter of dragging everything back in? Even if system files are protected, the hard drive will still need to be cleaned out (Archiver leaves a text file in place of everything, remember? That’s a lot of text files if you run it on your whole HD). Nope, simply asking “are you sure you want to do this” doesn’t cut it in most circumstances.

Hang on a second. What if the user just wants to see how many old files he’s got on his computer. Should we be asking “Are you sure you don’t want to run a simulation?” Again, various issues persist. This statement is very ambiguous. Of course, you could run a simulation to see how much space you could save by removing old files, but if you want to actually archive them, you don’t want to run a simulation. You just want the program to do it’s job. So if we ask “do you just want to run a simulation?”, it’s not likely that the user will realize why we’re asking them that question. This will probably result in running the archiver process and losing data from your drive.

Ressurection of the Apple Human Interface Guidelines

The Apple Human Interface Guidelines (HIG for short) have come under a lot of attack recently with many people declaring it’s time is up. I don’t want to take sides, but many of the concepts in the HIG are vital to present a clear and easy to learn experience for users. Other ideas present in the document, of course, are debatable.

So what should we say? Well, Apple clearly spell out how to show alert sheets in the HIG, which defines how an application should interact with a user. It’s mostly common sense, but is one of the many reasons Mac software is easy to use. In Chapter 17 Section 6, alert dialogs are defined by Apple as “dialogs that appear when the system or an application needs to communicate information to the user. Alerts provide messages about error conditions or warn users about potentially hazardous situations or actions.” Exactly what we want.

Note the message text asks the user if they’re certain they want to proceed, but then we have the informative text which tells them exactly why continuing with the present course of action could be a bad idea. Obviously there needs to be a way for the user to cancel if they realize that’s not what they want (the cancel button) and a way for them to continue on if they’re sure they know what they’re doing (the action button).

In our instance, we certainly don’t even want to provide the option of archiving everything more than a day old from the entire HD, so we can add simply check if(archiveFrom == MacHD && daysOld <= 30) and if true, cancel the command while telling the user something along the lines of “You cannot choose to archive files more than a day old on your system hard drive.” and informing them that “Macintosh HD contains files necessary for your computer to function which should not be archived.” We want to only cancel if both conditions are true - if they’re archiving files from the entire HD that are less than a specified number of days (it should really be more than 30, but that’s just an example). So the code only cancels if both conditions are true since it could still be a command legitimate to archive everything a day old from a folder where you want to get rid of your previous work (of course, it might be an idea to have an alert anyway but allowing the user to continue on if they understand the risk).

In the case that the “archive from” location is not the entire HD or any important folder such as “System” or “Library”, and the number of days is less than say 30, we still need to confirm this as files more than 30 days old could be a lot. We could do if(daysOld <= 30) [self doAlert]; to achieve this. However, the key in all this is to check everything in order. If you get the order right, it reduces the amount of code that needs to be written drastically.

Order it out

-(BOOL)archive
{
if(archiveFrom == MacHD || archiveFrom == Library || archiveFrom == System)
     return [self doError:
          @"You can't archive from a folder that your computer
           needs in order to operate correctly."];

if(daysOld <= 30)
     return [self doAlert:
          @"Archiving files older than your specified date could result in a large
           volume of archived files."];

if(![chkSimulation selected])
     return [self doAlert:
          @"There is no turning back. Are you sure your settings are correct?"];

[self runArchive];
}

See how we avoid the use of multiple else if’s and case this:, case that: by checking each field in order. If the user is archiving from System or Library, we throw an error. It would be annoying to get them to fix an error in the number of days and then tell them they had the first step wrong the whole time. It’s important to fix things in the logical order that the user sees and use your conditionals such that each one has an effect on the proceeding code. In our case, if the first step is wrong, we throw an error, and exit the method. This is important. The second and third segments of code never get called if the first conditional returns true. Can you image the user clicking out of a dialog, only to be faced with another? We don’t want to emulate Windows ;). Likewise, progress is halted at the second and third conditionals if they return true.

Really, now

This example is really the most basic that I could have given. Essentially, the motto of this article is “write good code well”, which means you must not only write well-commented and easy to follow code, but you must write it well. You need to use conditionals in smart ways, to follow your program’s flow and always ask yourself: “How can I improve this?”

Remember: Programming is not something learnt through a degree or accreditation; there are always things to learn or concepts to apply.

Best wishes,

Ankur

All the PPC / Intel specific bugs have been found, caught, and eradicated. The framework should now be ready for developer consumption for use in commercial apps, or for experimentation and utter bewilderment. Be amazed. Be very amazed, and download the framework straight from here or read and download it from the original post.

Now works on all architectures, and without hiccups!

Can’t get enough of window transitions? Love a little eye candy? Well, you’re in luck. The Core Graphics Framework and Xcode Project Template make adding the fantastic Core Graphics function to your app a breeze. In fact, it’s even more complete than the tutorial, and already has more features in it before you write a single line of code! It doesn’t stop there, however. This framework powerful enough to use the genie effect. That’s right. That awesome Mac OS X transform you can get when you minimize an application. Core Graphics contains a wealth of resources. You really have to check it out.

Point. Click. Zoom!

The CGS Framework is a an implementation of transitions, transforms and everything Core Graphics. It includes the definitions and implementations for the methods, so that using a transition or transform is as simple as calling a single method! For example, scaling a window is as simple as a “- scale: about:” call on the window, and rotating it just requires a single “- rotate: about:”. In the same way, Core Graphics is laid bare with this framework, for you to utilize at your pleasure!

Don't lift a finger

The framework does all the work for you, but even then, it gets simpler. Source for a sample app is included which means that you can create Core Graphics projects straight away by building on top of it. This saves you, the developer time in adding and linking the Framework, and reading and implementing the Core Graphics class in Interface Builder, as well as adding the framework to your project. A single double-click on the sample project and it’s all done for you. What more could you ask? Download a copy and check it out today. You’ll be surprised how powerful it is.

Gimme already!

Now a universal binary for your developing pleasure!

CGS Framework + Sample App

Once downloaded, open CoreGFX.app to view some of the possible effects. You can copy the source folder to hard drive if you need to build a Core Graphics enabled app. Enjoy the wonderfulness, and I hope you have fun!

Any queries, fire away.

Make sure you understand that some of the functions of Core Graphics used in this framework are undocumented, internal APIs that Apple haven’t released. (Calm down. It’s not illegal). Having said that, apps like Quicksilver would be quite bland without the use of the undocumented Core Graphics functions, so exercise your discretion.

This project relies heavily on work by Wade Tregaskis and his Rotating Windows.

© 2006 Ankur Kothari.