#108: Asynchronous Programming

The "content is empty" is very confusing untuk programmer nodejs baru seperti ambe.

Akhir-akhir ini ambe belajar satu platform scripting language baru iaitu Node.js. Ia boleh dikatakan sebagai server-side JavaScript interpreter (biasanya JavaScript digunakan didalam web browser dan diembed bersama kod HTML. Manakala Node.js boleh beroperasi di luar browser). Node.js adalah berasaskan JavaScript engine dari web browser Google Chrome bernama V8.

Menjadi nature Node.js, Node.js adalah asynchronous. Bermakna Node.js adalah asynchronous secara default, walaubagaimanapun ia boleh diprogramkan untuk synchronous. Asynchronous boleh dibayangkan dengan perlumbaan F1 yang dilepaskan secara berturutan, tetapi kereta yang mana paling laju akan sampai dahulu, meninggalkan yang lambat. Contoh:

1. Baca fail dan simpan dalam variable A.
2. Print kandungan A.
3. Print "Hello World".

Diatas adalah 3 baris arahan ringkas. Untuk pengaturcaraan synchronous seperti kebanyakan programming language lain, output adalah kandungan A diikuti dengan perkataan "Hello World". Asynchronous pula sebaliknya. Disebabkan proses untuk membaca fail mengambil masa (walaupun hanya beberapa milisaat), Node.js tidak akan menunggu di baris 1. Ia akan teruskan execution dan anda mungkin akan mendapat output "Hello World" barulah diikuti dengan content A, jelas sekali melangkau sequence yang sepatutnya. Ini memberikan advantage kepantasan tanpa interruption yang mungkin disebabkan delay dalam proses I/O. Walaubagaimanapun, konsep ini sangat confusing bagi programmer baru yang sudah terbiasa dengan synchronous programming language seperti ambe.

Dibawah ini ambe cuba memprogramkan satu API untuk perkhidmatan email sementara Mailinator tetapi ambe menghadapi masaalah kerana output dari script ini adalah tidak seperti yang ambe maksudkan (lihat gambar diatas). Variable "a" disini sepatutnya mengandungi teks JSON dari API Mailinator. Sehingga sekarang ambe masih belum menjumpai jalan penyelesaiannya. Dari pengamatan ambe, ini terjadi mungkin disebabkan asynchronous nature pada Node.js.

var a= getMailinatorInbox("hunabku","xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx");
console.log("content is:" , a);

function getMailinatorInbox(who,token){

var content="";
var options = {/*
  host: 'www.google.com',
  port: 80,
  path: '/upload',
  method: 'POST'*/
    host: "api.mailinator.com",
    path: "/api/inbox?token="+token+"&to="+who,
    method:"GET"
};

var req = https.request(options, function(res) {
  res.setEncoding('utf8');
  var chunks="";
  res.on('data', function (chunk) {
        chunks+=chunk;
  });
  res.on('end',function(){
      content=chunks;
});


});
req.end();
return content;
}

#67: Prettify - Syntax highlighting of source code snippets in an html page

Emacs with syntax highlighting

Google Code Prettify adalah satu projek di google code yang boleh dicapai di link ini. Saya baru sahaja memasukkan skrip Prettify pada blog ini untuk membantu saya untuk highlight source code yang saya masukkan kedalam blog ini. Ia boleh mengenal dan melakukan syntax highlighter untuk beberapa bahasa seperti termasuk C and friends, Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, Makefiles, dan Rust. It works passably on Ruby, PHP, VB, and Awk and a decent subset of Perl and Ruby. Ada beberapa lagi programming language yang boleh di support dengan menggunakan extension iaitu Apollo, Basic, Clojure, CSS, Dart, Erlang, Go, Haskell, Lisp, Scheme, Llvm, Lua, Matlab, MLs:F#, Ocaml,SML, Mumps, Nemerle, Pascal, Protocol buffers, R, S, RD, Scala, SQL, TCL, Latek, Visual Basic, CHDL, Wiki, XQ dan YAML. Cara untuk install script ini adalah amat mudah. Hanya perlu load script ini dengan menambahkan line <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?autoload=true"></script> pada bahagian atas page (samaada di dalam <head> atau di permulaan <body>) dan ia sudah sedia untuk digunakan!

VIM pun ada syntax highlight

Untuk memasukkan snippet source code dengan syntax highlighter ini, anda perlu masukkannya diantara tag <pre class="prettyprint"> dan </pre>. Anda tak perlu memberitahu apakah language yang anda guna untuk pemilihan syntax highlighter kerana script ini akan cuba meneka secara automatik kod apakah yang anda gunakan. Tapi jika anda mahu lebih pasti (kerana bimbang script ini akan salah meneka kod anda, anda bolehlah tambahkan "language hint" pada bahagian class (contohnya <pre class="prettyprint lang-scm">. Untuk mengetahui lebih lanjut tentang ini, sila navigate ke link ini). Terdapat beberapa theme/skin yang boleh dipilih. Theme kesukaan saya adalah "Sunburst" kerana ia berlatarbelakang hitam seperti pada terminal dan mempunyai syntax highliter dengan warna yang lembut. Untuk menetapkan skin/theme pilihan anda, anda boleh specify pilihan anda dengan menambah ?skin=[skin pilihan anda] (contohnya ?skin=sunburst) pada akhir src dalam barisan load script tadi (jika anda memilih skin sunburst, maka <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?autoload=true&skin=sunburst"></script>).

Ini adalah beberapa contoh source code snippets yang saya masukkan untuk tujuan demonstrasi script syntax highlighter ini. Saya tidak meletakkan "language hints" pada class kerana script ini mampu meneka apakah kod yang ia sedang proses. Ini adalah contoh dalam source code dalam bash, python, C dan HTML.

#!/bin/bash

# Fibonacci numbers
# Writes an infinite series to stdout, one entry per line
function fib() {
  local a=1
  local b=1
  while true ; do
    echo $a
    local tmp=$a
    a=$(( $a + $b ))
    b=$tmp
  done
}

# output the 10th element of the series and halt
fib | head -10 | tail -1

#!/usr/bin/python2.4

def fib():
  '''
  a generator that produces the elements of the fibonacci series
  '''

  a = 1
  b = 1
  while True:
    a, b = a + b, a
    yield a

def nth(series, n):
  '''
  returns the nth element of a series,
  consuming the earlier elements of the series
  '''

  for x in series:
    n = n - 1
    if n <= 0: return x

print nth(fib(), 10)

#include <stdio.h>

/* the n-th fibonacci number.
 */
unsigned int fib(unsigned int n) {
  unsigned int a = 1, b = 1;
  unsigned int tmp;
  while (--n >= 0) {
    tmp = a;
    a += b;
    b = tmp;
  }
  return a;
}

main() {
  printf("%u", fib(10));
}

<html>
  <head>
    <title>Fibonacci number</title>
    <style><!-- BODY { text-decoration: blink } --></style>
    <script src="foo.js"></script>
    <script src="bar.js"></script>
  </head>
  <body>
    <noscript>
      <dl>
        <dt>Fibonacci numbers</dt>
        <dd>1</dd>
        <dd>1</dd>
        <dd>2</dd>
        <dd>3</dd>
        <dd>5</dd>
        <dd>8</dd>
        &hellip;
      </dl>
    </noscript>

    <script type="text/javascript"><!--
function fib(n) {
  var a = 1, b = 1;
  var tmp;
  while (--n >= 0) {
    tmp = a;
    a += b;
    b = tmp;
  }
  return a;
}

document.writeln(fib(10));
// -->
    </script>
  </body>
</html>