19 Sep 2014, 00:00

New Ember Components Suite!

Introducing a new Ember Components suite!

Ember Components is a set of rich web components written for Ember.js that let you create an astonishing UI for ambitious web applications.

This project aims to be the successor of our Bootstrap for Ember project as all components on this suite are not bound to any specific CSS framework.

Github repo: https://github.com/indexiatech/ember-components

Demo & docs: http://indexiatech.github.io/ember-components

02 Aug 2014, 00:00

Ember Forms

Smart, Intuitive forms for Ember.js styled with Bootstrap, Multi layouts and Validation support.

As my favorite web framework is emberjs, I lately needed forms support for one of my projects with the following set of features in mind:

  • Styled for Bootstrap but easy to stil differently.
  • Different layouts such inline and horizontal
  • Validations where validation rules are defined in model/controller and form supports for:
    • Change color & icons when validation rule fails.
    • Show error message per form input.
    • Submit button with async support that changes its styles & get disabled during async call.

So here is the result: https://github.com/indexiatech/ember-forms

Demo & docs: http://indexiatech.github.io/ember-forms

02 Sep 2013, 00:00

Bootstrap for Ember - more than 100 stars in 1 week

This is awesome! Bootstrap for Ember got more than 100 github stars in less than a week,

Thanks for the great feedbacks, here’s an interesting tweet of the author of Handlebars and Ember.js, Yehuda Katz.

Visit the project: https://github.com/ember-addons/bootstrap-for-ember

29 Aug 2013, 00:00

Bootstrap for Ember v0.2.0 released

Few days ago I submitted a post about Bootstrap for Ember, We released today the 2nd minor version 0.2.0,

So far, version 0.2.0 contains the following components:

Project details:

Have fun!

26 Aug 2013, 00:00

Bootstrap for Ember is born

Bootstrap is an amazing set of pure CSS3 / HTML 5 components, while EmberJs amazes in its beauty of making web applications right.

You can just hook both projects together by using Bootstrap as is in Handlebars templates, But soon enough, you will find yourself asking questions sucha s:

  • How do I interact between Bootstrap events and Ember (such as Controllers)?
  • How to pass Bootstrap components data from Ember (such as Controllers)

I’ve seen few options about the integration between both, but:

  • They are not easy and fun to use, they make the ease of Bootstrap too complex.
  • They are not well documented.
  • Development is too slow, I haven’t seen anything new lately.

So! I’m excited about a project I’ve been working lately with some guys to integrate Bootstrap & EmberJs together in a way that doesnt make Bootstrap usage more complex than using it as-is but providing great integration with EmberJs components.

Links!

06 Aug 2013, 00:00

nodejs-model is born

I’ve been struggling lately to find an appropriate way to handle models correctly, In one hand, these noSQL DBs such CouchDB have great flexibility and I didn’t want to ruin that with a blowing up ORM framework, in the other hand once the application grows a little bit more than a contact list app, then things become messy.

While writing a larger app with Node, I find myself struggling with finding solutions to problems such: (there are few more but these are the main)

  • Validating a document (model) properties (application level) before storing it in the DB.
  • A minimal schema where each attribute is defined per model to ensure no allowed attributes leaks into the model.
  • Automatically convert a property value when a value is set.
  • Filter critical, sensitive attributes when transfering the model on the wire to external clients.
  • Updating an existing domain via an accessibility-aware method (you may want users to update their profile but not letting them directly change their password attribute)

So I couldn’t really find a good module to achieve all of that without sticking a giant into my lightweight app, so I built one, it’s named nodejs-model, available here: https://github.com/asaf/nodejs-model

For now, read the docs on the github repo for more info, i will post series of posts about nodejs-model in the near future.

10 Jul 2013, 00:00

Installing CouchDB instance on Amazon AMI using build-couchdb

{% img http://couchdb.apache.org/image/couch.png 160 180 Couch %}

This post explains how to install CouchDB on Amazon AMI using build-couchdb/

If you want to install couch from sources without build-couchdb tool, read: Installing CouchDB instance on Amazon AMI is a working link

build-couchdb does the following things:

  1. Install general dependencies via yum (such as gcc, ruby, automake, rubygems, etc.)
  2. Clone the ‘build-couchdb’ project, initalize and update its sub modules (will clone CouchDB itself, curl, gnulib, etc), These are all the dependencies that CouchDB needs in order to be compiled.
  3. Compiles all dependencies
  4. Compiles CouchDB linked with the compiled dependencies.

Okay, go grab coffee and lets start!

Launch Instance

Login into EC2, and launch a new instanc and choose Amazon Linux AMI, You can of course choose other Linux flavours (you are not going to use Windows right?),

But I really suggest going with Amazon AMI, it is EBS backed, ships with AWS tools installed and has a RHEL style package management using yum.

Once your instance is launched, SSH it, i’m sure you can do.

Now lets updated the system to latest:

sudo yum update

Installation

Installing OS dependencies

sudo yum install gcc gcc-c++ libtool curl-devel python27 help2man texinfo ruby-rdoc zlib-devel openssl-devel make automake rubygems perl git-core 
sudo gem install rake --no-ri --no-rdoc

If you don’t want to get into troubles where build-couch tries to patch autoconf-2.69 because of old python version (< 2.6) then link to python 2.7, at least during the time couch is being built.

sudo mv /usr/bin/python /usr/bin/python_org
sudo ln -s /usr/bin/python2.7 /usr/bin/python

Clone build-couchdb

git clone git://github.com/iriscouch/build-couchdb cd build-couchdb git submodule init git submodule update

Optional: Upgrade SpiderMonkey

build-couch uses not an official Mozilla SpiderMonkey version, but considered to be very stable, if you would like to replace it with other versions then do the following, You can safely skip this, proceed only if you have a good reason to do so

sudo yum install mercurial
cd
hg clone --verbose http://hg.mozilla.org/releases/mozilla-release  
cd mozilla-release
hg checkout FIREFOX_XX_0_RELEASE --clean #replace XX with the tag you wish
rm -rf ~/build-couchdb/dependencies/spidermonkey/js
rm -rf ~/build-couchdb/dependencies/spidermonkey/mfbt
cp -r js mfbt ~/build-couchdb/dependencies/spidermonkey

Building CouchDB and its dependencies

Now lets build Couch, you can replace 1.3.1 with any CouchDB release you wish to build, Or change the installation location.

sudo rake git="git://git.apache.org/couchdb.git tags/1.3.1" install=/usr/local/couchdb-1.3.1
sudo ln -s /usr/local/couchdb-1.3.1 /usr/local/couchdb

Now go eat something, drink (another?) coffee, take a shower (you will have time for all of them, I promise.)

You should expect the following output: > Plugins done

Now lets see what we’ve built:

cd /usr/local/couchdb-1.3.1
ls bin

> aclocal       autoheader2.13  autom4te2.69    autoreconf2.69  autoupdate2.59  ct_run       erl       genctd       ifnames2.62  pkgdata
> aclocal-1.11  autoheader2.59  automake        autoscan2.13    autoupdate2.62  curl         erlc      genrb        ifnames2.69  run_erl
> autoconf2.13  autoheader2.62  automake-1.11   autoscan2.59    autoupdate2.69  curl-config  escript   icu-config   js-config    run_test
> autoconf2.59  autoheader2.69  autoreconf2.13  autoscan2.62    couch-config    derb         genbrk    icuinfo      libtool      to_erl
> autoconf2.62  autom4te2.59    autoreconf2.59  autoscan2.69    couchdb         dialyzer     gencfu    ifnames2.13  libtoolize   typer
> autoconf2.69  autom4te2.62    autoreconf2.62  autoupdate2.13  couchjs         epmd         gencnval  ifnames2.59  makeconv     uconv

Lets execute Couch to ensure it can be executed.

sudo ./bin/couchdb

> Apache CouchDB 1.3.1 (LogLevel=info) is starting.
> Apache CouchDB has started. Time to relax.
> [info] [<0.32.0>] Apache CouchDB has started on http://127.0.0.1:5984/

You can open another terminal to ensure Couch replies properly:

curl http://127.0.0.1:5984

> {"couchdb":"Welcome","uuid":"9db29433ea76ccfaa81726f6ace742f4","version":"1.3.1","vendor":{"name":"The Apache Software Foundation","version":"1.3.1"}}

Configuration

To avoid breaking yum and other things, it is adviced to return the python binary link back to its original version

sudo rm /usr/bin/python
sudo mv /usr/bin/python_org /usr/bin/python

Run Couch on isolated user and correct files ownership

# add couchdb user
sudo adduser --system --home /usr/local/couchdb/var/lib/couchdb -M --shell /bin/bash --comment "CouchDB" couchdb

# change file ownership
sudo chown -R couchdb:couchdb /usr/local/couchdb/etc/couchdb /usr/local/couchdb/var/lib/couchdb /usr/local/couchdb/var/log/couchdb /usr/local/couchdb/var/run/couchdb

couch ini file

Lets create couch ini file

cat << 'EOF' > /usr/local/couchdb/etc/couchdb/local.ini
[couchdb]
#read more here: http://guide.couchdb.org/draft/performance.html
delayed_commits = false

[httpd]
port = 80
bind_address = 0.0.0.0
socket_options = [{recbuf, 262144}, {sndbuf, 262144}, {nodelay, true}]
WWW-Authenticate = Basic realm="administrator"
;WWW-Authenticate = bummer

[couch_httpd_auth]
require_valid_user = true

[log]
level = error

[admins]
EOF

Password protection

export PASS=`</dev/urandom tr -dc '12345!@#$%qwertQWERTasdfgASDFGzxcvbZXCVB' | head -c20; echo ""`
echo "admin = ${ADMIN_PASSWORD}" >> /usr/local/etc/couchdb/local.ini

Couch is smart enough to hash the passwords.

Logs Rotation

if [ ! -e "/etc/logrotate.d/couchdb" ]
then
  # add couch.log to logrotate
  sudo ln -s /usr/local/couchdb/etc/logrotate.d/couchdb /etc/logrotate.d/
  # change to daily rotation
  sudo sed -e s/weekly/daily/g -i /usr/local/couchdb/etc/logrotate.d/couchdb
  #logrotate -v -f /etc/logrotate.d/couchdb 
fi

Run CouchDB on startup

# run couchdb on startup
sudo ln -s /usr/local/couchdb/etc/rc.d/couchdb /etc/init.d/couchdb
sudo chkconfig --add couchdb
sudo chkconfig --level 345 couchdb on

sudo service couchdb status
#Apache CouchDB is not running.

sudo service couchdb start
#Apache CouchDB is running as process 5047, time to relax.

Now it’s really time to relax, enjoy :-)

