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

Posted by Alon Rotem at 01:23
Labels: , , ,

16 comments:

  1. Unknown14 January 2016 at 06:44

    This comment has been removed by the author.

    ReplyDelete
  2. Unknown14 January 2016 at 06:45

    This comment has been removed by a blog administrator.

    ReplyDelete
  3. sriram18 June 2018 at 07:45


    Good Post! Thank you so much for sharing this pretty post, it was so good to read and use to improve my knowledge as updated one, keep blogging
    Php course in chennai

    ReplyDelete
  4. hania khan24 June 2019 at 22:28

    Visual originators know precisely what they need to do when it comes down to being imaginative. logo design service

    ReplyDelete
  5. youcanyouwill4 January 2020 at 19:01

    It’s hard to find knowledgeable people on this topic, but you sound like you know what you’re talking about! Thanks
    tanks 2 unblocked games

    ReplyDelete
  6. nida22 January 2020 at 14:35

    Thank you for your post, I look for such article along time, today i find it finally. this post give me lots of advise it is very useful for me. 안전놀이터

    ReplyDelete
  7. I am blogger 1423 January 2020 at 14:30

    Thank you for your post, I look for such article along time, today i find it finally. this post give me lots of advise it is very useful for me. 안전놀이터

    ReplyDelete
  8. I am blogger 1425 January 2020 at 11:58

    Thank you for your post, I look for such article along time, today i find it finally. this post give me lots of advise it is very useful for me. 안전놀이터

    ReplyDelete
  9. divya10 June 2020 at 11:50

    Excellent Blog!!! The blog which you have shared here is more informative, This is really too useful and have more ideas and keep sharing many techniques about java. Thanks for giving a such a wonderful blog. share more details.
    Ai & Artificial Intelligence Course in Chennai
    PHP Training in Chennai
    Ethical Hacking Course in Chennai Blue Prism Training in Chennai
    UiPath Training in Chennai

    ReplyDelete
  10. Jeffrey Watson15 November 2020 at 15:49

    Positive site, where did u come up with the information on this posting?I have read a few of the articles on your website now, and I really like your style. Thanks a million and please keep up the effective work. kolpac.com

    ReplyDelete
  11. Unknown21 April 2021 at 08:56

    Weight loss is the toughest thing people try to do to get fit and healthy. There are many things needed to be taken seriously if you want to lose weight. Cut the sugary food and eat greens and fruits as much as you can. Moreover, there are many capsaicin supplement available online. Many doctors also prescribe some products to use.

    ReplyDelete
  12. Dominick22 May 2021 at 07:09

    Pharmacy technician cover letter is one of the leading experts in the wellness treatment department. Drug store specialists must not provide medications without correct assessment with the pharmacologists.

    ReplyDelete
  13. Mr.paul12 September 2021 at 17:51

    I wanted to thank you for this great read!! I definitely enjoying every little bit of it I have you bookmarked to check out new stuff you post. remote illusionist

    ReplyDelete
  14. muhammadali13 October 2021 at 16:58

    The worst part of it was that the software only worked intermittently and the data was not accurate. You obviously canot confront anyone about what you have discovered if the information is not right. World Market Link

    ReplyDelete
  15. russow4 January 2022 at 15:50

    Driving from Kuching City to the Rainforest World Music Festival get point in Santubong required around 40 minutes, a cycle longer as there was more traffic out and about. No private vehicles were permitted to drive straightforwardly to Sarawak Cultural Village; purchase twitch followers

    ReplyDelete
  16. Alex Volkov20 April 2023 at 19:01

    The modern guitar as we know it today was developed in Spain in the 16th century. https://www.ottawaguitarshow.com

    ReplyDelete

Subscribe to: Post Comments (Atom)