Elovalo - Sneak Peek at Web IDE

Besides working crazy hours at a local startup for minimal pay I have found time to develop some cool stuff on my spare time. I guess you could classify Elovalo Web IDE into that category. Elovalo itself is a combination of LED cube and a pedestal.

We used to program effects for it using C. That tends to be a little bit slow and painful although we do have a way to visualize the code without having to use actual hardware. The idea of a web based IDE has been bubbling in my mind for quite a while. What if we just skipped all that boring C code and wrote effects in JavaScript instead. And better yet what if we had realtime visualization utilizing WebGL?

As it happens I have managed to achieve just that. You can see some preliminary results below. Code jockeys might also like to take a look at the source code to see how you might end up with something like that.

The environment is still missing various doodads but it's slowly getting there. We aim to demonstrate the first production version of it at a local demoscene event, Instanssi, at the beginning of March. Anyway, enjoy the demo till then!

 

Getting Most Out of JavaScript Console

Many JavaScript environments come with a console object. It provides a simple logging mechanism by default and then some. These days you can perform even profiling and get traces using it. Furthermore it is possible to style the output if you are hipster enough.

It is usually a good idea to stub console as it might not exist by default. Basically you just check whether the object exists in the global scope and if it doesn't you'll create a dummy one. Clint Harris shows one way to achieve this .You could use the same method to implement a production version of the console object to hide some of the output from the users.

Simple Logging

The most basic way to use console output is simply to invoke console.log. Besides this you might want to use console.warn or console.error depending on the context of the message. The inspector will style the message accordingly.

Sometimes rather than calling one of these directly you might want to apply or call it instead. There is one gotcha, though. You must provide console context to it. So instead of doing something like console.log.apply(undefined, ['foo', 'bar']) you must invoke console.log.apply(console, ['foo', 'bar']) for it to work.

Note that you can bind the context permanently using something like console.log = console.log.bind(console). You could easily produce prefixed versions simply by passing the prefix after the context (ie. console.log.bind(console, 'prefix')).

Grouping

Both Chrome and Firefox (via Firebug) support groups. Logs performed between group and groupEnd commands will show up in a nested way at your inspector. This can be handy for keeping your output nice and tidy. Chrome documentation provides a good example of this.

Profiling

Profiling works in the same manner. You just operate using console.profile and console.profileEnd. Execute something you want to profile between those invocations. Chrome documentation illustrates this as well.

Styling the Output

It can be handy to style the output a little bit to make it more readable. On browser environment you may use a bit of CSS and %c. Specifically it works like this: console.log('%cSo cool', 'color: white; background: black'). It is important to note that %c must be at the beginning. It simply won't work as you might expect otherwise.

As you might guess this doesn't quite work in the Node world. Instead you have to apply ANSI escape codes. For instance the following snippet would print out text in red: console.log('\033[31mso red\033[0m'). There's a color code in the beginning, actual content and a reset at end. Given the syntax isn't that quite nice you can find many packages solving this problem at NPM.

Conclusion

I hope this post gave you some new perspective to that good old JavaScript console. In case you want to know more about the topic I recommend checking out Chrome documentation and their API. If I managed to miss something obvious do let me know in the comments section!