When Tags Fail

Here’s a view of upcoming events in London at this time.

Three closely related topics with a number of web-savvy taggers (if attendees of events like this can’t tag, who can?). And yet, zero tags in common.

It would be very compelling to subscribe to events in your area and under a certain topic, so they automatically appear in ICal, GCal, etc. But the topic would have to be general enough to provide more than one event a year, and chances are there won’t be many “microformats” gigs in your local area on a regular basis. i.e. what’s obviously required is a tag like “geek” or “web” that’s general enough to be useful for the use case of a calendar subscriber.

Perhaps reflecting the tendency for people to think in concrete terms, the taggers here opt for very precise, specific, terms. The conventional wisdom on tagging is that people will come up with their own conventions and systems should stay out of it, but isn’t that a rather defeatist stance on our ability to create remotely intelligent software in 2006? Rather than force users to go against their nature and think abstractly, maybe the system could go all fuzzy and do some useful cluster analysis. I’d rather subscribe to a slightly inaccurate “web-ish” cluster than 20 different feeds covering every concrete concept related to the web. Granted, it’s also more work to develop, but it’s something that could easily be encapsulated in a library.

Ajax Diagnosis And Testing Patterns – Podcast

Welcome to Ye Olde Ajax Patterns Podcaste, the final in this series that began twelve months ago. 3+4+4+1 = 12 podcasts in all, covering 71 patterns (the 70 patterns in the the book as well as Dyanmic Favicons). Find them all on the podcast category – http://www.softwareas.com/category/podcast/ or subscribe to the podcast feed at http://www.softwareas.com/podcast/rss2. Thanks for listening!

This podcast covers eight patterns on debugging/diagnosis of Ajax Apps, as well as testing Ajax apps, and I’m joined by Craig Shoemaker from Polymorphic Podcast, also a co-author of “Beginning Ajax with ASP.NET”. After some announcements, the interview begans at 6:00. The podcast overall is 60 minutes.

<

p> Ajax Diagnosis Patterns:

<

p> Ajax Testing Patterns:

With the series now complete, the podcast will now resume regular Sotware As She’s Developed topics including but not limited to agile development, Ajax, the web, and usability. Also, more conversations – please drop me a line at [email protected] if you’d like to come drop in for a skype chat.

As always, credits on this podcast to My Morning Jacket for the lead-in track, “One Big Holiday”. All podcasts in this series licensed under CC.


Audio Note: Sorry about the noise at some stages in this recording – I now know a lot more about audio levelling (the problem of keeping both ends at the same level), but at the time this was recording, it turned out I had set Craig’s end at too low a volume. I used Levelator to level each end, leading to too much noise…next time I’ll need to pump up the volume at each end from the start. I’m also looking forward to resuming use of Bias SoundSoap, but there’s no easy way to get this running on an Intel Mac for now!

Post-Modern Job Posting: Pattern Curator

It’s cool to see Yahoo! posting a job for pattern curator:

CURATE THE YAHOO! PATTERN LIBRARY Yahoo!’s Platform User Experience Design team is looking for a new curator for the Pattern Library. The curator works with designers from across Yahoo! to develop new patterns and to eventually migrate a pattern to the public library. You will be responsible for spotting trends in the designs of our properties, for designing and crafting new additions to the library and for evangelizing the authorship of new patterns among your Interaction Designer colleagues. You will partner with our Platform Presentation Engineering team to create interactions and best practices that accompany the UI Widget Library. Additionally, you will own the external Public Pattern Library and develop the pattern lifecycle from internal to external libraries. And last but not least, you will be the spearhead and driver for a new addition to our Library suite – a new Terms Library and will work closely with our internal editorial team.

Patterns will become more important to organisations as companies realise there’s value in concrete advice based on real-world examples, to complement vague mission statements with stuff people can actually use day to day. This will be aided by the general trend towards wikis and more user-friendly document evolution. For several years now, Yahoo! has been using patterns in this more holistic sense, and the ad for a pattern curator suggests they’ve been more than happy with the results.

But Why?

I often want to use an operator called “but”, the complete equivalent to “and”. It would let me say:


if guest.wants_to_see(report) but report.is_premium_content
    raise PremiumContentException
end

As opposed to:

if guest.wants_to_see(report) and report.is_premium_content
    raise PremiumContentException
end

The first example is easier to comprehend because it’s closer to the business rule and the way we think about it. You could argue it’s pointless to add redundant terms to a language, but 100101100101001010010111010101.

So there are times when “but” is clearer than “and”. Likewise, there are times when “and” is clearer than “but”, which implies that we need both. Here’s an example of the latter.


if guest_user.wants_to_see(report) and report.is_public
    show_report
