Beware of Assholes

What is an asshole?

• Someone who either intentionally or unintentionally infuriates/demeans/damages their peers/superiors/underlings.
• There are two flavors: Temporary and Certified assholes. A temporary asshole is someone who is probably having a bad day or a bad moment. Certified assholes are persistently nasty and destructive jerks.

Why are they dangerous?

• Remember how they can damage people? well, at times that includes clients and customers.
• They undermine organizational performance.
• Asshole poisoning is a contagious disease that anyone can catch. Once you unleash disdain, anger and contempt or someone else unleashes it on you, it spreads like wildfire.

What should you care?

• The total costs of assholes are HIGH. From loss of motivation, higher stress and turnover to legal and HR management costs like inside and outside counsel.
• If you sap the energy out of people, you may be sucking the life out of your career.
• When people feel mistreated and dissatisfied with their jobs, they are unwilling to do extra work to help their organization.
• Writing, displaying and repeating words about treating people with respect, but allowing or encouraging the opposite behavior, is worse than useless. The organization and its leaders are seen as hypocrites, which fuels cynicism and scorn.
• Organizations that drive in compassion and drive out fear attract superior talent, share ideas more freely, have less dysfunctional internal competition, and trump the external competition.

What should you do?

• Adopt The No Asshole Rule.
• Have yourself tested.
• Get rid of assholes fast.
• Treat certified assholes as incompetent employees.
• Model and teach constructive confrontation.
• Improve your hiring process. Recruiters tend to hire candidates who look and act like his or her favorite person on the planet- him or herself. Assholes will hire assholes.
• Be like Google. Like Google, not "be" Google. They have a "Don't be evil" motto. The company works to screen them out in hiring, and nasty people suffer during performance evaluations and aren't promoted to management positions.

"The No Asshole Rule" by Robert I. Sutton is a must-read for anyone looking to make a difference in their workplace. It is a very entertaining book and quite a learning experience.

This post contains information found in:
The No Asshole Rule: Building a Civilized Workplace and Surviving One That Isn't

HTMLCollections & NodeLists

Most of us believed, at least for some time, that in our DOM Scripting, we always dealt with arrays in our JavaScript:

var my_links = document.getElementsByTagName('a'); // we have three links
alert(my_links.length) // outputs "3"

We later found out that the things we thought were arrays, were instead array-like objects. But how exactly are they like arrays? Those "array-like" objects/elements/things, most of the time, are either HTMLCollections or NodeLists, not native JavaScript array objects. Take a look at what the specification says of them, the keyword is live:

"An HTMLCollection is a list of nodes. Collections in the HTML DOM are assumed to be live meaning that they are automatically updated when the underlying document is changed."

- DOM Level 1

"The NodeList interface provides the abstraction of an ordered collection of nodes, without defining or constraining how this collection is implemented. NodeList objects in the DOM are live."

- DOM Level 3

But what does that mean? It means that live collections, if modified, are updated as the program runs. For example, this is an infinte loop:

var i, j,
    my_links = document.getElementsByTagName('a'); // we have three links

for (i = 0, j = my_links.length; i < j; i += 1 ) {
    document.body.appendChild(document.createElement('a'));
}

We're getting our collection (of three links) and then for each link that we have, we're going to append another link to the body. So why is this infinite? Because the collection is live, which means that not only will i increment, j also will, so naturally the loop will keep going.

So why are they called array-like objects? If it looks like an array and acts like an array, then it must be an array, right? Wrong, DOM collections look like arrays because:

• They have an associated index to each value in the container. But that's something an object can have too:
  

  var my_obj = {
      0: 'zero',
      1: 'one',
      2: 'two',
      3: 'three'
  };
  
  alert( my_obj[0] ); // 'zero'
  alert( my_obj[3] ); // 'three'
  

  The alert statements might look like they want the elements with index 0 and 3 but you're really getting the value from the property named 0 and 3.
  
• They have a length property. This is deceptive because arrays have this same property, but so do HTMLCollections and NodeLists. But, because these are not true arrays they do not have push, concat, splice or any of the other array methods.

Be prepared, these are some of the DOM methods (that I know of) that return an HTMLCollection or NodeList:

// DOM Level 1/HTML 4.0
// ---------------------------
// Return an HTMLCollection
document.anchors
document.applets
document.forms 
document.images 
document.links

document.getElementsByName

formElement.elements
selectElement.options
tableElement.rows
tableElement.tBodies
tableRowElement.cells

// Not part of any standard
document.embeds
document.plugins

// DOM Level 2
// ------------------
// Return a NodeList
Node.childNodes

document.getElementsByName
document.getElementsByTagName
document.getElementsByTagNameNS
document.getElementsByName

element.getElementsByTagName
element.getElementsByTagNameNS

// WHATWG Web Applications 1.0
// ---------------------------
// Return a NodeList
document.getElementsByClassName
element.getElementsByClassName

Throughout this post I've been talking about NodeLists as such and not as live NodeLists because they are inherintely live. There's an exception to this, there are static NodeLists that act as snapshots and do not update when the document is modified:

// Selectors API Level 1
// ---------------------
// Return a static NodeList
document.querySelectorAll
element.querySelectorAll

In conclusion, I think it's important to know the differences between a live DOM collection a true JavaScript array, it's also an important thing to be aware of because you'll eventually interact with these.

I know so far I've been talking mostly about the DOM (sorry, this wasn't the exception) but you cannot say that this was a boring topic, or was it?

Thanks for reading and let me know your comments.

Sources:
Why is getElementsByTagName() faster than querySelectAll()?
Speed Up Your JavaScript (video)
HTMLCollection - MDN Doc Center, NodeList - MDN Doc Center
DOM Level 1 Specification, DOM Level 2 Specification, DOM Level 3 Specification

Using innerHTML

innerHTML is a read/write property of a DOM element that gets/sets the HTML contained in the element.

It's fast
This might vary between browsers but, it's almost a fact that creating and inserting elements using innerHTML instead of DOM methods is faster, not only at execution time, it'll also make the script size lighter because less code is needed.

It's clean & readable
Although the name, innerHTML, might seem confusing at first, it comes as the better choice in terms of code readability because DOM methods are very verbose and can consume a lot of lines of code.

It's supported
It was first introduced by Microsoft as proprietary to IE and there's no spec that defines the behavior of innerHTML but it has been adopted by all major browsers because of its usefulness and it pretty much works the same in all of them.

Creating and inserting using DOM methods:

var newDiv = document.createElement('div');
newDiv.setAttribute('id', 'new-div');
newDiv.setAttribute('class', 'big-div');
var text = document.createTextNode('Some text here');
newDiv.appendChild(text);

document.body.appendChild(newDiv); // div is inserted in the tree

Creating and inserting using innerHTML:

var newDiv = '<div id=\'new-div\' class=\'big-div\'>Some text here</div>';
document.body.innerHTML = newDiv; // div is inserted in the tree

Reasons not to use it

• Not standard. Although it's fast and it works, the bottom line is that it is not part of any W3C or DOM standard. However, there are plans of adding it to the HTML5 specification.
• XSS unsafe. You have to know when to use it, otherwise you are exposing your application to XSS attacks, choose DOM methods until you're familiar with the subject.
• Not implemented everywhere. There are some table related elements, in IE, that can't be modified with it. The implementation and behavior might vary from browser to browser.
• Destroys the children. Setting a value to innerHTML will destroy every descendant to that element, if any of those descendants had event handlers, that could potentially create a memory leak in some browsers.

Thanks for reading and let me know your comments.

Sources:
innerHTML (Mozilla Developer Network)
innerHTML (Microsoft Developer Network)