Speed Cache basically takes external files such as javascript and CSS and mirrors them on your own server. I’m not going to go into detail about why you’d want to do this - you either do or you don’t. If you do, then feel free to use the plugin.

Here it is.

Support questions in the comments for now, but I’m not providing any guarantees. This post may be replaced by a proper info page about the plugin sometime in the future, but at the moment that’s unlikely.

Here’s an example of what’s possible with the script:

Not only does it let you style the checkboxes, you can also add your own custom JavaScript hooks, events, effects and a whole lot more.

Find out more and please let me know of any bugs or possible ideas, or jump straight to the demo.

Java, Python and Ruby can access Cocoa APIs and Objective-C classes. What about the super-extensible yet severely under-appreciated Javascript? With the WebKit framework, you can access Objective-C from any script present in a HTML document.

A `WebScriptObject` is an Objective-C wrapper passed to your application from the scripting environment. You can’t create an instance directly, but you need to get a `WebScriptObject` by sending `webScriptObject` to a WebView.

Paraphrase of WebScriptObject Overview

This class, WebScriptObject, lets you “talk” and “listen” to Javascript (or any other code allowable inside HTML <script> tags). That is, you can run Javascript code or functions in the WebView, but you can also let the Javascript run Objective-C methods.

This is the same way Dashboard widgets interact with Cocoa plugins. You know how you access window.widget in your Javascript? That’s an Objective-C class you’re referencing. The WebKit framework provides all the necessary classes and functionality for this interaction, making this seemingly difficult task ridiculously easy.

Exposing an Objective-C class to the scripting environment

Exposing a class to the scripting environment is very easy. You can use key-value coding methods (for example, setValue:forKey: and valueForKey:) to get and set the properties of a WebScriptObject. These will be accessible as children of the window object in Javascript. Use the removeWebScriptKey: method to remove a scripting object property.

As an example, let’s say we have a class NSFoo. We’ve linked to the WebKit framework and webView is a WebView.

We use the delegate method webView:windowScriptObjectAvailable: to ensure that the WebScriptObject is available before we start using it. Then we expose an instance of NSFoo to the scripting environment:

- (void)webView:(WebView *)sender windowScriptObjectAvailable: (WebScriptObject *)windowScriptObject {
    NSFoo *myFoo = [[NSFoo alloc] init];

    scriptObject = windowScriptObject;
    [scriptObject setValue:myFoo forKey:@"foo"];
}

Now you can access foo through javascript;

<script language='text/javascript'>
var myFoo = foo;
</script>

Allow Javascript access

For obvious security reasons, no methods or KVC keys are exposed to the Javascript environment by default. This means at this stage while window.foo exists, you can’t do much with it. To allow Javascript to send messages or get / set properties, the following two class methods need to be utilized:

+ (BOOL)isSelectorExcludedFromWebScript:(SEL)aSelector;
+ (BOOL)isKeyExcludedFromWebScript:(const char *)name;

So for example, if we want to allow Javascript to send a bar: message to a class, all we have to do is add the following class method to the implementation:

+ (BOOL)isSelectorExcludedFromWebScript:(SEL)selector {
    if ( selector == @selector(bar:) ) {
        return NO;
    }
    return YES;
}

Now running foo.bar_(0) in Javascript will be equivalent to running [myFoo bar:0] in Objective-C. Why the underscore? Selectors accessed from Javascript are renamed using the following rules:

• Any colon (":") in the Objective-C selector is replaced by an underscore ("_").
• Any underscore in the Objective-C selector is prefixed with a dollar sign ("$").
• Any dollar sign in the Objective-C selector is prefixed with another dollar sign.

So a method called doAction:(id)action withThing:(id)thing will be turned into doAction_withThing_(action,thing), while do$This: will become do$$This_. This is often pretty ugly and inconvenient. Fortunately, the Javascript name for the selectors can be changed.

Change Javascript selector names

Using + (NSString *)webScriptNameForSelector:(SEL)sel, we can change the name of the selector in Javascript:

+ (NSString *)webScriptNameForSelector:(SEL)sel
{
    if (sel == @selector(bar:))
        return @"bar";
    return nil;
}

Now we can run foo.bar(0) in Javascript to equal [myFoo bar:0]. Here are a few more examples:

+ (NSString *)webScriptNameForSelector:(SEL)sel
{
    if (sel == @selector(performTransition))
        return @"performTransition";    // widget.performTransition()
    else if (sel == @selector(prepareForTransition:))
        return @"prepareForTransition"; // widget.prepareForTransition(arg)
    else if (sel == @selector(setPreference:forKey:))
        return @"setPreferenceForKey";  // widget.setPreferenceForKey(pref,key)
    else if (sel == @selector(preferenceForKey:))
        return @"preferenceForKey";     // widget.preferenceForKey(key)
    return nil;
}

