Optimization Tutorials
Quick Tip: Object Indexing vs. Array Collection
Let's say that we have one large text document and we have a a bunch of keywords that we want to parse the document for. We don't care how many times times the keyword appears — we just care that it's been used. When we find a keyword, we need to record that keyword been found so that we may check at a later time.
HTML5 Link Prefetching
One effort shared by both browsers and developers is making the web browsing experience faster. There are many common-known ways to keep your websites fast: using CSS sprites and image optimization, using .htaccess to set file headers for longer caching, javascript file compression, using CDNs, and so on. I've even detailed some of the website optimization efforts used on this website. Firefox introduces a new strategy for website optimization: link prefetching.
Using jQuery or MooTools For Drag, Drop, Sort, Save
One of my most popular posts has been Using MooTools 1.2 for Drag, Drop, Sort, Save. My post detailed how you can create a drag'n'drop, AJAX-ified system to allow the user to drag and drop elements and quickly save them with PHP and MySQL on the server side. I've chosen to update the post with a faster, more efficient set of MooTools and PHP code. I've also provided a jQuery equivalent. Enjoy!
META Refresh vs. JavaScript Refresh
A few days back I was perusing the ESPN.com source code when I found the following snippet of code:
Create a Sprited Navigation Menu Using CSS and MooTools
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.
Speeding Up My Website
One of the biggest goals with my website redesign was to update something no one sees — website speed. Sure I'm using different colors, fonts, JavaScript techniques, and images but I'm most proud of the the speed increases I made. Let me explain the ways I've improved my website performance — maybe you can learn something from what I implemented.
MooTools TwitterGitter and Cookies
One of my MooTools plugins I use most is TwitterGitter. TwitterGitter is a small MooTools plugin I've created to fetch any number of tweets from an Twitter user's account. Since clients don't tweet very often, there's no advantage to pinging Twitter for a tweet every page load. To save Twitter a bunch of repetitive requests, I use cookies to save the latest tweet.
Reduce PNG Graphic Size Using PNGCRUSH
Now that I'm knee-deep in MacBook I love working with command line applications. There's a certain beauty in the simplicity of using the console instead of a nice GUI. One task I use the console for often is reducing the size of PNG files using the powerhouse that is PNGCRUSH.
MooTools Class Creation Tips
Writing MooTools classes can be a daunting task, even for a novice MooTools developer. Here are a few tips I've picked up along the way that will take your Moo plugin / class development to the next level.
Creating & Using CSS Sprites
The idea of CSS sprites is pretty genius. For those of you who don't know the idea of a sprite, a sprite is basically multiple graphics compiled into one image. The advantages of using sprites are: