KOKOGIAK

GEDANKENGANG

Taking Advantage of Extensibility (my first Greasemonkey script)

Flickr: Love it, just starting to use it frequently.
Firefox: Love it, just starting to use it frequently.

Both Firefox and Flickr are extensible (via a web API and by extensions like Greasemonkey, respectively). As a user of Flickr, I realized there was a feature I'd like to have. So I built it using Greasemonkey.

The feature is "Show related tags" on the Flickr upload screen - when I'm uploading images, I'd like to see what other people are tagging similar things (for clarity, like "nyc" vs "newyork" - or for inclusion, like "cat", "kitty" and "kitten"). Well, now I can. I wrote a Greasemonkey script that inserts "Show related tags" into the upload page (screenshot1). If you enter some tags, and click the link, the page will load up sets of related tags for you to browse and/or add by clicking (screenshot2).

How does it work? Greasemonkey lets me inject script into any page (viewed in Firefox), and the script I injected is set up to fetch XML from Flickr's Web API, showing tags related to a chosen tag. It uses XmlHTTPRequest, Javascript & XML. (There's gotta be a catchy name for that technology somewhere.) The cool part is - cross-domain issues aren't an issue, since the host page and the XML both come from the same domain - 'flickr.com'.

How can you use this too? First, be a logged-in user of Flickr, Second, use Firefox, Third, make sure you have the Greasemonkey extension installed, Fourth, right-click on this link: flickrelatedtags.user.js, and choose "Install User Script". Once that's done, navigate to Flickr's upload page, and you should see the "See Related Tags" link show up below the "Add Tags" form field.

Please, feel free to send bugs, problems and/or suggestions my way.

More about Greasemonkey here and here. More about Flickr's API here. And another lovely app that uses Flickr's API to examine related tags is this Flash Tag Browser.
 

5 Comments +

That's hands down the coolest grease monkey script I've seen to date. I'm going to go tell all my friends now.
by leff at 1:56 PM 
Cool stuff, I searched for hours but couldn't find a name for that technology either;)

Just a note for people while most GreaseMonkey Scripts are pretty great so far, please take a moment to read the code to make sure their aren't any malicous lines of code. If you cant do this maybe find someone who can.
by Joshua Bloom at 10:19 AM 
Totally seamless and absurdly cool.
by Carrick at 2:08 PM 
Great stuff - thanks. I think the name you're looking for is Ajax (Asynchronous JavaScript+CSS+DOM+XMLHttpRequest). Here's a link:

Ajax: A New Approach to Web Applications
http://www.adaptivepath.com/publications/essays/archives/000385print.php
by Matt Cornell at 11:11 PM 
> The cool part is - cross-domain issues aren't an issue,

Incidentally, if you eventually find a situation where you need cross-domain ability (although I believe there is continuing discussion on the GreaseMonkey lists about how to handle this sort of thing), you might want to take a look at the "_XmlHttpRequestEx2" class here:

http://mygmaps.com/show/0.0.5/gmaps-standalone.js


In tandem with a simple CGI script on a page's domain it allows XmlHttpRequest retrievals across domains.

