I experimented with LogMeIn but really wanted to leave the web browser for browsing and remote control of a computer to a VNC client. Having previously setup my computers for VNC access / control on the local network, the changes for remote access were minimal. In short, setting up remote VNC access requires:

1. VNC server running on the host (home) computer
2. Your home router forwarding required ports to the host computer
3. Helpful: Easy to remember dynamic hostname instead of memorizing an IP
4. VNC viewer (client) for your remote computer or iPhone

I wanted to document the process here for Mac OS X 10.5+ users with along with some helpful screenshots for curious minds.

First, enable Screen Sharing on your Mac. Open System Preferences > Sharing and tick the ‘Screen Sharing’ option. In the screenshot above I’ve added the password requirement for controlling the screen (Computer Settings…).

In order to access your home computer remotely, you’ll need to forward the necessary ports appropriately. To do this, log into your Airport Extreme. Select Manual Setup. Inside the Advanced tab, select the Advanced tab then Port Mapping. Inside of this dialog, select the small ‘+’ (plus) button. The port mapping setup assistant will slide into view. Select Remote Login – SSH & Apple Remote Desktop. Each selection will automatically fill the correct ports. Select Continue after specifying each service.

You Port Mapping window should now look like the image above. Ensure that both checkboxes are checked then proceed to update the new settings to your router.

DynDNS to save you from remembering your IP

To keep the entire process of accessing your computer remotely easy, setup a free account at DynDNS (create account). Once the account has been properly setup, return to the main dashboard and look for My Services.

What you want to setup is a new Host Service > Dynamic DNS Hosts.

Select Add New Host on the following screen. DynDNS will request some basic info related to your home Mac.

The first field – Hostname – will be your "memorable" URL to access your computer remotely from outside of your home network (select from alternate domains using the dropdown). Select Service Type: Host with IP address. DynDNS can automatically fill-in your location IP address (click on the link). The rest of the settings can be ignored.

Chances are your location IP will change every so often (without you knowledge). Unless you’re paying your service provider for a static IP, you’ll want to install the DynDNS Updater (free). This handy daemon runs in the background and updates DynDNS with your current IP.

Connecting to your home Mac with a VNC client

Now that VNC is enabled on the home Mac, the appropriate ports forwarded and DynDNS setup, it’s time to connect remotely. The first option is to use a VNC client like Chicken of the VNC. The alternative (my preference) is to use the built-in VNC client provided by Apple as of 10.5 Leopard – the same client use for Back to my Mac. To access the client, go to Finder > Go > Connect to Server or CMD +K.

Upon successfully connecting, you will be prompted to enter the previously setup credentials to control your remote Mac. The beauty of Apple’s integrated VNC client is the fact that larger remote screens are automatically resized to fit. For MacBook / MacBook Pro users, the iMac or Apple Cinema display at home will be resized to fit (with the option to view at full resolution).

Do you use VNC? What method to you use to manage / control your computer at home?

A few days ago while working on a new UI component I had to come up with a solution to highlight identified keywords (using named entity recognition) inside of a chunk of user generated text. While the idea was fairly simple, the challenge was creating a solution which would work [relatively] well for all modern browsers including IE7, IE8, Firefox, Safari, and Chrome.

View Demo

Background

The easiest solution to highlight keywords inside of a chunk of text would be to swap font colors, maybe even change the "highlighted" background color and type weight for added emphasis. However, the easiest solution is not always the best solution. Relying on font color and weight alone is not enough.

• Images – Photos are full of color, bold, and attractive. Ignore these while toggling the text color of de-emphasized / emphasized content and a visitors eyes will still wander.
• Dynamic – Content may be user generated. Assuming basic HTML like <em>, <strong>, <a>, etc are supported, original styles should remain untouched.

The better solution would be to create a "mask" overlaying the source content while using a spotlight-esque effect to highlight keywords. The overlay method is a safer option which reduces the likelihood of overriding any user generated content [styles].

Example HTML

