Check out this crude example.

Once you open the monitor, leave that tab/window put. Use the “Spawn Tab” link to create new tabs and windows. The monitor will be notified and display some simple debug. There are 10 second updates per tab/window so that when they close the monitor can detect it. The monitor will detect a close within 15 seconds of the tab/window closing and will display the total time the tab/window plus or minus 10 seconds. Correct values are maintained as the tab/windows browse across pages as long as they stay on the domain! Just about everything you’d want or need.

Again, I mentioned this is rather crude. The fact that the monitor tab remains open is only due to the fact that I wanted to prototype the idea. The majority of the state is stored in localStorage, and each tab/window maintains a single identifier in its sessionStorage to remind the tab/window what id it was while it navigates to multiple pages. Because everything is stored in the storage this system has the capability to become completely distributed. Meaning no “monitor” tab is necessary, and the scripts can determine, and monitor, on their own the existence of all other tabs. Thus, this would be a viable option for the next level of web analytics.

As cool as this is, I don’t think it will provide too much value to the analytics. For the first time webmasters will be able to know how many windows or tabs a visitor opens (and to what pages they open). The webmaster will know more about how its user’s use the website, but I don’t think this statistic will be a game changer. Who knows!

So, how does it work? Very simple. Each tab includes the client.js code to handle updating the localStorage and maintaining its own “tab_id” in sessionStorage. Data it maintains can be whatever you want, I went with some simple information such as its start time, current url, and latest keepalive:

The upkeep for a Tab Client is to restore their session information when you navigate to any new page:

// Create or Restore tab_id
var myTabId = sessionStorage.tab;
if ( myTabId === undefined ) {
  var tabs = localStorage.tabs;
  if ( tabs === undefined ) {
    myTabId = 0;
    localStorage.tabs = "0";
  } else {
    var largest = parseInt( tabs.split(/,/).pop(), 10 );
    myTabId = largest+1;
    localStorage.tabs += "," + myTabId;
  }
  sessionStorage.tab = myTabId;
}

And to perform its keepalives:

// Update the Latest Timestamp
function setLatest() {
  var key = 'tab'+myTabId+'_latest';
  localStorage.setItem(key, +(new Date()));
}

// Update Status every 10 seconds
window.setInterval(setLatest,10000);
setLatest();

I put a few more convenience functions in there to help it update these localStorage keys, and communicate with the monitor which was crudely done through localStorage. That is explained next.

The Tab Monitor as it stands right now receives messages through localStorage’s “storage” event. It also checks all the tab’s “lastest” keepalives to make sure they didn’t pass their 10 second limit. In the case of a tab being closed, it will remove references to that tab and output an approximation of the time the tab was open:

// Listener - receive messages from tabs
window.addEventListener('storage', function(e) {
  if ( e.storageArea === localStorage ) {
    if ( e.key == "tab_msg" ) {
      console.log( e.newValue );
      addMsg( e.newValue ); // Appends to the page
    }
  }
});

// Purger - clean out tabs that died for 15 seconds
window.setInterval(function() {
  console.log("purging");
  var now = +(new Date()),
      tabs = localStorage.tabs;
  if ( tabs !== undefined ) {
    var toRemove = [], toKeep = [];
    tabs = tabs.split(/,/);
    for (var i=0, len=tabs.length; i<len; i++) {
      var tabId = tabs[i],
          tabLatest = parseInt( localStorage.getItem("tab"+tabId+"_latest") );
      ( (now-tabLatest)>=15000 ? toRemove : toKeep ).push(tabId);
    }
    localStorage.tabs = toKeep.join(',');
    for (var i=0, len=toRemove.length; i<len; i++) {
      var tabId = toRemove[i],
          tabLatest = parseInt( localStorage.getItem("tab"+tabId+"_latest") ),
          tabStart = parseInt( localStorage.getItem("tab"+tabId+"_start") ),
          time = (tabLatest-tabStart)/1000;
      addMsg( "Tab " + tabId + " Closed after " + time + " seconds!" );
    }
  }
}, 5000);

