Video preview

httpv://www.youtube.com/watch?v=KTcISVU4Nf4

YouTube Link…

Setting up your web server

To run it, you need to run your local web server as your own user. This is, of course, a major security risk and completely inadvisable if your local web server is open to outsiders in any way. Mine’s not, so I didn’t put too much time into figuring out a more secure way to do this. If you have any clues in that area, let me know and I’ll post them.

To run your local web server as a different user, you need to edit /etc/apache2/httpd.conf. You’ll need to edit it as root, so use sudo to launch your text editor of choice (e.g. sudo vi /etc/apache2/httpd.conf). If you, like me, just use TextMate’s mate command, you’ll be prompted for a password when you save.

Locate the lines:

User _www
Group _www

Change them to:

User yourusername
Group staff

You’ll also need to enable PHP, if you haven’t already. If you haven’t, locate the line that starts with:

#LoadModule php5_module

Just remove the hashmark at the beginning (#) to turn PHP on.

Now, at the command line, type sudo apachectl graceful to restart the server under the new user. If everything is in place, you’ll be able to run HomeControl without a hitch now. Turn on Web Sharing in System Preferences > Sharing to keep the web server running through reboots and logouts.

Installing HomeControl

Just download the zip file at the end of this post and unzip it into your ~/Sites folder. If you prefer to have it elsewhere, or have a custom folder set up for Apache, it will run just fine in any folder, as long as you can access it from a web browser on the local network.

Next, point your web browser to the folder. If you put the ‘homecontrol’ folder directly in ~/Sites, you should be able to reach it at the url http://computer_name.local/~Username/homecontrol. You need to know the name of the computer it’s on (set in System Preferences > Sharing, at the top), and your username on that system, substituting each in the appropriate place in the url.

Once you’ve loaded the page and tested it out, use the “+” icon at the bottom of Mobile Safari’s web browser to add an icon to your home screen which will take you directly there in the future, and will run the app full-screen.

Customizing HomeControl

Since I know not everybody who wants to try this out is going to be ready to hack into the jQuery and PHP, I made quite a few bits of the app modifiable with simple HTML edits. If you’re comfortable with that, you can change the list of applications and add iTunes features quite easily.

Application launcher

• Locate the div with the id “apps”
• Find the unordered list (<ul>) inside of it
• Edit or copy and edit existing lines by changing only the name of the application in the first span
• Use the exact displayed name of the application you want to control, and HomeControl will pass it to the PHP exec function

iTunes functions

• Locate the div with the id “itunes”
• Find the unordered list inside of it with the id “itunescmd”
• Add new features by copying an existing line and changing the rel attribute and the text of the link
  • The rel attribute passes the actual iTunes AppleScript command, which will be appended to a ‘tell application "iTunes" to’ line and passed to osascript
  • The text of the link is the title which will appear in the menu

iTunes EQ Presets

• Locate the div with the id “ituneseq”
• Find the unordered list inside of it
• Edit the text of the links in the list with the exact title of the preset you want to control
• Add or remove list items as desired

Startup screen and icon

• Edit homecontrolicon.png in the homecontrol folder to customize the app’s icon on the homescreen.
• Edit hc_startup.png in the homecontrol folder to customize the startup screen.
• If you’ve installed the web app, delete the icon and reinstall from Mobile Safari to see the new images.

Advanced customization

If you’re handy with the jQuery, the PHP and the HTML, you can do a lot with the examples in the code. It’s very much a proof-of-concept, and intended to be a jumping point for more experimentation, so have at it.

The app currently uses the jQTouch library, but mostly for the CSS. It has very few dependencies on the API, so it should be a relatively trivial matter to switch to a different library. It does rely quite heavily on jQuery, though.

The main PHP/osascript calls are in functions.php. All functions are called using jQuery’s $.get function, which makes Ajax calls to the functions.php file in the background and receives updates on completion.

Have fun, hopefully my horrible waste of time will be someone else’s inspiration…

Main Screen

Applications Screen

iTunes controls

Download

Related posts:

1. PromptDown for iOS: Mobile Markdown Teleprompter
2. The Mac and iOS mind mapping app extravaganza
3. Look, I made you a Markdown teleprompter

Originally posted on BrettTerpstra.com at HomeControl: Local Mac control for iPhone

Evernote introduced Site Memory today, providing an easy way to help people clip to Evernote from your site while maintaining control over how your content appears and is attributed. While some instructions are provided for WordPress, some of us will obviously want to customize things a little further.

Brett Kelly posted a quick PHP script on the Evernote WordPress docs to include the first three tags from your post as suggested tags in the clipper. I wanted to weight these, though, so here’s my version…

<a href="javascript:void()" title="Clip to Evernote" class="evernoteclip" 
  onclick="Evernote.doClip({ title: '<?php the_title_attribute(); ?>',
    providerName: 'Brett Terpstra',
    url: '<?php the_permalink(); ?>',
    contentId: 'post-<?php the_ID(); ?>-clip',
    suggestTags: '<?php
    if (get_post_meta($post->ID, 'evernoteTags', true)) {
      echo get_post_meta($post->ID, 'evernoteTags', true);
    } else {
      $posttags = get_the_tags();
      $out = array();
      if ($posttags) {
        foreach($posttags as $tag) {
          $out[trim($tag->name)] = intval($tag->count); 
        }
        ksort($out,SORT_NUMERIC);
        echo implode(array_keys(array_slice($out, 0, 3)),',');
      }
    }?>'});return false;">
<img src="<?php bloginfo('template_url'); ?>/images/evernoteclipper.png" alt="Evernote Clipper Icon"/>
</a>

It first checks for a custom field called “evernoteTags,” so you can override the whole thing by specifying up to three tags in a custom field in the post editor. The tags should be separated by commas, spaces aren’t important: “tag1,tag2,tag3”, no quotes. Moving on…

The rest of the code grabs all of the tags for the post and their use counts on your site, sorts by the use count and outputs the tag names. Pretty simple.

I should also note that the JavaScript library for the clipper weighs in at 33k compressed, so it’s not a lightweight addition to your blog. I grabbed the online source, minified it and am serving it from a CDN, so the hit was minimized, but still there. I’m also loading the clipper image from my CDN, just to avoid the extra offsite hit. I may eventually attempt to lazy load the script only when the link is clicked, but this works for now.

Related posts:

1. Antique Safari Reader hack update with Evernote goodness
2. A better System Service for Evernote clipping — with MultiMarkdown
3. Taking the Markdown to Evernote service further

Originally posted on BrettTerpstra.com at Evernote Site Memory tagger for WordPress

I have most of the websites I work on set up with separate development (usually local¹) and production/deployment servers. It’s pretty easy to keep straight when I’m first designing a site, but going back later and making changes can cause some confusion with all the refreshing and dealing with caches and all. So I’ve been using a trick to make it clear which version I’m loading at any given time.

All of my local development sites are mapped to .dev addresses, e.g. brettterpstra.dev. I use php to scan the current SERVER_NAME variable for .dev and insert an unobtrusive div at the top of the content if it’s found. At the very top of the page (in the header file, assuming the site is modular), I insert this line:

<?php $dev = preg_match("/\.dev/",$_SERVER['SERVER_NAME']) ? true : false; ?>

As a side note for those not familiar with this syntax: it’s a ternary conditional operator, meaning that $dev is set to either true or false based on the result of the condition. The format here is [variable] = [condition] ? [evaluate true] : [evaluate false];. Think of the question mark as “if” and the colon as “else.” It’s just all on one nifty line.

Now we use the $dev variable to determine whether or not we’re inserting an extra element in the markup. Right after my body tag, I have this logic:

<?php if ($dev) {
    echo "<div id=\"development\">\n";
    echo "</div>\n";
} ?>

Yep, it just inserts a div if the $dev is true (SERVER_NAME contained .div). You can change the condition above to find whatever differentiates your development server from your production and/or deployment servers.

Lastly, I style the div with some CSS:

#development {
    position: fixed;
    bottom: 0;
    left: 0;
    background: transparent url(http://d33frhdcafae93.cloudfront.net/images/devsticker.png);
    text-indent: -99999px;
    width: 150px;
    height: 150px;
    z-index: 9999999;
}

That sticks a dogear image I made into the lower left corner of the site, in a fixed position that is always visible but rarely in the way (you’re welcome to steal the image, if you want it). It’s an easy trick, but I’ve found it saves me a lot of frustration when I get too obsessed with a minor detail to bother looking at the URL and realizing I’m not even refreshing the right version of the site. Maybe you never have that problem, in which case I applaud your level, collected personality. People like me, though, can always use a little extra help.

Related posts:

1. Evernote Site Memory tagger for WordPress
2. Watch for file changes and refresh your browser automatically
3. Thanks WWDC

Originally posted on BrettTerpstra.com at Visually differentiating your development site