This demo is a simplified version of the original code – shared as an example for fading the source content and highlighting important keywords within. Originally planned for use where classes are dynamically generated and wrapped around identified keywords, I have manually inserted classes for the purpose of this demo. The basic example HTML is below (text sampled from the Avatar Wikipedia entry):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<div class="wrapper">
	<ul class="entity-results">
		<li><a class="d1" href="#">Summary</a></li>
		<li><a class="d2" href="#">Avatar</a></li>
		<li><a class="d3" href="#">Formats</a></li>
	</ul>
	<div class="content">
		<h2>Avatar (2009 film)</h2>
		<div class="entity-source">
			<img src="images/avatar.jpg" alt="Avatar poster"/>
			<p>Avatar, also known as James Cameron's Avatar, is an American 3-D science fiction epic film written and directed by <a href="http://en.wikipedia.org/wiki/James_Cameron">James Cameron</a>, and was released on December 16, 2009 by 20th Century Fox. The film is co-produced by <a href="http://en.wikipedia.org/wiki/Lightstorm_Entertainment">Lightstorm Entertainment</a>, and <span class="d1">focuses on an epic conflict on Pandora</span>, an inhabited Earth-sized moon of Polyphemus, one of three fictional gas giants orbiting <a href="http://en.wikipedia.org/wiki/Alpha_Centauri_A">Alpha Centauri A</a>. On Pandora, human colonists and the sentient humanoid indigenous inhabitants of Pandora, the Na'vi, engage in a war over the planet's resources and the latter's continued existence. The film's title refers to <span class="d2">an avatar, a representation of a real person in a virtual world</span>.</p>
			<p><span class="d3">The film was released in 2D and 3D formats</span>, along with an IMAX 3D release in selected theaters. The film is being touted as a breakthrough in terms of filmmaking technology, for its development of 3D viewing and stereoscopic filmmaking with cameras that were specially designed for the film's production.</p>
			<p>Read the rest of the <a href="http://en.wikipedia.org/wiki/Avatar_(2009_film)">original Wikipedia page about Avatar</a></p>
			<div class="mask"></div>
		</div>
	</div>
</div>

.entity-results is a sample list corresponding to select text inside of the .entity-source wrapper. Each <li><a></li> has a matching keyword phrase wrapped in the same class. Ideally these are dynamically included in the document. The "mask" is included inline as an empty <div> which can also be inserted using JavaScript.

Minimal CSS requirement

Using a few lines of CSS, overlay a mask above the content. The <span> around the keywords to highlight is crucial in order to pull the text out above the mask.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

.entity-source, .entity-source span.show {
	position: relative;
}
.entity-source .mask {
	display:none;
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	z-index:1;
}
.entity-source span {
	z-index:2;
}
.entity-source span.show {
	background:#ffc;
	color:#000;
}

Example jQuery

The example uses jQuery to handle the opacity changes and toggle of active / inactive states for detected keywords.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

jQuery(document).ready(function($) {
    // mask source
    var maskSource = jQuery('.mask');
    jQuery('.entity-results').hover(function() {
        maskSource.animate({opacity:0.7},1).fadeIn('750');
    }, function() {
        maskSource.fadeOut('1000');
    });
 
    // match hover
    var sample1 = jQuery('span.d1');
    var sample2 = jQuery('span.d2');
    var sample3 = jQuery('span.d3');
    jQuery('a.d1').hover(function() {
        sample1.addClass('show');
    }, function() {
        sample1.removeClass('show');
    });
    jQuery('a.d2').hover(function() {
        sample2.addClass('show');
    }, function() {
        sample2.removeClass('show');
    });
    jQuery('a.d3').hover(function() {
        sample3.addClass('show');
    }, function() {
        sample3.removeClass('show');
    });
});

When your mouse cursor hovers over a keyword in the right sidebar, the mask is set to display block with opacity handled by the jQuery .animate() effect. View the demo below or download the source.

View Demo

Understand the WordPress permalink

The first time you install WordPress, your site is setup with a few default settings. One of which is the generic nondescript permalink:

http://yourblog.com/?p=123

Ideally, one of the first changes you should make to your site after a clean install is to update the permalink structure to something a little friendlier:

http://yourblog.com/year/month/this-blog-post

To update your permalink settings navigate to Dashboard > Settings > Permalinks. Note that the Apache mod_rewrite module must be enabled on your server and .htaccess file must be writable. Irregardless of any changes you make to the permalink structure, your posts will always retain their original unique Post-ID. In the example above, the Post-ID would be 123.

With pretty permalinks enabled, you can still see this unique ID when you hover on the URLs inside of your Dashboard (check your browser status bar). In the above screenshot, you can see the unique ID at the end of the URL post=2071. This unique ID is what we will use to generate the shortened version of a page URL when Tweeting a page.

