Category: tools

del.icio.us proxy v1

April 2, 2008: version 1.1 released.

A little while back, Ian Lloyd mentioned that he could not save links to del.icio.us because the site is blocked at his workplace. So, I wrote a proxy using PHP.

What does it do?

The proxy allows you to save bookmarks to your del.icio.us account without going to the del.icio.us site itself.

So, why is that useful? Say you’re at work and your friendly IT department have decided that de.icio.us is an evil distraction and must be blocked to save the company from going under. You still want to save bookmarks to your del.icio.us account and this is where the proxy comes in.

Once installed, the proxy sits somewhere on your own website – which is hopefully not blocked as well – and waits patiently for you to send it a bookmark. It will save the bookmark to your del.icio.us account for you using an interface kindly provided by the folks at del.icio.us (their API).

So, the proxy saves your bookmarks to your del.icio.us account by proxy, hence its name. Obviously, the del.icio.us service must be available in order to use the proxy.

Download and install

Download del.icio.us proxy

That link also takes you to the installation instructions. The proxy is fairly easy to install, even for people with little PHP knowledge. You just set a few things and upload it to an area of your site.

Once installed, it’s a cinch to use. It’s not been tested extensively in the wild yet, so consider this version a beta release. Having said that, Ian says he’s been using it for a little while with no problems, so I figured I’d finally release it for others to use.

I hope people find it helpful. Enjoy!

Notes

After some initial theatrics with throttling, writing a proxy was quite straightforward. To begin with it seemed that, despite sticking to the API rules about not querying the server too often, querying del.icio.us from my domain had been permanently blocked.

Having discussed my intent and my code with the friendly del.icio.us support team, I’m assured that this shouldn’t be a problem. However, thanks to a tweet from Shiflett, I coded in some extra protection against being throttled.

If you do get throttled by del.icio.us while using the proxy, I suggest you get in touch with del.icio.us directly to sort it out quickly.

Thanks

The proxy uses the PhpDelicious library written by the lovely Ed Eliot. Thanks Ed.

The idea to check for the del.icio.us account’s last update time before posting to it came from Chris Shiflett. Ta Chris.

The inspiration for the proxy in the first place came from Ian Lloyd. Cheers, m’dear.

Updates

April 2, 2008

Version 1.1 released with important fixes.

December 6, 2007

Version 1.0.1 released with annoyance fixes.

Quick Tip: Sage and the Feed Pseudo-Protocol

I recently ran into a couple of problems with Sage, the lightweight feedreader extension for Firefox. Sage wouldn’t parse some of my feeds.

One of the problems was down to Sage not understanding the URL for the feed because the “feed” protocol had been added to the address. For example:
feed:http://www.domain.tld/myfeed.xml

You can get Sage to behave by simply removing the feed protocol from the start of the URL. Easy peasy!

Incidentally, I submitted a bug report on the Sage project about the feed protocol and it should be straightforward to solve, so I’m hoping Sage will soon be updated with a fix.

Grab Firefox Tabs for Offline Use

If you are simply looking to bookmark all the tabs you have open in Firefox, latest versions of the browser have a “Bookmark All Tabs” option in the Bookmarks menu.

Ever since reading a comment by Derek Featherstone some time ago on Roger Johansson’s blog I have been using the ScrapBook extension for Firefox for various tasks from knocking together blog posts to saving useful pages for my latest projects. I highly recommend it.

While doing a bit of research a couple of days ago, I wanted to save several tabs to ScrapBook, just like you would for bookmarking a set of tabs. I figured that ScrapBook must be able to do this… and it does. Here’s a helping hand.

Grabbing multiple URLs with ScrapBook

Since version 0.14.1 of ScrapBook (available since February 2005), you can use the “Capture Multiple URLs“ to save several pages at a time for offline use. Once you’ve got ScrapBook installed in Firefox, follow these steps:

  1. When you’ve got a load of tabs you want to save opened up, bring up ScrapBook (default keyboard shortcut is Alt+K).
  2. Find the “Tools” menu and go to “Capture Multiple URLs“.
  3. In the dialog that pops up, you can type in the URLs of pages you want to capture. Just hit the “Capture” button once you’ve typed them in.

