Ajax.History

Ajax.History provided features

Three parameters are provided by Ajax.History allowing you to configure the browsing history manager.
A callback has also been introduced: onStateChange(string state).
This callback is launched when the state of the browsing history points to the request.
This allows for example to change the title of the page according to the state (see example below).

Ajax.History.Request

Ajax.History.Request used exactly as Ajax.Request of Prototype.

For an interactive example, we create a simple function:

function ajaxHistoryRequest(url, myState) { new Ajax.History.Request(url, { history : { id : 'example', state : myState, cache : true, onStateChange: function(state) { // change title History.setTitle(History.getTitle() + ' - Page Ajax #' + state); } }, onSuccess: function(transport) { $('box-example').update(transport.responseText); // some stuff } });

ajaxHistoryRequest('history/request1', 'first-test');

ajaxHistoryRequest('history/request2', 'second-test');

ajaxHistoryRequest('history/request3', 'third-test');

** The cache is enabled, if you use a module as FireBug on Firefox, you can see that the use of buttons back/forward of your browser does not reload the Ajax.Request.

Ajax.History.Updater

Ajax.History.Updater used exactly as Ajax.History.Request :

Automatic historyId :

Here, the historyId is not declared, the 'containerName' is used automatically.

new Ajax.History.Updater('containerName', 'my/url/to/load.html', { history : { cache : true } }); // location.href == '...#containerName={state}'

Disable historyCache :

The cache is disabled, so, when user perform back/forward of browser, the Ajax Request will be loaded whenever.

new Ajax.History.Updater('containerName', 'my/url/to/load.html', { history : { id : 'my-own-identifier', cache : false } }); // location.href == '...#my-own-identifier={state}'

Ajax.Cache

How does the cache?

Ajax.Cache can "simulate" an Ajax Request from an Ajax Request made beforehand. It takes only one argument: the object Ajax.Request / Updater create first.
In fact, Ajax.Cache is based on a modified prototype Ajax.Request API. Yes, to simulate the request, I remove the mechanism (real) sending the HTTP request.

Perform simulation manually :

Ajax.Cache is already implemented in Ajax.History.* classes. However, you can use it manually :

// the request is executed firstly
var request = new Ajax.Request('my/url/to/load.html', {
  method: 'POST',
  ...
});

// reproduced the Ajax.Request without HTTP request
new Ajax.Cache(request);

http://www.prototypextensions.com/history

Active-support-for-javascript

The focus is to extend the language, modifying the base classes to add several handy methods and shortcuts. It works on top of Prototype and extends the core classes somewhat to the same extent than ActiveSupport extends ruby's core to make a lot of stuff pretty.

For example, you can do things like:

  (10).minutes().fromNow()             //=> Date object ten minutes in the future
 "person".pluralize()                 //=> "people"
 ["dog", "cat", "mouse"].toSentence() //=> "dog, cat and mouse"
 Date.now().strftime("It's %H:%M")    //=> "It's 16:23"

Plus several other stuff, like string interpolation (a la Ruby), so you get:

  var name = "johnny";
 $Q("Hello, my name is #{name.capitalize()}"); //=> "Hello, my name is Johnny

And you can even interpolate inside objects! For example, let's suppose you have the following class:

  var Dog = Class.create();
 Dog.prototype = {
   initialize: function(name) { this.name = name; },
   woof: function() { return "woof!"; }
 }

 var bobby = new Dog("bobby");

You can use interpolation inside the class passing the binding to $Q as a second parameter :

  Dog.prototype.greet = function() {
   $Q("I'm #{this.name} and I #{this.woof()}", this); //=> "I'm bobby and I woof!"
 }

Or you can do this even outside classes:

  $Q("It's #{this.getMinutes()} after #{this.getHours()}", new Date());

So whatever you pass to $Q on the second parameter becomes what "this" points to inside the strings.

http://code.google.com/p/active-support-for-javascript/

Cloudo

Forgot forwarding that presentation file to your personal email address? Left office without reading through the agenda for tomorrow? Forgot copying those vacation images onto your USB stick to show your friends?

Your Computer With You, Even When It’s Not

Imagine a world where your computer wasn’t tied to a physical computer, but rather a computer that lived on the Internet, instantly accessible from any computer or mobile phone connected to the Internet, no matter where you are or what you are up to. Cloudo offers just this.

With Cloudo, every computer, in school, at work, at your friends’ or even in the library becomes your own, free of charge computer. And with Cloudo Mobile your online computer is accessible from your mobile phone as well.
Use Cloudo as your default computer, or use it side by side with your work or home computer.

http://www.cloudo.com/

AjaxCSSJS class

AjaxCSSJS is a class for loading JavaScript and CSS files on-demand. (load dynamically)

Download AjaxCSSJS

Example1:
new AjaxCSSJS('layout.css', 'css');


Example2:
new AjaxCSSJS('js/ajaxtab.js', 'js');

Example3:
new AjaxCSSJS('js/ajaxtab.js', 'js',
function() {alert('loaded')}
)

Example4 [New feature: remove()]
var style;

addCss = function() {
 style = new AjaxCSSJS('css/style1.css', 'css');
}

removeCss = function() {
 style.remove();
}

Command-Line-Fu

Command-Line-Fu is the place to record those command-line gems that you return to again and again.

Delete that bloated text file you've been using: you can use this site to create your own personal repository of useful commands. That way others can gain from your CLI widsom and your from theirs too. All commands can be commented on and discussed - voting is also permitted so the best float to the top.

http://www.commandlinefu.com/

Ruby/DBI - Direct database access layer for Ruby

Ruby/DBI is a database interface in the spirit of Perl's prolific DBI authored by Tim Bunce.

Ruby/DBI differs in quite a few ways, however. It incorporates many "rubyisms" while maintaining the core DBI interface, and a suite of commonly used DBD's are maintained with the application.

Ruby/DBI is not an ORM, like ActiveRecord or DataMapper. It is a lightweight, centralized API to database manipulation. An ORM may or may not be what you want for a given situation, due to weight, ease-of-use or other issues. Our goal with Ruby/DBI is to provide a compelling, lightweight interface that you can use for things where an ORM is too much or too cumbersome.

Getting started with Ruby/DBI is very easy if you have a working knowledge of SQL and your target database. Read the Documentation to get on your way!

The maintainer, Erik Hollensbe, has made a commitment to keeping Ruby/DBI compatible with future Ruby releases. There is also a significant interest in enhancing the suite by further clarifying and enforcing the interface, and further tailoring DBI for the specific needs of Ruby users (as opposed to many of the Perlisms maintained) without impacting the goal of the project. There is also significant effort applied to clarifying the underpinnings, making debugging and development simpler.

http://ruby-dbi.rubyforge.org/

Companion.JS

Companion.JS (pronounced Companion dot JS or CJS) is a Javascript debugger for IE. The current version is 0.4.2.
Companion.JS adds the following features to IE :

• Detailled javascript error reporting (call stack and real file name where the error occured).
• "Firebug"-like Console API feature.
• Javascript console feature useful to inspect javascript objects at runtime.
• A toolbar icon to open the Companion.JS panel.

To be able to use Companion.JS you'll also need to install Microsoft Script Debugger. See Installing Companion.JS for details.



http://www.my-debugbar.com/wiki/CompanionJS/HomePage

History Manager for AJAX. Fix the back button on AJAX

One of the major issues on AJAX web applications is the accesibility and usability lacks. Many users have manies and don¡t undestands about AJAX, they only expects that if they click the back button then it must works as always and get them back to the previous screen.

Digitarald.de have developed a solution HistoryManager - The Ajax Back-Button (v1.0) for Mootools developers.

Download prototype.historyManager.js

http://www.flash-free.org/en/2008/07/05/history-manager-para-ajax-solucion-al-boton-back

ScrollBox.js

Usage

Simply create a new ScrollBox object and pass in the element you would like to become a scroll box. Note that the element passed used to create the object must be positioned either relative or absolute. The example css file includes this directive on the first line.

Example:
var sb = new ScrollBox($('description_box'));

Full documentation will follow when I have time. For now, there is a complete implementation example included in the zip.

Features

Fully customizable, mostly though simple CSS changes. A sample implementation is included in the download. Supports scrolling with the mouse wheel. The buttons support clicking and holding, the scrollbar has multiple selectable behaviors, and the handle is fully functional. Supports keyboard events up, down, page up, page down, home, and end. Works with named anchors.

http://theblogthatnoonereads.tunasoft.com/2007/04/08/scrollbox_js/

Captcha cracking in JavaScript with Canvas and neural nets

Everybody’s favourite glass shield to protect web apps are CAPTCHAS. These are the distorted characters displayed on a page that a user has to enter before gaining access or sending off a form. They annoy normal users, are largely inaccessible to blind users or dyslexic people and are not that safe as we think they are. PWNtcha continually reports successful cracks of various captchas on the web using OCR algos and backend systems.

What is pretty amazing though is that now you can even crack the images using JavaScript and Canvas. ShaunF wrote a GreaseMonkey script that automatically solves captchas of the file hosting site Megaupload. There’s a demo of it available.

As John Resig explains in his analysis of the script there’s some pretty nifty work going on:

1. The HTML 5 Canvas getImageData API is used to get at the pixel data from the Captcha image. Canvas gives you the ability to embed an image into a canvas (from which you can later extract the pixel data back out again).
2. The script includes an implementation of a neural network, written in pure JavaScript.
3. The pixel data, extracted from the image using Canvas, is fed into the neural network in an attempt to divine the exact characters being used - in a sort of crude form of Optical Character Recognition (OCR).

True, Megaupload’s CAPTCHA is pretty basic, but it is still very impressive that you can use JavaScript to crack it. Seems like the getImageData API is something to have a closer look at.

http://ajaxian.com/archives/captcha-cracking-in-javascript-with-canvas-and-neural-nets

ActiveRecordjs.js

Cross Browser, Cross Platform, JavaScript ORM

ActiveRecord.js makes it easy to begin working with databases in JavaScript on the client or server, with Google Gears & Chrome, Aptana Jaxer, Adobe AIR or any platform supporting the W3C HTML5 SQL Specification (currently Webkit and iPhone).

Contributors

ActiveRecord.js is the first released component of ActiveJS a JavaScript framework initiative sponsored by Aptana. This project is still in it's early stages and we welcome your thoughts and ideas on the future of JavaScript application development. Since this is a GitHub hosted project, if you would like to directly contribute we recommend you fork the project and initiate a pull request to merge your changes.

Project Features

ActiveRecord.js is a single file, MIT licensed, relies on no external JavaScript libraries, supports automatic table creation, data validation, data synchronization, relationships between models, life cycle callbacks and can use an in memory hash table to store objects if no SQL database is available.

http://www.activerecordjs.org/

Jump Start CC Processing

It may be 2009, but credit card processing remains in the Dark Ages.

Give yourself a jump start

Our little no-nonsense guide helps you get a firm grip on the slippery concepts of credit card processing:

• the cc processing life cycle
• key industry terms / actions
• JavaScript code for validating & detecting card types
• code samples for Ruby’s ActiveMerchant
• getting started checklist & account information

All lovingly illustrated to make the concepts clear as a bell.

But wait, there’s more... planned!

We’re not done yet. Don’t miss out on version 2!

http://jumpstartcc.com/

HTML / CSS to PDF using Ruby on Rails

Ever tried to save a web page and send it to someone? What about printing a web page? Both pretty much suck.

A lot of people are talking about printing with HTML and CSS these days but what they don’t tell you is the following:

With CSS you can’t…

• Determine where page breaks happen.
• Set page size or type (landscape or portrait).
• Print background colors…some browsers don’t even print images.
• Set page footers.

Wow, that’s lame.

Ever tried sending someone a web page? Not a link, but the actual web page. It doesn’t work well at all.

http://sublog.subimage.com/2007/05/29/html-css-to-pdf-using-ruby-on-rails

Screencast : How to Create a File Upload Progress Bar in Rails, Passenger, Prototype and Low Pro

How to Create a File Upload Progress Bar in Rails, Passenger, Prototype and Low Pro from Erik Andrejko on Vimeo.

An upload progress bar is one of the best ways to improve the usability of file uploads in your application. This screencast will show how to create a file upload progress bar using Rails, Passenger, Low Pro and the upload progress bar apache module.

Screen Cast

• View a quicktime version: full, iPod.
• View the complete code for the screencast.

Required

• Passenger
• Upload progress bar apache module
• Prototype
• Low Pro for unobtrusive javascript
• Paperclip or something else to handle the uploaded files

Optional

• Configure a realistic (slow) development environment
• Passenger Prefpane a preference pane for Passenger under OS X Leopard

http://railsillustrated.com/screencast-file-uploads-progress-in-rails-passenger.html

Raphaël

Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.

Raphaël uses the SVG W3C Recommendation and VML (mostly equivalent Internet Explorer implementation) as a base for creatinggraphics. This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later. Raphaël’s goal is to provide an adapter that will make drawing vectorart (similar to Flash) compatible cross-browser and easy.

Raphaël currently supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.

• Raphaël Playground
• Reflection
• Image rotation
• Text rotation
• GitHub-a-like impact chart
• GitHub-a-like punch chart
• GitHub-a-like languages chart
• Raphaël Analytics chart
• Polar Clock
• JavaScript Boids
• Dynamic Spinner
• Australian Map

http://raphaeljs.com/

Ajax progress indicator with prototype

You may know that you can add a global ajax responder to your application:

Ajax.Responders.register({
onCreate: function() {
Ajax.activeRequestCount++;
},
onComplete: function() {
Ajax.activeRequestCount--;
}
});

But we not going to cover that here, because you can't get the originating object. For example, there's no way here for a global ajax responder to get the anchor object.

< a_class="add" href="#" onclick="new Ajax.Request('/products/3/categorizations/18', {asynchronous:true, evalScripts:true, method:'put'}); return false;">add

Here's the rails generator code:

<%= link_to_remote "add", { :url => product_categorization_path(@product, category), :method => :put } %>

So, let's add some code to prevent the user from clicking twice.
To keep the view clean, We'll implement it as a simple view helper in application_helper.rb

<%= link_to_remote "add", { :url => product_categorization_path(@product, category), :before => ajax_progress, :method => :put } %>

def ajax_progress
 "setTimeout(function(){ this.innerHTML = '...' }.bind(this), 100)"
end

SetTimeout takes either a function name or an anonymous function. We binding the anonymous function to "this", which in this context refers to the 'A' anchor tag. Because it's bound, we can refer to "this" inside the function and get the anchor tag.

The setTimeout is useful because it lets us modify the tag (even remove it from the DOM) without messing with the ajax request. You can use setTimeout on a form to change the action, so it can't be submitted twice (for important forms)

We going to step it up one more, because this code belongs in a library. Time to open up application.js and create a ghetto pseudoclass singleton thingy.

This will prevent the link from doing anything if the user clicks it twice.

Now, to modify the ajax_progress helper to simple beauty.

def ajax_progress
 "setTimeout(MyApp.ajaxing.bind(this), 100)"
end

Finally, let's show the user a GMail-style notice after 5 seconds, just to let them know that we're running slow or have just plain died.

MyApp = {

 ajaxing: function(){
   this.innerHTML = '...';
   this.onclick = FacetApp.nothing;
   setTimeout(MyApp.slooow.bind(this), 5000);
 },

 /* shows a ? symbol. useful for showing progress on an ajax action */
 slooow: function(){
   this.innerHTML = ".?."
   /* show a warning message in the ui somewhere */
 }
}

Got a better way of doing this?

http://www.caboo.se/articles/2008/3/27/ajax-progress-indicator-with-prototype

Ajax file upload

Browsers force us to use file inputs for uploads, which are impossible to style. Moreover, form-based uploads look obsolete in modern ajax applications. We can use flash to solve this problem, but javascript works nice too.

View an usage examples for jquery and prototype with various options.

Download

• jquery.ajax_upload.0.9.js(7KB)
• jquery.ajax_upload.0.9.min.js (3KB)
• prototype.ajax_upload.0.9.js (7KB)
• prototype.ajax_upload.0.9.min.js(3KB)

http://valums.com/ajax-upload/

Release:jQuery 1.3

January 14th, 2009: The jQuery team is pleased to release the latest major release of the jQuery JavaScript library! A lot of coding, testing, and documenting has gone in to this release and we're really quite proud of it.



http://docs.jquery.com/Release:jQuery_1.3
http://docs.jquery.com/Downloading_jQuery

dBug

Features

1. PHP version of ColdFusion’s cfdump.
2. Outputs colored and structured tabular variable information.
3. Variable types supported are: Arrays, Classes/Objects, Database and XML Resources.
4. Ability to force certain types of output. Example: You can force an object variable to be outputted as an array type variable.
5. Stylesheet can be easily edited.
6. Table cells can be expanded and collapsed.

How to use

1. include_once("dBug.php");
2. new dBug($myVariable);

http://dbug.ospinto.com/

How to surpress Firebug console on non-firefox browsers.

Firebug is the most useful Javascript debugging tool out there. Occasionally when doing a large piece of Javascript development I tend to use the console utility which cause other browsers (such as IE) to crash your script. So here is a small piece of extremely useful code in making other browsers immune to the errors. Simply add this at the start of your script and let the magic begin!

if (!("console" in window) || !("firebug" in console)) {
var names = ["log", "debug", "info", "warn", "error", "assert",
             "dir", "dirxml","group", "groupEnd", "time",
             "timeEnd", "count", "trace", "profile", "profileEnd"];
window.console = {};
for (var i = 0; i < names.length; ++i) {  
   window.console[names[i]] = function() {};  } }

http://blog.deensoft.com/category/firebug/

Websnapr 2.0

websnapr lets you capture screenshots of (almost) any web page. Allow your visitors to instantly visualize any web page before clicking. Increase site traffic, click-through rate and site stickiness.

Websnapr is completely free of charge. Websites containing illegal, adult or offensive contents are not allowed.

Websnapr is not the only free service we are offering. Don't forget to have a look also at our other useful services like popuri.us, a tool to quickly check your website's PageRank, Alexa Rank and more at a glance. Use the handy widget to show your site's popularity to your visitors.

http://www.websnapr.com/

Link Preview V2

Installation instructions

1. Change all image filepaths within the “websnapr.css” file to reference the correct filepath for your installation.
2. Change line 22 within the “websnapr.js” file to reference the directory in which you have stored the various speech bubble, loading and error images on your server.
   

   / Line 22
   baseURI: "./",
   

3. Add a reference to the “fdLinkPreview.js” and “websnapr.css” files within the head of your HTML document as is shown below (remember to change the filepath to suit your installation):
   

   < type="text/css" media="screen">
   @import "/the/path/to/websnapr.css"; 
   < / style >
   < Script type="text/javascript"
   src="/the/path/to/websnapr.js">
   < / script >

   ...and then give all links you wish to provide previews for the class websnapr.

http://www.frequency-decoder.com/2006/10/25/link-preview-v2/

Timeplot

Timeplot is a DHTML-based AJAXy widget for plotting time series and overlay time-based events over them (with the same data formats that Timeline supports).
Just like Timeline or Google Maps, Timeplot can be used with zero software installation, server-side or client-side. You can populate Timeplot with data by pointing it to an space or comma separated file (here is one of the data file for the timeplot above). Timeplot also supports Timeline's XML format, meaning that you can reuse the same data file of your Timeline and overlay them over a time series plot (here is the event file for the timeplot above).


http://simile.mit.edu/timeplot/
http://simile.mit.edu/wiki/Timeplot
http://code.google.com/p/simile-widgets/

Flotr Javascript plotting library

Flotr is a javascript plotting library based on the Prototype Javascript Framework (version 1.6.0.2 at the moment) and inspired by Flot (written by Ole Laursen).
Flotr enables you to draw appealing graphs in most modern browsers with an
easy to learn syntax. It comes with great features like legend support, negative
value support, mouse tracking, selection support, zoom support, event hooks, CSS
styling support and much more.

http://solutoire.com/flotr/

pChart - a PHP class to build charts

pChart is a PHP class oriented framework designed to create aliased charts. Most of todays chart libraries have a cost, our project is intended to be free. Data can be retrieved from SQL queries, CSV files, or manually provided. This project is still under development and new features or fix are made every week.

Focus has been put on rendering quality introducing an aliasing algorithm to draw eye candy graphics. Rendering speed has been dramatically enhanced since the first version, we'll still continue optimising the code!



http://pchart.sourceforge.net/

Create Web Wirable Interface Like Yahoo! Pipes with Wireit

WireIt is an open-source javascript library to create web wirable interfaces like Yahoo! Pipes for dataflow applications, visual programming languages or graphical modeling. Wireit uses the YUI library (2.6.0) for DOM and events manipulation, and excanvas for IE support of the canvas tag. It currently supports Firefox 1.5+, Safari 2.0+, IE 7.0, Opera 9+ and Chrome 0.2.x.

YUI Online Compressor

Rodolphe Stoclin has created a simple Web wrapper on top of the YUI Compressor that let’s you throw up your JavaScript and get back a compressed version.

It uses jQuery to do the inline results and show you the compression rate.

defaultValueActsAsHint

Thomas Fuchs has created defaultValueActsAsHint, an implementation of the Input Prompt pattern:

An often occuring UI pattern is “use the value of a textfield as hint what to input”. These fields all auto-clear when the user first focuses it (by clicking or tabbing it), and if nothing it entered, the hint will be shown once again once the user leaves it.

Because we decided to go this path for the “Quick entry” box we’re using for freckle time tracking, I dug out an older script I wrote and refreshed it a bit, and I present you defaultValueActsAsHint.

$('element_id').defaultValueActsAsHint();

This is all there’s to it, and the file to include is merely 18 lines of code. It works with textareas, too. Just specify whatever should be displayed as hint in the value attribute of the input (or as text within the textarea tag) and off you go. Define a ‘hint’ style if you like to show the text in gray, italics or whatever you fancy.

http://ajaxian.com/archives/defaultvalueactsashint