Try this gist!

First create your bower.json file and run bower install

{
  "name": "bower-masonry-imagesloaded-requirejs",
  "version": "0.0.0",
  "dependencies": {
    "requirejs": "~2.1.8",
    "jquery": "~1.10.2",
    "masonry": "~3.1.2",
    "imagesloaded": "~3.0.4"
  }
}

Then configure require.js

require.config({
    paths: {
        jquery: '../bower_components/jquery/jquery',
        eventie: '../bower_components/eventie',
        'doc-ready': '../bower_components/doc-ready',
        eventEmitter: '../bower_components/eventEmitter',
        'get-style-property': '../bower_components/get-style-property',
        'get-size': '../bower_components/get-size',
        'matches-selector': '../bower_components/matches-selector',
        outlayer: '../bower_components/outlayer',
        masonry: '../bower_components/masonry',
        imagesloaded: '../bower_components/imagesloaded'
    }
});

and then code the app:

define(['masonry/masonry', 'imagesloaded/imagesloaded'], function(Masonry, imagesLoaded) {
    $(document).ready(function() {
        var container = document.querySelector('#masonry');
        imagesLoaded(container, function() {
           var msnry = new Masonry(container, {
               columnWidth: 200,
                gutter: 20,
                itemSelector: '.item',
                isFitWidth: true
           });
             
       });
    });
});

Its scrabbled together from http://masonry.desandro.com/appendix.html and various StackOverflow posts.

http://jsfiddle.net/QMeuV/1/embedded/result/

Its hosted on jsfiddle.net and enables you to create Bookmarklets which use jQuery based on the code i found here:
http://coding.smashingmagazine.com/2010/05/23/make-your-own-bookmarklets-with-jquery/

It also features Javascript Syntax Highlighting using http://codemirror.net/.

*UPDATE*
this tool now (also) lives on https://github.com/gherkins/bookmarklet-generator

watch the demo on this almost autogenerated github page:
Demo

Usage is like this:

 $('.status').pump({normal: 'normal',
                    pump: 'pumpup',
                    interval: 400,
                    stop: 'statusDone'});

Damit kann man sehr einfach Deeplinks in Ajax getriebenen Seiten realisieren.

So lassen sich zum Beispiel verschiedene Zustände in einer Ajax Seite navigierbar machen, wie zum Beispiel einzelne Tabs via Link öffnen oder auch Akkordion Zustände.
Oder man kann Ajax Bereiche SEO technisch erfassbar machen.

Das Plugin nutzt auch die HTML5 History API, damit werden Ajax Zustände in die Browser History geschrieben, womit sich der Zurück Button dann auch damit nutzen läßt ohne die Seite neu laden zu müssen.
Auch kann man einfach die Url im Address Bar ändern.

Am besten schaut man sich mal die Beispiele auf der Demo Seite an.

Tolle Sache.

Zum Beispiel kann man sich in Javascript Paramter-Übergaben sparen und sich die Daten holen, die man braucht.
Das hält das Markup schön Javascript frei -im Sinne von unobtrusive.
In meinem Fall brauchte ich einen Event Tracker, der Aktionen auf dynamisch generierten Elementen aufzeichnet.

Dafür werden ins Markup die Attribute gesetzt und mit den dynamische Werten belegt:

<a data-mynamespace-query="<?php echo $q?>" 
     data-mynamespace-site="<?php echo $s?>" 
          href="<?php echo $l;?>" target="_blank">

Dann braucht man noch einen Event Listener, der sich die Daten holt und dann zB per Ajax zum wegspeichern versendet.
Mit Jquery sieht das dann so aus:

$(id + " a").click(function(event){  
	var s = $(this).attr('data-mynamespace-site');
	var q = $(this).attr('data-mynamespace-query');
	var u = $(this).attr('href');
	$.post('/go/'+s+'/'+q+'?url='+u);  
});  

Ist doch ne saubere Sache :)

Man könnte Google Analytics Event Tracker so füttern, wie es in diesem Blog gemacht wird.

(function($) {

  $('item').each(function() { $(arguments[1]).find('dc\:creator').[...]() } );

})(jQuery);