10 Jul 2013, 00:00

Nodejs Deployment: Building and Configuring on Amazon Linux AMI

Logging in and updating system to latest

SSH your shiny new VM,

Now lets update the system to the latest:

sudo yum update

Install OS dependencies

We’r going to build Node.js from sources, some dependencies (such as gcc) are required:

sudo yum install gcc-c++ make openssl-devel git

Cloning n Building Node.js

cd
git clone git://github.com/joyent/node.git
cd node
git checkout v0.10.13 #check for other stable tags by executing 'git tag'
./configure --prefix=/usr/local/node
make
sudo make install

Go grab a cup of coffee… :-) …

Configuration

sudo useradd _yourappuser_
passwd _yourappuser_
sudo su - _yourappuser_

Put your app

Now put your app in ~, for instance:

cd
pwd
#/home/_yourappuser_
git clone _https://myhost.com/myapp myapp_

Init.d

We would like to have nodejs to start automatically as a service, to do so, lets create an init.d file Note: you have to change the properties in the file such as yourappuser, myapp to your app folder and server.js to your node app file.

cat << 'EOF' > /etc/init.d/nodejs

#!/bin/sh

#
# chkconfig: 35 99 99
# description: Node.js /home/yourappuser/myapp/app.js
#

. /etc/rc.d/init.d/functions

USER="_yourappuser_"

NODE_ENV="production"
DAEMON="/usr/local/node/bin/node"
ROOT_DIR="/home/yourappuser/myapp"

SERVER="$ROOT_DIR/server.js"
LOG_FILE="$ROOT_DIR/app.js.log"

LOCK_FILE="/var/lock/subsys/node-server"

do_start()
{
        if [ ! -f "$LOCK_FILE" ] ; then
                echo -n $"Starting $SERVER: "
                runuser -l "$USER" -c "NODE_ENV=$NODE_ENV $DAEMON $SERVER >> $LOG_FILE &" && echo_success || echo_failure
                RETVAL=$?
                echo
                [ $RETVAL -eq 0 ] && touch $LOCK_FILE
        else
                echo "$SERVER is locked."
                RETVAL=1
        fi
}
do_stop()
{
        echo -n $"Stopping $SERVER: "
        pid=`ps -aefw | grep "$DAEMON $SERVER" | grep -v " grep " | awk '{print $2}'`
        kill -9 $pid > /dev/null 2>&1 && echo_success || echo_failure
        RETVAL=$?
        echo
        [ $RETVAL -eq 0 ] && rm -f $LOCK_FILE
}