Maximize your 140 character limit on Twitter

Twitter enforces a 140 character limit. Do you really want a long URL eating up valuable characters? See this example if I were to share a link from IBoughtaMac:

http://iboughtamac.com/2009/04/02/busy-bees-making-money-with-on-the-job/

If I wanted to share the link via Twitter, I would only have 67 characters to add any of my thoughts regarding the post:

Imagine if the URL had been shortened to something like:

http://iboughtamac.com/s/1352

The shortened URL (just an example Post-ID) turns the previous 67 remaining characters into 111 characters of free space. You maintain your personal "brand" – something you lose when you shorten URLs using a service like TinyURL.

First step: Modify your .htaccess file

Even with a custom permalink enabled (what your visitors see), WordPress will continue to redirect any URLs which point to the default ?p=Post-ID properly. We’re going to use this to our advantage when sharing shortened URLs. Using an FTP client, open your .htaccess file. Invisible files are hidden by default for most FTP clients so adjust your view settings if necessary. If you have customized your permalink structure, you will already have one of these files on your server. If not, simply create one now. Enter the following somewhere near the top:

# Redirect posts based on post-id
RewriteEngine On 
RewriteRule ^s/([0-9]+)$ ?p=$1 [R=301,L]

This rule tells Apache to redirect URLs like http://blog.com/s/1 and http://blog.com/s/9999 to http://blog.com/?p=1 and http://blog.com/?p=9999. Of course, because your WordPress site will identify posts based on their unique ID, a visitor will immediately see that shortened URL redirect to the proper friendly version http://blog.com/2009/04/20/my-new-dog-named-pinocchio-from-europe.

Second step: Add your ‘Tweet This’ link

Where and when you present a ‘Tweet This’ link is up to you. The raw HTML + PHP is this little nugget:

<a class="share-via-twitter" href="http://twitter.com/home?status=Reading: <?php the_title(); ?> <?php echo get_option('home'); ?>/s/<?php the_ID(); ?>" title="Tweet this post">Tweet This</a>

With a little bit of CSS and Komodo Media’s awesome mini social icon set, you can transform the plain link to look like a button.

Extras: Non-Twitter social links

You’ll notice that these links do not make use of the shortened version of a URL. There really isn’t a reason to shorten your site URLs when sharing through these services because 140 characters maximum is not enforced.

Digg This

<a href="http://digg.com/submit?phase=2&url=<?php echo get_permalink() ?>&title=<?php the_title(); ?>" title="Digg this">Digg This</a>

Add to Delicious

<a href="http://del.icio.us/post?url=<?php echo get_permalink() ?>&title=<?php the_title(); ?>" title="Add this page to Delicious">Add to Delicious</a>

StumbleUpon

<a href="http://www.stumbleupon.com/submit?url=<?php echo get_permalink() ?>&title=<?php the_title(); ?>" title="Stumble this page">Stumble This</a>

Update: Achieve the same results without touching .htaccess

Dan Cameron whipped up his own implementation of the shortened URL trend for WordPress users. His method requires a snippet of code in functions.php to achieve the same results. Check out his write-up here: Short post URLs.

Update #2: More social links for your site

Lauren commented introducing even more social networking links to add to your website.

NuevaSync: Free Calendar + Contacts sync OTA for iPhone

Are you managing all of your events and contacts in the "cloud"? Not interesting in syncing your important data down to your machine to read, edit, and manage in iCal or Address Book? Check out NuevaSync.

NuevaSync allows direct, over-the-air, native synchronization of certain smart phones and PDA devices with public PIM, and calendaring services including Google Calendar. NuevaSync does not need any software installed on your device because it uses synchronization protocols that are already built in.

The beta service offers free OTA sync between your various Google Calendar & Gmail (Contacts) and iPhone or iPod Touch. NuevaSync can be setup and activated directly from your mobile device reaffirming the fact that a computer is not required. NuevaSync will not directly sync with your computer. NuevaSync is setup as a Microsoft Exchange server services. This beta service is intended strictly for syncing to your mobile device.

Google: Calendar + Contacts sync OTA for iPhone & Mac

Interested in pulling your Google Calendar + Contacts data down to your Mac for free? Apple recently released software updates (10.5) which support your Google account in both iCal and Address Book. Like Apple, Google has taken steps to properly document the steps to setup your software correctly.

