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.

The first thing I have noticed about Chrome is that it feels very zippy. I will have to try some more intensive tasking, but so far the tabs seem very responsive. Right now I have over 15 tabs open including game trailers. Game trailers usually slows down Firefox a bit while loading or switching tabs, but in Chrome I rapidly clicked back and forth on the tabs and it was extremely responsive. I also find that pages seem to load faster. 

When you open a new tab with Ctrl T or the plus sign you are presented with a home page of your history with thumbnails of everywhere you have been recently. This is a different approach and I think I like it. You also have access to a search panel and you are asked the first time you install if you would like Google to be the default search engine. 

Google suggest has also been incorporated into the search / URL bar which double up as the same field. There is no separate search field, which really does makes sense once you start playing around with it. The suggestion seems rock solid too. Page search is also very intuitive and has page highlighting as you skip through each occurrence of your word search. 

Developer tools

One of the big reasons a lot of people use Firefox, at least web developers and designers is the developer add-ons, namely Web Developer and Firebug. Chrome does have built in developer tools similar to Web Developer and Firebug and although not quite as full featured they are a far more powerful default tool set than I have seen in any browser to date. To access an inspector type dialog you can right click the page and select Inspect Element. This will give you a Firebug style interface. There’s also the typical view source and a JavaScript debug screen. 

Another interesting addition to the browser world is a task manager. This shows you exactly what is happening in your browser and what pages are being resource hogs. You can end any task here which consist of tabs, flash and other plugins. The browser is supposed to keep running even if something fails in one of the tabs. There is also a link at the bottom of the task manager called Stats for nerds which will give more details about what’s going on. You can also open dialogs and still use the browser at the same time.

Privacy

Of course I know what a lot of people are thinking when they see a page full of pages they have recently visited along with thumbnail screenshots. What about my privacy? Well aside from being able to clear your history there is also an interesting tab mode called “incognito” or “porn mode” as some of the blog sphere have started calling it. Google even adds some funny humour to the description when you go into incognito mode. 

Going incognito doesn’t affect the behavior of other people, servers, or software. Be wary of:

• Websites that collect or share information about you
• Internet service providers or employers that track the pages you visit
• Malicious software that tracks your keystrokes in exchange for free smileys
• Surveillance by secret agents
• People standing behind you

So keep in mind it won’t work when people are standing behind you. 

Is there anything bad about it so far?

I would not go so far as to say there is anything bad, just some things that are missing. When I right click on an image I would like to see more options such as view image or a view background image similar to Firefox. There is however a copy image to new tab. I would also like to see a print preview, I could not find one. An advanced configuration screen like Firefox has would also be nice, maybe there is one, I have not dug very deep yet. Obviously it would also be nice to have my favourite FireFox plugins, but to be honest I can’t say too many bad things about Chrome so far. This may be my new surfing browser of choice. For now Firefox will remain my development browser of choice.

Final thoughts

This is a really polished first release. The interface is lightweight and clean. It does feel very Google like and I can’t wait to see what they will do with Chrome in the future. I’m sure there will be even more reason to use Chrome in the near future, like Gears enabled web sites that offer a lot more than non-gears enabled web sites. Google has created many duds in the past, but I really don’t think this is one of them. So far I am very impressed and I will continue to use the browser for a week or so and see how things work out. Why not give it a try yourself.

This is really big news and probably really bad news for Microsoft. Google has already released Gears a browser add-on which allows Google to jump start browsers ahead into more modern standards. Chrome will use webkit, the same engine that Safari uses, but it will not use the webkit Javascript engine. It will use it’s own, which should make apps run much faster and with more features.

Could this really be Google’s entrance into the desktop market? I believe the future of applications is online. Everything is headed in that direction. More and more people are accessing their apps and data in multiple places and on multiple devices, and right now the major player in that space is Google.

Update: Google Chrome – first impressions are the most important

More info at TechCrunch:
Meet Chrome, Google’s Windows Killer
First Images of Google Chrome
No Joke: Google Introduces The Chrome Browser With A Cartoon

The other great news is that if you have been posting to a lot of blogs with the same email address and they have Gravatar functionality set up, all your old posts will be updated with your personal Gravatar when you sign up for one. Also, if you have posted to a blog without Gravatars and they add the that functionality in the future, your old posts will then show up with your Gravatar.

