Anti-Code.com > JavaScript

Currently Open Tabs: Resources For Using AngularJS

Although this list is not actually a complete or accurate list of my currently open tabs (I have since closed some, as well as, working on a page for DevTools docs), this is a list of tabs I have either open, or have opened at one time.

You may have noticed more and more recently, that Angular.js is growing in popularity among Front-end Developers. I’m personally a big fan of it, and I would like to share some more things which I’ve come to learn about it in the near future.

Until the, here’s a list of tabs which are mostly focused on developing with Angular.js, but a few others thrown into the mix as well.

Handy Tricks With Developer Tools

This is a comparison of the most popular MV* JavaScript Frameworks using Google Trends

You can tell that Angular.js has really picked up some momentum judging by this graph. I wonder how long this climb to most popular will continue.

Searching For Existing Keys In Arrays And Objects In JavaScript

If you want to check if an object or array has a particular key you should first make sure that what you want to search for it in is an Object or an Array. You do this by checking the constructor of the thing you want to search. If it’s not an Object or Array then return false.

if (!search || (search.constructor !== Array && search.constructor !== Object)) {
	return false;
}

If it is either an Object or Array, then handling the two types is a matter of checking the key indexes for a match to handle searching Object keys, and if that doesn’t work, then you can return the key in array. If the key is not in the array it will be false upon being returned.

Here’s a function that will do this:

function keyExists(key, search) {
	if (!search || (search.constructor !== Array && search.constructor !== Object)) {
		return false;
	}
	for (var i = 0; i < search.length; i++) {
		if (search[i] === key) {
			return true;
		}
	}
	return key in search;
}

You pass it a key: the thing you’re searching for, and search: the object you want to search for it in.

Searching Arrays

keyExists('apple', ['apple', 'banana', 'orange']); // true
keyExists('fruit', ['apple', 'banana', 'orange']); // false

Searching Objects

keyExists('age', {'name': 'Jared', 'age': 29 }); // true
keyExists('title', {'name': 'Jared', 'age': 29 }); // false

You might wonder why you can’t just skip doing the loop and just return key in search. This won’t work when searching Objects because the in keyword is going to look for an index number not a string or Object key. You need to make sure that you first do the loop in case the object being searched is an Object, otherwise it’s an Array, if it makes it to that point at all after checking the constructor.

Qlass.js – Add Or Remove Classes To Elements and NodeLists

I created the Qlass.js micro JavaScript library after having been asked during an interview with LinkedIn to write a function for adding classes to an element. After that I refined the function to work better so I could use it for something I was asked to make as part of Google’s interview process, for which I also created the hasClass() and removeClass() functions to go along with the addClass() function. Having done that, I modified the functions so they would work as a library.

To use the library, simply pass an Element or HTMLCollection to the wrapper q(), and add/remove or check if it has a class.

For example:

var div = document.getElementsByTagName('div');

q(div).addClass('my-class');
q(div).hasClass('my-class');
q(div).removeClass('my-class');

This works for getting Elements by ID as well as with querySelector() and querySelectorAll().

var elem = document.getElementById('my-element');
q(elem).addClass('new-class').hasClass('my-class');

var links = document.querySelectorAll('a');
if (q(links).hasClass('link')) {
  q(links).removeClass('link');
}

You can also just skip setting up a variable and just pass the selected item into the wrapper directly.

q(document.querySelector('element')).addClass('thisClass');

If you try to pass in something that doesn’t exist, it will just return and not do anything. So, say you select an element or NodeList of elements that aren’t in the page, nothing will be done since there is nothing that can be done.

One more thing worth mentioning is you can log to the console, whatever you try passing to the wrapper.
This will display the Element or NodeList as it is in the console of the browser.

q(div).log();

Have you ever found yourself including jQuery in a page you’re making, simply for the ease of adding a class it provides? It’s something I’ve done before, and now with this library, won’t be doing anymore.

Fork Qlass.js on Github or contribute to it if you like. Any issues or bugs you find from using it please let me know.