Wait for User to Stop Typing, Using JavaScript

Here’s the scenario. You have a search feature on your website that you want to live-update while the user types. The naive solution would be to execute a search query on every keystroke. This falls apart, however, because the user can usually type faster your server can respond. This makes for a poor user experience and an overloaded server. The solution to this is to execute the search only after the user stops typing.

CoffeeScript Is Just JavaScript

For those of you unfamiliar with CoffeeScript, it is a language that compiles to JavaScript. There are both benefits and downsides to using CoffeeScript, but I’m not going to talk about those since everyone else on the Internet already has. There is only one point that I want to mention – and it’s an important one so pay attention. It’s Just JavaScript Most people I talk to who haven’t yet taken the time to learn CoffeeScript treat it like it’s a completely new language.

Method Chaining in JavaScript

Method chaining is a common pattern in the JavaScript world. This tutorial will provide a brief explanation of what method chaining is, give a real world example of how jQuery uses method chaining, and teach you how to add method chaining to your own classes. Let’s get started. What is Method Chaining? Method chaining is a technique that can be used to simplify code in scenarios that involve calling multiple functions on the same object consecutively.

How JSONP Works

The Wikipedia Definition of JSONP is as follows: a communication technique used in JavaScript programs which run in Web browsers. It provides a method to request data from a server in a different domain, something prohibited by typical web browsers because of the same origin policy. The Problem That JSONP Fixes The typical AJAX request using the JQuery library looks like this: The problem comes when you try to change the URL to point to a different domain such as https://otherdomain.

Generating Random Colours

I’ve been playing around with <canvas> lately and have had a frequent need to generate random colours. I have written my own functions for doing this, which I now use all the time. The first function below generates a simple array of RGB values, while the second snippet generates a hexadecimal string. Generating RGB Values The snippet for generating RGB values is quite simple. We use the Math.random() function to generate a 3-element Array of whole numbers between 0 and 255.

Array.splice() Unexpected Behavior when Index is Undefined

Today I discovered something you should know about Array.splice() in Javascript. According to this page splice() has a first parameter of index which is supposed to be a number representing the index of the array you wish to splice at. Well, apparently when this index is undefined it acts as though you passed 0 instead. // Create a sample array var array = [ 'a', 'b', 'c' ]; console.log(array); // Remove 1 element from index undefined array.

JavaScript "for-in" Caveat With Arrays

Don’t use for (var i in myArray) ever! Apparently JavaScript for-in loops always convert the key to a String type. This has caused me troubles multiple times in the past and I would like to share my experiences with the world. var myArray = [ 'foo', 'bar' ]; for (var i in myArray) { if (i === 0) { console.log('First!'); } else { console.log('Not first :('); } } /** * Output: * * Not first :( * Not first :( * */ Confusing right?

The NULL Object Hack

Have you ever seen this? foo.bar; /** OUTPUT **/ // // TypeError: Cannot read property 'bar' of null Well, there is an easy solution: if (foo && foo.hasOwnProperty('bar')) { baz = foo.bar; } else { // Do something else } However, this is long and stupid, especially when working with large nested objects. Sometimes if error handling isn’t as important you can get away with this little one-liner.

Dynamically Pluralize Like(s)

I just wanted to share a snippet we use at ForkJoy for pluralizing the various “like” counters on the website. Every menu item has one of these counters and the text can read “no likes”, “1 like”, “2 likes”, etc. Originally we were using an if statement to do this until we realized it can be fit on one line instead. var str; // Prepend with "no" if 0 likes and add // an "s" if number of likes is not 1 str = (item.

ParseInt Fails on Small Numbers

A while ago I was trying to get the floor of a number using parseInt() in a Node.js app. The specific use case was expected to return 0, but a larger integer was returned instead. I opened up the node REPL to test out the behaviour of parseInt() and it turns out that when working with very small or very large numbers parseInt() breaks. Check out the sample below. // Define very small number var small = 5/1000000000; // 5e-9 // parseInt() with radix of 10 var parseIntResult = parseInt(small, 10); // Math.