Hosting Website Gratis di Gitlab

Gitlab sebuah perusahaan penyedia layanan hosting Git. Mirip Github tapi lebih ekonomis. Salah satu bedanya, di Gitlab, akun gratisan bisa punya private project, kalo di Github semuanya public / opensource, kecuali kalo kita pake akun berbayar.

Kalo Github punya Github Pages, Gitlab juga punya Gitlab Pages. Layanan ini bisa kita pake untuk hosting website gratisan & bisa sekalian belajar Git ( buat yang belum tahu).

Silakan daftar dulu kalo belum punya akun Gitlab. Saya tunggu …

Udah?

Bagus.

Continue reading →

Mengenal VueJS – 01

Dalam artikel ini saya mau kasih sedikit intro tentang library yang sedang naik daun, namanya Vue. Ini adalah library JavaScript untuk bikin UI. Kalo dikelompokin, mungkin bisa satu grup dengan ReactJS. Vue bisa dipake untuk macem-macem keperluan, mulai dari yang sederhana untuk bikin komponen UI, sampai SPA (Single Page Application). Popularitas Vue meroket antara lain karena jadi library default bawaan Laravel 5.

Progressive Framework. Begitu kata Vue Guide. Maksudnya, kita bisa pake Vue sedikit-sedikit. Ga perlu langsung satu website pake Vue semua. Bahkan untuk satu halaman, kita bisa pake Vue seperlunya dulu. Kalo mau migrasi website/aplikasi yang udah jadi dari framework lain ke Vue juga bisa pelan-pelan. Ga perlu gerudukan semua komponen UI langsung ganti.

Sebelum memulai silakan bikin file HTML yang isinya ada skrip ini. Atau nanti langsung edit aja contoh kode di bawah yang saya share di Codepen.

<script src="https://unpkg.com/vue/"></script>

Continue reading →

Tips JavaScript : Throttle & Debounce

Apa itu throttle & debounce ? Berikut ini penjelasan singkat & contohnya.

Dua-duanya dipake untuk optimasi, khususnya untuk fungsi-fungsi kompleks yang dijalanin berulang kali. Cuman cara & metodenya yang beda.

Throttle

Throttle: Memastikan sebuah function hanya dijalankan satu kali dalam satu rentang waktu.

Dalam contoh di bawah ini, saya bikin dua listener untuk event scroll. Yang satu normal, ga pake throttle.

See the Pen Throttle by Anggie Bratadinata (@masputih) on CodePen.

Sambil scrolling coba perhatiin, nilai scrollY di dua listener itu sama, tapi listener yang ga pake throttle lebih sering dijalanin (call count-nya lebih banyak).

Continue reading →

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 →

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 →