The code samples from my talk at the Ajax Experience conference are now available here.
Each example runs itself when you load its page, at least in Safari and Firefox. This is something I first did for my talk at LL2. It’s the only way I’ve ever been able to keep sample [...]
I’ll be giving a talk next Wednesday October 1 at The AJAX Experience, on “Practical Functional JavaScript”. This could be subtitled “distributing JavaScript across time and space”, or maybe just “how to do things with functions”1.
A couple of years ago I found that all the interesting AJAX programs that I wanted to write involved [...]
Yesterday I was profiling a page that used jQuery. The page took a long time to initialize. Firebug Profile (a great tool) told me that the time was in jQuery, but that wasn’t much help – the page initialization code had a lot of calls to jQuery, to bind functions to various page elements, and most of them were harmless.
Hence, jQuery.profile. Stick this in your page, call $.profile.start() to start profiling calls to $(selector), and then $.profile.done() to stop profiling and print out something like this:
Here’s a potential JSSpec spec for Sequentially.trickle.map:
[code language=”javascript”]
describe(‘Sequentially.trickle.map’, {
This doesn’t work. The problem is that Sequentially.trickle.map is asynchronous (it defers most of its computation – including the invocation of the callback – via setTimeout). This means that should_be isn’t called until after the spec has returned. If it succeeds, this isn’t a problem, but if it fails, JSSpec can’t associate it with the failing spec – worse, JSSpec will have already have marked it successful.
What’s wrong with this function? (Hint: it’s meant to execute periodically on a JavaScript page.)
[code language=”javascript”]
function updateExpirationText() {
It’s a trick question. Maybe nothing’s wrong. But if products can get very long, or if the msToDuration is very slow, you’ve locked up the UI for a long time. At best, this makes for sluggish response; at worst, the page that contains this will trigger a “script running slowly” error, and the user will likely abort all the JavaScript on the page.
JCON (the JavaScript Conformance gem) tests JSON values against ECMAScript 4.0-style type definitions
(PDF) such as string?, (int, boolean), or [string, (int, boolean), {x:double, y:double}?].
[code language=”ruby”]
type = JCON::parse ”[string, int]”
type.contains?([‘a’, 1]) # => true
type.contains?([‘a’, ‘b’]) # => false
type.contains?([‘a’, 1, 2]) # => true
[/code]
JCON also defines an RSpec matcher, conforms_to_js:
Three small libraries, that I carry with me from project to project:
With Fluently, you can do this:
[code language=”javascript”]
var o = Fluently.make(function(define) { define(‘fn1’, function() {console.info(‘called fn1’)}); define(‘fn2’, function() {console.info(‘called fn2’)}); define(‘fn3’, function() {return 3}); });to define an object with chained methods, that can be invoked thus:
[code language=”javascript”]
o.fn1().fn2() // calls fn1 and then fn2 o.fn2().fn1() // calls fn2 and then fn1JavaScript Fu extends Rails with a few facilities to better integrate JavaScript into Rails development:
1. The notes and statistics rake tasks compass JavaScript files in the public/javascript directory:
[code language=”bash”]
$ rake notes
public/javascripts/controls.js:
[code language=”bash”]
$ rake stats
| Name | Lines | LOC | Classes | Methods | M/C | LOC/M |
[...]
| JavaScript | 7287 | 6322 | 0 | 0 | 0 | 0 |
[...]
[/code]
2. The call_js RSpec matcher asserts that a string or response contains a script tag, that contains JavaScript that calls the named function or method:
I’ve updated my OpenLaszlo utility grab-bag to make browser <-> applet communication even easier. How easy?
Put this in your browser JavaScript:
[code language=”javascript”]
var gObject = {
And this in an OpenLaszlo applet:
[code language=”javascript”]
var gObject = FlashBridge.createRemoteProxy(‘gObject’, [‘f’, ‘g’]);
gObject.f(1, 2);
gObject.g(3);
[/code]
When you run the applet code, it prints this to the browser console:
You’re implementing a client-server application. The client is in JavaScript. It contains a model class, Person. The model is backed by a server-side Person model, and a REST controller at /person. Periodically, the client updates the server’s model, but there can be client-side instances that don’t yet exist on the server, such as when a model is first created and the server hasn’t yet gotten the message.
I’ve written this code a few times now, in JavaScript, and in ActionScript. if If you write it the obvious way, you run into an interesting set of race conditions. Here’s the code, and the race conditions, and some ad-hoc solutions. In the next post, I’ll introduce a metaobject pattern, queue ball, that I’ve used to solve these race conditions in a more principled and re-usable fashion.