Paul Armstrong Designs Entries

New Watermelon Sauce Identity & Site

donotreply@paularmstrongdesigns.com ( ) — Mon, 14 Sep 2009 14:18:07 -0500

Watermelon Sauce is a collaboration of two experienced professionals, myself and Zachary Johnson. We spent almost 2 years on our original identity, but always felt like we needed something that more fit both Watermelon and Sauce. With that, we have our new logo and new Watermelon Sauce website.

The new site also features a single-page design powered by deep-linkable JavaScript. This isn't your mom's old 1999 Flash website, folks. This is a state-of-the-art HTML, CSS, and JavaScript machine.

Watermelon Sauce

donotreply@paularmstrongdesigns.com (Paul Armstrong) — Mon, 14 Sep 2009 00:14:24 -0500

Branding, Identity and Website design for a partner company.

Timelapse Design of Paulasaurus Rex

donotreply@paularmstrongdesigns.com ( ) — Mon, 17 Aug 2009 03:31:40 -0500

My personal blog was left dormant for almost 3 years, so I decided it was time to redesign and reinvent it a bit. I set up an Automator script on my computer and had it take a screenshot every 10 seconds while I worked, in 60 minute intervals.

I also made this my first personal site that was fully built in CakePHP, so I'm pretty excited about having it a lot easier to manage the entire site from a single administration system. Hopefully I'll be transitioning this site over some time soon…

A word of warning: On Paulasaurus Rex, I mostly post crazy doodles and fictional stories based on real events. Please be warned that the site’s content may be to the extreme at times and does not necessarily reflect any of my personal or professional opinions.

Quick Helper Code Snippets

donotreply@paularmstrongdesigns.com ( ) — Wed, 12 Aug 2009 15:58:53 -0500

Chris Coiyer over at CSS-Tricks put out a call for helpful snippets just a few days ago. I submitted a few to him and realized that I never really get around to posting them here. What a jerk I am for not sharing! How about some love? Sure thing…

CSS Clear Fix

I really hate using extraneous markup like <div class="clear"><> to clear floats. So how about a class you could apply to the parent element of floated elements to force it to self-clear the floats?

.clearafter {
    height: 1%;
}
    .clearafter:after {
        content: '.';
        display: block;
        clear: both;
        height: 0;
        width: 0;
        overflow: hidden;
        visibility: hidden;
    }

Jeff Starr explains another way of accomplishing the same task. This was also posted to CSS-Tricks under “CSS Clear Fix”.

Automatically Append a Class to File Downloads

Visual cues for file downloads are helpful for your site’s visitors to quickly recognize files they can download and what format they’re in.

Assume we have the following image with three file-type icons for Word documents, Excel spreadsheets, and PDF documents. Using CSS, we can target class names on an element to apply the correct piece of a single sprite to the element. If you’re unfamiliar with this concept, read up on using sprites before moving on.
Here’s our image:

.file {
    padding-left: 16px;
    background: url(images/icon-sprites.gif) 0 0 no-repeat;
}
    .file.doc { background-position: 0 0; }
    .file.xls { background-position: 0 -16px; }
    .file.pdf { background-position: 0 -32px; }

This works well, but how about automating adding these classes? Easy. Assuming you’re using jQuery, just add this snippet after you’re DOM is ready:

$('a[href]').each(function() {
   if((C = $(this).attr('href').match(/[.](doc|xls|pdf)$/))) {
       $(this).addClass('file').addClass(C[1]);
   }
});

This was also posted to CSS-Tricks as “Use jQuery to auto discover links to files and apply a class”.

Automatically Force New Windows on External Sites

Since the target attribute for links has been deprecated, I wanted a new and unobtrusive way to force links to different sites to open in a new window. This quick jQuery snippet will do just that.

$('a').each(function() {
   var a = new RegExp('/' + window.location.host + '/');
   if(!a.test(this.href)) {
       $(this).click(function(event) {
           event.preventDefault();
           event.stopPropagation();
           window.open(this.href, '_blank');
       });
   }
});

This was also posted to CSS-Tricks as “Use jQuery to automatically open links to different sites in a new window”.

Prevent Superscripts and Subscripts From Affecting Line-Heights