If you want to expose all the instance methods of the class to the scripting environment, just return NO without doing any checks:

+ (BOOL)isSelectorExcludedFromWebScript:(SEL)selector { return NO; }

Remember: selectors are converted into Javascript functions, so even if the method doesn’t need any arguments, you still need to add the parenthesis at the end for the Javascript; eg. [object doMethod] becomes object.doMethod().

Key-Value-Coding from Javascript

Exposing KVC keys is a similar procedure. Here we’re giving access to the “name” property:

+ (BOOL)isKeyExcludedFromWebScript:(const char *)property {
    if (strcmp(property, "name") == 0) {
        return NO;
    }
    return YES;
}

Now in Javascript, we can read and write foo.name. Reading foo.name will be equivalent to [myFoo name] and writing to it (foo.name = "A big foo") will be the same as running [myFoo setName:@"A big foo"].

As before, just return NO without any checks to allow all KVC keys to be accessed from the scripting environment.

Summary

• Load WebKit.framework which contains the classes WebView and WebScriptObject.
• Send setValue:forKey: to a WebScriptObject; makes an object available to the scripting environment.
• Implement +isSelectorExcludedFromWebScript: and +isKeyExcludedFromWebScript: and return NO to allow the scripting environment to run a method or access a key.
• Use webScriptNameForSelector: / webScriptNameForKey: to specify the names of your methods / keys as seen by Javascript.

Further reading

• WebKit Documentation
• WebScripting Documentation
• Obj-C From JavaScript
• TurtleScript

1. Native Controls

A feature unique to the later versions of WebKit is the ability to style form controls. For a long time, the form inputs were kept as the operating system’s native controls, but now they are specifically styled that way. This means, we can easily over-ride that styling, or make elements appear like native controls.

Take a look at these text inputs:

If you’re running a WebKit-based browser like Safari, you’ll see the first text input as a normal OS X-style control, but the second one is a rounded control (like the search input minus the cancel widget).

Now look at these anchors:

Both are <a> tags, but the second one appears as a push-button in Safari.

That’s not all. Here are two button inputs:

Notice how the second button is a square button?

Have I caught your interest? Here’s how you do it.

Mimic native widgets / controls

Elements are styled to look like native controls for WebKit-based browsers using the -webkit-appearance CSS property. Some of the values this can take are (in two columns if you’re on WebKit):

Setting -webkit-appearance simply makes the element appear as if it were the control. This could be of enormous use within WebViews inside Cocoa applications or with web apps for the iPhone.

If don’t have access to a WebKit-based browser, here’s a screenshot of what some of the “controls” look like:

The important thing to note is that although the controls can be made to look like other controls using -webkit-appearance, their function is not affected. That is, textboxes will still accept text when they’re made to appear like push-button and so on.

2. Element Drag

Apparently dragging doesn’t work with the iPhone, as it’s used for scrolling. That’s to be expected, I guess.

Generally there is a lot of javascript involved in making an element draggable. Now you can achieve the same thing with only one line of CSS. Javascript will still be required to have drop targets, etc. but this allows the user to drag the entire element rather than just text or an image.

Try dragging this element (from the side):

Notice how the whole element is dragged? It’s just a regular div (made to act as a push-button) with the CSS rule -webkit-user-drag:element applied to it. Easy!

3. Edit the webpage

Doesn’t work on the iPhone. You can click in the element, but the keyboard doesn’t show up. This is likely to work when there are copy-paste functions in the phone.

This is a paragraph that you can edit if you’re running a WebKit-based browser like Safari or the iPhone. Just click here and edit the text like a normal textbox.

To allow users to edit elements of the page (or all of it) in real time, there exists a property -webkit-user-modify. Obviously this defaults to read-only, but you can set it to the following:

• read-only
• read-write
• read-write-plaintext-only

read-write allows the user to copy and paste in rich text with formatting, while read-write-plaintext-only pastes in only the text. This could be useful with debugging or as part of a WYSIWYG editor, etc. Just be careful with the security side of things.

4. Selection (Highlighting)

I am a paragraph that you can’t select (if you’re running Safari). Try and highlight me and realize that your attempts are futile. Bwah, ha ha…

To disallow selection (highlighting) of text for a particular element, set the CSS rule -webkit-user-select:ignore. This may be useful for many web apps, but use it sparingly to avoid irritating the user.

I am a paragraph that you can select. If your browser supports the `::selection` selector, highlighting this will result in a black background and white text for the highlighted region.

5. Rounded corners

Rounded corners: Look, no hacks!

-webkit-border-radius specifies the radius of the corners. You can specify certain corners only by using one of

• -webkit-border-top-left-radius
• -webkit-border-top-right-radius
• -webkit-border-bottom-left-radius
• -webkit-border-bottom-right-radius

