Open the finder and go to:

Applications/MAMP/conf/apache/

The file you want to edit is httpd.conf, if you are not using MAMP you can search for this file and then follow the directions below.

Open the httpd.conf in the editor of your choice. Once you have it open search for “Listen 80“. Paste the example below into your config being careful to either paste over Listen 80 or do not copy the Listen 80 part from the example below. These directions are assuming a default MAMP httpd.conf. Replace username with your own username.

Listen 80

NameVirtualHost *
<VirtualHost *>
ServerName dev.localhost
DocumentRoot /Users/username/Sites/dev
<Directory />
Options FollowSymLinks
AllowOverride None
</Directory>
<Directory /Users/username/Sites/dev>
Options Indexes FollowSymLinks MultiViews
AllowOverride All
Order allow,deny
allow from all
</Directory>
</VirtualHost>

<VirtualHost *>
ServerName coolsite
DocumentRoot /Users/username/Sites/coolsite
<Directory />
Options FollowSymLinks
AllowOverride None
</Directory>
<Directory /Users/username/Sites/coolsite>
Options Indexes FollowSymLinks MultiViews
AllowOverride All
Order allow,deny
allow from all
</Directory>
</VirtualHost>

<VirtualHost *>
ServerName localhost
DocumentRoot /Users/username/Sites/
<Directory />
Options FollowSymLinks
AllowOverride None
</Directory>
<Directory /Users/username/Sites/>
Options Indexes FollowSymLinks MultiViews
AllowOverride All
Order allow,deny
allow from all
</Directory>
</VirtualHost>

So what we have here is three different server names and paths. You can use subdomains like dev.localhost or you can even use a full name like coolsite. The reason we specify localhost and point it to the root of the sites folder is so localhost still works properly when you type it in the browser.

There is one step left. Open the terminal from your Applications/Utilities directory in the finder or search for it in spotlight. You will need to edit your hosts file, I use the VI editor, but if you haven’t used VI before, I recommend using Nano instead.

Type one of the following into the terminal.

$ sudo vi /private/etc/hosts

or

$ sudo nano /private/etc/hosts

The sudo will prompt you for your password, enter it and the file should open. If you don’t use sudo and enter your password you will not be able to save your changes. You should now see your host file, look for the line 127.0.0.1 localhost. Enter the info below being careful not to change anything else in your hosts file, it may be empty or it could have something other programs or people have put in there.

127.0.0.1 localhost
127.0.0.1 dev.localhost
127.0.0.1 coolsite

As you can see these correspond with the names you entered in the httpd.conf file. Now you will need to stop and start your server via MAMP or command line. Once you have stopped and started the MAMP stack, your new server names should load when typed into the browser. This is a great way for testing your sites and in some cases may be the only way to test them. You can use any names you wish and setup as many server names as you wish.

The problem

$jQuery('#toggle-test').toggle(function() {
  $jQuery(this).stop(true, true).animate({width : 500});
}, function() {
  $jQuery(this).stop(true, true).animate({width : 300});
});

As you can see in the example above, when clicking the link the toggle animation is triggered instead of the link destination.

The solution

$jQuery('#toggle-test2').toggle(function() {
  $jQuery("a").click(function(e) {
    e.stopPropagation();
  });
  $jQuery(this).stop(true, true).animate({width : 500});
}, function() {
  $jQuery(this).stop(true, true).animate({width : 300});
});

The difference with the second example is that we have added a click event within the toggle and added the stopPropagation() method. This “Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event” thus allowing the link to take it’s normal course of action.

A more practical use of this would be clickable slide out boxes with links embedded or even a close button on a toggleable element. These are just some of the uses for stopPropagation(), so keep it handy in your arsenal of jQuery tools.

This quick tutorial will not go into the details of how to use the Google maps API, for that I refer you to the starter tutorial which is missing the fix needed to make the maps display properly in the iPad. This issue also affects the iPhone and should fix any problems there too. After thinking it was a CSS issue and fiddling with the CSS for over an hour I stumbled across more metadata options. In the Google example linked above, it shows a metadata name attribute of  “viewport” with content attribute values of “initial-scale=1.0, user-scalable=no”. You need a bit more than this for the iPad and iPhone. See below.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

The most important value is maximum-scale=1.0, width=device-width is just in there for good measure.  Basically this stops Safari from scaling or zooming your viewport when the orientation is changed. One note, sometimes the Safari browser won’t forget the way it was displaying before you made your changes, a quick stop in options -> Safari and you will find a clear cache option.

