JavaScript Tutorials
MooTools Class Sniffer Bookmarklet
I was recently reviewing a few MooTools-driven websites and one of the questions I wrote down was "Which MooTools Core classes do you use and how many classes have you created?" Then I asked myself if there was a way I could figure that out myself. The end result is a JavaScript bookmarklet that finds all of the MooTools classes defined within the Window object.
DomReady Event Methods in JavaScript Frameworks
The "domready" event, as it is affectionately known as, is one of the best things since sliced bread. The domready event says "screw you window.load ... I don't have time to wait for you." The ability to execute your JavaScript method on DOM nodes before the page loads helps to make our effects and element modifications that much more seamless. Every JavaScript framework has their own method of domready so I wanted to take the time to list off each one, just in case you (or I) need to work with a framework that's (initially) outside of our comfort zone.
Using Function.toString to Troubleshoot JavaScript Issues
Sometimes JavaScript bugs can be the most frustrating damn things in the world. That problem is compounded when a JavaScript file is created from multiple files on the server side or you simply aren't familiar with some of the code used in a project (i.e. troubleshooting an issue with a JavaScript framework you aren't familiar with. Sometimes just identifying the code within a function is enough to point you in the correct direction. So to quickly check the code for a given function, I'll type into the console something like:
Image onLoad Event + JavaScript Issue with Internet Explorer
I was recently coding an application that would inject an image into the page and then execute a given function when the image's onLoad event fires. My code was working everywhere except Internet Explorer. That wasn't all together shocking initially but the fact that even IE8 was failing to the fire the onLoad event was discouraging. Here's what my code looked like:
Create Custom Pseudo Class Selectors Using the Slick Selector Engine
As I mentioned in my previous post about the Slick selector engine, Create Elements on the Fly with MooTools 1.3 and Slick, Slick is extremely flexible. Part of that flexibility is the ability for you to define custom pseudo class selectors to better gather the elements that meet your needs.
4 Ways JavaScript Has Changed the Way I Code
The plot: I started teach myself web programming ten years ago; about three years ago I became infatuated with JavaScript and its practices. The bad news: in teaching myself I developed my own bad habits. The good news: my time with JavaScript and the MooTools team has opened my eyes to a better way of coding. Here are a few ways JavaScript has helped me to become a better programmers.
iPad Detection Using JavaScript or PHP
The hottest device out there right now seems to be the iPad. iPad this, iPad that, iPod your mom. I'm underwhelmed with the device but that doesn't mean I shouldn't try to account for such devices on the websites I create. In Apple's developer tip sheet they provide the iPad's user agent string:
JavaScript: Condensed Code vs. Readability
I've been coding some more advanced JavaScript applications lately and they've made me think a lot about coding styles. More specifically: shortness of code vs. readability.
Video: Speed Up Your JavaScript
I generally try to listen to JavaScript/development podcasts and videos when I'm working. It's a great way to continue to learn and get ideas while doing the ho hum programming busywork that's unavoidable. Here's a great Google Talks presentation that was given last summer about JavaScript and speed.
Create Classy Inputs Using MooTools’ OverText
The MooTools More library is a goldmine. A treasure chest. Pirates booty, if you will (and, of course, I will). More is full of plugins that add a lot of class and functionality to your website with minimal effort. OverText is one of those plugins. OverText generates labels on top of your input boxes that serve as directives to your users as to what they should place into a given field.