Archive for the ‘Design’ Category

Test With IE On Your Mac OS X

Saturday, April 3rd, 2010

- Mac OS X (Snow Leopard was used for this article)
- XAMPP/Apache or Mac webserver of your choice
- VirtualBox
- Windows XP, Vista, or 7 install disk
- IETester
(allows for testing in multiple flavors of Internet Explorer using tabs)

We've all seen this show before. The tricky part is finding your way back to XAMPP (Apache) from IE Tester while maintaining a consistent base URL. This isn't important when running a few static websites, but many frameworks have this value stored in its database. When you view your site using a different URL, links to static files (CSS, images, etc.) and other pages become broken. In a few easy steps I'm going to show you one method to resolve this issue.

Go ahead and install the above applications and OSes if you haven't already. Use the default network mode of "NAT" for VirtualBox. I'm going to assume that you can access your local sites (from your Mac) using - http://localhost/sitename/

- Step 1: Boot up your Windows install and use ipconfig (Run -> cmd -> ipconfig) to get your gateway IP. It was for me.

- Step 2: Add the following lines to both system's (Mac and virtual Windows install) hosts files ( '' can be replaced with a URL of your choice.

# Mac:

# Windows:

- Step 3: Be sure that all of your web frameworks (WordPress, Magento, etc.) are aware of your new base URL '' (or whatever you chose in step 2).

- Step 4: Access one of your sites from each of your operating system's browser using -

Content Expirator – jQuery Content Expiration Plugin

Saturday, March 27th, 2010

Content ExpiratorContent Expirator is a jQuery utility plugin that provides an easy way to give DOM elements an expiration date. If the element is found to be expired, its 'display' parameter is set to 'none'. A better approach would be to perform this function server side with a server side language, but this is a quick and easy way to implement it client side.

Download: jquery.content_expirator-0.1.0.js


Let's say your client has given you a flyer to put on their website for an event.

<img src="easter_flyer_2010.jpg" class="aligncenter" alt="Easter Flyer" />

After Easter is over, you're going to want to take this flyer off of their site. Instead of manually editing the site on the Monday after Easter to take it down, you can give it an expiration date so that it isn't displayed after Easter.

<img src="easter_flyer_2010.jpg" class="exp-2010-04-04 aligncenter" alt="Easter Flyer" />

The Content Expirator looks for an element containing a class name (must be the first one listed) containing the prefix 'exp'. When it comes across one, it compares the date (formatted year-month-day) with the current day to decide if the element's 'display' (style) parameter should be set to 'none'.

Calling The Function:


// looks for -> 'exp-year-month-day'

custom prefix:

// looks for -> 'end-year-month-day'
<script> <html> Result:


Save For Web’s Mysterious White Border

Saturday, December 22nd, 2007

White Border

Photoshop has a handy feature that allows you to save images for web use. It allows you to save images as JPGs, GIFs, and PNGs. It also allows you to resize your image before saving it. Some time ago I noticed that some of my images had a thin white border around them. I believe this to be a result of image resizing. After some trial and error, I found a couple of ways to fix this problem.

Before you "Save For Web"

1. Try to resize your image first: Image -> Image Size...

2. Try to "Flatten" your layers first: Layer -> Flatten Image

If all else fails open your file, after you've Saved For Web, and paint around the edges with the same color as your background. Once you're done painting just: File -> Save

No Border