Articles

If you've ever made a WordPress-powered site that deviates from the normal blog structure, you know how fantastic registering your own post types can be. If you want to order that custom data manually though, it's quite tricky. Orderly is a very simple WordPress plug-in that allows you to add a simple drag and drop sortable to a post type including posts, pages, and custom post types registered with register_post_type. No more sorting by date and manually changing the post dates.

Installation

Download and extract the "orderly" plug-in folder into your wp-content/plugins directory, or optionally, add as a git submodule if you are using git:

From the root of git repository:

git submodule add git://github.com/typeoneerror/Orderly.git wp-content/plugins/orderly
git submodule init
git submodule update

Next log into the WordPress admin and "Activate" the Orderly plugin on the plugins page.

Orderly uses the jQuery UI Sortable plug-in which is bundled with Wordpress so there should be no other dependencies.

Using it

Installing the plug-in will add a menu to Settings > Orderly in the wp-admin. You can select which post types you want to be sortable there. It will display "Post" and "Page" by default as well as any types you register with register_post_type.

If you'd prefer to use the code directly, to add manual drag and drop ordering to a post type menu, simple use the orderly_register_orderable_post_type convenience method in your functions.php template file.

For example, to make the built-in Pages sortable:

orderly_register_orderable_post_type('page');

Or, if you've used register_post_type to register a custom post type with WordPress, Orderly support can also be added to these. Example:

register_post_type('work',
    array(
        'labels' => array(
            'name' => __('Work', MY_LANG),
            'singular_name' => __('Work', MY_LANG),
            'search_items' => __('Search Work', MY_LANG),
            'add_new_item' => __('Add New Work', MY_LANG),
            'edit_item' => __('Edit Work', MY_LANG),
            'new_item' => __('New Work', MY_LANG),
            'view_item' => __('View Work', MY_LANG),
            'not_found' => __('No work found.', MY_LANG),
        ),
        'description' => 'Content added to the work section is displayed in the portfolio.',
        'public' => true,
        'has_archive' => false,
        'hierarchical' => false,
        'menu_position' => 5,
        'rewrite' => array(
            'slug' => 'work',
        ),
        'supports' => array('title', 'editor', 'thumbnail'),
        'taxonomies' => array('client', 'category', 'post_tag', 'page-attributes'),
    )
);

orderly_register_orderable_post_type('work');

You can wrap the plug-in calls in a test to make sure the plug-in is active:

if (function_exists('orderly_register_orderable_post_type'))
{
    orderly_register_orderable_post_type('work');
}

Once registered, a sub-menu will appear under the post type sidebar menu. In our example above, there would be a sidebar called "Work" which would have a submenu called "Order Work". Clicking this link will take you to the admin page. Drag and drop the list of posts there to change the order and click "Save Order" to save the order. The plug-in simply updates the menu_order property of WordPress' posts table, so sort by that on the front end:

$loop = new WP_Query(array(
    'post_type' => 'work',
    'order'     => 'ASC',
    'orderby'   => 'menu_order',
));

Download Orderly on Github

You've heard it before—the haters, the purists—you most likely either think Fireworks is the "free app that Adobe throws in when you buy 3 or more apps" or you're a Fireworks purist (read: snob) and feel the need to tell everyone how "Photoshop is for Photo Manipulation only." Let's be realistic, though; they are both completely adequate programs for web designers and one can happily design websites in both.

I believe, however, that many user's disdain for Fireworks is due to their unfamiliarity with the program (and possibly that it's one of Adobe's more crash-happy programs; though CS5 is certainly a huge improvement). The workflows they've spent years learning in Photoshop are "hard" to do in Fireworks (speaking from experience here). They aren't hard, just different, and I've found that now that I've gotten to know Fireworks, I actually prefer it over Photoshop for many tasks.

