Web Developer located in Redmond, WA

Tag Archives: JavaScript

I recently came across a fun little challenge online called “You Can’t JavaScript Under Pressure.” The goal is to implement five functions as quickly as you can. The function names and requirements are provided for you by the game itself. Here’s a quick walk through I did to show one possible set of implementations.

From time to time I need to throw together a small script to do something relatively simple. Today I had to write something that would animate a series of dots. You’ve seen it, those little lines of dots that grow and shrink to give indication that something, somewhere is happening.

It’s a relatively straight forward script, so I’ll just drop it in here with comments:

It’s worth noting that you could probably whip up something similar with CSS alone using pseudo-elements, animation, @keyframes, and content, or even animating a sprite’s location on a background. Of course browser support would be far more limited.

I have recently started offering a free web-development course both in person and online. The title of this meetup is “Home-Brew Web Development” and it takes place every Thursday evening at 7:30pm Easter Standard Time (unless otherwise stated). Each meetup is streamed live online at http://learn.sampson.ms, and archived on YouTube immediately afterwards.

We will start by learning HTML, followed by CSS. Eventually we will get into more advanced topics but I plan to keep it simple for now. This course is intended for those who have zero (or very little) experience in web-development, but are interested in it as a hobby, or a career-opportunity.

If you would like to receive regular updates regarding this course, future meetings, and more, you may subscribe to the newsletter via the link below. If at anytime you wish to stop receiving emails and stop attending the meetup, you’re totally free to go – it’s your call

Every now and then I come across questions on StackOverflow that require me to do a bit of thought-work. This particular question was asking to to take an array, such as [‘a’,’b’,’c’,’d’,’e’], and flip it inside out, so that it becomes [‘c’,’d’,’b’,’e’,’a’]. I’m not a particularly mathematical person, so when I discover a difficult to discern pattern, I get excited – such was the case with the code below.

Upon reading a recent blog entry by Brendan Eich (creator of the JavaScript language), I found myself falling under a bit of conviction when he described a popular use of || (OR) and && (AND) as an “abusage”.

I also agree…that the && line (!isActive && $parent.toggleClass(‘open’)) is an abusage, allowed due to JS’s C heritage by way of Java, but frowned upon by most JS hackers; and that an if statement would be much better style.

Now this word hardly requires defining for most of us, but for everybody else it is described on Wictionary as improper or incorrect use of language.

If you’re not familiar with using || and && in the aforementioned manner, here’s the reasoning behind it. It acts as something of a short-cut if-statement. In fact, as Brendan said “an if statement would be much better style.” Let’s compare the two:

!isActive && $parent.toggleClass( 'open' )

In this line, if everything to the left of the operator evaluates to true, the “argument” to the right is also evaluated. Of course this behavior is being tricked into actually executing a method if the argument to the left, treated as a condition all by itself, evaluates to true. As an if statement it would look like this:

if ( !isActive ) $parent.toggleClass( 'open' )

This makes sense to the majority of developers. It actually reads the way in which we expect it to behave.

Similar to the if statement, if our “condition” (in this case, everything to the left of &&) evaluates to false, only then will the statement on the right be evaluated, invoking the toggleClass method.

The && and || operators perform what is known as short-circuit evalutation. The second argument is only evaluated if the first wasn’t sufficient to determine the value of the expression. Contrary to &&, || will only evaluate the argument to the right if the argument on the left evaluates to false.

I really only learned about this trick of the JavaScript language in the last year or so. I have been using && and || in expressions for years, but never thought to bring them outside the parens.

Lately I have been using these within things like feature-detection:

!!foo.classList || loadScript( 'classListPolyfill.js' );

Using double-negation (!!), we can convert an undefined value into a boolean false. So if the classList member is not found, the argument on the left evaluates to false, which in turn causes the “argument” on the right to be executed. We hi-jack this behavior to load a polyfill script for the classList member. You could modify this to use && instead, and save a char, however “OR” sounds more appropriate.

Bottom line, if Brendan Eich is right (and I suspect he of all people would be), it’s far wiser to just stick within the design and intended use of the language:

if ( !foo.classList ) {
loadScript( 'classListPolyfill.js' );
}

There goes another super-cool esoteric trick of the masters. Guess I’ll find my seat on the bench and wait to be picked for dodge-ball.

It’s difficult to say, as much as I love jQuery I must admit that it is at times the wrong route to take when addressing a problem.

While looking over a few questions on StackOverflow today I came across a poster who was seeking to modify the width of all nested elements within a container – he naturally thought jQuery would be a good, simple solution – and it is. But while it may be simple, it’s wrong in this case.

Rather than coming right out and answering with something like:

$("#container").find("*").width("100%");

I instead took just a moment to whip up a test case on http://jsperf.com (great site for testing the performance advantages of one method over others.) Just as I had suspected, jQuery would be slower than raw JavaScript – much, much slower.

This simple block does the same thing as the aforementioned jQuery code, but it’s much faster. In fact, in the time it takes the jQuery code to perform 20k operations, the raw JavaScript code performs nearly 300k!