David Walsh :: PHP, CSS, MooTools, jQuery, and Everything Else

When Webmasters Attack!

2009-11-10T01:44:25Z

CSS-Tricks scribe Chris Coyier wrote a great post titled What Beautiful HTML Code Looks Like where he outlined (with a great image, no less) how a great HTML/PHP file looks when proper programming practices are used. The post was so popular that the featured image was promoted to the Digg homepage. Then the webmasters logged out of their guild chat long enough to bless the Digg comments with their wisdom. I present to you…

When Webmasters Attack!

Also, what kind of web designer doesn’t already know this? It’s called being organized. However, all that white-space is going to add-up and waste bandwidth, which makes this “beautiful code” (a self-serving, inaccurate, subjective description) not-so-perfect.

What kind of web designer doesn’t know how easy it is to GZIP content which compresses/eliminates all of the extra whitespace that makes code more maintainable?

I don’t think <?php .. is valid HTML 5 either.

This isn’t a “Hello Kitty” picture, Webmaster, so please don’t comment. This will get parsed by PHP and output as HTML.

I link to one stylesheet. It works on firefox, safari and ie8.
If you can’t be bothered to upgrade your browser, I can’t be bothered with you.
None of this If IE>blabla shit.
Oh, and spare me the “but i need IE6 to use some of the software at my office”. I DONT CARE! Use a more recent browser to surf the internet, and stop spreading viruses because you’re too lazy.

I was going to ask you, Webmaster, about your clients’ web visitors and the money they’d be losing by turning away persons with IE6 and IE7 browsers but then I realized I took them all from you. Apparently the order of importance goes: you, client, visitors. That’s completely backward.

…The irony of this article is that it’s one giant PNG image. Further proof that the most beautiful HTML is the nonexistent kind.

Apparently Chris should have used a JPEG?

Why I am not surprised to see a MacOS window?

Because you’re a psychic? WTF is that supposed to mean?

PHP in a .HTML file?
change the title to “What Beautiful HTML Code Looks Like [infoFAIL]“

As long as you’re going to ignore the main point of the post and be a smart ass about the PHP/HTML, I’ll point out that Chris added a .htaccess directive to parse .html files as PHP. Ouch, sick burn!

No title attributes in the anchor tags. Since when does that make for beautiful HTML?

The article isn’t called “What Beautiful SEO Looks Like”.

This page has a story, a sidebar, and a footer. ‘Real’ websites are far more dynamic than this, and by ‘real’ I mean ones that people will go to. Complex websites have complex markup. You shouldn’t be bragging just because you’ve passed your w3schools tests.

You’re right. What he should really brag about are the dozens of thousands of RSS followers and his status within the community.

I get it but to some point it gets stupid. Stop accommodating specific browsers. If the web page loads properly then good but if it doesnt and looks broken then that tells he consumer to upgrade their fucking browser! It should be that simple.

Another lazy, ignorant idiot that doesn’t understand that he isn’t important — his clients and their visitors are. This person clearly doesn’t get it.

In the end…

Thank you again, Webmaster, for reminding me why I should be so proud of the work I do. Without you I couldn’t pay for house, cars, and fine wine. Keep up the good work so I can keep up my fine life!

Download PDF

Don't forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around! Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

When Webmasters Attack!

Bold Web Predictions for 2010

2009-11-09T13:44:43Z

With another year coming to a close, it’s time to look toward the near future. The following are my predictions for the web in 2010.

Twitter will steal a bit of Google’s search thunder.

Twitter challenge Google search? You bet. The advantage twitter has over Google search is that Twitter provides almost to-the-second search results so if you want the most recent content, you can hit Twitter. While Google analyzes static content, Twitter provides you the “buzz”, or most recently/frequently talked about links/information in a condensed format. Sometimes fewer options and information is a good thing.

Gmail and GChat will slowly become Google Wave.

Wave is clearly Google’s successor to vanilla email (via Gmail) and instant messaging. Don’t look for Gmail to disappear completely during 2010 but I expect Wave to completely integrate email capabilities by the end of 2010.

Facebook will grow in popularity despite continuing to disappointing its own users; Your mother will join Facebook.

