DEV Community: Armedi

Menggunakan TypeScript Template Literal Type

Armedi — Mon, 03 May 2021 07:56:48 +0000

Template Literal Type telah tersedia sejak TypeScript versi 4.1 yang dirilis pada November 2020 lalu. Fitur ini sangat powerful, hingga ada yang membuat implementasi SQL hanya dengan TypeScript type annotation. Template Literal Type ini menjadi tipe data literal keempat di TypeScript setelah string, number, dan boolean.

Basic

Sintaks untuk template literal type sama persis dengan string template literal, tapi digunakan pada deklarasi tipe data.

Misalkan kamu membuat sebuah React component sebagai berikut:

Tipe data Position adalah string union yang merepresentasikan kombinasi posisi vertikal dan horizontal. Bayangkan kalau ada puluhan kombinasi yang harus ditulis satu per satu, tentu akan menjadi pekerjaan yang melelahkan. Dari contoh ini saja bisa dilihat ada cukup banyak pengulangan yang harus dituliskan untuk membuat kombinasi yang lengkap.

Contoh diatas Jika di-refactor dengan menggunakan template literal type, maka akan menjadi

Dengan menggunakan Template Literal Type kita bisa dengan mudah membuat kombinasi antara tipe VerticalPosition dengan HorizontalPosition menjadi tipe data Position.

Template Literal Inference

Fitur powerful dari template literal type datang dari kemampuan untuk meng-infer tipe data dan digabungkan dengan conditional type. Misalkan sebuah fungsi melakukan manipulasi terhadap string seperti mengubah dari snake_case menjadi camelCase. Fungsi ini menerima input berupa string dan menghasilkan output string.

Dengan menggunakan template literal type dan juga type inference, kita bisa membuat fungsi yang menghasilkan tipe data output yang lebih spesifik:

Lalu apa gunanya tipe data literal untuk output seperti diatas?

Misalnya kamu memiliki fungsi yang mengubah properti sebuah object dari snake_case menjadi camelCase

Pada contoh diatas, object camelCasedProperties yang merupakan output dari fungsi camelCaseProperties tidak type safe. Berbeda halnya jika menggunakan template literal type, maka output dari fungsi camelCaseProperties menjadi fully typed, dan code completion dari editor pun menjadi tersedia.

Daftar Referensi:

React Proxy-State dengan Valtio

Armedi — Sat, 28 Nov 2020 07:16:07 +0000

Dari pengalaman saya mengajar fullstack web development, banyak sekali murid yang bilang bahwa mereka lebih enjoy menggunakan Vue daripada React. Dan salah satu penyebabnya adalah karena manipulasi state di React tidak senyaman di Vue (Ini menurut beberapa orang yang pernah saya tanya).

Berangkat dari hal itu, sekitar 3 bulan yang lalu saya menulis artikel tentang bagaimana menggunakan library Vue reactivity di React

Menggunakan Vue Reactivity pada Komponen React

Armedi ・ Sep 11 '20 ・ 5 min read

#react #vue3 #vuecompositionapi #vueinreact

Ide dasarnya adalah tentang bagaimana menggunakan state yang mutable pada React. Dan waktu itu saya menggunakan library @vue/reactivity.

@vue/reactivity ini pada dasarnya menggunakan Proxy untuk change detection. Yaitu proses bagaimana perubahan state dideteksi dan kemudian men-trigger update pada UI menyesuaikan dengan state terbaru.

Dan jujur saja ketika library ini saya pakai di React, code yang dibuat tidak menjadi lebih sederhana dan lebih mudah dipahami dibandingkan menggunakan bawaan dari React seperti useState hook. Tapi idenya sendiri (mutable state di React) saya yakin sangat sangat legit.

Nah di artikel ini saya akan bahas sebuah library baru yang lagi ngehits.

pmndrs / valtio

💊 Valtio makes proxy-state simple for React and Vanilla

Pada waktu tulisan ini dibuat, valtio baru berumur sepuluh hari semenjak versi 0.1 dirilis namun telah memperoleh sebanyak 1,2k stars di github. Suatu pertanda baik bahwa library ini punya masa depan yang sangat cerah, hehe.

Di bawah ini adalah contoh resmi dari githubnya valtio. Di sini kamu liat betapa simpelnya cara penggunaannya

Benar gampang kan?

import { proxy, useProxy } from 'valtio';

const state = proxy({ number: 0 });

function Figure() {
  const snapshot = useProxy(state);

  return <div className="figure">{snapshot.number}</div>;
}

State valtio bebas kamu mau mutate dimana saja, dan bahkan sudah support Suspense.

Langsung aja kamu bisa cek githubnya di https://github.com/pmndrs/valtio untuk melihat fitur-fitur keren apa aja yang tersedia.

Semoga berguna!!!

Logical Assignment Operators di Javascript

Armedi — Sat, 14 Nov 2020 05:53:41 +0000

Ada beberapa operator baru yang sangat praktis digunakan untuk mempersingkat kodingan Javascript kamu. Proposalnya sudah sampai tahap stage 4 yang artinya akan dimasukkan pada versi ECMAScript berikutnya (ES2021). Ini juga berarti sekarang sudah bisa digunakan karena sudah support oleh browser-browser modern versi terupdate tanpa menggunakan transpiler. Tapi tentu saja untuk kompatibilitas yang lebih tinggi disarankan kamu tetap menggunakan transpiler seperti Babel atau menggunakan Typescript.

Ada 3 operator yang masuk dalam proposal logical assignment ini:

Logical OR assignment ||=
Logical AND assignment &&=
Logical nullish assignment ??=

Logical OR assignment `||=`

Operator ini berguna untuk case mengganti value sebuah variable jika valuenya adalah falsy.

Misal untuk mengganti value variable a jika value sebelumnya adalah falsy, tanpa logical OR assignment kamu melakukannya lebih kurang dengan cara-cara seperti ini:

// cara 1
if (!a) {
  a = 'new value';
}

// cara 2
a = a || 'new value';

Dengan logical OR assignment menjadi lebih singkat:

a ||= 'new value';

Kode diatas akan ditranspilasi oleh Babel menjadi:

a || (a = 'value');

Logical AND assignment `&&=`

