trakt helps keep a record of what TV shows and movies you are watching. Based on your favorites, trakt recommends additional shows and movies you’ll enjoy. This works as a plugin for XBMC media center that automatically scrobbles all tv shows and movies you watch. We also have plugins for MediaPortal available with several more media centers in the works.

What make trakt better than other “check-in” sites?

Well, the main thing that sets us apart is automatic and realtime scrobbling of all shows and movies. Some of the other sites out there like getglue and miso require a manual check in from your phone or the website. With trakt, we automate that so you don’t even have to remember to check in, the website will just sync up and track silently in the background.

If you don’t have a supported media center (btw, we are definitely focused on expanding our supported media centers), you have the option to manually mark a show as watched. In that sense, it is kinda like a check in and makes the site useful for everyone. There is also the concept of adding something to your library. This means you have the show or movie, but you haven’t watched it yet. When you browse the website it will indicate everything you’ve watched and have in your library so its super easy to see new things to watch.

Community

The trakt community is over 2100 members as of this post and is very active with discussions, ratings (love/hate), and members building up their watching history. We have a full featured API that community members are already leveraging to create custom mashups of their data. Interesting ideas that have been explored include customize charts of your history, mobile apps, and 2 way syncing your entire media collection with the website.

We’re actively developing the social aspects of the site including recommendations, facebook integration, and twitter integration. Stay tuned for that.

Give it a try!

This is a just a quick overview and update why something cliche has been devoid of new content lately. Check out http://trakt.tv and sign up for a free acount! Also follow @trakt for updates!

Just a few friendly tips to keep in mind for your next project. These are in no particular order, just as I thought of them.

