“javascript”

Where, but the web, would you find someone like Oliver Steele? This ain’t no metaphor. That name was a link. I’m not talking about Oliver Steele the person, I haven’t met him (though I apparently am 1-degree of separation from him; weird, that). I’m not talking about the sweating, walking, pinchable, space-and-time-and-flesh-bound avatar, I’m talking about his online persona. And either I’ve gotten crazy enough or technology has advanced enough that I’m ready to treat Oliver Steele —the link, his blog, words, diagrams, code, and further media— as a person by its own merits.

• My no TV. It is, too, one of my most valuable possessions.
  
• Functional JS is a sweet, sweet library, with one of the best documentations I’ve ever seen. Stuff like this is what makes the interwebs the best place on earth. And no, I don’t mean that as a metaphor either.
  
• Addition fractions. Y’know how fractions deal with multiplication? They need not be!
  
  
• Interactive regular expressions. Live regex! Nothing like interaction to make easy and fun once chores.
  
• Why are far things small? and other really hard questions from Steele’s kids.
  
• Visualizing basic algebra.
  
  
• Fluently: a construction kit for chainable methods. Finally, a word for the programming style I’ve been hinting at: Fluent interfaces!
  
• Learning about constraint diagrams
  
  
• A metaphor of computer’s history.
  
• The true advantages of Macs. I agree.
  
• The metaphor of the rock.
  
  
• Aargh!. How to spell it? It’s genius’s mark to have this much fun with such a trivial question.
  
  

A JS library JS’s first great app? Indeed. jQuery is the shit. It makes JavaScript, and particularly the intersection between JS and HTML, more fun than you thought it could be. It is one big lump of syntactic sugar, sweet as only truly elegant thinking can be. It is crossbrowser, lightweight (~20kb, compressed), and it leverages your CSS knowledge. jQuery + FireBug is raw sex. You’ll find yourself traversing the DOM just to feel the wind on your face.

Web pages are written in HTML^WP but as they have become more and more complex, they now tend to be written, clientside, through Javascript^WP, which can manipulate and insert HTML. Google Images, for instance, uses Javascript to write the HTML that displays your image results.

It’s a little like writing French through English (André went to Marie and said: ”Bonjour! Ça va, ma chérie?”) and just as frustrating, particularly because you sometimes have to narrate whole scenes in French (pidgin tends to be painfully verbose) and your English self is left completely in the dark—so you end up naming things in both French and English and it gets as ugly as you can imagine.

The lark itself takes gratefully (and rather surpisingly) only 16 paltry lines of Javascript code (highlighting thanks to Mark “Tarquin” Wilton-Jones.):

function each(a, f) { for(var i=0, l=a.length; i<l; i++) f(a[i]) };

each('a big blockquote br b center code div em form h1 h2 h3 h4 h5 h6 hr img iframe input i li ol option pre p script select small span strong style sub sup table tbody td textarea tr ul u'.split(' '),

    function(label){

        window[label]=function(){

            var tag=document.createElement(label);

            each(arguments, function(arg){ 

                if(arg.nodeType)                                         tag.appendChild(arg);

                else if(typeof arg=='string' || typeof arg=='number')    tag.innerHTML+=arg;

                else for(var attr in arg){

                        if(attr=='style') for(var sty in arg[attr]) tag[attr][sty]=arg[attr][sty];

                        else tag[attr]=arg[attr];

                };

            });

            return tag;

        };

    });

and you can play with it right here, right now:

Instead of

now it’s,

And so on.

Flickr AutoPagination has got to be the coolest Greasemonkey script I’ve seen yet, and, to judge by its code, a really intricate labor of love. It works flawlessly and does exactly what you’d guess: it makes every Flickr page (where it would make sense) “infinitely scrollable”. A cool, handy, and surprisingly stable script.

Can’t believe what a coward I’ve been. I guess it wasn’t until I read recently about how Jon Lech Johansen humilliated Hollywood by releasing a program to easily break DVD’s much vaunted DRM (when he was 15 years old), or about “the college droputs that run >youTVpc.com for millions of people on just two low-end desktop computers that I realized how big a wuss I am.

Or take the Spanish dictionary of the Spanish Language Academy. It’s a tremendously useful, gratis dictionary and yet it has a butt-ugly, nonhumane interface. I’ve been bitching about it for years. And I’ve been thinking about giving it a new interface for that long, but, again, what if they don’t like my scraping? (In all probability they won’t. They’re the quintessential staid, monolithic organization.)

So here’s Domburi and here’s NotReality. The idea of Domburi has changed somewhat from its inception (oh, the shame, so many goals not accomplished), it shall now be a collection of search superpowers instead of limiting itself to imagesearching. I believe, with an arrogance that I can’t believe but that I’ve missed, that I have a thing or two to teach Google in its own turf, not just in forgotten backwaters like imagesearching (where Imagery still kicks Google’s ass easily). So I’m starting really tiny now with only a simple redesign of Google search results (there isn’t even imagesearching yet). I’ll be fleshing it out in the coming days, daily, with the daylog here below.

So please visit the websites, leave your feedback in this post’s comments, and come back often to check out the daylogs—there are loads of interesting things in the pipeline! Thanks for reading.

Endless fiddling on Domburi. Collapse of the incrementalism. Obsession with pipe dreams.

1. Ajaxed requests. Loading icon. Everything happens on the same page. Title changes. Very lightweight script behind the scenes: the now deprecated but still unsurpassed moo.ajax.
2. New one-column format with even results shaded. Results turn yellow on mouse over, which is silly interactivity, but surprisingly pleasant. Entire result is a link. No numbers anymore showing order.
3. Displayed URL is now a link that shows results only within the website. This idea from SearchMash, of which I just found out yesterday, and which is a website run by Google where it tries out new interface ideas without the Google brand skewing perception. Very intriguing.
4. Displayed URL is now cased smartly. So instead of greysanatomyinsider.com you get GreysAnatomyInsider.com. It extracts the case from the result’s title, uses some general heuristics (like upcasing after a ), and if all fails, it simply capitalizes.
5. Results displayed in-page. This had been the idea ever since I decided to expand Domburi from image searching. I wanted to make the whole searching experience feel faster and more like what Ben Schneiderman calls direct manipulation. It has been much harder than I thought and it was this point where I spent most of my fiddling (I also played for hours with the two-columns layout…). Here’s what I ended up with.
   
   1. Results seem to open in the entire page, with only the result entry on top. They really open in a full-screen iframe but the effect is surprising. To return to the results you can simply scroll out of the iframe, click the result entry, or…
   2. Pixelside. This is a strange but crucial feature that even if invisible and initially nonintuitive I find very, very promising: it’s simply a 1px-wide, 100%-height leftmost line. Right now you can click on it when on a full-screen result and return to the resultlist (and from there you can click again on it to return to your full-screen result). It is incredibly fast (in Fitt’s law^WP terms, it has “infinite size”), handy, and habituating—and I imagine lots of cool ways to enhance the feature. The only problem is that crappy IE doesn’t allow leftmost pixels! So I’ll have to make up for it with JS. I cringe with only the thought.
   3. The title (but not the entire result, which is JS triggered) is a normal link so if you want to open results in a separate tab just middle-click or CTRL-click it.
6. Strange cool script used. More details to follow. If you’re interested, check out $.
7. Works in Firefox, IE, and Opera. Not tested yet on Safari. Some weird bugs on Safari but it broadly works.

16/May/07—20/Jun/07

21/Jun/07

24/jun/07

Y’know, I remember reading about the syndrome in Brooks’s book with a smug confidence that it would never happen to me. It did. Imagery was by many accounts a pretty cool thing, but then I tried to outdo myself with its successor, Domburi, and, many, many ineffectual months later, I must admit that I’ve only weird sketches and weirder code to show for my time.

I’m calling it ”Improv’d Daily!” and it is akin to beta-hood^WP—in that it indicates that the website is still under developement—but it carries the all important mantra of radical incrementalism: every single day there will be at least one new, stand-alone, non-trivial improvement for the website. It won’t be earth shattering every day but it shall always be interesting.

12-14/May/07

16/May/07—20/Jun/07

21/Jun/07