end

I like how some languages include redundant words like “unless” and redundant constructs like “do … while”. Some say they create many ways to do the same thing (Perl argument), but that’s often not the case; there’s often one way that’s the clearest, as the examples above illustrate.

So do any languages have a “but”? I see that Perl does, but it apparently does something else. Also, can any Ruby gurus suggest a way to bake this into the Ruby syntax?

Bluedot Gets Lazy Registration

The philosphy behind the Lazy Registration pattern is well depicted in this TechCrunch description of BlueDot.

The key is that Blue Dot is useful to readers immediately without registering for an account. Readers who click on the Blue Dot link to save an article on a partner site see a small pop up box from which they are able to send that article by email to anyone. The article is saved in an account automatically created for them without registering for Blue Dot. A cookie on the browser associates the user with that account and an email is sent to introduce Blue Dot’s full feature set and direct them back to the Blue Dot site to read friends’ comments about the emailed item.

XML Descriptors, Be Gone!

Dion posted a story about Nokia’s new mobile widgets. This will be very cool if it’s as good as it sounds. However, what got me was the XML-based config – three separate files for config, skin, and widgets. The widget config:

  1. <widget name="Example widget" version="0.1">
  2.  
  3.   <info>
  4.     <creator>
  5.       <user>username</user>
  6.       <date>7.6.2006 12:00</date>
  7.     </creator>
  8.  
  9.   <!-- Configuration of servicehandlers which the widget needs to operate -->
  10.   <services>
  11.     <service type="syndication" id="feed1">
  12.       <reference from="feedurlrss" to="feedurl"/>
  13.     </service>
  14.   </services>

My comment here isn’t specifically about this project, because most APIs continue to use this convention. I don’t get why APIs continue to come out requiring complex EJB-style XML config, in three different files no less. Learn from Rails and Pico and use code for config.

The arguments for XML config are fundamentally flawed:

  • “Anyone can edit it, not just programmers”. And if you believe that, you’re still waiting for your manager to learn FORTRAN and COBOL, thus rendering programmers obsolete. Mwuhahah. Obselete, I’ll tells ya.
  • “It can be changed at runtime, no compilation required.” This might occasionally be useful if the app’s shipped off to another site, but that’s a slim minority – it will either be a hosted app which you can easily re-deploy after re-compiling (as with these widgets) or a desktop app which will hopefully offer a nice config UI rather than requiring the user to hack some XML files! We like to develop standards to serve the vast majority, not the slim minority.
  • “It’s neater.” In any modern language, you can easily develop an API that lets you perform configuration with a grammar resembling a domain-specific language. I don’t consider the above XML to be particularly neat, nor most EJB descriptors I’ve come across.
  • “It can be validated.” True, you can check the file’s grammar, but you can’t validate that a given attribute must be a class in your program, for instance. With code-based config, you can.

Ajax/Javascript: 8 Ways to Create Graphics on the Fly

<a href='http://digg.com/programming/Ajax_Javascript_8_Ways_to_Create_Graphics_on_the_Fly'>Ajax/Javascript: 8 Ways to Create Graphics on the Fly &#8211; digg this</a>

The ability to create rich graphics on the fly is one of the critical gaps in Ajax. There are indeed techniques to do it, albeit far from perfect, and some are do-able today if you take a pragmatic view of things and keep graceful degradation in mind.

