tyler.io

Two years ago, shortly after I released VirtualHostX 1.0, I wrote about Appcaster – a web dashboard for Mac developers I built that manages my application updates, payment processing, etc. With the release of VHX 2.0 and Incoming!, I decided it was time to rewrite Appcaster as the original code was hurried and hastily patched over the last few years.

Today I’m happy to officially announce Shine, a revamped version of Appcaster re-written from the ground up. The goal of Shine (more on the name in a bit) was to provide clean, easy to use dashboard for indie Mac developers and also to build a stable foundation that provides for future improvement down the road.

I chose the name Shine because, at it’s heart, it’s a complimentary product to Andy Matuschak’s Sparkle project. (Inevitable tagline: Your app already Sparkles, now make it Shine.) The core functionality, like Appcaster before it, is to automatically generate appcast feeds for your product updates. But it does a whole lot more, too.

Shine handles order processing using PayPal’s IPN service. That includes generating the license information (using either Aquatic Prime or your own, custom scheme), emailing it to the user, and managing the database of orders. It also computes aggregate stats based on your users’ Sparkle update requests, collects user feedback (bug reports, feature requests, questions), and automatically stores your application updates in Amazon S3.

In short, Shine manages my entire Indie Mac developer workflow.

The code is based on two of my other open source projects: the Simple PHP Framework and YUI App Theme. SPF provides a clean, lightweight, active record pattern to model the data, and yui-app-theme is an admin area CSS template built on top of the YUI Grids framework. Combining these two projects let me build Shine in record time (about 24 working hours).

The code for Shine is free to use (MIT license) and available on GitHub. Feel free to email me with any questions or feedback.

(Thanks to Steven Degutis of Thoughtful Tree software for his feedback on this project.)

Sosumi is a PHP script that scrapes MobileMe and exposes Apple’s Find My iPhone functionality to the command line or your own web application. This lets you pull your phone’s current location and push messages and alarms to the device.

Like my previous blog post that dealt with AT&T’s Family Map service, my goal was to connect my iPhone with Fire Eagle by Yahoo!. There are a few iPhone Fire Eagle updaters available, but they’re all limited by Apple’s third-party application restrictions. Sosumi gets around those restrictions by running every few minutes on your own server rather than the device itself. In my case, I’ve setup a cron job to run the script every fifteen minutes and push my location to Fire Eagle.

Until Apple releases a location API for MobileMe (not likely, and not their job), this will have to do.

Grab the code on GitHub.

Example:

<?PHP
$ssm = new Sosumi('username', 'password');
$location_data = $ssm->locate();
$ssm->sendMessage('Daisy, daisy...');

Location Based Services are hot. They add an extra layer of usefulness on top of the web sites and products we’re already using. The trick is keeping your location updated in the cloud as frequently, comfortably, and securely as possible.

Fire Eagle fulfills the security requirement — brokering your whereabouts only to parties you’ve authorized. And iPhone applications like Sparrow and Voila make it a cinch to update Fire Eagle on-the-go. But they’re limited to manual updates as they can’t run in the background. (And you wouldn’t want them to because of the drain GPS has on battery life.)

For me, the holy grail has always been a way to update your location persistently from iPhone. And until Apple offers their own solution (fingers crossed) I’d like to present mine. It’s a dirty hack (the best always are), and has the added benefit of working with any AT&T phone — not just iPhone.

To do this, we’ll be scraping AT&T’s new Family Map service and then pushing the data we retrieve into Fire Eagle ourselves.

(Family Map is an overpriced add-on to your monthly plan that lets you track the phones on your account using AT&T’s website. It’s limited, but surprisingly good considering it came from within the bowels of a cellphone company.)

There will be three parts to this hack.

1. Scraping our location data from AT&T’s website.
2. Pushing that data to Fire Eagle.
3. Making the script run automatically.

Let’s get started.

Scraping the Data

The Family Map website uses Microsoft’s VirtualEarth maps plus some other AJAXy fanciness. I briefly poked around to see if there were any JSON or XML data sources I could hijack but didn’t see anything. Instead, I opted to directly scrape their mobile website as it’s plain vanilla HTML.

I won’t go into the details of scraping the data (you can see the code for yourself), but it was pretty simple. Login, send a “locate my phone” request, wait for the data, and parse out our coordinates.

Pushing Data to Fire Eagle

Fire Eagle is an excellent API to work with. They’ve got a clear spec and tons of example code. The only tricky part is handling the initial OAuth setup. I’ve included a simple web page (setup.php) you can use to do the authentication. It’s based on Fire Eagle’s PHP API kit example.

Once OAuth is setup, it’s only one line of code to publish our location.

