Jenny's Jottings

Here are a few of the JavaScript and jQuery methods which I find useful when debugging my projects.

• JSON.stringify() can be used to inspect objects
• To inspect the value of element attributes like class or id, use .attr() e.g. $('#myelementid').attr('class')
• For an element with multiple classes, you can check if it has a particular class using .hasClass()
• $(selector).length gives the count of the matched elements

… and things to check if code isn’t working as expected

• If jQuery code is unexpectedly failing to have any effect on an element in the document, go back to basics and make sure you have put the call to the code in the document‘s ready event so that it is not called until all the elements are present:
  $(document).ready(function(){
// code
});

Most of the documents displayed on my genealogy website conform to one of a limited number of formats and I’ve created an HTML template for each format required. However, I also have some free-form text documents which I wanted to display with as much of the original formatting intact as possible. I couldn’t use HTML tags for the formatting, though, because I can’t store HTML formatting in the DB behind my site: the interface flags the input as potentially dangerous code. The solution has been to store the data in a plain-text format that my application can then convert to HTML.

In the past I’ve worked with Redcloth and Bluecloth, which are Ruby implementations of Textile and Markdown respectively, in RoR sites. Markdown in its original incarnation is a Perl software tool that converts plain text marked up using its custom syntax into HTML. Textile does a similar sort of thing, but was originally implemented in PHP. Both have implementations in C#, so I based my decision on which one to use on the ease of use. Although Textile has some tags that would be useful that Markdown lacks (strikethrough, for example), Markdown uses a syntax which I find more attractive in its unconverted state ([link_text](link_address "title") in Markdown, as opposed to "(classname)link text(title tooltip)":link_address in Textile)

Markdown is used on the Stack Overflow site, and they have open-sourced their C# implementation as MarkdownSharp. Marked-up text can be converted to HTML using

var markdown = new Markdown();
var convertedText = m.Transform(inputText);

Also useful for my purposes is the JavaScript port of Markdown by John Fraser, Showdown. The download link on this site is currently broken, but there’s a version on GitHub here. A couple of lines of script, and I can get a rough idea of what my converted content will look like before saving the marked-up text:

        function preview() {
            var converter = new Showdown.converter();
            $("#preview").html(converter.makeHtml($("#text").text()));
        }

So now I can display my great-great-grandfather’s letter with close to original formatting as well as the original rather quirky spelling…

Reference

Daring Fireball Markdown: basics
Stack Overflow Markdown Reference

I was recently asked whether it would be ‘better/quicker’ to replace
$('ul').children('li').children('a')
with
$('ul li a')

My initial response was to warn that these two lines of code don’t actually do the same thing. As explained in the jQuery API reference for the descendant selector, the suggested replacement would (for example) pick up li elements that were descendants of ul elements – and ‘descendants’ can include grandchildren and so on, not just children.

In this case, the structure of the page meant that this wasn’t an issue. I was surprised, though, to find an article posted earlier this year by Rob Tarr showing that in fact the existing code could be quicker than the suggested replacement. The article, jQuery Selector Performance Testing, shows the results of performance tests of chaining find method calls, chaining children method calls, and chaining selectors. In the tests, chaining the method calls was significantly faster than chaining the selectors.

So in this case the existing code was probably the ‘better/quicker’ option after all.