Grabbing open tabs with ScrapBook

I don’t find this as useful as saving all open tabs to ScrapBook. In steps the handy “URL Detector”. Open up a load of tabs you want to save to ScrapBook and then try this:

  1. In the “Capture Multiple URLs“ tool, find the “URL Detector” and select “All Open Tabs in the Window”.
  2. ScrapBook will now have automatically put the URLs of your open tabs into the capture tool. You can then remove any pages you don’t actually want and select the ScrapBook folder to which you want to capture. Bear in mind that the default folder in the drop-down menu is Root – I’d find it more useful if currently highlighted folder in the ScrapBook sidebar was the default). You can also create a new folder to capture to.
  3. Hit the “Capture” button and let ScrapBook do its thing!

What else?

If you don’t save your captured pages to a specific folder and they end up in the Root folder, you can select multiple captures and move them to the folder you want from “Manage” in the “Tools” menu.

Of course, you can manage things how you like, organising resources, references, research for articles, blog posts or whatever. You can also create totally separate notes in a ScrapBook folder.

Also, for those not so familiar with ScrapBook, you can also edit your captured pages by loading up a captured page and hitting the “Edit” button that appears in the status bar. This can help you to save on the size that your ScrapBook takes up by removing any parts of pages that you don’t need. You can also highlight selections and add inline comments on pages. Bear in mind that your edits are not saved until you hit the “Save Changes” button (it looks like a disk)!

Free Personal/Project Management Tools

Following on from my last post on the Manage-Do Flipbook, I thought I’d also post a few links to free personal/project management tools that I use from time to time. Feel free to add to the list.

  • FreeMind – A free mind mapping application that allows you to organise things as you would in a spider diagram, only it’s a little more flexible. Requires Java. Article about FreeMind.
  • Open Workbench – An open source alternative to Microsoft Project. Requires Java.
  • OpenOffice – An open source suite of office applications. Makes a good alternative to the Microsoft Office suite.
  • EssentialPIM – Free software that you can use to keep notes and contacts as well as organising tasks.
  • Sunbird Free calendar software from the nice people who bring you Firefox.
  • ScrapBook – One of the most useful Firefox extensions around, ScrapBook allows you to accurately save Web pages to your hard drive, organise them, make notes…

Anyone use or know of any other good ones? I know about the useful online tools that 37signals provide, but have never got around to trying them out.

Add “Validate Entire Site” to Web Developer Extension

It’s pretty easy to add a tool to Chris Pederick’s Web Developer extension that will spider an entire site and validate it for you. The WDG validator (which the Web Developer extension doesn’t use by default) will do this for you if you add the right options in.

To add “Validate Entire Site” as a custom tool

It’s quite straightforward really. You just need to create a new tool in the Tools options (version 0.9 and up, I think) and make sure &spider=yes is in the URL for the WDG validator. Just follow these steps:

  1. Select “Options…” from under the “Options” menu in the toolbar.
  2. Find the “Tools” options.
  3. Add a new tool by using the “Add…” button.
  4. Enter the tool description (I use “Validate Entire Site”).
  5. In the URL field copy and paste this: http://www.htmlhelp.com/cgi-bin/validate.cgi?warnings=yes&spider=yes&url= The URL of the current page in the browser window will be appended to what you enter here, so the &url= must be at the end of this line.
  6. Optionally, you can also add a keyboard shortcut for this tool, so that you can validate an entire site with Control+Shift+[key].
  7. Hit the OK button to save your new tool.

Important! Please note the updates below. There are a few limitations with using the WDG validator for this tool.

To validate a page or an entire site with a custom XML DTD

By default, the Validator assumes that a custom DTD is HTML or SGML. If your custom DTD is XHTML or XML, then you need to include the Validator’s hidden “xml” option. When validating a URL, you can specify this option by appending “&xml=yes” to the URL of the validation results. WDG HTML Validator Tips

So, this would mean that you need to add &xml=yes into the URL for your tool.

For validating a single page with a custom XML DTD:
http://www.htmlhelp.com/cgi-bin/validate.cgi?warnings=yes&xml=yes&url=

