I love podcasts - I’ve been listening to them since their early days back in 2005-2006. There have been some really wonderful podcasts that I’ve been listening to lately that I am really enjoying:

• Accidental Tech Podcast: Highly recommended if you’re a fan of John Siracusa and you are missing him since Hypercritical ended.
• Build and Analyze: I am currently writing my own iPhone app, so it’s worthwhile for me to hear about Marco Arment’s experience with the app store.
• Debug: A developer podcast that has well known developers from the Apple and mobile app community come on to talk about their experiences.
• Neutral: A car podcast hosted by Marco Arment, John Siracusa, and Casey Liss. One of the reasons I am a fan of Siracusa is because of his deeply analytical rants about products. These rants still occur, but are primarily focused at cars.
• Now Playing: A podcast focused on analyzing and reviewing everything about your favorite movies.
• Quit!: Dan Benjamin and others talk about quitting your day job to work on something you truly care about or to take more control over your life. A good podcast, but this tends to be at the bottom of my queue because the overall point of Dan’s message gets made after a couple of episodes.
• The Crossover: A mixture of hosts from 5by5’s various podcast shows come on to have a conversation each episode.

Lastly, if you were ever a fan of the podcasts created by 1up.com back in the 2006 - 2008 era, I highly recommend checking out the final podcast to ever be officially produced by 1up. It’s a roundtable discussion of almost every editor, writer, etc. that worked for 1up taking about their favorite stories and memories of their time at 1up.

I’m a big believer in the benefits that Continuous Delivery provides to help teams ship software. An important component of this is the delivery pipeline, which aims to automate the entire process from checking in code, running a build, testing, to ultimately deploy the code into a customer facing environment. A critical part to getting this pipeline to work is to ensure the quality of the code that gets delivered - which is done by running automated tests to ensure that bugs don’t occur. However, one problem with automated tests (specifically unit tests) is that it is easy to miss testing certain parts of your codebase (e.g. hitting all cases for an if statement). Fortunately, there are many code coverage tools that exist for languages to help determine if your tests hit all parts of your code. However, this type of tooling is still a bit young in the javacript space and I want to share my findings on the tools I evaluated while incorporating code coverage into my team’s automated javascript tests.

As I said before, the tooling for code coverage in Javascript is still pretty young in my opinion (especially when compared to java). Fortunately, the introduction of node.js and growth of the javascript community in the past few years has helped this problem tremendously. However, this popularity (and youth) actually created a few problems for me during my evaluation and adoption of tools. Before I get into this, I want to describe the details of how my team’s automated tests run and the requirements I needed from the eventual tool:

Test Environment

1. We use jasmine to write our test cases (and also incorporate RequireJS)
2. Automated tests need to run in the browser from a special Test Runner page that basically sets up RequireJS and a special jasmine.phantomjs-reporter.js file[1]
3. PhantomJS is used to run tests in our builds and from the CLI on our local machines
4. Builds are executed on Jenkins
5. We report code quality metrics for all of my team’s projects to Sonar

Requirements from a Code Coverage Tool

• It needs to be easy for developers to continue to run tests
• It needs to be easy to access its reports, otherwise developers will ignore it
• It needs to run with my team’s special “Test Runner” page in the browser (and handle RequireJS)
• It needs to be able to generate a report format that can be easily consumed by Sonar (specifically LCOV)

From these requirements, I ended up spending a significant amount of time evaluating the following tools:

• Istanbul
• Karma (formerly Testacular)
• Blanket.js
• JSCover

I started with evaluating istanbul thanks to this blog post, which sold me on how “easy” it was to incorporate code coverage into your javascript tests. The one problem I had with this article is that it is specifically targeted at Jasmine tests that are NOT running in a browser. This detail ended up wasting a good bit of my time in trying to get istanbul to work because this nuance was not documented well.

