Excellent online training in jsRender

Templates have been the “next big thing” in Javascript for over a year but, despite huge interest, they haven’t quite broken through to the mainstream. With their ability to radically simplify how we write Javascript I’m certain that they will revolutionize how we code in the same way that jQuery has. There are just too many talented people working on implementing them for them not to succeed. Better still, it looks like this will finally be the year they’ll take off.

As always there are many competing libraries but the only one I’ve found of interest is jsRender from Boris Moore. Small, robust, flexible and very fast, this powerful library has one disadvantage – the documentation is patchy and more of a chore than a pleasure to work through. Now, thanks to an excellent online course from Pluralsight, it’s possible to go from jsRender novice to almost expert in no time at all. Lasting just under 3 hours, jsRender Fundamentals by John Papa is an excellent introduction to the subject. Despite the “fundamentals” in the title there won’t be much that you won’t know how to do with jsRender by the end of this information and example packed course.

I watched the entire course in two sittings, taking time out between videos to work through some of the examples. I found the pace just right and with each video lasting just a few minutes it never bores or gets bogged down in unnecessary detail. This segmentation also makes it easier to skip the parts that don’t interest you (for me that was the section about using jsRender in Visual Studio, an environment I don’t use and am not likely to use in the foreseeable future).

If you’re a Javascript Templating novice and looking to get up-to-speed with jsRender I would strongly recommend you give this course a try.




Are you a Byword Master?

If you have used the Byword Markdown editor on the Mac you’ll already know that knowledge of the keyboard shortcuts is essential if you really want to get the full benefit of the clean, uncluttered interface, especially in full-screen mode.

As a complement to my recently created set of flashcards for Byword I have created a new Smarterer test. With 59 possible questions, offered in a rapid-fire multiple choice format, this test will allow you to really evaluate your skills in just a few minutes.

After successful completion of the test you’ll receive a badge indicating your skill level that you can add to your resume or website. You can see mine at the bottom of the right-hand sidebar… unfortunately WordPress (.com) doesn’t allow embedded Javascript so it doesn’t appear exactly as it should but it is still effective.





Finally, a Windows virtual desktop that just works

As I do a lot of development on my Macbook Air I’ve come to rely on Spaces, the virtual desktop built into OSX Lion. I like to have my browser, editor, and whatever else I need open full-screen in their own Space and quickly flip back and forward between them using the CTRL Arrow Keys combos. I’ve even been known to tolerate iTunes when it’s full-screen and hidden away in its own Space.

Having returned to working on Windows (7) after a long time away I became increasingly frustrated that there wasn’t an equal to Spaces. Even my dual 21-inch monitor setup feels cramped compared to my laptop. Fortunately there are a number of third-party virtual desktop apps available. Unfortunately most of them are either half-finished, no longer being developed or sacrifice utility for novelty effects.

I had almost given up hope of finding something that came close to the simplicity and productivity of Spaces when I stumbled across the (horribly named) Dexpot. Simply put, it’s free virtual desktop software for Windows that installs in a few minutes and just works. Apart from changing the hotkeys to be more like those on the Mac I didn’t bother with any configuration changes after install (though there are hundreds of options if that kind of thing interests you). Two minutes after install it was working exactly how I wanted it to and felt as if it had always been there. I don’t know why there is still no virtual windows manager built into Windows itself but, until there is, Dexpot is a great option.


Unrelated aside: This is my first blog post written in Byword, invoked via QuickCursor. Written by Jesse Grosjean, the developer of Write Room, QuickCursor is a small utility app that sits in your menu bar and allows you to start your preferred text editor by hotkey when you need to write e.g. in Gmail or, in this case, WordPress. Simply closing the document pastes the text from your editor back into the original text area. Yes, you could do the same using cut and paste but QuickCursor is a neater, more elegant solution and well worth a try.



jList: Performance improvements when removing duplicates

Version 1.2.0 of jList brings performance improvements to the two most recently added functions listRemoveDuplicates and listRemoveDuplicatesNoCase. These now run about 30% faster than before though you are unlikely to notice the gains unless you are working with very large lists (100,000+ elements) or running it many times consecutively.

I intend to post later this week about efficiently removing duplicates from Javascript arrays so I shall cover what changes I made in more detail as part of that post.


Flashcards for Byword Keyboard Shortcuts

Whenever I have to write a substantial amount of text — more than a few hundred words — then Markdown is my format of choice and Byword on Mac OSX my editor of choice. With its beautifully uncluttered, full-screen interface it makes writing both pleasurable and more productive.

But… if you really want to get the best out of Byword then a good knowledge of the keyboard shortcuts is essential. The last thing you want is to have to pause in full flow and take your hand off the keyboard to reach for the mouse or trackpad to indent a paragraph.

A new set of flashcards I have created and uploaded to Quizlet and Flashcard Exchange contains 60 of the most useful Byword shortcuts. As always, you can use them online or download them, free of charge, into your favourite flashcard app.


