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.

ThemePassion is all about premium themes of course, but more precisely, themes for content management systems, most of which are Open Source CMS projects. Right now there are well over 100 theme reviews on WordPress, Drupal, Joomla!, Magento, ExpressionEngine, OpenCart, phpBB, standalones and Photoshop. It’s taken about 3 months to compile all these, and the list keeps growing daily. So far the site has been a success and I’ve grown my readership faster than with any site in the past. Theme builders love to have more exposure, and the great thing about ThemePassion is that I only write positive reviews — I don’t believe there would be any value in people wasting time on themes that look ugly. These are all themes that I personally think look fantastic and in some cases really raise the bar.

ThemePassion itself is based on a template from Elegant Themes, a fantastic theme provider and probably the best value on the market at the time of writing. This was a hard decision for me as I have always built the themes myself for every iteration of this blog and I am quite capable of building and designing my own WordPress template. The issue was time, I wanted to get started, and really what better place for a premium theme than on a site about premium themes. The site is a grid layout so you can easily glance over all the thumbnailed screenshots for each review. The reviews themselves are short, but every one is written by yours truly.

The review process has really exposed me to a variety of designs in a very short time. In the future I plan on releasing some of my own themes through ThemePassion. Viewing beautiful themes every day really lights a fire in you. I would also like to provide more tutorials here on this site with whatever valuable lessons I learn along the way.  So if you are into themes or great design, I invite you to peruse ThemePassion, and if you have any ideas or advice, feel free to get in contact with me.

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.

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.

What is Drush?

Drush has been around for awhile now, but if you are like I was only last week and don’t know what it is, and you run a Drupal site, this tool will make your life a lot easier. Drush is a command line PHP script for seeing the status of your Drupal site and updating it extremely fast among other things. If you have a Drupal site, chances are you may have many modules, and one day Drupal pops up a mean warning about the core not being up to date, security and vulnerability issues, and 25 modules are out of date. Done the traditional way this is a nightmare that includes downloading each module from the Drupal site, unzipping them, copying them over to your modules directory and updating your database where needed.

My Drupal site was always out of date, which was not wise. Why did I let it get out of date? The answer is time, it takes a long time to download all the modules, unzip them and then run the database updates, especially through the Drupal admin. This is where Drush comes in. It does all this lightning fast and it’s completely automated. It will download everything that has a problem and like magic, apply all the necessary updates to the Drupal core and modules, and it will do this all with a single command.

I’m interested! Lets get started!

These directions will work on Linux and Mac OS boxes. The first thing to do is download Drush. Go to the Drush download and right click the version you want and select copy link. Then SSH into your account.

ssh -l username yoursite.com

Download the file you copied earlier with wget:

wget http://ftp.drupal.org/files/projects/drush-6.x-3.3.tar.gz

Extract the files:

tar -xvf drush-6.x-3.3.tar.gz

You should now have a drush directory in your home directory. Next create a symbolic link to drush so you can use the script within your Drupal site.

ln -s /home/youruser/drush/drush /home/youruser/bin/drush

Now change directories into the Drupal site you want to play with. To get a list of commands you can type drush, you can also go to the Drush help site.

To test it out try:

drush pm-list

This will list all versions of all your modules and themes. If you wanted to see only your disabled modules and themes you could type:

drush pm-list --status="disabled"

Now for the magic. Before doing this make sure you have a backup of your site, you do make backups before updating your site right? I only ask because some people like to live on the edge.

drush pm-update

This will display update information and prompt you to continue. You can bypass prompts by typing:

drush pm-update --yes

You will not be prompted and everything will be updated. This is useful for when you have a lot of modules to update. The command pm-update has a lot of other options you can check out in the manual. The other great thing about Drush is that it makes backups too. That said I still recommend reading over the documentation before trying anything on a large production site. This tutorial has only scraped the surface of Drush, I hope you find it as fantastic as I have.

So remember after you upload the files to your new server, import your database data and change your database credentials to also bring along your .htaccess file or just grab it from a Drupal package. Hope this saves some of you some head scratching.

What is Zen Coding?

Zen Coding is hard to explain, but if you have been working with HTML and CSS for awhile now you should be able to pick it up very quickly. It’s easy to learn and best shown by example, so lets start with an example.

Say I want a div with an id of frame and a class of indent, I would type:

div#frame.indent

In the Coda editor hitting F1 would turn the above into this:

<div id="frame" class="indent"></div>

That’s pretty cool, but not life changing, but how about something like this.

table>tr*3>td*4

<table>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
</table>

Okay, I know what your saying, who needs complex tables anymore! Well, email newsletters and tabular data for one, but how about this.

ul#navigation>li.link*5

<ul id="navigation">
	<li class="link"></li>
	<li class="link"></li>
	<li class="link"></li>
	<li class="link"></li>
	<li class="link"></li>
</ul>

What if each link class needs to be unique?

ul#navigation>li.link-$*5

<ul id="navigation">
	<li class="link-1"></li>
	<li class="link-2"></li>
	<li class="link-3"></li>
	<li class="link-4"></li>
	<li class="link-5"></li>
</ul>

How about adding a strong tag in each bullet.

ul#navigation>li.link-$*5>strong

<ul id="navigation">
	<li class="link-1"><strong></strong></li>
	<li class="link-2"><strong></strong></li>
	<li class="link-3"><strong></strong></li>
	<li class="link-4"><strong></strong></li>
	<li class="link-5"><strong></strong></li>
</ul>

Want a bunch of caption blocks?
div.caption*5>h1+h2+p

<div class="caption">
	<h1></h1>
	<h2></h2>
	<p></p>
</div>
<div class="caption">
	<h1></h1>
	<h2></h2>
	<p></p>
</div>
<div class="caption">
	<h1></h1>
	<h2></h2>
	<p></p>
</div>
<div class="caption">
	<h1></h1>
	<h2></h2>
	<p></p>
</div>
<div class="caption">
	<h1></h1>
	<h2></h2>
	<p></p>
</div>

Attributes? Got that covered too.

a[href="link$.html" target="_blank"]*3

<a href="link1.html" target="_blank"></a>
<a href="link2.html" target="_blank"></a>
<a href="link3.html" target="_blank"></a>

Okay, it’s probably clear by now that I think Zen Coding is awesome and maybe I’m getting carried away now, but lets try one more. This one helped me post all the examples above to this post by using a filter. Adding a |e filter to the end of the above example will escape all unsafe XML characters with HTML entities. Perfect for posting code examples.

a[href="link$.html" target="_blank"]*3|e

<a href="link1.html" target="_blank"></a>
<a href="link2.html" target="_blank"></a>
<a href="link3.html" target="_blank"></a>

Many editors are supported

Don’t have coda? That’s not a problem, many editors are supported and chances are you are familiar with one of them. There’s even a PHP version called ZenPHP which will generate blocks of HTML in a similar fashion. If you have any really cool Zen Coding selectors post them in the comments.

• Official Project site
• More selector examples
• List of filters

But this is about The Zombie Journal

This post isn’t about Drupal, this is about The Zombie Journal, my newest site. Consider it still rough around the edges. I have a lot of ideas which I have not yet implemented, but for now I am hoping to see The Zombie Journal grow into a social network for Zombie fans of all sorts. If you sign up for an account you can post your own zombies stories of your fictional encounters with these diabolical creatures we call “the undead”. You can also share zombie resources, rank and vote on content and participate in the forums. If you are even mildly interested in zombies I urge you to sign up today, and follow The Zombie Journal on twitter.

]]> http://www.ianhoar.com/2009/11/25/the-zombie-journal-is-finally-ready/feed/ 0 http://www.ianhoar.com/2009/05/10/adium-spam-comments/ http://www.ianhoar.com/2009/05/10/adium-spam-comments/#comments Mon, 11 May 2009 02:07:39 +0000 Ian Hoar http://www.ianhoar.com/?p=3563 Adium is a fantastic instant messaging program for the Mac that allows you to connect to many different chat clients like Yahoo, MSN and Google Talk just to name a few. Unfortunately if you have an MSN / Windows Live Messenger account on Adium you may be bombarded by the parasitic individuals of the web also known as spammers. I’m not sure why this only seems to happen to my MSN account, but there is a simple fix.

Fire up Adium and go to Adium / Privacy Settings… (alt + option + p).

Under Privacy level, select Allow only contacts on my contact list. Working well for me so far, but I’m really wondering why MSN gets such a massive amount of spam, I don’t think I have got one spam message on Google Talk or Yahoo.

Right now Bespin only works on FireFox and the WebKit Nightly builds. Bespin is “using exciting new technology in HTML 5 that only leading browsers have implemented”. This is the message you receive when you use anything but FireFox or WebKit nightly to access the Bespin editor. They are using some advanced features of the canvas tag and there has been some controversy over their choice. Ajaxian has great article on the reasons for choosing canvas.

Since Bespin is using cutting edge web standards it will probably work in most browsers by the time it is at a production level and ready for the masses. WebKit is the engine that powers Google’s Chrome and Apple’s Safari, so it is only a matter of time before we see Bespin working in these browsers and any browser that supports the HTML 5 spec.

Internet Explorer fails again

Of course Internet Explorer 8 is coming out soon and it’s already behind the times and does not support the canvas tag at all. I don’t really see this as an issue as most Web Designers have long ago given up on this browser and since this is targeted at web designers and developers it should be a non-issue.

Working in the cloud

So what kind of things could we expect from Bespin in the future? Well I’m hoping it will be able to integrate into your website and hopefully as it grows it will gain things like source control and maybe even be integrated into some of the big content management systems out there. Think of working on your WordPress or Drupal theme in one browser tab and your admin page in the other. Bespin is open source and being designed with scalability and extendability in mind. In the developer video they give an example of collaborative coding, where you can literally see code changing in real-time in one screen while a developer types in the other. This would be great for training, code walkthroughs and tandem trouble shooting.

Bespin is far from being anything more than a fun tool to play around with right now, but the potential and imagination is there. This is definitely a project to keep your eye on.