Unfortunately Facebook will continue to add features that make their site more difficult to use and, in doing so, will continue to disregard the fury of its users. Facebook will continue to “out-think the room” in the features it adds. Facebook will also push its “Lite” version more toward an older audience. Your mother, in turn, will join. MySpace will continue to become the Geocities of social websites.

Internet Explorer 6 support will finally be dropped from 90+% of websites.

Many websites have already dropped IE6 support, which I feel is too soon, but we should all be able to rejoice by the end of 2010. Windows 7 will have been out for over a year and IT departments will be pushed into upgrading from XP so as to not allow employees to be two operating system versions behind. Persons with older PCs will also opt to upgrade to a newer system due to highly competitive pricing by Dell, Compaq, and Toshiba.

Webkit-based browsers will overtake Firefox; Mozilla will face a Web Designer/Developer rebellion.

Google Chrome has quickly become a developer favorite during 2009 and there’s no reason to believe that affection will slow during 2010. Expect Chrome to debut a flexible plugin system during 2010 which will meet or exceed the flexibility provided by Firefox. As a result of Firebug’s bugs and memory problems, Mozilla will start to draw the ire of the developers that made them so popular.

Windows 7 will be a giant success (on a Windows level).

Due to the garbage OS known as Vista and continued successful marketing by Microsoft, Windows 7 will become a huge success. Lets not discount the improvements made by Windows 7 though — its UI and functionality improvements are to be recognized. IT departments will most definitely be pushed to update their outdated XP machines, begrudgingly or not. Mac fanboys wont notice a thing.

The MooTools javascript framework will boom in popularity thanks to the plugin forge and MooTools 2.

Having a central repository for quality MooTools plugins will increase the usage of the javascript framework. MooTools 2, with its improvements in every piece of the framework, will turn the heads of developers using other libraries. I also foresee users of other frameworks, looking for a more advanced OOP approach, giving MooTools a solid shot.

Digg will completely lose its developer/designer userbase and become “just another funny pics/vids” site.

Diggers’ habits of promoting stupid pictures and videos will essentially ruin that last shreds of credibility the site has left and users will continue to leave. Kevin Rose will take “less of a role” with Digg in an effort to distance himself from Digg’s direction.

The David Walsh Blog will continue to ascend.

More sweet MooTools, jQuery, CSS, PHP, and AJAX tutorials on the way…but then again, you already knew this.

What do you think? Am I crazy? Are these easy predictions? Tell me!

Download PDF

Fixing mod_rewrite and .htaccess on GoDaddy Hosting

2009-11-05T13:24:52Z

I recently launched a new website on GoDaddy shared hosting. The website required mod_rewrite for SEO-friendly URLs. GoDaddy provides mod_rewrite but every time I tried to hit a two-deep URL, I would get a 404 error. Here’s what I had:

# Mod Rewrite
Options +FollowSymLinks
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

The fix to this problem was to add the following directive before my mod_rewrite directives:

#Fix Rewrite
Options -Multiviews

Tada! The URLs began working and the website’s SEO has taken off!

Download PDF

New York Times-Style Text Selection Widget Using MooTools or jQuery

2009-11-06T22:08:31Z

Aaron Newton made a great request to me last week: why not make my MooTools Documentation Bookmarklet function more like the New York Time’s text selection widget. NYT’s text selection widget listens for text selection and presents the user with a “search” icon they may click on to learn more about that term. I’ve tried to answer that challenge — not in bookmarklet form but in website widget form.

View MooTools Demo View jQuery Demo

The Sample HTML

<div id="content-area">
	.htaccess AJAX Apache / Server APIs Blog Bookmarking / Social Books Browsers CSS / Design Google Guest Blogger Hosting / Domain Javascript jQuery
	link() Microsoft MooTools MySQL Optimization PHP Poll rand() Security Shell Theory / Ideas Usability / Accessibility XML / XHTML
	This blog is targeted toward all levels of web designers and developers. All web topics are discussed, including CSS, Javascript (MooTools and jQuery), PHP, and more.
</div>

The above code is next to meaningless per the widget — I simply want to illustrate the area I’d like it to work in has an ID of content-area.

The MooTools Javascript

