This is a double clickable version of the classic Apache TCPMon utility. I simply packaged the program’s files into an application using the Jar Bundler utility that comes with XCode developer tools.

Take a look at the tutorial on how to use it. TCPMon is most commonly used as an intermediary – a proxy that stands between and listens to incoming and outgoing web traffic.

This is a very useful tool to monitor network transactions when accessing web services using SOAP and REST. You can monitor returned XML and JSON content without inserting trace or debugging statements in the code.

Display log messages from PHP in the browser console in Safari and Firefox (with firebug). You no longer have to use print_r statements from PHP to figure out what is going on in the code. Besides, print_r statements  mess up the DOM and HTML layout.

Features

• Log debug messages directly from themes and plugins.
• Display log messages in the browser console, without muddying up the browser display.
• Displays complex structures such as arrays and objects in pretty print.
• Shows the line number and file from where the message was logged ( you won’t lose track of log statements ).

Screenshots

Firefox console showing debug messages.

Safari console showing debug messages

Installation

1. Verify that you have PHP5, which is required for this plugin.
2. Download the whole wplogger folder into the /wp-content/plugins/ directory.
3. Activate the plugin through the Plugins menu in WordPress.

Requirements

• Make sure that your theme template has a footer ( index.php should have a get_footer() function call at the end).
• Turn on the console in your browser:
  • Firefox: The Firebug extension needs to be installed and activated.
  • Safari: Show the Error Console from the Debug/Develop menu.
    Details on how to enable the Debug menu for Safari on OSX and Windows.

Usage

After activating the plugin, the following PHP function call can log any PHP expression to the console log.

$wplogger->log( php_expression [, message_type] );

Use cases

Logging from template files

This is from inside the loop to display post IDs.

<?php $wplogger->log( 'Post ID: '.$post->ID ); ?>

Output:

[Information: from line 20 in file index.php] Post ID: 125
[Information: from line 20 in file index.php] Post ID: 116
[Information: from line 20 in file index.php] Post ID: 65

Logging from PHP files

This is from  functions.php ( always a good idea to check if $wplogger is available ). Note the message type set to warning through the second parameter.

if ($wplogger) $wplogger->log( get_option('active_plugins'), WPLOG_WARNING );

Output:

[Warning: from line 55 in file functions.<span>php</span>] array (
	  0 => 'wplogger/wplogger.php',
	  1 => '12seconds-widget/12seconds-widget.php',
	  2 => 'get-the-image/get-the-image.php',
)

Logging from plugins

This is from inside a plugin function. Note the global statement to get $wplogger into current scope.

global $wplogger; $wplogger->log( 'No images attached to this post', WPLOG_ERR );

Output:

[Error: from line 206 in file get-the-image.php] No images attached to this post

Credits

Code that forces the wplogger plugin to load first was adapted from the WordPress FirePHP plugin developed by Ivan Weiller.

This plugin is based on PEAR Log, the logging framework that is part of the PHP PEAR library. Current maintainers Jon Parise, Jan Schneider, and Chuck Hagenbuch. PEAR Log is based on code first developed for the Horde 1.3 framework – original authors Chuck Hagenbuch, and Jon Parise.

Download Plugin

Feature requests and critiques

This is the first iteration of the wplogger plugin. Please comment on how you would like to see it improved.

If you have cursed out an FTP client ( under your breath of course ) at any point in a development cycle, welcome to the club. I develop on an OSX machine and I love Cyberduck – the popular FTP client for the Mac. But wouldn’t it be nice to mount your entire remote website host directory on the desktop with a nice disk icon? Now you can drag and drop files into it without leaving the Finder. You can also edit files remotely without downloading, editing and uploading. This can be a huge improvement in workflow, and you don’t have to keep track of local and remote versions of files and the invariable versioning headaches.

Advantages

• Avoid UNIX: Most hosting plans run on some variant of UNIX/Linux. Stuff that you had to do on the server over SSH using the Terminal can now be done on the desktop. For example, WordPress plugins and themes can be downloaded, unzipped and moved to their proper locations, all from the desktop. You no longer have to execute cryptic commands from the UNIX command line.
• Develop on a thin client: You can develop on a lightweight Netbook with a super fast, but low-capacity solid-state (SSD) drive. You don’t have to worry about the limited disk space  because your workspace resides on the remote server.
• Don’t have to worry about backups: Most hosting plans have some sort of incremental backup on the server side. Your workspace will automatically get backed up on the server.