Operator ini adalah kebalikan dari operator sebelumnya. Yaitu untuk case mengganti value sebuah variable jika valuenya adalah truthy.

Tanpa logical AND assignment, untuk mengganti value variable a jika value sebelumnya adalah truthy kamu melakukannya lebih kurang dengan cara-cara seperti ini:

// cara 1
if (a) {
  a = 'new value';
}

// cara 2
a = a && 'new value';

Syntax diatas bisa dipersingkat dengan menggunakan logical AND assignment:

a &&= 'new value';

Hasil transpilasinya oleh Babel menjadi:

a && (a = 'new value');

Logical nullish assignment `??=`

Kalau sebelumnya operator logical OR assignment berguna untuk mengecek nilai falsy yang di dalamnya termasuk null dan undefined, operator ini spesifik untuk case value null atau undefined saja.

Tanpa menggunakan logical nullish assignment, untuk mengecek value null atau undefined dan menggantinya dengan value baru, kamu melakukannya lebih kurang dengan cara-cara berikut ini:

// cara 1
if (a == null || a == undefined) {
  a = 'new value';
}

// cara 2
a = a ?? 'new value';

Akan menjadi lebih singkat dengan menggunakan logical nullish assignment:

a ??= 'new value';

Kode diatas akan ditranspilasi oleh Babel menjadi:

var _a;

(_a = a) !== null && _a !== void 0 ? _a : (a = 'new value');

Referensi:

Progressive Image Loading dengan BlurHash

Armedi — Sat, 31 Oct 2020 06:55:24 +0000

BlurHash adalah sebuah representasi dari placeholder gambar dalam bentuk string singkat (sekitar 20-30an karakter per gambar).

Kebanyakan dari website yang biasa kita akses biasanya menggunakan background dengan warna tertentu sebagai placeholder hingga image selesai di-load, dan biasanya juga menggunakan placeholder yang sama untuk semua image. Paling sering biasanya yang digunakan adalah background dengan warna abu-abu.

Dengan menggunakan BlurHash, kamu bisa membuat placeholder yang unik untuk setiap image. Karena BlurHash sendiri adalah dalam bentuk string singkat seperti ini LEHV6nWB2yk8pyo0adR*.7kCMdnj, jadi bisa ditempelkan langsung ke file html jika menggunakan static html atau bisa dikirim dengan API bersamaan dengan link gambar aslinya jika gambar yang ingin di-load bersifat dinamis.

Dari hash tersebut kemudian di-decode menjadi gambar blur yang merepresentasikan aslinya

Di akun github resminya, terdapat berbagai implementasi untuk berbagai platform. Saya sendiri membuat implementasi yang bisa digunakan pada file html biasa tanpa harus ada javascript sama sekali.

Cara menggunakannya sangat simpel, cukup dengan memasang script berikut di html

<script src="https://unpkg.com/rescript-blurhash@0.3.2/dist/production.min.js"></script>

kemudian di setiap image tambahkan attribute data-blurhash seperti ini

<img
   src="https://blurha.sh/assets/images/img1.jpg"
   data-blurhash="LEHV6nWB2yk8pyo0adR*.7kCMdnj"
   style="width: 269px; height: 173px"
/>

Maka otomatis gambar akan menampilkan placeholder berupa versi blurnya terlebih dahulu hingga gambar tersebut selesai di-load.

Oh iya, untuk melakukan encoding kamu bisa menggunakan website resmi blurhash atau menggunakan salah satu dari berbagai implementasinya tadi.

Sebagai demo saya menggunakan gambar kategori produk dari tokopedia dimana aslinya tokopedia menggunakan placeholder background berwarna abu-abu. Demo bisa kamu lihat dengan klik link ini. Untuk melihat bagaimana blurhash diload mungkin kamu perlu mensimulasikan slow network pada devtools di browser terlebih dahulu dan kemudian lakukan hard reload.

Kodenya bisa kamu liat disini

ReasonReact, Part 1: Development Setup

Armedi — Sat, 10 Oct 2020 10:15:18 +0000

Beberapa hari yang lalu saya membaca sebuah artikel tentang sebuah bahasa pemrograman "baru", lebih tepatnya sih nama baru untuk sebuah project lama. Nama dari bahasa baru ini adalah ReScript.

Project ini sebelumnya bernama BuckleScript yang dirilis oleh Bloomberg pada pertengahan tahun 2016 lalu. Bucklescript ini merupakan compiler yang menghasilkan kode javascript dari sumber OCaml.

Pada tahun 2016 juga Facebook merilis ReasonML, sebuah syntax baru untuk OCaml yang didesain agar terlihat familiar bagi developer javascript. Kemudian di tahun berikutnya lahir lah ReasonReact, binding untuk React dalam bahasa ReasonML.

Setelah membaca artikel tadi, akhirnya saya pun mencoba ReasonReact. Cukup lama juga keinginan untuk mencoba ini hanya sampai sebatas niat yang tidak pernah terealisasikan 😄.

Apa keuntungan menggunakan ReasonReact dibandingkan React.js?

Simpelnya adalah eliminasi bugs. Contoh realnya adalah Facebook yang mengurangi bug dengan sangat drastis pada messenger.com setelah migrasi ke Reason.

Kok bisa?

Karena powerful type system dapat meminimalisir kesalahan yang mungkin dibuat oleh developer. Hal yang sama sebenarnya kenapa sekarang untuk project dengan skala menengah ke atas banyak yang akan memilih typescript dibandingkan plain javascript. Hanya saja Reason lebih baik dibandingkan Typescript dalam hal type system-nya.

Inisiasi ReasonReact

Untuk quick start bisa menggunakan command yang tertera pada dokumentasinya ini

Tapi saya merasa kalau setup yang diberikan pada starter template agak kurang. Karena:

Ada dua command yang harus dijalankan di dua sesi terminal: npm start dan npm run server.
Tool yang dipakai untuk hot reload menggunakan cara yang sudah deprecated.
Untuk tool seperti PostCSS harus ditambahkan pada pipeline terpisah.

Bagian selanjutnya dari artikel ini tidak terlalu penting untuk kamu baca 😁. Kamu bisa lanjut dengan setup standard, atau menggunakan template yang sudah saya buatkan di repositori berikut ini:

armedi / reason-react-snowpack

Starter template for building SPA with ReasonReact, Tailwind CSS, and Snowpack for development

ReasonReact with Snowpack Template

Included in this template:

snowpack for development
webpack for production build
tailwind css

Project setup

npm install

Compiles and hot-reloads for development

npm start

Compiles and minifies for production

npm run build

View on GitHub

Hasil akhir dari percobaan pertama saya menggunakan ReasonReact bisa dilihat di repositori berikut pada branch reason-react

armedi / kuy.app

Setup Snowpack

Nah selanjutnya dari skeleton yang sudah ada kita akan buat agar bisa menutupi tiga hal yang saya sebutkan diatas.

Tool yang akan dipakai adalah Snowpack. Untuk penggunaan development, Snowpack lebih cepat dan ringan dibanding Webpack atau Rollup karena proses yang unbundled (source files dan dependencies di-serve tanpa di-bundle)

Langkah pertama hapus file dan package yang tidak diperlukan.

$ npm uninstall moduleserve

$ rm -rf src watcher.js UNUSED_webpack.config.js index.html indexProduction.html

Kemudian install package-package berikut

$ npm install --save-dev snowpack @snowpack/plugin-react-refresh

Untuk starting point halaman web, buat file index.html pada folder public

$ mkdir -p public

$ touch public/index.html

lalu isi dengan

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ReasonReact</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/__src__/index.js"></script>
  </body>
</html>

Setelah itu buat file konfigurasi snowpack

$ touch snowpack.config.js

kemudian isi dengan

module.exports = {
  mount: {
    public: '/',
    src: '/__src__',
  },
  plugins: [
    '@snowpack/plugin-react-refresh',
    [
      '@snowpack/plugin-run-script',
      { cmd: 'bsb -make-world', watch: '$1 -w -ws _' },
    ],
  ],
};

Selanjutnya buat file src/Index.re sebagai entry point untuk kode Reason

$ mkdir -p src

$ touch src/Index.re

isi dengan

[@bs.val] external document: Js.t({..}) = "document";

ReactDOMRe.render(
  React.string("Hello ReasonReact!"),
  document##getElementById("root"),
);

Terakhir, update package.json dan bsconfig.json

// package.json
{
  // ...
  "scripts": {
    "start": "snowpack dev"
    // ...
  }
  // ...
}

// bsconfig.json
{
  // ...
  "package-specs": [
    {
      "module": "es6",
      "in-source": true
    }
  ]
  // ...
}

Oke, sekarang development environment ReasonReact kita sudah siap digunakan

$ npm start

Serverless dengan Cloudflare Workers

Armedi — Sat, 03 Oct 2020 06:38:07 +0000

It’s a movement that is defined by empowering developers to single-handedly build apps that handle production level traffic. They don’t have to actively manage scaling their infrastructure. They don't have to provision servers, or pay for resources that go unused. They can just focus on building. https://www.serverless.com/learn/manifesto/

Kalau bicara soal traffic handling, semua developer pasti kenal dengan nama Cloudflare. Misalnya untuk urusan CDN, data builtwith.com menunjukkan bahwa Cloudflare memegang market share terbesar dengan digunakan oleh 45,14% dari top 10k websites. Cloudflare sendiri mengklaim melayani lebih dari 25 juta internet properties.

Dalam bidang serverless computing Cloudflare memiliki Cloudflare Workers yang men-support secara penuh bahasa pemrograman javascript.
Dibandingkan dengan AWS Lambda, atau Google Cloud Functions, memang product yang ditawarkan oleh Cloudflare ini kalah populer.

Tapi ada keunikan sendiri yang membedakannya dengan AWS atau Google. Uniknya adalah code javascript tidak running diatas Node.js, tapi menggunakan V8 Isolates.

Dengan model ini tidak ada yang namanya cold start, yaitu ketika request pertama akan memperoleh response yang lambat karena instance membutuhkan waktu untuk "bangun" dari sebelumnya dalam kondisi "tidur" ketika tidak ada request yang masuk dalam rentang waktu tertentu. Dan juga tidak ada pemilihan lokasi seperti di AWS misalnya memilih lokasi ap-southeast-1 untuk data center Singapore.

Kenapa tidak perlu memilih lokasi? Karena code akan running di lokasi terdekat dengan user, atau biasa disebut dengan istilah Edge Computing. Misalnya jika user datang dari pulau Jawa, maka akan otomatis di-serve oleh data center Cloudflare yang ada di Jakarta.

Untuk artikel ini saya membuat ulang url-shortener yang telah saya buat dua minggu yang lalu dengan Netlify redirects.

Menggunakan Netlify sebagai url shortener

Armedi ・ Sep 20 '20 ・ 3 min read

#netlify #redirects

Kali ini menggunakan Cloudflare Worker. Saya tambahkan juga user interface di website https://kuy.app sehingga sekarang bisa digunakan oleh siapa saja.

Setup

Dokumentasi lebih detil terdapat di Gettting Started resmi Cloudflare Workers.

Buat akun Cloudflare, kemudian di dashboard cloudflare tambahkan website baru.
Install Workers CLI

   npm install -g @cloudflare/wrangler

Buat project baru dengan template starter

   wrangler generate my-worker
   cd my-worker

Di dalam folder my-worker akan terdapat file konfigurasi wrangler.toml untuk konfigurasi account_id. Dapatkan account_id kamu di dashboard Cloudflare, lalu update file wrangler.toml

   name = "hello"
   type = "javascript"
   account_id = "<your cloudflare account_id>"
   workers_dev = true
   route = ""

Untuk menjalankan di environment development

   wrangler dev

Development server akan berjalan default di http://localhost:8787

Menghandle Request dengan Cloudflare Worker

Menulis code javascript untuk Cloudflare Workers tidak sama dengan menulis code untuk Node.js, tapi seperti menulis code untuk Service Worker.

Request yang masuk ke workers akan diterima sebagai event fetch. Lalu untuk response yang dikirim ke user, dibuat menggunakan object Response standard dari Web API.

Hello World dengan Cloudflare Workers:

addEventListener('fetch', (event) => {
  event.respondWith(
    new Response('Hello world!', {
      headers: { 'content-type': 'text/plain' },
    })
  );
});

Detil dari request terdapat pada properti event.request yang juga merupakan object Request standard dari Web API.

Jika body request yang masuk adalah berupa data JSON, bisa diparse dengan method .json()

addEventListener('fetch', (event) => {
  if (event.request.method === 'GET') {
    event.respondWith(
      new Response('Hello world!', {
        headers: { 'content-type': 'text/plain' },
      })
    );
  } else {
    event.request.json().then((body) => {
      // echo user request
      event.respondWith(
        new Response(JSON.stringify(body), {
          headers: { 'content-type': 'application/json' },
        })
      );
    });
  }
});

Publish ke Cloudflare Workers

Untuk mem-publish gunakan command berikut

wrangler publish

Nah untuk code yang berkaitan dengan metode url shortening bisa langsung dilihat saja di repository github berikut:

armedi / kuy.sh

Untuk data persistence, di sini saya menggunakan faunaDB yang juga sangat cocok digunakan pada environment serverless.

Menggunakan Netlify sebagai url shortener

Armedi — Sun, 20 Sep 2020 04:18:23 +0000

Kamu pasti sudah kenal dengan layanan url shortener seperti bit.ly. Sangat berguna sekali untuk sharing link promosi atau info menarik dengan url yang singkat seperti bit.ly/aBcdE. Lumayan bisa menghemat karakter daripada harus copy paste url aslinya yang panjang.

Tapi barangkali kamu ingin menggunakan fitur branded link dari bit.ly dengan domain sendiri (misalnya toko.onl/smartphone), namun masih berpikir dua kali karena melihat harga termurahnya adalah $29 per bulan dan harus dibayar langsung untuk 1 tahun sebesar $348.

Solusi yang jauh lebih murah adalah dengan menggunakan Netlify redirects yang bisa dipakai gratis. Kamu hanya perlu menyediakan domain saja. Harganya sih variatif, beberapa ada yang bisa diperoleh dengan merogoh kocek kurang dari $10.

Step 1: Buat site baru di Netlify

Hubungkan site yang dibuat dengan repositori di github, agar kamu bisa pakai fitur Continous Deployment dari Netlify.

Step 2: Sediakan domain

Karena tujuannya buat dipakai sebagai url shortener, sebaiknya beli domain dengan jumlah karakter kurang dari 5 karakter.

Step 3: Konfigurasi DNS

Paling gampang adalah dengan menggunakan DNS Netlify. Ganti settingan DNS server domain kamu agar menggunakan DNS server Netlify. Kemudian gunakan domain itu sebagai domain utama untuk site yang sebelumnya sudah kamu buat.

Step 4: Konfigurasi Netlify di local dan buat daftar redirects

Pada root project, buat sebuah file dengan nama netlify.toml

Isinya cukup seperti ini saja

[build]
  publish = "."

Lalu masih di root project, buat sebuah file dengan nama _redirects

$ touch _redirects

Di dalam file ini adalah pasangan short url dan destinasi yang diinginkan. Masing-masing satu baris untuk setiap pasangan url. Ini contoh url yang saya pakai

/open-source        https://dev.to/armedi/merdeka-dengan-open-source-40d6
/vue-react          https://dev.to/armedi/menggunakan-vue-reactivity-pada-komponen-react-2j08
/alpinejs           https://dev.to/armedi/mencoba-alpine-js-tailwind-for-javascript-5hg6
/tailwindcss        https://dev.to/armedi/tailwind-css-dan-bagaimana-menggunakannya-dengan-create-react-app-7ba
/express-jsx        https://dev.to/armedi/menggunakan-jsx-sebagai-view-engine-express-js-d3o

Step 5: Commit dan push ke github

Kalau sebelumnya sudah sukses menyambungkan repositori github dengan Netlify, maka sekarang Netlify sudah otomatis men-deploy. Proses deployment yang sedang berjalan bisa dipantau dari dashboard Netlify.

Kalau sudah sukses, artinya sekarang kamu sudah berhasil memiliki url-shortener sendiri. Cek masing-masing short url yang kamu buat apakah sudah benar atau belum. Misalnya short url yang saya buat mengarah ke postingan artikel di dev.to

Step 6: Otomasi

Untuk penambahan url-url berikutnya, kalau dilakukan secara manual stepnya cukup banyak dan pasti membosankan

Buka directory project
Edit file _redirects
git commit perubahan yang dibuat
git push ke repository di github

Untuk mengotomasi itu semua, kita bisa bikin pakai javascript.

Masih di root project, buat file shorten (nama file bebas, tidak perlu pakai ekstensi .js)

$ touch shorten
$ chmod +x shorten

Kemudian agar script ini bisa diakses di terminal dari directory mana pun, kita akan buat symlink (command di bawah hanya berlaku di Linux dan Mac)

$ ln -s $PWD/shorten /usr/local/bin/shorten

Isi scriptnya lebih kurang seperti ini

Sekarang di terminal kamu bisa menyingkat url dengan menggunakan command seperti

$ shorten https://dev.to/armedi/menggunakan-netlify-sebagai-url-shortener-28jc /url-shortener

# outputnya:
shorten https://dev.to/armedi/menggunakan-netlify-sebagai-url-shortener-28jc to /url-shortener

Dan sudah otomatis terdeploy di Netlify. Bisa diakses di kuy.sh/url-shortener

Note:

Kekurangan menggunakan Netlify redirect dibandingkan dengan bit.ly atau sejenis adalah tidak adanya report statistik, misal seberapa sering link diakses. Kalau kamu merasa penting adanya report, mungkin perlu mempertimbangkan untuk membeli layanan berbayar.

Menggunakan JSX sebagai view engine Express.js

Armedi — Sat, 12 Sep 2020 11:20:25 +0000

JSX adalah sebuah ekstensi sintaks javascript. Walaupun dipopulerkan oleh React, tapi JSX tidak sama dengan React. Ada banyak framework lain yang menggunakannya seperti Preact, Inferno, dan Solid. Pada artikel kali ini, saya akan pakai JSX sebagai view engine untuk Express.js

Kenapa JSX?

Karena pada dasarnya jsx adalah javascript, sehingga semua tools yang tersedia untuk javascript bisa kita pakai untuk membangun UI yang menarik. Kalau butuh satu function tinggal import atau bikin langsung di file yang sama.

