E-Book Belajar TypeScript

Pengen belajar TypeScript tapi dokumentasinya bikin pusing? Nggak ngerti apa itu TypeScript?

TypeScript adalah bahasa pemrograman berbasis JavaScript yang menambahkan fitur strong-typing & konsep pemrograman OOP klasik ( class, interface). Di dalam dokumentasinya, TypeScript disebut sebagai super-set dari JavaScript, artinya semua kode JavaScript adalah kode TypeScript juga. Kompiler TypeScript menterjemahkan (transpile) sintaks TypeScript ke dalam JavaScript standar yang sudah kita kenal.

belajar-typescript

Tentunya untuk sintaks/konsep OOP belum didukung di JavaScript hanya dipakai oleh TypeScript Compiler (TSC) untuk memverifikasi kode TypeScript yang kita tulis & nggak ada di file JavaScript hasil kompilasi. Bukan berarti konsep ini nggak berguna, justru sebaliknya adanya fitur ini membuat kita bisa menulis aplikasi yang kompleks dengan relatif lebih mudah tanpa perlu pusing mikirin dukungan browser (hasilnya toh tetap JavaScript).

Dengan seting default, kode JavaScript hasil proses kompilasi adalah kode standard yang bisa dijalanin di semua browser modern yang mendukung ECMAScript 5 (JavaScript 1.5). Kalo kita lagi sial dan harus mendukung browser jadul yang hanya support ECMAScript 3.0 (JavaScript 1.3), misalnya Internet Explorer 8, kita bisa atur compiler supaya hanya men-generate kode yang kompatibel dengan JS1.3.

Jadi kayak yang bisa kita baca di website nya,

Mulai dengan JavaScript, diakhiri dengan JavaScript.

Ebook bisa diunduh di Leanpub: Belajar TypeScript

Gratis. Tapi kalo mau kasih uang rokok ya silakan 🙂

HTML5 Messaging

Dalam artikel ini saya akan membahas salah satu fitur HTML5 yaitu messaging. Fitur ini memungkinkan kita bikin dua atau lebih dokumen HTML yang terpisah, salah satu atau semuanya dimuat ke dalam iframe, tapi masih bisa berkomunikasi satu sama lain.

Apa aja yang perlu kita pake untuk implementasi fitur ini?

  • message event
  • postMessage API

Mungkin Anda pikir, “Hari gini masih pake iframe? Jadul.”

Eit .. jangan salah, iframe banyak gunanya terutama untuk bikin bagian kecil dari web page yang terisolasi dari dokumen induk sehingga nggak saling interferensi, contohnya iklan, embeddable widget, dll. Coba liat artikel sebelumnya tentang RegEx, contoh kode dari JSBin juga dimuat ke dalam iframe.

Same-Origin Messaging

Pertama kita coba implementasi fitur ini pake dua dokumen yang asalnya dari domain yang sama. Same-origin maksudnya URL dua file/dokumen tersebut pake protokol yang sama, domain yang sama, dan nomor port yang sama.

Continue reading HTML5 Messaging

Belajar Regular Expression

Regular Expression, sering ditulis/disebut juga Regex / Regexp, adalah deretan karakter spesial yang mendefinisikan sebuah pola dalam pencarian teks. Bisa dibilang Regex itu seperti wildcard tapi lebih pintar, top markotop lah.

Setiap bahasa pemrograman menyediakan Regex engine yang berbeda. Engine di Java ga sama dengan PHP, beda juga dengan JavaScript. Karena beda engine, belum tentu ekspresi Regex yang disupport oleh satu bahasa juga disuport bahasa yang lain. Biarpun begitu, sintaks Regex tetep sama di mana-mana.

Dalam artikel ini kita akan kenalan dengan Regex dalam JavaScript. Dibanding Java & PHP, regex dalam JavaScript bisa dibilang terbatas. Artinya, semua regex dalam JavaScript pasti bisa dikopi ke dalam program Java & PHP tapi ga semua regex di Java & PHP bisa dipake di JavaScript.

