Wednesday, 26 November 2014

Bookmarklets FTW: Magic Pop-Outs and the Theory of Dog Balls!

Bookmarklets FTW!

As explained in my previous post Bookmarklets FTW: Preview Your Blogspot Posts Like a Boss!, bookmarklets are little (or not so little) helper bookmarks, which actually contain scripts. They can certainly make your life easier with automation. I'm bringing here 2 of them, which I've been using a lot.
  • A bookmarklet that opens streaming videos in little popups (not just Youtube videos).
  • A bookmarklet that opens a tiny remote control for Grooveshark player functions.
  • I'm including a small-but-useful app for keeping popup windows on top.
For more advanced readers, I've added a deeper explanation on the bookmarklet structure and recommendations for bookmarklet editing tools and procedures.


Article Level:

You should have found this
out for youself!

The video pop-out helper

Bookmarklet

What does it do?

This bookmarket opens streaming videos in popup windows. Youtube used to have this helpful function built into it, but it's gone now (not sure why). A few Chrome extensions were made to restore this functionality on Youtube (like Pop-out YouTube™ Video), but this bookmarklet has a few added values:
  • This bookmarlket pops out videos not just from Youtube, but from other streaming video sites too.
  • It has a predefined functionality to pop-out videos from a wide array of sites: Youtube, Ted, Vimeo and a few others.
  • If the currently playing video is not a predefined one, it automatically tries to detect it, and pop it out just as well.
  • Specifically on Youtube, it uses Youtube's client API to pause the currently playing video before popping it out.
Epic Meal Time while running a build?? Why not?

How to use it?

  1. Open the video and start playing it.
  2. Click the bookmark to open the video in a popup window.
  3. Bonus: Make the popup window stay on top of other windows with the Keep-popup-on-top mini-app.

Where do I get it?

Here it is. Just drag it to your bookmarks toolbar, open a streaming video and click it to pop-out!

Tip: If you just this click directly, it will aut-detect Douglas Crockford's video at the bottom of this post and pop it out for you!

Can I see the code?

Sure! It's just kinda big.
If you're really interested, click below to expand the code.
Click to expand/collapse the code

Back to Table of Contents

The Grooveshark tiny remote

Bookmarklet

Update, 05/2015

On April 30th 2015, Grooveshark was shut down due to copyright sue from EMI Music Publishing, Sony Music Entertainment, and Warner Music Group.

What does it do?

This bookmarket opens a little popup window, which is a simple remote control for Grooveshark. It may extend to other play sites too in the future.
It allows controlling Grooveshark even when you are on other tabs or your browser is not in focus at all.
  • Shows the currently played track: image, track name and artist
  • Controls the played tracks: previous, next and pause/play.
  • Uses Grooveshark's client API.
  • It's a bi-directional interactive remote:
    It get updated from Grooveshark when tracks are changed, paused or played.
    It controls Grooveshark back with its buttons.
Go to Grooveshark to change songs? No need!

How to use it?

  1. Open Grooveshark.
  2. Click the bookmark to open the tiny remote.
  3. Bonus: Make the popup window stay on top of other windows with the Keep-popup-on-top mini-app.

Where do I get it?

Here it is. Just drag it to your bookmarks toolbar, open Grooveshark and click it to pop the remote control out!


Can I see the code?

Sure! It's just mostly green and kinda big.
If you're really interested, click below to expand the code.
Click to expand/collapse the code

Back to Table of Contents

Tip: Keep-popup-on-top mini-app

This mini application, made with AutoHotkey, runs in the System Tray ("Notification Area", if you will), captures a hotkey: Ctrl+Alt+[Space] and makes the currently selected window stay on top.
Instructions:
  1. Download the Keep-popup-on-top mini-app from here.
  2. Run the app. It will appear in the system tray.
  3. Click any window (e.g. a video popup or the Grooveshark remote).
  4. Press the hotkey: Ctrl+Alt+[Space]
  5. The selected window now stays on top. Now you can continue your work without losing the useful popup!
  6. To cancel the effect, close the window, or press the hotkey again: Ctrl+Alt+[Space]