For example, the following has the top-right and bottom-left corners set to a radius of 7px:

A bit of fancy corner-work

Elliptical corners are possible by specifying two values, eg. -webkit-border-radius: 3px 7px;.

6. Shadows

text-shadow

This text has a shadow when viewed with a compliant browser.

For the text-shadow CSS property, the parameters are

1. horizontal offset (negative is to the left)
2. vertical offset (negative is up)
3. blur radius (higher is more blurred)
4. shadow color

For example, using text-shadow: 1px 1px 7px #000; we get:

this excellent text with a blurred, but visible shadow.

box-shadow

This entire element has a shadow using -webkit-box-shadow:

To add a shadow to the actual element rather than just the text, use -webkit-box-shadow. Parameters are the same as for the text-shadow property.

1. the horizontal offset
2. the vertical offset
3. the blur radius
4. shadow color

The shadow automatically compensates for any rounded corners you may have added.

This element has a shadow, but also a border-radius.

text-stroke

I guess I’m really just a string of text. Oh, I’m stroked.

Use -webkit-text-stroke to set a border or stroke around the text. Specify thickness and color.

To change the fill color, use -webkit-text-fill-color; otherwise value for the color property is used.

7. Backgrounds

WebKit allows multiple background images using CSS. If you’re running Safari or other WebKit-based browser, see this great example of multiple background images with CSS.

The syntax for multiple backgrounds:

  background-image:    url("first-img"), url("second-img"),
                       url("other-img"), url("another-img");
  background-repeat:   no-repeat, no-repeat,
                       repeat-y, repeat-x;
  background-position: top left, top right,
                       left, top;

The first image is associated with the first background-repeat, and the first background-position value and so on. The order in which the images appear also determines the stacking order - earlier images are stacked higher.

Shorthand background notation also works, the example above is equivalent to:

background: url("first-img") top left no-repeat,
            url("second-img") top right no-repeat,
            url("other-img") left repeat-y,
            url("another-img") top repeat-x;

This could be really handy with making the background of a web-app, such as for the iPhone, without the need for multiple nested elements.

8. Border Image

To set fancy borders, you often need to use images. However, you can do away with all the javascript and CSS hacks and use -webkit-border-image.

Syntax:

-webkit-border-image: url("image-url") size fit fit;

“image-url” needs to be an image divided into nine parts for each corner and edge and the content. The size is the height / width of the squares that the image is divided into. Fit can be round or stretch, which are ways of fitting the image into the border. To show the border, you need to actually have a border rule, but that can be integrated into the border-image by using something like:

-webkit-border-image: url("image-url") 27 / 27px round round;

The / 27px bit specifies the width of the border and makes it show if it isn’t already.

9. Resizing

This element is actually resizable.
If you’re using a compatible browser, drag the handle at the bottom right to resize this box.
Max-width is restricted to 100%.

Making an element resizable is really easy: just set the resize property to vertical, horizontal or both.

This box can only be resized horizontally (along the x-axis)

To make scrollbars appear when the content doesn’t fit completely inside the box, it’s a good idea to set overflow:auto;.

Restrict the size that an element can be resized to by setting min-width, min-height, max-width and / or max-height.

10. Colors and Opacity

I am a-hued, a-saturated, and a-alpha-ed.

Colors can be set using rgb(red, green, blue), rgba(red, green, blue, alpha), hsl(hue, saturation, lightness) or hsla(hue, saturation, lightness, alpha).

The example above has the rule background-color: hsla(100,90%,50%,0.6);.

Set opacity as a number between 0 (completely transparent) and 1 (completely opaque). If you don’t want the opacity to be inherited by child elements, set the background color using rgba or hsla and specify the alpha value there.

Further reading:

• http://qooxdoo.org/documentation/general/webkit_css_styles
• http://www.css3.info
• http://andybudd.com/presentations/css3

See it in action here.

If anyone has any ideas for a name, that would be very helpful!

This is the best way to stay up-to-date with the Digg status of your site. More accurate and informative than subscribing to a search, with using the just-released Digg API.

Feature-requests are welcome. Enjoy!

There have been attempts at figuring out the usage of the still-unreleased Digg API. However, Digg are yet to release their official API.

The staff at Digg were very kind in letting certain people have a play with the API before its release, and it’s looking to be, to put it bluntly, quite excellent. A lot of Digg plugins and services are going to be either made obsolete, or very happy with all the new possibilities that will be… well, possible!¹

For example, Lorelle talks about keeping track of your Dugg posts by subscribing to the search results RSS. This is only possible if you search for the past 7 or 30 days, and it doesn’t give you much information about the status, comments or diggs received on your posts. With the Digg API, this’ll be figuratively (because too many people use the word ‘literally’ figuratively) a breeze.

