03. June 2018

Memasang iklan Google Adsense di project Vue.js

[caption id=”” align=”aligncenter” width=”599”] Google AdSense logo, image from: maxmanroe.com[/caption]

Google AdSense merupakan salah satu layanan dari Google untuk para publisher agar bisa menempatkan iklan dari berbagai source yang telah berafiliasi dengan Google. Menurut Google sendiri, AdSense adalah cara sederhana yang gratis untuk memperoleh penghasilan dengan menempatkan iklan di situs web Anda.

Untuk memasang script Google Adsense ini sejatinya sudah di jelaskan oleh Google sendiri, salah satunya bisa dibaca di tautan ini. Namun sayangnya memang script tersebut memiliki ekspektasi bahwa kita tidak menggunakan framework dalam membangun website (dalam hal ini tentu kita akan fokus ke Vue.js).

more

Tags : vue

02. June 2018

Memperkenalkan Warna Baru dari Vue-Currency-Filter

Vue-Currency-Filter merupakan plugin yang saya gunakan untuk menformat berbagai angka ke berbagai format mata uang (currency). Plugin ini sendiri pada awalnya saya buat dengan algoritma sendiri namun seiring makin banyaknya case dan kebutuhan maka saya putuskan untuk menggunakan plugin lain yakni accounting.js yang mana lebih solid untuk urusan format mata uang ini.

Pada tulisan kali ini saya akan membahas bagaimana komunitas open-source bisa bersinergi untuk saling membantu dalam hal ini mengenai pembuatan logo untuk repository Vue-Currency-Filter.

more

Tags : vue

29. May 2018

Membuat Search Highlight dengan Vue.js

[caption id=”” align=”aligncenter” width=”800”] Membuat Search Highlight dengan Vue.js[/caption]

Salah satu fitur yang biasanya kita inginkan ketika membuat suatu kotak pencarian maupun autocomplete adalah highlight berdasarkan kata kunci yang digunakan untuk melakukan pencarian. Sebegitu mainstreamnya seperti sudah menjadi keharusan bagi setiap kotak pencarian untuk memiliki fitur ini. Untuk memudahkan Anda memahami apa yang saya maksudkan mungkin akan lebih mudah jika kita melihat gambar berikut:

more

Tags : vue

28. May 2018

ChuckNorris — Vue.js Chuck Norris Jokes Generator

