Hacking at 0300

I haven't been blogging or programming a whole lot over the past year, since I started teaching two Tanach (Bible) classes. Even two hours a week, irregularly, represents a lot of work, and pretty much has sucked up all my intellectual free time. So not much Javascript. But I have been recording the notes (sort of condensed essays, 1000–2000 words) online so I could refer to them, and I've learned something about creating a website that is text, not data or doing-stuff, oriented. The site is kavanot.me; the classes are Shiurim and Parasha.

I don't expect any reader of this blog to understand the Hebrew or the details of Biblical exegesis, but these notes are more about design issues and resources that would be relevant to almost anyone.

I wanted to be able to wrap arbitrary text with HTML elements, so I added a wrap method to my bililiteRange routines. Now I can do something like bililiteRange(el).find(/foo/).wrap(document.createElement('strong')) and I have instant highlighting!

It obviously can only work if the range is defined on an actual HTML element, not on the text of a <input> or <text> element (it throws an error if you try).

For standards-based browsers, there is a simple surroundContents method that does it in one step. Note that it uses the actual node passed in, so if you need to reuse it, remember to clone it.

IE < 10 doesn't have anything so nice, so I have to hack it by extracting and re-inserting the HTML with htmltext and pasteHTML.

It is possible to attempt to create invalid HTML; for instance wrap a range containing a <p> with a <span> element. Depending on the browser, this may throw an error or create undefined results.