Node, RegEx & JS | Week #1

Hackathon Starter – A boilerplate for Node.js web applications.

This framework / skeleton project really got me thinking about developing actual websites in Node again. I originally starting learning Node with the intention of producing great web-based apps on a JavaScript code-base. But time went by and I really didn’t relish the fact that I’d have to migrate all of the login systems, structure, forms and account management details that I had created in other languages.

This boilerplate seems to offer just about everything I’d need to get a solid website framework in place. My original plan was to continue reading about the Express framework, but I’m now considering just installing the Hackathon Starter boilerplate and studying the code to see if I can “hack” my way into creating a basic Node.js website.

https://github.com/sahat/hackathon-starter

Avoiding anonymous JavaScript functions

Todd Motto argues that there is no good reason to use an anonymous function in JavaScript, and that might actually be a bad practice. I agree with almost every argument, except this one: They create messier / unclear code.

I would have qualified that with “They can” create messier / unclear code. Let’s take a simple jQuery event handler for example:

$('button').on('click', function() {
    this.hide();
});

It would be difficult to argue that a “named” function would make any kind of sense in this scenario. There isn’t any real need to create a reusable function simply to hide an element.

For the most part though, I do agree with Mr. Motto. The urge to create anonymous functions should be resisted in all but the simplest cases.

http://toddmotto.com/avoiding-anonymous-javascript-functions/

What I learned about RegEx this week

Non-capturing groups are really handy when you need to include words or phrases in your regular expression, but don’t want them as part of your result. Where you might normally use:

^([0-9]+)\s(dogs|cats)

In this case, you might only care about the number, but the second group will be including in your results, even though you only wanted to match against it.

To prevent this, just precede it with a ?:

^([0-9]+)\s(?:dogs|cats)

This will cause your group to go “un-captured” and not appear in the results.

The most ridiculously easy way to introduce a loading spinner to your site

I was creating a reporting tool for a client this week and some of the reports were taking upwards of 20 seconds to load. I thought a loading spinner might make sense, but didn’t really want to deal with flushing output and all that.

I used jQuery to capture the click event on any navigation item that loads a new report. Then simply displayed a CSS spinner at that point, before the click event bubbled up to the browser to load the page.

$('nav a').click(function() {
    // load your CSS spinner of choice
    $('section').html('<div class="spinner"></div>');

    // after this, the event will bubble up to the browser to load the page
});