Summer of Code

Dabbling in JavaScript has been my new pasttime for the last few weeks. After a lot of poking in the dark trying to customize my TiddlyWiki, I thought that I could use my newfound JavaScript powers to make more useful stuff. So I sat down and wrote a bunch of scripts that add features to the Internet which I found missing. I tried to integrate them all into the site layout, but most of them needed a bit more space than a blog post would allow, so they got their separate pages. The links can always be found in the footer area of each page on this site.


For those haven’t heard of it, the former was one of the first social bookmarking services around. But, as with so many promising sites that were bought by Yahoo!, it languished for years without any new features except maybe a redesign of the web site. I moved my bookmarks to Pinboard a while ago. At least Pinboard seems to be actively developed. Doesn’t matter, though, because Delicious claims some 5+ million users and 180 million unique bookmarks, which makes it a great resource to tap.

That’s where this JavaScript comes in: A feature I have been missing right from the beginning is a meaningful way to find bookmarks that are as similar as possible to any given site. Which would certainly be possible for Delicious given their vast database of URLs and tags. Sure, you can get a list of other sites with a certain tag or tag combination, or even a page listing users who have bookmarked this site and the tags they have given it. But this takes a lot of clicking, often with little result. So why not automate the process?

Enter a URL and the script grabs up to 100 (Delicious’ limit) public bookmarks for that site, along with user names and tag information. Getting that user list is crucial to finding like-minded people. Then you can select any of the tags that any of the users have assigned and the script will load other bookmarks from the respective users with those tags. Getting sites which have been tagged with the same tags from the same users as your URL is probably the closest you can come to finding related content. So give it a try:

Go to the Delicious script page..

Note: The URL is exactly matched by Delicious, i.e. it matters if there’s a “www” at the beginning and even if there’s a closing forward slash. I found that including the slash at the end of the server address usually finds more bookmarks.


This was actually the first JavaScript applet I made. Since I learned a lot while writing the Delicious script, I thought that this script could use a bit more polish before posting. Just making better use of jQuery got rid of a whole bunch of unnecessary code.

The script came about because I wanted to try out the Google Maps API – there are so many awesome sites and mash-ups out there that use Google Maps that I figured it can’t be that hard. And it isn’t.

The script uses the Google Maps Geocoder to convert a place name into latitude / longitude coordinates and then plugs these coordinates into the sunrise equation [Wikipedia] to get the sunrise and sunset times for any day. After figuring out what a Julian date is and why astronomers use this instead of regular old dates, I thought to myself that the script might as well compute the times for all days of the year. This of course would only look good in a plot, not so much in a table. A quick search turned up Flot, a quite powerful JavaScript plotting library. All this actually worked pretty well, at least for local places. However, since JavaScript lacks methods to convert UTC times (in which the sunrise time is computed) to timezones other than the user’s, more tinkering was necessary to get the sunrise in local time (and accounting for daylight savings time) in other places around the world. With timezone-JS [GitHub] the conversion is possible, but it needs to know what timezone to use. And Google’s geocoding doesn’t provide that. However, Yahoo! PlaceFinder‘s Geocoding not only return latitude / longitude, but also the timezone in the correct IANA format. However, the Yahoo! API is completely different, as you have to perform AJAX JSON requests to the server – which I had no idea how to do yet – instead of just calling some function in a JavaScript library. In time it worked, though. After a lot of tweaking and debugging for weird places like those above the polar circle that have days without sunrise and days without sunsets (try entering Tromsø, Norway), the script started producing pretty neat graphs.

Go to the Sunrise script page.

Update: I retrofitted the oh-so-useful autocomplete feature of the Google Maps Places library, which is also used in other scripts, to the location input field. So now there is some Google Maps code here after all.

Update (December 1, 2013): Noticed by accident that Yahoo! removed free access to the PlaceFinder API in their quest to destroy the Internet. Thus the script now does use the Google Maps Geocoding API, but needs to make a second call to the Google Time Zone API to get the corresponding time zone.


These scripts finally make some use of the Google Maps JavaScript API, my main intent for starting with this JavaScript business after all. The area around where I live being quite hilly, I was curious about the height profiles of my biking or walking trips. The Google Maps website doesn’t give this information, and other sites like GMap Pedometer, which inspired this script (and which has a host of other features useful to a lot of people), do show a height profile, but don’t compute the cumulate climb heights – which was the number I was interested in most.

Much of it is adapted from Google Maps API examples, with some event tracking and corresponding updates. Flot is again used for plotting.

There are two versions of the script: One lets you enter an origin and a destination location, with full-featured Google Maps pathfinding in between.

Go to the Route Elevation script page.

The other will ask for an origin location and then lets you set arbitrary waypoints, with Google Maps calculating the route between waypoints. This is useful for round trips as are typical for joggers.

Go to the Jogging Elevation script page.

Weather History

I can never remember what the weather was like in the past. Did we have a nice summer last year? Was it a cold winter in ’10? Beats me. But the information is out there if you look for it. And after some tinkering with the awesome Flot plotting library it can even be put into a useful form.

This script accesses weather data from Deutscher Wetterdienst – and therefore only shows German weather data – who freely make available measurement data of 78 weather stations around Germany. The data comes in text files which are loaded, parsed and then finally presented using Flot. Due to the limited space on a web page I chose to first compute weekly averages which expand to daily values for a month at a time when you hover the mouse over the plots. Luckily, Flot has some hooks to enable checking mouse position and also can freely scale the axes, allowing for the zoom effect. Even though I had the first plots up and running quite quickly, the script grew to almost 500 lines of codes before it was done.

To get around modern browsers’ same-origin policies which don’t let JavaScripts access files on servers other than the one serving the script itself, I also had to write a PHP proxy script (or rather assemble it from various sources on the web) which fetches the necessary files from DWD and transparently feeds them to the script.

Go to the Weather History script page.

AutoPager for Kindle

A final script helps me format pages to be sent to a Kindle, especially when they are paginated, i.e. spread out over several pages that you have to click through. The script loads all pages, collects the useful portions and puts them into a single document. To get the document into a Kindle, including tables, images and whatnot, I still use the excellent Send to Kindle extension from amazon. For single-page articles this extension is all that’s needed, anyway.

The script is not integrated into the site design, works only for a few sites and misuses the Nerd Rage webserver as a proxy to get around JavaScript security restrictions, so I will not post the link at this time. If you are genuinely interested, just let me know and we can work something out.

last posts in javascript:

No Comments

Post a Comment

Your email is never shared.