Archive for the 'JavaScript' Category

A dose of reality with Slickspeed

I’ve been a fan of the Slickspeed Selectors test for a while – in all honesty it’s probably the coolest thing Mootools has released (and this isn’t a knock on their js framework). The Slickspeed selectors test does everything right – easy, friendly open-source code which is stupid easy to customize. The tests are extremely useful and can give you some amazing insight on how the framework you’re using for your app compares to the other ones that are out there (and you can even test on your own code!).

After a discussion at work today about how expensive Prototype’s $$ function is in the lovely Internet Explorer, I decided to run the Slickspeed tests in IE7 – something which I’m a little embarrassed to admit I’ve never done before. I knew the results would be bad – but seeing just how bad they were made my stomach turn. It also piqued my curiosity to dig into this some more.

With the preset settings and my own custom frameworks (I chose Prototype 1.6.0.2, 1.6.0.3, and jQuery 1.3), both Prototype’s came in at over 2 seconds (2142 and 2169ms, respectively). Granted, I’m running my IE’s on a VM powered by a nearly 2 year old MacBook, but an ‘average’ website visitor is probably powered by something on a similar level.

More >>

A Case for Canvas

Anyone who follows me on Twitter is probably aware that for the last few months, I’ve been getting my feet wet with Canvas drawing.

For those who aren’t familiar, Canvas is an HTML5 element which enables you to do script-based drawing, specifically Javascript. While not natively supported by the IE’s, the wonderful Explorer Canvas script works very well in converting Canvas drawing to the IE-supported VML. While I hear you can’t do everything with Explorer Canvas, most drawing, coloring, and animations will work just fine.

After getting around the initial mind-warp of drawing with script, Canvas has proven itself to be flexible, fast, and fun, and although it’s very new and not (officially) globally supported, I would recommend that anyone who’s considering adopting it to do so. More >>

Javascript Library Wars

Today marks the first day of the Ajax Experience in Boston, MA. I was lucky enough to be able to join up as a volunteer and get in for free (I had come up to Boston for jQuery camp and they were searching out AJE volunteers).

The conference kicked off this morning, and it’s been an interesting experience so far. I’ve been assigned to the Breakout 1 room, which this morning hosted the Prototype presenters, Christophe Porteneuve and Andrew Dupont. They were part of this morning’s “developer day” events, where the leaders of some of the main JavaScript libraries (Prototype, jQuery, and Dojo) had 5 hour sessions (side by side) where they introduced their library and explained how you can get the most out of them and contribute to the community.

The ‘hotness’ of jQuery was more prominent than ever this morning, as our room was very very sparsely filled, while the jQuery room, which was the same size, was packed to the brim.

The imbalance of the turnout was clearly noticed by the Prototype speakers, and this brought about some discussion on the differences between the libraries, and the cases for using each. Now, these guys are obviously biased towards Prototype, but what they mentioned was pretty accurate. Basically, they proposed that jQuery is better for simpler web applications, while Prototype is still more robust for creating custom classes and prototypes, and creating your own sub-library. I completely agree with this, as we use Prototype at Zenbe for our very complex, intricate js needs, and the library makes it completely easy and fun to write complex classes.

More >>

Auto Detecting Nav Hilighter with jQuery

More jQuery love is going down… it seems to be the theme of the month.

This last weekend I picked up the ‘jQuery in Action’ book and it really opened my eyes to just how cool jQuery is. I mean, I was pretty stoked about it already, but now I want to take it out to dinner and maybe make out with it a little in the back of my car.

So, reading the book, I learned just how powerful their wrapper element is. A lot of it’s css-based, so it’s easy for a front-end dev type like myself to catch up on, and then it mixes in simple regular expressions and has() checks and .. my mind is blown.

More >>

On Javascript Frameworks

Hello. I’m not dead, although I know the site’s been for some time. This is because life’s running at 1,000 miles an hour. I’m getting into my zone at Fox, every day seems to be a bit better, and I’m working on some pretty cool projects. I’ve been learning a whole new section of web development, and my exploration into JavaScript continues, but on a whole new level.

At Fox, now I have to think more than ever about file size, code efficiency, flexibility, and scalability. Ever since I’ve been “into” JavaScript I’ve been a fan of the Prototype framework. And why not? It’s solid, efficient, and the footprint… isn’t that bad. Coupled with Scriptaculous, it’s a powerful set of tools for any kind of JavaScript / Ajax functionality.

More >>

Another JavaScript Release

Even though this was technically the first bit of JavaScript I developed, it’s my second official release. It’s a knock-off of the Coda site effect, first developed for iFeedFish, and recently it’s been used on an up-and-coming site I’ve been developing at work. Reusing the code has provided me with the perfect excuse to modularize it, document it, and now you can own the effect yourself!

I’m calling it PageSlide JS, and it’s proof positive once again that I am super awesome at naming these things. Just like with SmoothScroll, this is being released under the MIT license, so you can do whateverthehell you want with it. Unlike SmoothScroll, I actually have a mini-site for it up and running. You can find that at http://pageslide.ifeedfish.com.

More >>

SmoothScrollJS

Recently, I’ve started digging into JavaScript, which, for the most part is foreign territory. JavaScript is a very unique language – it’s come from the gutters of the proprietary ‘web 1.0′ to become the shining light of the new ‘accessible’ web. It’s also a language that I’ve not really been good with – most of my code is stumbling my way through, getting lucky after a million wrong turns.

However, since the release and adoption of JavaScript libraries, namely Prototype and Scriptaculous, I’ve finally been able to hop over the JavaScript learning curve. I’ve been doing more JS code both at work and at home, and creating some pretty cool effects.

So, for the first time ever, I am releasing a piece of code to the world. It’s being released under the MIT license, so you’re free to do just about anything with it, and it’s called SmoothScrollJS. Essentially, it’s an animated horizontal scroller, with left and right triggers for a smooth scroll effect. You can adjust the width, speed, and ’smoothness’.

More >>

Getting Dumped by JavaScript

Mootools (www.mootools.net) is a promising young javascript animation library. It prides itself on being very light-weight and customizable (you pick the components you want even before you download). It has great animation effects, moreso than Scriptaculous.

Yesterday I started working with the library, and after just a short time I had something awesome looking up and running. I was using the slider effect to collapse and show comments on a blog post.

However, this morning, I decided to add the prototype library because I needed to do some AJAX work.

More >>