Let me be clear that I am not saying Fireworks > Photoshop. It's not; it's just different. I firmly believe, however, in using the right tool for the job. If you're editing photos, bitmaps, painting, drawing custom elements, etcetera, by all means, use Photoshop. If you're doing wireframes, prototyping, vector-heavy application design, layouts and web design in general, Fireworks should also be in your toolkit.

That being said, I'd like to tell you about some of its features I care about to make you think about giving it a shot on your next design project...

With many folks touting mobile-first design and mobile browsing growing by leaps and bounds, it's important to create responsive applications. Fluid layouts and scalable graphics mean thinking outside the 960x600 box we've designed ourselves into. Which brings me to items #1 and #2.

Decent Vector Editing

"Fireworks blends the use of bitmap and vector effectively, falling somewhere in between Illustrator's vector power and Photoshop's bitmap editing ability." -- Greg Lutze, Must Warn Others

Photoshop is the bee's knees when editing bitmaps, but vectors are a different story. If I want a scalable graphic I may fire up Illustrator and then create a Smart Object. In Fireworks, I can draw directly in the same app and create graphics that can scale to any size. Created a 320x480 design for an iPhone view? Scaling that up to 640x960 for retina display would pretty much be a complete redesign in Photoshop. In Fireworks, it's a quick Image Size change.

Speaking of size changes...

Pages & States

You Photoshop uses are probably saying "hey, we've got Layer Comps!" about now, right? Good, you should use them! Starting in CS4, Fireworks has Pages and States. States are similar to Layer Comps but Pages are like a whole separate design document in the same file. Each page can have its own canvas size so creating multiple layouts in the same file is a snap. Each page can have States within it. You can easily export Pages to images or to a PDF with a selection of Pages in it. I can't count how many times I've seen 3000px high Photoshop designs because the "Home Page" is only 700px high but that "News" layer is 3000px. That can be a bit confusing.

A document can also have Master Pages; pages which are used across all sub-pages. Put your navigation/header and global elements in there and make adjustments once to propagate across all pages. In Photoshop, if you make a global change, you may have to go back and update one of your layer comps to reflect the differences. This type of task is minimized with Pages and States.

There are things that both Photoshop and Fireworks do...

Grouping and Selection

Photoshop has great grouping. Select some layers, group them. However, I really like Firework's implementation of selection. When you select an object on your canvas, it shows it selected. Its not just a highlighted layer in your Layers panel. You can hover over a layer to show it's bounding box, so you know exactly what you're about to select. No toggling on/off "Auto-Select Layer", thank you.

Smart Objects vs. Symbols

Photoshop uses smart objects to make reusing assets easy. Edit your Smart Object in Illustrator or another editing program and update it throughout your file. Fireworks goes further with Symbols. They are almost like a MovieClip in Flash. You can create a reusable Symbols containing graphics and text, set properties on each, and add 9-slice scaling.

For example, you could create a Symbol that has a "label" property. Drag an instance of a custom button to your canvas and set the label property in the "Symbol Properties" panel, and the symbol will add the label and "9-slice-scale" the background to fit the text field.

Graphic Export

Both Fireworks and Photoshop have export tools for web. Fireworks gives you a bit more granular control and (I've found) better quality and superior compression on exported images overall. You can also set export settings per page if you are exporting the PNG document as images (one for each page). Fireworks also has a more sophisticated slice-creating tool, allowing you to create rollover states for buttons and export them all at once.

Trying It

I found the most difficult task when trying Fireworks for the first time was masking and gradients. They can be quite confusing compared to Photoshop. Making something like a gradient mask is quite easy though. Just like Photoshop, select the layer and click the mask icon in the layers panel. Then you just select the mask and use the gradient tool to draw the mask. The gradient tool in Fireworks is pretty cool as it has a sort of "live-preview" as you click and drag. The initial effort to learn the new methods is tough, sure, but I think you'll find that once you've established workflows for your familiar Photoshop tasks, you'll love Fireworks.

So, I've made my case for Fireworks. Obviously, these are just opinions, but give it a another shot. Perhaps you won't care for it, but I think it's responsible as a developer or designer to have both Fireworks and Photoshop available to you and to familiarize yourself with both.

Following my obsession with TextMate snippets and commands, I created a function snippet which extended the basic function and added a few new useful features. This snippet is mapped to Shift + Enter. Just type the name of your function...

myFunction

and hit Shift + Enter after it. The following snippet is inserted:

/**
 *
 *
 * @return
 */
public function myFunction()
{

}

The first tab stop is inside the parentheses so you can add some parameters, hit tab again to focus on the scope (public). We use a simple regular expression here to add "_" or "__" to the method name depending on if you type public|private|protected. The rest of the tabs go through the return statement, docblock and finally end inside the function declaration.

I've got both an AS3 and PHP version. Starting with the PHP version:

cat <<SNIPPET
/**
 * $4
 *
 * @return $3
 */
${2:public} function ${2/(private)|(protected)|(.+)/(?1:__)(?2:_)(?3:)/}${TM_SELECTED_TEXT:-$TM_CURRENT_WORD}($1)
{
	$0
}
SNIPPET

And the AS3 version is basically the same with just a return type defined:

cat <<SNIPPET
/**
 * $4
 *
 * @return ${5:$2}
 */
${3:public} function ${3/(private)|(protected)|(.+)/(?1:__)(?2:_)(?3:)/}${TM_SELECTED_TEXT:-$TM_CURRENT_WORD}($1):${2:void}
{
	$0${2/void$|(.+)/(?1:return null;)/}
}
SNIPPET

I'd also like to eventually add @param docs to the docblock as you type out parameters. Would love some suggestions there.

You can download both the PHP and AS3 Function Commands here. You can also download my TextMate theme Plum Dumb, or—if you're into PureMVC—you can download my PureMVC TextMate templates.

Working on adding regionalization and localization to T1EOS, I needed a solid list of countries. Poking around on google led me to sabbour's awesome SQL list of Countries and their respective nationalities (e.g. United States – American). I added them to my database and then went through and updated each record with its ISO 3166-1-alpha-2 code. I've provided the resulting SQL dump below (simple table with index and unique on the country slug). Some of the nationalities and country names may be out of date, so take a glance before using in any official capacity.

→ Download countries-nationalities-iso.sql

Game Center has a notification window that slides down and informs the GKLocalPlayer that they've been authenticated. There is no built-in way to display achievements that the user may have earned during use of your application. The GKAchievementNotification classes are a way to display achievements awarded to the player in the same manner as the authenticated message—similar to Xbox Live style achievement dialogs. The achievement dialogs are added to the UIWindow view of your application:

Achievement notifications in the upcoming Cee-lo 1.1 update.

Using It

You can grab the code from github. Add the folder (.h, .m, images) to your Xcode project. The GKAchievementHandler class handles the display of the notifications. You'll primarily use that (there'd usually be no reason to create a notification directly). When your player earns an achievement, you can notify them of this via GKAchievementHandler:

// grab an achievement description from where ever you saved them
GKAchievementDescription *achievement = [[GKAchievementDescription alloc] init];

// notify the user
[[GKAchievementHandler defaultHandler] notifyAchievement:achievement];

You can also use custom messages instead of a GKAchievementDescription object:

[[GKAchievementHandler defaultHandler] notifyAchievementTitle:@"High Roller" andMessage:@"Earned 100 points online."];

Customization

Apples Guidelines state that "it is up to you to do so in a way that fits the style of your game". and Allan Schaffer of Apple stated in the forums that "[the] best way to do that would be to present a custom dialog using the look and feel of your game" (emphasis, his). This to me means you may be rejected for using Apple's artwork in a custom application. If this worries you, use the setImage: methods to change the logo displayed in the dialog or change the gk-icon.png images in your images. You can also set the image to nil to not show any image:

[[GKAchievementHandler defaultHandler] setImage:nil];

You can also edit the gk-notification.png images to change the stretchable background.