window.addEvent('domready',function(){
	(function($) {
		//gets the selected text
		var getSelection = function() {
			return $try(
				function() { return window.getSelection(); },
				function() { return document.getSelection(); },
				function() { 
			        var selection = document.selection && document.selection.createRange();
					if(selection.text) { return selection.text; }
					return false;
			      }
			) || false;
		};
		//vars 
		var url = 'http://davidwalsh.name/?s={term}', selectionImage;
		//event to listen
		$('content-area').addEvent('mouseup',function(e) {
			var selection = getSelection();
			if(selection && (selection = new String(selection).replace(/^\s+|\s+$/g,''))) {
				//ajax here { http://davidwalsh.name/text-selection-ajax }
				if(!selectionImage) {
					selectionImage = new Element('a',{
						href: url,
						opacity:0,
						id: 'selection-image',
						title: 'Click here to learn more about this term',
						target: '_blank'
					}).inject(document.body,'top');
				}
				//handle the every-time event
				//alert(selection);
				selectionImage.set('href',url.replace('{term}',encodeURI(selection))).setStyles({
					top: e.page.y - 30,	//offsets
					left: e.page.x - 13 //offsets
				}).tween('opacity',0);
			}
		});
		
		$(document.body).addEvent('mousedown',function() {
			//hider
			if(selectionImage) { selectionImage.tween('opacity',1); }
		});
		
	})(document.id);
});

During the mouseup event within the selected container (content-area), we determine if any text has been highlighted. If so, we:

Insert the A element if it has not yet been injected into the body.
Change the A element’s URL to accommodate for the new search term.
Position the element to at an offset position above where the mouse goes up.

During every mousedown event we hide the A element.

The jQuery Javascript

/* attempt to find a text selection */
function getSelected() {
	if(window.getSelection) { return window.getSelection(); }
	else if(document.getSelection) { return document.getSelection(); }
	else {
		var selection = document.selection && document.selection.createRange();
		if(selection.text) { return selection.text; }
		return false;
	}
	return false;
}
/* create sniffer */
$(document).ready(function() {
	var url = 'http://davidwalsh.name/?s={term}', selectionImage;
	$('#content-area').mouseup(function(e) {
		var selection = getSelected();
		if(selection && (selection = new String(selection).replace(/^\s+|\s+$/g,''))) {
			//ajax here { http://davidwalsh.name/text-selection-ajax }
			if(!selectionImage) {
				selectionImage = $('<a>').attr({
					href: url, 
					title: 'Click here to learn more about this term',
					target: '_blank',
					id: 'selection-image'
				}).hide();
				$(document.body).append(selectionImage);
			}
			selectionImage.attr('href',url.replace('{term}',encodeURI(selection))).css({
				top: e.pageY - 30,	//offsets
				left: e.pageX - 13 //offsets
			}).fadeIn();
		}
	});
	$(document.body).mousedown(function() {
		if(selectionImage) { selectionImage.fadeOut(); }
	});
});

Follows the same principal as above.

View MooTools Demo View jQuery Demo

Ideas & Enhancements

Depending on your philosophy, you may want to implement a minimum character check as well:

if(selection && (selection = new String(selection).replace(/^\s+|\s+$/g,'')) && selection.length > 4) { //5 char min

You may want to also fidget with adding/modifying text selection with keyboard keys as well. I’ve chosen to pass on that.
Saving the selection content via AJAX for analytical reasons may not be a bad idea either.

Have any other ideas for improvement? Would you have any use for this on your website(s)?

Download PDF

Record Text Selections Using MooTools or jQuery AJAX

2009-11-03T14:20:32Z

One technique I’m seeing more and more these days (CNNSI.com, for example) is AJAX recording of selected text. It makes sense — if you detect users selecting the terms over and over again, you can probably assume your visitors are searching that term on Google, Yahoo, etc. I’ve duplicated this functionality using my favorite javascript library, MooTools, and another javascript library, jQuery.

View MooTools Demo View jQuery Demo

The MooTools Javascript

window.addEvent('domready',function(){
	//gets the selected text
	var getSelection = function() {
		return $try(
			function() { return window.getSelection(); },
			function() { return document.getSelection(); },
			function() { 
					var selection = document.selection && document.selection.createRange();
					if(selection.text) { return selection.text; }
					return false;
		      }
		) || false;
	};
	//event to listen
	var selectRequest = new Request({
		url: 'ajax-selection-copy.php',
		method: 'post'
	});
	$('content-area').addEvent('mouseup',function(e) {
		var selection = getSelection();
		if(selection && (selection = new String(selection).replace(/^\s+|\s+$/g,''))) {
			selectRequest.send('selection=' + encodeURI(selection));
		}
	});
});

The first step is attempting to grab the selected text during the mouseup within our designated container. If we find a text selection we fire an AJAX request to a PHP script which will save the text selection.

The jQuery Javascript

/* attempt to find a text selection */
function getSelected() {
	if(window.getSelection) { return window.getSelection(); }
	else if(document.getSelection) { return document.getSelection(); }
	else {
		var selection = document.selection && document.selection.createRange();
		if(selection.text) { return selection.text; }
		return false;
	}
	return false;
}
/* create sniffer */
$(document).ready(function() {
	$('#content-area').mouseup(function() {
		var selection = getSelected();
		if(selection && (selection = new String(selection).replace(/^\s+|\s+$/g,''))) {
			$.ajax({
				type: 'post',
				url: 'ajax-selection-copy.php',
				data: 'selection=' + encodeURI(selection)
			});
		}
	});
});

The MooTools code translated to jQuery.

The PHP

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest' && $selection = trim($_POST['selection'])) {
	mysql_query('INSERT INTO text_selections (selection,date_selected) VALUES(\''.mysql_escape_string(stripslashes($selection)).'\',NOW())');
}