First, a caution – I’m not advocating editing a live website. Although that is certainly possible, it is not recommended practice. However, there are a myriad of little things that can be done quite efficiently if the remote filesystem was mounted on the desktop. Moving, renaming and deleting files is super easy ( these actions can be a real pain to accomplish using an FTP client). For those perfectionists who incessantly tinker with image files, just open the file, make the change and save it. The huge advantage is the seamless access and the improvement in overall workflow.

Disadvantages

• Filesystem response dependent on network speed: This is the big caveat. This method is not suitable for editing 100MB Photoshop files. However, it can be very effective for editing web pages.

System requirements

• You need to have access to a remote server like a commercial web host ( e.g. Dreamhost, Media Temple ).
• SSH ( Secure SHell ) remote login has to be available and setup on the server. You can turn on SSH access on most hosting plans through your web panel. Make sure that you test SSH access before proceeding.
• The method described here works only on Mac OSX Leopard.

Method

You need to install three applications / frameworks:

1. MacFuse
2. Macfusion
3. sshfs (to update the old version pre-installed with Macfusion)

1. Install MacFuse

MacFuse is an OSX implementation of the Filesystem in Userspace (FUSE) framework. Fuse provides an API to write a virtual file system. Virtual in the sense that a developer can write a file-system like front-end to any structured information source.  Even though the information is accessed and manipulated as files, the actual data doesn’t need to be files on a disk. For example, there is the Picasa image file system (PicasawebFS), a virtual filesystem that allows you to mount all your Picasa images like a disk on the desktop. Then theres is the RSS file system (RSSFS) that allows you to mount an RSS feed as a filesystem and access each entry as an individual file. We will use SSHFS, the Secure SHell FileSystem, that allows you to mount a remote computer directory though a secure shell (SSH) login. If you want additional technical details, watch a screencast by  Amit Sigh, the project owner of  MacFuse.

Download and install MacFuse from google code:

http://code.google.com/p/macfuse/

MacFuse comes with a nice preference pane to check for updates. The version was 2.0.3 as of this writing.

2. Install Macfusion

Macfusion is an open source SSHFS mounting application for OSX Leopard. There are a couple of apps out there that do this ( sshfs 1.0, sshfs for Mac OS X ), but Macfusion is by far the most mature.

Download and install from:

http://www.macfusionapp.org

Add an SSHFS file system

To add an SSHFS file system click on the plus icon at the bottom of the main window and choose SSHFS.

Adding an SSHFS filesystem

Set SSHFS mount parameters

Under the SSH tab:

• Host: The hostname of the server that you SSH to. This is usually the domain name of you website ( e.g. ‘yourdomain.com’ ).
• User Name: Your SSH username.
• Password: Your SSH password.
• Path: can be left blank.

Under the SSH Advanced tab:

• Port: The default SSH port is 22 unless your server uses a different one ( just try 22 ).
• Follow Symbolic Links: Leave this checked.

Under the Macfusion tab:

• Mount Point and Volume Name: Can be left blank.
• Ignore Apple Double Files: You must uncheck this if you plan to open/edit/save files on the mounted volume.  For example, if you want to edit an image file using Photoshop, this setting has to be unchecked. However, this powerful feature comes with a downside. Leaving this unchecked will  cause OSX to place .DS_Store and ._ * ( Appledouble ) files on the server.  OSX utilizes these hidden files for enhanced filesystem features and extended file attributes in non OSX native filesystems. For example, a Photoshop file can have icon, thumbnail, and version cue information saved in a separate Appledouble file. These files are invisible in OSX and other filesystems as they start with a dot. Leave this checked if you are just going to copy/move/delete files ( increases speed ). You can leave this checked if editing text files as most apps don’t save additional file attributes with text files. However, this depends on the application you use, so do some testing first.
• Enable Negative VNode Cache: This is an optimization to increase speed and should generally be left checked unless files can appear on the mounted volume from the server side. For example, if multiple users are using your mounted disk space leave this unchecked.

