Local Search Application

I wrote an application that will search through local data store. It can be easily modified to browse remote db also. By default is searches items in a wiki articles, and uses local array-object as storage.
It is written with the help of jQuery and Coffeescript.
I have to mention that it is not structured in object-oriented or modular way. This code is just a basic idea implemented quickly after inspiration. Inside of bigger application of maybe framework it definitly needs structure, optimization, testing and maybe refactoring.

Code can be found here:

Here is a screenshot:

Thanks for visiting my blog.

Mediator design pattern with coffeescript

This is second pattern in series of Javascript design patterns implemented with coffeescript.
It can be found here:

Coffeeversion:

//
#Behavioral
#Mediator - classical object-oriented design patterns with Coffeescript
#Global objects are here just for testing in the browser
this.mediator = 
    mediate:(x)->
        if x is "from obj1"
            obj2.receive(x)
        else
            obj1.receive(x)
        
this.obj1 = 
    send:(message)->
        mediator.mediate(message)
    receive:(x)->
        console.log " I am obj1, I just received this message from " + x + " with the help of mediator"

this.obj2 = 
    send:(message)->
        mediator.mediate(message)
    receive:(x)->
        console.log " I am obj2, I just received this message from " + x + " with the help of mediator"
//

Compiled to vanillajs:

//
// Generated by CoffeeScript 1.6.2
(function() {
  this.mediator = {
    mediate: function(x) {
      if (x === "from obj1") {
        return obj2.receive(x);
      } else {
        return obj1.receive(x);
      }
    }
  };

  this.obj1 = {
    send: function(message) {
      return mediator.mediate(message);
    },
    receive: function(x) {
      return console.log(" I am obj1, I just received this message from " + x + " with the help of mediator");
    }
  };

  this.obj2 = {
    send: function(message) {
      return mediator.mediate(message);
    },
    receive: function(x) {
      return console.log(" I am obj2, I just received this message from " + x + " with the help of mediator");
    }
  };

}).call(this);

//

Thanks for visiting my blog.

superTextArea app as jQuery plugin

I rewrote superTextArea app to be jQuery plugin.
It is here: https://github.com/carousel/superTextAreajQuery

Thanks for visiting my blog.

superTextArea application - HTML textarea on steroids

I wrote small front-end app, that can be found here: https://github.com/carousel/chatBoySlim

Snapshot:

It is HTML textarea, enhanced with some options for styling and a character counter at the bottom. In the future I have a plan to add support for db communication and web-sockets.

Thanks for visiting my blog.

Classic design patterns in coffeescript

Today I am going to start a series of posts, in which I want to implement classic OO design patterns with the help of coffeescript.  In case you don't know what is coffeescript and what are the benefits of using it, I highly recommend visiting official coffee site: http://coffeescript.org/, and looking for some tutorials online.

So, to start let's define what is design pattern ?

Wiki article says:

In software engineering, a design pattern is a general reusable solution to a commonly occurring problem within a given context in software design

They were introduced to the OO world by the work of GoF ( gang of four ) group, and their famous book:

 http://www.amazon.com/Design-Patterns-Elements-Object-Oriented-ebook/dp/B000SEIBB8

Patterns in this book are discussed from the point of  classic OO languages ( with strong type system, class-based inheritance ...)

Javascript doesn't support these features, but provide some more flexibile and modern paradigms for solving  problems.

It includes prototype based inheritance, no classes, dynamic type system, no block scope, functions as first class. Writing design patterns with Javascript can be challenging. JS is very flexibile, since same things can be done "in more than one way".

First patterns, that I am going to introduce is  Iterator

  

Implementation in coffeescript:

//
# Behavioral 
# Iterator design pattern with Coffeescript
# Object is explicitly exported in global namespace ( for testing with console.log in the
# browser )
arr = ["begin","middle","end"]

i = 0 
len = arr.length

this.obj = 
    prev:()->
        if arr[i] is "begin"
            obj.end()
            return arr[i]
        arr[--i]

    current:()->
        arr[i]

    next:()->
        if arr[i] is "end"
            obj.begin()
            return arr[i]
        arr[++i]

    begin:()->
        i=0

    end:()->
        i=arr.length-1

//

After compiling in native Javascript:

//
// Generated by CoffeeScript 1.6.2
(function() {
  var arr, i, len;

  arr = ["begin", "middle", "end"];

  i = 0;

  len = arr.length;

  this.obj = {
    prev: function() {
      if (arr[i] === "begin") {
        obj.end();
        return arr[i];
      }
      return arr[--i];
    },
    current: function() {
      return arr[i];
    },
    next: function() {
      if (arr[i] === "end") {
        obj.begin();
        return arr[i];
      }
      return arr[++i];
    },
    begin: function() {
      return i = 0;
    },
    end: function() {
      return i = arr.length - 1;
    }
  };

}).call(this);
//

All code can be foud on my GitHub page
Happy Coding

Coffeescript + Requirejs

There are great things that can really help you in your development workflow. One of them is Coffeescipt.
Coffeescript alone is a great concept that tries to avoid "bad parts and embrace good parts of Javascript".
But when you combine Coffeescript with one more powerful tool like Requirejs, then nothing can stop you from writins amazing apps.
Since I am using Requirejs for a while, I was trying to find a way not to compile manually Coffee code from the main require file. I found this plugin which lets you write you coffee code, without worry about compiling. How does it work ?

First go to git-plugin page and follow instructions how to install everything. It is pretty straightforward. After that it is possible to write code like this:

//
require([ "modules/cs!modules/iterator","libs/jquery-1.9.1"],  
    (iterator,jquery) ->
    $("button").on("click",(e)->
    console.log iterator.next()
        )
    )
//

This great plugin auromatically compiles coffeescript code to native javascript. It is important to include plugin module properly ( with exclamation point ). The good part is that plugin will load code from the coffee version, and convert it to javascript.

Here is where magic happens:

//
    load: function (name, parentRequire, load, config) {
            var path = parentRequire.toUrl(name + '.coffee'); // plugin is reading file with coffee extension
            fetchText(path, function (text) 
//

Happy Coding

A taste of functional javascript

There is some real power in functional programming, compared to imperative which is a basis for OOP paradigm. One of them is immutable state.
In a languages that supports state change ( imperative family ) mutability is a double edged sword - you can create awesome control flow ( if you know ) or you can quickly get lost in a jungle of your own variables.
Functional paradigm elegantly avoids state change, by not separating function from the value that is returned. So in FP ( functional programming ) function IS a value. There are some variations and some languages supports state change and mutability to the certain degree, but when we talk about FP we think mostly about functions that are values.

Here is one example of FP. It is written first in Coffeescript, and then in vanilla Javacript:

# data
arr = ["chicken","pig","donkey","horse","cow"]

#main function definition
each = (data,iterator,transform)->
    iterator(data,transform)

#transformer
toUpper=(args)->
    console.log args.toUpperCase() + " farm"

#iterator
iterate = (data,upper)->
    for key,val in data
        upper(key)

#call everything
each(arr,iterate,toUpper)
#

Vanilla Javascript ( compiled ):

// Generated by CoffeeScript 1.6.2
(function() {
  var arr, each, iterate, toUpper;

  arr = ["chicken", "pig", "donkey", "horse", "cow"];

  each = function(data, iterator, transform) {
    return iterator(data, transform);
  };

  toUpper = function(args) {
    return console.log(args.toUpperCase() + " farm");
  };

  iterate = function(data, upper) {
    var key, val, _i, _len, _results;

    _results = [];
    for (val = _i = 0, _len = data.length; _i < _len; val = ++_i) {
      key = data[val];
      _results.push(upper(key));
    }
    return _results;
  };

  each(arr, iterate, toUpper);

}).call(this);
//

Notice the elegance of  functions passing as arguments to other functions, without effecting anything outside them. It is called function composition, and it is the main "sugar" of FP.

Happy Coding