Superscript (<sup>) and Subscript (<sub>) elements break line heights in HTML because of their vertical-align properties. This quick CSS snippet will fix that for you. For more information, please read my original post.

sup, sub {
   vertical-align: baseline;
   position: relative;
   top: -0.4em;
}
sub { top: 0.4em; }

This was also posted to CSS-Trkcs as “Prevent superscripts and line-heights from affecting line-heights”.

Thanks for the Birthday Tweets!

donotreply@paularmstrongdesigns.com ( ) — Mon, 20 Jul 2009 19:28:02 -0500

So, I realized that today is my birthday. I’m not normally one to share personal stuff, but maybe it’s time to switch things up a bit. So, I posted this to twitter to see the reactions:

It’s my birthday, I guess. —@paularmstrong

Some awesome people responded. I highly recommend that you all check them out, because they’re awesome.

Happy birthday then. —@skwiot

Happy Birthday! —@hekainteractive

Happy birthday, man! —@ShawnJGoff

happy birthday to you, happy birthday to you... happy birthday dear paul armstronggggg happy birthday to youuuuu!!!!!!!!! :D —@creativestable

I’d just like to note that creativestable is now my favorite person, just because she sang a tweet to me.

Well then, happy birthday, I guess —@pennig

Happy Birfday. —@zacharyjohnson

Happy birthday! Gonna have a party? —@whitewaffle

Happy birthday man. Have a good one! —@tomstanoch

god we’re old. —@chrisrandel

happy birthday! Argh! If I would have known I would have gotten you a cake while you were here! —@jmullan

I spent this past weekend in San Francisco with Jesse (@jmullan) and Matt (@pennig) and it was a blast—a great way to kick off birthday week.

In other news, I’ve got some more projects and updates in the works for your enjoyment, so check back soon!’

Your Address and Required Fields in Web Forms

donotreply@paularmstrongdesigns.com ( ) — Fri, 17 Jul 2009 14:54:47 -0500

It’s pretty uncommon for any site not to have some sort of contact form these days. But lately, I’ve been noticing more and more sites (and clients) having fields for address, city, state, postal code, etc. The curious part is that most of the time, they aren't required—or maybe the more disturbing part is that they are required.

So let’s take a poll. The spreadsheet of results will be cleaned of addresses and published in the near future for everyone to see.

Recap: The Together Show @ Umber Studios

donotreply@paularmstrongdesigns.com ( ) — Wed, 01 Jul 2009 01:04:07 -0500

Recently, I mentioned that I would have some art up at "The Together Show at Umber Studios". I figured that it my duty to update you all on the happenings. This reception was held on June 20^th, 2009 and will run through July 12^th, so stop by if you’re in Minneapolis! How about some sights from the show?

Okay, here goes…

The front door of Umber is always welcome.

This is some of my work. A series of doodles in the middle running vertically.

Yes, sometimes I am an art nerd.

This was yet another great opening put on by Umber Studios. If you’re in Minneapolis and like art, you best stop by!

WebSlide — Slideshows for Designers and Clients Alike

donotreply@paularmstrongdesigns.com ( ) — Thu, 25 Jun 2009 12:31:14 -0500

I’ve always found that sending creative mockups for web sites and slideshows to clients is a huge pain. Most people settle for bundling up a PDF and emailing it over to their client. This is absolutely not an acceptable practice. Instead, I’d like to propose a solution: WebSlide.

The Problem

PDFs of design mockups are often poorly scaled, pixelated, and create more confusion than they’re worth (unless we’re talking about logo & print design). Often times, designers will even include an image of a browser wrapped around their mockups.

What? Seriously? Stop it!

And what about sending an email with images as an attachment? Again, this isn’t showing designs for a web site in its natural environment. Why can’t we just show our clients how it will look in their own browser?

The Solution

Why not have an environment that can display your mockups from within the actual intended medium?

Enter WebSlide, a jQuery-based, user-configurable, and user-themeable application that has no server requirements (other than it being a web server, of course).

View the WebSlide Demo

Features

Display images as slides in your browser
No server-side requirements
User-configurable
Create custom themes with CSS
Keyboard navigation
Zoom images in & out
Optional password protection
And more!

Okay, now that you definitely want it, hop over to the WebSlide project page and download WebSlide!

Download WebSlide

View the Documentation

WebSlide

donotreply@paularmstrongdesigns.com (Paul Armstrong) — Thu, 25 Jun 2009 00:15:11 -0500

An in-browser JavaScript slideshow application for viewing site design mockups and photos.

The Together Show @ Umber Studios

donotreply@paularmstrongdesigns.com ( ) — Wed, 17 Jun 2009 14:55:22 -0500

Hey! This weekend is Umber Studios' 2^nd birthday. I'll have a few pieces up as well as many other talented artists and great friends. Stop by, say hi, enjoy great art and great people.

for the second anniversary of umber studios, the TOGETHER show celebrates two years of brilliant umber artists. every artist who has shown at umber returns to the space to show new work and celebrate the gallery they helped to create. to all who have made the gallery what it is today...

What: The Together Show
When: 8pm Saturday, June 20th, 2009; (June 20th - July 12th)
Where: Umber Studios; 3109 East 42nd St, Minneapolis, MN 55407

Artists in Show

Aaron Bickner
Allen Brewer
Amy Aaron
Andy Ducett
Ben Garthus
Dc Ice
Doug Beasley
Jake Keeler
Janell Vircks
J.a. Olson
Jessica Helvey
Jesse Mullan
Joshua Norton
Juri Loginov
Keegan Wenkman
Laura Hallen
Marq Spusta
Michael Joseph Winslow
Noah Norton
Pamela Valfer
Paul Armstrong
Peter Skwiot Smith
Phil Behrend
Rebecca Sullivan
Roger Barrett
Ruben Nusz
Russell Joslin
Sarah Christianson
Steve Krause
Steven Anthony
Terrence Payne
Tim Dieterle
Todd Bratrud
Torey Bonar
Tucker Gerrick
Zachary Johnson

Presentation: It's the Little Things

donotreply@paularmstrongdesigns.com ( ) — Mon, 06 Apr 2009 11:44:20 -0500

This morning's presentation was a success. I had a great time presenting and am now enjoying the rest of the presentations throughout the day. As I promised, I've put my slideshow up on Slideshare for everyone to view. Notes and links are available on the Slideshare site.

More to come later. Good luck to the rest of the presenters!

Meet Me at MinneWebCon '09

donotreply@paularmstrongdesigns.com ( ) — Mon, 30 Mar 2009 12:43:27 -0500

I’ll be speaking at the second MinneWebCon at the University of Minnesota next Monday, April 6th, 2009. There's a great lineup of speakers focusing on a range of topics, from user experience design, to social media privacy, to site security and hacker tricks. I attended MinneWebCon ’08 and had a blast. I'm more excited this year to have the honor of presenting a session entitled “It’s the Little Things”.

My Session: It’s the Little Things

User Interaction: it's the little things that are a website’s best assets for gaining a positive and memorable user experience. This presentation will focus on trends and best practices in design and development conventions for user controls and how they affect the user experience—negatively or positively. Through the course of the session, we will discover various problems affecting smooth user interaction. Then I will identify ways to enhance controls and layouts in order to both speed up required user tasks and make them easier to use.

There is limited space for attendees at MinneWebCon, so register today before it fills up. I hope to see you all there!

Sub-Pixel Text Position in Photoshop

donotreply@paularmstrongdesigns.com ( ) — Fri, 20 Mar 2009 10:52:25 -0500

This is my biggest peeve in when trying to design a web site using Photoshop: text objects can't be forced to whole pixels. They always seem to render their start point from a sub-pixel location. In the following image, you can see two separate text objects that I created, each with the exact same text, but each is rendered slightly different because of its sub-pixel starting location.

Is there any way to fix this? I've been searching the web and looking through everything I can think of in Photoshop, but not finding an option like snapping shapes to pixels. Not that I have any intention of switching, but does Fireworks behave the same way?

Fun with JavaScript: Verde 7

donotreply@paularmstrongdesigns.com ( ) — Thu, 12 Mar 2009 15:37:30 -0500