jList: Two new functions to dedupe lists in Javascript

Earlier today I released version 1.1.0 of the jList Javascript library. This release adds two new functions, bringing the total to 15.

The new functions are:

  • listRemoveDuplicates
  • listRemoveDuplicatesNoCase

As you might guess from the names these are intended to remove duplicate elements from lists.

A simple code snippet illustrates the difference between the two:

mylist = 'cat,dog,monkey,DOG,Dog,cat';

response = jList.listRemoveDuplicates(mylist);
console.log (response);

response = jList.listRemoveDuplicatesNoCase(mylist);
console.log (response);

In line 3 we perform case-sensitive matching when looking for duplicates. As a result, we don’t consider ‘dog’ to be the equivalent of ‘DOG’ or ‘Dog’ so the result displayed in line 4 will be ‘cat,dog,monkey,DOG,Dog’ – only the duplicate ‘cat’ has been removed.

In line 4 we perform case-insensitive matching when looking for duplicates. As a result, the output from line 7 will be ‘cat,dog,monkey’ as ‘dog’, ‘DOG’ and ‘dog’ are all considered equivalent in this case.

Notice also that in both functions the order of the list elements is unchanged. This illustrates that it’s the second and subsequent occurrences of an element that are considered to be the duplicates and removed, the first occurrence remains in its original place within the list.

The new version of jList, including updated documentation, is available for download from GitHub.


jList: ColdFusion-style list handling in Javascript

jList is a collection of functions that I wrote some time ago to bring ColdFusion-style list handling to Javascript. A list in this case is simply a string. What makes this string different (from any other string) is that it contains “delimiters”. Delimiters (sometimes referred to as “separators”) are used to separate each item in the list.

For instance, the string “carrots,peas,lettuce,tomato” could be described as a “comma delimited” or “comma separated” list. Although commas are the most common delimiter for lists, any character can be used – “Monkey:Rabbit:Mouse:Elephant” is no less a list than the comma delimited list.

Once you start to use jList you will quickly realise that there are many situations where treating a string as a list is a simpler and more intuitive way to manipulate data than the built-in alternatives offered by Javascript.

There are 13 functions included in the library. They are, in alphabetical order:

  • listAppend
    Concatenates an element to a list.
  • listDeleteAt
    Deletes an element from a list.
  • listFind
    Determines the index of the first list element in which a specified value occurs. The search is case-sensitive.
  • listFindNoCase
    Determines the index of the first list element in which a specified value occurs. The search is case-insensitive.
  • listFirst
    Gets the first element of a list.
  • listGetAt
    Gets a list element at a specified position.
  • listInsertAt
    Inserts an element into a list.
  • listLast
    Gets the last element of a list.
  • listLen
    Determines the number of elements in a list.
  • listPrepend
    Inserts an element at the beginning of a list.
  • listQualify
    Inserts a string at the beginning and end of list elements.
  • listRest
    Gets a list, without its first element.
  • listReverse
    Reverses the order of elements in a list.
  • listSetAt
    Replaces the contents of a list element.
  • listSort
    Sorts list elements according to a sort type and sort order.

Once the library is loaded then invoking the function you want is simply a matter of prefixing the function with “jList.”. The following example, which uses the listAppend and listSort functions, shows how:

<script src="jlist-min.js"></script>
    var l, l2;
    l = "Susan,Janet,Steve,Bree,Michele,Jim,Mark,Elizabeth";
    l = jList.listAppend(l, "David");
    l2 = jList.listSort(l);

This will show an alert with the text “Bree,David,Elizabeth,Janet,Jim,Mark,Michele,Steve,Susan”.

List processing is convenient for handling many strings that don’t at first appear to be lists. For example, the URL “http://www.mysite.net/main.htm?id=1234&#8221; can be considered to be a list or, more usefully, a series of lists. To extract the top-level domain (tld) part (in this case the “net”) we could think of the URL as a “dot delimited” list, within a “forward-slash delimited” list.
var url = "http://www.mysite.net/main.htm?id=1234";
var url_part = jList.listGetAt(url,3,"/"); // returns 'www.mysite.net'
var tld = jList.listLast(url_part,"."); // returns 'net'

In line 2 we grab the 3rd item in the list, using a delimiter of “/”. In this case this is “www.mysite.net” because the first item is “http:” and the second item is empty. This is an important difference between this library and ColdFusion list processing – empty elements are not ignored in these functions. Notice also that we start counting the items from 1, not from zero.
Once we have the third item stored in url_part (line 2) we can then treat this as a “dot delimited” list. Using the listLast function (line 3) to retrieve the rightmost item in the list but this time specifying “.” as the delimiter will return “net” into the tld variable.

For this 1.0.0 release I have cleaned up the code, added detailed documentation and made it public on GitHub.