Check Getting Started with CalDAV. The related software download can be found on Google Code: calaboration. The process is simple and [only] requires that you download the software, enter your Google username and password, and select the calendars to sync.

The requirement to sync your Google Gmail Contacts with Address Book is just as simple. Most of the details are posted in the Gmail + Address Book sync post a few days back. In short, open your Address Book Preferences and enable the ‘Synchronize with Google’ feature. Note the added convenience of creating a smart group which looks for updated contacts which makes it easier to track down recent sync changes.

In order to sync data to your iPhone, utilize the free beta service NuevaSync (above) or make a physical connection via USB.

Google Mobile: Free Contacts + Calendar sync

Google recently released its Google Sync Mobile service. Find out more details on the new over-the-air sync service on the official info page. iPhone users can enjoy free OTA syncing for contacts and calenders. Note that the initial sync will delete your contacts and events off the phone.

MobileMe: Paid for Calendar + Contacts sync OTA for iPhone & Mac

Weary trusting your Google Account data with a beta service? Your option for both Calendar and Contacts sync OTA between iPhone and Mac is MobileMe. While the annual subscription based service offers a handful of other "cloud" features, you can specify only Calendar and / or Contacts syncing.

Open System Preferences > MobileMe > Sync. Specify your sync interval – automatically, every day, every week, or manual – and uncheck any sync services that you do not plan on using.

If you have made any significant changes to either iCal or Address Book, or are running into sync conflicts caused by another computer, you can force a reset of your MobileMe data (server side). Towards the bottom of the MobileMe window, select the ‘Advanced…’ button, then ‘Reset Sync Data…’ on the next screen. From here you can force a reset of data either on a) your local computer, or b) data stored on MobileMe. Read the description and understand the action before proceeding.

BusySync: Paid for Calendar + Contacts sync with your Mac

One service that I’ve begun using is a paid for background application called BusySync.

With BusySync it’s incredibly easy to share iCal calendars with family or coworkers on your LAN without the need for a dedicated server. Shared calendars can be viewed and edited by multiple users, and changes are instantly published and synchronized with all users on the network. You can even make changes to shared calendars while offline and your changes will sync when you reconnect to the network.

Those that have tried the WebDAV based sync between Google Calendar and iCal can attest to the fact that the syncing is not creating a real calendar object in iCal. Meaning? You can setup your WebDAV sync using the Google calaboration tool which will place events in iCal. However, if you happen to be syncing your iCal events OTA to your iPhone with MobileMe, it will not sync any calendars originating from Google. The solution would be to use NuevaSync to supplement your non-MobileMe sync.

Summary

• For users interested in a full suite of "cloud" services like photo / video gallery sharing, easy web publishing, and file storage – without the need to administrate a real web server – in addition to OTA sync with their iPhone, check out MobileMe.
• Check out the full Google Mobile service for syncing contacts / calendars OTA.
• Are you using Google and an iPhone? Want OTA sync? Check out the free beta service NuevaSync.
• Looking for a free solution to sync your Google data with your iPhone and Mac? Make use of WebDAV and Address Book synchronization.
• Try BusySync if you just want Calendar and Contacts sync without worrying about a beta service or paying the MobileMe annual subscription.

Getting started with Amazon S3

Getting started with Amazon S3 is simple and takes no more than a few minutes. Once registered and confirmed, access to your account can be achieved using your account identifiers and an S3 client like S3Fox, S3Hub, or Transmit.

Want an estimate based on the amount of data, bandwidth, or requests you expect to offload to Amazon S3? Check out the AWS Simple Monthly Calculator.

Your files and the Amazon S3 URL structure

Managing your files on Amazon S3 is not much different from managing files on your own server via FTP. Users need to understand that Amazon uses "buckets" as the top level for your objects. This means that you can separate your different file hosting needs using different buckets. For this introduction to S3 file hosting, we’ll use the example website your-site.com.

The average user may sign up for Amazon S3 hosting and begin uploading files – accepting the default URL structure for hosted files:

http://s3.amazonaws.com/your-bucket/some-file.txt

If you plan on using S3 to host media files – more specifically Flash files – you’ll run into Adobe’s cross domain security policy. The fix requires mapping your hosted S3 files to look as though they are being served from your own domain – virtual hosting. The easiest and most attractive method would be a hosted file URL that like this:

http://s3.your-site.com/some-file.txt

To get started, create a bucket on S3 that you want as the root for your hosted files. For this example, your S3 bucket would be:

s3.your-site.com

The most important step is adding the appropriate CNAME record to your DNS settings.

Expect your new DNS settings to take up to 24-48 hours to resolve.

Fixing Transmit’s "Copy URL"

The right-click menu for Panic’s Transmit will grab the default Amazon S3 URL path at your-bucket-name.amazonaws.com. To ensure that the path reflects your new subdomain correctly, you will need to edit your S3 connection settings. More specifically, the expected Root URL:

http://s3.your-site.com/

These settings assume that you have a single custom bucket to reflect your S3 hosted files CNAME record.

Amazon S3 file hosting integrated with WordPress

Looking for an even more integrated S3 file hosting with your WordPress install? Check out the Amazon S3 plugin for WordPress. Installation is straightforward. The only requirement aside from an S3 account is that your server be PHP5 enabled.

The S3 WordPress plugin will support the previously configured virtual host s3.your-site.com/some-file.txt and provide direct upload from the post editor window.

Other Amazon S3 bits

To supplement my Time Machine and external SuperDuper backups, I rely on Jungle Disk to do the same in the cloud – the S3 cloud. I enjoy the convenience and peace of mind knowing that my data is safe and easily accessible. That same convenience can be extended to file hosting.

• S3Hub – View your S3 online storage, upload, download, set permissions, share with friends and more. Also use to view other users’ public buckets.
• S3Fox Organizer – Manage your S3 buckets using this handy Firefox extension.
• Shrub – Shrub lists files in public S3 buckets. For when you want to share a bucket with the world.
• Tutorial: How-to make files public – A walk through if you are not all ready familiar with the world, authenticated users, and owners permissions.
• FuseOverAmazon – FUSE based file system backups powered by Amazon S3.
• Getting started with Amazon CloudFront – Paul walks through the steps to get started delivering content via Amazon CloudFront.

Are you using Amazon S3? If so, how? Personal backups, file sharing, development?

The general consensus or recommendation is for users to either a) invest some time into learning the underlying architecture of WordPress in order to create or modify a theme, or b) invest some money for a one-off custom theme. The latter may not sound too appealing for the beginner or casual blogger, so modifying an existing theme like Grid Focus or October Special might be a good place to start.

How can I create a blog without the typical blog layout?

A typical blog landing page is comprised of noticeably sized chunks of text differentiated by a catchy titles and [possibly] a few inline images.

The typical two-column blog layout works but is used so often that new visitors may slowly blur the lines differentiating your blog from the previous. Sure, you could brighten the page with a few inline post images, but why not step it up a little with WordPress Custom Fields.

What are WordPress Custom Fields?

A WordPress post is comprised of the following:

• Title
• Content – text & images
• Categories
• Tags (if you’re running WordPress 2.3+)

Think of WordPress Custom Fields as extra "containers" of data that can be associated with a post – content that can be called and used within The Loop.

Custom post title with lead graphic background

The first step to setting yourself apart from the rest of the typical title + content blogs is a little style. Adding a photo or image behind a posts title can help to lure a reader into viewing the main excerpt / permalink of your post.

You can achieve a similar effect using WordPress Custom Fields.

First, create the image / photo that you want to use. For the example above, I create a photo of Boo, our Mini Rat Terrier, titled boo-lead-title.gif. Upload the image to your server and save the URI. If you would like the image and post title to span the entire width of your main content column, you’ll want to create a lead image with a width to match that of your main column. In the standard K2 theme included with WordPress, that width is 450px.

Second, compose a new post. Before saving, scroll towards the bottom of the editor pane and add a new Custom Field in the ‘Key’ field. In the example, I created a Custom Field titled lead_image. Paste the previously saved URI in the ‘Value’ field. Save the post – do not publish yet.

Third, open the index.php file in your themes directory and find the line beginning with <?php if (have_posts()) : ?>. If you are using the default theme, the area of the file we will be editing can be found below:

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<div class="entry">
<?php the_content('Read the rest of this entry'); ?>
</div>
<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?></p>
</div>
<?php endwhile; ?>

Having previously created a Custom Field called lead_image, we can now call that image from within The Loop. Changes to the above code are in bold below:

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<div class="lead-image-wrapper">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<?php $image = get_post_meta($post->ID, "lead_image", true); ?>
<img src="<?php echo $image; ?>" />
</div>
<div class="entry">
<?php the_content('Read the rest of this entry'); ?>
</div>
<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', ', ' | '); ?> <?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?></p>
</div>
<?php endwhile; ?>

Notice that both the php function and post title are wrapped by a new div with a class lead-image-wrapper. Also notice that the title h2 is loaded before the image.

Fourth, add the following to your style.css.

.lead-image-wrapper { background: #000; position: relative; }
.lead-image-wrapper h2 { font-size: 28px; line-height: 30px; position: absolute; top: 90px; left: 12px; z-index: 1; }
.lead-image-wrapper h2 a { color: #fff; text-decoration: none; }
.lead-image-wrapper img { height: xxxpx; width: xxxpx; }

In order to ensure that the styles are applied, you can either a) remove any previous styles associated with the h2 tags loaded on the index page, or b) place the code at the bottom of the stylesheet overriding any previous code – Cascading Style Sheets.

• A background color is specified for .lead-image-wrapper in case your image fails to load. Because the title link is white, you want to ensure that the parent element has a background color for readability.
• The title link is positioned absolute relative to the parent element .lead-image-wrapper. Adjust the positioning accordingly for your image.
• Always set a height or width for images – make .lead-image-wrapper img match the dimensions of the lead_image you have uploaded.

Fifth, experiment, experiment, experiment. Part of the learning process is learning by trial and error. Feel free to use the comments for help or feedback.

DRM-free tracks from EMI will be offered at higher quality 256 kbps AAC encoding, resulting in audio quality indistinguishable from the original recording, for just $1.29 per song. In addition, iTunes customers will be able to easily upgrade their entire library of all previously purchased EMI content to the higher quality DRM-free versions for just 30 cents a song. iTunes will continue to offer its entire catalog, currently over five million songs, in the same versions as today—128 kbps AAC encoding with DRM—at the same price of 99 cents per song, alongside DRM-free higher quality versions when available.

Great. So Apple now offers DRM-free tracks from EMI as well as an option to upgrade existing DRM locked songs to their DRM-free variant for $1.29 or $0.30 respectively. Want to find out which songs are offered as DRM-free purchases? Open the iTunes Music Store and navigate through iTunes Plus. Here you may find some of the songs you are looking for. You may also come to realize that songs you may want to download DRM-free are not available.

So what options do you have if the song you wish to purchase is not available? While you can always ask uncle Bittorrent, possible run-ins with your ISP and the law may not sound all too enticing. The safest – and legal – route would be to purchase the songs through the iTunes Music Store. Personally, the rule that would allow an individual to authorize a track for playback on up to 5 machines is something I find acceptable for a digital medium which I purchased. Furthermore, I hate the fact that if I am signed out of the iTunes Music Store, I need to continue to keep a machine authorized or enter my Apple ID & password in order to listen to a song.

Remove DRM protection using iTunes + CD-R/W

Probably the most widely accepted method for stripping purchased songs of DRM protection is burning tracks to a CD-R/W then re-importing back into the iTunes library. A method guaranteed to free you of DRM madness.

• Create an iTunes playlist containing your purchased songs.
• Insert a blank CD-R or a CD-RW.
• Burn the playlist to disk.
• Re-import the songs after a successful burn.
• Deleting the original purchased tracks.

At one point, DRM Dumpster was a free solution which automated the process of locating purchased tracks burning them to disk and re-importing without any user intervention. Currently the software is provided as-is for $25. No thank you. I would much rather do the above steps myself or, make use of Apple’s own iMovie HD to do the same. Albeit at a slower rate BUT without the need for an actual CD-R or CD-RW.

Remove iTunes Music Store DRM with Apple software in Leopard

The current iteration of iMovie released with the iLife ’08 software bundle is iMovie 7.1. However, in order to remove DRM protection, you will need iMovie HD – previously bundled with iLife ’06. For those – like me – who received iLife ’08 bundled with Mac OS X Leopard, iMovie HD is a separate application download. Once downloaded and installed, start iMovie HD and ‘Create a New Project’ titled "DRM-free". Save the project to your Desktop.

