Deploy via FTP dengan Yarn dan ftp-deploy

Sebelumnya untuk deploy via FTP, saya biasa menggunakan git-ftp. Untuk proyek-proyek backend, git-ftp sangat pas untuk kebutuhan saya biar nggak perlu pilih file 1-1 yang perlu diunggah. Ini karena git-ftp memanfaatkan commit git untuk menentukan file mana saja yang akan diunggah.

Tapi ketika saya mengerjakan proyek frontend, maka semua file source juga akan terunggah karena masuk di commit. Sedangkan yang saya inginkan hanya file-file di dalam folder dist hasil compile webpack. Dari situ saya coba buat cari package FTP di NodeJS dan menemukan ftp-deploy.

Continue reading “Deploy via FTP dengan Yarn dan ftp-deploy”

2017 in Review

Saya baru sadar, ternyata tahun lalu saya tidak pernah menulis di blog ini. Saya merasa 2017 adalah tahun yang sibuk dan banyak hal-hal baru yang saya temukan. Meskipun begitu, saya juga merasa banyak melakukan hal yang nirmanfaat dan buang-buang waktu. Puncaknya, beberapa hari di awal tahun ini, saya sempat down karena terlalu memikirkan apa yang sudah saya lakukan, seberapa besar impact yang sudah saya berikan, dan bagaimana saya bisa bermanfaat dalam hidup ini.

Dan setelah saya ngobrol dengan salah seorang teman, dia menyarankan untuk membuat goal list dan plan jangka pendek agar target hidup lebih terukur. Setelah itu saya putuskan untuk coba pakai Trello untuk masalah ini. Dan sebagai refleksi, saya akan coba merangkum apa saja yang telah saya lakukan selama setahun yang lalu. Sambil mengingat-ingat hal menarik yang terjadi tiap bulannya.

Continue reading “2017 in Review”

BEKRAF Developer Day 2016

Assalamu’alaikum. Sudah lama ternyata sejak postingan terakhir yang saya tulis. Dan pasti setelah sekian lama, saya selalu memulai dengan prolog yang kurang lebih sama seperti yang teman-teman baca ini. Tidak sedikit orang yang berkata rutin menulis itu bagus karena lama-lama tulisan akan mengalir dengan sendirinya. Dan saya ingin mengetes kebenarannya.


Hari Sabtu (30/7) lalu, Saya berkesempatan menjadi 1 dari 1000-an orang yang dapat mengikuti acara yang diadakan Bekraf ini. Judulnya Bekraf Developer Day 2016 dengan mengangkat tema “Membangun Kemandirian Bangsa Melalui Digital”. Ketika tahu kalau acaranya akan di Jogja, wush, saya langsung aja amankan kursi. Rugi dong kalau kelewat acara gede macam ini. 😀 Ohiya, acara ini diadakan Bekraf dengan bekerjasama dengan Dicoding dan didukung oleh komunitas, asosiasi, media, dan perusahaan yang bergerak di bidang teknologi.

Pintu mulai dibuka pukul 08.00 dilanjutkan free session. Di sesi ini kita bisa melihat booth-booth dari pendukung acara, diantaranya Bekraf, XL, IBM, Intel, Agnosthings, Dirakit, ID Android, Aditif, dan Gamelan. Ada free coffee and snacks juga, lumayan buat yang belum sarapan kaya saya haha.

Continue reading “BEKRAF Developer Day 2016”

TechTalk #85: Latest Frontend Technology

Akhirnya, setelah sekian lama, TechTalk muncul lagi. Dan tau-tau udah episode 85. :D. Saya agak telat sih, jadi kurang tau yang bagian depan. Ohya materi episode ini Latest Frontend Technology yang dibawakan oleh Mas Rijalul Fikri.

Build Tools

Saya masuk udah sampai bagian build tools. Di presentasinya, sekarang ini build tools bisa dibagi menjadi 3 generasi:

  1. First Gen. Kita mengenal make untuk proses build.
  2. Second Gen. Yang masuk di sini ada Grunt, Gulp, Broccoli, dll.
  3. Third Gen. Ada Browserify, Webpack, JSPM.

Jaman Grunt masih baru dulu, saya ngga tau itu gunanya buat apa. Lama kelamaan jadi tau, dengan Grunt kita bisa compile SCSS/Less ke CSS, optimize image, dan copy resources dengan sekali perintah di terminal. Tapi yang paling terasa dari Grunt adalah waktu prosesnya lama karena tiap hasil dari proses akan di-write ke hardisk, lalu di-read, baru diproses selanjutnya, dan begituseterusnya sampai porses terakkhir. Nah dari situ muncul Gulp. Di Gulp hasil dari proses akan di-pipe ke proses lain dan baru akan di-write pada proses terakhir.