It’s called the IE upgrade warning and it’s pretty slick and super easy to set up. All you need to do is download the zip file from Google’s IE upgrade warning page. Extract and upload the included goodies to your server and add this snippet into the page.

<!--[if lte IE 6]><script src="js/ie6/warning.js"></script><script>window.onload=function(){e("js/ie6/")}</script><![endif]-->

You will also need to upgrade the paths to point to your JavaScript directory. Once you do so, you should get a pretty little box like the one shown below when ancient IE browsers arrive at your site.

I know a lot of us could probably think of more colourful things to say in this message, but it’s probably just best to leave it alone. You can also get loads of translation files too! So the next time you think about dumbing down the user experience or spending 25% more time trying to make a site work in IE6, maybe this handy little script is the answer.

Below we have four examples, two jQuery toggles and two jQuery hovers. The first toggle and the first hover do not employ the stop() function while the proceeding ones do. Try them out for yourself.

4 examples

No stop() function used

var height = $('#example1').height();
$('#example1').toggle(function() {
     $(this).animate({'height' : '100px'}, 'slow');
},
function() {
     $(this).animate({'height' : height}, 'slow');
});

$('#example3').hover(function() {
     $(this).animate({'height' : '100px'}, 'slow');
},
function() {
     $(this).animate({'height' : height}, 'slow');
});

The above examples first get the height of the example1 id, this height is then used for resetting all the examples to their original height after the first animation.

The snippet then sets the height the #example1 element to 100px when toggled/clicked and then back to the original height when toggled again. The same logic is applied to #example3 only with a hover instead. If you rapidly click the first and third examples above you will see the animations queue up and continue repeating until finished. It is more noticeable with rollovers, and this is probably not a desirable behavior in most situations.

Examples 2 and 4 use the jQuery stop function

$('#example2').toggle(function() {
     $(this).stop(true, true).animate({'height' : '100px'}, 'slow');
},
function() {
     $(this).stop(true, true).animate({'height' : height}, 'slow');
});
$('#example4').hover(function() {
     $(this).stop(true, false).animate({'height' : '100px'}, 'slow');
},
function() {
     $(this).stop(true, true).animate({'height' : height}, 'slow');
});

As you can see it’s pretty simple to fix, but you also have to be careful with the stop() function as sometimes you can get undesirable flicker effects.

Understanding the stop() function

The stop function takes two Boolean values, both of which default to false.

.stop( [ clearQueue ], [ jumpToEnd ] )

The first value clearQueue will stop the animation from stacking or queuing up each animation. The jumpToEnd value tells whether to finish or jump to the end of the animation sequence. You will often need to play around with these values to see what works best. As you can see in the hover example, the mouse over clears the queue but continues to animate, while the mouse out clears the queue and jumps to the end of the animation. If these values are all left to true in this example you can get some flickering effects.

Remember that the jQuery stop() function can be used on any animation function, which includes functions like slideUp() and SlideDown(). Happy coding.

Method 1: Dot by dot

The dot by dot method is exactly as it sounds, grab a brush and draw your line out. Depending on your layout this could take forever and end up being less than perfect if you make a mistake. A quick way to speed up the process is by duplicating and merging the layers as you go.

Start with a blank canvas of 500×500 pixels. Go to your layers window and create a new layer. Now zoom in about 500% and create two horizontal dashes or dots with the pen tool ( b ). Once you have completed this switch to the move tool (v). Now drag your two dots while holding down the ( alt ) key, this will turn your move tool into a double arrow which means you are duplicating the layer. As you drag the layer line it up so the spacing is correct with the previous two dots. You should now have 4 dots/dashes. Once you have lined them up merge them ( command/control e ). Now repeat the whole process again, each time you will double the length of your dotted/dashed line. If you use this method, although clunky, you can created many lines very quickly and then trim them to your desired size with the marquee tool. If you need a vertical line all you have to do is rotate ( command/control t ) the layer while holding the ( shift ) key to get a perfectly straight vertical line.

Need to change the colour? No problem, select the dashed/dotted lines layer in your layers palette and click “Lock transparent pixels”. Now select your brush tool ( b ) and increase the size ( ] ) to a large enough brush to paint over the dots/dashes quickly. Select the colour you wish to use and scribble over top of your lines.

This method while not overly eloquent is often the easiest method for a quick dashed line. If you need to use many dotted/dashed lines you might want to look at one of the other methods below.

