image

Thank you J-key 🙂

For those of you who don’t know what I’m talking about check out http://reader.google.com.

Advertisements

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>
   <a href="javascript:{alert('Hello World!\n\nFrom ' +     
      document.title + ' @ ' + document.location.href);}">
      Hello World!</a>
</body>
</html>

About a year and a half ago I had to create a simple bookmarklet for a work project that captures the url and title of the current page. While there was a lot of information scattered about the internet there was no single step-by-step guide that I could find. As I started to learn more about bookmarklets I gained a greater understanding of their potential. Many new ideas came to mind that I never had time to explore until now.

This series of posts is intended to provide that simple step-by-step guide as well as offer some new and exciting bookmarklets ideas.

How does a bookmarklet work?

A bookmarklet is simply a bookmark that uses the javascript: protocol instead of the more usual http(s): protocol. When you click on a bookmarklet from your Bookmarks toolbar the javascript is executed within the context of the current document.

Since a bookmarklet is just another url it can be presented in a webpage just like any other link. Adding a bookmarklet to the browser Bookmarks toolbar is just a matter of dragging and dropping the link. A bookmarklet can even be put into a folder on the Bookmarks toolbar for less frequest access.

Bookmarklets also have access to any other Uri and are not limited by the same-origin policy. Bookmarklets often inject into the current tab a script tag that points to a completely different domain. Since the script tag has access to both the current document and the remote domain it can pass information between them.

Of course, passing information between domains has security implications. Users adding bookmarklets to their toolbar should do so only in trusted situations. Since there is no universal code signing mechanism for javascript, bookmarklets should be treated with the same caution as any other website.

Known Issues

  • Javascript is required. It goes without saying that any link that uses the javascript protocol is going to require that javascript be enabled in the browser.
  • Framesets present a challenge too since there is no DOM element to attach a child script element to.

Hello World

Lets create the simplest of bookmarklets. No web server is required and the IDE of choice can be as simple as notepad. Copy the following code block into a new text document and save it with an appropriate name. I named mine helloworld.htm but you can choose whatever you like as long as the extension is recognized by your web browser.

<!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>
   <a href="javascript:{alert('Hello World!');}">Hello World!</a>
</body>
</html>

After you have saved the file open up your web browser and navigate to the file or double click it from within Windows Explorer or the Mac Finder. You should see a plain white page with a single link. Drag that link to your Bookmarks toolbar and when you drop it you should see a new button labelled Hello World!

Navigate to a totally unrelated page then click the button.

Assuming there were no accidental typos you should see an alert box with the Hello World! text in it.

Congratulations. You have created your first bookmarklet. In part II of this series I will show you how to do something a little more useful than hello world. I will demonstrate how to manipulate some information from an existing page and present it in an embedded iFrame.

It’s just an intro to a skateboard video but wow!  It’s beautiful and a great choice of accompanying musical score.

I would love to see a similar treatment for a climbing or mountain biking video 🙂

I was walking home along the Danforth this afternoon and spotted a tiny little shop on the East side of Jones just south of Danforth.  The sign was one of those printed vinyl banners with grommets and rope, tied over whatever previous sign was still in place.  The banner simply said “Olives and Olive Oil”.  It sounded intriguing and since I was in no hurry I detoured and went inside.

It’s a smallish retail store with shelves of olive oil in large cans and a counter top with 5 or 6 stainless steel containers of various black olives.  The proprietor is Turkish and his family still runs a farm in the old country that they’ve owned for many generations.  He directly imports the olives and wholesales them to various locations around town.  However, most retail outlets find his organic olives too pricey after they apply their markup so he’s selling those from this little store.

I tasted a few of them and they were fantastic.  I also tried some of his olive oil and it was out of this world.  Apparently it takes about 4-5 kilos of olives to make one litre of olive oil.  Needless to say, the oil isn’t cheap.  About $16 for a litre.  But after you taste it you can easily justify the cost.

He has only been open for five weeks so I urge any of you that live in the area to support his shop.  The address is 585 A Jones Avenue and the phone number is (416) 833-3410.

pizzaI have been experiencing an ongoing customer service battle with the 2-4-1 Pizza chain in Toronto that has gone from inconvenient to amusing to frustrating to incredulous and back to amusing again.

I’ve always liked their product.  As chain pizza goes it is consistently fresh and cooked exactly how I like it (thin crust and well done).  Above all it is tasty which is more than I can say for that cardboard crap that Pizza Pizza pedals.  Ordering delivery was always an easy experience because they had my previous order online.  I could ask them to either re-enter that or tailor a new order to my pleasing.

However, that all changed about a year ago when I was at my local pub with some friends and we decided to order a pizza.  McCarthy’s is an awesome place and they don’t mind if your order food in but be sure to offer a slice to whomever is behind the bar.  As always I provided my mobile number to the 2-4-1 order representative and told her that the address was different than what was on file since I was not at home.  She noted the one-time delivery address, hung up, and a delicious pizza arrived 40 minutes later.

Well, ever since then every time I call 2-4-1 I give them my phone number and verify my home address and the first question is: “Have you moved recently?”

I’ve probably ordered 20+ pizzas over the past year and I go through the same thing every time.  I explain to the person on the other end of the line that the address on file is incorrect.  When they offer to change it for me I mention that every order taker I’ve spoken to so far has asked the same thing and entered the new information.  Yet the next time I place an order the change does not appear on screen.

Once I was put through to a customer service representative.  I explained the situation to her, gave her my phone number and guess what?  The correct address came up.  But the very next pizza order I placed with them had the incorrect pub address again.

Since I am in Information Technology I find this an intriguing conundrum.  I don’t doubt for an instant that each person has updated my record.  But for some reason it’s not persisting in their system.  I have asked several times for a phone number or email address so that I can contact their I.T. department directly to discuss this but they are not willing to divulge that information.

For now I will continue to order from 2-4-1 because the product outweighs the inconvenience.  I just wonder how many other people are experiencing the same bizarre situation.

For what its worth one of my favourite orders consists of two pizzas with one having sun dried tomatoes, hot peppers and pineapple and the other having green olives, feta cheese and sliced tomatoes.  Both thin crust and well done.  MMmmmm.

2008/01/18: update

Tonight I ordered my usual from 2-4-1 Pizza and as is the custom now I went through the convoluted process of describing to the order taker why the address she had on file was not the correct one.  In typical fashion she said she would update my record so that I wouldn’t have to deal with this hassle again and I of course told her that was a waste of her time.

After she had finished taking my delivery address and order she said she’d entered the new info in the database anyway so it would be fine for next time.  So I asked her if she would indulge me for a minute or two and log out and back into her system.  Then enter my number as if she was taking a new order from me.  She said sure and I heard the tapping of keys for a few seconds followed by

oh, Oh, OH My, well that is strange now isn’t it?

So at least I feel better now knowing that they have seen first hand what I”ve been complaining about all this time.  She said she would certainly escalate the matter with her helpdesk.  So stay tuned for the next update…

The Bruce Trail

So I’ve been hiking sections of the Bruce Trail for the past few years in an ongoing goal to complete the 800+ km Canadian Wonder.  One of these days I’ll tally up my distance.  Right now I’d estimate it at somewhere between 30 and 40%.  Still a long way to go.

My sister must have recognized my love of this incredible natural wonder and was inspired to paint this image for me for as a Christmas present.  I knew the moment I unwrapped it what it was.  The subtle white blaze was the giveaway.

Thanks Tam, it’s an awesome picture.