Nulis CSS di JS, ide gila apa lagi ini? Apa bedanya JAMstack sama single-page application? Apa saja pertimbangan memilih generator untuk website statis, GatsbyJS atau Hugo? Udah saatnya episode kabar-kabari! Episode kali ini ga hanya menjawab pertanyaan-pertanyaan ini, tapi juga ngabarin library-library seru, tool-tool dan artikel-artikel bermanfaat.


Daftar Isi


Dengarkan

Langganan podcast | Ikuti survey pendengar

Ada yang terlewat? Silakan komentar di bawah ya.. Jangan lupa berlangganan podcast dan newsletter Developer Muslim. Lihat arsip edisinya di sana. Kalau suka sama pilihan artikel-artikelnya, kenapa ga langganan? :)

Transkrip

Catatan: Apa yang tertera dalam transkrip belum tentu sama persis dengan apa yang saya ucapkan di podcast.

Halo, apa kabar semuanya? Semoga keadaan lo baik-baik dan menyenangkan. Alhamdulillah gw baik. Berusaha mengejar keterlambatan pekan lalu, gw pengen rilis episode kali ini dengan jarak yang ga terlalu jauh dari biasanya. Makasih buat dukungan retweet & like nya hari Jum’at lalu pas gw tweet episode 86 yang ala kadarnya. Ya gw sadar diri lah yg di-like itu kegombalan tweet, bukan isi episodenya. Hehehe..

Makasih udah dengerin. Podcast ini bahas seputar developer, apa yang bikin mereka produktif, berkembang dan peduli sama lingkungan. Cuplikan episode yang udah dirilis, sebagiannya bisa dilihat di instagram.com/devmuslimid.

Satu hal lagi yang mau ucapin terimakasih, yaitu buat lo yang udah DM di Twitter & email gw untuk kasih usulan bahasan dan beberapa pertanyaan. Nanti akan gw sebut kalau usulannya sudah berwujud rekaman. Sekali lagi makasih banyak buat lo semuanya. Kalian semua pada keren-keren dah..!