Method 2: Brush palette

The brush method is fairly fast. Create a new 500×500 pixel canvas. Open your brushes ( F5 ) palette and select the 1 px brush. Uncheck Shape Dynamices, then select Brush Tip Shape. Slide the Spacing slider to the far right and then hold shift while drawing a line. You should have a perfect dotted line.

You can mess around with the spacing and roundness options, but there is only so much you can do with the default brushes, if you use rounded brushes are will get rounded dots, which may or may not be what you want. If you need larger dashes you can create your own brush. Say you want a 10×8 dash, all you have to do is created a 10×8 square dash and crop the canvas to that size. A quick way is to trim the document in the image menu. ( Image -> Trim… and select ok ).

Once you have your brush ready go to the edit menu and define a brush. ( Edit -> Define Brush Preset… ). Name it can click ok. When you return to the brushes menu it should be selected. Now if you apply the spacing settings to this brush you should have a much thicker dashed line.

The brush method is probably one of the most robust methods for creating dotted/dashed lines in photoshop.

Method 3: Pattern palette

The pattern method is similar in some ways to the brush method. This is by far the most complex of the 3 methods, but if you plan on changing the size of dotted boxes a lot then this method is the most flexible. When I create Photoshop mockups for web, I use a lot of layer shapes for sidebars, boxes, headers and what not and constantly nudge them into place with the arrow keys and the direct selection tool. With this method you will apply a pattern via the styles to a shape layer and then work with the vector mask to only show the edges of the pattern. Once completed you will now have a dotted or dashed line that you can move and nudge with the direct selection tool as much as you like without ever worrying about recreating the dotted lines again.

For this example we will create a 1 pixel dotted line, but this will work with thicker lines too. Create a new 2×2 document, add a new layer to it and hide the background layer so the image is completely transparent. Now put one pixel in the top left corner. Your document should look like the zoomed in example to the left. If you were to create a 3 pixel dash, your document would be 6×6 with a 3 pixel black box in the top left corner.

Now go to the edit menu and define a pattern. ( Edit -> Define Pattern… ). You are ready to create your box shape now. Create a large new document ( command/control N ) to play around with. Select the rectangle tool ( u ) and create a rectangular shape.

Now select the newly created shape and reduce it’s fill to 0%. The difference between Opacity and Fill is that Fill will hide the shape but not the Blending Options that you will be applying next. You can leave this a solid colour too, but make sure it’s not the same colour as your pattern, otherwise you will not see the dotted line. Now right click your new shape layer and select Blending Options…

In the blending options click Pattern Overlay and then select your pattern in the Pattern: section. Your pattern should be the last one added. Click OK.

Now you should have a box full of 1 pixel dots. Select the shape tool again ( u ) and make sure Shape layers and Subtract from shape area are selected in the toolbar as shown below.

Now select the Vector mask of  your shape in the layers palette and draw a mask over your shape. The key here is to draw it right to the edges. You can use the Direct Selection Tool ( a ) to tweak your anchor points.

You should now have a nice box with dotted lines like the one to the right.  You can continue to use the Direct Selection Tool by selecting the entire edge of the shape to manipulate this rectangle without worrying about the borders again. If you wanted the border only on one side then you would manipulate the inner vector mask so that it covered the top, right and bottom sides of the rectangle.

Although this method is more time consuming than the first two, it’s also very powerful if you are going to have a lot of dotted or dashed boxes in several layouts. Now you can just duplicate this one over and over and resize it without worrying about re-drawing the dots/dashes. As mentioned this can also be used for straight lines, just make sure the other sides of the rectangle are masked. Remember that the pattern is the colour of your border, so if you want a different colour you need to change the pattern colour.

If you have other tips on how to achieve the same examples as above with different methods, I would love to hear about them in the comments below.

FireBug Lite has the Inspector which is that button that lets you click on any part of the web page and see what’s going on. It’s especially helpful when troubleshooting layout issues with JavaScript or jQuery where you can’t actually see the CSS or HTML that is generated after the page loads.

Firebug Lite comes in a few flavours, a bookmarklet, a live link and a local link. You can test out Firebug Lite right now! I have embedded it right into this blog post. Look for a little bug in the bottom right hand corner of your browser window and click it, voilà! Enjoy.

I do a lot of screen captures using Command-Shift-4, and when it stops working while I have all kinds of files open, a reboot is a real productivity killer. I have tried killing the finder and dock using the terminal to no avail. One process that will fix this issue, although not ideal it’s better than a reboot.