case "$1" in
        start)
                do_start
                ;;
        stop)
                do_stop
                ;;
        restart)
                do_stop
                do_start
                ;;
        *)
                echo "Usage: $0 {start|stop|restart}"
                RETVAL=1
esac

exit $RETVAL

EOF

Add execution permission to the nodejs init script

sudo chmod +x /etc/init.d/nodejs

Pre Routing to port 80

Linux does not allow non super users to listen to ports < 1024, assuming your application listen to port 8080, You would probably like to pre route any traffic arriving from port 80 to your node app that listens to port 8080

You can do this by the pre routing nat capability of Iptables

chkconfig iptables on
service iptables start
iptables -t nat -A PREROUTING -p tcp --dport 80 -j REDIRECT --to-port 8080
iptables -t nat -A PREROUTING -p tcp --dport 443 -j REDIRECT --to-port 8443 #if you want SSL too
service iptables save

Configuring node-http-proxy

It is common to install http proxies such as nginx on front of nodejs, This architecture has many advantages such as raising security level, listening natively to port 80, load balancing, multiple node apps support via url rewrite, etc…

I personally think that the best approach, which is very native to node apps is to use https://github.com/nodejitsu/node-http-proxy,

Which have several advantages:

  1. Reverse proxies incoming http.ServerRequest streams, WebSockets, HTTPS
  2. Minimal request overhead and latency
  3. Battled-hardened through production usage
  4. Very native for nodejs apps

TODO: Will post more details in the future but you can simply visit “https://github.com/nodejitsu/node-http-proxy” site.

https://github.com/pkrumins/nodejs-proxy

09 Jul 2013, 00:00

Q promises with CoffeeScript

If you are using NodeJS (or for some other reasons you need to do many async invocations), then you probably came across “https://github.com/kriskowal/q”.

Using Q with CoffeeScript is great as code blocks are much more organized and looks cleaner.

Here’s an example:

Defining promises with CoffeeScript:

q = require 'q'

exports.hello = () ->
  d = q.defer()
  d.resolve 'hello'
  d.promise

exports.world = () ->
  d = q.defer()
  d.resolve 'world'
  d.promise

exports.die = () ->
  d = q.defer()
  d.reject 'bye world'
  d.promise

And here are Mocha sample of Q propagations and error handling

assert = require 'assert',
promises = require './promises'

describe('Promises', () ->
  it 'Simple', (done) ->
    promises.die().then(
      (val) =>
        #handle val
      (err) =>
        assert.equal err, 'bye world'
        done()
    )

  it 'Test Promises Propagation', (done) ->
    promises.hello().then(
      (val) =>
        assert.equal val, 'hello'
        promises.world()
    ).then((val) =>
        assert.equal val, 'world'
        done()
    )

  it 'Test promises propagation with error', (done) ->
    promises.hello().then(
      (val) =>
        assert.equal val, 'hello'
        promises.die()
    ).then((val) =>
        promises.world()
    ).then(
      (val) =>
        #we wont get here
      (err) =>
        assert.equal err, 'bye world'
        promises.world()
    ).then((val) =>
      assert.equal val, 'world'
      done()
    )
)

08 Jul 2013, 00:00

Accessing EmberJS Controller from different scopes

Sometimes you want to use one ember controller from another, This simply can be done by “asking” ember access to the other controller:

App.PostController = Ember.ArrayController.extend({
    ...
})

App.CommentsController = Ember.ArrayController.extend({
  needs: "post"
});

Then you can simply use the Post controller in Comments’s template:

{% raw %}

<!-- use comments template -->
{{ controllers.post }}

{% endraw %}

This works pretty nice, especially when you have nested routes (you surely want to display some data of the post when you are in the post’s comments context.),

But what if you need to access a controller outside of Ember’s scope?

For instance, you may have a websocket listening to a certain top level event and would like to update a certian controller when data is pushed,

You can use the container lookup to retrieve a controller instance:

// Somewhere out of Ember`s scope
ss.event.on('incomingComment', function(comment) {
    commentsController = App.__container__.lookup('controller:Comments')
    commentsController.pushObject(comment)
})