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 10.0.0.2 for me.

- Step 2: Add the following lines to both system's (Mac and virtual Windows install) hosts files (http://en.wikipedia.org/wiki/Hosts_file). 'localhost.com' can be replaced with a URL of your choice.

# Mac:
localhost.com 127.0.0.1

# Windows:
localhost.com 10.0.0.2

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

- Step 4: Access one of your sites from each of your operating system's browser using - http://localhost.com/sitename/

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:

default:

$(document).ready(function(){
    jQuery.contentExpirator();
});
// looks for -> 'exp-year-month-day'

custom prefix:

$(document).ready(function(){
    jQuery.contentExpirator('end');
});
// looks for -> 'end-year-month-day'

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

I've seen websites where designers have used images like the one above and may not have known that there is a very simple fix: When the "Type Tool (T)" is selected there is an anti-aliasing drop-down menu in the toolbar at the top of the screen. The selected option, to produce the text above, was "None". This is the default anti-aliasing method.

If you change this to "Smooth" or possibly any of the other options, you will get a much smoother font.

. . . and here's the final result

I've tried to search for this solution before and didn't have much luck. That's why I'm sharing this with everyone!

Recently I came across a favicon generator that, I thought, performed very well. You can give it a try for yourself at: http://tools.dynamicdrive.com/favicon/ I made several example favicons from PNG files. You can see each of them below.
In Photoshop I created a new file (File -> New | 160 x 160 | Background: Transparent). Starting with an image at this size makes it a lot easier to work with your new icon. Once you're finished with your design, save your image "for web" (File -> Save For Web). After you select this option, you'll want to change the "Preset" value to "PNG-24" before saving. Saving it as a PNG file will allow for transparency in your design (JPEG files do not support transparency).

Here are my (FREE) samples.
Please feel free to use these for whatever you'd like!

1. Open Photoshop and create a new image (File -> New) 400px x 400px with a white background.

2. Create a new layer (Layer -> New -> Layer). Use the Paint Bucket to paint the layer black.

3. Click on the "Layer Visibility" icon, for the black layer, so that it is hidden.

4. Set your foreground color to #BFAC60. Use the "Rounded Rectangle Tool" to create the shape on your background.

5. Next we'll bring our black layer back into view. It should appear directly behind our rounded rectangle.

6. Select your rectangle layer and change the "Fill" to 60%.

7. Now we can add that border around our rectangle. Click on the "Add a layer style" icon to add a "Stroke". Click on "Color:" in the "Layer Style" window.

8. When the "Color Picker" comes into view, move the eyedropper over to our newly created color (our rectangle).

9. Hide our black layer again (as we did in step #3) and change our rectangle "Fill" back to 100%.

10. Select "Background" to reveal our new image with matching border!

We can use this same method, but without using the black layer, to lighten our base color. You could then use this new color for text or highlighting effects.