About

mFabrik Blog is about mobile and web software development, open source and Linux. We tell exciting tales where business, technology, web and mobile convergence.

Creative Commons License
This work is licensed under a Creative Commons Attribution 3.0 Unported License.

Everyone loves and hates console.log()

Posted on March 15, 2011

console.log()  is the best friend of every Javascript junkie. However, the lack of it isn’t. console.log() function is only available in Webkit based browsers and with Firebug in Firefox. It’s the infamous situation that someone leaves console.log() to Javascript code, doesn’t notice its presence, commits the file and suddenly all Javascript on the production server stops working for Internet Explorer users….

To tackle the lack of console.log() problem there are several approaches.

Use dummy placeholder if console is missing

This snippet wraps console.log (need to repeat for console.error etc.):

// Ignore console on platforms where it is not available
if (typeof(window["console"]) == "undefined") { console = {}; console.log = function(a) {}; }

Pros

  • Easy

Cons

  • Need to add to every Javascript file
  • Messes with global namespace

Use module specific log function

This makes your code little bit ugly, more Java like. Each Javascript module declares their own log() function which checks the existence of console.log() and outputs there if it’s present.

mfabrik.log =function(x) {
 if(console.log) {
 console.log(x);
 }
}

mfabrik.log("My log messages")

Pros

  • Easy to hook other logg
  • You can disable all logging output with one if

Cons

  • Not as natural to write as console.log()
  • Need to add to every Javascript module

Preprocess Javascript files

Plone (Kukit / KSS) uses this approach. All debug Javascript is hidden behind conditional comments and it is filtered out when JS files are bundled for the production deployment. (The preprocessing code is here in Python for those who are interested in it).

if (_USE_BASE2) {
 // Base2 legacy version: matchAll has to be used
 // Base2 recent version: querySelectorAll has to be used
 var _USE_BASE2_LEGACY = (typeof(base2.DOM.Document.querySelectorAll) == 'undefined');
 if (! _USE_BASE2_LEGACY) {
 ;;;     kukit.log('Using cssQuery from base2.');

Pros

  • Makes production Javascript files lighter
  • Make production Javascript files more professional – you do not deliver logging statements indented for internal purposes for your site visitors

Cons

  • Complex – preprocessing is required

Commit hooks

You can use Subversion and Git commit hooks to check that committed JS files do not contain console.log. For example, Plone repositories do this for the Python statement  import pdb ; pdb.set_trace() (enforce pdb breakpoint).

Pros

  • Very robust approach – you cannot create code with console.log()

Cons

  • Prevents also legitimate use of console.log()
  • Github, for example, lacks possibility to push client-side commit hooks to the repository cloners. This means that every developer must manually install commit hooks themselves. Everything manual you need to do makes the process error prone.

Other approaches?

Please tell us!

Get developers  Subscribe mFabrik blog in a reader Follow me on Twitter

WebGL on Android WebKit browser demoed by Sony

Posted on February 25, 2011

This definitely looks promising.

3D accelerated effects are no longer the monopoly of desktop beta browsers (Firefox 4, Google Chrome 9… I am looking at you). Sony demoes Javascript WebGL on its Xperia handset. WebGL would be major turning point for mobile gaming, as it would lower the barrier of enty for building cross-platform mobile games.

Not just games, but the whole web user experience will be redefined when you can finally push impressive visuals to the site visitors.

I can so see the demo scene of 90s coming back soon…

Get developers  Subscribe mFabrik blog in a reader Follow me on Twitter

Firefox 4 is awesome – switching back to it

Posted on February 13, 2011

Firefox 4 is awesome.  After being a Google Chrome user for one year, I tried Firefox 4 beta 11. I am switching back to Firefox as my primary browser. As a web power user, I found Firefox 4 gives me more efficient tools to get my work done.

  • It is faster, especially it launches and opens new tabs faster than Chrome
  • User interface has some nice new innovations, like non-intrusive Download pop-ups and password update dialogs
  • Tab groups (Panorama) allows me to create different “workspaces” for leisure time, like Facebook surfing, and work time containing tabs for corporate email and calendar
  • Sync works across my different computers, though Chrome can also do this nowadays

Tab groups

I have been experiementing with following tab groups which mostly correspond my different “behavior modes” I have on when working on a computer

  • Work tabs: email, calendar, docs
  • Social tabs: Facebook, Twitter and such
  • Plone, Python and other programming related: All documents and links open, for example copy-pasting them to IRC discussion to give support for someone

Note that I had to add “Tab group” button manually to toolbar, as it was not added there automatically after update. Just right click on empty space next to tabs and choose “Customize”

Add-ons

Some add-ons I am using and I haven’t found equally good alternatives on Google Chrome

I still wish to have add-on sync, so I wouldn’t need to install add-ons separately on each computer.

Firefox for Mobile (Fennec) does not yet provide as solid experience as its desktop counterpart. Mobile Firefox team definitely need to add some speed to its engine before I can consider it alternative for WebKit on my Android phone. But when it gets there and the sync feature is in the place, I’ll start using it instantly.

Get developers  Subscribe mFabrik blog in a reader Follow me on Twitter