You will now have an SSHFS filesystem ready to mount on your desktop.

Mount the remote filesystem

Click on the mount button and if the SSH settings are correct, you should have a green disk icon mounted on the desktop.

Macfusion main window after mounting a remote filesystem

You can now access your remote files like they were on an external disk attached to your computer. You can copy, move, rename and delete files at ease. Remember that if you want to edit files on the remotely mounted disk, the Ignore Apple Double Files checkbox should be unchecked. You can easily edit the SSHFS mount settings by unmounting the disk and clicking on the Edit button.

You might have noticed that we completed only two of the three steps but you can already mount your remote filesystem. This is because Macfusion already has SSHFS pre-installed within its application package. However, I found  the mounted filesystem response to be a little sluggish and wondered if the version of SSHFS that came pre-installed with Macfusion was outdated.

3. Update SSHFS

Let’s examine the pre-installed version of SSHFS that comes with Macfusion. RIGHT-CLICK ( or CONTROL-CLICK) on the Macfusion app in the Applications folder. You will be presented with a contextual menu. Choose the “Show Package Contents” menu option. You will then be presented with a folder containing the application folder hierarchy. Drill down until you see an application called sshfs-static.

Macfusion application hierarchy showing the location of the pre-installed version of SSHFS

This is the copy of sshfs that Macfusion uses to do its magic. To check its version, I opened up the Terminal app, changed directory to the parent folder off sshfs-static and typed in ./sshfs-static -V . You don’t have to do this by-the-way, just skip to the Download and Install SSHFS section.

% cd /Applications/Macfusion.app/Contents/PlugIns/sshfs.mfplugin/Contents/Resources/
% ls -la
total 5736
drwxr-xr-x  9 chandima  staff      306 Aug  4  2008 .
drwxr-xr-x  5 chandima  staff      170 Aug  4  2008 ..
-rwxr-xr-x  1 chandima  staff    46928 Aug  4  2008 new_sshfs_askpass
-rwxr-xr-x  1 chandima  staff  2756952 Aug  4  2008 sshfs-static
-rw-r--r--  1 chandima  staff    13259 Aug  4  2008 sshfs.png
-rw-r--r--  1 chandima  staff     6796 Aug  4  2008 sshfsAdvanced.nib
-rw-r--r--  1 chandima  staff     7609 Aug  4  2008 sshfsConfiguration.nib
-rw-r--r--  1 chandima  staff    61418 Aug  4  2008 sshfs_icon.icns
-rwxr-xr-x  1 chandima  staff    29280 Aug  4  2008 sshnodelay.so
% ./sshfs-static -V
SSHFS version 1.8 (MacFUSE SSHFS 1.3.0)
MacFUSE library version: FUSE 2.7.3 / MacFUSE 2.0.3
no mount point

The pre-installed version was 1.8. I wondered if I’d get a speed increase if SSHFS was updated to the latest version which was 2.2 (as of this writing).

Download SSHFS from:

http://code.google.com/p/macfuse/wiki/MACFUSE_FS_SSHFS (make sure you download sshfs-static-leopard.gz ).

After you uncompress the gzip archive, you will end up with a folder called sshfs-binaries. In there, you will see an app called sshfs-static-leopard.

Rename the sshfs executable:

Rename sshfs-static-leopard app to sshfs-static to match the filename that Macfusion expects.

Replace the old version of sshfs with the new version:

Drag and drop the downloaded and renamed sshfs-static executable into the Resources folder to replace the older version within the Macfusion package hierarchy.

You can check the version again to make sure that the new version is recognized.

% ./sshfs-static -V
SHFS version 2.2 (MacFUSE SSHFS 2.2.0)
MacFUSE library version: FUSE 2.7.3 / MacFUSE 2.0.3
no mount point

I unmounted and remounted the filesystem and the speed increase was quite significant. I highly recommend that you do this third step.

What to do about those pesky .DS_Store and Appledouble files?

There is a solution to prevent .DS_Store file creation over network connections.

The real power of this workflow is being able to edit files remotely without first copying them to the local computer. The Ignore Apple Double Files checkbox has to be left unchecked in order to edit images using Photoshop etc. However, as mentioned previously, this will cause OSX to spew  ._ * files on the server. These files, although invisible on the filesystem UI are still accessible through the web. As far as I know, the Appledouble files don’t contain any sensitive information like passwords and such and can be regarded as relatively harmless ( let me know if this is an incorrect assumption ).

