Pola untuk Membuat HTML Tools yang Berguna

 (simonwillison.net)
38 poin oleh GN⁺ 2025-12-15 | 3 komentar | Bagikan ke WhatsApp
  • Merangkum pola desain yang berulang berdasarkan pengalaman membuat HTML tools yang menjalankan HTML·JavaScript·CSS dalam satu berkas
  • Menjelaskan secara konkret, berfokus pada contoh nyata, bagaimana lebih dari 150 alat kecil dibuat dan dipelihara selama 2 tahun
  • Dengan struktur tanpa tahap build dan pemanfaatan CDN, alur pengembangan berbasis copy-paste terbentuk secara alami
  • Memperluas cakupan yang bisa dilakukan hanya dengan fitur browser, dari URL·localStorage·membuka berkas·unduhan·Pyodide hingga WebAssembly
  • Melalui pencatatan prompt dan hasil, serta penggabungan ulang alat yang sudah ada, alurnya makin menguat sehingga koleksi alat itu sendiri menjadi fondasi pengembangan

Konsep dan contoh HTML tools

Struktur dasar HTML tool

  • Terdiri dari satu berkas HTML dengan JavaScript dan CSS yang disisipkan secara inline
  • Tidak memakai React yang memerlukan build JSX, sehingga penyalinan dan redistribusi menjadi sederhana
  • Library yang dibutuhkan dimuat langsung dari CDN seperti CDNjs atau jsDelivr, dengan dependensi seminimal mungkin
  • Ukuran kode dijaga di kisaran ratusan baris agar beban perawatan rendah dan tetap mudah dibaca serta dimodifikasi LLM dengan cepat

Prototyping berbasis Canvas·Artifacts

Beralih ke coding agent saat makin kompleks

  • Dengan Claude Code atau Codex CLI, pekerjaan berulang termasuk pengujian browser memakai Playwright bisa diotomatisasi
  • Untuk alat yang lebih kompleks, seperti penampil thread Bluesky, pendekatan yang dipakai adalah “upgrade” ke agent semacam ini
  • PR dapat dibuat langsung ke repo simonw/tools untuk menambah atau memperbarui alat
    Iklan
  • Proses kerja dengan agent berbasis web dapat dilihat di video penggunaan Claude Code for web

Manajemen dependensi berbasis CDN

  • Saat memakai library tambahan, semuanya dimuat dari CDN
  • Karena Artifacts/Canvas milik LLM memiliki CDN allow-list, instruksi seperti “gunakan PDF.js” dapat membentuk konfigurasi URL secara otomatis
  • Jika perlu, URL dicari di cdnjs·jsDelivr lalu ditempelkan ke chat
  • Bekerja hanya dengan satu berkas HTML tanpa proses instalasi npm atau build
    • npm+langkah build menurunkan produktivitas untuk mengoprek alat secara cepat dan melakukan self-hosting tiap alat
  • URL CDN menyertakan versi sehingga reproduktibilitas jangka panjang tetap terjaga

Hosting statis eksternal

  • Hosting internal di platform LLM sering punya banyak batasan sandbox, sehingga pemuatan data/gambar dari URL eksternal atau fitur tautan keluar bisa terblokir
  • Dari sisi pengalaman pengguna, bisa muncul masalah seperti pesan peringatan, loading tambahan, atau promosi platform
  • Kombinasi “No React + CDN” membuatnya mudah diunggah ke mana saja tanpa build
  • Jika berkas HTML diunggah ke GitHub Pages, ia langsung bisa diakses lewat URL tetap
  • Sebagian besar alat dikelola di repo simonw/tools dan disajikan melalui tools.simonwillison.net

Input-output berpusat pada copy-paste

  • Banyak alat menjadikan mekanisme inti berupa mengubah input yang ditempel lalu membuat hasilnya bisa disalin ke clipboard
  • Karena copy-paste tidak nyaman di perangkat mobile, tombol “Copy to clipboard” sering ditambahkan
  • Clipboard OS dapat menyimpan beberapa format sekaligus, dan event paste JavaScript juga bisa mengakses data “rich” semacam ini
  • Contoh alat
Iklan

Alat debugging

  • Membuat alat khusus untuk memeriksa struktur data nyata yang ditangani di browser
  • clipboard-viewer: menampilkan seluruh data clipboard seperti teks·rich text·gambar·berkas
  • Alat tambahan

Menyimpan status di URL

  • Banyak status dapat disimpan di URL tanpa DB server
  • Pola ini disukai untuk alat yang dirancang agar mudah di-bookmark dan dibagikan
  • icon-editor: mempertahankan status edit ikon 24×24 langsung di URL

Memanfaatkan localStorage

  • localStorage adalah API browser yang menyimpan data secara persisten di perangkat pengguna tanpa mengeksposnya ke server
  • Digunakan untuk menyimpan status besar yang sulit dimasukkan ke URL atau nilai rahasia seperti API key, guna menghindari risiko terekspos di log server host statis
  • word-counter: menyimpan otomatis teks yang sedang ditulis
  • render-markdown: mempertahankan isi saat menulis Markdown
  • haiku: menyimpan API key di localStorage untuk membuat haiku berdasarkan gambar webcam

Memanfaatkan API yang mendukung CORS

  • CORS (Cross-origin resource sharing) adalah mekanisme yang mengatur apakah JavaScript di browser dapat memanggil API dari domain lain
  • API dengan header CORS terbuka adalah sumber daya yang sangat cocok untuk HTML tools, dan daftar seperti ini layak terus dikumpulkan seiring waktu
  • Contohnya iNaturalist, PyPI, GitHub (konten repo publik bisa diakses anonim lewat raw.githubusercontent.com), Bluesky, Mastodon, dan lainnya
  • Contoh alat
Iklan

Memanggil API LLM secara langsung

  • OpenAI·Anthropic·Gemini JSON API dapat dipanggil langsung dari browser lewat CORS
  • Jika API key ditanam langsung di HTML, ada risiko pencurian dan tagihan, sehingga dipakai “pola secrets” dengan menyimpannya di localStorage
  • Dari sisi pengalaman pengguna, proses menerbitkan dan menempel API key cukup menimbulkan gesekan, tetapi tetap bisa dijalankan
  • Contoh alat

Jangan takut membuka berkas

  • Dengan <input type="file">, berkas bisa dibaca dan dipakai langsung di browser tanpa harus diunggah ke server
  • ocr: memakai PDF.js dan Tesseract.js untuk mengubah PDF menjadi gambar per halaman lalu menjalankan OCR di browser
  • social-media-cropper: mendukung crop ke rasio media sosial seperti Twitter/LinkedIn 2:1, Substack 1.4:1, dan lain-lain setelah gambar dibuka/ditempel
  • ffmpeg-crop: membuat perintah ffmpeg untuk crop video

Menyediakan berkas unduhan

  • Browser dapat membuat berkas dan menyediakannya untuk diunduh tanpa server
  • Ekosistem JavaScript memiliki beragam library untuk membuat berbagai format berkas
  • Contoh alat

Pyodide dan WebAssembly

  • Pyodide adalah distribusi yang mengompilasi Python ke WebAssembly agar dapat berjalan di browser
  • Karena bisa dimuat dengan rapi dari CDN, hampir tidak ada alasan untuk tidak memakainya di HTML tools
  • Melalui micropip, paket Python murni dari PyPI dapat dimuat tambahan lewat CORS
  • Contoh alat
Iklan

Memperluas lebih jauh dengan WebAssembly

Menggabungkan ulang alat sebelumnya

  • Jika ada lebih dari 100 alat dalam satu koleksi publik, LLM bisa dengan mudah menggabungkan ulang alat-alat itu, dan ini menjadi keuntungan tambahan
  • Kadang alat lama ditempel ke konteks, dan pada coding agent alat tersebut dirujuk berdasarkan nama atau dicari sebagai contoh
  • Kode sumber dari alat yang benar-benar berfungsi juga berperan sebagai dokumentasi, termasuk pola penggunaan library editing, sehingga meningkatkan peluang keberhasilan LLM
  • Catatan lengkap proses pembuatan pypi-changelog: transkrip prompt
    • Prompt disusun dengan cara mengarahkan untuk melihat alat “pypi package explorer”, lalu membaca source zip-wheel-explorer, mengambil wheel dari API PyPI, merender diff antar versi, dan membuat alat baru yang menyediakan tombol Copy
  • Lihat juga menjalankan OCR di browser

Mencatat prompt·transkrip

  • Menyimpan dan membuka catatan penggunaan LLM menjadi kebiasaan yang dapat meningkatkan kemampuan pemanfaatannya sendiri
  • Untuk alat yang dibuat di platform LLM berbasis chat, fitur share digunakan sebagai sarana pencatatan
  • Saat memakai agent seperti Claude Code·Codex CLI, seluruh transkrip terminal disalin lalu log diubah menjadi HTML dengan terminal-to-html dan dibagikan sebagai Gist
  • Saat menyimpan alat jadi ke repo, tautan transkrip disertakan dalam commit message - kumpulan catatan: tools.simonwillison.net/colophon

Penutup

  • Selama satu setengah tahun terakhir, eksplorasi LLM dan HTML tool dengan cara ini terasa sangat menyenangkan, dan sangat membantu memahami sejauh apa HTML bisa digunakan serta kemampuan LLM
  • Untuk memulai koleksi alat sendiri, cukup buat repo GitHub lalu aktifkan GitHub Pages dan salin berkas .html ke dalamnya
  • Sebagai bonus, tersedia tautan transkrip yang menambahkan screenshot artikel ini memakai Claude Code dan shot-scraper

Bacaan terkait

3 komentar

 
hiyama 2025-12-17

Kelihatannya menarik.
 
aer0700 2025-12-17

Keren sekali
 
bobross0 2026-01-07

Pola HTML yang berguna