Yahoo! UI Library - die JS/Ajax-Lib, die von Yahoo für die eigenen Anwendungen benutzt wird. BSD-Lizenz!
javascript - 11.4.2005 - 14.2.2006
CSS Fisheye - CSS-Lupen-Effekt in einem Textblock.
Lightbox JS - Fotos mit JS in der Seite einblenden. Netter Effekt.
ScriptAculoUs - MochiKit - Trac - eine Portierung der script.aculo.us Effekte auf MochiKit. Endlich Drag and Drop und andere Effekte mit der deutlich besseren technischen MochiKit Basis.
AES (Rijndael) Encryption Test in JavaScript - AES Encryption in JavaScript
JavaScript Encryption Library - Blowfish Encryption in JavaScript
OpenPGP Message Encryption in JavaScript - AES und RSA und einige Supportlibs in JavaScript - ermöglicht PGP-verschlüsselte Texte zu erstellen.
Rijndael in JavaScript - nochmal AES in JavaScript, diesmal speziell auf Kompatibilität auch mit alten Browsern ausgelegt.
twofish/javascript - TwoFish Encryption in JavaScript
/my/cssQuery/ - der IE7-Autor (nicht der von Microsoft, sondern der Kompatibilitätshacker) hat seine CSS Query Engine als eigenes Programm ausgegliedert. Sehr mächtige Möglichkeit Dokumententeile anhand von CSS Selektoren in JavaScript zu finden.
CSS2/DOM - Styling an input type="file" - wilde Hacks um File-Upload-Buttons mit CSS oder JavaScript zu stylen.
StickBlog » Blog Archive » Upload multiple files with a single file element - nette Methode um mehrere Files hochzuladen ohne einen Wald von Browse-Buttons haben zu müssen.
Weblogs - Variation auf den vorigen Link, hier JavaScript und CSS zusammen.
Ajax Sucks Most of the Time (Jakob Nielsen's Alertbox December 2005) - why Jacob Nielsen is right - sometimes.
Commentary - Postit-Kommentare für Webseiten, ausgeführt als WSGI Middleware. Sehr interessant, könnte vor allem für Sourceviews oder ähnliches interessant sein, oder für längere Texte.
Paj's Home: Cryptography: JavaScript MD5: sha1.js - JavaScript-Implementation von SHA1 - praktisch, wenn man Klartextpasswörter in Webformularen vermeiden will. Natürlich sollte man immer einen Fallback haben, denn nicht jeder hat JavaScript verfügbar oder aktiviert. Auf der Site sind auch MD5 und MD4 Implementationen und ein paar andere Schnipsel zu dem Thema.
Userscripts.org - Universal Repository - eine Anlaufstelle für Greasemonkey-Scripte. Berge von Scripte. Für alles mögliche, und auch ein bischen unmögliche.
axentric. a web designer's “tackboard”. - verallgemeinerte Version der yellow-fade-Technik von 37signals. Nett um Highlights in Seiten zu legen, die nicht dauerhaft stehen bleiben sollen.
DragAndDrop - MochiKit - Trac - Drag und Drop mit MochiKit.
Web Development Bookmarklets - diverse Bookmarklets die sehr hilfreich für Webentwicklung sind.
Selenium ist ein Testautomator für Webanwendungen. Es läuft direkt im Browser und benutzt IFrames und JavaScript um sich in die zu testende Seite zu hängen.
Der JavaScript Interactive Interpreter ist ein nettes Spielzeug: man kann JavaScript-Ausdrücke eingeben und die Ergebnisse direkt sehen. Also im Prinzip eine JavaScript-Shell - nur läuft die natürlich dann im Browserfenster.
Keine Ahnung ob es wirklich The Coolest DHTML / JavaScript Calendar ist, aber er sieht ganz nett aus. Und hat ein paar recht wichtige Features - wie z.B. die Möglichkeit, ihn zu verschieben.
Ajax mal anders
Subway's new Ajax framework hat einen interessanten Ansatz: per inspect wird Python-Source aus einer Methode geholt und dann nach JavaScript übersetzt. Natürlich wird dabei nur ein Subset von Python unterstützt, aber die Idee ist recht interessant - Python-Syntax für JavaScript.
Natürlich werden die semantischen Unterschiede zwischen Pythons und JavaScripts Interpreterablauf einen früher oder später beissen, aber für einfachere Sachen (und viele Ajax-Sachen sind tatsächlich recht banaler Code auf JavaScript-Seite) kann man so ohne JavaScript-Source aufbauen.
Das ganze würde natürlich wesentlich eleganter ausfallen, wenn Python eine vernüntige Makrosprache integriert hätte - bzw. wenn man in Python Makros in der Art bauen könnte, wie man es in Common Lisp kann. Damit wäre die Definition des Subsets und die Erstellung des JavaScripts daraus wesentlich eleganter machbar. Eventuell könnte hier P hillip J. Ebys Arbeit an Konfigurationssprachen helfen - es ist ja im Prinzip der Ansatz einer Makro-Einrichtung für Python.
Ich persönlich würde daher bei Python eher einen Ansatz verfolgen bei dem durch Python-Code-Ablauf (also nicht Parsen und Compilieren) JavaScript generiert wird - denn viele Ajax-Funktionalitäten sind recht standardisierte Abläufe. Es wird in der Regel der DOM-Tree manipuliert, nach festen Vorgaben, mit Daten die über JSON angeliefert werden. Das meiste liesse sich gut standardisieren. Allerdings hab ich da noch keinen konkreten Code parat, bisher ist Ajax bei mir immer noch direkter JavaScript-Code - allerdings mit Hilfe von MochiKit.
Mal schauen was sich im Ajax-Python-Land noch so tut. CrackAjax ist zumindestens mal ein weiterer Ansatz, der möglicherweise andere inspiriert das ganze etwas besser auszubauen.
Pragmatic Ajax wird ein Buch (derzeit noch im Beta-Stadium - man kann aber schon vorbestellen und kriegt dann die Betas als PDF) über Ajax und die ganzen Sachen rundrum. Die Pragmatic Bookshelf Bücher sind meist recht pragmatisch (ach) und angenehm zu lesen, könnte sich also lohnen.
MochiKit Tutorial Teil 1
Es ist der erste Teil des MochiKit Tutorial online. Sehr interessante Lektüre - einige der Punkte sind durchaus bedenkenswert. Und MochiKit hat sich bei mir im Echteinsatz auch schon bewehrt - und ja, ich benutze fast ausschließlich JSON dabei.
JavaScript + CSS Box-Modell Rätsel
Also ich hab da so eine HTML-Table. In der sind alle TDs mittels text-align: center zentriert von ihrem Inhalt her. In diesen TDs hab ich zwei DIVs, die übereinander angezeigt werden. Die obere enthält ein IMG, die untere einfach nur einen Text. Beide Inhalte werden auch brav zentriert. Jetzt tausche ich per JavaScript DOM Funktionen die obere DIV mit dem IMG drin gegen eine andere DIV aus, die nur zwei DIVs enthält, die wiederum Text enthalten. Die Texte in den inneren DIVs der neuen DIV sind brav zentriert. Nur die DIV selber, in der die inneren DIVs liegen, ist bezogen auf die umfassende TD nicht mehr zentriert. Das Problem ist mit Safari und Camino reproduzierbar - irgendwie geht die Eigenschaft "Inhalt zentriert ausrichten" flöten für die neu zugefügten Element. Ich hab schon alle möglichen CSS Attribute durchgeguckt und mit allem möglichen rumprobiert (z.B. gucken ob die alte DIV mit dem IMG drin oder das IMG selber einen Wert für left hinterlegt hat), aber irgendwie will das ums Verrecken nicht funktionieren.
Der Hintergrund für das ganze: per Klick auf ein Icon soll ein IMG komplett gegen eine gleichgrosse DIV ausgetauscht werden, in der ein paar Schalter drin sind mit denen Eigenschaften des IMG geändert werden können. Im Prinzip sowas ähnliches wie die Widgets bei Dashboard machen - Konfiguration auf der "Rückseite" eines Bildes.
Im Moment übernehme ich nur die Höhe des Bildes, damit passt die vertikale Ausrichtung perfekt. Nur halt bei der horizontalen Ausrichtung bleibt jetzt alles dynamisch an der Stelle. Wenn ich zwei Zellen übereinanderstehen habe und beide umschalte auf Konfiguration wird die Tabelle in der Breite verändert. Was dann hässliches Zucken gibt. Aber ich will jetzt nicht die TDs statisch aufspannen, denn dann würde sich das Layout nicht mehr dynamisch an die Browserbreite anpassen.
Achso, das ganze muss auch noch mit dem Safari funktionieren, ist schliesslich mein Hauptbrowser
Upadte: in den Kommentaren stehen Links auf Testseiten mit denen man sich das ganze im Effekt mal angucken kann.
JavaScript und die escape() Funktion
Note to self: escape() in JavaScript ist nur latin-1 tauglich - ein utf-8 String mit Sonderzeichen schickt diese als latin-1 Zeichen über die Leitung. Ziemlich dämlich wenn man mit Ajax ein Formular dengelt und dann daraus einen Wert an eine Funktion im Backend schickt und das eigentlich utf-8 erwartet. encodeURIComponent ist die Antwort, nicht escape.
MochiKit – erste Erfahrungen
Ich hatte ja schon kurz MochiKit – A lightweight Javascript library erwähnt. Jetzt hab ich es bei viele-bunte-bilder.de (seit 2007 offline) benutzt (damit der Besitzer einer Galerie die Bildnamen und Ordnernamen ändern kann). Ziemlich geniale kleine Library für JavaScript. Macht die Arbeit mit JavaScript deutlich angenehmer.
Ein Treeview in JavaScript der innerhalb von Seiten (ohne Frames) benutzt werden kann und trotzdem sich State merkt.
JSAN ist das für JavaScript was CPAN für Perl ist - ein zentrales Verzeichnis und Downloadbereich für JavaScript Sourcen und Paket.
MochiKit ist eine JavaScript-Bibliothek mit einer ganzen Reihe von Erweiterungen für JavaScript. Vor allem Iteratoren, vernünftige funktionale Konzepte (filter, map, partial application), aber auch eine ganze Reihe neuer Ideen, wie zum Beispiel eine sehr nette AJAX-Integration. Sieht schon ganz nett aus, muss ich mal mit rumspielen.
JavaScript-Aktionen über CSS Selektoren zuordnen
Cool stuff: Behaviour ist eine JavaScript Library mit der man JavaScript-Aktionen an CSS Selektoren binden kann. Der Vorteil: die Aktionen verschwinden aus dem HTML-Code - der so deutlich schlanker wird. Und die Aktionen lassen sich durch Änderung der Selektoren jederzeit an neue Gegebenheiten anpassen.
In meinen ersten Anwendungen von Ajax bin ich genau über das Problem gestolpert: die JavaScript-Aktionen müllen den gerade erst mühsam auf semantisches HTML reduzierten Code voll. Genau das was mich vorher an den ganzen Table-Layouts geärgert hat, ärgert mich jetzt an der ganzen JavaScript-Geschichte. Eine saubere Trennung von Code, Semantik und Stil ist also genau das was ich brauche. Eigentlich würde sowas in den HTML-Standard gehören.
Muss ich ganz dringend mal ausprobieren, denn wenn das von der Performanz her brauchbar ist, sollte ich ein paar der letzten Ajax-Aktionen nochmal näher angucken und ändern ...
Objekte und Funktionen mit JavaScript
Da immer mal wieder der OO-Aspekt von JavaScript ignoriert wird, hier mal ein Text über Object Hierarchy and Inheritance in JavaScript.
Ich selbst bin seit meinen ersten Kontakten mit Prototyp-OO-Sprachen wie Self und NewtonScript ein Fan dieser Denkrichtung von OO - das Schubladendenken der klassenbasierten OO Ansätze ist oft einengend, gerade bei der Modellierung von Realwelt-Objekten.
Übrigens hat JavaScript auch noch eine ganze Menge anderer netter Eigenschaften die gerne übersehen werden - allen voran die netten anonymen Funktionen, über die Closures in JavaScript realisiert werden. Und higher-order programming lässt sich damit auch realisieren.
Wenn man jetzt Prototype-OO und Higher-Order-Programming zusammenpackt, kommt unter Umständen sowas wie Prototype heraus - einer Bibliothek für JavaScript mit einer Menge interessanter Erweiterungen wie z.B. eleganter Ajax-Bindings, einfacherer Callback-Konstruktion und noch vielen anderen Spielereien. Eine weitere Möglichkeit könnte sich aus Bob Ippollitos MochiKit ergeben, wenn es denn mal veröffentlicht ist (und es dem Hype standhält).
Prototype erfordert übrigens eine Menge an Vorstellungskraft was damit gemacht werden kann - es gibt nämlich keine Dokumentation
vcXMLRPC ist eine XML-RPC Implementation in JavaScript. Ganz praktisch für die Integration von JavaScript-Code und ServerCode, wenn man nicht jedes Encoding/Decoding von Hand zusammendengeln will. Allerdings hat das Projekt scheinbar 2001 aufgehört weiterentwickelt zu werden.
LiveSearch mit WordPress klappt
Ich hab mir gerade mal LiveSearch angeguckt und ein bischen herumgespielt damit. Liess sich mit etwas Hacken in WordPress integrieren. Wenn ihr jetzt in das Suchformular rechts einen Begriff eingebt, kommt nach einer kurzen Verzögerung eine Liste von Suchergebnissen - und zwar die Titel der Postings. Das ganze benutzt die normale WordPress-Suche, das sind also die gleichen Ergebnisse die ihr auch bekämt wenn ihr einfach Enter drücken würdet - nur dank Ajax einfach fixer und als direkte Inline-Liste. Witzige Sache. Sollte mit aktuellen IEs, mit Mozilla-Abkömmlingen und aktuellen Safaris funktionieren.
Was allerdings seltsamerweise bei mir nicht funktioniert, obwohl meines Erachtens der Code identisch ist zu der BitFlux-Seite, sind die Cursor-Tasten zur Bewegung in den Suchergebnissen. Irgendwie findet der nicht die erste Zeile oder sowas - sehr seltsam. Aber der Teil interessiert mich eigentlich eh nicht so doll, von daher störts mich nicht wenn der nicht funktioniert.
Hmm. Safari funktioniert tadellos, aber mein FireFox unter OS X will irgendwie nicht. Sehr seltsam das ganze. Genauer gesagt tuts das mit dem FireFox erst, wenn ich einmal ein Zeichen mit Backspace gelöscht habe oder einmal Space eingebe. Danach läufts sauber. Kann mir das mal jemand erklären? Witzigerweise funktioniert die Cursortastennavigation in den Suchergebnissen mit dem FireFox - wenn man denn mal eine Liste von Ergebnissen hat ...
Update: seltsamerweise funktioniert jetzt im Safari die Cursor-Tasten-Navigation. Irgendwas ist hier sehr strange ...
Dive Into Greasemonkey ist ein freies Online-Buch von Mark Pilgrim über die Programmierung von Userscripts für Greasemonkey. Mit diesen Userscripts kann man Webseiten bei Anzeige per JavaScript verändern - z.B. fest integrierte Werbeblöcke ausschneiden, Links mit Afiliate-IDs umschreiben so das die eigene benutzt wird, einfach nur seltsames HTML reparieren so das man mit der Webseite überhaupt was anfangen kann oder alle möglichen anderen spassigen Sachen.
Simulation von :before mit content: in IE6
Der IE6 kann ja nunmal nicht mit :before klarkommen, wenn man darüber per content: über das CSS Inhalt in die Seiten bringen will. Ziemlich nervig, wenn man das benutzt. Das IE7-Projekt von dem ich im vorigen Artikel schreibe funktioniert bei mir aber auch nicht verlässlich - z.B. unter einem Citrix-Server will er das nicht ausführen, warscheinlich fehlen ihm irgendwelche Sicherheitseinstellungen dort. Strange. Egal, ich hab mir das Problem selber mal angeguckt und eine recht kompakte Lösung gefunden, jedenfalls für meine spezielle Spielart des Problems: ich will nämlich nur Icons vor einen Link stellen.
Dazu haben Links eine von drei Klassen oder keine Klasse: class="zu" definiert ein zugeklapptes Navigationselement, class="auf" ein aufgeklapptes, class="ohne" einen Link der nicht speziell angehübscht werden soll und alle anderen Links kriegen ein Standard-Icon.
Dazu hänge ich einfach unten in die Datei kurz vor dem /body folgenden Code:
var links = document.getElementsByTagName("a");
for (var i=0; i
Den ganzen Kram packe ich dann am besten noch in einen bedingten Kommentar für den IE, so das er nur von diesem überhaupt ausgeführt wird. That's it. Simpel und wirksam. Deaktiviertes JavaScript ist in meinem Fall nicht kritisch, da ohne JavaScript auf dem System (ist eine Business-Lösung mit hoher Interaktivität) demnächst eh nix mehr laufen wird- Ajax braucht nunmal JavaScript als eine Komponente ...