Next steps

Try it out and post a comment with your thoughts. I am interested in seeing if it does improve the workflow for web developers. For those of you who use a versioning system like subversion, I’m interested in getting some feedback on how this can be integrated, or if it is overkill.

I’ve only tested this with my commercial host ( Dreamhost.com ) that runs Linux, although it should work with most hosts that run some variant of UNIX / Linux. There could be permission issues depending on whether the remote filesystem allows extended file attributes. I’ll try and help out if you do have problems.

If anyone knows of a tutorial / resources on mounting remote filesystems on Windows please post a comment and I’ll integrate it into the post.

The widget itself is essentially a video player. It uses the widget embed code (need to login) provided by 12seconds.tv. The plugin saves you the hassle of copying and pasting embed code and editing templates.

Installation

1. Verify that you have PHP5, which is required for this plugin.
2. Download the whole 12seconds-widget folder into the /wp-content/plugins/ directory.
3. Activate the plugin through the ‘Plugins’ menu in WordPress.

Usage

The plugin can be used in two ways:

1. Display the widget in the sidebar
2. Embed the widget on posts and pages.

1, Displaying the widget on a sidebar

After activating the 12seconds-widget plugin, go to the widgets section. Now drag the widget into your chosen sidebar and configure.  You must enter a 12seconds username. You can choose to display a skinny (175×290) or fat (380×440) version of the widget. Make sure you click the ‘Done’ button and the ‘Save Changes’ button after making changes.

If you don’t want a widget title just leave the Title field blank.

2, Displaying the widget on a post or page

Using the shortcodes system in WordPress 2.5 and up, the plugin will allow you to embed the widget into your pages and posts.

Use the “12suser” shortcode to display updates for an individual user

• The username attribute is required and is the login/user name to the 12seconds site.
• The *size* attribute is optional and can be “fat” or “skinny” (default).

Use the “12svideo” shortcode to display a single video

• The id attribute is required.
• The id is the last set of digits of the URL when viewing a video on the 12seconds.tv site. The URLs takes the form http://12seconds.tv/channel/username/123456 . The id in this case would be "123456".

PS: The 12s shortcode introduced in version 0.2 will still work, but it has been deprecated.

Styling Guidelines

The widget embed code tag is assigned CSS class twelve-s-widget.

The caption for individual videos ( when you use the 12svideo shortcode ) is assinged CSS class twelve-s-caption to the tag.

<span class="twelve-s-caption">
 ........... </span>

Examples

The following examples show the status updates and individual videos by the 12seconds team.

Skinny widget showing the updates for username ”12seconds”.

Fat widget showing iJustine’s updates (she’s not a regular 12er, but the few she did are masterpieces).

Single video showing 12seconds co-founder Sol Lipman explaining what its all about.

Download the plugin

So, why did I end up writing a WordPress plugin? It all began with choosing a theme ….

Choosing a magazine style theme

I wanted to use a magazine style theme for this blog. I use K2 for all my other WordPress blogs and have been quite happy with it. However, the visual dazzle of recent magazine style themes left K2 a little wanting. Besides, most of K2s unique features like widget control were now standard in WordPress. I was impressed by the Hamasaki theme, developed by Nurudin Jauhari, on Aral Balkan’s blog. However, the elements were a little too large for my taste and the prominent place given to the most recent post was not to my liking. In contrast, Jauhari had another magazine style theme called hijiriah (demo) that I took a liking to instantly.

There are some excellent features in this theme. The money features for me were:

• Built-in ad support ( a nice way to link to my other resources ).
• Dynamic hierarchical navigation menu based on categories ( structured  access to eclectic subject matter ).
• Auto generated image for each post ( pain free way to add some visual interest to the blog page ).

Auto generating an image for each post

I must say that this is the singular feature that really sold me on this theme. Images are generated automatically using a custom version of the Get the Image plugin developed by Justin Tadlock. This plugin is like a cascading image seeker. It also degrades gracefully. The following image seeking sequence is from the plugin README file.

