BENNY BOTTEMA

Javascript doesn’t natively support enums and it’s not included in the ECMAScript specification. Here are a couple of ways to do that in Javascript

What is an enum?

Essentially an enum is a set of unique named constants, like UP, DOWN, NORTH, WEST, LEVEL1, LEVEL2 etc. This is a great facility, because you can use the enum names as labels or flags or modes or status or whatever you like in a very readable way. Here’s an example from Java:

This is great right? Enums work because the constants get unique values in Java. You never need to know those values, because you equate the enum constants directly, not by their value:

You don’t do if (getDirection() == 0) (although this even works if UP is the first enum in the list): you compare readable names not values.

Enums in Javascript

To achieve this in Javascript, you need to emulate an enum, which is almost the same thing, except you explicitly assign the unique values initially. Observe:

The values don’t matter, as long as they are unique. They can be numbers, decimals, strings, arrays or anything else. Numbers are common, but the following pattern is often used as well:

The advantage of this is that when you print out myRocket.direction you don’t get a number, but the name of the constant. This is useful for logging and debugging.

Enums in Javascript with Lodash

I keep coming back to the awesome bag of tricks that is Lodash and I keep learning new things about it every day.

Here’s a way to create an enum, without explicitly defining their values:

What happens here? _.keyBy() creates a { key: value } object for each element in the given array and uses the function argument (second parameter) to produce the keys. _.identity simply returns the value as the key, so you end up with exactly the same as { LEFT: 'LEFT', RIGHT: 'RIGHT', UP: 'UP', DOWN: 'DOWN' }.

What do you do when you want to show someone all your skills ever? You make a tag cloud ofcourse!

(more…)

read on

The thing with directives, controllers, scope, link and compile is: they all share keywords and concepts. This puts so much trees in front of the forest, that until you’re clear on the individual underlying concepts you have no hope of understanding the abstractions made on top of it. And so it took me a long time to understand how I can make directives/controllers share state, even if they’re not nested.

That last part is important, because in essence, you can’t share data unless you also share an ancestor. The only exception to this is if you’re using decoupled communication through events and eventlisteners.

The example we’re not doing today

Ok, let’s dive into today’s problem we’re not solving: A form with several inputs, and each one have a tooltip, except the tooltip should be displayed on a specific location, the same for all inputs. Like an information box… in fact it’s not a tooltip at all.

read on

16-05-2015: The code of this post was turned into a GitHub project called angular-logger

Let’s start by prepending timestamp and class name

Recently I’ve been on the lookout for a way to configure Angular’s logging module. Specifically, I wanted its output prepended with a date and a context string, say a ‘class’ name or name of the controller doing the logging.

Something like this (example from java):
"2013-12-23 19:44:39,619 INFO [java.sql.DatabaseMetaData]: Table not found: Employees"

Also, if we enable per-class loggers, how can we mute logging for certain classes?

What I found was a rather… extensive a solution utilizing Angular’s built in support for decorators. Ofcourse, the fact it actually works is great and it’s a nice insight into some advanced javascript and Angular concepts (I especially found the requirejs / angular combo of interest), but I think it can be much much simpler.

read on