Back to Table of Contents

Bonus #1: Dog balls!! The bookmarklet structure


Code in bookmarks

Bookmarklets rely on the fact that browser bookmarks/favourites have no problem containing Javascript code, as they are being used as locations. HTML <a> hyperlinks can contain script in their href attributes too. In both cases, this is done using the javascript: prefix in front of the code.
This makes the browser treat the javascript code as if it was a location URL, but in fact results in evaluating and executing it. The code may be also copy-pasted directly into the browser's address bar, but most modern browsers would refuse to execute it right away like this, for security reasons. Google Chrome would automatically erase the javascript: prefix and you'd have to type it manually again, while Mozilla Firefox would just not run code pasted in the address bar (but it would from a saved bookmark, if you click it).

The IIFE structure

A quick word about the structure of Javascript bookmarklets for developers. The design pattern used here is called immediately-invoked function expression (a.k.a. IIFE, a self-executing anonymous function). The idea is to declare a self-contained code block, wrap it in a function, and immediately call it by placing parentheses. Wikipedia suggests it may have been introduced in Paxton & Resig's book Pro JavaScript Techniques, in the Object-Oriented JavaScript chapter (2006) and perfected by Ben Alman (2010).
Functions in Javascript also denote objects, and are used to implement object-oriented principles, such as encapsulation (data hiding), since variables and functions defined inside them would be considered private and inaccessible to external code.
Structure-wise, for bookmarklets, the entire Javascript code could have been put inline as-is, but the IIFE structure makes a neat, clean, self-contained code block solution, which executes itself and leaves no traces. As you can see in the code of the bookmarklets included in this post, it does not stop them from containing other functions (as methods or as classes), which can be reused throughout them internally.
javascript:(function(){ /*Your code here*/ })()

Douglas Crockford, whom I have mentioned in the past refers to this goofy structure as "dog balls"...
This is an excerpt from his lecture "Programming Style & Your Brain" (the excerpt above is from 33:16). As always, I warmly recommend watching his lectures, being one of Javascript's founding fathers and a great lecturer.

Back to Table of Contents

Bonus #2: Editing bookmarklets code

As mentioned above, the structure of bookmarklets, being
javascript:(function(){ /*Your code here*/ })()
- is rather simple, but bookmarklets may bloat to contain quite a lot of code (if they're good!), and they all have to be structured into a single line (unified and minified).

For comfortable editing, I use Notepad++ with the useful JSTool plugin, which supports a few useful features, as demonstrated here:

Syntax highlighting

Notepad++ comes with built-in syntax highlighting for many predefined languages, making it easy to track, not just keywords, but also matching parentheses, brackets of all shapes and XML/HTML tags.
Notepad++'s Language selection adds Javascript syntax highlighting

Minification and unification

The code needs to be compressed into a single line. JSTool's minification function helps achieve this in a jiffy. No matter how readable and indented your code is, it helps remove comments, whitespaces and line breaks, making your code evenly minified.
JSTool's JSMin function minifies the code, removes comments, whitespaces and line breaks
However, sometimes minification results in the code spanning a few lines. Notepad++ easily handles merging those into a single line too, with its Join Lines feature.
Notepad++'s Join Lines function allows joining the separate lines into one

Beautification

Sometimes you need to edit your already-built minified bookmarklet. Diving into a huge single line of code is not an easy task. JSTool's JSFormat feature beautifies the code with ease. It makes it readable for human beings again, so you can see exactly what's where, add blocks, functions and whatever you need. Once you're done editing, just minify it back and update your bookmarklet.
JSTool's JSFormat beautifies the code into human readable indented structure


Back to Table of Contents

2 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. This comment has been removed by a blog administrator.

    ReplyDelete