Perkenalan HN: HTMX Playground yang 100% diimplementasikan di browser

HTMX Playground

• HTMX Playground adalah alat untuk bereksperimen dengan HTMX dalam lingkungan sandbox kode yang sederhana.
• Dapat langsung digunakan tanpa pengaturan terpisah, dan Anda bisa melihat contoh-contoh yang diambil dari contoh asli di htmx.org.
• Anda dapat menulis kode di dalam browser dalam lingkungan yang mirip backend, mendefinisikan endpoint di server.js, dan merender template Anda sendiri.
• Alat ini menjalankan server tiruan yang mencegat permintaan keluar dari HTMX, serta menyediakan penanganan request dan mesin template yang familier bagi pengguna Django.
• Proyek ini tidak terbatas hanya pada HTMX, sehingga Anda juga bebas mencoba library lain.

Penyimpanan dan berbagi

• Tekan tombol "Copy as JSON" di kanan atas untuk menyalin dalam format JSON.
• Unggah hasil salinan ke Gist dan masukkan raw URL ke "Load Playground"; URL halaman tersebut akan diperbarui sehingga bisa dibagikan.
• Kodenya juga tersedia di GitHub.

Perhatian

• Tidak ada fitur navigasi halaman.
• Dukungan seluler terbatas.
• server.js dapat memiliki state, tetapi jika state diperbarui di view on.get("/"), pembaruan state bisa hilang saat pemuatan halaman awal karena diambil melalui iframe terpisah.

Library yang digunakan

• Svelte
• Ace (editor kode)
• PollyJS (server tiruan)
• Nunjucks (mesin template)

Pendapat GN⁺

• HTMX Playground adalah alat yang berguna bagi pengembang web untuk dengan cepat membuat prototipe aplikasi web interaktif menggunakan HTMX.
• Dengan menyediakan lingkungan yang mudah diakses oleh pengembang yang terbiasa dengan framework backend seperti Django, alat ini membantu menyatukan pengalaman pengembangan frontend dan backend.
• Alat ini juga menyediakan fitur untuk menyimpan dan membagikan kode dengan mudah, sehingga sangat berguna untuk kolaborasi maupun tujuan pembelajaran.

[GN⁺]

Komentar Hacker News

• Ucapan terima kasih dari kreator htmx

  • Kreator htmx: Ucapan terima kasih disampaikan langsung oleh kreator yang membuat htmx. Ia menyatakan bahwa perhatian dan penggunaan terhadap proyeknya sangat menggembirakan.

• Kekhawatiran dan pertanyaan tentang penggunaan htmx

  • Kekhawatiran soal pool pengembang: Seorang pengguna mempertimbangkan untuk memakai htmx, tetapi merasa kesulitan dalam perekrutan karena pool pengembangnya kecil. Ia berbagi pengalaman bahwa lebih mudah merekrut pengembang frontend spesialis yang terbiasa dengan framework khusus dibanding mencari pengembang full-stack spesialis. Para pengembang juga cenderung enggan menangani kode yang kompleks, dan ia tidak ingin pengembang backend menjadi bottleneck. Ia bertanya apakah htmx menyadari masalah ini, dan bagaimana cara mengatasinya.

• Pertimbangan tentang htmx dan dukungan aplikasi mobile

  • Dukungan aplikasi mobile: Seorang pengguna menyukai konsep htmx dan mulai membaca buku terkait, tetapi kemudian memikirkan bahwa saat dukungan aplikasi mobile dibutuhkan, frontend dan backend harus ditulis ulang secara besar-besaran. Ia mengetahui hyperview.org, tetapi menyebutkan bahwa aplikasi react-native tidak cocok untuk use case yang ia minati.

• Pendapat tentang pilihan editor dan output error

  • Editor dan output error: Seorang pengguna menyoroti bahwa dukungan mobile terbatas dan berpendapat bahwa seharusnya Monaco Editor digunakan alih-alih Ace Editor. Namun dijelaskan bahwa Ace dipakai karena Monaco memang sengaja tidak berfungsi di mobile. Hal ini didukung lewat tautan issue GitHub.

• Berbagi pengalaman menggunakan htmx bersama Django

  • Penggunaan htmx dan Django: Seorang pengguna memakai maplibre, Django, dan htmx bersama-sama, serta menyatakan rencana untuk mengunggah contoh agar bisa dibagikan dengan orang lain.

• Pengalaman dan masukan saat menggunakan htmx

  • Penggunaan htmx dan masukan: Seorang pengguna telah memakai htmx untuk pekerjaan dan menilai hasilnya baik. Ia berencana terus menggunakannya, tetapi mungkin juga akan membuat versi berbasis PHP. Ia juga berbagi pengalaman beberapa kali kehilangan pekerjaan saat menempelkan JSON ke field pemuatan URL, serta masalah tidak bisa membersihkan browser permintaan jaringan, yang disebut sebagai permintaan fitur.

• Pertanyaan tentang dukungan teknis

  • Apakah mendukung ActiveX: Seorang pengguna bertanya apakah htmx mendukung ActiveX.

• Komentar satir tentang pilihan alat pengembangan

  • Menggunakan Svelte: Seorang pengguna bertanya apakah htmx dibuat dengan Svelte. Ia juga melontarkan komentar satir tentang di mana para puritan MPA (Multi-Page Application) berada dan seperti apa reaksi mereka.

• Rasa ingin tahu tentang pengembangan aplikasi offline

  • Pengembangan aplikasi offline: Seorang pengguna penasaran apakah ada orang yang membuat aplikasi offline menggunakan request-response berbasis htmx dan HTML, lalu mendefinisikan server virtual di dalam service worker.

• Menunjukkan typo pada penjelasan situs web

  • Menunjukkan typo: Seorang pengguna menunjukkan adanya typo pada penjelasan di halaman utama situs web. Ia menyebut bahwa "intersepts" seharusnya diperbaiki menjadi "intercepts".