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.

Fancybox

Like most web challenges, the fix is quite simple, but almost every example I found always seemed to be missing one important piece of the puzzle.

$("#lightbox").fancybox({
  'hideOnContentClick' : true,
  'width' : 500,
  'type' : 'iframe',
  'padding' : 35,
  'onComplete' : function() {
    $('#fancybox-frame').load(function() { // wait for frame to load and then gets it's height
      $('#fancybox-content').height($(this).contents().find('body').height()+30);
    });
  }
});

In the above example we have given our lightbox an id of #lightbox. We initialize the plugin with some options and give it a type option of iframe. Now you can create your separate HTML file for the lightbox and link to it form your main page and give the link href an id of #fancy-box. If you would like to use multiple lightboxes on one page you could use a class instead of an id.

The iframe height magic happens when the onComplete event is triggered. Here you can set up a call call jQuery’s load function which will then be used to call the height function after the iframe has loaded—you cannot get the height until the frame source has fully loaded. The id of #fancybox-content is the name of the div that Fancybox wraps the iframe in. We then set the height of that div by checking the contents of the iframe and using jQuery’s find method to locate the body tag and then get the height. I found that the height was always off by about 30 pixels, thus the +30. This may be due to paddings and margins within the loaded HTML file, but you can fiddle around with it until you get the right offset. You should now have an iframed lightbox that auto sizes its height.

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.

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.

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.

Start using awesome custom web fonts today!

A quick recap

Several older embedding options exist that have been around for awhile. Scalable Inman Flash Replacement (sIFR) which requires the Flash plugin and is thus in my opinion less desirable option, is one of them. There are also server side font replacement implementations where graphics are generated and then served to the web browser, but again this requires multiple technologies to work and has many limitations.

Cufón, a Javascript solution

A more recent technology advance in fonts is Cufón. Cufón requires no flash install and no extra software on the server side. It’s a pure JavaScript implementation and converts fonts into inline graphics. To a screen reader or web crawler the text looks like plain HTML text as you apply Cufón to the HTML text elements you wish to replace. This is one of the best font implementations yet, but it still has several limitations and caveats.

1. You cannot select or copy any of the text that has been replaced with Cufón. This is minor, but still a usability issue since the user expects to be able to copy and paste text if they want.
2. You cannot user your browsers page search for Cufón replaced text.
3. Cufón does not support rollovers, so you cannot apply a hover to your links. This is a little more of a deal breaker since many navigation toolbars require rollovers.
4. It is illegal to embed many fonts with Cufón since you are distributing the actual font data in a javascript file. This is not an issue with Flash since the actual font data is not being distributed. Cufón can encrypt the font data, but you will still be in violation of many font license agreements.
5. Knowing which fonts you can legally embed is a bit of a nightmare since the legal jargon on many font foundries will just leave you confused.
6. You must upload your fonts to the Cufón site and generate a JavaScript version of your font. This is time consuming and one extra step.

Welcome to Google web fonts

Google web fonts solves five of the six issues listed above.

1. You can select and copy / paste any of the fonts.
2. You can search for the fonts with your browsers page search.
3. Hover link rollovers are fully supported.
4. All of the fonts in Google web fonts are free to use and eliminate the research or guesswork needed.
5. Once you choose the font you would like all you have to do is copy and paste the generated code into your HTML document.

The fonts are CSS based, and the concept of CSS linked fonts has been around since 1998, but it hasn’t been until recently that you could guarantee most users would have browsers that could see these linked fonts.

Why Google Fonts? It’s fast and super easy!

Go to Google web fonts and browse the many fonts until you find one you like. Select it and launch the Google font previewer, here you can tweak the font and even add CSS text shadows. At the bottom of your previewer you will see a CSS snippet. Copy that and past it into your style sheet and you’re done, all your fonts will be like the one in the previewer.

Of course you probably don’t want to apply it to your entire site. In the case above it would probably be best to apply the style only to HTML header tags, so you could change the body tag to h1 or even use a class. For the example below I just created a google class.

Josefin Sans is just one of the many great fonts available at Google web fonts.

<link href="http://fonts.googleapis.com/css?family=Josefin+Sans:100,100italic,300,300italic,400,400italic,600,600italic,700,700italic" rel="stylesheet" type="text/css" />
<style type="text/css">
.google {
     font-family: 'Josefin Sans', serif;
     font-size: 36px;
     font-style: normal;
     font-weight: 400;
     text-shadow: none;
     text-decoration: none;
     text-transform: none;
     letter-spacing: 0em;
     word-spacing: 0em;
     line-height: 1.2;
}
</style>

And that’s about all there is to using Google fonts, it’s quick and easy.

What platforms does Google fonts support?

Going forward pretty much everything is going to support CSS based fonts, but here are the versions that support Googles method.

• Google Chrome: version 4.249.4+
• Mozilla Firefox: version: 3.5+
• Apple Safari: version 3.1+
• Opera: version 10.5+
• Microsoft Internet Explorer: version 6+

Can I download them and use them in a graphic applications like Photoshop?

Yes, while you don’t need to actually download them in order to use them on a website, you can download all of the Google Web Fonts if you like and use them in your favourite graphics package.

@font-face; another great method for using custom fonts

You can use download Google web fonts, The League of Movable Type fonts, or any web licensed fonts and use the @font-face method. In fact this is a very viable method now that most browsers support. OTF fonts will be supported in all the browsers that Google Web fonts are supported in, and in some cases all the way back to IE4. The only real difference with Google Web fonts is the ease of use and convenient library, but feel free to download any fonts you want and use this method if you prefer. @font-face also has all the same benefits that were listed for Google web fonts.

How to use @font-face

Using css linked fonts is pretty easy and has been around since 1998. Today most browsers support them, so go nuts. First download a the font you like, it must be web licensed so grab one from Google web fonts or The League of Movable Type. Once you have done that you will need to upload the actual font to your web server.

ORBITRON A high impact font with four 4 styles from The League of Movable Type.

ORBITRON black.

ORBITRON bold.

ORBITRON medium.

ORBITRON light.

The CSS for above example although long is quite simple. @font-face declares your font-family name and src (source) path to where the font is located on your server. Once they are set up you can start creating css classes or styling any HTML elements as you normally would. The example above is shown below.

@font-face {
     font-family: "Orbitron-Black";
     src: url("PATH_TO_FONT/orbitron-black.otf");
}
@font-face {
     font-family: "Orbitron-Bold";
     src: url("PATH_TO_FONT/orbitron-bold.otf");
}
@font-face {
     font-family: "Orbitron-Medium";
     src: url("PATH_TO_FONT/orbitron-medium.otf");
}
@font-face {
     font-family: "Orbitron-Light";
     src: url("PATH_TO_FONT/orbitron-light.otf");
}
.orbitron-black {
     font-family: "Orbitron-Black", serif;
     font-size:18px;
}
.orbitron-bold {
     font-family: "Orbitron-Bold", serif;
     font-size:18px;
}
.orbitron-medium {
     font-family: "Orbitron-Medium", serif;
     font-size:18px;
}
.orbitron-light {
     font-family: "Orbitron-light", serif;
     font-size:18px;
}

Other options for web licensed fonts

TypeKit is one of the commercial options with yearly pricing options and a limited free option. You can find commercial fonts here, but unfortunately a lot of the big names are missing. A quick search for favourites like Gotham, Helvetica Neue and Frutiger yielded nothing, so for now I’ll be sticking with Google web fonts and The League of Movable Type.

The future is digital

It’s quite annoying that the large font foundries have locked down and prohibited the use of their fonts on the web or only allowed clunky implementations. It’s as if they believe that if they were to open up their licenses that the world would cease to buy fonts tomorrow. I think it would be quite the opposite. Individual sites that want to embed fonts regardless of whether they own the rights to them or the licensing restrictions are going to use them. Larger corporate sites and individual sites that respect the copyright of fonts will instead move to the quickly growing library of web licensed and free fonts. The future is digital, and the larger foundries really need to wake up before people just move elsewhere for their fonts.

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.

After looking everywhere for a way to load a web page within Outlook 2010, I finally checked Microsoft’s site only to find out that this ability had been removed entirely. I started thinking about other ways to get a page into Outlook without using a 3rd party mailer application. That’s when I fired up Internet Explorer and found the Send Page by e-mail option. The good news is after several tests the results seem to be the same. To send the HTML to Outlook I used Internet Explorer 8. I’m not sure if other browsers can do the same, but since this is a proprietary MS format it’s probably best to stick with IE.

In Internet Explorer go to:

File / Send / Page by E-mail…

If you have Outlook 2010 as your default mail client it should automatically load with the page embedded into an email message. Now one would think that by now all you would have to do is save the email as an OFT and be done with it, but for some reason every time I tried this the resulting OFT was a blank file. The trick is to email the message to yourself and then save it as an OFT. Don’t forget to change the subject title to whatever you would like the OFT to read.

In Outlook 2010 go to:

File / Save As

Select Outlook Template under Save as type:

Now you should have an OFT that will work just as 2007 templates worked. Remember when creating OFT files there are many limitations, and tables and spacer GIFs are a must for any remotely complex layouts. Check out the related posts below for more Outlook tips and tricks.