James Coglan wrote a piece on There is no such thing as a JavaScript plugin that uses jQuery as a use case for how simple it is to have a plugin contract.
When you think about plugins in many environments, you have strict contracts through interfaces that you have to implement. With jQuery, you can just add on to the …

Asad Sheth has been playing with a Starfield Sim Picasa Gallery using Prototype. He said:

I think it’s an interesting way to think about temporally organized data (I could see RSS feeds navigated through some similar mechanism, with the z-axis being time and the x- and y-axes being some kind of similarity measure), and further display that graphical presentation is …

Peter Michaux has found the magical eval(…, context) method available in the Firefox implementation. This means that you can’t create truly private data:
PLAIN TEXT
JAVASCRIPT:

// Getting "private" variables

var obj = (function() {

  var a = 21;

  return {

    // public function must reference ‘a’

    fn: function() {a;}

  };

})();

var foo;

eval(’foo=a’, obj.fn);

console.log(foo); // 21

// Setting "private" variables

var obj …

In a Javascript world ruled by prototype and scriptaculous all animation better be done that way. But DIY still means Do-It-Yourself and this post gives just one ten liner function to just pull off any visual effect you can imagine.

What a great title. It is an entry in the JavaScript 20 liners call out:
PLAIN TEXT
JAVASCRIPT:

//      chain( func )

//      make func chainable by making it return itsReturnValue||this

function chain( func )