Here I list all the techniques I can think of to create graphics and images dynamically when you’re creating an Ajax/DHTML/Javascript web app, with varying degrees of portability and usability. Starting with the obvious and ending with the obscure. Please submit any other techniques you’re aware of!!!

  1. Use SVG. Current versions of Firefox, Opera, and Safari (nightly builds) support SVG natively, but with IE and older versions, users need to install a plugin. SVG is an old W3C standard that creates images based on XML. Being a vector format, it stores the image at a high level (curves, lines, etc), so it scales better than a plain bitmap. Here’s an SVG circle (adapted from W3CSchools:

    1. <svg width="100%" height="100%" version="1.1"
    2. xmlns="http://www.w3.org/2000/svg">
    3. <circle cx="25" cy="25" r="30" stroke="black"
    4. stroke-width="2" fill="green"/>
    5. </svg>

    You could build up the XML string in the code or pull it down from the server with a remote request. However, you don’t actually have to specify the XML as a literal string message; you can create a blank SVG document object model (DOM) and manipulate it to build up an image. In this example, we create a circle of radius 25 (adapted from this tutorial):

    javascript
    < view plain text >
    1. var svgDocument = evt.target.ownerDocument;
    2. var shape = svgDocument.createElementNS(svgns, "circle");
    3. shape.setAttributeNS(null, "cx", 25);
    4. shape.setAttributeNS(null, "cy", 25);
    5. shape.setAttributeNS(null, "r",  20);
    6. shape.setAttributeNS(null, "fill", "green");
  2. Use Canvas. Canvas was introduced in Safari and now in Firefox and Opera too. No sign of life in IE, but this there’s a fantastic adaptor hack (via Ajaxian) that emulates Canvas using IE’s native VML support (more on VML below), and it’s now been rolled into an open-source project, ExplorerCanvas by some Googlers.

    Where SVG is about things, Canvas is about actions. SVG documents represent images. Canvas tags include code to build up an image, a bit like moving a turtle in the Logo language. So you set a colour, draw something, change the fill style, draw something else, etc. You manipulate a Canvas tag like this:

    javascript
    < view plain text >
    1. var canvas = document.getElementById('tutorial');
    2.   if (canvas.getContext){
    3.     var ctx = canvas.getContext('2d');
    4.     ctx.fillRect(25,25,100,100);
    5.     ctx.clearRect(45,45,60,60);
    6.     ctx.strokeRect(50,50,50,50);
    7.   }

    (BTW Canvas uses the dreaded term, “Context”, to refer to what should really be called “paintbrush”, “pen”, or “turtle” … more concrete terms than “Context” which imply some sort of metaphor. But wouldn’t an imperfect metaphor be easier to grok than the generic “Context”? Alas, it’s a common idiom in graphics programming and will be around for a while.)

  3. Load dynamic images from the server. Once you have an image tag (either in the initial HTML or created on the fly with document.createElement(“img”), you can set its source to any URL, even external to your domain (though cross-domain “hot-linking” should generally be done only with permission). This is standard DHTML/Ajax stuff and works with any browser.
    javascript
    < view plain text >
    1. button = document.createElement("img");
    2. button.src = "http://example.com/livechart.gif?interval=15"
    On the server, the image need not be a static image file. It can be a server-side script that happens to output a binary image with the appropriate header, and furthermore, the script can accept CGI parameters, so a unique image can be generated on the fly. Of course, performance will probably suffer if you rely on the server to create images on the fly, and you can only generate them once a second or so. The various Ajax image manipulation tools do something like this.
  4. Use Vector Markup Language (VML). VML is effectively the MS equivalent of SVG, and as such works in IE, and only in IE. As with SVG, you use XML to specify an image.
    1. <v:oval style="position:absolute; left:0; top:0;
    2.               width:100pt; height:50pt"
    3.               fillcolor="red">
    4. </v:oval>
    Fortunately, the Canvas-on-VML hack mentioned earlier means you can take advantage of VML without committing to IE-specific code, though it’s (obviously) not a perfect emulation by any means.
  5. Introduce a Richer Plugin, most likely Flash, to beef up the browser’s multimedia capabilities.
  6. Rely on plain old CSS and the DOM. You can do some impressive-looking things with just CSS and the DOM, e.g. the CSS graphs library. And of course it’s easy enough to make it fully portable too.
  7. Create an image and set its src to a data: resource. Firefox and Opera only. From Dive Into GM:
    javascript
    < view plain text >
    1. var logo = document.createElement('img');
    2. logo.src = 'data:image/gif;base64,R0lGODlhDQAOAJEAANno6wBmZgAAAAAAACH5BAAAAAAA'+    'LAAAAAANAA4AQAIjjI8Iyw3GhACSQecutsFV3nzgNi7SVEbo06lZa66LRib2UQAAOw%3D%3D';
    3. document.body.insertBefore(logo, document.body.firstChild);
  8. Embed an XBM file. Yes, some browsers can display XBM images. Works on IE and Firefox, but not Safari or Opera. Unfortunately, XBM has the rather major constraint that it’s black-and-white. However, it does have the virtue of being a plain-text format which, like the data: protocol, you can assign an image source to.

    If you get your image data in that format in a string (complete with the n after each of the #define lines), then you can make any image’s SRC attribute be:
    “javascript:’”+xbmimagestring+”‘”

    XBM’s not used often, but there are some nice examples: Wolfenstein 5K, most notably, as well as this bitmap editor and a sparklines library.

(Off-topic: I’ve just updated my blog page, I prefer the 2-column sidebar because: (a) there are now 20 monthly archives links; (b) I wanted to add a ton of chicklets; (c) I wanted to add more bio info. BTW If you have a blog, here’s a quick exercise: Place yourself in the mind of a new visitor for twenty seconds, and decide if this person could work out who you are, what you do, and how to contact you. Around 90% of blogs fail this test on the grounds it’s impossible or way too hard.)