Desember 04, 2012

Tema skripsi untuk JavaScript Ninja wannabe


Berikut saya berikan daftar mengenai tema skripsi bagi mahasiswa yang akan mengambil skripsi, khususnya bagi yang berminat di dunia JavaScript. Semua yang saya uraikan disini meliputi JavaScript di sisi server maupun di sisi client. Istilah JavaScript ninja sebenarnya merupakan istilah informal yang merujuk pada seorang developer dengan kemampuan pemrograman JavaScript yang sangat bagus. Istilah ini bahkan digunakan dalam buku yang ditulis oleh John Resig (you know him, right?): Secrets of the JavaScript Ninja (http://jsninja.com). Nah, jika anda ingin menjadi JavaScript ninja, mengapa tidak mulai mendalami dari saat kuliah dan mengambil materi skripsi tentang JavaScript? Silahkan ambil yang anda sukai dari daftar berikut ini dan gunakan kreativitas anda untuk membuat daftar ini menjadi judul yang lengkap:
  1. Membuat plugin Node.js menggunakan node-gyp (https://github.com/TooTallNate/node-gyp)
  2. Interoperabilitas Google Dart dengan JavaScript (http://www.dartlang.org/articles/js-dart-interop/)
  3. Behaviour-Driven Development menggunakan Jasmine (http://pivotal.github.com/jasmine/)
  4. Headless full-stack testing di Node.js menggunakan ZombieJS (http://zombie.labnotes.org/)
  5. Asynchronous testing menggunakan Mocha (http://visionmedia.github.com/mocha/)
  6. Headless testing menggunakan PhantomJS (http://www.phantomjs.org danhttps://github.com/ariya/phantomjs/wiki/Headless-Testing)
  7. Pengembangan aplikasi berbasis pattern Resourve-View-Presenter menggunakan FlatironJS (http://flatironjs.org)
  8. Aplikasi CLI (Command Line Interface) menggunakan FlatironJS (http://blog.jit.su/writing-cli-apps-with-flatiron)
  9. Navigation scripting dan utilitas testing menggunakan CasperJS (http://casperjs.org)
  10. Semantic template menggunakan Handlebars (http://handlebarsjs.com/)
  11. Modernizr sebagai peranti bantu pengembangan aplikasi HTML5 dan CSS3 (http://modernizr.com)
  12. Asynchronous web testing menggunakan Mocha (http://visionmedia.github.com/mocha/)
  13. Pengembangan aplikasi cloud menggunakan Node.js
  14. Pengembangan aplikasi web menggunakan NoSQL: studi kasus Node.js dan Mongoose
  15. Teknologi middleware Connect - termasuk pengembangan plugin Connect (http://www.senchalabs.org/connect/)
  16. Cross-browser websocket untuk aplikasi realtime menggunakan Socket.IO (http://socket.io)
  17. Pengembangan plugin GruntJS (http://gruntjs.com)
  18. Framework / Pustaka MVC di JavaScript (lihat daftarnya di http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/)
  19. Pengembangan aplikasi web menggunakan ExpressJS (http://expressjs.com/)
  20. Membangun aplikasi dengan teknologi obyek di JavaScript menggunakan oolib (http://idya.github.com/oolib/)
  21. Membangun aplikasi desktop berbasis HTML5, CSS3, dan JavaScript menggunakan TideSDK (http://www.tidesdk.org/)
Tentu saja ini bukan daftar yang lengkap di dunia JavaScript yang sedemikian kompleks. Jika ada tambahan lagi, catatan ini akan saya edit. Jadi, selamat menikmati proses menjadi JavaScript ninja!

Oktober 02, 2012

Git dan Github: Petunjuk Awal

Mengambil dari repo
  • git clone [lokasi]
Contoh:
  • git clone https://github.com/bpdp/buku-cloud-nodejs.git (jika menggunakan https)
  • git clone git://github.com/bpdp/buku-cloud-nodejs.git (jika menggunakan git)
Membuat repo baru di lokal
  • Buat direktori baru
  • Masuk ke direktori baru tersebut
  • Menambahkan semua file:
    • git add -A
  • Commit:
    • git commit -m "First commit - initializing empty repo"
Melihat status repo lokal
    • git status
File baru di repo
  • Menambahkan file
    • git add [file]
  • Commit:
    • git commit -m "Menambahkan file untuk ..."
  • push ke github
Mengedit file
  • Edit file
  • Commit:
    • git commit -m "Pesan"
  • push ke github
Push ke github
  • Menetapkan repo:
    • git remote add origin
      • contoh: git remote add origin https://github.com/bpdp/buku-cloud-nodejs.git
  • Push:
    • git push origin master

Agustus 24, 2012

Quick and Dirty Hack: Memeriksa dan Membandingkan Versi NodeJS

Salah satu "masalah" dari NodeJS adalah siklus rilis yang saya pikir "terlalu cepat". Seringkali bolak-balik ke website NodeJS untuk melihat apakah sudah ada rilis stabil terbaru atau belum. Sebenarnya tidak harus seperti itu, hanya saja, saya termasuk manusia aneh yang menyukai berada di posisi bleeding edge, jadi setiap ada rilis stabil terbaru, rasanya hidup tidak lengkap jika tidak menggunakan rilis terbaru. Hehehe ...

Nah, untuk keperluan itu, karena saya "capai" bolak-balik, maka saya pakai "script" untuk mengotomatiskan pekerjaan saya. Sederhana saja dan blatantly copied dari contoh di node.io. Untuk menggunakan script ini, silahkan install dulu node.io dan nanti sesuaikan lokasi modul ini di komputer anda:



#!/usr/bin/env node.io

var nodeio = require('/opt/software/nodejs/lib/node_modules/node.io');

exports.job = new nodeio.Job({
  input: false,
  run: function () {
    var url = "http://www.nodejs.org/download";
    this.getHtml(url, function(err, $) {
      if (err) {
        console.log(err);
        this.exit(err);
      } else {
        ver = $('b').text;
        console.log('Latest version: ' + ver);
        console.log('Local version: ' + process.version);
      }
    });
  }
});


Script ini (checknode.js) saya chmod +x dan saya letakkan di $PATH, jadi sewaktu-waktu ingin memeriksa, tinggal jalankan script ini:

[bpdp@bpdp-arch checknode]$ checknode.js 
Latest version: v0.8.8
Local version: v0.8.8
[bpdp@bpdp-arch checknode]$


Sayangnya, website NodeJS ini belum meng-embedd data semantik di dalamnya sehingga saya hanya berpatokan pada tag HTML Bold yang menandai versi stabil terbaru dari NodeJS. Akibatnya ya nanti jika struktur isi website NodeJS berubah, maka script ini juga akan "hancur". Lebih bagus jika website NodeJS menggunakan ontologi untuk software seperti The Software Ontology. Well, probably someday :)

Sebenarnya script ini bisa ditambahi fitur untuk mendownload versi baru (jika ada versi baru), tapi nanti dulu deh. Not so important. Yang penting ini dulu saja. Enjoy!

Agustus 23, 2012

Arch Linux Package for ArangoDB

Finally I can finish ArangoDB package PKGBUILD for Arch Linux. The people at triAGENS are helpful. Have to say thank you for their help, especially @steemann, @loremsqlsum, and @fceller. The package can be installed just by using yaourt -S arangodb.

The package PKGBUILD can be downloaded from https://aur.archlinux.org/packages.php?ID=62227



Enjoy!

Agustus 21, 2012

Change Python Interpreter Temporary (python3 -> python2)

I came across this difficulty when I try to install ArangoDB. It comes with V8 Javascript engine from Google bundled in. Installing V8 requires Python 2, not Python 3 which is the default in my Arch Linux box.

[bpdp@bpdp-arch V8]$ ls `which python`
lrwxrwxrwx 1 root root 7 Apr 24 06:48 /usr/bin/python -> python3
[bpdp@bpdp-arch V8]$

Luckily, V8 uses "#/usr/bin/env python", not "#/usr/bin/python". To change this behaviour, all I have to do is just ask "env" to use my python2 interpreter. Here's how:

1. Create symlink to python2 under the name "python"
I put the symlink into my "$HOME/bin" directory.
$ cd ~/bin
$ ln -s /usr/bin/python2 python

2. Put into PATH

$ export PATH=~/bin:$PATH

"~/bin" should preced $PATH because env use the first setting.

[bpdp@bpdp-arch arangodb]$ which python
/home/bpdp/bin/python
[bpdp@bpdp-arch arangodb]$ env python
Python 2.7.3 (default, Apr 24 2012, 00:06:13) 
[GCC 4.7.0 20120414 (prerelease)] on linux2
Type "help", "copyright", "credits" or "license" for more information.
>>> 

There you go!

Agustus 16, 2012

NodeJS Installation Without OS Package Management

I use Arch Linux for all my OS activities. Arch Linux has NodeJS package and can be easily installed using pacman -S nodejs but you may see that NodeJS has fast release cycle that my Arch Linux package is sometimes left behind and also sometimes I want to use a specific version (for example, Ace - and editor part of Cloud9 IDE - can not work with NodeJS 0.8.x, it needs 0.6.x). Under this scheme, it can be difficult to deal with OS package management. That said, I need to use my own way to resolve this.

So, here is the way to solve the problem. Download the binary version of NodeJS or directly go to http://nodejs.org/dist/ and get the one you need. Extract into specific directory then setup some environment variables into .bashrc so that it will be read automatically whenever I login, or put that into a file and source it whenever I need it. That's all. The details will follow if you are really helpless.

1. Download the binary version. Here I use version 0.8.7:

[bpdp@bpdp-arch nodejs]$ ls -la
total 4320
drwxr-xr-x  2 bpdp users    4096 Aug 17 06:08 .
drwxr-xr-x 22 bpdp users    4096 Aug 16 16:17 ..
-rw-r--r--  1 bpdp users 4401729 Aug 16 06:19 node-v0.8.7-linux-x86.tar.gz
[bpdp@bpdp-arch nodejs]$ 

2. Extract into the directory of your own choice:

[bpdp@bpdp-arch software]$ tar -xzvf ~/master/nodejs/node-v0.8.7-linux-x86.tar.gz
[bpdp@bpdp-arch software]$ ln -s node-v0.8.7-linux-x86 nodejs
[bpdp@bpdp-arch software]$ ls -la
....
....
drwxr-xr-x   6 bpdp users  4096 Aug 16 06:18 node-v0.8.7-linux-x86
lrwxrwxrwx   1 bpdp users    21 Aug 17 06:37 nodejs -> node-v0.8.7-linux-x86
....
....
[bpdp@bpdp-arch software]$ 

3. Set some environment variables

[bpdp@bpdp-arch environment]$ cat nodejs 
NODEJS_HOME=/home/bpdp/software/nodejs

PATH=$PATH:$NODEJS_HOME/bin
MANPATH=$MANPATH:$NODEJS_HOME/share/man
LD_LIBRARY_PATH=$LD_LIBRARY_PATH:$NODEJS_HOME/lib
C_INCLUDE_PATH=$C_INCLUDE_PATH:$NODEJS_HOME/include
CPLUS_INCLUDE_PATH=$CPLUS_INCLUDE_PATH:$NODEJS_HOME/include

export PATH
export MANPATH
export LD_LIBRARY_PATH
export C_INCLUDE_PATH
export CPLUS_INCLUDE_PATH
[bpdp@bpdp-arch environment]$ 

4. Source it whenever you need it:

$ source ~/environment/nodejs

Note: I put the env var into a file: $HOME/environment/nodejs

5. Surely you may also put that into your $HOME/.bashrc for automatic activation.

That's all. Happy coding!

Agustus 14, 2012

Working with GitHub and Clojars


This guide is used as a note for myself. If you can benefit from this note, that's fine. Here I just wish to document how I work with GitHub and Clojars. I need to do this since I have my own need for Ring middleware to reload automatically a server without restart whenever a namespace in Ring is modified. The original version was not maintained I think, since it uses Clojure 1.2.0.

GitHub

I forked the ring-reload-modified to my Github account. This can be done easily using step 1 and 2 from https://help.github.com/articles/fork-a-repo (I use only step 1 and 2 since I only want to fork and modified my forked version, not upstream version).

Let's say for this time I just want to edit the README.md and project.clj files. After I edit those files, I just put them in committed state:

[bpdp@bpdp-arch ring-reload-modified]$ git status
# On branch master
# Changes not staged for commit:
#   (use "git add [file]..." to update what will be committed)
#   (use "git checkout -- [file]..." to discard changes in working directory)
#
# modified:   README.md
# modified:   project.clj
#
no changes added to commit (use "git add" and/or "git commit -a")
[bpdp@bpdp-arch ring-reload-modified]$

We can see from the status that it has 2 changes: README.md and project.clj but I haven't commit anything. Here's how to commit:

[bpdp@bpdp-arch ring-reload-modified]$ git commit -a
[master ada41aa] Adjust to latest Clojure version (1.4.0)
 2 files changed, 8 insertions(+), 4 deletions(-)
[bpdp@bpdp-arch ring-reload-modified]$ 

Then it's time to push the committed version to Github repository:

 [bpdp@bpdp-arch ring-reload-modified]$ git push origin master
 Username for 'https://github.com': bpdp
 Password for 'https://bpdp@github.com': 
 Counting objects: 7, done.
 Delta compression using up to 2 threads.
 Compressing objects: 100% (4/4), done.
 Writing objects: 100% (4/4), 721 bytes, done.
 Total 4 (delta 2), reused 0 (delta 0)
 To https://github.com/bpdp/ring-reload-modified.git
    6dfdc5c..ada41aa  master -> master
 [bpdp@bpdp-arch ring-reload-modified]$

Let's see the result in Github profile:



The result in Github project page (I have pushed another commit so the history is different with above).



Clojars

To upload the library, I need to prepare my ssh public key first:

[bpdp@bpdp-arch ring-reload-modified]$ ssh-keygen -t rsa
Generating public/private rsa key pair.
Enter file in which to save the key (/home/bpdp/.ssh/id_rsa): 
/home/bpdp/.ssh/id_rsa already exists.
Overwrite (y/n)? y
Enter passphrase (empty for no passphrase): 
Enter same passphrase again: 
Your identification has been saved in /home/bpdp/.ssh/id_rsa.
Your public key has been saved in /home/bpdp/.ssh/id_rsa.pub.
The key fingerprint is:
87:fc:8f:35:18:20:2e:8f:73:d2:b5:71:ea:0e:85:01 bpdp@bpdp-arch
The key's randomart image is:
+--[ RSA 2048]----+
|    E            |
|     .           |
|      o .        |
|     . = o       |
|    . o S +      |
|     = o B o     |
|    + = o o o    |
|     + o   + .   |
|       .o . .    |
+-----------------+
[bpdp@bpdp-arch ring-reload-modified]$

The public key should be put into the Clojars first. So, first we need to register by using http://clojars.org/register:



Now, it's time to upload to Clojars:

[bpdp@bpdp-arch ring-reload-modified]$ lein2 jar   
Created /home/bpdp/master/clojure/libs/ring-reload-modified/target/ring-reload-modified-0.1.2.jar
[bpdp@bpdp-arch ring-reload-modified]$ lein2 pom
Wrote /home/bpdp/master/clojure/libs/ring-reload-modified/pom.xml
[bpdp@bpdp-arch ring-reload-modified]$ scp pom.xml target/ring-reload-modified-0.1.2.jar clojars@clojars.org:
Enter passphrase for key '/home/bpdp/.ssh/id_rsa': 
Welcome to Clojars, bpdp!
pom.xml                                                           100% 2672     2.6KB/s   00:00    
ring-reload-modified-0.1.2.jar                                    100% 5328     5.2KB/s   00:00    

Deploying org.clojars.bpdp/ring-reload-modified 0.1.2

Success! Your jars are now available from http://clojars.org/
[bpdp@bpdp-arch ring-reload-modified]$

Now I can use the library that I upload to Clojars:



That's all big guy. Have a happy hacking!


Agustus 12, 2012

Mengakses Basis Data Graph OrientDB Menggunakan Clojure

OrientDB adalah salah satu basis data NOSQL dengan kemampuan basis data obyek, graph, document, serta flat. API untuk basis data ini bermacam-macam dan karena dikembangkan menggunakan Java, maka API yang paling utama adalah Java, meski demikian, tersedia juga API untuk JavaScript dan implementasi bahasa-bahasa pemrograman berbasis JVM seperti Clojure dan Scala.

Pada tulisan ini saya akan sedikit membahas tentang akses dengan menggunakan Clojure. Wrapper Clojure untuk API OrientDB dibuat oleh Eduardo Julián. Versi binary bisa diperoleh dari http://clojars.org melalui Leiningen dan versi kode sumber bisa diperoleh di https://github.com/eduardoejp/clj-orient (sayangnya, dokumentasi kurang jelas). Langkah sederhana berikut digunakan untuk mengakses OrientDB dari Clojure menggunakan Leiningen.

1. Buat project

$ lein new orientweb

2. Hasil:

[bpdp@bpdp-arch orientweb]$ tree
|-- README.md
|-- doc
|   `-- intro.md
|-- project.clj
|-- src
|   `-- orientweb
|       `-- core.clj
`-- test
    `-- orientweb
        `-- core_test.clj
5 directories, 6 files
[bpdp@bpdp-arch orientweb]$ 

3. Edit project.clj, isikan berikut ini:
 
(defproject orientweb "0.1.0-SNAPSHOT"
  :description "FIXME: write description"
  :url "http://example.com/FIXME"
  :license {:name "Eclipse Public License"
               :url "http://www.eclipse.org/legal/epl-v10.html"}
  :dependencies [[org.clojure/clojure "1.4.0"]
                         [clj-orient "0.5.0"]]
  :main orientweb.core)

4. Download dependencies dengan perintah:
 
lein deps

5. Koneksi terdapat pada file core.clj
 
(ns orientweb.core)
(require '[clj-orient.core :as orientcore]
            '[clj-orient.graph :as orientgraph])
 
(orientcore/set-db! (orientgraph/open-graph-db! "remote:localhost/demo" "admin" "admin"))

(def mydb (orientcore/db-info orientcore/*db*))

(defn -main 
   [& args]
   (println "Information about the database:")
   (doseq [[key val] mydb] (prn key val))
   (orientcore/close-db!))

6. Hasil eksekusi:
 
[bpdp@bpdp-arch orientweb]$ lein compile
Compiling orientweb.core
Compilation succeeded.
[bpdp@bpdp-arch orientweb]$ lein run
All namespaces already :aot compiled
Information about the database:
:name "demo"
:url "remote:localhost/demo"
:status "OPEN"
:user #
[bpdp@bpdp-arch orientweb]$ 

Happy hacking!

Juli 28, 2012

Fancy Header with KOMA-Script

Using KOMA-script for my dissertation, does make me a bit confuse. Reading its manual is a bit daunting since I am a new user of KOMA-Script although I am a self-proclaimed average LaTeX user. Here I will give a guide to create fancy header. I will not explain a lot, just directly put my LaTeX source so that you can get them directly to create a fancy header. Here's the source:

\documentclass{scrreprt}
\usepackage{url}
\usepackage{listings}

\usepackage[usenames,dvipsnames]{color}
\usepackage[T1]{fontenc}
\usepackage{wrapfig}
\usepackage[pdftex]{graphicx}
\usepackage{setspace}

\usepackage[Sonny]{fncychap}
%\usepackage[Bjornstrup]{fncychap}

\usepackage[automark]{scrpage2}

\begin{document}

 \pagestyle{scrheadings}
 \setheadsepline{.4pt}
 \clearscrheadings
 \automark[section]{chapter}
 \ihead{\headmark}
 \ohead{\pagemark}
 \cfoot{}

 \KOMAoptions{abstract=on}

 \definecolor{light-gray}{gray}{0.95}
 \lstset{numbers=left,basicstyle=\scriptsize,numberstyle=\scriptsize,frame=tb,captionpos=b,backgroundcolor=\color{light-gray},showspaces=false,showstringspaces=false}

 \input{./cover.tex}
 \input{./abstract.tex}

 \tableofcontents

 \listoffigures

 \lstlistoflistings

 \input{./01-introduction.tex}
 \input{./02-background.tex}
 \input{./03-research-goals.tex}
 \input{./04-research-contributions.tex}
 \input{./05-future-directions.tex}
 \input{./06-bibliographies.tex}

\end{document}


I put all of my main full source so that you can imagine how to fit KOMA-Script into your source. The part of the source which come from KOMA-Script listed below:

Preparation

\documentclass{scrreprt}

\usepackage[automark]{scrpage2}


Header Definition

 \pagestyle{scrheadings}
 \setheadsepline{.4pt}
 \clearscrheadings
 \automark[section]{chapter}
 \ihead{\headmark}
 \ohead{\pagemark}
 \cfoot{}


Display "Abstract" Title

 \KOMAoptions{abstract=on}



The result is the document which has page number as the footer in every beginning of the chapter and the fancy header with chapter - section - page number and line for the next pages.




I believe that you love to read the manual, so if you want to know the meaning of the commands above, have a look at KOMA-Script manual. :)

Juli 27, 2012

Install User Level Tex Live Package - fncychap

Tex Live provide a big comprehensive TeX system which is very useful for document production. Although Tex Live provide complete but still there are lots of packages which are available at CTAN and can be installed to suit our need. Here I will explain a bit about how to install a package, specifically at user level, not global level. The package which will be installed is fncychap. This package is used to manage our "Chapter" display.

Directory Location

Packages in Tex Live installed in and /usr/share/texmf-dist. Those packages are available for all of users in the system. To check whether a package is installed, we can test it by asking kpsewhich to the system:

$ kpsewhich fancyhdr.sty
/usr/share/texmf-dist/tex/latex/fancyhdr/fancyhdr.sty
$

We may see the pattern. All of the package's file reside in /usr/share/texmf-dist/tex/latex/package-name/. If we want to install the package, actually we can do that easily by just copy all of the distribution according to this pattern, but this practice is discouraged and considered a bad practice since it can be confusing whenever we want to uninstall or whenever Tex Live is upgraded. If it can not find the package, it will says like this:

$ kpsewhich wuthesis
$

Well, nothing, huh? Yes. It says nothing. How polite :). In my Linux box, all of the user level packages should be installed by copy them to $HOME/texmf/tex/latex/, so whenever we want to install package, just copy them to that directory:

$ ls -la ~/texmf/tex/latex/
total 12
drwxr-xr-x 3 bpdp users 4096 Jul 28 10:05 .
drwxr-xr-x 3 bpdp users 4096 Jul 28 09:18 ..
drwxr-xr-x 2 bpdp users 4096 Jul 28 09:18 fncychap
[bpdp@bpdp-arch submitted]$

Enter fncychap

fncychap package is a package, created by Ulf. A. Lindgren, to alter chapter headings appearance. To install this package, just copy them to $HOME/texmf/tex/latex/ as written above. To use this package, just use it:

...
\usepackage[Sonny]{fncychap}
...

You may other style then Sonny, for example Bjarne, Lenny, Bjornstrup, Glenn, Conny, and Rejne. The result is like this:


Beautiful :)