I then evaluated Karma, which is just a test runner for javascript that makes it easy to boot all of the browsers on your local machine, run tests, and then report the results to the command line. I really liked Karma, it incorporated istanbul’s functionality and it was really easy to get its initial set up to work. However, I ended up dropping this tool because I was unable to get it to run our special “Test Runner” page, which mostly does some library and RequireJS setup while ensuring that each test runs in its own RequireJS context. From what it looked like to me, Karma didn’t handle running our specific test runner page and instead wanted to automagically inject our tests into its own runner page.[2]

Next up in this process was Blanket.js, which I must thank asciidisco for introducing to me since I didn’t know it existed until I saw his comment on github. Blanket.js was finally the right tool I was looking for in this process; it was REALLY easy to incorporate into my special test runner page. All I had to was download blanket.js, its special jasmine bootstrap file, and add the following lines of HTML to my page:

<script type="text/javascript" 
        data-cover-only="/" 
        data-cover-never="['/lib','/test']" 
        data-cover-flags="branchTracking"
        src="lib/blanket.min.js"></script>
<script type="text/javascript" src="lib/jasmine-blanket.js"></script>

Blanket.js had a nice report design, and it helped guarantee that all developers that executed tests in the browse would see the coverage results since it ran in the browser alongside jasmine. I was really really close to adopting this tool, but it turns out that it currently lacks reporters that can easily generate the coverage data in a format that I can send to Sonar (specifically the LCOV format). I would have loved to have written a reporter to add this feature, but the demands of my job did not offer me this time.

So after all this, I came around to using JSCover. This is a code coverage tool that is the child of JSCoverage and utilizes a java server to take your javascript files, dynamically inject coverage instrumentation code, and report the results in its UI. I first disregarded this tool when I started this research because I did not like adding another runtime dependency to my team (i.e. requiring Java to be installed and starting the server before running the tests). However, at this point, I didn’t care and just wanted something that worked that also supported LCOV reports. Fortunately, it was easy to get my automated tests running in this tool (even easier than blanket.js because of some bugs I encountered). All I had to do was start the server, have it look at the right source directory, and then run it against a special URL. On top of this, it also had built in support for integrating with PhantomJS and it was super easy to convert its reports into various formats.

Now that I had a code coverage tool that met all of my requirements, the last part was to get this code to run as part of our Jenkins build (which utilizes a grunt script). This was easy to get running, but I encountered two errors that consistently broke my builds:

1. Sometimes phantomJS would fail to connect to the JSCover server
2. Sometimes phantomJS would connect to the server, but then give up executing my tests at a random point during the run.

These were really weird issues that only occurred on my team’s Jenkins nodes and were hard to diagnose - even though they turned out to be simple fixes. For issue 1, that error was the result of my grunt script not waiting for JSCover to start before I executed phantomJS. For the second issue, it turns out that my team was using a special jasmine test runner to help with producing XML files after tests completed. The problem with this file was that it had a function that waited for Jasmine to complete its execution, but utilized an extremely short timeout before it gave up running the tests. This was a problem with Jenkins + JSCover because it took a longer time for the tests to load and run now that they had to be loaded from a web server instead of straight from the file system. Fortunately, this fix was as easy as increasing the timeout.

Conclusion

After all this, I am pretty happy with using JSCover because it was able to meet all the requirements that I noted above and was easy to get working. From my initial experiences with tools like JSCover and Blanket.js, they meet my need of generating coverage reports and are simple to get running, but there is a lot of room to grow in terms of integrating with toolsets that already exist in the market. In conclusion, I want to provide the following recommendations/feedback for anyone that is working on a code coverage tool:

• Be aware of the quality management and continuous integration tools that many software engineers use and try your best to easily integrate with them [3].
• Be explicit in your documentation as to whether you report the coverage for code that runs in node.js, the browser, or both (and provide docs as to how to get your tool to work).
• Try to simplify your set up process as much as possible and aggresively document it.

TL;DR

If you want to get code coverage reports for Javascript tests that run in the browser, your best choices are Blankt.js or JSCover. If you also need to integrate these reports into your team’s continuous integration and quality management tools, JSCover is the best choice as it has support for generating reports in various formats.

Notes

1. This file was created to help output Jasmine’s test results from Phantom into XML files that can be consumed by Jenkins. This file was first introduced in this article.
2. I may be completely wrong in this understanding of how Karma runs tests that need a specific test runner page.
3. From my experience in the DevOps/Continuous Delivery space, Jenkins is one of the most popular CI tools in the marketplace. I’m really impressed with Sonar right now, but only recently discovered it so I am not sure how popular it really is.

At my new job, we use git. This is the first time I’ve gotten to use git in a team-based setting, so I wanted to try and utilize feature branches for my work and have my team see my commits that were pushed to the branch in Bitbucket. However, I had a couple of problems when I created my first feature branch and accidentally pushed my commits to master.

As such, I wanted to document the correct way to create a feature branch and register it with your remote repository:

1. First, create your new branch:

   $ git checkout -b my_branch_name

2. Now push the branch to your remote repository:

   $ git push origin my_branch_name

When I graduated college, I weighed about 190 pounds. The reason for this was the desire to put on a little extra weight since I’ve been a fairly skinny guy for the majority of my life, but by this time I wanted to get rid of this weight.

When my girlfriend and I moved down to Raleigh, NC, we both decided we want to fix our diets since we knew we would be cooking more. Also, everything I had learned about fitness in the years before this told me that diet was one of the most critical aspects of your health - moreso than exercise. So this resulted us looking at the diet section of a local bookstore and we saw “Eat This, Not That!”. I thought this book would be a good starting point for fixing our diets from when I read posts about it on Lifehacker back in the day. I can tell you, two years and 40 pounds less later, that this was a great decision.

The reason the “Eat This, Not That” (ETNT) diet worked for us is because of how it’s aware that people love classic food - hamburgers, pasta, pizza, etc. The trick with this is that you, as a consumer, need to be better aware of the ingredients in the food and how awful some of it can be. For example, Olive Garden’s Lasagna rolls have about 1,170 calories in them for a meal, but ETNT’s lasagna roll recipe only has 380 calories. The reason for this is to just use healthier ingredients - the recipe above loads the lasagna rolls with spinach, low-fat ricotta cheese, and chicken sausage. Another example is ice cream - we LOVE ice cream and have it every night, but we stick to Edy’s or Breyers because it contains a fraction of calories, fat, and sugar that is normally in products like Haagen-Dazs or Ben and Jerry’s. We honestly haven’t changed our diet that much since we started using ETNT, we really just started eating products that are not as bad for you and started cooking healthier versions of our favorite recipes.

Is this diet perfect? No, and I believe that I can do a lot better with my personal diet, but I believe ETNT was the perfect starting point for learning the fundamentals of how you can eat better in today’s world and understanding the types of things you need to look for in the foods you eat.

If you’re interested in these books, I recommend to take a look at the following:

• Eat This, Not That!
• Eat This, Not That! Supermarket Survival Guide

There is a lot of work to do when writing the code for UIs in software. You have to collaborate with designers on ensuring that your implementation meets their designs, acquire graphics for icons, make your code performant, etc. From my experience, one of the things that tends to be placed at the bottom of the developers’ priority list is accessibility. I think one of the problems that contributes to this mis-prioritization is that many developers may not understand the value that accessibility provides.

What is accessibility? I think Nicholas Zakas provides a great definition to this topic:

Accessibility basically means that the site or application’s content and functionality is available for use by anyone who is able to interact with a computer.

However, not everyone uses a computer in the same way. Some examples that come to mind are:

• How does a blind person view the content on a screen?
• How does someone who can’t hold a mouse use the computer?
• How does a paralyzed person interact with the computer?

These are interesting problems and are just a few of the many situations users might have, but they can be easily forgotten when you aren’t normally around them. The most common example of this I find in web UIs is not implementing keyboard support. So if you don’t encounter these types of users often, what is the value of implementing accessibility (besides being required to by law)?

This question was answered for me by a professor when I was in college:

When you make something accessible for a few people, you end up making it more accessible to everyone.

When I first heard this, it blew me away because of the situations where accessibility has unknowingly helped me. The biggest example that comes to mind is keyboard support in modern UIs (web and desktop). When I started using computers, I primarily uses the mouse to interact with buttons and menus while the keyboard was used for text input. As I became more of a power user, I used keyboard shortcuts more often because of how much faster they were than the mouse. However, I don’t think most keyboard shortcuts were implemented to make users more productive, but were done for accessibility reasons where a user was unable to use a mouse.

Another example is using Siri (or Voice Control on older iPhones) to make phone calls. How does a user who can’t physically use the on screen controls of the iphone make a call? With Siri, they can hold a button and just say “call mom”. This is a wonderful feature that many have benefited from - not only does it make it easier for disabled users to make phone calls, but it makes the feature more accessible to everyone. I know that I’ve used this feature a bunch while running and my iPhone is in an arm band - it’s MUCH easier to press a button on my headphones and say a few words to make a phone call in this situation.

I’m sure there are many more examples of this, but the point I want to stress is that accessibility benefits everyone. It allows more users to use your product and will end up with the nice side effect of making your product more valuable to your current users.

Links

• Nicholas Zakas has a number of wonderful articles on this topic

Note: my code examples utilize jQuery APIs.

When writing Javascript code for your web UI, you may find yourself writing code like this:

$("li.my-item").click(function(evt){
    // callback logic
});

This logic, which looks harmless, is actually problematic as the amount of list items with the “my-item” class grows on the page. What’s occurring here is that a new onclick event handler is being registered on each DOM node that is found by the “li.my-item” selector.

In this situation, you should be taking advantage of Javascript’s method of event delegation[1] known as bubbling. This means that when an event happens, the inner most DOM node receives the event first, performs any required work, and then transfers the event to its parent node to work. This chain continues until the root node of the document is reached (and there are no more parents to visit).

You can take advantage of this knowledge and attach a single event handler to the root node of your widget or list’s HTML. To determine which node the event actually occured on, we evaluate the event object’s target attribute[2] to determine which child node initiated the event. Admittedly, you will have to write some extra code to help determine if the event’s target is something your code even cares about, but that is easily done if we take advantage of looking for specific HTML attribute values (note: see Edit 1):

$("ul.my-list").click(function(evt){
    if ( $(evt.target).hasClass("my-item") ){
        // do stuff
    }
});

So in this above code, we only have to create a single event handler vs. N handlers (where N == the total number of list items in a list). What I usually end up doing with my event handlers is that the specific event callback is tasked with determining if the event target is relevant to a certain type of action that I wish to perform, if it is - I then pass that node over to a function to execute that action. For example (note: see Edit 1):

$("ul.my-list").click(function(evt){
    if ( $(evt.target).hasClass("my-item") ){
        handleListItemAction(evt.target);
    } else if ( $(evt.target).hasClass("my-button") ){
        handleButtonClickedAction(evt.target);
    }
});

A great example of this type of pattern being used in the industry is with Twitter’s stream or Facebook’s news feed. Although I don’t have specific code to show - think about how those two lists of items that continually grow as the user scrolls handles event delegation? If their code was attaching a new event handler with each new item that was created, older browsers would crash after a few of user scrolling. Instead, they use event bubbling to only attach one handler to the entire list.

Notes

1. Event Delegation in Javascript
2. JQuery Doc for event.target

EDIT

After reading some comments on Reddit about this post, I wanted to share a useful feature of jQuery’s “on” method with delegation (and why you SHOULD use it instead of the code I wrote above):

$("ul.my-list").on("click",".my-item", function(evt){
    //do stuff
});

So what that above code will do is ONLY perform the actions in the callback function when the click event occurs on a child element of “ul.my-list” that is or is also a child or a node that has the class “my-item” attached to it.

For an example, check out this jsFiddle. If you click on the box labeled “outer” nothing will occur, but if you click on any of the boxes labeled “inner” or “inner2”, the output text will change.

For more info on this feature of jQuery’s on() method, I recommend checking out the “Direct and delegated events” section of the on() docs

Lastly, since on() provides this critically useful feature (and is only available with the on() method), and is not much longer to type than click(), I would recommend using on(“click”, …) instead of click().

Last month, I was looking through some of my team’s code and noticed that a LOT of the HTML was using the “id” attribute. I use to work on the Web UI Framework when I was with IBM’s Jazz, and this code really jumped out to me because of how problematic that attribute can be when creating reusable UI widgets.

When one is tasked with writing reusable HTML code, I recommend to never use the id attribute. This is not because the attribute itself is a problem, but because of how the code will be used by your consumers. From the definition of the id attribute on W3 (emphasis mine):

> This attribute assigns a name to an element. This name must be unique in a document.

This means that there can only be a single element in all of the HTML on a page with an id attribute. This is problematic for reusable code due to consumers unknowingly adding an id attribute with the same value to their code and not realizing that the value was already taken. As such, problems will occur with Javascript and CSS code that use the id selector (e.g. “#idName”) in their code.

To resolve this problem, I recommend applying a namespaced class name to your html. For example, assume that I have a widget called “myModal” that contains a button:

<button class="com-tacoCorp-myModal-btn btn">Submit</button>

With the above code, I can now reuse a predefined “btn” class to apply a global style to a button and then use the “com-tacoCorp-myModal-btn” class to apply a style that may be needed specifically for the myModal widget (or for easy access in your javascript code).

Now, if you’re worried about CSS selector performance (because using the #id selector is fast), be sure to check out the following articles for some alternative ways to write performant CSS rules:

• Google Speed: Use efficient CSS selectors
• Mozilla - Writing Efficient CSS

Lastly, I must note that I believe this rule of thumb will help you most of the time, but there WILL be situation where the use of the “id” attribute are beneficial. For example, if you have a widget that may occur multiple times on a page (e.g. a hover popup), you may want to try to reuse those widgets instead of creating and destroying them each time they need to appear. Having an id (e.g. com-tacoCorp-myWidget_1) will help you find specific instances of the widget you wish to reuse. However, please note how I still use namespacing to help prevent collisions.

tl;dr Never use the id attribute if you EVER think your widget is going to be reused, unless you have a good reason to. Sticking with just classes in your web code will take you a long way.

I was hitting this problem where objects that had a required inverse relationship on a root object in my data model were preventing the root object from being deleted. This was confusing because the objects that required the relationship were getting saved without a problem.

Thanks to this stack overflow comment, it turns out the problem that was occurring was because I had set the “Delete Rule” in my xcdatamodeld file to “Nullify”[1].

To fix this problem, you need to change the “Delete Rule” value to be “Cascade”.

[1] This rule means that when the root object gets deleted, the value on the related object gets set to NIL.

Problem

When I was trying to install chef on my macbook that runs OS X Lion (10.8.2), I received the following error:

ERROR: Error installing chef: ERROR: Failed to build gem native extension.

/Users/jryding/.rvm/rubies/ruby-1.9.3-p0/bin/ruby extconf.rb

creating Makefile

make compiling yajl.c make: /usr/bin/gcc-4.2: No such file or directory make: *** [yajl.o] Error 1

This problem was due to ruby not being able to find /usr/bin/gcc-4.2 despite the XCode command line tools being installed. However, when I inspected the /usr/bin directory, I saw that llvm-gcc-4.2 was installed, but there was no entry for “gcc-4.2” in the directory (LLVM is the C/C++ compiler Apple provides on theirs OSes these days).

Solution

To fix this problem, run the following command to create a symlink to llvm-gcc-4.2:

sudo ln -s /usr/bin/llvm-gcc-4.2 /usr/bin/gcc-4.2