This took a little under an hour to get working. There are still minor issues that I didn’t attempt to resolve. However, if there is interest this could be developed into a completely distributed peer-to-peer communication between tabs/windows on a single domain. However, a little warning. Web Storage is not set in stone. Not all browsers have implemented it and the specification is subject to change at any minute. There has been some rather heated debate on the subject of Web Storage recently, with good reason. All I know is that when its settled, this functionality will continue to exist!

Let me know what you think.

I found an interesting website today that had an interesting idea. You could run some test code on the page to test their library. Their instructions said, “push tab to evaluate the code.” Sure enough you could tell it was working “onblur” for the textarea. The problem with this was that when you pushed tab you lost focus.

I thought about it, and figured you could do a rather simple trick to run some code and refocus on the textarea. It goes a little like this:

window.addEventListener('load', function() {
  var textarea = document.getElementById('txt');
  textarea.addEventListener('keydown', function(e) {
    if (e.keyCode === 9) {
      e.preventDefault();
      e.stopPropagation();
      // operation goes here
    }
  });
});

Note that to get the actual character you have to get the character from the event. There are many ways to do it, keyCode, charCode, which, even keyIdentifier. You’ll have to mix things up to work across all browsers. Basically 9 is the code for the tab key. So when you get the tab key, it prevents the default behavior and allows you to execute whatever code you want: run some functions, eval some code, display something, ajax request, whatever you want. Simple. I think it would improve a few interfaces. Neat idea to make use of the tab key to perform a function.

You can check out this example of what I mean.

It didn’t take me long to realize that I could turn this into a framework where I could turn any Markdown file into a tutorial exactly like this one. So with surprisingly little work I modified the scripts to work with any markdown file and the html automatically generated from the standard Markdown.pl script.

I called this markdownorial. Laugh all you want at the name, but I still think the concept is very cool. I’ll probably be using this more and more to automatically generate and format a pretty cool looking tutorial from a single markdown file. The start to finish time for a project like this has instantly dropped to just the raw content part, no design or coding needed!

Advantages include:

• Writing Markdown is very fast and efficient.

• Time is spent writing the content. Not messing with design,

• Table of Contents is automatically built for you.

• Useful permalinks are automatically generated. Very useful when passing around links.

• Clean user interface that focuses entirely on the content but the Table of Contents is always available!

• Git Repository means if I update the design its just a `git pull` away to get the update.

Right now the tutorials shows up elegantly in all standards compliant browsers. Safari/Webkit and Chrome display it perfectly. Opera has some very minor Unicode issues but displays everything perfectly. Firefox has some separate Unicode issues and if you don’t have the latest version it has some working but slow animation. Overall, its entirely usable for people using decent browsers.

Let me know what you think. Feel free to use it and improve it. Its all up on Github.

One of the things I really liked in ##javascript was the freenode jsbot that could do all sorts of things. It was so useful in fact that I felt I had to have it for when I’m not using IRC. The website mentioned an API, so I dug in.

I wrote a command line jsbot script and added it to my ~/bin:

A clip of the source code (yes its horrible… but its so compact!) shows how easy it is to work with JSON in Ruby. Just a few includes and its just as easy as Javascript, without the cross-site request issues:

#!/usr/bin/env ruby
# Author: Joseph Pecoraro
# Date: Friday March 6, 2009
# Description: Simple Interface for the
# really neat jsbot!

require 'rubygems'
require 'open-uri'
require 'json'
require 'cgi'
require File.dirname(__FILE__) + '/escape'

class JSBot

  JSON_PREFIX = 'http://fn-js.info/jsbot.xhr?'
  SITE_PREFIX = 'http://js.isite.net.au/jsbot?'

  def search(str)
    uri = url(str, JSON_PREFIX, "search=")
    JSON.parse( open( uri ).read )
  end

  def show(str)
    uri = url(str, JSON_PREFIX, "show=")
    JSON.parse( open( uri ).read )
  end

  def url(str, u=SITE_PREFIX, q='q=')
    u + q + CGI::escape(str)
  end

end

...

Grab it here:

//
// ==UserScript==
// @name          Back and Forth
// @namespace     http://blog.bogojoker.com
// @description   Keyboard Shortcut to Jump back and forth on a page. (esc key).
// @include       *
// @version       1.0 - Initial Version - Sunday February 15, 2009
// ==/UserScript==

(function() {

  // Global States
  var x = null;
  var y = null;

  // Add a new Global Key Listener for `esc`
  document.addEventListener("keypress", function(e) {
    if(!e) e=window.event;
    var key = e.keyCode ? e.keyCode : e.which;
    if ( key == 27 ) {
      var tempx = x;
      var tempy = y;
      x = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
      y = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
      if ( tempx != null ) { // First time it should be null
        window.scrollTo(tempx, tempy);
      }
    }
  }, true);

})();

On any webpage the first time you push the `esc` key position A gets stored. The next time you push `esc` position B gets stored and the browser jumps to position A. The next time you push it, A gets stored and you jump to B. So you always jump back to wherever you pushed `esc` last. Hence the name “back and forth.”

This is useful to me when I jump between comments and the content. When I’m reading a comment and I want to check back to the article, I just just push `esc` to save my position, go back to the article, and when I’m all set I just jump back to my saved position (the comments) with `esc`.

Short, Sweet, Simple: The Back and Forth Greasemonkey Script.

Like before, the problem I had was that users were mentioning pictures in their comments. Jumping back to that picture was hard or annoying. So, I wrote a Greasemonkey script that allows you to type in a number and it will automatically jump to that picture! Click here to get the script!

Oh, and if you’re reading comments and you want to jump back and forth between images and comments that works too. Once you’ve jumped to the image, just hit ‘esc’ and you will be taken back to where you were before. Too cool!

//
// ==UserScript==
// @name          The Big Picture Keyboard Enhancements
// @namespace     http://blog.bogojoker.com
// @description   Keyboard Shortcut Enhancements
// @include       http://www.boston.com/bigpicture/*
// @version       1.1 - Added Back+Forth - Thursday February 12, 2009
//                1.0 - Initial Version - Monday February 9, 2009
//
//
//   This allows the user to type in numbers, and after about
//   a half second it will jump directly to that image.
//   For example:
//
//     Push '1'... '2'... User is taken directly to Image "12"
//     Push '9'... '9'... User is taken to the last picture.
//
//   Use 'esc' to jump back and forth between two positions.
//   For example if a comment mentions picture 4:
//
//     Push '4'...        User is taken directory to Image "4"
//     Push 'esc'         User is taken back to the comment!
//     Push 'esc'         User is taken back to Image "4"
//
// ==/UserScript==

(function() {

  // GreaseMonkey (Firefox - unsafeWindow) and GreaseKit (Safari - window)
  var w = ( /a/[-1]=='a') ? unsafeWindow : window;

  // Global States
  var x, y;
  var keypressnumber  = false;
  var builtupnumber   = '';
  var quicknumtimeout = null;
  var imgArr = document.getElementsByClassName("bpImage");

  // Keep the old and create a New Global Keypress listener on top of it
  document.addEventListener("keypress", function(e) {

    // Get the key
    if(!e) e=window.event;
    var key = e.keyCode ? e.keyCode : e.which;

    // Store the current x/y position
    function storePos() {
      x = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
      y = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
    }

    // # Character => Jump to that image, Store Position
    if ( key >= 48 && key <= 57 ) {
      if ( e.target.nodeName.match(/TEXTAREA|INPUT/) ) return;
      clearTimeout(quicknumtimeout);
      keypressnumber = true;
      builtupnumber += (key - 0x30);
      quicknumtimeout = setTimeout(function() {
        w['currImg'] = parseInt(builtupnumber,10)-1;
        if (w['currImg'] >= imgArr.length) { w['currImg'] = imgArr.length-1; }
        storePos();
        window.scrollTo(0,imgArr[ w['currImg'] ].offsetTop+174);
        keypressnumber = false;
        builtupnumber = '';
        quicknumtimeout = null;
      }, 300);
    }

    // Esc => Jump back to a Saved Position
    if ( key == 27 ) {
      var tempx = x; var tempy = y; storePos();
      window.scrollTo(tempx, tempy);
    }   

  }, true);

})();

