Embed Wikipedia summaries in articles
A small, light-weight Wikipedia summary/preview widget that lets you include the first bit of a Wikipedia article in popups in your blog post, article, etc.
Links to Wikipedia are found everywhere in articles and blog posts, and I use them often myself when that extra level of information might be of interest to the reader but falls outside the scope of the actual article. However, sometimes a short blurb introducing the topic would be enough and would also keep the reader from disappearing into the time stealing rabbit hole that we all know Wikipedia can be.
Edit: The widget is now using the MediaWiki API rather than the AppJet gateway. Read update here.
One solution is to popup a small box with a summary from the Wikipedia article when the mouse moves over the word. There is one service that already provides something like this, the NBC owned Snap.com. Their SnapShot boxes display everything from website screenshots to Flickr images to Wikipedia summaries. That's cool, but I found it a bit too bulky just to display a few paragraphs of text and, as far I know, you don't get much in the way of customizing the appearance.
So I decided to create my own simple Wikipedia box. Fortunately most of Wikipedia is pretty neat and the first section usually contains a decent summary of what the article is about. So we can simply pull out all the text between the two first headings. Some articles have info boxes on the right that are ignored, as to only get pure text.
All this is done by a small AppJet JSON-P application that takes care of retrieving the article and locating the relevant portion of the text. The text is then processed a bit (ie. links are made to open in new windows and point to the absolute URL, reference ids are removed, etc) before it's all put in a nice little JSON package and returned to the client:
The 5000 most recently accessed articles are cached (there's a 50MB storage limit on each AppJet app and I'd rather err on the safe side.) making sure that delivery is speedy and that it doesn't hit Wikipedia's servers more than necessary.
The text is received by a bit of JavaScript which pops up a box containing the article summary and a small link to Wikipedia and the original article (and the GFDL license notice).
The box itself is rather simple, consisting of 4 simple elements. I know this is 2008 and there are no rounded corners or whatever the kids are using these days, but I wanted to keep it basic. The included style sheet should be self-explanatory and easy to change for your liking, although you might have to dive into the JS if you want something radically changed.
So, to use it, simply include the CSS and JS and start putting Wikipedia links in your text like this:
Example output (hover the mouse over the underlined words):
As you can see from this sample code, you simply make links to the relevant Wikipedia articles and the script should locate them automatically and enable the summary box.
Now, I'm not entirely sure whether or not this breaks the terms of use of Wikipedia. I do know they do not allow dynamically generated mirrors, but I'm not really sure in what category something like this would fall since the articles are dynamically downloaded (if not in cache) even if it isn't really a mirror as such. They used to have a crawl-delay of 1 page per second in their robots.txt, which is obeyed by the AppJet application. If you happen to get hit by that limitation (unlikely, I think) you'll be served a notice of that instead of the article text.
Another thing is that I'm not sure what kind of bandwidth quotas, if any, you might run into with AppJet. If every blog in the world started hitting the same AppJet application, I'm sure it would cause trouble, but that's unlikely to happen. Either way, it's very easy to simply clone the AppJet app if you want to use it on your own site and be safe.
I've tested the script in FF3, Opera 9.5, IE7, Safari 3.1 and Chrome and everything looks fine there.
Finally, download the files here: sumbox.js [4.8 KB] and sumbox.css [1.0 KB] Read more...
Links to Wikipedia are found everywhere in articles and blog posts, and I use them often myself when that extra level of information might be of interest to the reader but falls outside the scope of the actual article. However, sometimes a short blurb introducing the topic would be enough and would also keep the reader from disappearing into the time stealing rabbit hole that we all know Wikipedia can be.
Edit: The widget is now using the MediaWiki API rather than the AppJet gateway. Read update here.
One solution is to popup a small box with a summary from the Wikipedia article when the mouse moves over the word. There is one service that already provides something like this, the NBC owned Snap.com. Their SnapShot boxes display everything from website screenshots to Flickr images to Wikipedia summaries. That's cool, but I found it a bit too bulky just to display a few paragraphs of text and, as far I know, you don't get much in the way of customizing the appearance.
So I decided to create my own simple Wikipedia box. Fortunately most of Wikipedia is pretty neat and the first section usually contains a decent summary of what the article is about. So we can simply pull out all the text between the two first headings. Some articles have info boxes on the right that are ignored, as to only get pure text.
All this is done by a small AppJet JSON-P application that takes care of retrieving the article and locating the relevant portion of the text. The text is then processed a bit (ie. links are made to open in new windows and point to the absolute URL, reference ids are removed, etc) before it's all put in a nice little JSON package and returned to the client:
The 5000 most recently accessed articles are cached (there's a 50MB storage limit on each AppJet app and I'd rather err on the safe side.) making sure that delivery is speedy and that it doesn't hit Wikipedia's servers more than necessary.
The text is received by a bit of JavaScript which pops up a box containing the article summary and a small link to Wikipedia and the original article (and the GFDL license notice).
The box itself is rather simple, consisting of 4 simple elements. I know this is 2008 and there are no rounded corners or whatever the kids are using these days, but I wanted to keep it basic. The included style sheet should be self-explanatory and easy to change for your liking, although you might have to dive into the JS if you want something radically changed.
So, to use it, simply include the CSS and JS and start putting Wikipedia links in your text like this:
Example output (hover the mouse over the underlined words):
The sky above the port was the color of television, tuned to a dead channel.
"It's not like I'm using," Case heard someone say, as he shouldered his way through the crowd around the door of the Chat. "It's like my body's developed this massive drug deficiency." It was a Sprawl voice and a Sprawl joke. The Chatsubo was a bar for professional expatriates; you could drink there for a week and never hear two words in Japanese.
- Neuromancer by William Gibson
"It's not like I'm using," Case heard someone say, as he shouldered his way through the crowd around the door of the Chat. "It's like my body's developed this massive drug deficiency." It was a Sprawl voice and a Sprawl joke. The Chatsubo was a bar for professional expatriates; you could drink there for a week and never hear two words in Japanese.
- Neuromancer by William Gibson
As you can see from this sample code, you simply make links to the relevant Wikipedia articles and the script should locate them automatically and enable the summary box.
Now, I'm not entirely sure whether or not this breaks the terms of use of Wikipedia. I do know they do not allow dynamically generated mirrors, but I'm not really sure in what category something like this would fall since the articles are dynamically downloaded (if not in cache) even if it isn't really a mirror as such. They used to have a crawl-delay of 1 page per second in their robots.txt, which is obeyed by the AppJet application. If you happen to get hit by that limitation (unlikely, I think) you'll be served a notice of that instead of the article text.
Another thing is that I'm not sure what kind of bandwidth quotas, if any, you might run into with AppJet. If every blog in the world started hitting the same AppJet application, I'm sure it would cause trouble, but that's unlikely to happen. Either way, it's very easy to simply clone the AppJet app if you want to use it on your own site and be safe.
I've tested the script in FF3, Opera 9.5, IE7, Safari 3.1 and Chrome and everything looks fine there.
Finally, download the files here: sumbox.js [4.8 KB] and sumbox.css [1.0 KB] Read more...
AppJet + Random.org = True JSON randomness
Oi, I've been busy for the past week, mostly with doing nothing at all and just enjoying the tail end of the summer. Got some good ideas I need to put some work in now but for now here's another small app I made while messing around with AppJet a few weeks ago.
It's a simple JS gateway to the true random number generator at Random.org (created by Mads Haahr). It accesses the Random.org API, retrieves a number of random integers (maximum of 100 numbers), turns the response into JSON data and calls a callback function specified by you.
Example usage:
I'm not sure if I'll ever have a use case where a pseudo-random Math.random() call won't do, but usefulness is not really my game anyway..
Check out the application and source here: http://json-random.appjet.net/ Read more...
It's a simple JS gateway to the true random number generator at Random.org (created by Mads Haahr). It accesses the Random.org API, retrieves a number of random integers (maximum of 100 numbers), turns the response into JSON data and calls a callback function specified by you.
Example usage:
<script>
function randomcallback(res) {
alert( "A random number between 1 and 100: " + res.numbers[0] );
}
</script>
<script src="http://json-random.appjet.net/?num=1&min=1&max=100&callback=randomcallback" />
I'm not sure if I'll ever have a use case where a pseudo-random Math.random() call won't do, but usefulness is not really my game anyway..
Check out the application and source here: http://json-random.appjet.net/ Read more...
