Mencoba Grunt : The Javascript Task Runner
Bertahun – tahun berinteraksi dengan Javascript, akhirnya kemarin gue coba Grunt. Awalnya gue skeptis, namun setelah melihat banyaknya repository projek-projek bermaanfaat di Github yang menggunakan Grunt, gue luluh. Ada dua hal yang gue butuhkan dari grunt. Concatenation & Minification.
Tujuan utama dari Grunt adalah automation. Sama seperti tujuan dasar programming, to automate processes. Sebelum menggunakan Grunt, gue menggabungkan beberapa file javascript secara manual, lalu mengkompresinya melalui http://jscompress.com/. Gue melalukan hal itu karna dulu gue pikir proses itu hanya dilakukan pada tahap selesai development. Proses manual yang cukup panjang itu tidak begitu terasa karna hanya dilakukan sekali, ketika upload ke server publik. Tapi nyatanya, revisi tetap membutuhkan update. Dan gue harus melakukan proses itu ketika ada update ke server.
Dengan Grunt, gue bisa mengautomasi penggabungan beberapa file javascript kemudian mengkompresi ukurannya sehingga ready untuk distribusi. Yang dibutuhkan oleh grunt, hanyalah file package.json dan gruntfile.js. Mendefinisikan dua file tersebut memang cukup memakan waktu. Tapi proses tersebut hanya dilakukan sekali. Selanjutnya, otomatis!
Untuk mempermudah proses development. Gue membuat template untuk concatenation & minification. Template ini bisa digunakan untuk projek lain, hanya perlu mengganti beberapa parameter pada gruntfile.js.
module.exports = function(grunt) { // Project Configuration grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), concat: { options: { separator: ';' }, dist: { src: ['js/*.js'], dest: 'build/<%= pkg.name %>.js' } }, uglify: { build: { src: 'build/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' }, } }); // Load the plugin that provides the "uglify" task grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-uglify'); // Default task(s) grunt.registerTask('default', ['concat', 'uglify']); };
Di dalam `grunt.initConfig`, gue mendefinisikan parameter `pkg`, parameter ini berisi objek yang diambil dari file package.json. Di dalam file package.json berisi
{ "name": "vlp-js", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.5", "grunt-contrib-concat": "^0.5.1", "grunt-contrib-uglify": "~0.5.0" } }
Selanjutnya, gue coba paparkan penjelasan beberapa baris kode pada gruntfile.js.
concat: { options: { separator: ';' }, dist: { src: ['js/*.js'], dest: 'build/<%= pkg.name %>.js' } },
Parameter `concat` berisi konfigurasi untuk menggabungkan beberapa file. Didalamnya terdapat parameter `options`, lalu `separator`. `separator` berisi string pemisah antar file ketika disatukan. Gue mengisi `;` agar tidak terjadi error kalau ternyata pada baris terakhir setiap file ada yang tidak diberi titik koma. Lalu terdapat parameter `dist` yang maksudnya adalah ‘distribusi’ berisi `src` dan `dest`. `src` merujuk pada file-file yang akan digunakan. Pada contoh diatas gue menggunakan asterik untuk menyeleksi semua file .js pada folder js. `dest` merujuk pada nama file gabungan dari setiap javascript tersebut. `<%= pkg.name %>` akan merujuk pada nama projek yang didefinisikan pada file `package.json`.
uglify: { build: { src: 'build/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' }, }
Selanjutnya, `uglify`. Cara kerjanya adalah menghapus newline pada file dan membuat beberapa nama variabel menjadi lebih pendek. Dengan begitu, ukuran file javascript pun akan menjadi lebih kecil. Pada parameter ini, kita mengatur sumber file pada parameter `src`. Dan nama file setelah diminifikasi pada parameter `dest`.
grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.registerTask('default', ['concat', 'uglify']);
Baris kode diatas berguna untuk me-load plugin yang akan digunakan, lalu menggunakannya pada fungsi `registerTask`.
Sebelum menjalankan grunt, jangan lupa install semua dependensinya dengan perintah `npm install`
Jalankan `grunt`, dan cek folder build. Akan ada dua file. File hasil gabungan, dan file gabungan yang sudah diminifikasi.
Javascript Google Drive API Library

Percayalah, google sudah sangat baik membuat banyak servicenya dapat diakses oleh para developer. Ditambah dengan dokumentasi yang komplit dan lengkap. Dengan tambahan sample code yang mudah dipahami dan di copy paste.
Tapi memang, sudah kodratnya manusia, yang tak pernah puas akan semua anugrah yang diberikan, dan selalu berharap akan kemudahan-kemudahan. Oleh karena itu, gue meringkas beberapa fitur yang paling sering digunakan di Google Drive API kedalam satu buah library kecil yang gue letakkan di github.
Semoga berkenan, dan bermanfaat bagi umat https://github.com/afief/GDriveJS
Silakan di fork, lalu kita sama-sama making the world a better place.
Angular – $http
Minggu kemarin gue nulis tentang Fetch() API. Metode untuk mengambil resource / data dari URL yang diberikan. Method tersebut masih belum banyak digunakan, bahkan sangat sedikit karna baru bisa di terapkan di Chrome dan Firefox versi paling baru.
Nah, kali ini gue coba berbagi tentang $http service di Angular. Service yang fungsinya sama dengan Fetch() API atau fungsi XHR lainnya. Perbedaan yang paling menonjol adalah fungsi ini merupakan fungsi bawaan dari AngularJS dan bisa digunakan tanpa tambahan modul lainnya.
Yang berbeda selanjutnya adalah fungsi ini mempunyai chain success dan error yang sangat memudahkan coder untuk memeriksa hasil pemanggilan. Contoh paling dasar penggunaan success dan error bisa dilihat disini :
// perhatikan metode chaining success dan error $http.get('[url yang menghasilkan data]'). success(function(data, status, headers, config) { //data : berisi data yang diambil //status : status pemanggilan, apakah berhasil (200), not found (404), dll //headers : header data yang diterima }). error(function(data, status, headers, config) { });