All I do is register a new global keyboard listener to catch numeric keys and act accordingly. I tested thoroughly on Firefox and Safari to make sure it works correctly in all cases. It jumps to the correct image, it maintains the “current image” so j/k will still work, it won’t jump if you’re typing in a textfield/input, etc. It even properly handles situations that the current j/k functionality doesn’t. For instance mine allows the user to type in the comment box, click outside the box and reuse the keyboard shortcuts. When you type a j/k or even click inside the search box at the top the j/k functionality is gone. I didn’t feel like correcting that in this Greasemonkey script in case it gets fixed by the developers behind the Big Picture. (Note to those developers: reset isLoaded back to true or take a different approach.)

I’m open to New Ideas. I have some myself but I have to focus on schoolwork in these next few weeks. Let me know if you want anything.

Big Picture Keyboard Commands Greasemonkey Script!

Enjoy.

This sidebar has some neat animation so it was fun to put into the page. It is a modified version of the jQuery pageSlide plugin. To my pleasant surprise the plugin already had the capability to run callback functions before and after the transition is run. I added a property allowing for static html so I wouldn’t need to depend on an Ajax call. Also, the default behavior of the plugin is that clicking anywhere on the document, except in the sidebar, will cause the page to slide back to normal. This is okay except that I wanted a button for usability purposes to close the sidebar and also links in the sidebar (normal anchor tags) to work. That took a little creativity but I eventually got it:

      // Make it so if the user clicks in the pageslide, it won't close
      // Exception for given closers that may be in the pageslide
      $("#pageslide-slide-wrap").click(function(e){
        if ( $('a, ' + settings.closers).index( $(e.target) ) == -1 ) {
          return false;
        }
      });

Protecting the Innocent

I also wanted to play around with some jQuery lightboxes. The one that always comes to mind is facebox. For once I didn’t have to make any major changes to the source of this plugin, instead I made a few small tweaks to the CSS.

My goal here was to provide IE6 users with a simple little “Please Upgrade Your Browser” message. I went to work, learned a lot, and came up with the following: (to view this yourself go to ~/bin and paste “javascript:if_i_were_ie6()” in your URL bar, without the quotes!):

Sure that looked great, and it had a nice message, but it ended up looking disgraceful in IE6 itself! Rather then scrap the work I left it there, to prove the point to whatever few IE6 visitors I get. The facebox works perfectly in IE8 (I haven’t tried IE7) and so I can make use of what I’ve learned elsewhere I just hope that IE6 will go away soon. I said my goodbye already.

I took some time to become more fluent in jQuery, and add some enhancements by modifying the plugin. One of those enhancements was looping, and is the topic of this article. I had no prior experience working with these types of galleries and implementing looping seemed like a fun idea. So here was the result of my tinkering:

How Do You Implement Looping?

Give yourself a minute to get creative. Develop some ideas and strategies on how you would take the following markup for the slides, and make it loop.

<div id="slider">
  <ul>
    <li>content here...</li>
    <li>content here...</li>
    <li>content here...</li>
  </ul>
</div>

I came up with two strategies that use a similar technique to implement the loops. The above loop is an implementation of one of these strategies, but I wanted to compare and contrast my two versions here, and hopefully get some reader feedback on different techniques!

