Bookmarklet Tutorial Part I.i - Hello World!
Here is a slightly
updated version of the code from my previous post. The alert box
that appears will also display the title and url for the current
page. Try the bookmarklet on different pages and you will see it
has access to the current document.
<!
DOCTYPE
html
PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html
xmlns
="http://www.w3.org/1999/xhtml">
<
head
>
<
title
>Hello World</title>
</head>
<body>
<ahref="javascript:{alert('Hello World!\n\nFrom ' + document.title + ' @ ' + document.location.href);}">
Hello World!</a>
</body>
</html>
JRSSON or J-RSS: Why we need a javascript format for RSS
I have been using xml and xslt for over a decade now and find it
a great format for exchanging data between systems. I used to use
it for sending data between a web server and browser in my
"corporate" days. All of my work back then was for various fortune
500's where the browser was dictated to be IE so transforming xml
using the msxml libraries was a cinch. Fast forward to now where
I'm designing Ajaxified cross platform web applications and
suddenly xml can't be used. The cross-domain issues and
non-standard transformation support make xml consumption a
nightmare at best.
This is becoming a bigger issue for me (and many others I
suspect) as I try to dynamically load and consume RSS feeds
cross-domain. So now I am investigating a simple solution - JSON.
JSON data can be easily obtained from other domains and it can be
queried in a similar fashion to xpath by simply walking the
object/property structure.
Today almost all RSS syndicators are publishing in the
traditional XML format so it is necessary to parse RSS to JSON
somehow. Hopefully this will change and a complimentary javascript
format will emerge. In the mean time I am going to find/build some
tools that will perform this transfer on the fly.
My first such tool uses Yahoo Pipes to grab the headlines from
the Ajaxian RSS feed. I have published a stupidly simple Pipe that
can be found at
http://pipes.yahoo.com/pipes/pipe.info?_id=_osFeI7W2xGPFy3cqGIyXQ.
It takes one parameter; the URI of a feed and simply retrieves and
returns the contents of the feed. The cool thing is Pipes can be
forced to output in JSON format rather than XML by simply setting
the _render querystring variable to "json".
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
>
<head>
<title>Untitled Page</title>
</head>
<body>
</body>
</html>
<script language="javascript" type="text/javascript">
var pipeCallback;
var data;
function pipeCallback(d) {
data = d;
console.debug(d);
var arts = d.value.items;
for (var i=0; i<arts.length; i++)
{
var a = document.createElement("a");
a.setAttribute("href", arts[i].link);
a.innerHTML = "<h1>" + arts[i].title + "</h1>"
var dv = document.createElement("div");
dv.innerHTML = arts[i].description;
document.body.appendChild(a);
document.body.appendChild(dv);
}
}
</script>
<script type="text/javascript"src="
http://pipes.yahoo.com/pipes/pipe.run?urlinput1=http%3A%2F%2Fwww.ajaxian.com%2Findex.xml&_id=_osFeI7W2xGPFy3cqGIyXQ&_render=json&_callback=pipeCallback"></script>
Next I am going to build an XSLT to transform an RSS file to its
JSON equivalent.
Making Javascript DOM a Piece of Cake with the graft() Function
An interesting article
that introduces a useful function called graft(). graft() takes a
JSON string defining a serious of DOM elements and returns a DOM
fragment that can be inserted into the document element. Now I
haven't tried the code in this article yet and some of the comments
indicate that there maybe some truncation so be forewarned.
Making Javascript DOM a Piece of Cake with the graft()
Function
Digital Web Magazine - Objectifying JavaScript
This article from
Jonathan Snook is a great primer for JavaScript objects. It
describes how to create and use functions, templates and the
prototype keyword. It also talks about singletons and object
factories.
Digital
Web Magazine - Objectifying JavaScript