How does it work?

Gravatars work by passing a few parameters through the URL to the Gravatar website. You tell the site what you are looking for, send an encrypted email address via MD5 hash along with size, default icon location and border colour. Some of these parameters are optional.

Example Gravatar URL

http://www.gravatar.com/avatar.php?gravatar_id=b205b058e095597f982a65a1134a89cc&rating=R&size=40&default=http%3A%2F%2Fwww.ianhoar.com%2Fwp-content%2Fthemes%2Fian_v2%2Fimages%2Fgravatar_default.gif

For people wanting to add Gravatars to their own blog it’s extremely easy with WordPress. There are several ways you can do this. WordPress 2.5 has Gravatar functionality built in by default. You can find out more about this on the WordPress Codex. There are also several plugins that will accomplish this including the official Gravatar WordPress plugin, which is the method I prefer over the built in WordPress functionality and will discuss below.

The reason I like the Gravatar plugin over the default WordPress support is that I find it more flexible. I can use my own image html and use my own CSS class and alt tag right in the HTML theme template. The WordPress Gravatar support generates the image HTML for you automatically and you can use the included class to style it.

Using the WordPress Gravatar Plugin

<img src="<?php gravatar("R", 40, "http://www.ianhoar.com/gravatar_default.gif"); ?>" class="gravatar" alt="<?php comment_author(); ?>" />

• The first parameter in the gravatar() function sets your rating. Gravatars have G, PG, R and X ratings. This setting allows you to set what kind of avatars you want to allow on your blog.
• The second parameter sets your size. In this case 40 x 40 pixels (the default is 80 x 80 pixels).
• The third sets the path for a default avatar if a user does not have a Gravatar.
• There is also a fourth parameter that allows you to set a 1px colour boarder. I prefer to use a custom class for this within the image markup itself.
• I’ve also set the users name as the alt tag for each Gravatar with the comment_author() function.

What if I don’t have WordPress?

You are probably in luck, the Gravatar website has detailed instructions on the Gravatar URL and other plugins for several blogging platforms. You can find a complete list in the Gravatar implementor’s guide.

Scroll down to see my first comment on this article and you will see my Gravatar in action. If you are a blog reader and you post a lot, why not get your own Gravatar today? Feel free to come back here and try it out in the comments section below.

This theme also uses Alex King’s popularity contest plugin. You can see it in the screenshot below on the sidebar; it tracks your most popular posts and displays them on the front page. You do not need to add this plugin to use the theme as there is a function check in the theme that will omit that section if you do not have the plugin activated.

If you like it, flip me an email so I can see how you have used it.

Download WordPress theme and PSD file.

One of the sites I work on that uses WordPress as a CMS needed a share this article with a friend link. I needed this link to appear on some of the pages, but not all of them. I used Lester Chan’s WP-Email; this is a very powerful plugin that allows you to set up an HTML email which can be personalized with the users information and then sent to their friends.

The plugin allows you to embed the email link either in the template or the actual post. Unfortunately I needed something more flexible than that. I needed the share this email with a friend link to appear at the top and bottom of select pages and in a specific place. This is where custom fields come in.

Custom fields can be set up in any post or page through the WordPress admin. You will find the option below the editor. I set up a custom field called share with a value of true. Then in the template I used the following PHP code within the WordPress loop to call the email_link() function.

if (get_post_meta($post->ID, 'share', true)) {
	if(function_exists('wp_email')) { email_link(); }
}

This code checks if share is set to true for this specific post or page ID. If true it then checks if wp_email function exists and if so runs the plugin function email_link. This is a great way to toggle plugins or any chunk of code for select pages in WordPress. Now all I have to do when I want a share this page with a friend link to show up is set the share value to true in the custom field for share.

More on Custom Fields in the WordPress Codex.

I posed a simple question to the crowd – “What does Firefox mean to you?”.

For people who know me, yes that’s me near the end of the video, I forgot all about it. Great video Chris, thanks for sharing.

Check out my previous posts, Firefox Launch Party photos and Toronto Firefox Launch Party.