Tapi belakangan muncul juga tren menggunakan NPM langsung sebagai build tool. Alasannya lebih simpel dan tidak perlu file config yang kadang kita malah lebih sibuk ngurusin confignya. :p Bisa dibaca di:

Browserify saya masih sebatas baca-baca situsnya. Webpack baru coba sore ini gegara kebelet ngetes VueJS. JSPM baru denger kemarin dan setelah dibuka webnya baru inget pernah buka ini. 😐

Live Editing

Bahasan selanjutnya ada tentang live editing. Mas Fikri juga membagi ini jadi 3:

  1. First Gen. Our good ol’ friend, ctrl-r
  2. Second Gen. Masuk kategori ini LiveReload dan BrowserSync
  3. Third Gen. Hot Reload.

Untuk LiveReload saya belum pernah pakai. BrowserSync pernah sebatas coba-coba. Hot Reload? Baru ngetren belakangan, belum sempat baca-baca. Bahkan saya ragu nulis istilahnya dengan benar. :/

Di second gen. kita dienakkan dengan refresh browser otomatis ketika kita menyimpan file. Nah kalau hot reload, browser sama sekali enggak refresh, tapi kontennya berubah, tapi statenya tetep, karena semua perubahan ada di memori (begitu kata mas Fikri).

Todo: ngulik lebih jauh tentang hot reload

React

Siapa yang nggak tau React? A JavaScript library for building user interfaces. 😐

Library yang lagi ngetren di kalangan frontenders. Pertama saya tau dan baca-baca React beberapa bulan lalu, langsung bingung dengan HTML di dalam javascript, yang belakangan ternyata itu namanya JSX. Saya belum ngulik jauh sih, dan belum nemu alasan yang pas kenapa saya harus pakai React. Kalau saya lihat soalnya ini njlimet. Belum lagi ES6 yang juga baru dengar belakangan ini.


Kalau bicara frontend kayanya banyak banget tool-tool atau library baru yang terus bermunculan, bahkan mungkin kita belum sempat ngulik ini, itu udah rilis dan terlihat lebih seksi. Tapi tantangan sih biar kita terus belajar dan nggak ketinggalan kereta. 🙂

Boleh dibuka: How to Keep Up to Date on Front-End Technologies

 

Create A Modal Box on WordPress Dashboard

Recently I was writing a plugin for a client. It was a simple plugin to manage invoices and customers. The development is pretty fast thanks to Elliot Condon for his awesome ACF plugin.

One of the plugin’s requirement is user can add a new customer directly from the invoice page. As default, I put a post object field for user to select the existing customer. So I decided to put the add new customer form in a modal box. And after some while looking for, I finally found how to create it using WordPress’ bundled Thickbox.

Enqueueing Thickbox Libraries

First, we need to enqueue Thickbox’s JS and CSS with simply:

add_thickbox();

Create A Trigger Button

Then we need a button to trigger the popup when it’s clicked. It must have .thickbox class so the javascript can handle it properly. To have it button-like visual, append .button class.

Next part is building the URL. It consists of 4 important query args: action, TB_iframe, width, and height. The action value determines our hook when creating the page. So here how the button looks like:

$url = add_query_arg( array(
    'action'    => 'foo_modal_box',
    'TB_iframe' => 'true',
    'width'     => '600',
    'height'    => '400'
), admin_url( 'admin.php' ) );

echo '<a href="' . $url . '" class="button button-primary thickbox">' . __( 'Add New Customer', 'foo' ) . '</a>';

In code above, we use add_query_arg() to build our URL. The result would be: http://local.dev/wp-admin/admin.php?action=foo_modal_box&TB_iframe=true&width=600&height=400

Create the Page

We’ll hook to admin_action_{$action} to create our page. By default, we’ll get a blank response when requesting to that page. We can simply testing with an echo and exit.

function foo_render_action_page() {
    define( 'IFRAME_REQUEST', true );
    iframe_header();

    // ... your content here ...
    iframe_footer();
    exit;
}
add_action( 'admin_action_foo_modal_box', 'foo_render_action_page' );

Note the IFRAME_REQUEST constant, it will remove extra 32px top padding of the <html> added by .wp-toolbar.

iframe_header() and iframe_footer() work like wp_head() and wp_footer() on theme. They will output base HTML page tailored for iframe view. That means no admin bar, no admin menu, just empty page.

Alright, go on and try clicking our button. TADAA! 🙂