Articles

Typeoneerror is growing and I am looking for a select group of creative individuals who will form our core product-development team over the next year and assist with various client projects on a daily basis. I am searching for unique talents with experience in the development and design of interactive applications and games on multiple platforms.

I typically work with small teams of independent contractors on our projects, but reached a point where having people in the office makes sense. That's where you come in, I hope!

Roles

At this time, I am looking to hire a developer in the junior- to mid-level range, as well as a (paid) intern. Candidates should have front-end development experience as well as some experience with programming languages.

Requirements

• HTML(5)
• CSS(3)
• Javascript(jQuery, OK)
• Ability to translate PSD and FW templates to clean, responsive code
• Experience with front-end PHP or Ruby development

A solid foundation in the basic web development technologies listed above are required for this position, and experience with PHP would be fantastic, but here's a list of some of the technologies I am currently working on that, if you had experience with, would certainly tip the scales in your favor:

Niceties

• SmartyPHP
• Understanding of version control (subversion, git)
• Wordpress
• Flash/Flex/AIR APIs
• LAMP development
• Rails/Ruby development
• Experience with OOP & MVC frameworks (Zend, Rails, Django, CakePHP)
• Objective-C (iOS apps)
• Java (Android apps)
• Facebook apps
• Database design
• Information architecture
• Game Development (iOS, Android, XNA)
• Familiarity with *nix, Apache
• Front-end asset pipelines (sass, less, compass, haml)

Also required are positive attitudes and strong opinions about the web.

How to Apply

Candidates should feel free to submit a cover letter and resume (or relevant URL) with applicable work samples and salary requirements to hello@typeoneerror.com. Click the mailto links below to start:

Junior Developer
Intern

Thanks for reading, and feel free to tweet about this if you'd like to help me out.

About Typeoneerror

Located in the Ballard neighborhood of Seattle, Typeoneerror is an interactive design boutique led by artist and programmer Benjamin Borowski; committed to creating fine interactive applications via direct and collaborative engagements. Providing strategic design and development for websites, games, and mobile devices, our core expertise melds hand-crafted code with beautiful, user-centric design & strategy.

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

Taking a break from iOS development to work on some front-end development on a Wordpress site. Now that Wordpress 3.2 has a pretty badass custom post-type system, it's much easier to create custom admin elements and it makes it a logical CMS choice for many projects. To contribute to making a more customized user experience for a client, I wanted to change some existing texts in the admin tool, but not make a whole language file with .mo and .pot files and all that (no thanks). Here's how this is accomplished.

First in your template's functions.php, make sure we're in the admin context with is_admin. We then load an .ini file that'll contain all our custom translations:

if (is_admin())
{
    $translations = parse_ini_file(dirname(__FILE__) . '/translations.ini');
    function my_gettext($translation, $text, $domain)
    {
        global $translations;
        if (isset($translations[$text]))
        {
            return $translations[$text];
        }
        return $translation;
    }
    add_filter('gettext', 'my_gettext', null, 3);
}

my_gettext will be called whenever Wordpress asked for translated text with the __() helper. If the original text is set in the .ini file as a key, it'll instead return our defined text. And here's how that file looks:

; translations.ini
; Old text=New text
Featured Image=Thumbnail
Remove featured image=Remove thumbnail

In this case, when Wordpress requests the string 'Featured Image', 'Thumbnail' will be displayed instead. That's it. 

Special thanks to Soulseekah on the Wordpress Stackexchange for the assist on simple translations.

Wordpress has a very sophisticated image uploader that allows you to insert images directly into your post. It inserts images with an absolute path, including the full path to your image as an absolute link. My guess is this is for SEO and theming purposes, but if you're just building a one-off site using Wordpress as your platform, you might want to have a relative URL in there instead, i.e.:

/wp-content/uploads/2011/07/image.jpg

instead of:

http://yoursite.com/wp-content/uploads/2011/07/image.jpg

Relative attachment URLs would be useful if you were working locally at a dev domain or localhost or if you moved the website to a different server. Forcing Wordpress to insert a relative link into the database is pretty simple; you can do this by hooking a filter on the wp_handle_upload method:

function yoursite_get_relative_attachment_path($path)
{
    $paths = (object)parse_url($path);
    return $paths->path;
}

function yoursite_wp_handle_upload($info)
{
    $info['url'] = yoursite_get_relative_attachment_path($info['url']);
    return $info;
}
add_filter('wp_handle_upload', 'yoursite_wp_handle_upload');

This filter method receives the info about the upload which will be saved in the database after the upload completes. You parse the URL of the image and grab just the relative path and send it back. Your image's path in the database will now be relative to the root of your site.

That's great, but Wordpress still inserts the full site path on the front end and when you use the "Insert Image" button when writing your post. Easy fix:

function yoursite_wp_get_attachment_url($url)
{
    return yoursite_get_relative_attachment_path($url);
}
add_filter('wp_get_attachment_url', 'yoursite_wp_get_attachment_url');

By attaching another relative URL filter to the wp_get_attachment_url filter, anywhere where Wordpress requests an attachment URL will return the path relative to the root.

I haven't tested this too much with the rest of the platform, but it seems to work well so far for me. I typically create custom one-off sites with Wordpress, so I'm not super concerned with creating reusable themes.

Here's the final snippet that you'd add to functions.php. You'd just replace yoursite with your site's namespace.