Dies entspricht wohl rein syntaktisch nicht ganz dem entsprechendem CSS3-Proposal (einzusehen unter http://www.w3.org/TR/css3-selectors/#typenmsp). Ich habe beide Möglichkeiten interessehalber auch einmal in einem aktuellen FF3.6 und Chromium getestet:

<style type="text/css">
/*<![CDATA[*/
  @namespace hanswurst url(https://www.meins.int)

  hanswurst|kaese
  {
    color: red;
  }
/*]]>*/
</style>
<hanswurst:kaese>
  Hanswurst liebt käse
</hanswurst:kaese>

Ergebnis: Naja, klappt nicht. Eventuell hat jemand eine Idee oder kann mich korrigieren?

Silverstripe & GD:
http://www.ssbits.com/web-2-0-mirrored-images/

jQuery & Canvas:
http://www.digitalia.be/software/reflectionjs-for-jquery#demo

weitergehende Erklärungen dazu spare ich mir jetzt mal, sind ja beide gut dokumentiert :)

Mit der WebCam wird die Absicht des Users erkannt und nur ein Event getriggert wenn der MouseOver wirklich gewollt ist.

Möglicherweise ist es technisch etwas anders gelöst. Aber der Effekt ist gut!

Das geht so:
Juitter (1.0) runterladen, in sein Projekt kopieren.

Javascript einbinden:

<script language="javascript" src="/app/js/jquery-1.3.1.min.js" type="text/javascript"></script>
<script language="javascript" src="/app/js/jquery.juitter.js" type="text/javascript"></script>
<script language="javascript" src="/app/js/system.js" type="text/javascript"></script>

Container in die Seite einbinden:

<div id="juitterContainer"></div>

CSS einfügen:

#juitterContainer { overflow: auto; padding: 2px; font-size: 12px; height: 650px; width: 419px; border: 1px solid silver }
/*JUITTER PLUGIN CSS*/
#juitterContainer .twittList{margin:0;padding:0;} /* UL that will contain the list of tweets */
/* Bellow the list of tweets "<li>" */
#juitterContainer .twittLI{list-style:none;background:#EEFDEA;margin:0;padding:5px 0 0 0;border-bottom:dashed 1px #CAF8C9;padding:3px;clear:both;height:55px;}
#juitterContainer .twittList SPAN.time{color:#777;font-size:0.9em}
#juitterContainer .twittList A{color:#006600;} /*Links inside the tweets list */
/* Bellow the CSS for the avatar image */
#juitterContainer .juitterAvatar{float:left;border:solid 1px #D3EECA;background:#FFF;margin-right:5px;padding:2px;width:48px;;height:48px;}
#juitterContainer .jRM{float:right;clear:both} /*read it on twitter link*/
#juitterContainer .extLink{} /*CSS for the external links*/
#juitterContainer .hashLink{} /*CSS for the hash links
*/ /*end of Juitter CSS*/

und fertig!

Die Konfiguration geht in der system.js.
Dort kann man die zu suchenden Keywords einstellen, die Update Intervalle und noch einiges mehr.

Was noch etwas verbesserungswürdig ist, ist die Datumsanzeige, hier nimmt Juitter ganz einfach das von Twitter übergebene RFC 2822 Datum und stellt es dar.

Das geht auch schöner!
Dazu hab ich das jQuery PrettyDate Plugin genommen und mit Juitter gebündelt.
Also Plugin noch einbinden:

<script language="javascript" src="/app/js/jquery.prettydate.js" type="text/javascript"></script>

Dann Juitter ein wenig aufgebohrt, so dass man nun in der system.js eine dateFormat option hat:

//set your Date Format:
//locale: uses JS toLocaleString
//pretty: uses prettyformat like so: 3 Days ago
//normal: RFC 2822 formatted date

dateFormat: "pretty"

Sprach Einstellungen für prettyDate sind auch möglich:

$.prettyDate.messages = {
now : "gerade eben",
minute : "vor einer Minute",
minutes : $.prettyDate.template("vor {0} Minuten"),
hour : "vor einer Stunde",
hours : $.prettyDate.template("vor {0} Stunden"),
yesterday : "Gestern", days : $.prettyDate.template("vor {0} Tagen"),
weeks : $.prettyDate.template("vor {0} Wochen")

}

Und schon ist es ein bißchen schicker!
Den Bundle gibts hier (juitter.dateimproved) zum download.
Alles weitgehend ungetested und ohne Gewähr.
Bleibt zu hoffen, dass es in die nächste Juitter Version integriert wird.

1. Daten holen
Die Daten holt man am besten über die Jquery Methode serializeArray().

var s = $('#campaigns form').serializeArray()

Damit holt Jquery alle Values in dieser Form als Array, bei radio oder checkbox types jeweils die aktivierten.

2. Wie versenden?
Nun stellt sich die Frage, wie man die Daten schön aufbereitet und dann versendet.

Man könnte jeden Value manuell als Parameter angeben, ist aber ein wenig umständlich.
Am besten wäre eine Lösung die das Array in ein JSON String wandelt und damit einen Parameter zu füllen:

vars=JSON

Auf dem verarbeitetenden Server kann man den dann wieder decodieren und schön auf key:value pairs arbeiten.

Leider kann Jquery das nicht von Haus aus, dafür braucht es einen JSON stringifier.
Den gibts hier: http://json.org/json2.js (Update: https://github.com/douglascrockford/JSON-js)

Damit gehts dann so:

$.post(url, {module : "saveCampaign",vars : JSON.stringify(s)},function(data){
createActvityDoneDiv_(randomId,data);
})

Auf dem Server decodiert man das dann:

$s = json_decode($_POST['vars']);

…und man bekommt sowas:

[0] = stdClass Object
(
[name] = Name
[value] = asdasdass
)

[1] = stdClass Object
(
[name] = status
[value] = enabled
)

Damit kommt ja schon klar auf dem Server
aber ist doch irgendwie ne scheiss Struktur.
So eine will man haben:

[Name] = asdasdass
[status] = enabled

Da muss der Client wohl noch was arbeiten:

var t = {};
s = $('#campaigns form').serializeArray();
jQuery.each(s,function(){
t[this.name]=this.value;
});
//und ab
$.post(url, {module : "saveCampaign",vars : JSON.stringify(t)},function(data){
createActvityDoneDiv_(randomId,data);
})

Dann gehts.