In honor of St. Patrick's Day, Azul 7 (my day job—check us out) has become Verde 7 to celebrate the occasion. Using jQuery and a whole lot of Irish luck, I helped create a parallax scrolling world full of charms and wishes that you can add to or share with your friends for this upcoming St. Patty's Day.

I am in the middle of writing another post for the Azul 7 Blog about some of the tech behind it and I'll be sure to update you all when it's live.

Beginning baseJS: Selectors & Events

donotreply@paularmstrongdesigns.com ( ) — Tue, 10 Mar 2009 08:43:27 -0500

This is the first of a series of posts related to learning and understanding baseJS: the mobile javascript framework. These posts are intended for anyone familiar with JavaScript who wants to start learning about baseJS and how it can help them develop webapps for the iPhone. In this post, we'll look at Element Selectors and Event Listeners.

Element Selectors

At its core, baseJS focuses on using the Selectors API as its primary method of getting elements from the DOM. If the Selectors API is not available, like in pre iPhone 2.0 frameworks, baseJS preloads the Sizzle selector engine before it will respond with the dom:loaded event that we will look over near the end of this post.

What does all of that mean? It means that you can use simple or complex CSS selectors to grab elements as NodeList. Take the following HTML as a section of code in our web page:

<div class="foo">This is an element with class 'foo'</div>
<p class="foo">And another element with class 'foo'</p>

A simple CSS class selector will do for grabbing all elements with class foo:

var foos = $('.foo');

We’ve now selected every element with class foo and stored them into a NodeList called foos. Note that a NodeList is basically an Array, thought it has one extra method called item().

You can now grab a specific element in the NodeList in two different ways. In this example, both methods return the first element that matches the class foo

var arraySelect = foos[0]; 
var itemSelect = foos.item(0);

From this point, you are able to modify your first element with the class foo as you please. For instance, the following removeClass() method is available in the baseJS API to remove a specific class from an element:

arraySelect.removeClass('foo');

Event Listeners

Event listeners are registered by using the built in DOM method on elements called addEventListener. The reason most frameworks have custom event listeners is because they need to support Internet Explorer’s proprietary method called attachEvent. Since we're not worried about IE, we can just jump on the built-in methods.

Example

Let’s assume that we have the following HTML and we want to intercept every click on it and alert the innerHTML of the link. I know, it’s impractical and you’d probably never do it, but it’s a nice “Hello World” example.

<a id="myLink" href="http://google.com">This is My Link</a>

Since this element has an id myLink, that would be the easiest selector for us to use to guarantee that we're getting the correct HTML element. Using the Element Selector $(), we can store the element into a variable like this:

var myLink = $('a#myLink').item(0);

Notice that I used the .item(0) method to select the first (and only) result that was sent back to the NodeList. baseJS is not like jQuery in the sense that everything is wrapped in the $ core method. So, now that we have our element, we can add an event listener to it, stop the event, and alert the innerHTML of the element.

First, let's review the addEventListener method:

element.addEventListener(type, listener, useCapture);

type: String; The type of event to listen for. One of 'click', 'mouseover', etc.
listener: Object or Function; The callback object or function that will receive the event. We’ll use a function.
useCapture: Boolean; Always set this to true to initiate capturing the event.

So, let’s put the element selector and event listener into context:

var myLink = $('a#myLink').item(0);
myLink.addEventListener('click', function(event) {
    event.stop(); // this stops the original HTML event from progressing (the href won't change the page)

    alert(event.target.innerHTML);
}, true); // always set useCapture to true because we DO want to capture the event

Now, this will work, assuming the page is loaded and the DOM is ready. If we aren't sure and we're firing this JavaScript right as the page loads, it's best to wrap this in a function that will be fired only after the DOM is loaded and ready.

We can do this by simply adding a wrapper function around the previous code that we'll call initialize() and setting up another event listener on the document and check for baseJS’s dom:loaded event before running the function:

baseJS fires a custom dom:loaded event after the DOM is done loading and it has loaded the Sizzle selector engine if it needs to.

function initialize() {
    var myLink = $('a#myLink').item(0);
    myLink.addEventListener('click', function(event) {
        event.stop();

        alert(event.innerHTML);
    }, true);
}

document.addEventListener('dom:loaded', initialize, true);

Wrapping Up