Kali ini gw mau bawain kabar-kabar di dunia web, open source, command line dan beberapa video di YouTube yang bisa lo dengerin kalau lagi santai.

  1. CSS: the cascade, specificity, and inheritance

    Dunia CSS akhir-akhir ini udah mulai dijamahi Javascript. Sebelum jauh ke sana, gw saranin untuk selalu megang prinsip dasar gimana CSS itu bekerja. Jadi yang pertama yang mau gw kabarin di area CSS ini adalah tulisan yang menjelaskan secara ringkas pilar-pilar utama bagunan CSS, gimana cara kerjanya dan gimana browser menginterpretasinya. Tulisan lawas tapi emas berjudul “CSS: the cascade, specificity, and inheritance” oleh Nicolas Gallagher ini sangat bermanfaat untuk bertahan dalam menghadapi arus framework atau library yang berkaitan sama CSS. Kalau hari gini masih suka bingung kenapa CSS lo ga sesuai dengan harapan lo, dan siapapun yang ngurus website-nya sendiri, gw saranin untuk baca tulisan yang mungkin cuma 5 menit ini.

  2. Linaria - Zero-runtime CSS in JS library

    Gw udah singgung sebelumnya kan, kalau sebagian orang sekarang udah nulis CSS di Javascript. Nah Linaria adalah di antaranya. Fitur unggulannya adalah ga pakai runtime.

    Sebelum jelasin ke sana, ada baiknya gw jelasin dulu kenapa ada orang mau menulis CSS di Javascript. Itu alasannya sama seperti kita menggunakan preprocessor seperti Sass, LESS, Stylus dan PostCSS. Supaya nulis dan pengaturan CSS nya lebih baik, ga hanya dari pengaturan file, tapi juga penamaan, nesting dan juga sisi pemrogramannya. Kita bisa nulis variabel warna supaya konsisten misalnya, atau mengaplikasikan sebuah fungsi ke warna, transisi dan lain-lain. Namanya preprocessor, jadi perannya ini memproses filenya sehingga berakhir menjadi sebuah file CSS yang bisa dimengerti oleh browser. Lo bisa baca lebih lanjut mengenai CSS preprocessor ini atau nanti bisa lihat ke catatan episode ini.

    Lanjut ya.. Jadi preprosesor ini tentu punya runtime untuk memproses file mereka ke CSS. Dengan meletakkan, mendefinisikan CSS ini di Javascript, performa-nya jadi lebih baik. Jadi style-nya bisa dideskripsikan secara deklaratif dan bisa dimaintain. Di antara library yang melakukan hal ini adalah JSS, Styled Components, Radium dan ga tau kalau ada yang lain. Setidaknya JSS setahu gw itu masih ada runtime nya.

    Nah salah satu fitur andalannya Linaria adalah ga ada runtime karena CSS nya langsung di ekstrak ke file CSS saat build.

    • Sintaks CSS nya udah tidak asing dan nesting-nya mirip dengan Sass,
    • Bisa dynamic property pake React bindings,
    • Masih bisa nemu di mana CSS nya didefinisikan, dengan CSS soourcemaps,
    • Mendukung lint stylelint,
    • Bisa aplikasi logika dengan Javascript tanpa perlu CSS preprocessor,
    • Tapi kalau tetap mau pakai CSS preprocessor masih bisa juga

    Sepertinya cukup meyakinkan nih, mereka juga bikin halaman khusus untuk jelasin keuntungan-keuntungan & kenapa lo mau coba Linaria.

  3. JAMstack Cheatsheet

    Dari CSS kita geser dikit ke JAMstack. JAMstack itu bukan framework Javascript, tapi sebuah konsep aja. JAMstack itu singkatan dari Javascript, API & Markup.

    • Jadi bagian dari fungsi-fungsi dinamis dari website itu ditangani oleh Javascript, ga terikat apakah dia pake framework atau bukan
    • APIs itu operasi / request yang dilakukan di server melalui HTTPS
    • Markup nya berupa website yang berupa HTML statis.

    Waktu istilah ini muncul, gw belum nangkep perbedaannya apa dengan Single-page application. Ya mungkin kalau JAMstack ini bisa lebih dari 1 halaman statis. Cuma secara konsep bukanlah hal yang baru dan gw rasa gw ga sendirian. Tapi ternyata kriteria JAMstack lebih dari itu. Nah, baru-baru ini ada situs cheatsheet yang berisi semua yang bisa lo ketahui tentang JAMstack secara menyeluruh. Jadi selain menjelaskan keuntungan-keuntungannya, situs ini juga menjelaskan

    • praktik-praktik yang terbaiknya dalam implementasi
    • alur kerjanya, apa aja yang dikerjakan dahulu
    • ada penjelasan mengenai pengembangan (development), peluncuran (deployment),
    • dan sumber-sumber lainnya.
  4. Building a Personal Site with Gatsby

    Masih berhubungan dengan JAMstack di bagian markup HTML nya yang statis. Ini ada tutorial menggunakan GatsbyJS, yang lumayan hangat dan menarik beberapa bulan terakhir ini. GatsbyJS adalah sebuah generator konten HTML statis yang berbasis NodeJS dan frontend nya menggunakan React. Yang menarik dari Gatsby ini selain React-nya, dia juga menyediakan GraphQL dari aset atau data yang kita masukkan ke dalam kode proyeknya. Jadi untuk yang pernah pakai generator HTML statis, kita nulis konten, post atau halaman HTML dalam file Markdown, nah si generator ini yang akan menghasilkan file-fil html statis yang bisa kita upload ke hosting. Jadi dengan GraphQL ini kita bisa mengakses judul post-nya, atau kalau memang ada data tertentu kita bisa query juga. Dan untuk yang terbiasa dengan GraphQL ini akan jadi nilai tambah yang seru. Jadi situs statis yang dihasilkan itu ga kaku-kaku banget gitu, kita bisa berkreasi dengan data dari GraphQL ini secara dinamis.

    Ya jadi ini tutorial Gatsby nya ga sekedar 1 tulisan panjang, tapi berupa serial yang terdiri dari 9 artikel blog lengkap dari pengenalan, memberikan gaya / styling dengan Sass (CSS preprocessor yang gw singgung di awal tadi), terus sampai upload ke hosting.

    Tadi gw bilang berhubungan sama JAMstack karena situs yang dibikin Gatsby itu masuk ke dalam banyak kriteria dari JAMstack dan secara default sudah mendukung Progressive Web App.

    Dan sedikit tambahan dari gw, mas Riza Fahmi juga bikin video tutorial sederhana mengenai GatsbyJS ini dan udah pakai versi 2 kalau ga salah.

  5. Migrating from Jekyll+Github Pages to Hugo+Netlify

    Dan ngomong-ngomong soal generator situs statis, yang lumayan pelan-pelan lagi naik daun adalah Hugo. Ditulis dengan bahasa Go, kecepatan yang luar biasa adalah di antara keunggulannya. Seperti yang diceritakan sama bloger & developer Sara Soueidan di artikel blognya, beliau mulai mengeluh sama lemotnya Jekyll, generator yang dipakai sebelumnya. Buat yang belum kenal, beliau ini terkenal dan lumayan aktif nulis mengenai web. Tulisan beliau ini membahas mulai dari keluhan tadi, terus memilih generator situs statis yang lebih baik, sampai akhirnya setup & menyelami Hugo. Meskipun tulisan ini sangat panjang, lo bisa skim dan lihat keunggulan-keunggulan Hugo.

    Sedikit tambahan dari gw, situs devmuslim.id juga pakai Hugo dan gw bersyukur banget udah milih itu. Deployment nya itu super keren banget, ga cuma cepet, tapi cuma 1 baris, atau bahkan 1 kata, yaitu perintah hugo. Dan file binernya bisa dimasukin ke dalam folder proyek jadi bisa dijalankan di manapun, ga perlu install! Super keren banget kan! Sebagai perbandingan dengan generator lain yang berbasis Ruby atau Javascript sekalipun, tetap harus install NodeJS, jalanin npm install, belum lagi jalanin perintah untuk membangun (build) situsnya.

  6. Qoa - Minimal interactive command-line prompts

    Dari web, kita mampir ke command line. Ada tool baru yang membantu mengambil input dari command-line. Tool ini berbasis NodeJS. Jadi kalau kita perlu beberapa input untuk command-line, seperti form gitu, misalnya input nama, makanan favorit, atau apapun termasuk password. Saat baca dan lihat demonya, ya keren & user friendly sih untuk dunia command line ya. Gw bisa lihat ini akan bermanfaat untuk aplikasi-aplikasi command line dalam mengambil data dari user.

    Cara pemakaian paket NPM ini pun juga sangat gampang. Setelah import, kita tinggal masukin JSON bentuk pertanyaannya seperti apa, kaya tipenya, kalimat pertanyaannya, dan akan disimpan sebagai apa. Abis itu kita tinggal kasih JSON ini ke prompt dan jalanin script nya. Bisa interaktif juga kalau ada pilihan-pilihan jawaban. Seru untuk main-main sama tool ini dan cocok banget buat skrip sederhana di server.

  7. gitin - commit/branch/workdir explorer for git

    Selanjutnya ada tool namanya gitin untuk menjelajahi informasi yang ada di git proyek kita. Buat kita yang udah nyaman di editor atau hidup di command-line, tentu pindah-pindah ke aplikasi grafis akan jadi kemalasan tersendiri buat sebagian orang. Ya ok lah bukan malas, tapi lo akan terbantu kan kalo ada aplikasi yang bisa membantu kerjaan lo tanpa harus keluar dari command-line? Dan dalam hal ini, untuk mencari-cari informasi yang ada di git pun tetap harus menggunakan searching kalau aplikasi git nya berbasis grafis.

    Nah, gitin ini punya banyak fitur, di antaranya:

    • Fuzzy search (ketik / untuk nyari sesuatu setelah jalanin gitin)
    • Tersedia banyak filter untuk sejarah komit. misalnya berdasarkan orang tertentu.
    • Bisa lihat komit-komit sebelum atau sesudah
    • Bisa menjelajahi branch dengan filter dan juga checkout kalau mau
    • Dan masih banyak lagi pilihannya, silakan jalanin gitin --help. Ada sub perintahnya juga dan bisa dijalankan dengan --help
  8. For the Love of Pipes

    Selanjutnya ada artikel blog yang secara singkat menjelaskan kedudukan operator pipe (|) yang gw pikir ada baiknya untuk lo ketahui. Meskipun jarang pakai terminal, dengan mengetahui ini bisa bermanfaat kalau mau memanipulasi data teks maupun konversi foto dalam skala banyak. Selain fungsi operator pipe, juga dijelasin filosofi dari Unix.

  9. Homebrew 2.0 is here with official support for Linux and Windows

    Developer yang pakai Mac, kemungkinan besar kenal sama Homebrew. Sebuah paket manager yang seharusnya udah ada di Mac. Setup Mac bisa jadi jauh lebih cepat dan bisa diotomatisasi sebagian besarnya dengan keberadaan Homebrew ini. Dan sekarang versi 2.0 nya udah dirilis dan sekarang udah resmi mendukung Linux & Windows 10! Windows 10 nya dengan Windows Subsystem untuk Linux. Ya ini kabar ga terlalu baru, tapi sebagian besar pengguna windows pun baca judul beritanya juga ga akan ngeh Homebrew itu apa dan sejauh apa pengalaman development nya akan berubah. Jadi kasih tau lah kabar gembiar ini ke teman-teman kita yang pakai Windows 10. Gw seneng banget denger berita ini.

    Kalau lo udah coba mau dong bagi-bagi pengalamannya ke gw. Semoga membantu & menyenangkan prosesnya ya..

  10. Watch Erik Kennedy redesign the Timezon.es app in less than 10 minutes

    Dan yang terakhir ada video YouTube di mana Erik Kennedy mendesain ulang aplikasi web Timezon.es dalam waktu ga sampai 10 menit. Di sini penjelasannya sangat baik dalam proses mengambil keputusannya jadi lo bisa belajar juga gimana proses berfikirnya dalam mendesain. Bakalan jadi video 10 menit yang menyenangkan.