The above PHP code is very primitive. Depending on the setup of your system (PHP Framework, security settings, etc.) you will want to implement additional measures to prevent attacks on this script.

View MooTools Demo View jQuery Demo

Recording text selections is a great way to discover what topics and/or terms your audience is interested in. You may also want to provide more information on these terms within posts.

What are your thoughts on this? Do you think this is too much like Spyjax? Perfectly OK?

Download PDF

An Open Letter to You, Webmaster II

2009-11-02T14:12:46Z

Dear Webmaster,

It’s been over a year since I last wrote. Business is booming for me which reminded me to get in touch with you again. I’m shocked at the advancements you’ve made!

Wow — you’ve gotten acquainted with javascript frameworks! In fact, it appears you’ve gotten so good with the popular javascript frameworks that you’re using multiple in each of your client websites. I see jQuery, MooTools, and Dojo in the same page! Good idea — the more frameworks you add to the page, the more plugins you can add without needing to code any javascript yourself. Well thought-out. I also see that you’re adding javascript frameworks for simple getElementById() selection — why not? I’m sure you’ll use more advanced javascript on your client’s website at some point, so best to include the libraries now.

I also noticed that you’ve completely dropped support of Internet Explorer 6. My favorite touch is the “upgrade your browser” message you’ve added to your client websites, no doubt without their permission. I admire your resolve — why should you go through the hassle of spending an extra hour to make your site work in IE6? Let the visitor suffer and the client lose business — you don’t need the headache of dealing with IE6. Another intelligent philosophy.

You’ve obviously taken a search engine optimization class because I can see loads of keywords in every sentence within the content area. Writing content for the user is overrated — writing content for Google? Brilliant! Who cares if the sentences are so bloated the visitor can’t read them; they wouldn’t have gotten to the client’s website without Google! And I see that despite no search engines still supporting meta keywords, you’re still selling them. The client doesn’t know any better so we’ll keep that between you and I. I also see that your page file names are stuff with 5-10 keywords…genius! Those will most definitely rank highly!

I see you’ve chosen to keep your CSS verbose. Shorthand CSS is clearly a fad that you aren’t going to get tricked into — clever thinking! Of course shorthand CSS is less code but hell, there’s a lot to remember when you use shorthand CSS! And using text-transform to capitalize letters? Please! Why use CSS when you can simply capitalize verbiage with PHP’s or easier yet, type in the text with caps-lock cemented down?

You’ve added your personal Twitter feed to your own website — great! Sure you often cuss in your tweets and post links to inappropriate media but you SOMETIMES post web-relevant tweets which will help you gain clients. What’s also impressive is that you’ve implemented Google Adsense on your website — extra income FTW! Who cares if ads for other web design agencies are shown? They already on your website so they’ve found their desired vendor — you!

Your website also states that you offer no phone support, only email support within limited hours per day. Now that’s an idea based on convenience…not for the customer, but for you. An overwhelming theme with your services. And I understand completely — you have a busy life! It’s not fair that a client call and interrupt anything you’re doing.