API’s are important, because they give people the opportunity to extend and use an application or service in a way that they like. A world without API is like Xcode without Cocoa or Carbon, or like the Mac without Applescript. An API helps to let the user do what they like, and it’s fun!

So web developers, start your engines for the Digg API…

Google & Cocoa

It may be API week or something, because Google have also conjured up an open source API for Mac developers to use Google data. The Google Data APIs Objective-C Library is a framework² that enables the use of Google data API’s within Objective C.

Greg Robbins posted some examples of this API at the Google Mac blog. Currently you can work with Google Calendar, Google Base, Google Spreadsheets and access to more services is in development. It seems to be a very nice framework, and I’m looking forward to seeing third party use of this.

That seems to round off API week. Any thoughts?

• 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!

Open Terminal.app. We’re going to be using the command line. If you don’t normally go near the Terminal, don’t panic. Using svn through the command line is easier than it seems.

Check it out

Before we start developing and updating our application, we need to grab a copy of it first. We do this through the checkout command. Checkout, as the name implies, picks up a copy of your application from the repository and downloads it to a location you specify. The checkout command requires to pieces of information. The location of the subversion repository and the location of the folder you wish to download this to. You can omit the latter argument and have subversion download to the current path. For example, if you run cd ~/project/ before using checkout, the contents of the repository will be deposited in ~/project/. Let’s do an example checkout command:

svn checkout http://svn.example.org/turfapp/ ~/projects/turf/

Every subversion command you wish to run must be preceded by svn as in the above example. Running the preceding in the Terminal will download the turfapp project (doesn’t really exist). Now, we’re ready to get to work!

Once we’ve checked out a project, we can make edits and updates to our hearts content.

Ready to Commit?

When you’re happy with the changes made, you may upload your work back to the subversion server. However, if you’re working on a collaborative project, someone may have made a change after you checked out the project. If you upload your copy, it would over-write their work. For this reason, we run the update command.

cd ~/projects/turf/

svn update

This will tell you which revision you have. If everything is fine, we’re good to upload our changes. We do this by running the commit command. With the commit command, you also need to specify a message about what changes you have made.

svn commit -m "Added the Sparkle framework"

The above assumes you’re in the correct directory. The message sent to svn would in the example would be “Added the Sparkle framework”. Make your message descriptive so anyone else (or even yourself in six months time) can tell what you’ve done fairly accurately.

Once you’ve run commit, svn uploads any files that have changed and your updates are saved.

Adding files

Straight add

If you add a file to the working directory, then run commit, you’ll find that svn doesn’t find any changes to update with. Whenever you add files to your working directory that you wish to add to the project, you need to tell svn.

svn add newfile.ext

If the file to be added is in a folder, you’ll also need to specify that:

svn add sources/newfile.h

Or if the resource you’re adding is a folder, you can just specify the path:

svn add headers/extension/

Import

The import command doesn’t require you to have a checked out copy of the project, and it allows you to import a file to the server from any location on your hard drive (whereas add is usually restricted to the working directory). For the import command, you need to know the path to the resource, and the path on the server where it should reside. For a folder, you need to specify the path on the server that the folder will take, rather than the path where it should reside as svn will upload the contents of the folder rather than the folder itself. This can be confusing at first if you’re not aware of it.

The import command will commit the changes you make, so you need to provide a message as well. The overall syntax is:

svn import -m "message about update" /Path/To/Resource/ http://svn.location.on/server/trunk/

Let’s add a file to our project:

svn import -m "Adding about xcode pdf" /Developer/AboutXcode.pdf http://svn.example.corg/turfapp/trunk/resources/

Will result in the file being uploaded to the server at http://svn.example.corg/turfapp/trunk/resources/AboutXcode.pdf.

Deleting files

Now that you can import files, deleting them should be easy. The analog to import is (surprisingly) delete. You can just pass the URL of the file on the server to delete, or you can pass a path to a file in the working directory. If you pass a URL, the change is committed and a message is required. Let’s get rid of that pdf we imported:

svn delete -m "message about deletion" http://svn.example.corg/turfapp/trunk/resources/AboutXcode.pdf

If you specify a path in the working directory and don’t send a message, the change is recorded and snchronized with the server the next time you run commit. For example:

svn delete trunk/resources/AboutXcode.pdf

In which case the change is not reflected on the server until you run:

svn commit -m "summary of changes"

Summary

SVN can be used to coordinate the development of a project. A project needs to be checked out using the svn checkout into a working directory before it can be edited. Updates are saved using the svn commit command, and files can be added using svn add or svn import, while files are removed using svn delete

Some svn commands are analogous to the standard UNIX commands; you can use ls, mkdir, cp etc. to navigate and manage your repository.

That’s it!

You can find out more about subversion at http://subversion.tigris.org. Run svn help or svn help subcommand to learn more about the svn commands.

Have fun!

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?