In the iMovie window, select the ‘Media’ tab located between ‘Themes’ and ‘Editing’. You will notice that the top right portion of the interface now offers a media browser. Select the ‘Audio’ tab and locate the playlist which contains purchased music, or search by artist / title.

Select the DRM-laden song and drag the file from the media browser into the iMovie timeline where it says "Drag audio here to build your project."

In order to export the song, iMovie requires that a visual image be associated with the audio track – iMovie thinks that it is going to be exporting a movie. Simply drag a blank image (or any other image) to the track above the previously imported audio file. Once iMovie has processed the image, select the ‘Share…’ sub menu item from found inside ‘Share’ in iMovie’s menu bar.

Ensure that ‘Expert Settings’ is selected in the "Compress movie for:" drop-down menu. Selecting ‘Expert Settings’ mode will provide the options to export the file as an audio file. Select the ‘Share’ button.

In the Save as… dialogue, select "Sound to AIFF" in the Export drop-down menu, Choose an appropriate directory for iMovie to export to, title the file, and select ‘Save’. Depending on your machine configuration, iMovie will compress and export the movie project as an audio file in 15-40 seconds.

Locate the exported AIFF audio file and drag to your iTunes Library. Right-click on the file and select "Convert Selection to AAC". Once completed, ‘Get Info’ on the new file, edit meta data, add album art, and trash the originally purchased and AIFF audio files from your iTunes library.

DRM-free iTunes Music Store purchases without wasting resources

The above steps may be far more tedious than simply burning to disk and re-importing. However, the process can be further simplified by creating an Automator action to replay the steps above. I think the upside of not having to waste actual media (CD-R or CD-RW) in order to burn and re-import songs is well worth the tedious process.

Side banter and miscellaneous notes

* If anyone is a paying subscriber, please feel free to comment with your thoughts on whether or not Sirius is a service worth paying for. I am currently making use of a 3 month limited trial in my Volkswagen R32 which only offers a few genre presets.

iMovie export of DRM protected files inspired by Seidai Software’s FairGame [which did not operate correctly under Mac OS X 10.5 Leopard].

Get the Best Software for your Computer

Looking for the best types of software for your Mac? There’s all kinds of free software available on the net if you know where to look. From essentials like free CD burning software to the more obscure astrology software there is sure to be the program for you!

After installing the Firefox-only Better Gmail extension, you’ll discover a handful of configurable options – one of which is the "Allow HTML in Signature" option under Gmail > Settings. Once the option is selected, you now have free reign as far as HTML signatures are concerned.

Getting started with your basic HTML signature

Before embarking on the task of creating an HTML signature appropriate for your own needs, take some time to read through David Greiner’s A Guide to CSS Support in Email. Although the goal for this tutorial is not as robust as a full blown CSS / HTML announcement email, the tables which outline what email clients support what rules is of significant value (well worth bookmarking).

Creating a single line signature + graphic

In order to show how easy it is to create an HTML signature using the web version of Gmail + Better Gmail extension, we’ll create a single line signature which includes 1) an avatar / favicon, 2) your name, 3) contact info, and 4) a URL (website, blog, etc.).

Unfortunately, due to some email client incompatibilities, the best way to create an HTML signature similar to that found in the image above is with the use of an HTML table.

<table style="font-size:11px;color:#555;border-collapse:collapse;">
<tr>
<td><img src="http://5thirtyone.com/5.gif" alt="531" /></td>
<td>Your Name //</td>
<td>123-456-7890 (mobile) //</td>
<td><a href="http://your.url.com"> your.url.com</a></td>
</tr>
</table>

Important: Notice the inline CSS? Inline styling for the form element allows us to resize and customize the color of the font. It is also very important not to neglect the <img alt="" which is displayed by default when a recipients mail client blocks images from emails.

Use your HTML signatures wisely

Keep in mind that most, if not all, free email services will – by default – remove external images from emails. That is why the aforementioned alt="" is important in order for recipients to know what they may be missing. Don’t overload your HTML signatures with too much fluff. Keep it simple and light; your contacts will thank you. [Hosted Exchange Hosting]

Firefox bookmarks bar [screenshot] with various bookmarklets for resizing & repositioning the browser window

On a fairly regular basis, I find myself resizing & repositioning the browser window in order to "work happy". Be it general web browsing, web development, or multi-tasking, the browser window and position has a noticeable impact on what I’m doing. Being fairly detail oriented, I prefer resizing & positioning the browser window – in relation to other application windows – to specific pixel coordinates. At one point, I was using a special wallpaper [grid] which helped line elements up to their respective coordinates.