[caption id=”” align=”aligncenter” width=”800”] Chuck Norris (sumber : http://www.healthfitnessrevolution.com)[/caption]

Kali ini kita akan bereksperimen dengan Vue.js untuk membuat hal-hal yang lucu agar tidak bosan dengan kode yang setiap hari kita tulis. Melihat dari daftar public API yang dibuat om @toddmotto di github, maka terbersit untuk membuat satu interface dari API yang disediakan disana. Pilihan akhirnya jatuh pada API dari https://api.chucknorris.io/.

more

Tags : vue

26. May 2018

Membuat Vue.js Plugin untuk pemula

Belajar membuat Vue.js Plugin yang ditujukan untuk para pemula dari awal sampai publish ke npm registry.

Setelah di artikel ini kita sedikit membahas soal apa itu Vue.js Plugin maka kali ini kita akan langsung belajar membuat Vue.js Plugin dari awal sampai bisa publish ke npm registry. Langsung saja, silahkan disimak beberapa langkah-langkahnya.

Pertama adalah siapkan environment untuk development Vue.js project sederhana, untuk hal ini saya menggunakan beberapa dependency berikut yang mungkin saja ada beberapa yang tidak dibutuhkan namun tidak sempat lagi inspeksi mana yang tidak digunakan, berikut contoh snippet dari dependency yang saya gunakan di package.json :

more

Tags : vue

10. November 2017

Pengetahuan Dasar Vue.js — Bagian 3

Pengetahuan Dasar Vue.js (mazipanneh.com) - Artikel ini merupakan seri lanjutan dari artikel yang sebelumnya sudah di publikasikan, baca semua seri Pengetahuan Dasar Vue.js : 

<ul>
  <li id="7d0b" class="graf graf--li graf-after--p">
    <a class="markup--anchor markup--li-anchor" href="https://mazipanneh.com/blog/2017/11/pengetahuan-dasar-vue-js-bagian-1/" target="_blank" rel="noopener" data-href="https://medium.com/vuejs-id/pengetahuan-dasar-vue-js-bagian-1-88d02d57f859">Pengetahuan Dasar Vue.js — Bagian 1</a>
  </li>
  <li id="2e00" class="graf graf--li graf-after--li">
    <a class="markup--anchor markup--li-anchor" href="https://mazipanneh.com/blog/2017/11/pengetahuan-dasar-vue-js-bagian-2/" target="_blank" rel="noopener" data-href="https://medium.com/vuejs-id/pengetahuan-dasar-vue-js-bagian-2-3616af1461d8">Pengetahuan Dasar Vue.js — Bagian 2</a>
  </li>
  <li id="09b6" class="graf graf--li graf-after--li graf--trailing">
    Pengetahuan Dasar Vue.js — Bagian 3 <strong class="markup--strong markup--li-strong">(Anda disini)</strong>
  </li>
</ul>

more

Tags : vue

10. November 2017

Pengetahuan Dasar Vue.js — Bagian 2

Pengetahuan Dasar Vue.js (mazipanneh.com) - Artikel ini merupakan seri lanjutan dari artikel yang sebelumnya sudah di publikasikan, baca semua seri Pengetahuan Dasar Vue.js : 

<ol class="postList">
  <li id="7d0b" class="graf graf--li graf-after--p">
    <a class="markup--anchor markup--li-anchor" href="https://mazipanneh.com/blog/2017/11/pengetahuan-dasar-vue-js-bagian-1/" target="_blank" rel="noopener" data-href="https://medium.com/vuejs-id/pengetahuan-dasar-vue-js-bagian-1-88d02d57f859">Pengetahuan Dasar Vue.js — Bagian 1</a>
  </li>
  <li id="2e00" class="graf graf--li graf-after--li">
    <strong>Pengetahuan Dasar Vue.js — Bagian 2(Anda disini)</strong>
  </li>
  <li id="09b6" class="graf graf--li graf-after--li graf--trailing">
    <a class="markup--anchor markup--li-anchor" href="https://mazipanneh.com/blog/2017/11/pengetahuan-dasar-vue-js-bagian-3/" target="_blank" rel="noopener" data-href="https://medium.com/vuejs-id/pengetahuan-dasar-vue-js-bagian-3-cc5de5213eb2">Pengetahuan Dasar Vue.js — Bagian 3</a>
  </li>
</ol><figure style="width: 720px" class="wp-caption alignnone">

<img class="progressiveMedia-image js-progressiveMedia-image" src="https://cdn-images-1.medium.com/max/720/1*w8B5xZW-IST7Agn2g7kSdA.jpeg" alt="" width="720" height="365" data-src="https://cdn-images-1.medium.com/max/720/1*w8B5xZW-IST7Agn2g7kSdA.jpeg" /><figcaption class="wp-caption-text">Vue.js Illustrasi (sumber : https://fullstackfeed.com)</figcaption></figure> 

<p>
  &nbsp;
</p>

more

Tags : vue

10. November 2017

Pengetahuan Dasar Vue.js — Bagian 1

[caption id=”” align=”aligncenter” width=”800”]Vuejs Sumber : https://vuejs.id/[/caption]

Artikel ini merupakan serial artikel, baca semua seri Pengetahuan Dasar Vue.js :

Vue.js (https://vuejs.org/) seperti di websitenya yang membawa tagline “The Progressive JavaScript Framework” merupakan javascript framework yang membantu kita dalam membuat sebuah website/aplikasi yang membutuhkan banyak interaksi di dalamnya, biasanya berupa Single Page Application. Vue.js belakangan memiliki gaung yang lumayan kencang di kalangan web developer maupun Javascript developer karena kemudahan dalam mempelajari dan mengimplementasikan di dalam website/aplikasi kita.

Pada tulisan kali ini kita akan membahas beberapa pengetahuan dasar dan beberapa istilah yang akan sering kita temui jika belajar Vue.js, semoga pembahasan ini akan membantu saya dan kita yang sedang belajar framework ini. Langsung saja, silahkan disimak beberapa poin pembahasan berikut :

more

Tags : vue

27. July 2017

Langkah-langkah memasang i18n di Vue.js project

[caption id=”” align=”aligncenter” width=”500”] i18n visualisasi (sumber : https://make.wordpress.org)[/caption]

Internationalization (i18n) dalam sebuah software berarti ketika software tersebut mendukung beberapa bahasa. Fitur ini tentu akan sangat membantu terutama bila software Anda memang ditargetkan pada lebih dari satu negara sehingga mengharuskan mendukung beberapa variasi bahasa.

Di dalam project yang dibuat menggunakan Vue.js hal ini bisa dilakukan dengan mudah bahkan dalam hitungan menit kita sudah bisa menyelesaikan contoh sebuah aplikasi yang mendukung multi bahasa.

more

Tags : vue

22. July 2017

Memulai Vue.js dengan Vue-CLI dan Webpack

Vue.js

Memulai Vue.js dengan Vue-CLI dan Webpack - Vue.js merupakan salah satu pilihan framework javascript yang terdapat di pasar saat ini dan salah satu yang belakangan mendapatkan perhatian lumayan dari para javascript developer. Vue.js banyak dibilang sebagai framework yang berhasil mengadopsi kehebatan React dan Angular dalam satu wadah yang tepat. Memang jika kita belajar Vue.js terutama di versi 2 akan mendapatkan rasa seperti React yang bercampur dengan Angular. Vue.js datang belakangan, hal itu menjadi wajar kenapa Vue.js bisa dibilang sukses belajar dari para pendahulunya. Menggabungkan strong point dari beberapa framework untuk bisa berdiri sendiri menggunakan paradigma yang diusungnya.

more

Tags : vue