That's it for this beginning introduction to selectors and events in baseJS. If you haven't checked it out yet, head on over to the baseJS project page. If you'd like to know more, check out the baseJS API documentation and stay tuned for more posts.

Getting Creepy With Google Analytics

donotreply@paularmstrongdesigns.com ( ) — Mon, 02 Mar 2009 09:12:28 -0600

It’s no secret that everything you do on the Internet can be tracked, watched, and analyzed. The amount of information that we can gather is… well… creepy… to say the least. I wouldn’t worry too much though, as most people really don’t care who you are and are not recording that. Using the Google Analytics Event Tracking API, we can get nice statistics for everything from browser window size, to outbound links, to downloads, all the way to what people are copying off of your pages.

This post was inspired by Zach’s browser window dimensions tracking post. I won’t cover tracking browser size here, as he’s done a great job of explaining what’s going on with it his blog post. He also gives a nice introduction to event tracking:

The new BETA _trackEvent method allows us to set both custom text and numerical values for better reporting, it is more configurable, and it does not inflate your Visitors or Content reports. —Zach Johnson

Okay… event tracking sounds awesome, so let’s get down to it.

Note that event tracking is a beta feature in Google Analytics and not every account has access to it yet. You can prod Google a little by signing up for the Trusted Tester Program, but there are no guarantees of being accepted.

I've currently only been running and testing events for a couple of weeks. Here's a sample of what I'm seeing in my Event Tracking section:

Download Events

The first, most important, and least creepy thing that I wanted to track with the Event Tracking API was file downloads. Most people are currently accomplishing this by adding an onclick event handler into the HTML and manually tracking clicks as page views, but file downloads don’t have much in common with page views, so they are better categorized as events. So, I had three things that I wanted to track on file downloads:

Number of downloads
Location of file (and file type)
What keywords are used in the link

Tracking downloads is actually a pretty simple task with some basic knowledge of JavaScript. I’ve used jQuery to bind event listeners to any link with the class download, but this snippet could fairly easily be adapted for other frameworks or libraries.

JavaScript Code

// Select all links with class 'download'
$('a.download').each(function() {
    // Double check that the link includes a file type at the end of the string using a regular expression
    if($(this).attr('href').match(/[.](\w+)$/)) { 
        // Bind a function to the click event
        $(this).bind('click', function(event) {
            // Track as category: 'Downloads', label: link of file, optional_label: text of link
            pageTracker._trackEvent('Downloads', $(this).attr('href'), $(this).text());
        });
    }
});

Outbound Links

This one is also pretty simple, but getting to the point of being unnecessary and a bit intrusive. On the other hand, tracking what outbound links people are clicking to get away from your site can help you gauge whether or not you're losing your visitors to an outbound link too much.

Again, this uses jQuery to iterate over all links in a document and binds the event listener only to the appropriate outbound links, but could easily be adopted to another framework.

JavaScript Code

$('a').each(function() {
    var href = $(this).attr('href');
    // verify that the href includes an http or https protocol 
    // and also require that the href includes the hostname of the current page
    if( href.match('http://|https://') && href.indexOf(window.location.hostname) == -1) {
        $(this).bind('click', function() {
            // Track as category: 'Outbound Link', label: link, optional_label: the current page
            pageTracker._trackEvent('Outbound Link', $(this).attr('href'), window.location.pathname);
        });
    }
});

Going Too Far: Copying and Right Click Events

Besides always being curious as to what images people are yanking from my site, I’ve also been really curious as to what text was being copied. While we can’t track copy events that are used from a computer’s internal system, we can still get a good number of events from key commands. I also feel it’s pretty safe to assume that any right clicking on images are a sign of someone trying to either copy the image itself or the location of the image for use with hotlinking.

Over the past few weeks, visitors to my site have been copying the following text:

I won’t go into too much detail explaining the following snippets, but feel free to copy¹ and use it on your site and see what your visitors are copying. Note that it currently only works for Firefox, Safari, Internet Explorer 6+, and Opera (on Windows only).

JavaScript Code

// Copy Keyboard Shortcut
function trackCopyEvent(type, selection) {
    pageTracker._trackEvent('Copy', type, selection);
}

