Yahoo! UI Library - the JS/Ajax lib used by Yahoo for its own applications. BSD license!
javascript - 11.4.2005 - 14.2.2006
CSS Fisheye - CSS magnifying glass effect in a text block.
Lightbox JS - Display photos with JS on the page. Nice effect.
ScriptAculoUs - MochiKit - Trac - a port of the script.aculo.us effects to MochiKit. Finally, drag and drop and other effects with the significantly better technical MochiKit base.
AES (Rijndael) Encryption Test in JavaScript - AES Encryption in JavaScript
JavaScript Encryption Library - Blowfish Encryption in JavaScript
OpenPGP Message Encryption in JavaScript - AES and RSA and some support libraries in JavaScript - enables creating PGP-encrypted texts.
Rijndael in JavaScript - AES in JavaScript again, this time specifically designed for compatibility with older browsers as well.
twofish/javascript - TwoFish Encryption in JavaScript
/my/cssQuery/ - the IE7 author (not the one from Microsoft, but the compatibility hacker) has split out his CSS Query Engine as a standalone program. A very powerful way to find parts of documents using CSS selectors in JavaScript.
CSS2/DOM - Styling an input type="file" - wild hacks to style file upload buttons with CSS or JavaScript.
StickBlog » Blog Archive » Upload multiple files with a single file element - a nice method to upload multiple files without having to deal with a forest of browse buttons.
Weblogs - Variation on the previous link, here JavaScript and CSS together.
Ajax Sucks Most of the Time (Jakob Nielsen's Alertbox December 2005) - why Jacob Nielsen is right - sometimes.
Commentary - Sticky notes for websites, implemented as WSGI middleware. Very interesting, could be particularly interesting for source views or similar, or for longer texts.
Paj's Home: Cryptography: JavaScript MD5: sha1.js - JavaScript implementation of SHA1 - practical if you want to avoid plaintext passwords in web forms. Of course, you should always have a fallback, because not everyone has JavaScript available or activated. The site also has MD5 and MD4 implementations and a few other snippets on the topic.
Userscripts.org - Universal Repository - a hub for Greasemonkey scripts. Mountains of scripts. For almost everything, and a bit of the impossible.
axentric. a web designer's “tackboard”. - generalized version of the yellow-fade technique by 37signals. Nice for highlighting parts of pages that shouldn't stay permanently.
DragAndDrop - MochiKit - Trac - Drag and drop with MochiKit.
Web Development Bookmarklets - various bookmarklets that are very helpful for web development.
Selenium is a test automator for web applications. It runs directly in the browser and uses IFrames and JavaScript to hook into the page being tested.
The JavaScript Interactive Interpreter is a nice toy: you can enter JavaScript expressions and see the results directly. So in principle a JavaScript shell - only it runs in the browser window, of course.
No idea if it's really The Coolest DHTML / JavaScript Calendar, but it looks quite nice. And it has a few quite important features - such as the ability to move it.
Ajax differently
Subway's new Ajax framework has an interesting approach: using inspect, Python source is retrieved from a method and then translated to JavaScript. Of course, only a subset of Python is supported, but the idea is quite interesting - Python syntax for JavaScript.
Of course, the semantic differences between Python's and JavaScript's interpreter execution will bite you sooner or later, but for simpler things (and many Ajax things are actually quite banal code on the JavaScript side), you can build without JavaScript source.
The whole thing would of course be much more elegant if Python had a reasonable macro language integrated - or if you could build macros in Python in the way you can in Common Lisp. This would make the definition of the subset and the creation of JavaScript from it much more elegant. Perhaps Philip J. Eby's work on configuration languages could help - it is essentially the approach of a macro facility for Python.
Personally, I would rather pursue an approach in Python where JavaScript is generated through Python code execution (i.e., not parsing and compiling) - because many Ajax functionalities are quite standardized processes. The DOM tree is usually manipulated according to fixed specifications, with data delivered via JSON. Most of this could be well standardized. However, I don't have any concrete code ready yet, so far Ajax for me is still direct JavaScript code - although with the help of MochiKit.
Let's see what else is happening in the Ajax-Python land. CrackAjax is at least another approach that might inspire others to build on this a bit better.
Pragmatic Ajax is a book (currently in beta - you can pre-order and get the betas as PDF) about Ajax and all the surrounding stuff. The Pragmatic Bookshelf books are usually quite pragmatic (aha) and pleasant to read, so it might be worth it.
MochiKit Tutorial Part 1
The first part of the MochiKit Tutorial is online. Very interesting reading - some of the points are quite thought-provoking. And MochiKit has already proven itself to me in real-world use - and yes, I almost exclusively use JSON in the process.
JavaScript + CSS Box Model Puzzle
So, I have this HTML table. All the TDs are centered with their content using text-align: center. In these TDs, I have two DIVs displayed on top of each other. The top one contains an IMG, and the bottom one just contains some text. Both contents are also centered. Now, using JavaScript DOM functions, I swap the top DIV with the IMG inside it with another DIV that contains two DIVs, which in turn contain text. The texts in the inner DIVs of the new DIV are centered. However, the DIV itself, which contains the inner DIVs, is no longer centered relative to the encompassing TD. The problem is reproducible with Safari and Camino - somehow the "align content center" property is lost for the newly added elements. I've tried all possible CSS attributes and experimented with everything (e.g., checking if the old DIV with the IMG inside or the IMG itself has a value for left), but for some reason, it just won't work.
The background for all this: when you click on an icon, an IMG should be completely replaced with a DIV of the same size, containing some switches with which properties of the IMG can be changed. Basically, something similar to the widgets in Dashboard - configuration on the "back" of an image.
At the moment, I'm only taking over the height of the image, so the vertical alignment is perfect. However, the horizontal alignment remains dynamic. If I have two cells on top of each other and both switch to configuration, the table changes in width. This causes ugly jerking. But I don't want to statically expand the TDs, otherwise the layout would no longer dynamically adjust to the browser width.
Oh, and all this has to work with Safari, it's finally my main browser.
Update: in the comments, there are links to test pages with which you can see the effect.
JavaScript and the escape() Function
Note to self: escape() in JavaScript is only suitable for latin-1 - a utf-8 string with special characters sends these as latin-1 characters over the line. Pretty stupid when you're tinkering with a form via Ajax and then sending a value to a function in the backend that actually expects utf-8. encodeURIComponent is the answer, not escape.
MochiKit - First Experiences
I had already briefly mentioned MochiKit – A lightweight Javascript library. I used it at viele-bunte-bilder.de (offline since 2007) (so that the owner of a gallery could change the image names and folder names). Pretty brilliant small library for JavaScript. Makes working with JavaScript much more pleasant.
A Treeview in JavaScript that can be used within pages (without frames) and still remembers its state.
JSAN is what CPAN is for Perl - a central directory and download area for JavaScript sources and packages.
MochiKit is a JavaScript library with a whole range of extensions for JavaScript. Above all, iterators, sensible functional concepts (filter, map, partial application), but also a whole range of new ideas, such as a very nice AJAX integration. Looks quite nice, I have to play around with it.
Assign JavaScript Actions to CSS Selectors
Cool stuff: Behaviour is a JavaScript library that allows you to bind JavaScript actions to CSS selectors. The advantage: the actions disappear from the HTML code - making it much slimmer. And the actions can be adapted to new requirements at any time by changing the selectors.
In my first applications of Ajax, I stumbled upon exactly this problem: the JavaScript actions clutter the code that has just been painstakingly reduced to semantic HTML. Exactly what used to annoy me about all the table layouts now annoys me about the whole JavaScript thing. A clean separation of code, semantics, and style is exactly what I need. Actually, something like this should be part of the HTML standard.
I definitely need to try this out, because if it's usable in terms of performance, I should take a closer look at a few of the last Ajax actions and change them ...
Objects and Functions with JavaScript
Since the OO aspect of JavaScript is often overlooked, here's a text about Object Hierarchy and Inheritance in JavaScript.
I myself have been a fan of this approach to OO since my first encounters with prototype-based OO languages like Self and NewtonScript - the pigeonhole thinking of class-based OO approaches is often restrictive, especially when modeling real-world objects.
By the way, JavaScript also has a whole lot of other nice features that are often overlooked - first and foremost the nice anonymous functions, through which Closures in JavaScript are realized. And higher-order programming can also be implemented with it.
If you now combine Prototype-OO and Higher-Order-Programming, something like Prototype might come out - a library for JavaScript with a lot of interesting extensions such as elegant Ajax bindings, simpler callback construction and many other toys. Another possibility could arise from Bob Ippollitos MochiKit, if it is ever published (and lives up to the hype).
Prototype, by the way, requires a lot of imagination as to what can be done with it - there is no documentation after all.
vcXMLRPC is an XML-RPC implementation in JavaScript. Very practical for integrating JavaScript code and server code when you don't want to manually piece together every encoding/decoding. However, the project apparently stopped being developed in 2001.
LiveSearch with WordPress works
I just took a look at LiveSearch and played around with it a bit. It can be integrated into WordPress with some hacking. If you now enter a term in the search form on the right, a list of search results will appear after a short delay - specifically the titles of the posts. This uses the normal WordPress search, so these are the same results you would get if you simply pressed Enter - just faster thanks to Ajax and as a direct inline list. Fun stuff. Should work with current IEs, Mozilla derivatives, and current Safaris.
However, strangely enough, the cursor keys for moving through the search results don't work for me, even though the code seems identical to the BitFlux page. Somehow it doesn't find the first line or something - very strange. But that part doesn't really interest me, so it doesn't bother me if it doesn't work.
Hmm. Safari works flawlessly, but my Firefox under OS X doesn't seem to work. Very strange. To be precise, it works with Firefox only after I delete a character with Backspace or press Space once. After that, it runs smoothly. Can someone explain this to me? Strangely enough, the cursor key navigation in the search results works with Firefox - if you have a list of results...
Update: strangely enough, the cursor key navigation now works in Safari. Something here is very strange ...
Dive Into Greasemonkey is a free online book by Mark Pilgrim about programming userscripts for Greasemonkey. With these userscripts, you can change websites when they are displayed using JavaScript - for example, cut out firmly integrated advertising blocks, rewrite links with affiliate IDs so that your own is used, simply repair strange HTML so that you can actually do something with the website, or all kinds of other fun things.
Simulation of :before with content: in IE6
The IE6 just can't handle :before when you want to insert content into the page via content: in the CSS. Quite annoying if you use it. The IE7 project that I wrote about in the previous article doesn't work reliably for me either - for example, under a Citrix server it won't execute it, probably because some security settings are missing there. Strange. Anyway, I looked at the problem myself and found a fairly compact solution, at least for my specific version of the problem: I just want to place icons before a link.
For this, links have one of three classes or no class: class="zu" defines a collapsed navigation element, class="auf" an expanded one, class="ohne" a link that should not be specially beautified, and all other links get a standard icon.
For this, I simply attach the following code at the bottom of the file just before the /body:
var links = document.getElementsByTagName("a");
for (var i=0; i
I then wrap the whole thing in a conditional comment for IE so that it is only executed by this. That's it. Simple and effective. Disabled JavaScript is not critical in my case, as without JavaScript on the system (it's a business solution with high interactivity) nothing will run anyway in the future - Ajax needs JavaScript as a component ...