For validating an entire site with a custom XML DTD:
http://www.htmlhelp.com/cgi-bin/validate.cgi?warnings=yes&xml=yes&spider=yes&url=

Updates

15 February 2006

This article is proving fairly popular, so I thought I’d add a couple of useful links to this tip.

30 March 2006

It’s also worth noting that the WDG validator limits its spider to checking the first 100 pages it finds.

09 July 2006

You may find that the WDG validator only validates one page if you use this tool on a page within the site you wish to validate. Use the tool on the main domain (e.g. http://dotjay.co.uk/ rather than http://dotjay.co.uk/index/) to get the validator to spider the whole site.

24 August 2006

Someone asked about validating password-protected sites. The WDG validator does allow you to validate pages behind HTTP authentication, but you must provide the username and password in the URL. The validator cannot spider a site you are already authenticated on – you must provide access details in the URL.

The Web Developer toolbar gets around this for individual pages by either asking you for access details when trying to validate a password-protected page or allowing you to use “Validate Local HTML, saving a local copy of the page and uploading that for validation.

When adding custom tools to the Web Developer toolbar, you don’t have the means to trigger a request for access details. To validate an entire site which is password-protected, you need to ensure that the username and password is entered as part of the URL.

27 March 2007

I’ve just noticed that you can also add &hidevalid=yes to the URL to get the validator to hide the valid results it finds for your site, making it much easier for you to find problems!

Blagging Bookmarklets

OK, having not had so much time recently to play with bookmarklets, I finally came to the conclusion that I wasn’t going to be able to finish this post as I first intended. As a precursor to developing some Firefox extensions, bookmarklets was never going to cut it anyway. I just wanted to brush up on some JavaScript – I’ve been spending more time working on developing my skills in accessible design than with my geeky programming roots. Anyway, I’m yet to do anything even remotely complicated with bookmarklets, but I thought I’d share what I’ve been up to recently.

WDG Validator

Rich Pedley (a.k.a. Elfin) got in touch with me to solve a little problem he was having using the WDG validator to validate documents that have a custom XML DTD. You need to add “xml=yes” into the URL for the validator as it doesn’t give you the option on the website. Rich wanted a bookmarklet that would do this for him, so this is what I knocked up:

Older browsers may not understand the encodeURIComponent() function, so you might need to use escape() instead.

Personally, I’ve preferred to add these validation tasks as tools on the Web Developer extension toolbar, as I tend to use that for much of my day-to-day meddling on the Web.

Check highlighted word

OK, here’s a handy one: a spell checker for individually selected/highlighted words. I wanted to be able to check the spelling of words in a post before I sent them. I was originally inspired to write a Firefox extension for this, but I wanted to try a bookmarklet first. The thing is, you can’t actually do what I was trying to do with a bookmarklet. You cannot identify which textarea element on a page has focus. The JavaScript in a bookmarklet is run after a page has been rendered and after any events occur on the page, so there’s no way to add a listener for focus events. Feel free to prove me wrong.

Anyway, I did come up with something. The following bookmarklet checks the spelling of highlighted words in every textarea element on a page. If you select more than one word in any textarea element, it will only check the first word in the selection. It won’t do anything unless you have selected some text.

The problem with this is that if more than one textarea element has some highlighted text, they all get checked. This is why I wanted to detect which textarea element had focus. I did try offering the option to choose which word to check when more than one textarea element has a selection. The code for this got rather long, breaking the 255-character limit allowed for bookmarklet code. It’s possible to use a bookmarklet to send information to an external JavaScript file hosted on a server, but that just seems a little over the top for something so simple.

So, at this point I was back to my original plan: write a Firefox extension. You can easily add this sort of thing to a context menu. However, a good Google goes a long way. I found that someone had already done what I wanted to do. In fact, several people had. In the end, I decided that I would try my hand at writing my own extension anyway, but I’ll save that for a future post.

Creating your own bookmarklets

Here are a couple of pointers that I’ve found useful while playing with bookmarklets.

If you’re making your own bookmarklets, you can use whatever JavaScripts works for you, but you should really try to use JavaScript that works in most browsers. For example, you should avoid using proprietary methods and statements such as document.all. Also, some older browsers don’t like some of the newer methods. For example, as I mentioned earlier, instead of using encodeURIComponent() to encode a URI, you may need to use the older encode() method instead.

Another thing to watch out for, when using XHTML sent as application/xhtml+xml, you should be using createElementNS() and not createElement() as you would for any document sent as text/html.

A common thing for a bookmark to do is open some information about the current page in a new window (for example, using open()). It should be noted that the name you give to the window should not have any spaces or other special characters in it. Firefox et al won’t care about it, but IE will throw an error and your bookmarklet won’t work. It might seem a simple thing to point out, but it can be a difficult error to debug… this will save you some head-banging.

For example, the following two lines won’t work in IE:

open('http://dotjay.co.uk/blog/','Dotjay blog','resizable=yes,width=700,height=500')
open('http://dotjay.co.uk/blog/','Dotjay-blog','resizable=yes,width=700,height=500')

You must use something like this:

open('http://dotjay.co.uk/blog/','DotjayBlog','resizable=yes,width=700,height=500')

Also, check out the “Crunchinator” – an online tool that will take your normal JavaScript formatting and remove all the crap you don’t need to give you a single line of JavaScript suitable for your bookmarklet.

Getting a good blogging

After writing most of these posts on bookmarklets, I got up-to-date with some blog reading and found that Gez has been discussing the creation of bookmarklets recently too! He goes more in-depth into creating a bookmarklet that will allow you to load a custom style sheet into the head of a document.

I also notice that Andy Budd has a list of useful bookmarklets he uses.

Quick Guide to Bookmarklets

Recently, I’ve been playing around with writing Firefox extensions to add toolbar buttons that allow me to add a couple of simple tools I’d like to see on my toolbar. More on that soon, but in the process I’ve written a couple of bookmarklets to test some of my ideas. So my next couple of posts will be about bookmarklets. Here’s one to get started.

First of all, I call these things “bookmarklets”. I use Firefox for my main browser, which has a bookmark manager. Most people will be familiar with the Favorites menu/folder/sidebar in Internet Explorer. I never even used Favorites when Internet Explorer was my main browser, so they’ve never been “Favelets” to me.

Bookmarklets have been around for a long time. They are simple JavaScript programs that you can activate as you would a bookmark, making them quite handy tools. These are especially handy when your browser doesn’t let you add custom buttons to your toolbar.

Web designers and developers in particular started using them to make frequent tasks easier. For example, you could program one to resize your browser window to a variety of screen resolutions. Some designers still use bookmarklets for such tasks. Personally, I use Firefox with Chris Pederick’s Web Developer toolbar or Internet Explorer with the AIS Web Accessibility Toolbar which cover many of my common tasks. Other bookmarklets can help general browsing. For example, Movable Type uses bookmarklets to make it easy for you to publish to your blog when you stumble across something that inspires you while browsing.

How to use bookmarklets

Bookmarklets will usually appear on pages as hyperlinks like those that trigger some JavaScript. You save a bookmarklet to your Bookmarks (or Favorites) in the same way you would a normal link. You can drag and drop the link into your Bookmarks or hit “Bookmark This Link” (“Add to Favorites” in Internet Explorer) in the context menu of the link you want to save. Internet Explorer will usually give you a warning message when you try bookmarking a JavaScript link, but don’t worry about it.

Once you’ve saved a bookmarklet, you can access it as you would a bookmarked website. When you’re on a site on which you want to perform the bookmarklet code, go to where you saved the bookmarklet and hit it. It will then perform its JavaScript magic on the site.

I can’t write no stinkin’ bookmarklet!

Steve Kangas’ bookmarklets.com has a vast library of bookmarklets to get you started, and our good friend Tantek Çelik has a few favelets. Also, those Web developers out there who haven’t yet heard of the slayeroffice Favelet Suite really should go and check them out.

More to come

I’m no JavaScript guru, but I know enough to get by. I have created a couple of bookmarklets recently and it really wasn’t all that difficult, so I’m going to write soon about how I did those. In the meantime, check out the bookmarklets I created to help Elfin over at permanent tangent and the GAWDS Site of the Month nomination bookmarklet generator (what a mouthful).