Hidden Moves Strategy

This strategy actually involves physically moving unseen slides around in the DOM. By moving the slides in such a way that there is always the proper “next slide” and looping can continue forever in either direction without errors.

Instantaneous Jumps between Clones Strategy

This strategy actually involves cloning the first slide and adding it to the end of the list. This now makes the first and last slides exactly the same. When we need to handling transitions to and from these slides we can instantly jump between them, and the user is none the wiser.

Comparing the Pros and Cons of Each

Hidden Moves:

• Requires no extra space (in theory).

• Simple to implement moves. 1 line executed as a callback on “next” and before the transition if “prev”

• Expensive. Requires moving slides on every transition. This is actual DOM manipulation. Sure in nearly all cases this is negligible but it could be a pain for large, complex slides.

• Wouldn’t work on looping a single slide. Kinda useless though right?

• Does it work? By taking a slide off of the front won’t everything shift? Yes, this could get tricky, I honestly haven’t tried it.

Instant Jumps:

• Requires extra space to duplicate the first slide.

• Simple to clone a slide. 1 line of jQuery.

• 1 time cost to clone, never again is there a DOM Manipulation cost.

• Has the ability to loop on a single slide.

• Tricky code to handle when to jump. Nothing difficult, just messy.

• Does it work? Yes, Its what I’m using above..

Thats it for my analysis. Do you have any suggestions?

Well the suggestion was declined. I can’t blame the team. Nobody upvoted the suggestion. But I felt strongly enough about it, and knew that it was very simple to implement that I whipped up a GreaseMonkey script to do it myself. The script runs like a charm and even adds a few extra suggestions to the original three. It handles formatting and commas all automatically, so don’t worry about a thing, just click. Enjoy!

Script to Add Edit Summary Quicklinks

Script to Prevent Blank Edit Summaries

UPDATE: Fixed to use keng’s URL and added just plain old stackoverflow.com without the beta sub-domain in preparation for a launch. Thanks keng!

DOUBLE UPDATE: Sam put out a “wanted ad” for a Greasemonkey script to prevent blank edit summaries. I whipped that script up and linked to it up above. Thanks Sam! Quick Demo

// Array of Objects
var obj_arr = [ { age: 21, name: "Larry" },
                { age: 34, name: "Curly" },
                { age: 10, name: "Moe" } ];

// This doesn't work!
obj_arr.sort( function(a,b) { return a.name < b.name; });

// This does work! (Peter's update, very fast)
obj_arr1.sort(function(a,b) { return a.name < b.name ? -1 :
                                     a.name > b.name ?  1 : 0; });

That kind of frustrated me. Sorting is one of those things I expect to be available in all languages. I don’t want to have to write a sorting algorithm every time I need to sort. So I looked into things, pulled up a Javascript Quicksort Algorithm and manipulated it to support any compare function.

Now that I have the freedom to truly write a compare function that works for objects! I also changed around certain parts of the code I found online to actually extend the Array class and make the extra functions hidden. Take a look at the sample usage:

// Defaults to (a<=b) sorting.  Great for numbers.
var arr = [1234, 2346, 21234, 3456, 32134, 3456, 1234, 2345, 23, 42523, 1234, 345];

// Object Array
var obj_arr = [ { age: 21, name: "Larry" },
                { age: 34, name: "Curly" },
                { age: 10, name: "Moe" } ];

arr.quick_sort();
// => [23, 345, 1234, 1234, 1234, 2345, 2346, 3456, 3456, 21234, 32134, 42523]

obj_arr.quick_sort(function(a,b) { return a.name < b.name });
// => Curly, Larry, Moe

obj_arr.quick_sort(function(a,b) { return a.age < b.age });
// => Moe (10), Larry (21), Curly (34)

For those who want to see the code be glad, its free. I carried the copyright with it but its rather loose. Grab the JavaScript Source Here! Enjoy:

Array.prototype.swap=function(a, b) {
  var tmp=this[a];
  this[a]=this[b];
  this[b]=tmp;
}

Array.prototype.quick_sort = function(compareFunction) {

  function partition(array, compareFunction, begin, end, pivot) {
    var piv = array[pivot];
    array.swap(pivot, end-1);
    var store = begin;
    for (var ix = begin; ix < end-1; ++ix) {
      if ( compareFunction(array[ix], piv) ) {
        array.swap(store, ix);
        ++store;
      }
    }
    array.swap(end-1, store);
    return store;
  }

  function qsort(array, compareFunction, begin, end) {
    if ( end-1 > begin ) {
      var pivot = begin + Math.floor(Math.random() * (end-begin));
      pivot = partition(array, compareFunction, begin, end, pivot);
      qsort(array, compareFunction, begin, pivot);
      qsort(array, compareFunction, pivot+1, end);
    }
  }

  if ( compareFunction == null ) {
    compareFunction = function(a,b) { return a<=b; };
  }
  qsort(this, compareFunction, 0, this.length);

}

Update

Peter Michaux pointed out something very important. The sort() function can be made to work if it returns numeric output (-1,0,1). His approach is far superior. Here was a benchmark I took:

var obj_arr1 = [];
var obj_arr2 = [];
var filler = [ { age: 21, name: "Larry" },
               { age: 34, name: "Curly" },
               { age: 10, name: "Moe" } ];
for (var i=0; i<5000; i++) {
  rand = Math.floor( Math.random() * 3 );
  obj_arr1.push( filler[rand] );
  obj_arr2.push( filler[rand] );
}

var s = new Date();
obj_arr1.sort(function(a,b) { return a.name < b.name ? -1 : a.name > b.name ? 1 : 0; });
var e = new Date();
console.log(e.getTime()-s.getTime()); // => 75 ms

s = new Date();
obj_arr2.quick_sort(function(a,b) { return a.name < b.name });
e = new Date();
console.log(e.getTime()-s.getTime()); //  => 4444 ms

That shows drastic differences for arrays as large as 5000 elements (with not too random data). 75 ms versus 4444 ms (over 4 seconds). Doing the math: (4444/75) => 59.253 times better! Moral of the story, don’t rush into thinking something doesn’t exist!

So if that’s the way to do it, then I want to make it easier on me. My arrays are generally going to be under 100 in size, and at such a size building a function dynamically instead of writing a custom function works just about as well (although if you were using objects, polymorphism and a compare function would be the best way to go). Here is a simple function I can use to more quickly build compare functions in order to ascend sort an array on multiple properties!

function buildCompareFunction(arr) {
  if (arr && arr.length > 0) {
    return function(a,b) {
      var asub, bsub, prop;
      for (var i=0; i<arr.length; i++) {
        prop = arr[i];
        asub = a[prop];
        bsub = b[prop];
        if ( asub < bsub )
          return -1;
        if ( asub > bsub )
          return 1;
      }
      return 0;
    }
  } else {
    return function(a,b) { return a<=b; };
  }
}

Sample usage would be:

var obj_arr = [
  { name: 'Joe',   age: 20 },
  { name: 'Joe',   age: 10 },
  { name: 'Joe',   age: 30 },
  { name: 'Joe',   age: 40 },
  { name: 'Joe',   age: 20 },
  { name: 'Joe',   age: 15 },
  { name: 'Joe',   age: 35 },
  { name: 'Joe',   age: 25 },
  { name: 'Bill',  age: 5 },
  { name: 'Barry', age: 20 },
  { name: 'Paul',  age: 20 },
  { name: 'Peter', age: 1 },
  { name: 'Smith', age: 25 },
  { name: 'Kary',  age: 30 }
];

obj_arr.sort( buildCompareFunction(['name','age']) );