Making it Automatic

Running this script automatically will vary depending on your setup. In my case, I’ve created a cron jon that runs the included update.php script every five minutes.

Download the Code

And that’s it. This code is only a few hours old, but it seems to work well so far. I watched as Fire Eagle was updated with my location this morning on the way to work. That said, it’s definitely not user friendly — clearly something only someone familiar with a command line would want to setup. But if you’re interested in developing a friendlier solution, let me know and perhaps we can work together.

Grab the code from GitHub.

Last year I posted a PHP script that lets you dial phone numbers using Grand Central. I updated it this morning to support Google Voice as well.

The syntax is the same

<?PHP
$gv = new GoogleVoice('[email protected]', 'password');
$gv->call($your_number, $their_number);

You can grab the code from my google-voice-dialer project on GitHub.

Tonight I pushed a new project to GitHub called yui-app-theme. It’s a generic, skinnable layout designed for web applications — particularly admin areas — built using YUI Grids.

In other words, it’s a starting point.

Usually when doing freelance work for clients, unless you’re building on top of an existing CMS like WordPress or MiaCMS, you’ll have to create an admin area for the client to login and manage their site. Or maybe you’re building a bug tracker or some other web application. Whatever the situation, yui-app-theme provides a solid foundation to start your work.

It offers a tabbed layout with many of the common UI elements that web apps need. Content blocks, tabbed modules, one and two-column forms, error messages, etc. But most importantly it’s built using YUI Grids so it’s semantically structured, cross-browser, and easy to extend. You can radically alter the layout with just a few quick changes. Try clicking through the layout options on the demo page.

I’ve done my best to keep things logical and easy to use. Here’s a quick example of how to use and extend the built-in content blocks.

A basic content block, or module, is created with the following markup

<div class="block">
    <div class="hd">
        <h2>Your Header Content</h2>
    </div>
    <div class="bd">
        <p>Your body content goes here.</p>
    </div>
</div>

You have a containing div with a class name of block surrounding two inner divs, which make up the head and body content of the block. In the browser you’ll see

Content blocks resize to fit their surroundings. That means you can take the same markup used for a body content block and move it into a sidebar — the block will automatically shrink to fit the smaller space.

We can also extend the block to have a tabbed appearance. To do this, we just need to add an extra tabs class and define our tabs using a <ul>.

<div class="block tabs">
    <div class="hd">
        <ul>
            <li class="active"><a href="#">Tab 1</a></li>
            <li><a href="#">Tab 2</a></li>
            <li><a href="#">Tab 3</a></li>
        </ul>
        <div class="clear"></div>
    </div>
    <div class="bd">
        <p>Your body content goes here.</p>
    </div>
</div>

Easy.

However, you’ll notice than by using an unordered list to build our tabs, we had to remove the <h2> tag. In some situations we may want to keep that header around for SEO purposes — visible to search engines but hidden from users. yui-app-theme handles this situation automatically by hiding any <h2> and <h3> tags inside a content block’s header. (Technically, it applies an extreme negative left margin to move it outside the browser window.)

Let’s take this example one step further and change the appearance of the tabs by making them look separated. All we have to do is add a spaces class to the content block.

<div class="block tabs spaces">
    <div class="hd">
        <ul>
            <li class="active"><a href="#">Tab 1</a></li>
            <li><a href="#">Tab 2</a></li>
            <li><a href="#">Tab 3</a></li>
        </ul>
        <div class="clear"></div>
    </div>
    <div class="bd">
        <p>Your body content goes here.</p>
    </div>
</div>

And we get

It’s that simple. With the right CSS, minor HTML edits can create powerful changes when rendered.

If you explore the demo you’ll see that applies to the page layout as well. You can very quickly change the color scheme or page width. And even adjust the sidebar, move it to the opposite side, or switch the layout to a single column. It’s all possible because yui-app-theme, itself, is built on top of a solid foundation — YUI.

I’ve already started using this template in my own projects and found it incredibly helpful to have my application layout up and running so quickly. I hope you can benefit from it, too. And, please, feel free to fork yui-app-theme on GitHub and contribute your own improvements.

Earlier this month I wrote a quick PHP wrapper for Yahoo!’s GeoPlanet API. It’s a super useful service for querying geographical information about nearly any place on earth — addresses, landmarks, colloquial locations, etc. Or, as the official description says

GeoPlanet helps bridge the gap between the real and virtual worlds by providing an open, permanent, and intelligent infrastructure for geo-referencing data on the Internet.

There were already Perl, Python, and Ruby wrappers. I figured I’d throw PHP into the mix.