As always Webmaster, I appreciate what you do. A respected Senior Web Developer like myself cannot put food on the table without help from people like you. You’re a dying breed, Webmaster. Stay strong my friend — serious Web Developers like me need you out there.

Sincerely,

David Walsh
Senior Web Developer

Download PDF

Create a Sprited Navigation Menu Using CSS and MooTools

2009-10-29T13:46:13Z

CSS sprites are all the rage these days. And why shouldn’t be? They’re easy to implement, have great upside, and usually take little effort to create. Dave Shea wrote an epic CSS sprites navigation post titled CSS Sprites2 – It’s JavaScript Time. In his post he outlined a method for enhancing the CSS sprite menu with jQuery. I loved his post so much that I converted his jQuery CSS sprites menu to MooTools.

View Demo

The Sprite Image

This is a great example of an efficient, useful sprite image.

The HTML

<ul id="nav">
	<li id="home" <?php echo $current == '' || $current == 'home' ? 'class="current"' : ''; ?>><a href="?home">Home</a></li>
	<li id="about" <?php echo $current == 'about' ? 'class="current"' : ''; ?>><a href="?about">About</a></li>
	<li id="services" <?php echo $current == 'services' ? 'class="current"' : ''; ?>><a href="?services">Services</a></li>
	<li id="contact" <?php echo $current == 'contact' ? 'class="current"' : ''; ?>><a href="?contact">Contact</a></li>
</ul>

My code mostly mirrors the original ALA post’s code but I’ve chose to use IDs instead of CSS classes.

The CSS

#nav { width: 401px; height: 48px; background: url(sprites-blue-nav.gif) no-repeat; position: absolute; top: 100px; left: 100px; padding:0; }
#nav li { display: inline; }
#nav li a:link, #nav li a:visited { position: absolute; top: 0; height: 48px; text-indent: -9000px; overflow: hidden; z-index: 10; }

#home a:link, #home a:visited { left: 23px; width: 76px; }
#home a:hover, #home a:focus { background: url(sprites-blue-nav.gif) no-repeat -23px -49px; }
#home a:active { background: url(sprites-blue-nav.gif) no-repeat -23px -98px; }
#home.current a:link, #home.current a:visited { background: url(sprites-blue-nav.gif) no-repeat -23px -147px; cursor: default; }
.nav-home, .nav-home-click { position: absolute; top: 0; left: 23px; width: 76px; height: 48px; background: url(sprites-blue-nav.gif) no-repeat -23px -49px; }
.nav-home-click { background: url(sprites-blue-nav.gif) no-repeat -23px -98px; }

#about a:link, #about a:visited { left: 100px; width: 82px; }
#about a:hover, #about a:focus { background: url(sprites-blue-nav.gif) no-repeat -100px -49px; }
#about a:active { background: url(sprites-blue-nav.gif) no-repeat -100px -98px; }
#about.current a:link, #about.current a:visited { background: url(sprites-blue-nav.gif) no-repeat -100px -147px; cursor: default; }
.nav-about, .nav-about-click { position: absolute; top: 0; left: 100px; width: 82px; height: 48px; background: url(sprites-blue-nav.gif) no-repeat -100px -49px; }
.nav-about-click { background: url(sprites-blue-nav.gif) no-repeat -100px -98px; }

#services a:link, #services a:visited { left: 183px; width: 97px; }
#services a:hover, #services a:focus { background: url(sprites-blue-nav.gif) no-repeat -183px -49px; }
#services a:active { background: url(sprites-blue-nav.gif) no-repeat -183px -98px; }
#services.current a:link, #services.current a:visited { background: url(sprites-blue-nav.gif) no-repeat -183px -147px; cursor: default; }
.nav-services, .nav-services-click { position: absolute; top: 0; left: 183px; width: 97px; height: 48px; background: url(sprites-blue-nav.gif) no-repeat -183px -49px; }
.nav-services-click { background: url(sprites-blue-nav.gif) no-repeat -183px -98px; }

