Developer Detour: Trailing Semicolons FTW

by david

Our Dev Team works HARD at Seelio, and we love them for it.

David JsaFrom re-working our front page to coding our new on-boarding process and more, they have little time to do everyday things like eat, sleep, etc.

KIDDING, but they do have little time to write blog posts, so we were real thrilled when our head developer David sent us this.

Those who want to know what its like to be a Seelio developer, enjoy!

Today after we compiled and launched our new add work feature (check it out, btw! Screengrabs, image grabs, and Vimeo integration are all new!), my coworker turned her laptop around to show me our page jumbled all together and beyond recognition. As every programmer knows, one semicolon can make a disproportionate amount of difference.

So we generally use uglify.js to minify our javascripts. We also concatenate all our scripts together per each page so that we can reduce numbers of requests to our server and keep our load times shorter. However, this doesn’t help when trying to debug a script which is one line tall and 397495 characters (give or take a few thousand) long, and the only clue you’re given is:

Object is not a function.

Step one:

Beautify the uglified javascript so that debugging is even possible. I tried three different tools, and finally found this one that worked. The result was 9000 lines long, and I wasn’t about to fish through that in one line.

Step two:

Copy the new script to the server as a file. Pasting that many characters and lines proved prohibitive over ssh and vim. Find the offending line.

Step three:

Google the issue. This is always a step.

Step four:

Discover that the object that is not a function is actually being called because two scripts have been concatenated together, and one of the scripts is entirely surrounded by parenthesis because CoffeeScript compiles to Javascript as whole functions wrapped in parenthesis and then evaluated. The second script has been placed next to the first script, such that Javascript parses as the first script as a function being called with the second script as an argument. Obviously.

Step five:

Add a semicolon in the offending line at the appropriate spot. Everything works.

Step six:

Add a trailing semicolon to the former of the two concatenated files, so that, when concatenated, there will be a semicolon between the two.

Step seven:

Recompile the concatenated javascript for testing. Still working! Score. (Usually this is where things are still choosing not to work, in which case steps eight through up to seven hundred sixty three may become necessary).

Step eight:

Push the changes to the live server. Crisis averted.

Lessons:

1) If you’re going to concatenate scripts, run your pages once with everything concatenated¬†to make sure everything checks out.

2) Also, add trailing semicolons to all your files. It will make concatenating just a little safer.

Hope you enjoyed this little foray into our front-end debugging. Leave some comments if you’ve got better ways of doing things, we’re always up for hearing them!