Pete Warden has already written some example code that uses the wrapper to emulate Twitter’s nearby location search.

You can download the source from GitHub. As usual, it’s licensed under the MIT License and free to use in any way you like.

I’ve written twice about using Amazon S3 to host your website’s static content. It’s a great solution for small websites without access to a real content delivery network. And now that Amazon has launched CloudFront on top of S3, it’s even better.

But there are still ways we can improve the performance. The trick is to upload our files using custom headers so they’re served back with a proper expiration date and gzipped when possible — i.e., the techniques recommended by YSlow.

I’ve written a command line tool which simplifies this process called s3up. The idea is simple. It uploads a single file to S3, sets a far future expiration date, gzips the content, and versions the file by combining the filename with a timestamp. Each of these actions are optional and can be controlled via the command line.

The basic syntax:

s3up myS3bucket js/somefile.js somefile.js

would upload a local JavaScript file named somefile.js into your Amazon S3 bucket named myS3bucket inside the js folder.

We can build on this command by adding the -x flag, which tells s3up to set a far future expiration header. By default, it chooses a date ten years in the future:

s3up -x myS3bucket js/somefile.js somefile.js

This lets the browser know to keep the file cached indefinitely.

Passing the -z flag uploads two copies of the file. One normally, and a second that is gzipped and renamed filename.gz.extension. You can then dynamically serve the compressed version to browsers that support it.

Finally, the -t flag uploads and renames the file filename.YYYYmmddHHmmss.extension. This lets you easily create versioned files when you need to update an existing file. (You need to use a new filename since the browser was told earlier to always load from the cache.)

Combining all three options we get:

s3up -txz myS3bucket js/somefile.js somefile.js

This uploads your file, compresses it, sets the correct expiration date, and versions the filename — all in one easy step.

If you’d prefer to choose your own string for versioning, you can specify it with the --version flag:

s3up -txz --version=v2 myS3bucket js/somefile.js somefile.js

In that example, the file would be stored in S3 as somefilev2.js.

s3up also echoes the new filename so you can quickly paste it into your HTML. If you’re on a Mac, you can automatically copy the new name onto your clipboard by piping s3up to the pbcopy command.

If you’d like to take this a step further and integrate s3up into your existing deploy scripts, you can leave off the filename argument and instead pipe the data to upload via stdin. So, if you’re using another tool like the YUI Compressor or byuic, you can run:

somecommand | s3up -txz myS3bucket js/somefile.js | pbcopy

Uploading Multiple Files

A common task is uploading a whole folder of images. You can do this in one step by appending a slash (/) to the S3 filename and using wildcards to specify multiple local files. Example:

s3up myS3bucket images/ /path/to/your/images/*.jpg

When s3up sees images/ ending with a slash, it treats it like a directory and stores all of your files into it. Make sure you remember the slash on images/. That’s what triggers the special “directory” mode uploading.

Download

You can grab the latest copy of s3up from the its GitHub project.

iLife ’09 was released today. And with it came a much improved version of iPhoto with facial recognition, geotagging, and Flickr and Facebook support. With so many new ways to slice and dice my photos, I wanted to start over with a clean slate and get everything organized in iPhoto before re-exporting my library back to Flickr or wherever.

Before I could do that, I had to download all of my photos out of Flickr so I could import them into iPhoto. I wanted something simple that would also retain my photos in their correct sets when downloading. I found one program for Windows, but nothing for Mac. (Did I missing something obvious?)

So here’s a simple PHP script that uses the phpFlickr library to download all of your photos. It creates a folder for each set plus an extra one for photos not in a set. This grabs your original, full-size photos — both public and private.

You can get the script from my Google Code project here. You’ll also need to download and include a copy of the phpFlickr source from here.

Here’s a handy trick that will let you sync your Adium chat logs across multiple Macs using Dropbox. From a command line, cd into your Dropbox folder

cd ~/Dropbox

and then

ln -s ~/Library/Application\ Support/Adium\ 2.0/Users/Default/Logs "Adium Logs"

That will create a symlink from your Dropbox folder to your Adium log directory. When syncing, Dropbox will follow this link and process your chat logs as if they were stored inside your Dropbox folder.

Do this on each Mac you want to sync. I have two Macs at home and another at work — it’s worked like a charm so far. But, be sure to backup your chat logs the first time you do this just in case something goes wrong.

For people who like the idea of VirtualHostX but want to setup virtual hosts on Ubuntu rather than Mac OS X, Stefano Forenza has created the Rapache project. Like VHX, Rapache is a GUI to manage Apache virtual hosts. With just a few clicks you can create a new host and the appropriate DNS settings for local development.

Rapache Project