Realizing that the task of resizing & repositioning the browser window could be simplified using JavaScript browser bookmarklets, I created and added similar snippets to accommodate my needs on a 2560×1600 resolution screen:

javascript:self.resizeTo(1280,screen.availHeight);self.moveTo(640,0);

The above will resize the browser window horizontally to 1280px, and vertically to the constraints of the work area. If the dock is hidden (OS X), the browser height would be 1600px. If the dock is visible, the vertical height would be y minus the height of the dock.

javascript:self.resizeTo(1024,screen.availHeight);self.moveTo(768,0);

Alternatively, in order to center a browser window with a max width of 1024, the above snippet would do the trick. The general math to calculate the x,y coordinates for self.moveTo(x,y) can be gathered with the following:

• Decide on the max-width of the browser window – 1024
• Divide the horizontal resolution of your screen by 2 – 2560px / 2 = 1280
• Divide your anticipated browser width by 2 and subtract this figure from the centerline – 1280-(1024/2)=768

Using 1024 as the max-width for the browser window on a 2560×1600 resolution screen, the coordinates to center the browser window would be self.moveTo(768,0);. Confused? That’s OK. Right-click on any of the links below for your respective screen resolution and select "Bookmark this link". Saving the links to your browser bookmarks bar will provide you with quick access to resize and center your browser window.

• 1024 resolution: 800
• 1280 resolution: 800, 1024
• 1440 resolution: 800, 1024, 1280
• 1680 resolution: 800, 1024, 1280, 1440
• 1920 resolution: 800, 1024, 1280, 1440
• 2560 resolution: 800, 1024, 1280, 1440

Note that in order for the above browser bookmarklets to work, you will need to make sure that JavaScript browser window resizing is not disabled in your browser preferences.

Double-check to make sure that your browser settings do not disable JavaScript browser window resizing

What other browser bookmarklets do you use on a regular basis? Add your recommendations in the comments so that others might benefit as well.

Get the Best Software for your Computer

Looking for the best software on the web? Sometimes it can be tough to find things like landscape software, while other programs like music software seem to be everywhere. Thankfully the internet is full of all types of software, so there’s sure to be something for everyone.

Anyone who inserts contextual advertisements into their pages – like Google Adsense – are aware of the fact that some readers block advertisements. Oftentimes, methods for removing advertisements from view alter the structure of a page, in turn, changing the layout. For some websites or blogs, this does not pose a problem. For websites created to present both content and advertisements in harmony, removing ad elements may have a negative impact on a pages layout.

Ultimately, the author controls layout

Contrary to what some readers [would like to] believe, the author ultimately controls how content is displayed on a site. The author also reserves the right to present advertisements [hopefully, in a tasteful manner]. The argument for both sides of the fence is lengthy and one which this post does not address. What we will address is the use of simple HTML/CSS to designate advertisement elements. Areas of a page which do not collapse are disappear from view using rudimentary adblocking tools like Firefox’s Adblock extension.

Prevent the adblock "shift"

When users remove standard advertisement scripts from view, the ad element collapses moving surrounding elements. In order to control the layout of a page from shifting, I wrap the ad script with a div which I then apply a fixed width & height to using CSS. I also add a "title" to the div to let readers with adblocking enabled know what is missing.

The corresponding HTML for a 468×60 text link Google Banner might look like:

<div id="adsense_468">
<p id="adtitle">Advertisement</p>
<center>...INSERT ADSENSE CODE...</center>
</div>

With a few lines of CSS, add a fixed width & height to the #adsense_468. Similar to the advertisement presentation for the Grid Focus, we’ll also add a 1px border and use position: absolute; to move the title to the top right corner.

#adsense_468 { width: 495px; height: 70px; border: 1px solid #BBB; padding-top: 5px; position: relative; }
#adsense_468 #adtitle { font-size: 11px; position: absolute; display: block; background: #FFF; padding:0 3px; top: -8px; right: 12px; }

The question now is, who out there is adblocking? Come clean!

Take Care of your Hosting Issues

Worried that you are paying to much for your hosting? Get the best website hosting available. They can also take care of your domain registration needs, making it easier than ever to host a site without breaking the bank.