Afief Yona Ramadhana

Personal Blog

Web Developer yang gemar bermain dengan javascript dan HTML5. Namun sesekali bercanda dengan Unity dan C#. Menulis blog untuk meninggalkan jejak sebagai manusia biasa.
06 May 2015
Capture

A Hectic Long Weekend

Long weekend kemarin gue disibukkan dengan satu projek freelance. Membuat e-commerce simpel. Projek yang pada umumnya dikerjakan sekitar sebulan, diringkas padet jadi 3 hari long-weekend karna klien butuh di Hari Senin.

Sempat kepikiran develop pake WordPress dan WooCommerce, tapi item-item yang dijual sangat enggak biasa. Item yang dijual berupa batik dengan motif-motif yang dapat diganti oleh pembeli. Jika pembeli sudah oke dengan motif yang “diutak-atik” sendiri, pembeli bisa melanjutkan proses checkout dan melakukan pembayaran.

Karna klien butuh cepet, maka pada akhirnya gue pilih Angular. Tinggal pasang route dan buat beberapa view, beres. Buat CSSnya gue minta bantuan Bootstrap untuk memudahkan tampilan grid view dan ngetik SCSS dengan bantuan scssphp. Untuk sistem gonta-ganti motifnya sendiri “terpaksa” gue pake Flash. Embed SWF di salah satu view karna gue gak akan sempet bikin pake Canvas HTML5 dalam sehari (fiturnya baru dipaparkan lebih lanjut di Malam Minggu). Gambarnya sendiri gue olah pake Photoshop, mainin Magic Wand dan Poligonal Lasso Tool buat potong-potong motif dan “maksain” nempelin ke baju.

Setelah ngebut seharian di hari Minggu ditambah harus ke Bandung dulu karna rencananya mau kondangan tapi berakhir di Yogya Kepatihan muter-muter nyari celana gak ada yang pas, akhirnya kerjaan beres Senin pukul 2 dini hari.

Dibawah ini gue masukin salah satu bagian kecil pilih motif bajunya, yang pasti di browser kalian harus sudah terinstall Flash Player.

29 Apr 2015

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 :

(more…)

28 Apr 2015
11176264_1609646389246970_1756453555_n

Karnaval KAA 2015

Enam tahun gue tinggal di Bandung dan weekend kemarin adalah pertama kalinya gue ke karnavalan. Yup, Bandung jadi tuan rumah Konferensi Asia Afrika ke 60. Berikut video yang gue rekam sembari menikmati pertunjukan.

dan ini video keduanya. Videonya dibagi jadi dua bagian karna terlalu panjang. :)
(more…)

20 Apr 2015
AngularJS-large

Memulai Belajar Angular JS

AngularJS adalah framework javascript yang digunakan untuk memaksimalkan elemen HTML menjadi tampilan yang dinamis. Meskipun masih terbilang muda, framework ini sudah banyak digunakan. Beberapa aplikasi yang sudah menggunakannya antara lain Youtube on PS3, Vevo, ga.me, Sky Store, dan MSNBC.

Salah satu fitur yang paling utama dan belum gue temuin di framework lain adalah Two Way Data -Binding. Fitur ini memungkinkan nilai elemen terhubung langsung dengan model. Ketika model / variabel di dalam controller diubah, maka tampilan di dalam DOM Element akan ikut berubah. Bergitupula apabila tampilan di elemen diubah, maka model di dalam controller pun akan ikut berubah. Contohnya seperti di bawah ini

See the Pen AngularJS – Two Way Data-Binding by Afief Yona Ramadhana (@afief) on CodePen.

ubah text yang ada di dalam textbox

Selain fitur tersebut, fitur lain yang menarik juga adalah Template. Kita bisa membuat template dari HTML biasa, lalu membinding  setiap elemen ke dalam model sehingga tampilannya menjadi dinamis. Kita juga bisa membuat beberapa tampilan dengan HTML yang terpisah, lalu membuatnya menjadi halaman-halaman yang terpisah dengan menggunakan ngRoute.

Fitur – fitur tersebut dan fitur lain seperti MVVM, Directive, Service, dll dapat dipelajari dengan mudah dan menyenangkan di codeshool.com. Situs tersebut menyediakan course gratis bagi yang mau belajar AngularJS, dengan menonton beberapa video yang berisi penjelasan-penjelasan singkat namun terpapar dengan baik. Kemudian kita juga bisa mengerjakan contoh kasus pada setiap sesinya untuk dapat melanjutkan ke sesi course selanjutnya. Selamat Belajar :D

Capture

Mobile Friendly Test

Salah satu tools dari google yang cukup favorit buat ngecek apakah web yang kita bangun mobile friendly atau tidak. Tools tersebut akan menganalisa bagaimana website kita tampil di dalam perangkat mobile. Yang paling utama adalah apakah font menjadi terlalu kecil, atau pranala-pranala yang ada jaraknya terlalu dekat.

Bagi yang mau mencoba, silakan masukkan nama website di bawah ini

atau langsung saja ke https://www.google.com/webmasters/tools/mobile-friendly/

19 Apr 2015
DefaultThumbnail