Baik itu aja yang bisa gw sampaikan di episode kali ini. Semua item yang gw sebut di sini gw pilah pilih dari situs Changelog. Terima kasih untuk semua pengurusnya Adam Stacoviak & Jarod Santo. Makanya semuanya dari luar negeri.

Untuk yang di dalam negeri belum ada mekanisme pengumpulannya. Kalau lo mau kirim beberapa kumpulan tulisan, video atau proyek open source berbahasa Indonesia atau dari dalam negeri, silakan kirim email ke [email protected] Formatnya bebas atau bisa lihat transkripnya di catatan episode ini, episode 87. Link yang dibahas bisa dilihat di https://devmuslim.id/episode87.

Pertanyaan, kritikan, saran atau cuma mau kenalan, atau mau ngenalin seseorang? Boleh banget! Silakan kirim email ke [email protected] atau DM gw langsung di Twitter atau di Instagram dengan akun yang sama, @devmuslimid. Kalau belum ada bahan yang mau disampaikan, lo bisa lihat rundown topik-topik yang insya Allah akan dibahas di podcast ini di Github. Siapa tahu muncul pertanyaan susulan atau kepikiran untuk topik lain, ya kan? Silakan kunjungi https://bit.ly/devmuslimrundown b i t titik l y garis miring d e v m u s l i m r u n d o w n.

