Javascript Assessment: Arrays

I’m working my way through Rebecca Murphey’s javascript assessment tests, so I thought I’d write a brief summary of the test problems and resolutions as I go through them.

Arrays Test 1: You should be able to determine the location of an item in an array.

My first answer was to use an array’s indexOf() method, which is called on the array you want to search and takes the element you want to find as it’s only required parameter. It returns the first element that is a strict match and if it doesn’t find a match, it returns -1. Optionally, you can send a second parameter with the index of where you want to start the search (if that number is negative, the offset is from the end of the array although it still searches from beginning to end).

function(arr, item) {
  return arr.indexOf(item);

This method is an extension to the ECMA-262 standard and is not implemented in several versions of IE including IE8, but you can extend the array.prototype.indexOf() functionality in your code.

Another option is to iterate over the array with a for loop and check if there is a strict match against the item. If not, return -1.

for (var i = 0, len = arr.length; i < len; i++) {
  if (arr[i] === item) {
    return i;
return -1;

A third option is to use the jQuery inArray() method.

if ($.inArray("item", arr) != -1) {

I believe that usually in javascript we’re only doing things a few times and the readability of jQuery outweighs the performance benefits of using a native method, which tend to perform faster. That would depend on the size of the array though.

Further reading:

Arrays Test 2: You should be able to add the values of an array.

You can use the native reduce method, which calls a function on each element in the array from left to right and reduces it to a single value. You can optionally provide it with an initial value or it’ll just use the first element in the array. This is another example of a method that won’t work in all browsers, but you can extend the Array.prototype.reduce() functionality if you need to support those browsers.

array.reduce(function(a,b) {
    return a+b;

You can also just use a for loop that iterates through the array and assigns the new sum to a variable.

var total = 0;
for (var i = 0,  len = array.length; i < len; i++) {
    total += someArray[i] << 0;

Further reading:

Arrays Test 3: You should be able to remove a value from an array.

One way to return a value from an array is to iterate through the array, checking to see if each item is the one you want to remove. Add each item to a new array unless it is the one you want to remove and then return the new array.

var ret = [];

for (var i = 0, len = arr.length; i < len; i++) {
  if (arr[i] !== item) {

return ret;

Arrays Test 4: You should be able to remove a value from an array, returning the original array.

The last test didn’t actually remove an item from an array; it simply copied the array to a new array without the specified item. To remove an item from the original array, you can use the splice method. The splice method changes the content of an array, taking an index as an argument telling it where to start changing the array. You can also send an optional argument telling it how many old array items to remove.

var i, len;

for (i=0, len = arr.length; i < len; i++) {
  if (arr[i] === item) {
    arr.splice(i, 1);
    i = i - 1;
    len = len - 1;

return arr;

Further reading:

Arrays Test 5: You should be able to add an item to the end of an array.

You can add items to the end of an array using the push method, which simply adds the passed in item to the end of the array and returns the new array length. To pass this test, you just use the push method on the array, and then return the array.

function (arr, item) {
  return arr;

Further reading:

Arrays Test 6: You should be able to remove the last item of an array.

Further reading:

To remove the last item of an array, you can use the pop method which returns the removed item. To pass the test, you just use the method on the array and return the array.

function(arr) {
  return arr;

Arrays Test 7: You should be able to add an item to the beginning of an array.

You can use the unshift method on an array to add an item to the beginning of the array. Like the push method, it returns the new length of the array, so to pass the test you need to return the array.

function (arr, item) {
  return arr;

Further reading:

Arrays Test 8: You should be able to remove the first item of an array.

You can use the shift method on an array to remove the first item. Like the pop method, it returns the item removed, so to pass the test you need to return the array.

function (arr) {
  return arr;

Further reading:

Arrays Test 9: You should be able to join together two arrays.

You can call the concat method on an array, passing in another array. This will return a new array comprised of the elements from the array that it was called on and the elements of the array that were passed to it while leaving the first two arrays unchanged. To pass this test, just return the resulting array.

function(arr1, arr2) {
  return arr1.concat(arr2);

Further reading:

Array Test 10: You should be able to add an item anywhere in an array.

You can use the splice method on an array to insert an item anywhere in the array. The splice method requires two arguments and takes an optional third. The first argument is the index position where you want to start removing items and the second argument is the number of items you want to remove. The third optional argument is what you’d like to add to that location. So to insert an item anywhere in the array, you pass in the index, set the number to remove to 0, and then pass in the element you want to add. Splice returns the removed elements, so to pass the test, you want to return the array.

function(arr, item, index) {
  arr.splice(index, 0, item);
  return arr;

Further reading:

Array Test 11: You should be able to count the occurences of an item in an array.

You can find the number of times an item appears in an array by creating a count variable that starts at 0. Then, loop through the array and check it current element against the item that you are counting. Every time there is a match, increment the count by one.

function(arr, item) {
  var count = 0;
  for (i=0, len = arr.length; i < len; i++) {
    if (arr[i] === item) {
return count;

Array Test 12: You should be able to find duplicates in an array.

  var seen = {};
  var duplicates = [];

  for (var i = 0, len = arr.length; i < len; i++) {
    seen[arr[i]] = seen[arr[i]] ? seen[arr[i]] + 1 : 1;

  for (var item in seen) {
    if (seen.hasOwnProperty(item) && seen[item] > 1) {

  return duplicates;

Further reading:

Arrays Test 13: You should be able to square each number in an array.

  var squared = [];
  for (var i = 0, len = arr.length; i < len; i++) {
  return squared;

Javascript Assesment:
Best Practices

I’m working my way through Rebecca Murphey’s javascript assessment tests, so I thought I’d write a brief summary of the test problems and resolutions as I go through them.

Best Practices Test 1: You should avoid global variables.

So the number one reason to avoid global variables is because all of the javascript code shares a single global namespace and javascript has implied global variables, which means that any variable not explicitly declared in local scope are automatically added to the global namespace. Too many global variables could result in collisions between different scripts on the same page. One way to solve this problem is to use the “module pattern”, a design pattern where you wrap your code in a function that returns an object. To access the object’s functions from outside of itself, you just use Object.function_name().

Further reading:

The test looks to see if myObject is set on the window global object, because in browsers, all global variables are properties of the windows object. The test passes after changing “myObject” to “var myObject”, which changes myObject from a global variable to a local variable.

Best Practices Test 2: You should declare functions safely.

This test uses a conditional statement to declare functions. Declaring functions conditionally varies between different browsers; some will declare the first function, while some will declare the second. Instead, you can turn the function declarations into assignment expressions.

Change this:

 function(foo) { 
   if (foo) { 
     function getValue() { return 'a'; } 
   } else { 
     function getValue() { return 'b'; } 
   return getValue();

to this:

function (foo) { 
  if (foo) { 
    getValue = function() { return "a"; } 
  } else { 
    getValue = function() { return "b"; } 
  return getValue(); }: 

Further Reading:

Best Practices Test 3: You should use parseInt correctly.

The parseInt() function takes a string argument and an optional radix argument. You always want to specify the radix because not all implementations will treat it the same without it.  To pass this test, you just need to include the radix.

Change this:

function(num) { 
   return parseInt(num); 

To this:

function(num) {
  return parseInt(num, 10); 

Further Reading:

  • parseInt()” on the Mozilla Developers Network

Best Practices Test 4: You should understand strict comparison.

A strict comparison (===) is only true if the operands are the same Type, while abstract comparison (==) converts the operands to the same Type before making the comparison. To pass this test, you just need to strictly compare val1 to val2:

function (val1, val2) {
  return val1 === val2;

Further Reading:

Kinesis Freestyle keyboard

freestyle_incline_600x392One of my coworkers uses a contoured ergonomic keyboard and we chatted briefly about keyboards. This morning when I walked in, I had a “Kinesis Freestyle Separated Keyboard” sitting at my desk. It’s a PC keyboard, so I mapped the “Alt” key to “Command”. On both the PC keyboard and my regular Mac keyboard I have the “Caps Lock” key mapped to “Control” because it’s just easier to reach and how often does one really need a “Caps Lock” key?

Using the Kinesis, I’ve discovered that I apparently always use my left hand for the “H” key. I keep going for “H” and it’s not there; it’s weird. I guess I’m getting back to basics here, starting with the home row.

Javascript Tests

I worked in Windows environments in my last two jobs, but now I’m in a primarily Mac enviro, so pretty much everything feels a little new.

To help get me up and running with javascript development, a coworker recommended that I clone Rebecca Murphy’s js-assesment git repo and work on the tests. I’m using Grunt for linting.

Now when I find some time at home  (between the move and all) I’m going to watch the Douglas Crockford javascript videos, mainly because they seem to be mentioned quite a bit in regards to javascript design patterns which I’m trying to learn as thoroughly and quickly as possible.

App Development 101

This evening I went to an event in the Microsoft building called “App Development 101″. It was awesome. Mark Kasdorf, CEO and Founder of Intrepid Pursuits and Intrepid Labs and Chris Requena, Co-founder and VP of Operations of Mobinett Interactive, gave a really straight-forward run-down on the basics of what to focus on when trying to build a successful app as well as some cool insider tips.

I took some mental notes and here are a few of the takeaways I found interesting:

  • Build for iOS first and then port over to Android because the ROI is much higher on iOS. Android has huge significant OS fragmentation that costs a lot more in development and iOS users spend substantially more money on apps than Android users.
  • Apple aggressively pushes developers to build for the newest release. Mark Kasdorf paraphrasing Apple’s own advice: “The best way to support iOS7 is to drop support for iOS6.”
  • App Store Optimization (ASO), the process of improving the visibility of an app in the app store, is more difficult than SEO, but still, there are techniques for better visibility.
  • The absolute best way to get exposure for your app is to get featured in the app store. Other methods: Buying downloads by paying for ads (usually a very low ROI) and PR (not terrible, but still expensive).
  • A good resource for learning app development is the Standford Lecture Series “Developing Apps for iOS”.

Post-Launch Binder Clutter Cleanup

I carry one huge maroon work binder with me to and from work every day that contains pretty much every non-digital document/note (aka paper) I have sans a few select receipts and documents in my desk. I thought it’d be time to thin out the binder a bit and purge anything that is old news at this point. page sitemaps page sitemaps

Test printings of custom field trip guide images

Test printings of custom Field Trip Guide images

Items Headed to a Somerville Recycling Center

  • Sitemaps for almost every page of the new site
  • Customize a field trip guide test printings when I was testing image export settings
  • Daily to-do lists
  • A lot of papers with all sorts of drawings & calculations made during building out the site
  • An impressive amount of notes that no longer retain any semblance of meaning

Items that Made the Cut

  • Documentation
    • “Web Updates and OMS Information” (OMS = Offering Management System): The entire process of how marketing & web requests are made & processed
    • “DNS Transition”: All of the tasks required to change the domain name servers for the main website, the legacy site and several sub-sites to make the new site live with a new web host
    • “Emergency System workflow”: The entire process from initial work order to entering exceptions to the main website, online store, and digital signage in the museum
    • “Online Store Functionality and Requested Features”: Details the current functionality of the Museum’s online store and requested features and requirements
    • “Live Presentations / Communicating Specific Topics”: An overview of how a variety of live presentations get requested and how they are displayed on digital signage, the website, the printed Museum Map and notes on visitor impact
    • “Digital Signage Maintenance”: Instructions for editing digital signage modules and functionality
    • General image documentation: Includes notes on image dimensions for main website’s full, teaser, thumbnail and field trip guide images including image export settings and image CSS styles
    • “How to update the daily schedule”: How to import an updated products feed and how to troubleshoot missing items
    • “Intranet / Forms / Promotional Request Overview”: Overview of the existing promotional request process and form and its problems so we can outline our desired solutions
    • “VES: Maintenance”: Visitor Experience Survey technical maintenance
    • “Batch Scripts”: Outlines each batch script and why it was created
  • Meeting Notes
    • Notes from our DNS transition meeting
    • Web Governance Team notes: Most of these were purged because they exist elsewhere, but there are some notes on requested mobile site features
    • Summer Courses notes
    • Marketing meeting notes prioritizing web updates post-launch
    • Some Google Analytics ideas to research
    • A flow chart detailing promo request workflow from request to published live on the main website

2012 Year In Review

Accomplishments of 2012

  • Learned Drupal: built content types, created node templates including custom code, complex views, Drupal caching, and a familiarity with a number of modules
  • Learned to write styles in SASS and used Ruby to compile those to CSS
  • Version control using Git (Git Bash)
  • Content management including managing moderation states with multiple editors
  • Learned some new PHP skills
  • Managed a hectic workflow
  • Got the hang of working for a large non-profit
  • Learned a lot of random stuff about science
  • Improved my credit score
  • Contributed to a retirement fund
  • Paid down some debt
  • Switched from Bank of America to a local credit union
  • Received a DSLR camera
  • Bought a Nintendo WII
  • Explored a lot of Boston & Somerville on foot
  • Met some awesome people
  • Visited my relatives in San Diego and built them a website
  • Helped my brother-in-law get a new portfolio site up and running
  • Reaped the benefits of my adsense site…it’s running on auto-pilot these days and I’ve earned enough that I have to pay taxes on it!

Goals for 2013

  • Confine work to normal work hours
  • Experience more culture: museums, films, books, etc.
  • Take pictures and draw stuff
  • Exercise
  • Travel more
  • Give back

The Original Web Browser Created By Tim Berners-Lee

I’m currently reading a book named Weaving the Web by Tim Berners-Lee, the inventor of the World Wide Web. The book explains how the web came to be, and I’ve been periodically looking up people, languages and other elements that the book mentions.

I was interested in how Berners-Lee tried to get other people to understand, let alone get excited about, the possibilities of the World Wide Web as a means of freely sharing and distributing information. He knew that one of the key features he needed was a user-friendly interface…a web browser.

A company in France had a great text editor, but they didn’t want to work with him on developing it for his project unless the European Union would pay for the development time. Over and over again, he ran into a variety of similar road blocks. He ultimately realized that in order to get this whole web thing to take off, he’d have to develop his own browser so that he could use it to demonstrate the World Wide Web in a clear, easy-to-understand manner to his physicist co-workers at CERN.

He envisioning a browser that would allow users to be able to edit documents directly on the web, so his browser was more like a combination of a text editor and a modern browser.

Screenshot of First World Wide Web Browser

Here’s a screenshot of the original World Wide Web browser on a NeXT computer:

Also, I’d like to point out that one of the key moments in getting his project to be accepted was when a kick ass librarian at the Stanford Linear Accelerator in Palo Alto (SLAC) named Louise Addis persuaded her colleague who developed tools for her, to write the program that would allow their server to be the first Web server outside of CERN. She realized that it would be an amazing way to make their huge database of documents available to physicists around the world and it was exactly what Berners-Lee needed to prove to his physicist co-workers that this Web thing would be useful to them.

The Pragmatic Programmer

A while ago I was browsing online resources for information about programming and I had come across a reading list that recommended “The Pragmatic Programmer” by Andrew Hunt and David Thomas. I couldn’t find it in the Ocean State Library System, but our awesome local librarians were able to track down a copy for me from the Salem State College Library in Massachusetts.

It was written in 2000, which in technology-years is ancient, but it deals with general principles and universal problems, so for the most part, it really isn’t all that dated.

One section I love talks about investing in your “knowledge portfolio”. The basic idea is that the value of knowledge declines unless you continue to invest in it. Technology advances, market forces shift, environments are always changing and the value of your knowledge can quickly become obsolete or devalued.

“An investment in knowledge always pays the best interest. -Benjamin Franklin”

Managing your “knowledge portfolio” isn’t so different than managing a financial portfolio:

  • Invest Regularly (Learn constantly)
  • Diversify (The more technologies you are comfortable with, the better you will be able to adjust to change)
  • Manage Risk (Don’t put all of your technical eggs in one basket)
  • Buy Low, Sell High (It can pay off to learn an emerging technology before it becomes popular)
  • Review and Rebalance

I guess I already knew all of that, but I never really thought of it from a career advancement perspective. I just saw learning and trying new technologies as essential to staying passionate about what I do. I like how they dissected those ideas and provided clarity.