Berbeda sekali dibandingkan menggunakan template engine seperti pug, ejs, nunjucks, dkk. Yang masing-masingnya memiliki sintaks sendiri dan kalau mau menambahkan satu fungsi helper perlu diregistrasikan dulu ke enginenya atau didaftarkan sebagai local variable di express.

Sebenarnya ada library yang sudah jadi yang menggunakan jsx di expressjs, tapi semuanya depends ke React. Saya ingin sesuatu yang sederhana dan hanya memproduksi plain html. Karena ga ketemu yang cocok, saya putuskan untuk mencoba membuatnya sendiri.

Setelah membaca halaman Developing template engines for Express, saya berkesimpulan sepertinya membuat custom template engine bukan hal yang sulit. Express hanya butuh disediakan satu callback dengan signature (filePath, options, callback) => void

filePath adalah lokasi file yang diinvoke dengan res.render. Misalnya jika diinvoke res.render('index'), value filePath adalah /absolute/path/to/index.jsx
options adalah value dari parameter kedua res.render digabung dengan value lain yang disediakan oleh express.
callback adalah function yang harus diinvoke dengan hasil rendering dalam bentuk string.

Ada satu library bagus yang mengubah jsx element menjadi plain html string yang bisa dipakai sebagai dasar untuk percobaan membuat view engine expressjs. Yaitu vhtml yang dibuat oleh creator preact.

Untuk mentransformasi jsx menjadi javascript normal dengan vhtml function call, kita perlu menggunakan babel dengan plugin @babel/plugin-transform-react-jsx.

Berikutnya agar bisa mengimport css dan menggunakan css-in-js, saya tambahkan webpack dengan css-loader. Untuk css-in-js, saya menggunakan linaria dengan linaria/loader untuk webpack. Dan tentu saja tidak lupa tambahan konfigurasi untuk tailwindcss.

Hasil jadi dari percobaan ini bisa diakses di https://whatsmyip.fly.dev.

Seperti inilah code untuk halaman home yang dibuat dengan jsx, dan menggunakan kombinasi linaria + tailwindcss untuk styling.

Kenapa saya pakai linaria + tailwind, gak cuma tailwind aja? Karena hasil markup akhir terlihat lebih rapi dengan satu class saja, dan juga lebih gampang untuk mengkombinasikan tailwind dengan custom css yang kita tambahkan sendiri seandainya diperlukan.

Source code lengkapnya tersedia di

armedi / express-jsx

referensi:

Tailwind CSS, dan Bagaimana Menggunakannya dengan create-react-app

Armedi — Sat, 05 Sep 2020 06:40:40 +0000

Ada satu artikel menarik yang dipublikasikan oleh Adam Wathan (pembuat tailwindcss) pada awal bulan agustus lalu (https://adamwathan.me/tailwindcss-from-side-project-byproduct-to-multi-mullion-dollar-business/).

Berawal dari ketidakpuasannya terhadap solusi-solusi yang sudah ada, dia pun membuat framework css sendiri. Awalnya hanya untuk kebutuhan sendiri, tapi kemudian mengundang ketertarikan dari beberapa orang yang ingin berkolaborasi dan menggunakannya juga. Singkat cerita, diputuskanlah project ini menjadi open source dengan nama Tailwind.

Sebagai pendukung buat Tailwind CSS, sekitar enam bulan yang lalu tim tailwind merilis Tailwind UI sebagai project komersil. Dalam waktu 5 bulan saja, pendapatan yang diperoleh hampir mencapai 2 juta dollar (lebih kurang 30 miliar rupiah). Suatu pencapaian yang hebat untuk sesuatu yang berawal dari side project.

Oke, sekarang bagaimana cara pakainya pada aplikasi yang sudah di-bootstrap dengan create-react-app tanpa harus eject?

Cara yang umum saya temukan pada berbagai tutorial adalah dengan membuat proses tambahan yang terpisah, entah itu dengan postcss-cli atau tailwind cli. Cara ini tidak efisien, karena di dalam create-react-app sudah ada postcss yang harusnya bisa diintegrasikan dengan tailwind.

Lalu ada juga cara dengan meng-override konfigurasi standar create-react-app menggunakan tools seperti react-app-rewired atau craco. Cara ini bagus, tapi kekurangannya adalah mengharuskan developer mempelajari API-nya terlebih dahulu. Satu hal yang menurut saya tidak perlu kalau perubahan konfigurasi yang dilakukan cukup sederhana, seperti menambahkan tailwind ke dalam postcss.

Cara yang saya pakai adalah dengan menggunakan patch-package untuk patching langsung konfigurasi webpack pada react-scripts.

Pertama siapkan aplikasi react

npm init react-app cra-tailwind
cd cra-tailwind

Berikutnya install tailwind dan patch-package

npm install tailwindcss patch-package

Kemudian buka konfigurasi webpack dari react-scripts yang bisa anda temukan di node_modules/react-scripts/config/webpack.config.js. Di dalam file ini cari fungsi getStyleLoader, di dalam fungsi ini akan ada konfigurasi postcss-loader.

Pada list plugin postcss-loader tambahkan tailwindcss seperti ini:

// ...
{
  // ...
  loader: require.resolve('postcss-loader'),
  options: {
    // ...
    plugins: () => [
      require('tailwindcss'),
      // ...
    ],
    // ...
  },
},
// ...

Selanjutnya agar perubahan ini bisa direplikasi dan masuk ke source control seperti git, kita akan menggunakan patch-package. Tambahkan command postinstall pada list scripts di package.json seperti berikut:

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "postinstall": "patch-package"
},

Lalu karena kita sebelumnya sudah melakukan patching pada react-scripts, jalankan command ini di terminal

npx patch-package react-scripts

Outputnya lebih kurang seperti berikut

patch-package 6.2.2
• Creating temporary folder
• Installing react-scripts@3.4.3 with npm
• Diffing your files with clean files
✔ Created file patches/react-scripts+3.4.3.patch

patch-package akan membuat folder patches yang di dalamnya berisikan semua override yang sudah dilakukan. Pada case ini kita telah meng-override react-scripts.