1. Looks for an image by custom field.
2. If no image is found, it grabs an image attached to your post.
3. If no image is attached, it can extract an image from your post content.
4. If no image is found at this point, it will default to an image you set.

The Get the Image plugin has a function called get-the-image that returns the image element ( img tag ) for the auto generated image. A feature that is lacking is flexible image sizing ( you can only choose from predetermined sizes ).  To scale the image to a custom size, the hijriah theme uses an image resizing script called timthumb. This is the whole reason for customizing/hacking the plugin.

The custom version of Get the Image that shipped with hijriah was based on version 0.3. The customization was a simple hack to add an additional function to the plugin called get-the-link that returned the URL of the chosen image for the post ( as opposed to the whole image element ). For some reason, a similar function that existed in Get the Image was now deprecated (probably due to a very good reason unknown to me). The URL to the image chosen by the hacked Get the Image plugin was passed to the timthumb script for resizing and eventually displayed on the blog page.

Another issue was that version 0.3 of  Get the Image had a bug that prevented it from returning an image specified by a custom thumbnail field. Version 0.3.1 fixed this issue.

Upgrading plugins broke image auto generation

Of course, upgrading the Get the Image plugin to 0.3.1 overwrote the hacked version and the hijriah theme was left without an implementation for the template tag get-the-link.

Modifying the code in the hijriah theme ( I was using a child theme ) to substitute get-the-link tag with the get_the_image tag seemed a little too complicated due to the resizing issue. The other option was to write a new plugin that implemented the get-the-link function.

This was a beginning of my sojourn into plugin development…

Writing a plugin to implement the get-the-link template tag

Template tags are used within WordPress theme templates to display information dynamically. It is really nothing more than a call to a function internal to WordPress or externally implemented in a plugin or functions.php file. In the case of the hijriah theme, the get-the-link tag is required in the index.php template file.

The purpose of the new plugin clear and simple. Implement the get-the-link function by calling the get_the_image function in the  Get the Image plugin. I just have to use regex to extract the src attribute from the image element and return it. Simple right? Well, there were a few important things that I had to learn first.

Important stuff about plugins

This is my first attempt at writing a plugin for WordPress. I had to dispel some preconceived ideas.

It’s been awhile since I did any coding in PHP. Coming from my recent ActionScript 3 background and dabbling extensively in OOP and design patterns I thought the new plugin could simply extend the  Get the Image plugin class and override a method or two. But, noooo! I quickly realized what I was up against as my PHP started to come back.

WordPress has a nice modular architecture, but it is not modular in the OOP sense. Here is the definition of a plugin from the WordPress Codex.

A WordPress Plugin is a program, or a set of one or more functions, written in the PHP scripting language, that adds a specific set of features or services to the WordPress weblog, which can be seamlessly integrated with the weblog using access points and methods provided by the WordPress Plugin Application Program Interface (API).

Forget about looking for a class to extend. All the plugins I looked at were collections of functions. Here are some things I learned about WordPress plugins that may be useful for a newbie like myself.

The bar to entry is very low

It was surprising how easy it was to get WordPress to recognize a new plugin. This is a testament to the simplicity of the plugin architecture in WordPress. All you need is to create a new PHP file inside the plugins folder in your WordPress installation and write a comment block on it. Although not a requirement, it is always a good idea to put your plugin files inside a folder. The comment is the plugin information header.

You can now go into the WordPress admin panel and activate it (from the inactive plugins list). You will now see the plugin activated. Of course it doesn’t do anything, but that was incredibly easy!

Activate the plugin from the Admin Panel

Plugins are just a collection of functions

The best way to learn how to write a plugin is by studying other plugins. Good starting point are akismet and the hello dolly plugins that are included in the default installation. You will quickly see that most plugins have no class definitions, but they are just a collection of functions.

Plugins can take two forms:

1. Plugin as a library.
2. Plugin as a dependency injector.

1. Plugin as library

This is the simplest form of a plugin. A library is simply a collection of functions. The client, a WordPress template in this case, can call the functions. Each function call does some work and returns control to the client.

Template tags are calls to WordPress functions that do something or return some value back to a template. For example,  the bloginfo template tag is a function implemented within WordPress and returns information about the blog based on passed parameters. The ‘name‘ parameter, shown below,  returns the name of the blog.

