Screen scraping with jQuery

A test case in my work requires a complete list of HTML elements and a list of self-closing elements (e.g. <br/>).

The W3C Index of HTML 4 Elements lists all defined elements in a table. For each row with an "E" in the Empty column, the corresponding element doesn't need a closing tag (and thus is self-closing).

With two lines of jQuery code in the Firebug console, I got the lists I wanted. Here is how:

To get all elements

$.map($('table tr:gt(0) a'), function(e) {return $.trim($(e).text());})

To get all self-closing elements (formatted for readability)

$.map(
  $('table tr:gt(0)').filter(function() {
    return $(this).find('td:nth-child(4)').text() == 'E';
  }), 
  function(e){return $.trim($(e).find('td:first-child').text());});

$.trim() is needed because the HTML source contains \n in the Name column.

This demonstrates a handy usage of jQuery as a hacking tool. Another excellent demonstration can be found here.

You can add jQuery to the current page using the jQuerify bookmarklet.

Happy jQuerifying!

Ruby code: Finding the closest point

We want to fetch an avatar of specific size. How to find the closest size from all available sizes? Suppose available sizes are 16, 48 and 96.

An obvious version is

  def closest_size(size)
    case
    when size < 32
      16
    when size < 72
      48
    else
      96
    end
  end

The value used in comparison tests is the average of two neighboring candidate sizes. The problem is that when our available sizes change, we need to add or remove when clauses and recalculate average values.

Here is a smarter way

def closest_size(size)
    points = [16, 48, 96]
    distances = points.map {|a| (size - a).abs}
    points[distances.index(distances.min)]
end

It finds the point with shortest distance to the given size. Now if we want to change candidate sizes, we only need to change the array literal. Further, we can even pass the candidate array as an argument.