Langkah terakhir, update file src/index.css dengan tailwind

@tailwind base;
@tailwind components;
@tailwind utilities;

Sekarang untuk memastikan konfigurasi kita sudah berjalan dengan benar, saya coba tambahkan class text-red-500 untuk text di App.js. Hasilnya:

teks sudah berubah menjadi warna merah

Anda bisa menambahkan file tailwind.config.js untuk kustomisasi lebih lanjut. Konfigurasi minimal yang saya pakai adalah

module.exports = {
  purge: ['./src/\*\*/\*.js', './src/\*\*/\*.jsx'],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
};

Kode lengkap dari contoh ini bisa anda temukan di

armedi / cra-tailwind

Semoga berguna!!!

Mencoba Alpine.js, Tailwind for Javascript

Armedi — Sun, 30 Aug 2020 05:45:11 +0000

Di tengah popularitas frontend libraries seperti React, Vue, atau Svelte yang sekarang sedang naik daun, ada satu library yang relatif masih baru, yaitu Alpine.js. Versi 1.0.0-nya rilis pada Desember 2019, belum genap setahun yang lalu.

Barangkali pertanyaan yang muncul adalah apa kita masih perlu library baru lagi? Bukannya sekarang udah kebanyakan library? Ya, selain tiga nama populer yang saya sebutkan diatas masih ada lagi nama-nama seperti Angular, Ember.js, Preact, dan masih banyak lagi yang lainnya.

Tidak ada salahnya mencoba dan mempelajari library baru. Bisa jadi cocok untuk dipakai pada kasus-kasus tertentu yang akan datang nantinya. Karena tidak semua project harus dikerjakan dengan React atau Vue. Mungkin saja ada yang lebih cocok dengan solusi dari library yang lebih sederhana, atau bahkan tanpa library tambahan sama sekali.

Sebagai pembeda dengan yang lain, Alpine.js menawarkan ukuran yang kecil (8 kB minified + gzipped), dan kemudahan penggunaan. Dengan Alpine.js, anda bisa membuat website interaktif tanpa harus menulis javascript sama sekali. Membuat dan memanipulasi state, semuanya bisa dilakukan langsung pada markup html. Makanya di repositorinya disebut bahwa Alpine.js ini seperti tailwind tapi untuk javascript.

Sintaksnya sangat mirip dengan Vue. Anda yang sudah terbiasa menggunakan v-bind, v-model, dan v-on di Vue, akan menemukan directives yang sama di Alpine.js, tinggal mengganti v-* dengan x-*. Bedanya di Alpine.js deklarasi data juga dilakukan pada markup dengan menggunakan directive x-data.

<div x-data="{ open: false }">
  <button @click="open = true">Open Dropdown</button>
  <ul x-show="open" @click.away="open = false">
    Dropdown Body
  </ul>
</div>

Contoh di atas saya ambil dari dokumentasi Alpine.js, dan saya yakin sintaksnya akan langsung dipahami oleh yang pernah mencoba Vue.

Saya pun mencoba membuat sebuah web sederhana menggunakan Alpine.js untuk menampilkan list pokemon serta dilengkapi fitur pencarian berdasarkan nama dan tipe monster. Sumber data dari https://pokeapi.co/ yang sudah saya fetch terlebih dahulu dan diolah menjadi sebuah file json. Data pokemon ini dipilih karena populer dan jumlah itemnya cukup banyak (1048 item dari pokeapi.co), sehingga cocok kalau ditambahkan fitur pencarian.

markup + css (tailwind) + alpine, total hanya 12.8 kB

armedi / pokedex-alpinejs

Live _website-_nya bisa diakses di https://pokedex-alpinejs.netlify.app/

Kesimpulan

Setelah sedikit bermain-main dan eksplorasi apa saja yang ditawarkan oleh Alpine.js, kesimpulan saya adalah library ini cocok dipakai untuk membuat halaman web yang membutuhkan sedikit tambahan interaktifitas seperti mengubah-ubah state active tab atau untuk toggling on dan off.

Untuk kebutuhan yang lebih kompleks dan aplikasi yang lebih besar, mungkin anda perlu mempertimbangkan untuk menggunakan library yang lebih advance seperti React atau Vue.

Menggunakan Vue Reactivity pada Komponen React

Armedi — Sun, 23 Aug 2020 02:08:49 +0000

Bagi anda yang berkecimpung di dunia frontend web development, pasti sudah tidak asing dengan nama React atau Vue. Dua library yang paling populer saat ini untuk membangun aplikasi web modern.