#contact a:link, #contact a:visited { left: 281px; width: 97px; }
#contact a:hover, #contact a:focus { background: url(sprites-blue-nav.gif) no-repeat -281px -49px; }
#contact a:active { background: url(sprites-blue-nav.gif) no-repeat -281px -98px; }
#contact.current a:link, #contact.current a:visited { background: url(sprites-blue-nav.gif) no-repeat -281px -147px; cursor: default; }
.nav-contact, .nav-contact-click { position: absolute; top: 0; left: 281px; width: 97px; height: 48px; background: url(sprites-blue-nav.gif) no-repeat -281px -49px; }
.nav-contact-click { background: url(sprites-blue-nav.gif) no-repeat -281px -98px; }

Unfortunately there’s plenty of CSS. That’s generally the one downside of using sprites but the payoff comes with less requests to the server. My CSS differs from the original ALA post in that I accommodate for my IDs.

The MooTools Javascript

(function($) {
	window.addEvent('domready',function() {
		$('nav').getElements('li').each(function(li) {
			//settings
			var link = li.getFirst('a');
			//fix background image
			if(!li.hasClass('current')) {
				link.setStyle('background-image','none');
			}
			//utility div
			var div = new Element('div',{
				'class': 'nav-' + li.get('id'),
				opacity: 0
			}).inject(li);
			//background imagery
			li.addEvents({
				mouseenter: function() {
					div.fade('in');
				},
				mouseleave: function() {
					div.fade('out');
				},
				mousedown: function() {
					div.addClass('nav-' + li.get('id') + '-click');
				},
				mouseup: function() {
					div.removeClass('nav-' + li.get('id') + '-click');
				}
			});
		});
	});
})(document.id);

My MooTools version is less code and slightly more efficient as I’m not creating and disposing of the same DIVs over and over as the user hovers over each menu item. The menu has original, selected, hovered, and mousedown states. Awesome!

View Demo

Do you use sprites for any of your menus? Share a link to a few — I’d love to see what you’ve done!

Download PDF

Rounded Corners in Internet Explorer

2009-10-28T19:41:52Z

One of the reasons that I love Firefox and Webkit-based browsers (Chrome, Safari) is the ability to effortlessly create rounded-corner elements using pure CSS:

.round	{ -moz-border-radius:12px; -webkit-border-radius:12px; }

As you probably already know, IE doesn’t allow you to create rounded corners without using images or endless hacking. Enter the CurvyCorners javascript project. CurvyCorners allows you to quickly create rounded corners within Internet Explorer.

View Demo

The CurvyCorners Javascript

<!-- SIMPLY INCLUDE THE JS FILE! -->
<script type="text/javascript" src="curvy.corners.trunk.js"></script>

CurvyCorners detects the usage of “-webkit-border-radius” and “moz-border-radius” on DOM elements and works its magic to duplicate the effect in IE using a series of small DIVs. There are no images involved. You may also identify specific elements to apply rounded corners to:

var settings = {
			tl: { radius: 12 },
			tr: { radius: 12 },
			bl: { radius: 12 },
			br: { radius: 12 },
			antiAlias: true
		 };
/* moooo */
$$('.round').each(function(rd) {
	curvyCorners(settings,rd);
});

MooTools + Curvy Corners

CurvyCorners is known to brick your MooTools code. The trunk code fixes those issues.

View Demo

Don’t let Internet Explorer’s refusal to implement rounded corners via CSS keep your websites from being as dynamic as possible! CurvyCorners helps make rounded corners in IE possible!

Download PDF

Event Delegation with MooTools

2009-10-27T15:36:35Z

Events play a huge role in javascript. I can’t name one website I’ve created in the past two years that hasn’t used javascript event handling on some level. Ask yourself: how often do I inject elements into the DOM and not add an event to them? For me it’s very rare. For this reason I’m proud and excited for the release of MooTools 1.2.4’s Event.Delegation code.

WTF is Event Delegation?

Event delegation is the process of assigning an event listener to a parent for all of its children instead of assigning the same event to every child.

View Demo

Some Sample HTML

<ul id="link-list">
	<li><a href="http://davidwalsh.name">David Walsh Blog Link 1</a></li>
	<li><a href="http://davidwalsh.name">David Walsh Blog Link 2</a></li>
	<li><a href="http://davidwalsh.name">David Walsh Blog Link 3</a></li>
</ul>

A list with 3 list item elements which contain a link. For the sake of my example, this list will have list items added to it and we want an alert to pop up any time a link within the list is clicked.