Fetch() API

Salah satu problem ketika membuat aplikasi dengan meminimalisir library adalah ketika melalukan pemanggilan AJAX. Kadang mau gak mau gue tambahin jQuery, cuma buat pakai fitur AJAXnya yang mudah digunakan. Tapi kadang pula ketika ingin meminimalisir ukuran, gue tulis sendiri fungsi XHRnya. Meskipun, XMLHttpRequest cukup sulit untuk diingat implementasinya.

fetch()

Fungsi ini sama seperti AJAX. Digunakan untuk mengambil resource/data dari URL yang diberikan. Fungsi ini dapat dipanggil dengan window.fetch() atau fetch() dengan argument pertama adalah URL dan argument kedua adalah objek yang merupakan pengaturan tambahan. Fungsi ini akan menghasilkan objek Promise.

Pengaturan tambahan yang dapat dimasukkan antara lain :

(more…)

18 Apr 2015
IMG_20150403_122240_2

Kembali Ke Desa

Semenjak menikah, gue hidup berdua bareng istri jauh dari keramaian Kota Kembang. Kini gue tinggal di Padalarang, tepatnya di Perumahan Bumi Cempaka Asri Blog E2 No. 11 (silakan catet ya gaes buat yang mau main). Perumahannya tenang, atau bahkan terlalu tenang hingga tukang batagor dan eskrim cincau jarang sekali lewat.

Perumahan ini masih dalam tahap pengembangan. Masih banyak pegawai bangunan lalu-lalang mondar-mandir wara-wiri. Namun di blok yang gue tempati (dan beberapa blok sebelahnya), pembangunan sudah selesai dilakukan. Hanya beberapa rumah yang direnovasi atau dilanjutkan pembangunannya.

Sebagian besar rumah yang selesai, sudah ditempati. Sebelah kiri dan belakang, sudah ditempati lebih dulu. Sedangkan di sebrang depan sedang diperbaiki dan ditambah satu lantai.

IMG_20150418_092719_2

Dirumah yang sepi ini, selain kami berdua, ada seekor kucing yang kami putuskan untuk pelihara. Gojess si kucing kampung tapi bukan. Tingkahnya kadang merepotkan. Tapi ada banyak hal bodoh yang dia lakukan. Setidaknya itu salah satu hal yang membuat kami betah di rumah ini.

20 Dec 2014
IMG_5316.min

Weekend Terakhir Membujang

Siapa sangka, akhirnya tiba. Weekend terakhir gw hidup membujang. Tepat sabtu depan gw dan Dara bakal menikah. Bagi yang ingin tau info lebih detail, bisa buka disini. Kami akan bahagia jika kalian datang.

Sejak beberapa hari kemarin Dara udah “dipingit”. Artinya kesempatan gw untuk ketemuan sangatlah kecil, apalagi untuk ngajak dia main dan makan di luar. I have no idea apa yang dilakukan para bujang di weekend terakhir dia membujang. :|

28 Nov 2014
intel_realsense2

Intel Realsense App Challenge

Tahun kemarin, gue ikut kompetisi Intel Perceptual Computing Challenge. Berhasil lolos phase pertama, dan dapet kamera 3D perceptual dari Intel.

Kamera ini kurang lebih hampir sama dengan kinect. Perbedaannya ada di ukuran yang lebih kecil, dengan SDK yang hanya mendeteksi tangan dan wajah. Namun kamera 3Dnya lebih detail dari Kinect. Bisa mendeteksi mimik wajah dan mood nya.

Nah, tahun ini, Intel ngadain kompetisi yang sama dengan nama yang berbeda. Intel Realsense App Challenge. Gue kembali lolos phase pertama, dan dapet kamera yang lebih cihuy dari kamera kemarin. Doakan semoga lolos phase selanjutnya ya. :)

27 Nov 2014
Ping Pong sengan socket server.

Mood Programmer

Pas lagi bikin game, kadang gue bisa seharian cuma mikirin algoritma yang mau gua pake tanpa ada perkembangan kode sedikitpun. Tapi kadang juga gue bisa seharian full ngoding tanpa mikirin panjang algoritma gamenya. Semua bergantung mood dan game yang mau gue bikin.

Jadi, ngoding buat game itu bukan cuma perihal susah atau enggak. Tapi yang paling penting, moodnya pas atau enggak dengan konsep dan bahasa pemrograman yang mau dipake buat bikin gamenya. Cheers!

24 Nov 2014
IMG_20141123_164817

Objek Seni di Pasar Seni

Kami ke Pasar Seni ITB 2014  dengan topeng buatan tangan sendiri. Banyak yang bertanya beli dimana, atau sekedar pinjam. Beberapa kali cuma berdiri di tengah keramaian jadi objek seni buat anak-anak kecil yang merengek ke ibunya ingin topeng yang sama.

22 Nov 2014
2014-11-22_00005

Insurgency

Salah satu FPS game di steam yang bikin gue betah main sampe berjam-jam. Paling cihuy LAN Party berempat atau lebih. Tiap pemain kawan menggunakan peran yang berbeda-beda. Kerjasama tim dan strategi dibutuhkan di game ini.