Para penggemar framework Vue pun pastinya sudah tahu bahwa tidak lama lagi Vue akan merilis versi 3. Versi baru ini tidak hanya menambahkan fitur baru, tapi benar-benar rewrite dari awal (Lebih lanjut: https://increment.com/frontend/making-vue-3/).

Salah satu fitur baru di Vue 3 yang mungkin paling banyak disorot adalah Composition API (Tutorial cara menggunakan Composition API pernah dibuat oleh teman saya Semmi Verian di video youtube-nya). Namun hal yang lebih menarik bagi saya pribadi adalah model reaktivitas baru yang sama sekali berbeda dengan versi sebelumnya.

Lebih menariknya lagi, modul reaktivitas ini dibuat pada package terpisah, yang artinya tentu saja bisa kita pakai pada aplikasi lain tanpa harus menggunakan framework Vue.

Nah karena saya sama-sama menyukai React dan Vue, jadi saya memutuskan untuk mencoba modul @vue/reactivity pada aplikasi yang dibuat menggunakan React.

Tujuan akhir dari tulisan ini adalah membahas bagaimana kita bisa memutasi data tanpa kehilangan reaktivitas dari React dengan menggunakan package @vue/reactivity. Cara seperti ini bukanlah hal baru, tapi juga digunakan oleh library seperti mobx-react (dengan observable dari mobx).

Mutable VS Immutable

Mutability adalah perbedaan mendasar antara React dengan Vue. React memilih jalur full immutable data, sedangkan Vue memilih jalur mutable data.

Lalu apa perbedaannya?

Sebelumnya kita bahas dulu sedikit tentang declarative programming. Dengan library atau framework modern, web developer tidak lagi perlu memikirkan bagaimana meng-update DOM. Cukup dengan mendeklarasikan apa yang dimau, selebihnya mengenai proses update DOM dan bagaimana terjadinya akan diatur oleh library yang dipakai (Artikel ini menjelaskannya dengan lebih baik).

React atau Vue akan mendeteksi perubahan data, dan kemudian melakukan perubahan yang sesuai pada UI. Dan ini terjadi terus-menerus secara otomatis. Atau dalam kata lain, komponen UI bersifat reaktif terhadap perubahan data.

Nah, di sini lah perbedaan antara immutability-nya React dengan mutability Vue. React dengan cara yang sangat sederhana mendeteksi perubahan data menggunakan Object.is. Itulah mengapa kode di bawah tidak akan berjalan sesuai yang diharapkan.

// in react component

const [name, setName] = useState({first: 'John', last: 'Doe'})

const handleChange = (event) => {
  name.first = event.target.value
}

Ketika anda melakukan mutasi terhadap data nameseperti kode diatas, React tidak akan melihat perubahan, sehingga rerender pun tidak akan pernah terjadi. Karena object name masih merupakan object yang sama dengan sebelumnya.

Vue menggunakan cara berbeda yang lebih kompleks untuk mendeteksi perubahan data (lebih jelasnya bisa disimak langsung di dokumentasi resminya). Intinya adalah data pada Vue bisa dimutasi, dan dengan cerdas Vue akan mendeteksi perubahan kemudian melakukan update yang sesuai.

Let’s start playing

Aplikasi yang akan kita buat adalah aplikasi counter dengan fitur increment dan decrement, serta ada satu kolom input teks.

Scroll ke paling bawah jika anda mau langsung melihat source code dan hasil jadinya

npm install @vue/reactivity

Pertama kita akan buat sebuah fungsi HOC bernama setup yang lebih kurang berfungsi sama dengan setup pada composition API Vue. Penggunaanya akan seperti ini:

import React, { useMemo } from 'react';
import { reactive, ref } from '@vue/reactivity';

const setup = (setupFn) => (Component) => (props) => {
  const setupProps = useMemo(setupFn, []);

  // our little trick here

  return <Component {...props} {...setupProps} />;
};

const App = (props) => {
  // This is the react component
};

export default setup(() => {
  const count = ref(0);
  const name = reactive({ first: '' });

  return { count, name };
})(App);

Fungsi setup akan memasukkan return value dari setupFn sebagai props pada komponen. Di sini kita gunakan useMemo agar invokasi hanya terjadi sekali ketika mounting saja.

Nah, sekarang bagaimana caranya untuk “memaksa” komponen agar rerender ketika props ini dimutasi?

@vue/reactivity menyediakan fungsi effect yang fungsinya adalah melakukan “sesuatu” (dengan meng-invoke callback yang diberikan) setiap kali value reaktif yang dipakai di dalam fungsi itu dimutasi. Fungsi effect ini akan kita tempatkan di dalam hooks useEffect React. Jangan lupa untuk menghentikan effect ketika komponen di-unmout dengan me-return sebuah fungsi untuk stop.

import React, { useMemo } from 'react';
import { reactive, ref, effect, stop } from '@vue/reactivity';

const setup = (setupFn) => (Component) => (props) => {
  const setupProps = useMemo(setupFn, []);

  useEffect(() => {
    const reactiveEffect = effect(() => {
      // here we can do something to trigger rerender
    });

    return () => stop(reactiveEffect);
  }, [setupProps]);

  return <Component {...props} {...setupProps} />;
};

Untuk “memaksa” rerender kita akan buat satu state yang value-nya akan di-update ketika terjadi mutasi data.

const setup = (setupFn) => (Component) => (props) => {
  const setupProps = useMemo(setupFn, []);
  const [, setTick] = useState(0);

  useEffect(() => {
    const reactiveEffect = effect(() => {
      // Only one more thing to do here
      setTick((tick) => tick + 1);
    });

    return () => stop(reactiveEffect);
  }, [setupProps]);

  return <Component {...props} {...setupProps} />;
};

Oke, tinggal satu langkah lagi

Sebelumnya saya katakan bahwa fungsi effect akan meng-invoke callback yang diberikan setiap kali value reaktif yang dipakai di dalam fungsi itu dimutasi. Terus bagaimana caranya fungsi ini tau ada mutasi?

Sangat sederhana sekali. Setiap value yang diakses di dalamnya akan secara otomatis di-track. Ya, cukup diakses saja!

useEffect(() => {
  const reactiveEffect = effect(() => {
    setupProps.count.value;
    setupProps.name.first;
    setTick((tick) => tick + 1);
  });

  return () => stop(reactiveEffect);
}, [setupProps]);

Karena di dalam komponen kita akan menggunakan value count dan name.first, dua value ini perlu diakses terlebih dahulu di dalam fungsi effect agar komponen bisa melacak mutasi dan melakukan rerender setiap kali ada perubahan.

Oke, cara diatas sebenarnya sudah “benar”. Tapi akan mengakibatkan error no-unused-expressions pada linter, dan juga membuat fungsi setup hanya bisa dipakai untuk satu komponen ini saja.

Sekarang mari kita generalisasi menjadi fungsi access yang secara rekursif akan mengakses setiap properti di dalam object

import React, { useState, useEffect, useMemo } from 'react';
import { reactive, ref, isRef, effect, stop } from '@vue/reactivity';

const access = (object) => {
  if (isRef(object)) {
    access(object.value);
  } else if (typeof object === 'object') {
    for (let key of Object.keys(object)) {
      access(object[key]);
    }
  }
};

const setup = (setupFn) => (Component) => (props) => {
  const setupProps = useMemo(setupFn, []);
  const [, setTick] = useState(0);
  useEffect(() => {
    const reactiveEffect = effect(() => {
      access(setupProps);
      setTick((tick) => tick + 1);
    });

    return () => stop(reactiveEffect);
  }, [setupProps]);

  return <Component {...props} {...setupProps} />;
};

Akhirnya sekarang di dalam komponen React kita bisa melakukan update data dengan cara memutasinya seperti dibawah ini. Perhatikan onChange pada input dan onClick pada button.

function App({ count, name }) {
  return (
    <div>
      <input
        placeholder="Input your name"
        onChange={(e) => (name.first = e.target.value)}
      />
      <div>
        <div>Hi, {name.first}</div>
        <div>{count.value}</div>
        <div>
          <span>
            <button type="button" onClick={() => count.value--}>
              Decrement
            </button>
          </span>
          <span>
            <button type="button" onClick={() => count.value++}>
              Increment
            </button>
          </span>
        </div>
      </div>
    </div>
  );
}

Dari sini anda bisa lanjutkan bereksperimen untuk membuat global state management menggunakan modul reactivity dari Vue

source code:

armedi / vue-reactivity-in-react-example

codesandbox:

Merdeka dengan Open Source

Armedi — Thu, 20 Aug 2020 02:28:38 +0000

Belum lama ini saya memulai pekerjaan baru di Hyperjump Technology. Ada 2 hal penting yang membuat saya pada akhirnya memutuskan memilih bergabung dengan Hyperjump dan menolak beberapa tawaran pekerjaan lain yang datang lebih dahulu:

Programming excellence
Open source first

Tapi untuk tulisan ini saya akan bahas poin 2 saja

Open source first

Kalimat di atas bukanlah sekedar slogan yang belum ada implementasinya.

Bahkan dari sebelum berdirinya, pendiri perusahaan ini sudah sangat dikenal dalam komunitas open source internasional sebagai punggawa proyek-proyek open source besar yang dikenal luas di mancanegara.

Hyperjump sendiri sebagai sebuah perusahaan telah mencetuskan beberapa proyek open source yang bisa anda pantau di akun github-nya.

Disini kami sangat didorong untuk tidak hanya sebagai pengguna open source tapi melangkah lebih dari itu juga sebagai kontributor aktif dalam dunia open source. Dengan open source, tidak hanya kita bisa saling membantu dalam menyelesaikan masalah-masalah umum yang sering dihadapi, tapi juga dengan sendirinya kualitas kodingan akan meningkat. Karena pastinya tidak ada yang mau merilis sesuatu ke hadapan publik sebelum diyakini bahwa apa yang dibuat itu sudah cukup baik kualitasnya.

17 Agustus 2020

Pada tanggal ini kita rakyat Indonesia merayakan hari kemerdekaan yang ke-75. Namun karena masih dalam pandemi covid-19, suasana tahun ini tidaklah sesemarak tahun-tahun sebelumnya. Perlombaan-perlombaan yang menimbulkan keramaian pun sangatlah tidak dianjurkan.

Dalam suasana inilah saya kemudian terpikir membuat sesuatu dengan semangat open source dan kira-kira bisa berguna khususnya untuk programmer-programmer Indonesia.

Kemudian saya terpikir ada satu hal kecil yang cukup sering saya lakukan, yaitu memformat tanggal ke bahasa Indonesia dalam bahasa pemrograman javascript.

Solusi yang paling dikenal saat ini adalah momentjs, library ini juga salah satu top package yang paling sering di-download dari repositori npm. Tapi kalau hanya digunakan untuk memformat tanggal saja saya rasa ini overkill. Library ini berukuran cukup besar dengan sangat lengkapnya fitur yang tersedia. Kalau dipasang untuk frontend website, akan menambah bundle size aplikasi yang dibuat secara cukup signifikan.

Oleh karena itu, saya membuat sebuah library baru dengan nama masa. Masa adalah hasil dari membaca source code momentjs, dan kemudian saya sederhanakan (sebagiannya adalah copy-paste) untuk satu fungsi saja, yaitu untuk memformat tanggal ke dalam bahasa Indonesia. Cara pakainya pun lebih kurang sama seperti cara pakai momentjs untuk memformat tanggal.

import { masa } from 'masa';

masa(new Date('2020-08-17')).format('[hari] dddd, [tanggal] D MMMM YYYY');
// hari Senin, tanggal 17 Agustus 2020

Lebih lengkapnya mengenai cara penggunaan beserta source code-nya bisa anda lihat di

armedi / masa

Semoga berguna!!!

DEV Community: Armedi

Menggunakan TypeScript Template Literal Type

Basic

Template Literal Inference

React Proxy-State dengan Valtio

Menggunakan Vue Reactivity pada Komponen React

Armedi ・ Sep 11 '20 ・ 5 min read

pmndrs / valtio

💊 Valtio makes proxy-state simple for React and Vanilla

Logical Assignment Operators di Javascript

Logical OR assignment ||=

Logical AND assignment &&=

Logical nullish assignment ??=

Referensi:

Progressive Image Loading dengan BlurHash

ReasonReact, Part 1: Development Setup

Apa keuntungan menggunakan ReasonReact dibandingkan React.js?

Inisiasi ReasonReact

armedi / reason-react-snowpack

Starter template for building SPA with ReasonReact, Tailwind CSS, and Snowpack for development

ReasonReact with Snowpack Template

Project setup

Compiles and hot-reloads for development

Compiles and minifies for production

armedi / kuy.app

Setup Snowpack

Serverless dengan Cloudflare Workers

Menggunakan Netlify sebagai url shortener

Armedi ・ Sep 20 '20 ・ 3 min read

Setup

Menghandle Request dengan Cloudflare Worker

Publish ke Cloudflare Workers

armedi / kuy.sh

Menggunakan Netlify sebagai url shortener

Step 1: Buat site baru di Netlify

Step 2: Sediakan domain

Step 3: Konfigurasi DNS

Step 4: Konfigurasi Netlify di local dan buat daftar redirects

Step 5: Commit dan push ke github

Step 6: Otomasi

Menggunakan JSX sebagai view engine Express.js

Kenapa JSX?

armedi / express-jsx

Tailwind CSS, dan Bagaimana Menggunakannya dengan create-react-app

armedi / cra-tailwind

Mencoba Alpine.js, Tailwind for Javascript

armedi / pokedex-alpinejs

Kesimpulan

Menggunakan Vue Reactivity pada Komponen React

Mutable VS Immutable

Let’s start playing

armedi / vue-reactivity-in-react-example

Merdeka dengan Open Source

Open source first

17 Agustus 2020

armedi / masa

Logical OR assignment `||=`

Logical AND assignment `&&=`

Logical nullish assignment `??=`