function yoursite_get_relative_attachment_path($path)
{
    $paths = (object)parse_url($path);
    return $paths->path;
}

function yoursite_wp_handle_upload($info)
{
    $info['url'] = yoursite_get_relative_attachment_path($info['url']);
    return $info;
}
add_filter('wp_handle_upload', 'yoursite_wp_handle_upload');

function yoursite_wp_get_attachment_url($url)
{
    return yoursite_get_relative_attachment_path($url);
}
add_filter('wp_get_attachment_url', 'yoursite_wp_get_attachment_url');

Working on a fantastic project lately; a PHP platform developed with Smarty template engine that will power three (and more) websites. Each website has a shared library used to bootstrap the app and the site-specific logic is contained in the extensible smarty templates.

Each site has a large body of "documentation" files. The client's previous situation was such that each person responsible for the documentation was using their own (and thus, different) solution. So I recommended settling on a standardized documentation format.

I thought Markdown was a great fit and found a fantastic PHP port of John Gruber's tool. This particular version—Markdown Extra—extends the Markdown port to footnotes, tables, and other nice things. I created a very simple smarty plugin (the initial version below) for documentation writers to be able to load in a markdown file into a Smarty Template:

// smarty/plugins/block.markdown.php

function smarty_block_markdown($params, $content, &$template, &$repeat)
{
    if (!$repeat)
    {
        if (isset($params['source']))
        {
            $source = $params['source'];
            $contents = file_get_contents($source);
            $rendered = Markdown($contents);
        }
        else if (!empty($content))
        {
            $rendered = Markdown($content);
        }
        else
        {
            return "";
        }

        return $rendered;
    }
}

This is quite a simplified version of the final plugin. The final includes support for replaceable tokens among other things, but basically, it's used like so:

{* render the contents of a file called markdown/file/name.md as HTML *}
{markdown source="markdown/file/name"}{/markdown}

{* render the markdown source in the block directly *}
{markdown}
# header {#header-id}

This is some markdown.
{/markdown}

So why separate the markdown instead of just injecting it directly into the smarty views or just writing it in HTML? Well, part of the requirements of the project was that any documentation written for the website should be able to be easily converted to a PDF. So how do we do that? After some research on what tools would be easy for others to use as well, it ended up being a simple process; in short:

1. Load markdown files, parse with Markdown Extra, converting to HTML.

2. Take the concatenated HTML and pipe the output into HTMLDOC.

HTMLDOC is an open-source command-line tool that converts HTML documents into PDFs. I decided to use this tool to automate the build of the PDF documentation. So for web viewing, Markdown is converted to HTML and cached on subsequent requests as HTML via Smarty, and for download, the PDF docs are created using the same Markdown; a nice separation of concerns, I thought.

Here's a section of the build-docs PHP script that is run during the ANT build for each site. Prior to this section, the file looks in the documentation and loads specified markdown files and parses them with Markdown extra and loads the concatenated results into a temporary HTML file. This file is then piped into HTMLDOC:

$command = "htmldoc ";
$command .= "--book "; // generate in book format with TOC
$command .= "--links "; // link up hyperlinks
$command .= "--title "; // include a title page
$command .= "--toctitle " . escapeshellarg($toc_title) . " "; // TOC title
$command .= "--linkstyle "underline" "; // what to do with hyperlinks
if ($title_image)
{
    $command .= "--titleimage " . escapeshellarg($title_image) . " ";
}
$command .= "--footer h./ ";
$command .= "--header .t. ";
//$command .= "--bodyfont helvetica ";
$command .= "-t pdf14 ";
$command .= "-f {$output_file} {$temp_file}";

exec($command, $result, $return);

We execute the htmldoc command via PHP and the documentation PDF is generated. The variables allow us to create a bootstrap file for each site's documentation to configure the output a little bit.

The final requirement for the documentation was the addition of tables of contents to any markdown file and documentation. The documentation writers wanted to be able to have a list of the <h1-6> tags linked up to the corresponding section on the page. I accomplished this by adding another parsing block to Markdown Extra. In short, this block uses Markdown Extra's existing list of parsed headers and wraps them in a <ul> list with anchor tag links. The regular expression for matching the "toc" is as follows:

"/{toc(?:|?([1-6])(?::([1-6]))?)?}/

Ain't regex lovely? This matches some of the following, replacing it with the rendered unordered list where it appears in the markdown document.

• {toc} renders the entire table of contents.
• {toc|3} would display <h1> through <h3> tags in the table of contents.
• {toc|2:5} would display <h2> through <h5> tags in the table of contents.

Anyway, that's some of the process stuff I've been plugging away on lately. I've sort of become obsessed with writing everything in Markdown now. If I need to send to another developer or client, I'll do something like the following:

alias markdown='/path/to/Markdown_1.0.1/Markdown.pl'
markdown my-doc-file.md | htmldoc --format pdf14 - > my-doc-file.pdf

(Obviously there'll be a bunch of params for htmldoc as seen in the PHP example above). Quite simply converting Markdown and piping to htmldoc. Of course, I don't get to use my fancy extended Markdown with tables of contents, but for day to day writing, it's ideal. Bam, lovely looking PDF.

Depending on the completion of these projects, I may release the updated Markdown Extra with Table of Contents and the related Markdown Smarty plugins. Check back later with me.