dev

string.replace with substitution by function

It may or may not be news to you that in Javascript you can do:

someString.replace(
/\w+/g,
function(match) {
return “blah”
}
);

Which in this case turns “the original string” into “blah blah blah”. Your function is passed the match, and you return whatever you want. That’s pretty handy, as you can run the match through transformations, or even use it to lookup or generate some entirely new value. You can also have side-effects from the match, which has interesting possibilities, not least of which is debugging:
1
function(match) { console.log("I matched %s", match); return match);

If you’re like me, you might even think you could do something like this:

someString.replace(
/<(\w+)[^>]*>)/g,
function(tag) {
var tagName = RegExp.$1;
return tagName.toLowerCase(); // or whatever…
}
);

.. but sadly you’d be wrong. At least as soon as you went to check in IE. It seems IE doesnt populate the properties from the match into the static RegExp object until after the whole replace is done. And your substitution function only gets passed the matched string, not the array of match + sub-matches you might be used to :(

Still, there’s plenty of mileage there. How about this:


function format(str, obj) {
var str = str.replace(/\${[^}]+}/g, function(mstr) {
var key = mstr.substring(2, mstr.length-1);
return (typeof obj[key] == “undefined”) ? “” : obj[key];
});
return str;
}

.. which takes a string like
1
"&lt;h1&gt;${firstname} ${lastname}&lt;/h1&gt;
, and an object like:
1
{ firstname: "Bob", lastname: "Smith" }
to produce
1
&lt;h1&gt;Bob Smith&lt;/h1&gt;

TAE keynote and CSS layout

the Ajaxian folks are doing their little summary of the past year or so as pertains to Ajax. One of the “trends” or opportunities they observe is doing layout using javascript. CSS got a panning. Now I understand that CSS layout is complex - no argument there. But doing layout in javascript is hardly new and proven to be a dead-end - at least with current browsers. In Dojo 0.9 the widget and widget infrastructure are taking a step back from javascript layout - it was one of the real performance killers in 0.4.

Some sites like the International Herald Tribune have been using javascript to layout and control the flow of the text with some success for a while. But as a strategy its risky and expensive - in terms of browser performance. Somethings you cant effectively do in CSS. Others CSS is by far your best tool. What we do need is more and more maturation of CSS solutions, and micro-format like standardization so you can drop in a new stylesheet to apply style and layout - without all the hair pulling. Oh and the browser support to make it all feasible.

Meantime - there’s a hybrid. You get as far as you feasibly/easily can with CSS, and use javascript as a sharp tool to tweak, and shuffle elements on the screen.

Sortable list with dojo 0.9

This is a quick proof of concept of a sortable, data-store backed list (using dojo 0.9). The store (a dojo.data.ItemFileReadStore instance) does the sorting. Each list-item has an id, that is mapped to the store item identifier. So when the re-sorted list comes back I just look up the list-item node and appendChild it to move it in the list.

The store has 52 items (its a list of states) and seems snappy enough - faster certainly than re-creating the list-item elements and re-rendering the whole thing each time.

Adobe AIR tour

I made a quick trip to Dallas to catch the Adobe AIR bus tour there. You know, it was pretty interesting. I was braced for a 4 hour long vendor sales demo, and it kind of was that, but with enough hands-on detail to keep my attention. Plus, it looks like a sweet product.

A few misunderstandings that got cleared up for me:

  • AIR is specifically the runtime. Think the .NET runtime - its a cross-platform way of running for desktop apps that are built to it. You can get AIR apps from the web, and those apps can use web content, but it is not really a web technology as such.
  • You can build AIR apps from Flash/Flex or HTML/JS - but the runtime itself doesn’t require or tie directly to one more than the other.
  • The runtime is a free download, the “Product” that Adobe is selling is the authoring tools in this case. The SDK is free, and you can author and build AIR apps without the fancy IDE.
I’ve begun to play with it. The APIs that javascript can now reach are going to be fun. Its like WSH (Windows Scripting Host) and scripting Rhino.. but more, er.. integrated.

Moving your Firefox profile

Little tip. You can easily move your FF profile directory to another local drive/directory e.g. thumb drive, or a backed-up directory. In my case it was to a directory that doesn’t have every read/write scanned by anti-virus software. (I can see how this might be prudent and all, but it was making for a very slow browsing experience on my pc.)

RefreshAustin is 1yr Old

I’m prompted to post because almost a year after we disbanded the Austin Web Standards Meetup, and merged with RefreshAustin I’m still getting email from meetup.com with people signing up for future web standards meetups in Austin. Folks, the group is alive and well, we meet at least monthly, but we now fly a “Refresh” banner instead of the web standards meetup one.

The Refresh format is simple, and with a wider topic than the web standards one we’ve had some great presentations and discussions, all around the topic of web, web design, 2.0, accessibility, javascript/ajax.

Keep an eye on the site and/or upcoming.org for details of events, and sign up to the refreshaustin google group.

Terminal funkiness with ActiveState perl

I just finally got on top of an annoyance I’ve had for a while: on my work machine I use MKS Toolkit - which provides a lot of the common unix tools for developers using windows. It provides its own Perl build, but I’ve been using ActiveState’s for a while, and didnt want to complicate synchronizing my work across the different machines I use perl on.
An unhappy side-effect of installing MKS Toolkit though is that the CPAN interactive shell suddenly starting spitting goobledy-gook to the terminal.

I looked around in the CPAN config, remembering there was some terminal questions in the setup, but nothing I changed had any effect. Not having had to mess with terminal settings / shell environment much before I was stumped until I googled a little and found this:

(MKSSoftware KB Article: Why do console escape sequences appear when using ActiveState Perl in debug mode?

Turns out MKS Toolkit changes the TERM environment variable to nutc, which ActiveState’s perl doesnt support. They suggest using ansi or vt100, which worked for me:

1
set TERM=ansi
.

Javascript shell with Rhino

The Rhino javascript interpreter (from Mozilla, sister to SpiderMonkey) has an interactive mode:

C:\dojo\buildscripts>java -jar lib/js.jar
Rhino 1.5 release 3 2002 01 27
js> print('boo');
boo
js>

The Rhino jar is a part of the dojo distribution, so if you’ve got dojo (from SVN, not the pre-built releases) you already have it.

The Scripting Java page from Mozilla has these and other details. After all these years, javascript is finally able to script java. I find that amusing even if no-one else does :)



(yes I know LiveConnect has been around for almost as many years, probably what I mean is finally there’s a practical environment that enables useful work to come from scripting java). Also, as running my javascript scripts is now possible from the commandline, I can invoke them easily from perl, my editor, SlickRun, etc. Which, as redundant as that sounds, is bound to be handy.


Here’s another article on the Javascript CommandLine, and lots more

Refresh show/tell

X-Rey -inlines the markup into the content.

Paparazzi - get it a url and it will capture the rendered output to a PNG.

Mercurial - code repository tool like SVN?

Soft-wrapping long words

The issue of long, non-breaking words like urls has been around for a while on the web - and the impact this can have on layouts and other places where width is constrained for whatever reason.

I’ve been going back and forth on this, and dug up and old test page on No-wrapping and Soft-wrapping. This has some test cases using <nobr>, <wbr> and the soft-hyphen character &shy;. The results aren’t too pretty:

Mozilla/Firefox:

Ignores &shy;,
supports <wbr>, but not when contained in <nobr>

Windows IE 6:

Wraps correctly with &shy;,

displays ‘-‘ only at a wrap-point.

Supports <wbr> solo, and when contained in <nobr>

Safari 2.0:

Wraps correctly with &shy;,

displays ‘-‘ only at a wrap-point.

Seems to only pay attention to <wbr> in the context of <nobr>, where there are spaces to wrap on.

Opera 9.0:

Wraps correctly with &shy;

Ignores <wbr> completely, supports <nobr>


(TODO: Need to add tests to the page for CSS scenarios like white-space: nowrap;)
(NOTE: Yes, both nobr and wbr have been deprecated. Unfortunately unless I missed i, there’s no good replacements in CSS for wbr, or in xhtml for either.)

Meanwhile, I took a stab at a javascript-y solution. This is an implementation that looks to insert a wrap-point in a character string to enforce a (given) maxiumum text columns length. So, if you want to make sure that all words wrap at or before 24 characters, it will insert a soft-hyphen (or <wbr/> for mozilla/firefox). It tries (a little) to favor wrapping after punctuation, and be somewhat smart about recognizing words (e.g by recognizing escape entities, markup).

Anyhow, here’s a Softwrap test page. It could definately suffer some optimization, and I suspect could be vastly simplified with some better regexp. But its working ok for now.