1. use comments so others can understand what you are doing
2. do not use any Dreamweaver generated code as your example (in most cases, do the opposite)
3. use a JavaScript framework (my favorite is MooTools), no need to re-invent the wheel for things like ajax
4. try and stick to one framework instead of mixing MooTool and jQuery
5. don’t make functions with a million arguments, just pass a single array for readability and flexibility (think MooTools style)
6. use tabs not spaces
7. use all lowercase filenames and directories
8. even worse, don’t name files in one case and code them in a different (ever heard of a case sensitive filesystem?)
9. use associative arrays where it makes sense, such as multi dimensional arrays and objects (see this post)
10. honestly, who uses Spry anymore?
11. CSS hacks and IE conditionals are cool and all, but learning to code CSS better will almost eliminate any hacks you’ll need
12. keep admin and front end code separated except for shared functions
13. test in all the browsers you need to support
14. code for standard compliance first, then fix as needed for Internet Explorer (see #11, in most cases IE will work well if you code well)
15. avoid flash for things like menus that can easily be accomplished using HTML and CSS
16. avoid inline JavaScript and instead use an external file to keep the HTML clean and maintainable
17. don’t use inline CSS either
18. make sure to secure your ajax pages, don’t want anyone messing with your database
19. keep mobile platforms in mind when thinking about usability
20. public pages should function in IE6, but I’m not too concerned about them looking good

Well, those are 20 things I just thought of. I’m sure I’ll think of more and when I do there will be the inevitable part 2 post.

I’ve created another design called Stack and you can download it for free below. To install it, just unzip the file and upload the stack directory to the galleries directory inside your PowerGallery installation. That’s it! Log in to the admin and you’ll see Stack a new choice on the Choose Design page.

This gallery was created using the ElementStack MooTools plugin. You can see a live demo here. Since PowerGallery uses MooTools 1.2, you can easily create galleries yourself and just drop them into the galleries folder for easy use.

Download the design

This list uses the countries listed on PayPal’s website. PayPal requires that you send the 2-character IS0-3166-1 code to their API. Below I have the name and code combinations.

var countries = [
	{name: 'Afghanistan', code: 'AF'},
	{name: 'Åland Islands', code: 'AX'},
	{name: 'Albania', code: 'AL'},
	{name: 'Algeria', code: 'DZ'},
	{name: 'American Samoa', code: 'AS'},
	{name: 'AndorrA', code: 'AD'},
	{name: 'Angola', code: 'AO'},
	{name: 'Anguilla', code: 'AI'},
	{name: 'Antarctica', code: 'AQ'},
	{name: 'Antigua and Barbuda', code: 'AG'},
	{name: 'Argentina', code: 'AR'},
	{name: 'Armenia', code: 'AM'},
	{name: 'Aruba', code: 'AW'},
	{name: 'Australia', code: 'AU'},
	{name: 'Austria', code: 'AT'},
	{name: 'Azerbaijan', code: 'AZ'},
	{name: 'Bahamas', code: 'BS'},
	{name: 'Bahrain', code: 'BH'},
	{name: 'Bangladesh', code: 'BD'},
	{name: 'Barbados', code: 'BB'},
	{name: 'Belarus', code: 'BY'},
	{name: 'Belgium', code: 'BE'},
	{name: 'Belize', code: 'BZ'},
	{name: 'Benin', code: 'BJ'},
	{name: 'Bermuda', code: 'BM'},
	{name: 'Bhutan', code: 'BT'},
	{name: 'Bolivia', code: 'BO'},
	{name: 'Bosnia and Herzegovina', code: 'BA'},
	{name: 'Botswana', code: 'BW'},
	{name: 'Bouvet Island', code: 'BV'},
	{name: 'Brazil', code: 'BR'},
	{name: 'British Indian Ocean Territory', code: 'IO'},
	{name: 'Brunei Darussalam', code: 'BN'},
	{name: 'Bulgaria', code: 'BG'},
	{name: 'Burkina Faso', code: 'BF'},
	{name: 'Burundi', code: 'BI'},
	{name: 'Cambodia', code: 'KH'},
	{name: 'Cameroon', code: 'CM'},
	{name: 'Canada', code: 'CA'},
	{name: 'Cape Verde', code: 'CV'},
	{name: 'Cayman Islands', code: 'KY'},
	{name: 'Central African Republic', code: 'CF'},
	{name: 'Chad', code: 'TD'},
	{name: 'Chile', code: 'CL'},
	{name: 'China', code: 'CN'},
	{name: 'Christmas Island', code: 'CX'},
	{name: 'Cocos (Keeling) Islands', code: 'CC'},
	{name: 'Colombia', code: 'CO'},
	{name: 'Comoros', code: 'KM'},
	{name: 'Congo', code: 'CG'},
	{name: 'Congo, The Democratic Republic of the', code: 'CD'},
	{name: 'Cook Islands', code: 'CK'},
	{name: 'Costa Rica', code: 'CR'},
	{name: 'Cote D\'Ivoire', code: 'CI'},
	{name: 'Croatia', code: 'HR'},
	{name: 'Cuba', code: 'CU'},
	{name: 'Cyprus', code: 'CY'},
	{name: 'Czech Republic', code: 'CZ'},
	{name: 'Denmark', code: 'DK'},
	{name: 'Djibouti', code: 'DJ'},
	{name: 'Dominica', code: 'DM'},
	{name: 'Dominican Republic', code: 'DO'},
	{name: 'Ecuador', code: 'EC'},
	{name: 'Egypt', code: 'EG'},
	{name: 'El Salvador', code: 'SV'},
	{name: 'Equatorial Guinea', code: 'GQ'},
	{name: 'Eritrea', code: 'ER'},
	{name: 'Estonia', code: 'EE'},
	{name: 'Ethiopia', code: 'ET'},
	{name: 'Falkland Islands (Malvinas)', code: 'FK'},
	{name: 'Faroe Islands', code: 'FO'},
	{name: 'Fiji', code: 'FJ'},
	{name: 'Finland', code: 'FI'},
	{name: 'France', code: 'FR'},
	{name: 'French Guiana', code: 'GF'},
	{name: 'French Polynesia', code: 'PF'},
	{name: 'French Southern Territories', code: 'TF'},
	{name: 'Gabon', code: 'GA'},
	{name: 'Gambia', code: 'GM'},
	{name: 'Georgia', code: 'GE'},
	{name: 'Germany', code: 'DE'},
	{name: 'Ghana', code: 'GH'},
	{name: 'Gibraltar', code: 'GI'},
	{name: 'Greece', code: 'GR'},
	{name: 'Greenland', code: 'GL'},
	{name: 'Grenada', code: 'GD'},
	{name: 'Guadeloupe', code: 'GP'},
	{name: 'Guam', code: 'GU'},
	{name: 'Guatemala', code: 'GT'},
	{name: 'Guernsey', code: 'GG'},
	{name: 'Guinea', code: 'GN'},
	{name: 'Guinea-Bissau', code: 'GW'},
	{name: 'Guyana', code: 'GY'},
	{name: 'Haiti', code: 'HT'},
	{name: 'Heard Island and Mcdonald Islands', code: 'HM'},
	{name: 'Holy See (Vatican City State)', code: 'VA'},
	{name: 'Honduras', code: 'HN'},
	{name: 'Hong Kong', code: 'HK'},
	{name: 'Hungary', code: 'HU'},
	{name: 'Iceland', code: 'IS'},
	{name: 'India', code: 'IN'},
	{name: 'Indonesia', code: 'ID'},
	{name: 'Iran, Islamic Republic Of', code: 'IR'},
	{name: 'Iraq', code: 'IQ'},
	{name: 'Ireland', code: 'IE'},
	{name: 'Isle of Man', code: 'IM'},
	{name: 'Israel', code: 'IL'},
	{name: 'Italy', code: 'IT'},
	{name: 'Jamaica', code: 'JM'},
	{name: 'Japan', code: 'JP'},
	{name: 'Jersey', code: 'JE'},
	{name: 'Jordan', code: 'JO'},
	{name: 'Kazakhstan', code: 'KZ'},
	{name: 'Kenya', code: 'KE'},
	{name: 'Kiribati', code: 'KI'},
	{name: 'Korea, Democratic People\'S Republic of', code: 'KP'},
	{name: 'Korea, Republic of', code: 'KR'},
	{name: 'Kuwait', code: 'KW'},
	{name: 'Kyrgyzstan', code: 'KG'},
	{name: 'Lao People\'S Democratic Republic', code: 'LA'},
	{name: 'Latvia', code: 'LV'},
	{name: 'Lebanon', code: 'LB'},
	{name: 'Lesotho', code: 'LS'},
	{name: 'Liberia', code: 'LR'},
	{name: 'Libyan Arab Jamahiriya', code: 'LY'},
	{name: 'Liechtenstein', code: 'LI'},
	{name: 'Lithuania', code: 'LT'},
	{name: 'Luxembourg', code: 'LU'},
	{name: 'Macao', code: 'MO'},
	{name: 'Macedonia, The Former Yugoslav Republic of', code: 'MK'},
	{name: 'Madagascar', code: 'MG'},
	{name: 'Malawi', code: 'MW'},
	{name: 'Malaysia', code: 'MY'},
	{name: 'Maldives', code: 'MV'},
	{name: 'Mali', code: 'ML'},
	{name: 'Malta', code: 'MT'},
	{name: 'Marshall Islands', code: 'MH'},
	{name: 'Martinique', code: 'MQ'},
	{name: 'Mauritania', code: 'MR'},
	{name: 'Mauritius', code: 'MU'},
	{name: 'Mayotte', code: 'YT'},
	{name: 'Mexico', code: 'MX'},
	{name: 'Micronesia, Federated States of', code: 'FM'},
	{name: 'Moldova, Republic of', code: 'MD'},
	{name: 'Monaco', code: 'MC'},
	{name: 'Mongolia', code: 'MN'},
	{name: 'Montserrat', code: 'MS'},
	{name: 'Morocco', code: 'MA'},
	{name: 'Mozambique', code: 'MZ'},
	{name: 'Myanmar', code: 'MM'},
	{name: 'Namibia', code: 'NA'},
	{name: 'Nauru', code: 'NR'},
	{name: 'Nepal', code: 'NP'},
	{name: 'Netherlands', code: 'NL'},
	{name: 'Netherlands Antilles', code: 'AN'},
	{name: 'New Caledonia', code: 'NC'},
	{name: 'New Zealand', code: 'NZ'},
	{name: 'Nicaragua', code: 'NI'},
	{name: 'Niger', code: 'NE'},
	{name: 'Nigeria', code: 'NG'},
	{name: 'Niue', code: 'NU'},
	{name: 'Norfolk Island', code: 'NF'},
	{name: 'Northern Mariana Islands', code: 'MP'},
	{name: 'Norway', code: 'NO'},
	{name: 'Oman', code: 'OM'},
	{name: 'Pakistan', code: 'PK'},
	{name: 'Palau', code: 'PW'},
	{name: 'Palestinian Territory, Occupied', code: 'PS'},
	{name: 'Panama', code: 'PA'},
	{name: 'Papua New Guinea', code: 'PG'},
	{name: 'Paraguay', code: 'PY'},
	{name: 'Peru', code: 'PE'},
	{name: 'Philippines', code: 'PH'},
	{name: 'Pitcairn', code: 'PN'},
	{name: 'Poland', code: 'PL'},
	{name: 'Portugal', code: 'PT'},
	{name: 'Puerto Rico', code: 'PR'},
	{name: 'Qatar', code: 'QA'},
	{name: 'Reunion', code: 'RE'},
	{name: 'Romania', code: 'RO'},
	{name: 'Russian Federation', code: 'RU'},
	{name: 'RWANDA', code: 'RW'},
	{name: 'Saint Helena', code: 'SH'},
	{name: 'Saint Kitts and Nevis', code: 'KN'},
	{name: 'Saint Lucia', code: 'LC'},
	{name: 'Saint Pierre and Miquelon', code: 'PM'},
	{name: 'Saint Vincent and the Grenadines', code: 'VC'},
	{name: 'Samoa', code: 'WS'},
	{name: 'San Marino', code: 'SM'},
	{name: 'Sao Tome and Principe', code: 'ST'},
	{name: 'Saudi Arabia', code: 'SA'},
	{name: 'Senegal', code: 'SN'},
	{name: 'Serbia and Montenegro', code: 'CS'},
	{name: 'Seychelles', code: 'SC'},
	{name: 'Sierra Leone', code: 'SL'},
	{name: 'Singapore', code: 'SG'},
	{name: 'Slovakia', code: 'SK'},
	{name: 'Slovenia', code: 'SI'},
	{name: 'Solomon Islands', code: 'SB'},
	{name: 'Somalia', code: 'SO'},
	{name: 'South Africa', code: 'ZA'},
	{name: 'South Georgia and the South Sandwich Islands', code: 'GS'},
	{name: 'Spain', code: 'ES'},
	{name: 'Sri Lanka', code: 'LK'},
	{name: 'Sudan', code: 'SD'},
	{name: 'Suriname', code: 'SR'},
	{name: 'Svalbard and Jan Mayen', code: 'SJ'},
	{name: 'Swaziland', code: 'SZ'},
	{name: 'Sweden', code: 'SE'},
	{name: 'Switzerland', code: 'CH'},
	{name: 'Syrian Arab Republic', code: 'SY'},
	{name: 'Taiwan, Province of China', code: 'TW'},
	{name: 'Tajikistan', code: 'TJ'},
	{name: 'Tanzania, United Republic of', code: 'TZ'},
	{name: 'Thailand', code: 'TH'},
	{name: 'Timor-Leste', code: 'TL'},
	{name: 'Togo', code: 'TG'},
	{name: 'Tokelau', code: 'TK'},
	{name: 'Tonga', code: 'TO'},
	{name: 'Trinidad and Tobago', code: 'TT'},
	{name: 'Tunisia', code: 'TN'},
	{name: 'Turkey', code: 'TR'},
	{name: 'Turkmenistan', code: 'TM'},
	{name: 'Turks and Caicos Islands', code: 'TC'},
	{name: 'Tuvalu', code: 'TV'},
	{name: 'Uganda', code: 'UG'},
	{name: 'Ukraine', code: 'UA'},
	{name: 'United Arab Emirates', code: 'AE'},
	{name: 'United Kingdom', code: 'GB'},
	{name: 'United States', code: 'US'},
	{name: 'United States Minor Outlying Islands', code: 'UM'},
	{name: 'Uruguay', code: 'UY'},
	{name: 'Uzbekistan', code: 'UZ'},
	{name: 'Vanuatu', code: 'VU'},
	{name: 'Venezuela', code: 'VE'},
	{name: 'Viet Nam', code: 'VN'},
	{name: 'Virgin Islands, British', code: 'VG'},
	{name: 'Virgin Islands, U.S.', code: 'VI'},
	{name: 'Wallis and Futuna', code: 'WF'},
	{name: 'Western Sahara', code: 'EH'},
	{name: 'Yemen', code: 'YE'},
	{name: 'Zambia', code: 'ZM'},
	{name: 'Zimbabwe', code: 'ZW'}
];

You can simply loop through this array to create a select list for use on your page.

var html = '<select name="country">';
for(var i = 0; i < countries.length; i++) {
	html += '<option value="' + countries[i].code + '">' + countries[i].name + '</option>';
}
html += '</select>';
document.write(html);

Let me know if this list ends up helping you out.

I found an issue today regarding the built in encryption library. Basically, the encrypted string might not be the same thing every time. For example, you might want to encrypt a user’s email address. The first time you might encrypt it on a sign up form. Now on the login page, I want to compare the value the user typed in with the database. The problem is, if I encrypt the email again, it most likely will not match even though the original string is the same!

$this->load->library('encrypt');
$a = $this->encrypt->encode('justin');
$b = $this->encrypt->encode('justin');

echo $a == $b ? 'equals' : 'nope!'; //will print nope!

Behind the scenes, CodeIgniter is basically rotating keys to produce different encrypted strings that decrypt to the same thing. It’s actually a really cool and secure way of handling the encryption, but for the purpose of comparing values (on a login form for example) it just doesn’t work.

Alternatives

So, if you need to do some comparisons using your encrypted data, you have a few alternatives. If you want to stick with PHP, you can make use of the mcrypt_encrypt and mycrypt_decrypt functions. If you want a MySQL solution, look into the encryption functions in their manual.

The new syntax and tags make a lot of sense one you get the hang of it and see the reasoning behind it. The CSS3 and JavaScript enhancements are also pretty slick. Some of things MooTools offers are now integrated as native functionality. I still plan on using MooTools to ensure cross browser support though.

The Links

HTML5 Presentation
View this page in Chrome and you’ll get a great overview of HTML5 and what it offers. I knew pieces of this stuff, but this presentation really pulled things together for me and made sense of all the various concepts. There are lots of interactive demos and code snippets for learning by example.

HTML5 Unleashed: Tips, Tricks and Techniques
This post goes into a lot of details for each component of HTML5 and they have a ton of links with more examples and background. Lots of code in this one too, which I find is a great way to understand HTML5.

The HTML5 Test
Run this in your browser of choice and see how well it stacks up with HTML5 support.

HTML5 Readiness
A great visual representation of all the popular browsers and what HTML5 and CSS3 features they support. I’d check the fixed browser position checkbox at the bottom to make things a tad more clear.

More Links

I add new bookmarks to my delicious quite regularly, so check that out too:
http://delicious.com/barnt/html5

As noted on Adobe Labs, here is what the HTML5 pack offers:

• Introduces the Multiscreen Preview panel , allowing for Live View display on 3 different screen sizes, with Media Query support. (Window > Multiscreen Preview)
• Adds code hinting for the HTML5 Tag Library with new tags, attributes, and properties.
• Updates code hinting for new attributes and values in existing HTML tags.
• Adds code hinting for the following CSS3 specifications: 2D/3D Transformations; Animations; Background and Border; Basic User Interface; Line Layout; Marquee; Media Queries; MultiColumn; Ruby; Text; and Transitions.
• Updates Live View to support <video> and <audio>. (Requires Quicktime installation)
• Improved rendering for CSS3 in Live View.
• Adds HTML5 starter layouts to the New Document Dialog box.
• Offers better rendering for new tags in Design View.

Here is a video that explains some more. It’s a flash video though, so that is sort of an epic fail.

Download the HTML5 pack:
http://labs.adobe.com/downloads/html5pack.html

What is postMessage?

The Mozilla developer docs state it pretty well:

window.postMessage is a method for safely enabling cross-origin communication. Normally, scripts on different pages are only allowed to access each other if and only if the pages which executed them are at locations with the same protocol (usually both http), port number (80 being the default for http), and host (modulo document.domain being set by both pages to the same value). window.postMessage provides a controlled mechanism to circumvent this restriction in a way which is secure when properly used.

The function is called using this syntax:

otherWindow.postMessage(message, targetOrigin);

• otherWindow is a reference to a window object such as the main page or the embedded iframe
• message is a string (i.e. this could be simple text or a json object)
• targetOrigin is the url that is able to receive this message -  this can be set to * for all domains, but it is more secure to explicity set the origin

Setting up the main page

Here is what the main page HTML looks like (just the main body code). Assume this page is hosted on somethingcliche.com which is our main origin. The origin is passed into the iframe PHP page so that we can easily know the origin to send the message back to.

<iframe id="othersite" src="http://othersite.com/m.php?origin=http://somethingcliche.com"></iframe>

Here is the JavaScript that sets up a message listener for the main page. Once a message is received, it will alert the details.

var onmessage = function(e) {
  alert(e.data + ' - origin: ' + e.origin);
}

if(typeof window.addEventListener != 'undefined') {
  window.addEventListener('message', onmessage, false);
}
else if(typeof window.attachEvent != 'undefined') {
  window.attachEvent('onmessage', onmessage);
}

Setting up the iframe page

This iframe page is fairly basic. On load of the page, it will use the postMessage function to send a message back to the main page. Once the main page receives the message, it will trigger its listener that we defined and alert the message.

window.onload = function() {
  window.parent.postMessage('from the iframe!', '<?php echo $_GET['origin']; ?>');
};

So, what’s the point?

This is obviously a very simplified example, but this function has some pretty cool applications. I have used this technique to submit a form on the main page to the iframe (set the target on your form to the iframe’s name), have the iframe do some verification, then post a message back to the parent indicating success or failure. Some other uses include simple remote authentication, resizing the iframe based on the remote content length, and really anything where you don’t want to leave the current page but still want to interact with a remote domain staying all client side.

Browser compatibility

The postMessage function is available in Chrome, Safari 4, Firefox 3, and Internet Explorer 8.

What about IE6 and IE7?

Ah yes, what good is a pretty slick implementation without completely destroying the concept to make it work in IE6 (and in this case IE7)?

Since the postMessage function is not supported in IE6 and IE7, we have to code a workaround. In this case, using the hash (stuff after the # in the url) will work. The main page needs to be updated to use this JavaScript. Basically it will use postMessage if it can, otherwise it will create a polling function to look for a change in the url.

var onmessage = function(e) {
  alert(e.data + ' - origin: ' + e.origin);
}

if(window.postMessage) {
  if(typeof window.addEventListener != 'undefined') {
    window.addEventListener('message', onmessage, false);
  }
  else if(typeof window.attachEvent != 'undefined') {
    window.attachEvent('onmessage', onmessage);
  }
}
else {
  var _origURL = document.location.href;
  var _poller = function() {
    if(document.location.href != _origURL) {
      alert(document.location.href);
      //split on the # to get the message
      clearInterval(_pollerInterval);
    }
  }
  var _pollerInterval = setInterval(_poller, 1000);
}

The iframe url also needs an additional parameter passed to it so we can get the original url to append the hash to.

<iframe id="othersite" src="http://othersite.com/m.php?url=http://somethingcliche.com/page.php&origin=http://somethingcliche.com"></iframe>

The JavaScript in the iframe needs to be updated to have a similar condition.

window.onload = function() {
  if(window.parent.postMessage) {
    window.parent.postMessage('from the iframe!', '<?php echo $_GET['origin']; ?>');
  }
  else {
    window.parent.location = '<?php echo $_GET['url']; ?>'.replace( /#.*$/, '' ) + '#ie6sucks';
  }
};

Code cleanup

The code above hopefully makes sense and illustrates the postMessage function and how you can use it. Some of the values are hard coded since it was more clear that way, so just keep in mind you should clean up the code to use dynamic values where possible.

Now you might be saying “but I don’t have any extra money to set aside for retirement!”. That is valid concern. However, as a first step you just need to get something in place. The biggest hurdle is getting something setup. Once you have your system in place, you’ll be way more likely to contribute – and once you set this up to be automatic you won’t even miss the money. You need to start early so your investment returns can pile up over the next 30 to 40 years.

401k

If your job offers a 401k or similar retirement plan, make sure you are enrolled! Check with your HR person if you aren’t sure and get this started. This is especially important if your company provides a match – that is basically free money they are contributing on your behalf. They will match your contributions up to a certain limit. For example, they might match the first 3% you put in yourself. So I put in 3% and they put in 3% for a total of 6% of my salary – that basically doubles my contribution and I’ve already made an insane return on my investment! Pretty sweet and there is really no excuse to not take advantage of your companies retirement benefits.

IRA

The next thing I would recommend is setting up a IRA. You contribute to a traditional IRA on a pre-tax basis while a Roth IRA is post-tax. If you want to lower your income for tax purposes, then a traditional IRA might make sense for you. When you take out the money during retirement, you will be taxed on the money. I prefer the Roth IRA myself since you pay taxes now and when you withdraw during retirement it will be tax free since you’ve already been taxed. Who knows what the tax rates will be in 30 years, I just think it makes a lot more sense to bite the bullet now and not have to worry about taxes later.

A Roth IRA has limits on how much you can contribute, for 2010 the limit is $5000. For more info: http://en.wikipedia.org/wiki/Roth_IRA

Rollover your old 401k to an IRA

Employer sponsored programs such as a 401k generally have much higher fees and more limited investment options than an IRA does. This one is confusing to me, but most 401k plans can get away with saying they have no fees, but they are likely gouging you for 2-3% behind the scenes! As a comparison, my Vanguard Roth IRA has just .20% of fees.

The first step is just get this stuff setup, then you can worry about how much to contribute.

When you call $$(), it will return an array of all the elements found matching your criteria. In addition to some CSS3 selectors you might have already seen, MooTools implements some custom ones that are very helpful as well.

Note: even if it only finds a single element, $$() will return an array.

Simple Usage

Simple uses cases include specifying a tag name, an elements id, or an element reference. You can comma separate the argument list to have the method search for multiple things. Here are some examples:

//returns all anchor elements in the page
$$('a');

//returns all anchor and bold tags on the page
$$('a', 'b'); 

//returns an array containing only the element with the id 'myElement'
$$('#myElement');

//returns an array of all anchor tags with the class 'myClass'
//within the DOM element with id 'myElement'
$$('#myElement a.myClass');

//creates an array of all elements and selectors passed as arguments
$$(myelement1, myelement2, 'a', '#myid, #myid2, #myid3');

Advanced Selectors

Now this is where you can really do some cool stuff. If you combine $$() with the built in Selector support in MooTools, you can build an array of the exact DOM elements you want. Check out these example:

//returns all mailto links
$$('a[href^=mailto:]');

//returns all text fields
$$('input[type=text]');

//return all elements that are checked within #form
$$('#form input:checked');

//returns all paragraphs with my name
$$('p:contains("Justin")');

//all input fields except buttons
$$('input:not([type="submit"])');

//set external links
$$('a[rel=external]').set('target', '_blank');

//get all even table rows for #table
$$('#table td:even');

Here is a cool example that will allow you to zebra stripe a table. This assumes classes are defined called even and odd.

$$('table > tr:even').addClass('even');
$$('table > tr:odd').addClass('odd');

Linkage

As you can see from the above examples, selectors are pretty awesome and give you ultimate power over the DOM. If you come up with some crazy selectors, please leave a comment! For more info on Selectors, check out these links:

http://mootools.net/docs/core/Utilities/Selectors
http://www.clientcide.com/code-snippets/manipulating-the-dom/selector-sugar-for-mootools/
http://mootools.net/blog/2007/06/11/selectors-on-fire-a-tale-of-pseudoselectors/

Here are a few examples to illustrate it better. This first example has 2 normal CSS rules, the 2nd rule will take precedence and the div will have a blue background.

div {
  background-color: yellow;
}
div {
  background-color: blue;
}

However, if we apply the !important keyword to the first rule, the div will have a yellow background.

div {
  background-color: yellow !important;
}
div {
  background-color: blue;
}

Everyone’s favorite browser

Ah yes, what would a CSS tip be without stating the obvious that Internet Explorer sucks and won’t necessarily work as intended. IE6 will not respect the !important keyword and will just use the standard top down technique when applying the CSS. IE7 and above seem to work ok as long as you use a doctype (which you always do, right?!).

Part 2 of this series on getting started with MooTools provides some more comparisons between vanilla JavaScript and MooTools. The most striking example is the Ajax, just check out how much of a mess traditional JavaScript is!

Hopefully these examples are illustrating the benefits of using a JavaScript framework and the immense time and effort it can save you in addition to the excellent browser compatibility. Post a comment on what specific MooTools concepts you would like me to focus on for future posts.

Ajax

JavaScript

var xhr = false;
try {
  //Firefox, Opera 8.0+, Safari
  xhr = new XMLHttpRequest();
}
catch(e) {
  //Internet Explorer
  try {
    xhr = new ActiveXObject('Msxml2.XMLHTTP');
  }
  catch(e) {
    try {
      xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    catch(e) {
      alert('epic fail!');
    }
  }
}

if(xhr) {
  //onSuccess
  xhr.onreadystatechange = function() {
    if(xhr.readyState == 4 && xhr.responseText != '') {
      //use responseText
    }
  }

  //open connection
  xhr.open('GET', 'ajax.php?id=1', true);
  xhr.send(null);
}

MooTools

var xhr = new Request({
  method: 'get',
  url: 'ajax.php',
  onSuccess: function(responseText, responseXML) {
    //use responseText
  }
}).send('id=1');

Yeah, MooTools is just a tad easier to write Ajax with With traditional JavaScript, the top chunk is just initializing the Ajax object. Modern browsers use XMLHttpRequest(), but we need fallback cases to handle old version of Internet Explorer, this the try/catch stuff. It then needs to create a ready state function – 4 means it was successful. So not the most user friendly JavaScript out there.

MooTools on the other hand is way more straightforward since it handles all the browser issues and abstracts the ready states for us. Check out the documentation for the full run down on what you can do with the Request object.

String manipulations

JavaScript

var s = 'Jeff Winger';

//does it contain the substring?
if(s.indexOf('Jeff') >= 0) {
  //--
}

//trim whitespace
s = s.replace(/^\s+|\s+$/g, '');

//convert to int
var i = parseInt('10px');

//convert to float
var f = parseFloat('1.2em');

MooTools

var s = 'Jeff Winger';

//does it contain the substring?
if(s.contains('Jeff')) {
 //--
}

//trim whitespace
s = s.trim();

//convert to int
var i = '10px'.toInt();

//convert to float
var f = '1.2em'.toFloat();

Nothing too crazy here, but MooTools streamlines the string manipulations and helps avoid needed regular expressions.

Embedding a Flash SWF

JavaScript (actually its HTML)

<object width="500" height="400" data="myMovies.swf" type="application/x-shockwave-flash" id="Swiff_1268810590492">
 <param name="mode" value="opaque">
 <param name="bicolor" value="#ff3300">
</object>

MooTools

var obj = new Swiff('myMovie.swf', {
  id: 'myBeautifulMovie',
  width: 500,
  height: 400,
  params: {
    wmode: 'opaque',
    bgcolor: '#ff3300'
  }
});

The Swiff class abstracts the traditional object tag and streamlines the code. This way you don’t need to remember the exact structure of the object tag because no ones remembers that stuff and just end up copying it from somewhere else and changing the values to what we need.

Onwards and upwards

This completes part 2 of the MooTools getting started guide. There might be a part 3 sometime, but before that I’ll likely delve into specific MooTools topics in more detail.