Click the Apple icon in your top menu and select sleep. A few seconds later hit space bar; this seems to restore Exposé and screen capture functionality. This method should also fix disabled hot corners, although I have not tested it. Although putting your Mac into sleep mode and awaking it a few seconds later is much better than a reboot, a real fix would be much appreciated, so if you have a better solution or know what’s causing this I would love to hear about it in the comments.

For custom CSS and JavaScript within the post, the best place to put these snippets is embedded right into the HTML head of that post. This is super easy to do with WordPress custom fields and a slight modification to your WordPress theme.

What are custom fields?

If you don’t know what custom fields are in WordPress then step aboard, they are another powerful tool to add to your arsenal and easy to understand. The first step is making sure they are displayed on your Edit Post admin page. Create a new post and look to the top right corner of you admin interface. You should see Screen Options. Click it and then make sure Custom Fields is ticked in the Show on screen check box options. Now if you look below your post you should see a panel called Custom Fields.

A quick update to your theme

Either download your header.php file or use the WordPress editor to paste the snippet of code below into it. The snippet below should go right before your closing </head> tag.

<?php
if (is_single()) {
     if ($custom_header = get_post_meta($post->ID, 'custom_header', true)) {
     echo $custom_header;
     }
}
?>

This example allows you to post any type of data into your page head and allows you to specify the type of tag such as link style or script. The code above says: is this a single page? If so get the custom field named custom_header and echo/print it out. Now you are done and can save/upload the file to your server.

Now in your custom fields panel enter a new custom field of custom_header and add the styles or JavaScript you need. In the example below you would then add .myCustomStyle to your post in the HTML tab. I find using span tags in the editor is the best way to add custom classes.

You can add any kind of custom code into the header using the same method. Read more about custom fields in the WordPress codex.

My custom CSS isn’t showing up

If your CSS classes seem to be having no affect it’s probably because they are being overridden by your own theme CSS. Adding the !important declaration to any problem styles will fix this issue forcing them to override the style that is overriding your custom style, see the example below.

font-size:20px !important;
color:#1f1f1f !important;

That’s all there is to it, happy coding.

Use tables everywhere

And I do mean everywhere, I can’t stress this enough, tables are your friend when it comes to email newsletters. They will ease much suffering, so use them everywhere. The all mighty spacer gif is your next best friend when it comes to table based design, and style=”display:block” is your third best friend. Here’s why.

Margins don’t work in email newsletters!

Margins are one of the most important css styles used today along with padding. Some email clients strip out margins and padding can be very flaky in others, so what are you to do? You can start by not using them at all. Don’t bother trying to style your paragraph tags either, I always stress letting them default to whatever the email client likes to do with them. Forcing them to do what you want will probably look wonky in some mail clients. Leave them alone and don’t bother with margins or padding, it’s less work for you and your email newsletters will look better for it. You will never have the control you have with web pages.

Suppose we want this example below.

In a normal webpage this is a padding div with text and a second div floated right with CSS margins and a paragraph of text  for the caption. In the email world it looks like this.

Red represents an outer table and green represents an inner table. In a real world example of a robust email newsletter you would most likely have far more nested tables then this, but this illustrates our need for tables. Each corner table has a 20×20 pixel, and the inner green table is aligned to the right. A great tool to illustrate this in real time with your own work is the Web Developer Firefox addon by Chris Pederick, which allows you to outline your tables within the browser amongst many other things.

Table based layout tips

Remember that a spacer gif should be a 10×10 pixel by default and then stretched to the desired size even if that size is less than 10×10. A 1×1 pixel will not stretch properly in some versions of Outlook due to a very strange bug.

Each spacer gif should also have an inline style of style=”display:block”. Many email clients like Gmail will leave white space below all your images making your layout look messy. This same rule applies to visual images, especially if the email is image heavy as you will have white lines caused by space below all the images if you forget to add this to all your images.

When using tables don’t forget how fonts work with different email clients. Newer versions Outlook for example will not cascade your fonts properly when used in tables, and clients like Gmail will rip out your embedded styles. The solution to this is to use both methods only once eliminating the need to splash font family and font sizes throughout your email newsletters.

With patience it’s possible to make email newsletters that work in many email clients and are somewhat clean at the same time. Look at email newsletters as yet another exciting challenge to conquer and you might not pull all your hair out. Happy coding.