bloginfo('name');

Custom template tags can be implemented in plugins. This is a super easy way to extend WordPress functionality. All you need to do is implement a function in your plugin with the name of a template tag you come up with (make sure it is unique – more on this later). The following figure shows the index.php template calling the get-the-image template tag. The get-the-image function is implemented in the Get the Image plugin.

2. Plugin as dependency injector

This is a more powerful method of extending the functionality of WordPress. Instead of waiting for the template to call the plugin function, the plugin injects the function into the template. Dependency injection using plugins is called hooks in WordPress. There are two types of functions that can be injected or hooked into wordpress: Actions and Filters.

Action functions can be hooked into specific events in WordPress. That means, the function is called or triggered by a specific WordPress event. For example, you can write an action function that informs different search engines when a new article is posted. The  plugin function will hook into the publish_post event. The events that can trigger an action function are numerous. Refer to the Plugin API/Action Reference for the list.

Filter functions can be hooked into WordPress  to pass content through the function before being output to the web page. For example, if you want to filter out profanity in comments, write a function that takes the comment text as a parameter and returns the clean content. Now you can hook this filter function to the comment_text filter hook so that it is called before comment text is published on the page. Refer to the Plugin API/Filter Reference for the list of filter hooks.

I won’t go into detail on writing plugins as dependency injectors. The plugin API documentation provides a good introduction. A good example on how to write action functions is to take a look at the hello dolly plugin. The book on WordPress Plugin Development by Vladimir Prevolac is quite good and explains action and filter functions very well ( check out the sample chapter ). Above all, download some plugins and take a look at the code – you will learn some interesting techniques.

Choose plugin and function names carefully

Make sure you use a unique name for your plugin and its function names. PHP  and WordPress don’t take kindly to duplicate function names. The plugin will just not load and you will be left wondering what happened. Searching the WordPress plugin directory before settling on a name is not a bad idea. The dash ‘-’ is the recommended separator for words in the filenames and function names for plugins.

Make sure the plugin function exists before you call it

This is also known as:

Looking for a black cat in a dark alley that isn’t there

This is most important for library type plugins that are called directly from templates. The template doesn’t know if the plugin exists or if it is activated. Therefore, it is a good idea to first check if the function is available before calling it from a template. The PHP statement in the template should be of the form:

if( function_exists('get-the-image') ) { get-the-image(); }

The tag function  ’get-the-link‘ will only be called if it exists. There is a tight coupling between the template tag and the plugin where the function is implemented. You need to manually add the tag to the new theme templates if you switch themes.

One of the big advantages of injector type plugins is that the hooks are created at runtime. The template files don’t have to be modified to call the functions. In fact, the template doesn’t know anything about the plugins or the hooks. Therefore, themes can be switched without requiring any changes in the template files.

Get the Image Link plugin

Let’s get back to the issue at hand. The purpose of the new plugin is to implement the get-the-link template tag by calling the get_the_image function in the  Get the Image plugin. We need to return the URL of the image as opposed to the image element.

It is a good idea to take a look at the README file for the Get the Image plugin before proceeding. First thing to note is that the function takes query string style parameters (as opposed to function style parameters). Query string style is desirable when a function has many parameters. The second issue to note is the ‘echo’ parameter which is set to true by default. This causes the function to echo the image element text to the output buffer inside the function. We need to set this to false.

The plugin will consist of one function called get-the-link that calls get-the-image in the Get the Image plugin. It then parses the image element to extract the src attribute using regexp and returns it.

function get_the_link($args = array())
{
	if (function_exists('get_the_image'))
	{
		$args = wp_parse_args($args);
		$args['echo'] = false; // prevent echo output
 
		$imageElement = get_the_image($args);
		$pattern = '/src=(['"])?(.*?)\1/i';
		preg_match($pattern, $imageElement, $matches);
 
		return $matches[2];
	}
}

You can now call the get-the-link template tag from a template and pass it as a parameter to the timthumb script for resizing. Look at the timthumb.php comment block for parameters and usage. The timthumb.php file is included in the hijriah theme.

I must say that writing a library type plugin was much simple than I thought. So, don’t hesitate to give it a try as the more you learn, the more comfortable you will be about customizing WordPress. I learned a lot about theme development during this process and now feel comfortable enough to develop a custom theme. I’ll write about that experience in a future post.

