Summer of Code

Dab­bling in JavaScript has been my new past­time for the last few weeks. After a lot of pok­ing in the dark try­ing to cus­tomize my Tid­dly­Wi­ki, I thought that I could use my new­found JavaScript pow­ers to make more use­ful stuff. So I sat down and wrote a bunch of scripts that add fea­tures to the Inter­net which I found miss­ing. I tried to inte­grate them all into the site lay­out, but most of them need­ed a bit more space than a blog post would allow, so they got their sep­a­rate pages. The links can always be found in the foot­er area of each page on this site.


For those haven’t heard of it, the for­mer del​.icio​.us was one of the first social book­mark­ing ser­vices around. But, as with so many promis­ing sites that were bought by Yahoo!, it lan­guished for years with­out any new fea­tures except maybe a redesign of the web site. I moved my book­marks to Pin­board a while ago. At least Pin­board seems to be active­ly devel­oped. Doesn’t mat­ter, though, because Deli­cious claims some 5+ mil­lion users and 180 mil­lion unique book­marks, which makes it a great resource to tap.

That’s where this JavaScript comes in: A fea­ture I have been miss­ing right from the begin­ning is a mean­ing­ful way to find book­marks that are as sim­i­lar as pos­si­ble to any giv­en site. Which would cer­tain­ly be pos­si­ble for Deli­cious giv­en their vast data­base of URLs and tags. Sure, you can get a list of oth­er sites with a cer­tain tag or tag com­bi­na­tion, or even a page list­ing users who have book­marked this site and the tags they have giv­en it. But this takes a lot of click­ing, often with lit­tle result. So why not auto­mate the process?

Enter a URL and the script grabs up to 100 (Deli­cious’ lim­it) pub­lic book­marks for that site, along with user names and tag infor­ma­tion. Get­ting that user list is cru­cial to find­ing like-mind­ed peo­ple. Then you can select any of the tags that any of the users have assigned and the script will load oth­er book­marks from the respec­tive users with those tags. Get­ting sites which have been tagged with the same tags from the same users as your URL is prob­a­bly the clos­est you can come to find­ing relat­ed con­tent. So give it a try:

Go to the Deli­cious script page..

Note: The URL is exact­ly matched by Deli­cious, i.e. it mat­ters if there’s a “www” at the begin­ning and even if there’s a clos­ing for­ward slash. I found that includ­ing the slash at the end of the serv­er address usu­al­ly finds more book­marks.


This was actu­al­ly the first JavaScript applet I made. Since I learned a lot while writ­ing the Deli­cious script, I thought that this script could use a bit more pol­ish before post­ing. Just mak­ing bet­ter use of jQuery got rid of a whole bunch of unnec­es­sary code.

The script came about because I want­ed to try out the Google Maps API - there are so many awe­some sites and mash-ups out there that use Google Maps that I fig­ured it can’t be that hard. And it isn’t.

The script uses the Google Maps Geocoder to con­vert a place name into lat­i­tude / lon­gi­tude coor­di­nates and then plugs these coor­di­nates into the sun­rise equa­tion [Wikipedia] to get the sun­rise and sun­set times for any day. After fig­ur­ing out what a Julian date is and why astronomers use this instead of reg­u­lar old dates, I thought to myself that the script might as well com­pute 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 pow­er­ful JavaScript plot­ting library. All this actu­al­ly worked pret­ty well, at least for local places. How­ev­er, since JavaScript lacks meth­ods to con­vert UTC times (in which the sun­rise time is com­put­ed) to time­zones oth­er than the user’s, more tin­ker­ing was nec­es­sary to get the sun­rise in local time (and account­ing for day­light sav­ings time) in oth­er places around the world. With time­zone-JS [GitHub] the con­ver­sion is pos­si­ble, but it needs to know what time­zone to use. And Google’s geocod­ing doesn’t pro­vide that. How­ev­er, Yahoo! PlaceFind­er’s Geocod­ing not only return lat­i­tude / lon­gi­tude, but also the time­zone in the cor­rect IANA for­mat. How­ev­er, the Yahoo! API is com­plete­ly dif­fer­ent, as you have to per­form AJAX JSON requests to the serv­er – which I had no idea how to do yet – instead of just call­ing some func­tion in a JavaScript library. In time it worked, though. After a lot of tweak­ing and debug­ging for weird places like those above the polar cir­cle that have days with­out sun­rise and days with­out sun­sets (try enter­ing Trom­sø, Nor­way), the script start­ed pro­duc­ing pret­ty neat graphs.

Go to the Sun­rise script page.

Update: I retro­fit­ted the oh-so-use­ful auto­com­plete fea­ture of the Google Maps Places library, which is also used in oth­er scripts, to the loca­tion input field. So now there is some Google Maps code here after all.

Update (Decem­ber 1, 2013): Noticed by acci­dent that Yahoo! removed free access to the PlaceFind­er API in their quest to destroy the Inter­net. Thus the script now does use the Google Maps Geocod­ing API, but needs to make a sec­ond call to the Google Time Zone API to get the cor­re­spond­ing time zone.


These scripts final­ly make some use of the Google Maps JavaScript API, my main intent for start­ing with this JavaScript busi­ness after all. The area around where I live being quite hilly, I was curi­ous about the height pro­files of my bik­ing or walk­ing trips. The Google Maps web­site doesn’t give this infor­ma­tion, and oth­er sites like GMap Pedome­ter, which inspired this script (and which has a host of oth­er fea­tures use­ful to a lot of peo­ple), do show a height pro­file, but don’t com­pute the cumu­late climb heights – which was the num­ber I was inter­est­ed in most.

Much of it is adapt­ed from Google Maps API exam­ples, with some event track­ing and cor­re­spond­ing updates. Flot is again used for plot­ting.

There are two ver­sions of the script: One lets you enter an ori­gin and a des­ti­na­tion loca­tion, with full-fea­tured Google Maps pathfind­ing in between.

Go to the Route Ele­va­tion script page.

The oth­er will ask for an ori­gin loca­tion and then lets you set arbi­trary way­points, with Google Maps cal­cu­lat­ing the route between way­points. This is use­ful for round trips as are typ­i­cal for jog­gers.

Go to the Jog­ging Ele­va­tion script page.

Weather History

I can nev­er remem­ber what the weath­er was like in the past. Did we have a nice sum­mer last year? Was it a cold win­ter in ’10? Beats me. But the infor­ma­tion is out there if you look for it. And after some tin­ker­ing with the awe­some Flot plot­ting library it can even be put into a use­ful form.

This script access­es weath­er data from Deutsch­er Wet­ter­di­enst – and there­fore only shows Ger­man weath­er data – who freely make avail­able mea­sure­ment data of 78 weath­er sta­tions around Ger­many. The data comes in text files which are loaded, parsed and then final­ly pre­sent­ed using Flot. Due to the lim­it­ed space on a web page I chose to first com­pute week­ly aver­ages which expand to dai­ly val­ues for a month at a time when you hov­er the mouse over the plots. Luck­i­ly, Flot has some hooks to enable check­ing mouse posi­tion and also can freely scale the axes, allow­ing for the zoom effect. Even though I had the first plots up and run­ning quite quick­ly, the script grew to almost 500 lines of codes before it was done.

To get around mod­ern browsers’ same-ori­gin poli­cies which don’t let JavaScripts access files on servers oth­er than the one serv­ing the script itself, I also had to write a PHP proxy script (or rather assem­ble it from var­i­ous sources on the web) which fetch­es the nec­es­sary files from DWD and trans­par­ent­ly feeds them to the script.

Go to the Weath­er His­to­ry script page.

AutoPager for Kindle

A final script helps me for­mat pages to be sent to a Kin­dle, espe­cial­ly when they are pag­i­nat­ed, i.e. spread out over sev­er­al pages that you have to click through. The script loads all pages, col­lects the use­ful por­tions and puts them into a sin­gle doc­u­ment. To get the doc­u­ment into a Kin­dle, includ­ing tables, images and what­not, I still use the excel­lent Send to Kin­dle exten­sion from ama­zon. For sin­gle-page arti­cles this exten­sion is all that’s need­ed, any­way.

The script is not inte­grat­ed into the site design, works only for a few sites and mis­us­es the Nerd Rage web­serv­er as a proxy to get around JavaScript secu­ri­ty restric­tions, so I will not post the link at this time. If you are gen­uine­ly inter­est­ed, just let me know and we can work some­thing out.

last posts in javascript:

No Comments

Post a Comment

Your email is never shared.