{

        return function()

        {

                …

Brian Moschel from the JavaScriptMVC project wrote in to tell us about their recent efforts extending John Resig’s earlier Simple Class Inheritance work.
In case you missed it, John’s blog talked about his efforts to take the best of the many efforts to simulate classical inheritance in JavaScript and reduce them to a simple, easy-to-use piece of stand-alone …

It has been a busy week for Mozilla. We have seen news across the board of their technology.
First we have the news that Firefox 3 should be available to download on June 17th. They are having a download party to kick things off.
Stuart Parmenter had a proxy post that delves into the world of fonts and text:

When Mozilla …

Today’s interviewee is Ryan Johnson of Control Suite fame.

Ryan just launched PersonalGrid, a new file sharing and publishing web application, along with a complete overhaul of Control Suite, now renamed LivePipe UI.
Hi, Ryan. Could you please introduce yourself.

Ryan Johnson: I’ve been writing web pages since 1993, but I’ve only felt comfortable calling myself a …

Function binding in Javascript is an often difficult to understand concept. This tutorial explains what binding is, what the bind() method does, and why its use is important for creating object oriented Javascript code.

So far in this series, “Eight Weeks of Prototype,” I have shown you some of the extensive features the Prototype JavaScript framework provides. In this, the final article of the series, I will bring many of these features together into a simple example.

Piotr Dachtera is the lead developer behind the recently-launched Live Chess, a Prototype-based, Comet-powered live chess game.

We talked to him about the client-side challenges he faced along the way.
Hi, Piotr. Could you please introduce yourself?

Piotr Dachtera: Sure. I’m currently the lead developer of the JavaScript/Ajax/Comet part of chess.com.

I’ve been dedicated to Web + chess applications since …

Google has just released the AJAX Libraries API. Google has created an API that allows developers to access a number of popular javascript API from the Google Cloud.

Good news! Google now offers a cached, compressed copy of Prototype on its high-speed content distribution network via the AJAX Libraries API.
You can either link to the source code directly:

<script type=”text/javascript”
src=”http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js”></script>

Or you can use Google’s API:

<script type=”text/javascript” src=”http://www.google.com/jsapi”></script>
<script type=”text/javascript”>google.load(”prototype”, “1.6.0.2″);</script>

More information is available from Google’s documentation.

When …

JavaScriptMVC’s aim is very different from Prototype, jQuery, and other JavaScript libraries. We provide a framework for building JavaScript functionality, while they provide a library for writing simplified code. JavaScriptMVC provides you the blueprint for building a house, Protoype & jQuery provide you the powertools.

Prototype based charting lib called ProtoChart. Check it out..

Hot on the heels of last week’s interview with Sergio Pereira, we were lucky enough to catch up with Amy Hoy. Amy defines herself as a informally educated designer-turned-interface-developer who also programs (and writes, and speaks, and takes pretty pictures). She’s also the co-creator of Twistori.
Amy, you’ve been involved in both the Prototype/script.aculo.us and …

This is a prototype of a Javascript Mario Kart-like racing game.It uses the canvas element to do most of the rendering and should work in both FF2, FF3, Opera 9.27 and Safari 3.1.1.

Andrea Giammarchi has created a native array wrapper that works across browsers. He is excited:

I do not know how many times, during this years, JavaScript Ninjas have tried to subclass the native Array to create libraries over its powerful methods without losing performance. I have finally discovered the way to remove the locked length from Internet Explorer 8, and …

Guide to make your prototype based web app blazingly fast

Thierry Schellenbach has written up some thoughts about JavaScript optimization for Prototype apps after playing with console.profile() / console.profileEnd() in his Prototype applications.
The core advice is pretty simple:

Beware of $$ and event binding
Beware of other Prototype methods (reports a 40 times speed different between innerHTML and element.update)
Write to innerHTML instead of using document.createElement
Use for loops instead of for in …

So far in Eight Weeks of Prototype I have covered the most important aspects of developing robust JavaScript using Prototype however I haven’t covered every available feature. In this article I will briefly discuss other aspects of development with Prototype, that while aren’t necessarily core knowledge are still useful.

Last week, we launched a Prototype Linkedin group, which, as of this writing, has more than 300 members. This was the occasion to get back in touch with a lot of people from the Prototype community, and to launch a project we’ve had in mind for a long time: regular interviews of developers and designers working with …

David Kees has written about Using Prototype to Load Javascript Files, which is an implementation of the general technique of loading functionality via scripts based on the availability of DOM elements.
He started using the technique to scratch an itch:

The calendar on this site only appears on pages that show blog-related information. That calendar is enhanced with Javascript allowing you …

While JavaScript is by design an object oriented language, it hasn’t always been the easiest language to create nicely structured code that is easily maintainable. Prototype helps with this by providing a number of useful features for creating classes, such as the ability to extend classes and to easily group all functions together by using functio

The Prototype community now has its own group on LinkedIn.

It’s a great opportunity to connect with other developers and designers who are using Prototype in their daily work, get to know them better, and put a face next to the names you see daily in the mailing lists or on IRC.
The group’s been up for a little under 24hrs …

Dion Almaer just posted on Ajaxian an interview of Prototype creator Sam Stephenson – the first of a series on Ajax pioneers.

Sam talks about the future of Prototype, shares his thoughts on the current state of browsers, and discusses some of the upcoming tools we’re busy working on (PDoc, Sprockets, etc.).

So, without further ado:
<object type=”application/x-shockwave-flash” height=”377″ data=”http://www.vimeo.com/moogaloop.swf?clip_id=970809&server=www.vimeo.com&fullscreen=1&show_title=1&show_byline=0&show_portrait=0&color=00ADEF” width=”500″> …

Metaprogramming, or the art of modifying a running program, is a hot topic for programmers using scripting languages like Ruby or Groovy. Here’s a quick example of using metaprogramming in JavaScript with the help of Prototype JS to produce behavior similar to Java’s Aspect Oriented Programming (AOP) .

Twistori is a fun little site created by Amy Hoy and Thomas Fuchs. As you would expect, design is a key part of the application, and the Prototype / Script.aculo.us combo pull off the work.
The site pulls in live data on various topics (love, hate, think, believe, feel, wish) via the …

Stephen Celis got tired of wiring together two date pickers for the common use case of grabbing a date range, so he created timeframe, which is “Click-draggable. Range-makeable. A better calendar.”
Based on Prototype, you can whip up some code such as:
PLAIN TEXT
JAVASCRIPT:

new Timeframe(’calendars’, {

            startfield: ’start’,

            …

One of the most useful and important aspects of JavaScript developments is that of event handling. Prototype simplifies this process by providing a number of helpful methods for doing so. In this, the fourth article of “Eight of Weeks of Prototype”, we will look at how Prototype helps with handling events.

Sometimes you want Monday to be a Friday, so we have ProtoRPG, a role playing game written by Pierre Chassaing in JavaScript using Prototype and Script.aculo.us.
Walk around, add to your inventory, and feel like you are playing your first RPG many moons ago, on a Friday.

…

Piotr Solnica did a couple of posts on jQuery and Prototype benchmarks back in the day, and John-David Dalton just found them.
In part one, he runs tests such as:
PLAIN TEXT
JAVASCRIPT:

$(’td.first’).addClass(’marked’); // jQuery

$$(’td.first’).each(function(cell){

  cell.addClassName(’marked’);

});

// or

$$(’td.first’).invoke(’addClassName’, ‘marked’);

and concludes:

Executed tests show that Prototype seems to be faster then jQuery, with the exception of the new insertion method, which …

Eight Weeks of Prototype is a series of articles covering the most important aspects of JavaScript development with the Prototype framework. Prototype is a JavaScript framework used to help developers easily create powerful web applications that work across all modern web browsers.

In this the third article in the Eight Weeks of Prototype series I will teach you about the different data types that can be used in Prototype on top of the existing JavaScript data types. We will firstly look at the basic string and number types then look at enumerable types such as arrays and hashes.

Prototype is a JavaScript framework used to help with development of cross-browser code that is easy to maintain and extend. In this first article of Eight Weeks of Prototype I will teach you the fundamentals of Prototype which you will hopefully find useful for all JavaScript code you write.

That looks like some nice, smart completion doesn’t it? Tor Norbye has moved from Ruby to get solid JavaScript support in NetBeans.
There are a ton of features, as you can see in his post. You can even do things like setup browser compatibility (saw this first in VisualStudio):

Great to see IDEs getting better and …

Sebastian Brink has developed a nice looking gallery application called qGallery
It is really simple to use you just have to upload your images in full resolution together with a simple xml file and include the script and a simple div into the webpage. Everything else is done automatically. The gallery is creating …

By default, Control.Modal creates modal windows and lightboxes from any links/anchors elements on your pages. Since it attaches these behaviors to HTML that already has semantic meaning, it will degrade gracefully for browsers that do not support JavaScript, and is search engine friendly.

I was searching for a compressed version of script.aculo.us javascript library in one file.

Some people have been surprised to not hear much from Mozilla around Acid 3. WebKit and Opera are duking it out, but what about Firefox?
Mike Shaver of Mozilla has posted on his views that Acid 3 is a missed opportunity and is pretty damning of the whole thing:

Ian’s Acid 3, unlike its predecessors, is not about establishing a baseline …

LightboxXL es un programa en escrito en javaScript que le permite integrar im�genes y videos en su pagina Web. Usted necesita la biblioteca prototype.js para poder utilizar lightboxXL. Este programa es f�cil de utilizar y sin los visitantes de su pagina Web quedaran impresionados.dise�o de paginas internet, imagenes, Javascript, web design.

Are you sure you should be subclassing that? is the question that Neil Roberts asks.
He goes on to solve a problem: you just want to change ONE property in this class, but you can’t change it on the actual class because that value would now be used across all instances of that class. So in order to make it …

With so many new components being developed in a variety of different of JavaScript libraries, it’s a natural expectation that sooner or later, you’re going to want to mix and match these components within your application. Sometimes though, it’s not that easy due to architectural conflicts between different libraries. John David Dalton set out …

ProtoFlow is a coverflow effect written in Javascript. It uses Prototype and Scriptaculous to do bulk of the work and it uses Reflection.js to do all the image reflections stuff!

This javascript class allows you to add window in a HTML page.

Obaid Ahmed has written a coverflow-like component on top of Prototype and Script.aculo.us called ProtoFlow.
It is simple to use:
PLAIN TEXT
HTML:

<div id=”protoflow”>

        <img src=”imgs/DSCN0940_91360.jpg”/>

        <img src=”imgs/stimme_von_oben_187192.jpg”/>

        <img src=”imgs/Tropfen_1_Kopie_201721.jpg”/>

        <img src=”imgs/farbraum_012_147508.jpg”/>

        <img src=”imgs/IMG_4906_199357.jpg”/>

        <img …

Mozilla Prism has just released a new version that shows off Firefox integration:

Today we’re releasing a major update to Prism that includes new desktop integration capabilities and simpler installation. With this update, you can now get Prism simply by installing a small extension to Firefox 3. With the new Prism extension for Firefox 3, …

Brian Moschel just told us about Include:
It determines which files to compress at runtime and automatically compresses them into one script using Dean Edwards’ Packer.
You can include any JavaScript from any other JavaScript with a relative path:
PLAIN TEXT
JAVASCRIPT:

include(’myscript.js’);
 

Then turn on compression like this:
PLAIN TEXT
JAVASCRIPT:

include.setup({env: ‘compress’});
include(’javascripts/prototype’, ‘javascripts/myapplication’);
 

When you reload the page, a …

Nick Stakenburg has released Lightview 2, an update of his lightbox-esque library:

With the first released of Lightview I aimed to make overlaying images as elegant as possible, rethinking what we know as Lightbox. With Lightview 2.0 I’m going a step further, doing the same for
video (Quicktime), swf, Ajax, iframe and inline content.

You can do most of what you …

Are you ever sick of seeing Object get printed out when you try to output a variable to your console.
Oliver Steele talks about Self Printing JavaScript Literals where you can clean that up with a toString:
PLAIN TEXT
JAVASCRIPT:

function makeLiteral(name) {return {toString:function(){return name}}}
var L1 = makeLiteral(”L1″);
var L2 = makeLiteral(”L2″);
L1
//>>> L1
L2
//>>> L2
 

Kangax takes …