Download the Plugin

The “something cool” should be taken literally. In this first go-around, the judging criteria was decided after the submission deadline. This reminded me of Seth Godin’s Tribes where a tribe leader doesn’t need to have every detail ironed out. Grant just threw out the idea with some “gimme” code,  got the heck out of the way and watched wonderful things happen.

The initial rules were all we had to begin with. However, things got really interesting after Robert Cadena developed the tweetcoding integrator at http://tweetcoding.machine501.com. This page lists all the #tweetcoding tweets with the code submissions compiled into SWFs.  Now we could look at everyone’s submissions, run the apps on the browser ( as opposed to copying and pasting each into a .fla ) and learn some new tricks ( as well as some bad programming habits ).

What can you learn form 140 chars?

Quite a bit actually. When the compiler strict mode is off, some very interesting shortcuts are possible. For me, the big ideas were the most interesting as opposed to the little coding efficiencies discovered during the process. Don’t get me wrong, trying to figure out the best way to implement a loop in the smallest number of characters is a very interesting challenge. However, there was a different group learning dynamic that was more interesting.

I think we spent as much time looking at each others’ submissions and learning new ways of doing things as we did coding our own submissions. Now that submissions have closed, it was cool to take a step back and see how the applications evolved over time as folks learned new techniques from each other.

Learning happened in big leaps

When you start from the early entries at the bottom of the page and work your way up it provides an insight into the evolution of collective thought of a learning community. Learning happened, not in incremental steps, but in sudden leaps as  innovative implementations were submitted.

For example, the first few submissions were non-interactive circles and line drawings built on top of Grant’s first example. Then @mikeysee (Michael Cann) started to use the mouse coordinates. There were a couple of submissions that used mouse coordinates after that. Then there was a stage where folks started to experiment with color. And so it went, with each new innovation or technique adopted by subsequent submissions.

Some of the big learning leaps that come to mind are: Using the Flash 10 3D parameters (cheap motion), using Bitmaps to draw display objects (less code). using Fill interference (cheap visual complexity) ,  cheap particle motion,  using perlin noise, generating audio etc. When I say cheap, I mean an efficient minimalist way of doing something in as few characters as possible.

Settling into comfort zones

After a while. the episodic learning leaps were not as visible as more and more developers joined in and settled into their comfort zones. Most developers settled on an idea or technique and churned out a few submissions based on that. They then moved onto another technique.

However, there were exceptions like @quasimondo (Mario Klingemann) who churned out an incredible array of eclectic stuff in rapid sequence.

Now the community had more depth with novices and experts with good grasp of mathematics and trigonometry joining in and submitting some really fresh stuff.

My personal learning experience ( described in terms of comfort zones )

I initially started by trying to create “something cool” as that was the only critera that was out there. I remembered a screencast by Lee Brimelow on some interesting visual effects created with repeated application of  Filters to a BitmapData object. I believe he repeatedly applied the blur and scroll filters to creat an effect like fire. It was an interesting technique in that you draw something on stage and then draw what is on stage onto a transparent BitmapData object with filters and matrix transformations.

Zone 1: Make it colorful and interesting using BitmapData scrolling

During these early stages I was just trying to get my foot in the door. No great inspirational ideas, just try to make “something cool.” However much I tried, I just couldn’t keep anything that had a blur filter within 140 chars. So, it had to be something that just had scrolling and color. So that was my first comfort zone.

Line scroller

My first submission was “Line Scroller” which was very leaky.  The following bug-free version was submitted later. Something I learned in this first submission was a minimalist way to choose a random color.

if(!i++){b=new BitmapData(550,400,1,0);addChild(new Bitmap(b))};
ls(5,r()*1.67e7);lt(mouseX,mouseY);b.draw(this);b.scroll(0,-8);

Paint Spill

Paint Spill is very similar to the line scroller in that it followed the same principle of scrolling. I experimented with bit shifting to choose a random set of  colors in this submission.

!i?addChild(new Bitmap(b=new BitmapData(i=550,i))):ls(r()*9,r()*1e7<<mouseX);
mt(o.x=r()*i,0);lt(o.x,1);
b.draw(this);b.scroll(0,1);

