AngularJS best practices: Be careful when using ng-repeat’s $index

November 10, 2014 – 12:54 pm Tags: ,

“A customer reported they deleted an item and the wrong item got deleted!”

Sounds like a pretty serious bug. This is what we got one time at work. Attempting to locate it was quite difficult, because naturally the customer had no idea what they did to reproduce the issue.

Turns out the bug was caused by using $index in an ng-repeat. Let’s take a look at how this happens, and a super simple way to avoid this type of bug entirely, and also a few lessons we can learn from this.

Read the rest of this entry »

What do the top 1% of software engineers do that the other 99% do not?

October 20, 2014 – 3:12 pm

This interesting question was recently posed on Quora: What do the top engineers do, that the rest do not? And how do you get the habits to become one?

Anyone can tell you something like “oh you should use source control!”, or “you should comment your code!” or other obvious things like that.

But there is a limit to how much code and how good code you can crank out daily, so how do you actually become better?

Read the rest of this entry »

Using techniques from statically typed languages in JavaScript

September 2, 2014 – 8:48 pm

I wrote an article discussing some techniques from statically typed languages. Head over to SitePoint to check it out!

Here’s what you can expect:

  • JavaScript type system, and how it tries to bite you
  • Expanding more about the rule of consistent types with more details on using it to reduce bugs
  • Dealing with type-checking and type-conversion in a way that doesn’t result in spaghetti and extra checks all over the code

Head over to SitePoint to read the article

In order to become a better developer, you must first become a teacher

August 18, 2014 – 1:20 pm

The headline might sound pretentious, but what is the most important skill for a developer besides actually writing code? Communication.

What do you typically do when you communicate as a developer with someone else?

You explain problems, you describe solutions, you talk to non-programmers about what you’re doing. You could also say that you’re teaching others about what you’re doing. Heck, when you’re writing code, you need to comment it and that is also a form of teaching – teaching someone what your thought process was when writing this code.

Being a good communicator is often completely overlooked. Sure, you might see a job placement ad wants someone who has “good communication skills”, but what does that even mean?

Let’s take a step back and think about why it’s really important for a developer to be a good communicator, and then we can come back to how you can become a better developer by teaching – but don’t worry, this process will only require a small amount of effort, although if you enjoy it, you can absolutely spend more time on it too, and reap bigger rewards!

Read the rest of this entry »

How to reduce bugs in JavaScript code by following the rule of consistent types

August 11, 2014 – 6:22 pm Tags:

One of the most annoying type of bug in JavaScript code is when the code doesn’t have logical types. Oh hey, I’ll just sum these two numbers… NOPE! They’re actually strings! That just makes me so angry. To make matters worse, this is something I’ve had to deal with a lot with a codebase I’ve been working with recently.

JavaScript is dynamically typed, and it doesn’t care what you do with its variables. You can have a variable contain a boolean, then put an array into it… then put a number into it… but this does not mean you should.

Your values should have one type only

Sometimes you see code like this

function getNames(person) {
  if(person.firstName == '') {
    return false;
  }
 
  return [person.firstName, person.lastName];
}

At a glance, it doesn’t look like there’s anything wrong with it. However, it breaks a very important rule you should follow to keep typing-related bugs away from your code.

In a language with static typing, the above would not work. The problem is that the function has inconsistent return types. What this means is the function can return both a bool value, and an array value. That kind of thing would never fly in a statically typed language, and there’s a very good reason why you should never do this in a dynamically typed language either.

Inconsistent types will give you a headache

When a function returns different types, you can’t make any kind of assumptions about its output. As a result, it will cause a mess, both in code and possibly in bugs as well.

Let’s say you take the above function and want to combine the names…

var result = getNames(person);
var combined = result.join(' ');

Now what will happen when the function takes the first path and returns a bool? A “true” or “false” value does not have a function join in them, therefore it will cause the code to throw an error. In order to deal with the possibility of a bool instead of an array, we have to add all this useless fluff into the code

var result = getNames(person);
var combined = '';
if(typeof result != 'boolean') {
  combined = result.join(' ');
}

Now, the example above is very simple. If you have ever worked on a large JavaScript codebase that broke this rule, you already know how bad it will get in a real application.

Always be mindful of your types

In order to fix this problem, we can simply rewrite the function like so

function getNames(person) {
  if(person.firstName == '') {
    return [];
  }
 
  return [person.firstName, person.lastName];
}

By keeping the return type consistent, we reduce the likelihood of bugs being caused by incorrect types. We also reduce the amount of code that you need to write, and less code is always better than more code.

Working in dynamic languages like JavaScript gives you great freedom, but with great freedom comes great responsibility. Save yourself the headaches, and keep your types consistent!

Are you tired of having to deal with bad JS code?
Sign up for my newsletter and learn how to fix that

  • What's the best way to architect large scale JavaScript apps?
  • Automate common development tasks and save hours of your time
  • Refactoring that horrible mess into something more manageable
  • Etc.  

We will never sell your information or spam you, ever.

Hello World Open 2014 thoughts

June 19, 2014 – 2:26 pm Tags:

I participated in the coding world championships, or Hello World Open, 2014. The challenge was to write an artificial intelligence for a slot-car racing game.

I wrote my bot in Haskell, and managed to rank 11 out of 856 competitors in the first qualification round, and 78 out of 203 in the second qualification round.

Read on for some general thoughts and a bit of analysis on the algorithms my bot used.

Read the rest of this entry »

Book review: Dependency Injection with AngularJS

February 16, 2014 – 11:29 am Tags: , , ,

Are you in the market for a book on AngularJS? Here’s my review of the book Dependency Injection with AngularJS, written by Alex Knol and published by Packt Publishing.

Disclaimer: I was sent a free copy of the book for review purposes.

Read the rest of this entry »

Tips for taking screenshots with PhantomJS + CasperJS

February 5, 2014 – 7:38 pm Tags: ,

It’s quite easy to use PhantomJS to muck around with pages, especially if you use CasperJS which provides you a bit nicer API.

It’s also pretty easy to take screenshots, but there’s a few things you need to take into account if you want the results to be accurate…

Read the rest of this entry »

AngularJS best practices: Refactoring existing code to Angular

December 27, 2013 – 8:12 pm Tags: , ,

I’ve been involved in several projects where I worked on moving an existing codebase into using AngularJS. Some involved refactoring a small codebase, which is relatively straightforward in most cases, but I’ve also refactored much larger projects where moving everything at once is not an option.

Here’s some best practice type stuff that I’ve learned along the way.

Read the rest of this entry »

Using AngularJS for fast prototyping

November 5, 2013 – 6:27 pm Tags: ,

One of the big pain points in web application development used to be quickly prototyping site layouts. Now we have things like Bootstrap and other CSS frameworks, which give you a quick grid and a bunch of other reusable components.

But that does not solve the whole issue: In today’s web applications, standard page load style actions just don’t cut it anymore. You need to have all kinds of UI features, from tooltips to dynamic form validations and who knows what else.

How do you quickly build a working UI prototype for a highly dynamic web based interface? Everyone knows building DOM in JavaScript for doing that stuff is kind of a pain, even with jQuery or Mustache.

Here’s how: With AngularJS. Not only is it great for building dynamic UIs, it’s actually amazingly fast for prototyping as well!

Read the rest of this entry »