Kenapa pake Regex? Regex menyederhanakan pencarian teks. Memang untuk pencarian sederhana kita bisa pake fungsi-fungsi String dan Array seperti substr(), indexOf(), slice(), dll tapi kalo pencariannya rumit, jauh lebih enak kalo pake Regex. Contohnya begini, misalnya kita mau menghitung banyaknya “ku” , “Ku”, “Kau”, dan “kau” dalam lirik lagunya Andra & The Backbone.

Kau begitu sempurna
Di mataku kau begitu indah
Kau membuat diriku akan slalu memujimu

Di setiap langkahku
Ku kan slalu memikirkan dirimu
Tak bisa kubayangkan hidupku tanpa cintamu

Janganlah kau tinggalkan diriku
Takkan mampu menghadapi semua
Hanya bersamamu ku akan bisa

Kau adalah darahku
Kau adalah jantungku
Kau adalah hidupku
Lengkapi diriku
Oh sayangku, kau begitu
Sempurna.. Sempurna..

Kau genggam tanganku
Saat diriku lemah dan terjatuh
Kau bisikkan kata dan hapus semua sesalku

Pake Regex, cukup begini bisa ketemu hasilnya ada 26 :

/(ka?u)/gi 

Kalo mau silakan coba hitung pake fungsi-fungsi String dan Array 🙂

Continue reading Belajar Regular Expression

Otomatisasi dengan Gulp

Gulp adalah sebuah program utilitas untuk otomatisasi pemrosesan file. Program ini bisa kita pake untuk minifikasi skrip (dengan plugin), kopi file dari satu tempat ke tempat lain, dan sebagainya. Kalo Anda pake Mac, program ini mirip dengan Automator, jadi bisa disebut juga task runner karena fungsi utamanya jalanin task.

Dari titel di websitenya,

Gulp: “The streaming build system”

Jadi, apa itu stream?

Kalo kita baca-baca di Wikipedia, istilah file stream banyak disebut dalam artikel yang ada kaitannya dengan I/O (input/output). Sederhananya, file stream adalah sederetan data, representasi sebuah file, yang bisa kita baca, modifikasi, & simpan dalam bentuk file lagi. File stream dibuat di memori pada waktu kita buka sebuah file. Modifikasi sebuah stream terjadi sangat cepat karena dilakukan saat data masih ada di memori sebelum disimpan kembali dalam bentuk file. Karena itulah, dibanding task runner lain seperti Grunt, Gulp lebih cepat dalam memodifikasi file.

Instalasi

Karena Gulp adalah program untuk NodeJS. Tentu step pertama adalah instal Node. Proses instalasinya di luar konteks tutorial ini, jadi silakan Anda coba sendiri.

Setelah kita instal Node, kita instal gulp pake NPM (Node Package Manager). Perintahnya begini:

npm install gulp

Terus pastikan gulp ada di system path.

Continue reading Otomatisasi dengan Gulp

Belajar Laravel 4 : 02. Artisan

laravel_logo

Seperti framework modern yang lain, Laravel juga punya command-line utility yang disebut Artisan (pake “t“, bukan arisan). Dalam bab ini, kita akan berkenalan dengan Artisan & coba bikin perintah sendiri. Daftar perintah (command) yang udah bawaan Laravel 4 bisa diliat pake perintah:

php artisan list

Dari sekian banyak command, beberapa yang nantinya sering kita pake adalah:

  • migrate
  • migrate:rollback
  • controller:make
  • routes
  • db:seed
  • up
  • down

Main-main dengan Artisan

Kita mau coba bikin command sederhana yang bisa nerima input & menghasilkan output di terminal. Kita bikin kalkulator aja.

Pertama kita bikin subdirektori laler di app/commands/. Terus kita ketik perintah berikut:

php artisan command:make Calc --command=laler:calc --path=app/commands/laler --namespace=Laler

Continue reading Belajar Laravel 4 : 02. Artisan