$(document).bind('keypress', function(event) { // Safari and Firefox
    if( (event.charCode == 99 && (event.metaKey || event.ctrlKey) ) && window.getSelection ) {
        var selection = String(window.getSelection() + '').truncate(60);
        trackCopyEvent('text', selection);
    }
});
$(document).bind('keyup', function(event) { // Opera Windows and Internet Explorer
    if( event.keyCode == 67 && event.ctrlKey ) {
        if( document.getSelection ) { // Opera Windows
            var selection = document.getSelection().truncate(60);
	        trackCopyEvent('text', selection);
        } else if( document.selection ) { // Internet Explorer
            var selection = document.selection.createRange().text.truncate(60);
	        trackCopyEvent('text', selection);
        } 
    }
});

// Context Menu
$(document).bind('contextmenu', function(event) {
    if(event.target.nodeName == 'img') {
        var image = $(event.target).attr('src'));
        trackCopyEvent('image', image);
    }
});

Footnotes

¹By copying this snippet to track what people copy, you should already understand that I’m tracking you copying it. Creepy, isn’t it?

baseJS: A Mobile JavaScript Framework

donotreply@paularmstrongdesigns.com ( ) — Mon, 16 Feb 2009 09:11:16 -0600

This past fall I was tasked with creating a few iPhone-specific web applications. After doing a lot of research, I found a few issues with the popular JavaScript libraries. The availability of -webkit-transform and -webkit-animation removed any need for an animation library. Second, since the Query Selectors API was available, the need for a complex javascript selectors engine was basically pointless¹. And last, every library that I came across, even after minifying, was far too large for the iPhone to cache (24KB limit).

So looking at these first two issues, I tend to feel like those, as well as cross-platform issues, are some of the biggest reasons we use JavaScript frameworks in the first place. But here I was, developing for a single platform. So, what did I do?

I wrote baseJS. I just needed a simple, lightweight framework that could take care of some common and bulky tasks and allow me to write cleaner, more organized code.

Features

Lightweight: less than 8KB when minified
Fully-compatible with Mobile Safari
Falls back on Sizzle selector library for iPhone 1.x (when query selector support is unavailable)
Encourages use of CSS Transitions and Animations
Object-oriented
Easy to extend

Quick Examples

Organization Syntax of Classes

var AppClass = function() {};
base.extend(AppClass.prototype, {
    method1: function() { return true; },
    method2: function() { return false; }
});

Is equivalent to:

var AppClass = function() {};
AppClass.prototype.method1 = function() { return true; };
AppClass.prototype.method2 = function() { return false; };

Element Selectors

baseJS uses the Selectors API if available, or falls back on the Sizzle selector library if query selectors are not available.

var header = $('#header')[0]; // Selects the first object on the page with ID 'header'
var awesome = $('div.awesome', header); // Selects every instance of <div class="awesome"></div> in #header

Ajax Shortcuts

Face it: writing AJAX is tedious and requires a lot of steps. baseJS’s io() class simplifies the process.

new io('/results.json', {
    format: 'json',
    method: 'post',
    params: { mustache: true },
    onSuccess: function(response) { 
        alert(response); // response == data returned from server
    }, 
    onFailure: function() { 
        alert('There was an error getting the data');
    }
});

Element Creation Shortcuts

var newLink = new Element('a', { class: 'topLink', href: '#top' }, 'Back to Top');
$('#foo').appendChild(newLink);

Appends the following to <div id="foo"></div>:

<a class="topLink" href="#top">Back to Top</a>

There’s More

Be sure to check out the baseJS API and Documentation to see a full list of included methods and get help using them.

Get baseJS 1.0rc1

baseJS is nearing 1.0-complete status. You can currently nab the first release candidate and read the documentation to get you started.

Download baseJS 1.0rc1

API & Documentation

Get Involved with baseJS

baseJS relies on your help to make it as awesome as possible. Feel free to fork it at GitHub and report bugs via Lighthouse

License

baseJS is licensed under the GNU General Public License v3.0. More information is available in the download.

Footnotes

¹That is, unless you need iPhone 1.0 compatibility, but don’t worry: Sizzle has been included as an optional fallback.

baseJS