The MooTools Javascript Event Delegation Syntax

window.addEvent('domready',function() {
	/* delegate */
	document.id('link-list').addEvent('click:relay(a)', function(e){
		e.stop();
		alert('you clicked a link!');
	});
	/* 
		Add link to show event delegation works!
		Notice how we haven't assigned an event to this specific element.
		We already added the event to the list element itself
	*/
	document.id('add-link').addEvent('click',function() {
		var li = new Element('li').inject('link-list');
		var link = new Element('a',{ text:'David Walsh Blog', href:'http://davidwalsh.name'}).inject(li);
	});
});

All you need to do is add :relay to the parent selector and place the “children” match inside the relay pseudo selector. You’ll probably question how :relay works because the “:” syntax is used for pseudo selectors. The Element.Delegation javascript download overwrites the addEvent, removeEvent, and fireEvent methods to accommodate for the :relay syntax.

Event Delegation Replaces…

var links = document.id('link-list').getElements('li');
links.each(function(link) {
	link.addEvent('click',function() {
		//assign actions here
	});
})

Why collect and iterate through elements to add events when you can simply use event delegation?

View Demo

Event delegation is a great way to avoid repeating the same event assignments for elements within a parent element, especially when you are adding elements into the page dynamically. If you’ve not upgraded to MooTools 1.2.4 yet, I hope this is just the kick in the pants you need!

Download PDF

7 Signs I Knew I Was Born To Be a Programmer

2009-10-26T13:07:25Z

This will probably shock you but I’m a programmer. Not a designer, not a copywriter, just a simple programmer. I’ve done some self analysis and realized that becoming a programmer wasn’t a choice — it was destiny. The following is my logic for why I became a programmer.

1. I’m Allergic to the Sun

I’m not as hot as Kate Beckinsale but I’m just as allergic to the sun as she was in Underworld. The second I see the sun I sneeze. What’s odd is that I used to play outside endlessly as a child — it wasn’t until I became a programmer that I developed this strange allergy to the sun. Today my skin is very white — a monitor tan is the only tan I get these days.

2. I Get Nosebleeds Often

No true nerd gets their official credentials without proof of frequent nosebleeds. Unprovoked and unexplainable, my nosebleeds just appear out of thin air…literally. These pick up quite a bit during the winter. I’ve broken my nose three times but no way to confirm that being a contributing factor.

3. I Have No Immune System

Most of my “vacation days” (PTO) are used up by illnesses that range from migraine headaches to pneumonia to bronchitis. I have the sniffles 365 days a year. I’ll wake up with a sore throat in mid-June. My body has no desire to fight viruses. A perfect excuse to avoid manual labor and sit behind a monitor inside my condo.

4. I Have No “Real Life” Skills

You know how grown men are supposed to be able to change their oil, cook breakfast for their significant other, and do their own laundry? Yeah, not me. No joke — I tried making eggs a few months ago, messed something up, and my kitchen smelled funky for the rest of the day. I’m a complete train wreck when not located within three feet of a computer.

5. I Have No “Social” Skills; Computer > Human

I’m not what you’d consider a “people person.” I’d rather spend 20 minutes typing an email than 3 minutes on the phone. I simply don’t have that gene. When coworkers say hello to me at work I usually reply with “email me.” I’m charming via email, stone cold in person.

6. I Think I’m Much Smarter Than I Really Am

Like any good egotistical programmer, I feel I’m much smarter than I am. Yeah, I slang terms like “prototypal inheritance”, “event delegation”, and many other impressive programming terms, but can I make eggs? No. Doesn’t matter. Why? Because I can slang terms to people who aren’t computer savvy and help fix email problems. I think I belong in MENSA — most other things I belong in on a seat in the corner of the room with a coloring book and non-toxic crayons.

7. Fashion == null

I cannot stand “bros” that wear $200 jeans and $50 Hollister/Abercrombie/American Eagle T-Shirts. I see a Broseph walk down the sidewalk with white shades and a fro-hawk and choke on my own vomit…..yet I have no problem with wearing one of my 5 MooTools shirts to any event. Wedding? Yes…because MooTools has Class. So simple.

I’m a complete nerd for those scoring at home. The life of a programmer as a tough one…God only knows how I can get through each day.

Download PDF