Podcast ini bagian dari Product & Development Podcast Community Indonesia. Informasi lebih lanjut bisa ke github.com/pdpcid. Dalam waktu dekat kita akan segera meluncurkan situs & podcast komunitasnya juga. Situsnya pakai GatsbyJS dan itu ada di Github. Silakan kalau ada yang mau ngikutin tutorial yang disebut tadi dan berkontribusi kembali. Bukannya apa-apa, tapi ini kesempatan emas bagi kalian yang mau berkontribusi bareng mas Riza Fahmi. Pengalamannya yang akan didapat insya Allah unik. Kita perlu banyak bantuan untuk mengembangkan komunitas ini. Lo ga perlu ahli, cukup peduli dan pengen banget ada lebih banyak lagi konten podcast seperti ini untuk teman-teman sejawat di Indonesia, entah itu desainer, project manager, data engineer, pokoknya yang berkaitan sama produk dan pengembangan. Harap hubungi gw.

Podcast ini tersedia di Apple Podcast, Google Podcast, dan lain-lain. Lo bisa lihat pilihan2nya di http://anchor.fm/devmuslimid. a n c h o r titik f m garis miring d e v m u s l i m i d. Jangan lupa kasih komentar & rating yang bagus di aplikasi manapun lo dengerin podcast ini. Buktikan kepedulian & dukungan lo untuk podcast ini.

Baik, gw pamit dulu. Sampai di episode developer muslim podcast berikutnya insya Allah.

Berbagi itu Tanda Peduli

Jangan merasakan manfaat episode ini sendirian aja. Ayo sampaikan informasi ini ke teman-teman developer lainnya. Kasih rating & komentar yang bagus di layanan-layanan podcast ini. Saya juga senang sekali dapat tanggapan & komentar di bawah.


Kembali ke: