Web Design

PHP for Easy Bookmarklet Testing and Distribution

 

Bookmarklet authors have it tough. On top of the usual challenges of cross-browser Javascript testing, we’ve traditionally also had to workaround IE’s character limit and jump through hoops to embed code inside of javascript: links.

Bookmarklet Server (source) eases testing and deployment by allowing you to keep code where it should be—in .js files. A single SCRIPT element dynamically loads the bookmarklet code and creates the javascript: link for you.

Continue reading  

Detect a blocked pop-up window

 

Since reliable info doesn’t seem to be out there, this Javascript detects if a pop-up window was blocked at least by IE6/XPsp2’s built-in blocker, FF or Opera 8.

var popWin; // global for easy reference later
function pop(url, name, features, replace) {
    popWin = open(url, name, features, replace);
    if (popWin == null) { // nice blocking browsers return null
        alert('window blocked, redirect or whatever');
    } else {
        setTimeout(function() {
            if (typeof popWin.parent == 'undefined') { // opera
                alert('window blocked, redirect or whatever');
            }
        }, 200);
    }
}

How about Safari?

Subversioning

 

I’ve been hearing great things about source control for awhile so I dug in and installed Subversion using this new tutorial. While you can interact with the svn server from the command-line, the TortoiseSVN Windows shell extension makes managing imports, updates and commits as simple as a right click.

My first project contains all the files in http://mrclay.org/js/, future home of all my Javascript projects: standalone scripts, bookmarklets and user scripts. I’ve already committed several revisions of click2zap into SVN so I can track changes and rollback to previous versions if need be. SVN is gonna be great for bigger projects.

Build what you see

 

I’m really digging this agile software development idea, which boils down to:

  1. Create the user interface.
  2. Build the code to power it.

Without a UI, you just have a bunch of developers and stakeholders, each having a vague notion of what the app will do and look like, and who it will serve. This leads to:

  • frustration for all parties when the finished product doesn’t match the stakeholders’ vision
  • wasted time on features that no-one will use
  • missed opportunities for features that would’ve been obvious with a UI in hand

Click2Zap Bookmarklet 1.1

 

Use Click2Zap to remove elements from the page for printing (remove text/images to save paper/ink) or reading comfort purposes.

Note: MyPage can do this and a lot more.

Get it

You must enable Javascript! (right-click, add to favorites or bookmarks)

Features

  • click2zap panel fixed to the top right of the window.
  • as you rollover elements, they are highlighted with a yellow background.
  • click the highlighted element to remove it.
  • click undo to replace elements (unlimited).
  • disable allows links to work (though you can always right-click a link)
  • use the print link on the click2zap panel to hide the panel and print.

Caveats:

  • The page author’s print CSS will still be used, so elements may already be removed for you (do a quick print-preview to find out what you still need to remove)
  • All element onclick handlers are overwritten, so you may need to reload the page to re-enable these.
  • Plug-ins/embedded media players can’t be removed, but you can try to remove elements containing them.
  • Undo sometimes shifts layout.

To Do:

  • Have a zap/keep toggle. When in “keep” mode, all surrounding elements are remove on click: potentially easy. (thanks Brian)
  • Activate print styles onscreen to see what will print by default: unknown difficulty
  • Record removed element ids in a cookie and allow one-click removal of all of them when you’re on the same site: easy-ish, but cookie code adds bloat and you could only record elements with ids.

Much thanks to Troels Jakobsen’s Bookmarklet Builder