Simple Clocks with the Dojo Toolkit

Something I was playing with - this page shows a couple of javascript clock/countdown treatments. None are as whizzy as the dojox.gfx (vector graphics) clock you might have seen around, or your various dashboard widgets - but this is just dojo core + 6k (uncompressed) of code.

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
<h1>Bob Smith</h1>

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.)

Solar-powered lawn-mowing

Yesterday I put the final piece in place to our solar powered lawn-mowing solution. At the old house, I used the reel-mower - not a terribly onerous task provided it was kept sharp. But at the new house we are on a corner lot, and inheriting our predecessor's love of lawn. We are slowly eating away at it with vegetable and xeric beds... but a lot remains. Too much to feasibly manage with the reel mower - especially if I want to share the task with other members of the family.

So, we bought us a Neuton Electric Mower which has the useful distinction of being powered by a removable 24volt sealed lead-acid rechargable battery. We also bought an extra battery. While they dont supply a solar recharger (it comes with a big-brick mains recharger), eBay (for example) does - I was able to buy a simple 24v recharger package with a solar panel, recharging circuit and leads.

I hooked it all together at the weekend, quickly corrected the polarity (+1 for testing) and plugged it in. Yay, the little charging light on the batter lit up. I secured the PV panel (little one about 6" square) to a bit of wood, and repositioned it a couple times over the course of the day.

I have fingers crossed. My tests showed I was getting close to the same output (in volts) from the PV panel, in almost full sun. But, not quite. I know just a little about battery charging, but enough to be aware that it needs to exceed the rated voltage of the battery to work.

Its raining today, so the results are not yet in. But worst case is that I have to tweak the battery-charging circuit piece of this solution (the component - I'm not proposing to tweak the circuit itself, not yet). Neuton said they have had other customers do the solar recharging thing too. Maybe they or a 3rd party could be persuaded to produce an off-the-shelf solution to put solar-powered moving easily into the hands of the masses. We need one badly here in the south - where sun and lawns are both in abundance.

The mower itself: works pretty well. As you'd expect, its quiet (another plus, you can carry on a conversation while mowing). A full charge gets me around our lawn about twice (very approximately 3500 sq ft). Its powered appropriately, my only reservation is the width of the cut - about 15" - so the whole task takes a little longer that your average gas-hog mower might. But it doesn't leave your nerves on edge, can be carried out in the cool early mornings without waking neighbors, and shared across the whole family. I think its a winner.

Update: With great hindsight, the solar panel size was obviously the problem - it was way too small to be useful and charging would take weeks, if at all.

Instructables

I stumbled on instructables.com looking for I forget what. They have a nice format of a series of illustrated and annotated steps. I was looking at electronic projects, but there’s a broad range of crafty/makey topics.

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
.