I use it to provide a "standalone viewer" for Google Maps, and the custom maps created on myGmaps.com. (Actually, it's not strictly necessary for the custom maps.)

--Phil.
by Follower at 8:50 AM 
My Curated Space Imagery Exhibit (on Flickr)

One of the things that struck me while at the O'Reilly Emerging Technology Conference earlier this month, was the offhand way that Flickr's Stewart Butterfield referred to users of Flickr as not only owners and users, but as curators. He did not appear to make a big deal about that word, but it struck a resonant chord in my brain. I'm not one for many family photos, but there are definitely images I love to share - even if I did not take them.

In that light, if you have a spare moment, I invite you to drop in and have a look at my new Photoset on Flickr, Cassini at Saturn.

I've been fanatic about space exploration since I was a kid, and have been giddy the past year or so with the constant feed of imagery from Mars and Saturn. I've been trolling the 35,000+ images from Saturn ever since they started coming online (I scraped together some ugly RSS feeds to assist). All of the images in this photoset come from NASA's JPL website. They are the best of the lot, in my judgment. As self-appointed curator, I chose 101 images that spoke to me, and that I thought would speak to others. Especially the ones that made me say "whoa" to myself the first time I saw them. Generally emphasizing aesthetics over science, but it's all a big mix.

Acting on Stewart's unintended advice, I can happily gather and display these images - and I feel free to hype them, since it is not my work at all, just my presentation of some amazing work done by a great crew of others, and a very lonely satellite, the size of a School Bus, looping around Saturn, some 800 million miles away.
 

0 Comments +

Naming, Semantics, Ownership (yes this is about "Ajax")

A friend asked me the other day what I thought about the whole "Ajax" (XMLHttpRequest and related technologies) discussion taking place in various niches around the web. I grimaced and mumbled something about how I hated that name, but that it was a good thing that people were discussing the underlying technologies. That seems to be a pretty common reaction for a lot of us who have been doing this for a long time.

That got me to thinking - why the negative reactions to this? Why do I (and a lot of others with hands-on familiarity with the technology) feel a gut-level negative reaction to Jesse James Garret's recent article about XMLHTTPRequest, Javascript and XML used to update page content dynamically? I mean, if you read the article (linked above), you can see that JJG is enamored with the potential of the technologies, that he speaks about it enough to need a shorthand nickname, that he grasps the value and calls out decent examples, and even appears to be aware of the pitfalls.

Again - why the negative reaction? For me, there are three reasons that I could see - attempting to be as honest with myself as possible. Hype, Trite reductionism, and ownership. But to be really honest, it's mostly about ownership.

People like me, who love to make browsers dance, who have spent years (some of us over a decade now) playing with the possibilities, running up against limitations, and having a great time with it daily, we (I) feel this is ours. This technology belongs to us. That's actually a load of crap - the technology doesn't belong to anyone, it just feels that way when one is passionate about working with it.

My armchair psychoanalysis is this - naming implies some level of ownership. Whether overt or accidental, it's there, it's human nature - if someone names a thing, they appear to have some claim on it. I know, in no uncertain terms, that JJG's article is not about ownership. He goes out of his way to say "we didn't invent this", and that his need to name it was based on a need for 'something shorter than 'Asynchronous JavaScript+CSS+DOM+XMLHttpRequest'". Still, he named it. The name was also catchy, evocative, useful, and (importantly) popular. Lots of other people saw it and loved it.

That leads me to the other two reasons for negativity. (The first was that someone else named my baby. Okay, whatever, I'm over that). Hype: there is so much chatter about this now - a little frustrating when the technology has been around for ages, yet, I will concede, Google has forced a tipping point as of late. It's still grating though.

And lastly, Trite reductionism: In my opinion, any sort of shorthand terminology like this is troubling because it tries to draw boundaries around a series of things that I see as too fluid and useful in their own right to be corralled under a catchy umbrella term. For the record, I really hated Microsoft's coinage of "Dynamic HTML", or "dhtml" back when IE4 was launched. To me it was javascript, an accessible document object model, live-page re-rendering, CSS styling, plugin interaction, editable content, built-in proprietary widgets, standards-based interaction, and more. Summing that all up as "dhtml" really felt like a disservice to me. When I was asked by others to define "dhtml", I immediately deconstructed it as a "mere marketing term", and generalized by saying it was "javascript + CSS + live-page re-paints". That said, I'm pretty likely to use "dhtml" as a shorthand these days - it feels more generalized (cross-browser), and less Microsft-y than it used to, if you get my drift.

So, I've already gone on far more than I wanted, but I feel good for having written this. I may, at some point in the future, be comfortable uttering the term "Ajax", but it'll be a bitter pill (I just don't like the term, but that's just a matter of taste, not the point of this screed).

I bear no animosity toward JJG or Adaptive Path - quite the contrary, I really am glad this is getting the attention it deserves, and frankly has been a little inspirational for me, apparently for others as well. All this is about is examining my (and apparently many others) knee-jerk animosity toward a fairly decent article - it's all about the naming.

Other writing in this vein: Ajax, promise or hype?, Ajax: You're soaking in it, and Ajax: The Verdict.
 

0 Comments +

Newsmashing with del.icio.us - y.a.b. (yet another bookmarklet)

After reading Paul Boutin's article at Slate about Newsmashing, my gears got spinning a bit. I've played with annotation tools like he mentions before, but there were tons of issues, not the least of which were security and legal challenges. There are some good uses for commenting on a page, and a few tools that still do so - most recently a9.com's Diary. Or the older (now defunct) ThirdVoice. But none of these had a simple use-flow, and were largely proprietary, costly and/or or closed off.

Which all got me to thinking - There's already a great free service for this that thousands use every day: del.icio.us. It doesn't really allow the granular in-page markup that Boutin was looking for, but it does allow users to both tag and comment on the content of a particular URL. Best of all, it accumulates that user-generated commentary in a public way.

So, I threw together a mini-page activated by a bookmarlet Called delicious linkbacks. Add the bookmarklet to your browser, then you can get a look at what del.icio.us users are saying about (or at least how they are tagging) nearly any web page with one click.

It's not Boutin's vision of full-on in-page markup, but it is a conduit for free open commentary tied to a URL, and that may be good enough.

It seems to work fairly well - I had thought about using Technorati for this, but the results were not nearly as precise and compelling as del.icio.us. There are still a couple of bugs, most having to do with exact URLs (things like a missing trailing "/"). Otherwise, have fun - let me know if there are any bits you'd like to change/add/remove.

3/24/05 Addendum - I just discovered that this has been more-or-less done before (as I assumed it probably had), by Ben Hyde, as the Tasty? Bookmarklet. There are so many del.icio.us tools out there, hard to sort through them all.

3/24/05 Addendum II - One other link that I think deserve mentioning in this post, DURL, which provides tons of linkback-y goodness from a lot of places. Bonus - here's another bookmarklet - this one will pop up a DURL page for a given URL.
 

16 Comments +

The world cannot have too many bookmarklets. This is fine idea. One thing I noticed is that the inline descriptions don't match the del.icio.us usernames. The tags do match.
by Carrick Mundell at 12:18 AM 
Aha - good catch. Fixed now, thanks.
by alan at 12:36 AM 
damn you, i was gonna build this!

seriously, nice work. since my telepathic lazyweb skills are really taking off, can you read my mind on the next thing I wanted to build?
by anil at 3:06 AM 
nice work thx
by kof2002 at 6:26 AM 
This got me thinking again about a Firefox sidebar that provided all sorts of newsmashing tools about the current page in the main browser window. Like links in, del.ico.us tags, people who viewed this page arrived from here and left for there. embedded metadata like Creative commons or geourl. A regular dashboard about his page.
by Julian at 11:37 AM 
Thank you, thank you, thank you!
by Jeremy at 12:11 PM 
Good idea. Now I can go back to my unfiled category and tag several del.icio.us bookmarklets which heretofore I've been to lazy to classify.
by Anonymous at 12:25 PM 
I did a similar bookmarklet a little while ago that shows the delicious tags associated with a page. You can see it here. It does the weighted-text-map thing that Flickr/etc. does.
by Matt Bridges at 1:17 PM 
Hi ! How would you feel about writing a bookmarklet for Durl ?
Have a look, you'll find yourself in familiar grounds I think ;)

Here's this page, for example:
http://tools.waglo.com/durl/http://www.kokogiak.com/gedankengang/2005/03/newsmashing-with-delicious-yab-yet.html
by Robin Millette at 1:18 PM 
I love it - so many ways of looking at the same relationships.

- Matt - very cool utility. I love the weighted tags mechanism.

- Robin, when I was initially putting this together, I found DURL, and thought it was what I wanted, but after looking, saw it was more ambitious than what I was after. I just wanted succinct conversational remarks about a URL, whereas DURL gives you just about everything you could want linkback-y (just look at the page you linked - there's about 35 resources either in-page or linked. Valuable and cool, but not where I was going with this.

Nontheless, a DURL bookmarklet would be pretty simple - just use Matt's linked example above as a template.
by alan at 1:51 PM 
Great idea. This is just like "Technorati This" but for del.icio.us. It's a feature I've wanted to have, and now I have it. Thanks!
by ben at 11:23 PM 
Great piece of work! It potentially gives every page in the world it's own comment box.

It will be interesting to see what emerges from this creative twist.

Ted
by Ted Holmes at 1:56 AM 
Loved your app. But I prefer overlay than a new page.. so I created a greasemonkey script (hope this doesn't come under "Abuse")
http://www.yanime.org/yanime.user.js

Small request: mind if u only show del.icio.us entries with comments? not very useful to see a bunch of other bookmarks with nothing to say..

- choonkeat http://blog.yanime.org
by Anonymous at 1:49 AM 
I've modified it to take content directly from delicious now (so that I don't leech ur bandwidth!) Cheers!

choonkeat
http://blog.yanime.org/post/1/194
by Anonymous at 8:54 PM 
it's cool!
i am expecting to "UTF-8 support".
by sekimura at 6:08 AM 
Super...
by ¥€$ at 4:03 AM 
The Week That Was - FL, TX, MA & CA (sxsw and etech)

What a week.

1) SXSW Interactive - I really wanted to go, but wasn't able. Nonetheless, my entry in the SXSW Web Awards actually won! Amazon Light 4 won the Technical Achievement award for 2004. (Woohoo!)

2) I hate airplanes. I have permanent dents in my knees from seat backs now. After flying MA-FL-MA-CA-MA in the span of 7 days, I am quite sick of airplanes.

3) Etech! Great conference - really gets the gears turning. Some panels are amazing, some a bit tedious, lots in-between, hallway conversations are the best - perfect recipe to get your internal gears churning.

  a) My Tutorial at Etech went pretty well. The subject was Webservices Mashup, and reactions afterward ranged from "Meh - I've seen most of this before" to "Wow, that was really great". So I guess I hit some random sweet spot between not-too-technical and overly-technical. Always hard to gauge. Here's a link to the presentation online, (or as zip file).

  b) Part of my presentation that took the least amount of effort has become one of the more popular bits - the Webservices Mashup Resource List. I plan to maintain and grow that list over time.

  c) Conference Advice: Do not catch a cold right before a presentation you are going to give at a big conference. Having a cold will make you miserable, make your voice disappear, and make you so sleepy you'll miss much of the fun. Trust me on this one.

  d) Conference Advice: Force yourself to be social, even if it's not a natural instinct. You will have awkward moments, but they will be more than balanced out by the good ones.

  e) Some people I'm glad that I met (or caught up with): Erik Benson, Cal (Carl) Henderson, Andy Baio (waxy.org), Jeff Bezos (he actually remembers me), Susan Mernit, Brendan Eich (of Javascript, Mozilla, and Netscape fame), Ben Metcalfe (from the BBC - many nice folks from the Beeb in attendance), Wade Roush (writer for MIT Tech Review), Jeff Few and Andrej Gregov from Amazon, and a bunch more (my poor brain).

  f) Gedankengang (roughly 'thought-flow') from etech: Tagging - not as basic as you may think, there are multiple methods of tagging (group, external, personal), and multiple meanings (for me, for all, for others, for categorization) || SOAP - has its place (vs. REST) - I'm now convinced, thanks Nelson Minar. || HTTP and character-encoding are horrendously broken, but everything still works (for US-English at least), thanks Sam Ruby. || Mozilla folks are really wonderful folks. I'm a dyed-in-the-wool IE fan, but damn, Mozilla's software, performance and crew are winning me over. || A9 does indeed have plans, and is executing them (Opensearch). || It's fun to swap info from device-to-device by touching them (overheard someone call it a 'business kiss'). Thanks Chris Heathcoate and Matt Jones. || "Fast and Sloppy" as a methodology to get people involved and excited about creating things really works well across the board. Low barriers to entry, openness of source and technique, no "hidden magic", etc. From web development to web services to physical and electrical engineerirng. Thanks Neil Gershenfeld. || DRM : Old and Busted (by definition). Thanks again Cory Doctorow. || Wikipedia is still amazing.

Whew - lots of input and output. Now my neck is sore, my family and cat are happy to have me home, I need to recover from this damn cold, and let all of this info seep into my brain some more.

1 Comments +

very cool tutorial.
thx
Yahoo API and toy

Yahoo just announced their own webservices API - and many folks are abuzz. I'm excited too, and things like this just get my brain grinding away (why do these things always come up when I'm pressed for time?)

Anyhow, as a quick proof-of-concept, it took me about 5 minutes to code up the yReplacer bookmarklet. It works just the same as flickReplacr (previous entry) - highlight a word on a webpage, click the bookmarklet, and the word gets swapped with a Yahoo image based on their API. Very fast, very cool, fun and silly. It'll be fun to figure out good ways to mash this together with other APIs (and dodge the minefield of conflicting TOS requirements).

0 Comments +

Archives: