sorted by: recent | see :
popular
Content Tagged with Page + Prototype
Freckle: Time tracking with style
Thomas Fuchs and Amy Hoy are back with another web site, this time Freckle, a new take on time tracking.
Thomas posted about it on his site and shared that it uses an early build of scripty2 which lead me to peak around on GitHub. It looks nice indeed.
You can see the evidence of Script.aculo.us throughout the UI. The calendar morphs between months as you flip around. Jumping between headers rolls around nicely (e.g. reporting mode from insertion). Inline modal popups. Nicely done.
A great example of sharing; Sizzle Engine in Dojo Foundation
Voting has started in Dojo land to take in John Resig's Sizzle next-gem CSS selector engine.
This is incredibly exciting, as it shows how Ajax libraries are working together more and more. Instead of reinventing the wheel in different ways for each project, is it possible to find some core pieces that can be nicely shared? Of course, if our world was nicer and we could share code by linking in a nice way maybe this would happen more.
As I mentioned in my thanksgiving note, the work that the Ajax library developers do is hugely important and impactful, and having them work together can only be great news.
Take a look at this public email to the Dojo Foundation on the vote:
Overview
The Sizzle project is a JavaScript library for performing selections
across a DOM tree using CSS selectors. The library is designed to be
standalone (have no external dependencies), lightweight, fast, and
extensible. This culminates in a library that is perfectly suited for
integration into other libraries. While it's feasible that a developer
may use Sizzle directly the target audience for it is other library
authors.The code for Sizzle can be found in the following Git repository:
http://github.com/jeresig/sizzle/tree/masterAll of the code for the project has been written by John Resig and is
released under an MIT license. There are some patches pending from
some other contributors (namely Prototype).Right now the following libraries are adopting or are looking to adopt
Sizzle as their primary CSS selector engine:It's likely that Sizzle will become the unified engine behind a
majority of the JavaScript libraries on the market (if not in numbers
then certainly in market share).The project is owned by John Resig who will serve as BDFL/Project lead
if the project is accepted. There is no formal voting process, as of
yet, but it's likely that one will come about, considering the number of
projects using the codebase.If the project is accepted to the foundation then all contributors to
the project will be required to have a CLA and follow the policies of
the Dojo foundation.It's very likely that Sizzle will eventually expand into other areas
of JavaScript libraries (such as DOM manipulation and event binding).
That last line excites me too! It is interesting to see this happen in the Dojo Foundation. Remember, Dojo was founded out of toolkits coming together to aggregate forces. Kudos to everyone involved, and good luck!
Prototype 1.6.0.3 out there
Just a short one, Prototype has a new point release that is a drop in replacement for your 1.6.* code:
Yesterday we released Prototype 1.6.0.3, the result of some much-needed bug fixes, and a stopgap release on the road to 1.6.1.
It’s a backwards-compatible, drop-in replacement recommended for all users of Prototype 1.6. We’ve fixed 30 bugs and made 25 other improvements to our already-rock-solid library.
Developers who follow along in Git might’ve noticed that the repository has seen a lot of disruptive activity in the last few days as we reassessed many of the commits that had gone into the library since April. Rather than try to fit too many fixes into one release, we decided to scale back and release 1.6.0.3 with the set of improvements we were in complete agreement on.
We also updated the Google CDN so you can use Google to host your file via: http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js. We have also aliased "1.6", and "1.6.0" to this latest release, so if you are using that version, you automatically have the latest.
The Ajax Experience Framework Summit
We talked a few months ago about something new we're doing at the Ajax Experience this year: the "Framework Summit." Basically, we're providing space for Prototype, jQuery, and Dojo to hold their own half-day events on-site, and these events are free and open to the general public.
Since we announced the summit, the frameworks have created their agendas for their events for their events:
Dojo Developer Day:
- Welcome, Introductions (Alex Russell, Dylan Schiemann)
- Tutorial - Progressive Dojo (Peter Higgins)
- Presentation - DojoX GFX and FX (Matthew Russell)
- Presentation - Secrets of DojoX (Tom Trenka)
- Tutorial - Getting going ... Zend + Dojo (Matthew O'Phinney)
- Tutorial - Dijit Layouts In and Out (Nikolai Onken)
- Tutorial - Reusable code, Widgeting (Peter Higgins)
- Community - Getting Involved (Peter Higgins, Nikolai Onken)
- Lightning Demos - What do you have? Show us.
Prototype Developer Day
- Welcome, Introductions (Prototype Core members)
- Contributing docs (Christophe Porteneuve)
- Contributing code (Andrew Dupont)
- Prototype & Performance
- Extended Q&A (Prototype Core members)
jQuery Developer Day
- State of jQuery (Rey Bango)
- Progressively Enhancing the User Experience Using jQuery (Karl Swedberg)
- An In-Depth Look at jQuery UI (Paul Bakaus)
- jQuery Team Code Review (jQuery Team)
Other Frameworks?
Some have asked why we didn't also include Framework X, Y, and Z at the summit. We have a simple answer: we only had room for three frameworks so we choose the three most popular frameworks (according to every survey we've seen). If the concept is successful this time around, we hope to do it on a bigger scale next year.
Obviously we hope you can make it to the entire Ajax Experience event, but if you can't do that, consider coming to one of the Framework Summit events. See you there!
Tripeedo: Command line for travel
Tripeedo is a new little site that uses Prototype to power a command line for travel. You just type in where you want to go and when, and it will launch you into a search. I really enjoy the command line interfaces, and much prefer them to the long forms that travel sites put up for you. The calendar components normally always suck.
Tripeedo is a showcase of the wundrbar that has been customized for the world of travel.
Semantic Constructors
-
-
Class.create = (function(original) {
-
var fn = function() {
-
var result = original.apply(null, arguments);
-
result.toString = function() { return result.prototype.initialize.toString() };
-
return result;
-
};
-
fn.toString = function(){ return original.toString() };
-
return fn;
-
})(Class.create);
-
This monkey patch by kangax allows you to get sense from inspecting a constructor setup via Prototype.
His code changes a simple person class from:
-
-
Person + ''; // "function klass() { this.initialize.apply(this, arguments); }"
-
too:
-
-
Person + ''; // "function (name) { this.name = name; }"
-
If you want more help with Prototype and Script.aculo.us you can check out their newly changed support list.
Creativescrape: Thomas and Amy team up again
Thomas Fuchs and Amy Hoy have teamed up again for a micro-app called Creativescrape "an inspration utility for those moments when you just seem to be braindead. It comes with a OS X screensaver for your enjoyment."
All via 188 lines of fun living on top of Prototype and Script.aculo.us.
Starfield Sim Picasa Gallery with Prototype
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 not the sole domain of Flash.
Book Excerpt: Practical Prototype and Script.aculo.us, Advanced Ajax Chapter 4
Andrew Dupont has written Practical Prototype and Script.aculo.us and has kindly given us a chapter excerpt to peruse.
You can download chapter 4 in PDF format here. The chapter covers "Ajax: Advanced Client/Server
Communication":
By now, you’re almost certainly familiar with Ajax as a buzzword. Technically, it’s an acronym—Asynchronous JavaScript and XML — and refers specifically to JavaScript’s XmlHttpRequestobject,which lets a browser initiate an HTTP request outside the confines of the traditional page request.
Yawn. The technology isn’t the exciting part. Ajax is huge because it pushes the boundaries of what you can do with a web UI: it lets you reload part of a page without reloading the entire page. For a page-based medium like the Web, this is a seismic leap forward.
The chapter delves into the world of Ajax.Request, Ajax.Updater, Ajax.PeriodicalUpdater, by showing subtle examples of how to deal with timers, errors, and a lot more.
Like the chapter? check out the book home page.
Audible Ajax Episode 27: SproutCore with Charles Jolley
On the back of the iPhone 3G news at WWDC, the next biggest thing was the launch of Mobile Me, a compelling user experience to access Apple services using standard Open Web technology.
The application is written using the SproutCore framework, and I got to sit down with Charles Jolley, one of the founders.
We talked about the history of the project, how it differs from other frameworks that are out there, and where they are going. It is interesting that this podcast comes after the 280 North one, as they are both Cocoa inspired.
SproutCore is much more JavaScript focused though, and gives you MVC in the client in a simple and intuitive way. I found it interesting to see how the framework has developed, from its Rails plugin roots, to now (dispel myth: it has no dependency on Rails, just some build files are Ruby).
Charles talks about techniques that they use to give you fast applications (common global event dispatch seems key, and Prototype 2.0 is adding this) and how he feels that compelling rich browser applications will keep pushing the browser vendors to speed up, and shape up!
We have the audio directly available, or you can subscribe to the podcast.
72photos: Proto/Scripty Photo Sharing Site
XMG Networks has thrown their hat into the on-line photo sharing ring with the launch of 72photos, an Ajax-heavy site which looks at least partially inspired by Apple's iPhoto '08-generated web galleries.
We asked 72photos to tell us a bit about how they went about building the site and how it compares to competitors like Flickr and Smugmug; "Eric A" kindly replied with some details:
Building the Site
We do indeed use Prototype / Scriptaculous for our main Javascript frameworks and it's been that combination from the very beginning. There's always been a way to accomplish want we've needed PT and is due to the fact we tend to use more of the basic PT functions (selectors, event handers) and build our own "sub-frameworks" as we go along. Our functionality is fairly unique to the web and hasn't been done in any sort of pre-packaged framework yet (as I know of). Thus, we found ourselves building a good portion of things in-house.
Features
We don't do anything extremely new or groundbreaking in terms of features at the moment, somewhat of a reason for that is the fact our site appeals to a large percentage of novice users and we wanted to tune our functions to resemble something such as a desktop application which seems to be the familiar place for all users. However, as development continues, we're constantly finding the balance between integrating professional features as well as fine-tuning the basic features that everyone is familiar with. There are a myriad of experimental features we have planned and developed, but opted to build a solid foundation incorporating those familiarities before implementing our more eccentric features which we'll be looking to integrate over the next few months.
Compared to Other Photo Sharing Sites
1. Fully customizable photo galleries - Our gallery interface features drag & drop functionality to add and arrange photos in a gallery. Real time customization options let users customize the colors and fonts for the gallery and preview the changes real-time. Several preset gallery themes are also available. Here's a sample screen:
2. Profile pages - All users get a full profile page displaying all their photos, tags and galleries elegantly:
3. Community Features - Our community features are also superior to that of other sites, such as the ability to track friends activity by seeing recent uploads or galleries by them and having the ability specify the type of friend they are (friend / family) then modify your photo/gallery/profile permissions accordingly.
4. Editing - Our editing features are all done in Ajax / Javascript which covers the basic cropping, effects, enhancing, constraining and will soon feature much more robust functions including step-by-step versioning (compared to our basic versioning features) and a greater array of editing effects and manipulation functions (batch editing, watermarking, etc).
5. Webspace - We always save users fullsize photos, no size caps on individual photos or monthly limits. Only an overall size limit per account type (free or pro).
6. Usability - All the backend functions are done "real-time" in lightbox windows, so there is minimal page reloading which is offers a considerable increase in efficiency when working with photos and galleries.
Eric also shared some of their plans for the future:
Currently, 72photos is just an evolved version of sites such as Smugmug, Flickr, and Zenfolio. Offering features to professionals and novice users in a carefully thought out and intuitive interface. In the near future we'll be greatly expanding our community features to cover areas of what you do after the point of uploading and editing your photos. Such as offering areas for photographers and artists to sell their art and other areas such as a place allowing models to find photographers in their area, vice versa, and more.
I just wish the iPhone would follow other handset manufacturer's lead and put a really nice camera in the phone. I know I'd pay extra money to have a 4 MP camera with a nice lens and a flash...
Lazily load functionality via Unobtrusive Scripts
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 to change the month displayed by the calendar without reloading the rest of the page. So, in order to ensure that these enhancements would be available everywhere the calendar is, I figured I had two options:
- Code the inclusion of the Javascript file into every page which requires it. While a good solution, and one that has worked well in the past, sometimes it can be difficult to remember or realize that you've forgotten to include the file when you add new pages that require it.
- Find a way to automatically include the file when it's needed. This would avoid the need to remember the need to include it when adding new pages that require it, but would result in a little more Javascript going on when the page loads.
Here is an example implementation:
-
-
document.observe("dom:loaded", function() {
-
var calendar = $("calendar");
-
if(calendar) {
-
var script = new Element("script", { type: "text/javascript", src: "/path/to/calendar.js" });
-
document.observe("calendar:loaded", function() { new Calendar(calendar); });
-
$$("head")[0].insert(script);
-
}
-
});
-
Ajax Pioneer Week: Sam Stephenson of Prototype
We are having a special week at Ajaxian. Ben and I are giving an Ajax talk at JavaOne this week, and decided to put a little video from Ajax pioneers. As we worked out what we wanted to do, we asked the pioneers for a little time to do an interview. Although only a piece of the interview will be used in the live presentation, we wanted to get the full interviews for the community here.
During the week you will hear from:
- Sam Stephenson of Prototype
- Bruce Johnson of GWT
- Alex Russell of Dojo
- John Resig of jQuery
On Wednesday, we will have a special video that features Ben and I having some fun with a new type of Ajax application.
Let's cut to the chase, and listen in to Sam Stephenson. Although we couldn't get to him in person, he kindly recorded himself via his laptop. My voice quality is poor, but we are all hear to listen to his thoughts on:
- The future of Prototype
- What excites him about new versions of Prototype, and what problems are they trying to solve
- Thoughts on the current crop of browsers, and what he wants to see
In the interview he discusses pdoc, a new inline documentation tool, Sprockets, a tool to help package Prototype, and new event delegation techniques.
Twistori: Telling a story with Tweets and Script.aculo.us
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 real-time twitter search tool summize.
In related Twitter news, I created a Greasemonkey script Twitter Translate that auto-translates foreign text to your language inside Twitter.
For more Ajax news, you can follow me @dalmaer or our new @ajaxian account.
Timeframe: Prototype date range component
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:
-
-
new Timeframe('calendars', {
-
startfield: 'start',
-
endfield: 'end',
-
previousbutton: 'previous',
-
todaybutton: 'today',
-
nextbutton: 'next',
-
resetbutton: 'reset' });
-
And then you get:
Check out the live example to really see it at work.
ProtoRPG: Role Playing with Prototype
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.
Mad Mimi: WYSIWYG Email Marketing
When I hear "email marketing" I can't help but think spam, but it is a legit tool too, and the latest tool in the pack is Mad Mimi.
Mad Mimi launched this week and consists of "state-of-the-art UI design makes for layouts that are easier to
create -– and easier to read – than emails generated by Constant Contact, Emma and others, who rely on rigid templates and cluttered,
dated layouts."
Mad Mimi's "modules-based" interface allows users to add picture and text fields, drag them around and add captions, links and dividers. Embedded constraints gently guide the layout, keeping the "designer" from getting into trouble, but providing more plasticity than templates.
The result: a fluid, flexible user interface, and clean, fashionable "Mimi-generated" promotions that represent a fresh approach to email marketing – at a subscription price that trumps the competition.
When I saw that Tobie Langel was on the team, I had to check it out. When you give it a spin you will be able to add images, and then use them to build out your email. There are some really nice subtle features such as the undo support.
jQuery and Prototype Benchmarks
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:
-
-
$('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 performance should be improved. Although I like jQuery syntax more then Prototype, the performance is way more important then saving few lines of code. Of course tests that I made don’t show how these libraries act in a real application, which is my task for the next part(s) of this article. Despite the results I must admit that I’m very excited about jQuery, my general impression is that this library is more mature then Prototype.
In part two, Piotr uses a custom JavaScript-based testing environment instead of running tests using Firebug profiler. This allows the test suite to run in many browsers, and this time concludes:
Prototype was at least 2 times faster then jQuery in 15 cases, and jQuery was faster then Prototype in 8 cases. What library should I choose? In my case I will stick with Prototype, because it offers the same functionality as jQuery does + more and it’s faster. jQuery is probably better for projects where there’s a need for some fancy UI effects and that’s it, but it’s just an assumption, correct me if I’m wrong…
qGallery: Prototype gallery application
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 every used image on the fly with the help of some php scripts in the background.
It is developed on top of Prototype and a bunch of other libraries.
ProtoSafe Eases Compatibility for Prototype
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 to minimize this pain via his new project called ProtoSafe.
I started ProtoSafe in response to a couple of posts on the Prototype Core Mailing list written by developers frustrated with Prototype’s 3rd party compatibility issues. I did some digging and found a post my Mislav Marohnic (here) explaining an easy way to keep Prototype out of the global namespace by simply wrapping everything in a self-executing anonymous function.
I asked John to explain the best use case for Protosafe and how it helps:
Prototype extends native data type prototypes which makes it very convenient for the developer but when interacting with 3rd party code not written for Prototype, these prototype extensions can cause compatibility issues. The most common is the Array for-in loop issue where by doing a for in loop over an array you get its indexed values plus the method names of all the added helper methods.
The benefit that ProtoSafe provides is that it allows Prototype to be used alongside 3rd party code without causing these compatibility issues.
Also it can be run against multiple frameworks which is good in the widget environment.
The demo page shows MooTools,Prototype,Dojo,YUI,jQuery all running on the same page.
Some highlights of ProtoSafe are:
- It allows Prototype to work with 3rd-party scripts (no Array for-in
loop pollution). - It works with Prototype 1.4-1.6.0.2.
- Custom Packer3 that supports Prototype 1.6+/Scripty 1.8.1+
- Only 3kb gzipped, less when compiled into the standalone js.
ProtoFlow: Coverflow for Prototype
Obaid Ahmed has written a coverflow-like component on top of Prototype and Script.aculo.us called ProtoFlow.
It is simple to use:
-
-
<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 src="imgs/Tropfen_1_Kopie_201721.jpg"/>
-
<img src="imgs/Fries_201253.jpg"/>
-
<img src="imgs/Fries_201253.jpg"/>
-
</div>
-
-
<ul id="protoCaptions" class="protoCaptions">
-
<li>Caption 1</li>
-
<li>Caption 2</li>
-
<li>Caption 3</li>
-
<li>Caption 4</li>
-
<li>Caption 5</li>
-
-
<li>Caption 6</li>
-
<li>Caption 7</li>
-
<li>Caption 8</li>
-
</ul>
-
-
-
Event.observe(window, 'load', function() {
-
cf = new ProtoFlow($("protoflow"), {captions: 'protoCaptions'});
-
});
-
Ajax
JavaScript
component
page
Prototype
front
Scriptaculous
Canvas Polar Clock
"agrath" has developed a very nice Canvas example using Prototype that makes use of a common Prototype-isms: Object.extend, Class.create, bind, enumerables, $w, $.
The Polar Clock is a different visualization of time and the example walks through all of the work required to implement it using Prototype 1.6.0.2 and Canvas, including the draw method:
this.clearCanvas();
var w = 20;
var r = 260;
this.date = new Date();
var cr = r;
$('labels').update()
$w("month day weekday space hour min second").reverse().each(function(interval){
cr = cr - w - w/2;
if(interval != 'space')
{
var ir = this.intervalToDegrees[interval].bind(this.date)();
var i = ((ir / 360) * 255) + 147;
var color = this.cc.rgbToCss(this.cc.hslToRgb(i.wrap(0,255),205,127));
this.drawSolidArc(color, cr, w, ir.toRadians());
$('labels').insert(this.getIntervalLabel[interval].bind(this.date)() + '<br />');
}
}.bind(this));
},
The article walks through a lot of Canvas as well as the Prototype side of things. Very thorough.
Motionbox EventHandler: Event Subscription and Delegation
The developers of MotionBox have written a custom Prototype.js based library to handle event delegation and they decided to open source their work.
They told me:
As you know, the technique of listening to events high in the DOM adds a lot of benefits. The two most notable are:
- The ability to bind to events before the elements are available in the DOM. This is especially useful for AJAX applications where the DOM is being updated as there is no need to (re)create all your observers. Using this library, the developer doesn't care if an element exists or not, he/she can simply say "any thing with this class works this way" and "anything with this ID does this" All with a simple interface:
MBX.EventHandler.subscribe("#myId", "click", myHandlerFunction); - Since we handle events outside of the usual manner, custom event handling becomes trivial. The subscription interface is exactly the same, and custom events can be fired easily with:
MBX.EventHandler.fireCustom(domElement, "my_custom_event_name");
Given the following doc:
You can do the following:
MBX.EventHandler.subscribe(".my_li_class", "click", my_listener); // this will trigger 'my_listener' by clicking either of the LIs below
MBX.EventHandler.subscribe([".my_ul_class", "#one"], ["click", "mouseover"], [my_listener, my_second_listener]);
// Custom events
MBX.EventHandler.subscribe("#one", "my_custom_event_name", my_listener);
// Fire them