Smoky Cogs

Much to my shame, I first came across a feature of web-browsers that had been developed way back in 2001 – the bookmarklet.

What a bookmarklet is, is a regular browser bookmark that has a piece of javascript for its address instead of the usual url, by using the javascript: prefix instead of the usual http: or http:. I had known for a long time that the address bar of most browsers support this, but did not even think that this functionality extended to bookmarks.

What this means though, is that you are able to insert almost any imaginable script into a bookmark.

Here is an example, which I found on the Wikipedia page on bookmarklets, which opens up the relevant Wikipedia article based on the selected text within your current document, which can be a great timesaver.

javascript:function se(d) {return d.selection ? d.selection.createRange().text : d.getSelection()} s = se(document); for (i=0; i<frames.length && !s; i++) s = se(frames[i].document); if (!s || s=='') s = prompt('Enter%20search%20terms%20for%20Wikipedia',''); open('http://en.wikipedia.org' + (s ? '/w/index.php?title=Special:Search&search=' + encodeURIComponent(s) : '')).focus();

One of the most frustrating things about JavaScript is being able to determine what events are being fired for a particular element, especially in a complex web application where a single element might have several different functions attached to a particular event.

Well, jQuery comes to the rescue.

jQuery has a very useful, and rather unknown, method to return all the events attached to an element, which is particularly useful when used in the web browser’s console while debugging a web page.

All this needs is one single line of code, and hey presto!

$(element).data('events');

In days gone by, if you wanted to imitate a book on a website, being able to browse content by flipping pages, you needed some Flash or some other extension to handle it.

Now, turn.js comes to the rescue.

With just a few lines of code and this open-source jQuery plugin, you can add a fully animated book feel to your site.

The only requirement to get it to work is an HTML5 compliant browser and let turn.js do the rest.

To focus on an element using jQuery is really easy, since all it takes is one function – .focus(). There are cases though were it is just a little bit trickier.

Let’s take the scenario where after entering a field, you need to validate it, and if the validation fails, you need to return focus to the field. You would expect the following code to do the job:

$(elem).blur(function(){
   if (do some validation fails) {
      $(this).focus();
   }
});

This code, logically, should work, and indeed it does in Internet Explorer, but Firefox stubbornly refuses to set the focus.

The problem is that the event is firing at the wrong time for Firefox, and therefore the focus event is being lost.

The solution for this is to delay the focusing by a small bit, which then yields a solution that works in all browsers

$(elem).blur(function(){
   if (do some validation fails) {
      var $this = $(this);
      setTimeout(function () { $this.focus(); }, 10);
   }
});

At long last, my little pet project is alive on the web. The Night Sky Notebook is a website which implements a whole range of astronomical calculations, much like Urania, my desktop version, but fully implemented in Javascript.

When I first had the idea of putting up astronomical calculations on the internet, it was simply going to be a convertion to JavaScript from the C# code that I have written about extensively on this blog. Afterwards, however, I decided to rewrite the entire library from scratch to improve the quality of the code, as well as the accuracy of the calculations, basing the new code largely on the algorithms specified in the book Astronomical Algorithms by Jan Meeus.

In addition to the pages containing pure calculations, the site also has a number of pages making use of HTML5 canvas features to render animations for things such as the Moon phase, planetary positions and Jupiter’s moons. This means, of course, that the site works best on newer browsers that support HTML5, such as Internet Explorer 9+, Firefox 5+ and Chrome.

The source code for the library is open-source and is released under the MIT license, and is available for download from here.

I hope that you have as much fun using the new site and astronomical library as I have had in writing it.

It has been a really long time since I have last put up a blog post.

With a combination of the summer holiday, and then on to various pet projects that have been keeping me busy since then, I have had little time to blog.

One of the more interesting projects I am working on at the moment, is creating a web-based version of my Urania astronomical library, which is a complete rewrite of the C# codebase into Javascript.

It is still a while away from completion, but it is looking very promising indeed.

I will keep you posted as to my progress….

With AJAX being the norm for websites these days, and JavaScript taking on more a more central role in building up web content, you are more than likely going to find yourself having to build up strings containing html to display in a webpage using JavaScript.

This does come at a price though. String concatenations can be rather slow, especially if there is a lot of data that needs to get processed, such as a large table. Unsurprisingly, this is most noticeable in Internet Explorer.

A colleague of mine came up with an alternative way of creating the new html string, using an array to build it up instead of a string.

So using the traditional method you would write:

var htmlStr = '<table>';
for(i = 0; i < data.count; i++){
  htmlStr += '<tr><td>' + data[i] + '</td></tr>';
}
htmlStr += '</table>';
document.getElementById(elemId).innerHTML = htmlStr;

Using an array though, this can be rewritten as

var htmlArray = [];
htmlArray.push('<table>');
for(i = 0; i < data.count; i++){
  htmlArray.push('<tr><td>');
  htmlArray.push(data[i]);
  htmlArray.push('</td></tr>');
}
htmlArray.push('</table>');
document.getElementById(elemId).innerHTML = htmlArray.join('');

In some tests, my colleague found that speed improvements of up to 80x-400x were shown using the array method, varying on the complexity of the concatenations. The biggest improvements were shown in Internet Explorer, with less gains measured in Firefox and Chrome, although quick results were measured in each one.