1. Old URLs redirect to URLs to keep with the migration announced May 8. http://elzr.com/articles/YEAR/MONTH/DAY/TITLE now really becomes http://elzr.com/posts/TITLE.>
2. Sidebar Redesign: new picture, new welcome copy bared down to its barest Basic English^WP essentials, new webapps added to webapp section, new, much better descriptions for most items in the sidebar.
3. Daily Improves section in the sidebar for you to keep handy track of my progress—or lack thereof.
4. Minor CSS fiddling—like a new, bigger size for small caps type (it could be hard to read at some resolutions and some platforms).
5. New 404 page, that is, a new page to aid you when you type in an address that can’t be found. Try it now with http://elzr.com/this-address-is-wrong/. Thanks Aaron!
6. 
   
   

   New title for homepage. Since the delta thing is already obscure conceit enough, I decided to convert seconds into more humane time units. 8,321,231s delta is now 96 day delta.

   Delta, btw, means something like the divergence (the difference) that has come to pass between two different times, one of which is usually the present—so when I say in this blog’s homepage title that there’s a 96 day delta I mean that I haven’t updated it in 96 days, i.e., me and my digital self have had 96 days to go our own separate ways. This wonderful sense of the word comes from Charles Stross’s Accelerando.
   
   
7. Unified search into a simple URL, http://elzr.com/search/QUERY, which currently carries a personalized Google search of elzr.com but will eventually change to Domburi. This new unified interface allowed me to finally create a YubNub command for the blog: try elzr (see its man page) at every input box that speaks YubNub.

My Wikipedia investigations of late (I want to propose a major new feature and I’m feeling out the “deep” WIkipedia) uncovered the little known fact that as a registered user you can have a personal stylesheet and javascript file—which means that with a little know-how you can have Wikipedia looking and feeling exactly how you want it—and have this look-and-feel follow you around with your account. If you use the default skin, Monobook^WP, your personal stylesheet and js file are monobook.css and monobook.js. There’s help here.

This opens the door to all sorts of customizing galore—skins, plugins, new features…—and while I still have to dig into it properly, so far I’ve found the amazing Navigation popups script, which pops up a small, smart (meaning it does interesting stuff depending on context) preview of any Wikipedia link you hover onto. Its slightly annoying until you get used to it, but once you do get it into your “work”-flow it’s very sweet—blazingly fast and with tons of handy extra options. Installing it is a snap too, just add one line to your monobook.js.

This is from Douglas Crockford’s Survey of Javascript (never program JS without your Crockford!). I thought it quirky at first, surprisingly helpful later. (Emphases added.)

Short-circuit logical operators are a well-known, simple idiom in several languages, but they can sometimes be confusing to read, specially when nested. What I want to point out here is that next time you have to go through code that uses them, try reading them as guard or default, as the case may be. You’ll grok^EE them immediately, trust me.

Isn’t it striking, the power of names?

Oh boy, can you hear the whoosh yet again? For the first deadline (August 5) my excuse was mostly several huge, polished posts (1, 2, 3) that I just started pouring out possessedly one afternoon after another. For the second deadline (August 12—yesterday!), well, no excuse other than that I’m in thrall with Domburi, and despite sleepless nights (day? night? they’ve lost all meaning to me), I’m happily obsessing with details and trying all sorts of innovative things. I’ve reached a strange state of scripting satori: I’m writing HTML through Javascript like no one has before. I swear it’s so weird and powerful that in a way it’s funny. It’s big stuff.

So yes, it’s better to think of my previous Road Map as broad guidelines for what’s to come. Just trust me, when Domburi’s finally out (August 31), it’ll be heart-breakingly beautiful. Till then and thanks for keeping in touch.

I don’t know exactly when or how the thought came into my mind but this morning the epiphany was there: wouldn’t it be cool to see Gmail’s half MB Javascript source¹ a la matrix code view^IY? Indeed it would, and so for the next half hour I became a man posessed. It was amazingly easy (“ya sabiendo es facil”) to hack it up in JS and it makes for an interesting screensaver.

When I finished I realized it would be really easy to make my makeshift Matrix code generic and so here’s a quick stab at it. Type whatever text you want matrixified and a new window will (hopefully) popup with it. (Though be warned, it’s pretty rough, unpolished code and it’ll surely be too slow if you don’t have a fast computer.) Anyway, enjoy.