RiotJS reading

http://www.ersinakinci.com/riot-js-gotchas/
http://happy-css.com/lessons/riotjs/
http://riotgear.js.org/
http://ricostacruz.com/cheatsheets/riot.html

Compile preprocessors like Coffeescript / SASS on saving in Komodo Edit

Be able to customise the editor is very convenient.

A normal approach is running a "watcher".
This approach is to call the compiler on saving (check Trigger > After save in Marco properties)
The code can be extends for other usage! : )

Note that Komodo has built-in syntax checking for SASS. I want this be off because it generates ".sass-cache" without giving me result. Check it off in preference window.

If something wrong, the command line output will tell you. That's enough : )
We can further "parse" the output to quick click to show the wrong code.

// Run after file saved
// 
// Install Sass: sudo gem install sass
// Install CoffeeScript: npm install -g coffee-script
komodo.assertMacroVersion(3);
var koDoc = ko.views.manager.currentView.koDoc;
var input = koDoc.file.dirName + '/' + koDoc.file.baseName;
var barename = input.substr(0, input.length - koDoc.file.ext.length);

switch (koDoc.file.ext) {
    case '.sass':
        var output =  barename + '.css';
        ko.run.runEncodedCommand(window, 'sass --no-cache ' + input + ' ' + output);
        break;
    case '.coffee':
        ko.run.runEncodedCommand(window, 'coffee --map --compile ' + input);
        break;
    default:
        break;
}

JS OOP with publish/subscribe custom events using jQuery

As the Javascript script grows, traditional programming style will result in messy code. With the help of custom event and OOP, we can keep the code clean, easy to extends and maintain. Below is the snippet comes from my lesson:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
// For testing
function puts(text) {
    document.write("<br>" + text);
}

// Thanks to http://javascript.info/tutorial/all-one-constructor-pattern
function BaseClass() {
 // Private, invisible to child class and outside
 var x;

 // In lost context, using "self" to reference
 var self = this;

 // Public
 this.a = 'a freely property';

 // Public access to restricted var
 this.propertyX = function(_x) {
  if (typeof _x != 'undefined')  x = _x;
  return x;
 }
 this.actionY = function(message) {
  // Bla bla
  // "Publish" an event, pass params as an array
  $(self).triggerHandler('custom_event', [message]);
 }
 $(self).on('custom_event', function(event, message) {
  puts("Base: " + message);
 });
}

function ChildClass() {
 // Inherit, able to have many parents
 BaseClass.apply(this);
 var self = this;
 // To call parent implementation, keep a reference to it
 var parent = { actionY: this.actionY }

 this.actionY = function(message) {
  // Super call, note the params as an array
  parent.actionY.apply(this, [message]);
  // Customize here ...
 }

 this.actionZ = function() { /* Other.. */ }

 $(self).on('custom_event', function(event, message) {
  puts("Extended: " + message);
  puts("With access to: " + self.a);
 });
}

// Now it's time to play with class
c = new ChildClass();
c.propertyX(10);
puts(c.propertyX());
c.actionY('JS OOP is tricky');
</script>