donotreply@paularmstrongdesigns.com (Paul Armstrong) — Mon, 16 Feb 2009 00:14:45 -0600

A lightweight JavaScript framework intended for use with Mobile Safari on the iPhone and iPod Touch.

The Grid: Are You Getting What You’re Paying For?

donotreply@paularmstrongdesigns.com ( ) — Thu, 05 Feb 2009 11:21:19 -0600

As you may know, I recently gave MediaTemple a piece of my mind and made the jump to Slicehost. To say the least, I am still incredibly impressed with Slicehost’s services and performance.

I always felt like the grid wasn’t performing as well as MediaTemple had promised. It was supposed to be a grid. It should have a ton of power, fast response times, superb uptime. Isn’t that what we should be able to expect? I would have even settled for good uptime. I put up with countless “scheduled maintenance” downtimes. I bit my tongue at database outages and many bursts of unresponsive port accesses. But, when my site was down for a few hours at a time, multiple weeks in a row, and I couldn’t get a single human response out of support, something just had to change.

I decided to switch to Slicehost. Since we are already using Slicehost for Scribbls, and have had excellent results, I decided it couldn’t hurt—plus, there are no contracts, so I really didn’t have much to lose.

I wouldn’t consider myself the type of person to normally get all excited about setting up a Ubuntu/Apache server, but I figured that I should at least learn. Slicehost provides a great deal of linux system setup and administration articles that are clear, easy to follow, and a great source of more knowledge than most simple setups will need.

I actually found that setup was pretty painless. I tracked my steps in a separate document along the way for reference later, and before I knew it, I was ready to port my site over.

The differences in performance just blows my mind. I’m on only a 256-slice (256MB Ram, 10GB storage, 100GB bandwidth), but my server load is nominal at all times, even during pretty decent traffic spikes. But even more amazing to me is the reports that I received from the Google Webmaster Tools about the time the Google Bot spent trying to download pages:

If this is any indicator, as you can see, prior to January 16th, MediaTemple’s performance was all over the board. It was taking nearly 3 seconds for Google to download a page, which means that those of us on slower connections were experiencing even worse performance. But suddenly, when I switched my site over, Google started averaging less than 700 milliseconds to completely download all pages.

Conclusion: MediaTemple Fail, Slicehost Win

Yep, Slicehost is definitely kicking the crap out of MediaTemple for customer service and offerings at comparable price points.

Thanks, Slicehost!

So I’ve been raving about Slicehost to everyone that I talk to lately. I’ve even started deploying sites for quite a few clients to instances at Slicehost. Afterall, who can really argue with these offerings?

Fast response times
Non-oversold machines
Cost-effective daily backups and snapshots
Excellent customer service by real people
Full control of your own system

Well, the technical stuff might not be for every one, but it’s definitely working for me. And if you’re going to sign up, why not sign up using my referral?

Afterthoughts

Looking back on this post, I feel like I haven’t really expressed how angry I really was at MediaTemple. If you follow my Twitter feed (relevance: #1, #2, #3, #4), I think that you’ve received very close to the full effect. See also: Dear MediaTemple…

Photoshop Tip: Snap Shapes to Pixels

donotreply@paularmstrongdesigns.com ( ) — Tue, 03 Feb 2009 12:02:35 -0600

I love Shape layers in Photoshop. They make editing and changing design comps a breeze. Resizing, re-coloring, everything—they help us be more efficient. But, when it comes to slicing the file up for the web, there is one thing that I hate: when people don't use “Snap to Pixels” with their shapes. Let me help you not make me really annoyed.

Why is snapping to pixels with shape layers important?

For website design, snapping to pixels is imperative. The web is still a pixel-based medium, and will be for years. Because of this, it's not possible to define images, shapes, layers, or text at a non-whole-number pixel measurement. Not only that, but we can't even save images with a width or height that are not whole numbers. So, precision in your design mockups is just as important as precision in your site.

Bad

Good

How to Turn Snapping On

Select the Shape tool from the tools palette. Your top menu bar will now have a bunch of shape options. Select the rectangle or rounded rectangle shape. Click the drop-down arrow to the right of the shape selector buttons. In the bottom-right of this pane, check the box that says “Snap to Pixels”

Use this and I will heart you forever.