Zone 2: Make it interactive using mouse input

I tried to have some user interaction in all my submissions. I really liked some of the self-running submissions that drew some amazing recursive shapes with 3D transformations. However, that wasn’t my comfort zone. I decided to concentrate on giving the user some control to draw “something cool.”

The mouse was the cheapest way to record user input and make things interactive. Recording mouse coordinates were very cheap as you can directly access the MouseX and MouseY globals. Intercepting mouse clicks, mouse downs and mouse up were very expensive as they require event handlers.

I was awestruck when the first submission that recorded microphone input came along. Here was another input method that we don’t usually think about.

My next submission was a painting program. The first “painting” type submission was by @scarybug. I went a little further by allowing the user to choose from a set of 10 colors by repeated mouse clicks. This includes something I learned from another submission: You can call a function by  using only its function name ( without the parentheses ) if you just want the default values for its arguments.

Circle Paint

t='mouse';l=stage.addEventListener;
l(t+'Down',function(){ls(9,1.67e7*s(m.PI/(i++%10+1)))});
g.drawCircle(mouseX,mouseY,5);l(t+'Up',ls);

I couldn’t resist including a little masterpiece drawn with a 140 char paint program.

Zone 3: Make it play worthy using casual gaming concepts

Building on my effort to make things interactive, I decided to concentrate exclusively on games. In 140 characters you can only do so much in terms of gameplay.

The first issue was what can be sacrificed without harming the overall experience. The first to go was the winning condition. I couldn’t waste precious characters in a game loop that checks to see if the player has won. Winning had to be visual and obvious to the player. For example, if you kill all the aliens, you win. If you drop the ball, you lose.

The next issue was the instructions. These had to go on a separate tweet. The other aspect was to develop 140 char backstory to develop motivation to play. If you thought coding a game in 140 chars was hard, try to write a backstory or game instructions in 140 chars.

Developing games in 140 chars is hard! The key is to figure out quickly if an idea is going to work or not. If not, go onto something else or try a variation. For example, the Juggle submission initially started out as a “Bubble Wrap” game. It then moved into a balloon popping game before finally settling into the ball juggler.

Most of the unique features were encountered by pure chance and included. For example, the ball disappearing off the top of the stage when volleyed just happened while I was balancing game parameters. I could see that it added to the gameplay by introducing an additional challenge of predicting where the ball would appear next.

My final three submissions were all games.

The Horde

Lame backstory:

Kill one and another takes its place. The only option is to give up and let em through. Or you will go insane!!!

for each(a in o)a.y+=s(a.x),a.hitTestPoint(mouseX,mouseY)?a.y=0:0;
++i<50?(o[i]=addChild(new Bitmap(new BitmapData(9,9,0,0)))).x=r()*550:0

Juggle

Instructions:

Use mouse pointer to volley the ball. How many times can you volley before it falls?

if(!i){p=u=v=a=.1;q=99;i=m.pow}
if(i(q-(m=mouseX),2)+i(p-mouseY,2)<400){v=-9;u=q-m}
v+=a;p+=v;q+=u*.25;g.clear();ls(3);g.drawCircle(q,p,20)

Guess the Number

Instructions:

Guess the number between 0 and 99 inclusive. Move to mouseY=0 (off top of stage) to guess (2nd num). > < = shows if it’s too high, low or just right!

if(!i){(addChild(t=new TextField())).y=p=99;i=int(r()*p); g=c=''}
a=int(mouseX/5);
if(!mouseY){g=a;g>i?c='>':g<i?c='<':c='='}
t.text=a+' '+g+c

Judging criteria

Grant skinner sent this tweet yesterday:

#tweetcoding will be judged on aesthetics, idea, interaction, uniqueness, & code. Should have the results early next week.

The criteria are pretty good with equal chance for interactive and non-interactive submissions to score well. What are my chances? I’ll probably score high on idea and interaction. Maybe in uniqueness as well. However, I’ve done nothing special in terms of aesthetics and code.

Overall it was a fun learning experience. Looking forward to the results.

Update: Results

http://gskinner.com/playpen/tweetcoding_0/

“Juggle” got an honorable mention. The winning entry by @tomee6 was an exceptional diagonal snake game.