HTML First

 (html-first.com)
2 poin oleh GN⁺ 2023-11-13 | 1 komentar | Bagikan ke WhatsApp

Pengenalan prinsip HTML First

  • Memanfaatkan kemampuan bawaan peramban web modern
  • Memanfaatkan kesederhanaan ekstrem sintaks atribut HTML
  • Memanfaatkan fitur ViewSource di web

Tujuan HTML First

  • Memperluas jumlah orang yang dapat bekerja pada codebase perangkat lunak web
  • Secara pribadi, membuat lebih banyak orang menjadi programmer web dan meningkatkan pendapatan mereka
  • Dari sisi bisnis, menurunkan biaya pengembangan perangkat lunak serta menghemat sumber daya perekrutan tenaga kerja

Tujuan kedua HTML First

  • Membuat pengembangan perangkat lunak web lebih menyenangkan dan lancar
  • Alih-alih menghabiskan waktu bertahun-tahun untuk menguasai alat dan framework, mencapai kemahiran lebih cepat dengan prinsip HTML First

Cara mewujudkan HTML First

  • Mengakui bahwa HTML mudah dipahami, lalu menggunakannya sebagai dasar bukan hanya untuk mendefinisikan konten dan struktur, tetapi juga untuk styling dan pengaturan perilaku

Prinsip: Mengutamakan pendekatan Vanilla

  • Menggunakan atribut HTML untuk styling dan pengaturan perilaku
  • Menggunakan library yang memanfaatkan atribut HTML
  • Menghindari tahap build
  • Mengutamakan HTML yang "telanjang"
  • Menggunakan pendekatan yang ramah View-Source

Memanfaatkan fitur dukungan bawaan browser

  • Mencapai fungsi dengan pendekatan "vanilla" alih-alih framework eksternal
  • Sebelum menambahkan library atau framework, periksa apakah hal itu bisa dilakukan dengan HTML/CSS murni

Mendefinisikan style dan perilaku dengan atribut HTML

  • Styling dapat dilakukan dengan library SPC seperti Tailwind atau Tachyons
  • Untuk perilaku, gunakan library seperti hyperscript, Alpine, dan lainnya
  • HTML mungkin terlihat kompleks, tetapi lebih mudah dipahami dan diubah oleh developer lain

Menggunakan library yang memanfaatkan atribut HTML

  • Disarankan menggunakan library yang memanfaatkan atribut HTML daripada library yang berpusat pada JavaScript atau sintaks kustom

Menghindari tahap build

  • Library yang mengharuskan transformasi file menambah beban pemeliharaan dan menghambat fitur ViewSource
  • Saat menggunakan library HTML First, kebutuhan akan CSS dan JS tambahan dapat diminimalkan

Mengutamakan HTML yang "telanjang"

  • Prinsip yang paling mudah diterapkan pada implementasi backend
  • Developer yang terbiasa dengan HTML tetap dapat memahami file view meskipun tidak mengetahui framework backend

Mempertahankan fitur View-Source

  • Daya tarik web pada masa awal adalah bisa "mengintip" kode dan memahami sebagian dari halaman web
  • Pada situs yang mengikuti prinsip HTML First, fitur ViewSource dapat dihadirkan kembali

Penutup

  • Praktik dan prinsip yang dijelaskan di situs ini masih merupakan arus minoritas di industri secara keseluruhan
  • Ingin menemukan dan terhubung dengan orang-orang yang sejalan dengan ide-ide ini

Opini GN⁺

Hal terpenting dari tulisan ini adalah diperkenalkannya prinsip HTML First untuk meningkatkan aksesibilitas dan kemudahan pemeliharaan dalam pengembangan web. Prinsip-prinsip ini membuat pengembangan web menjadi lebih mudah dan cepat, serta memberi manfaat bagi individu maupun bisnis dengan memungkinkan lebih banyak orang berpartisipasi dalam pemrograman web. Pendekatan ini menarik karena berpotensi mengurangi kompleksitas pengembangan web, meningkatkan keterbacaan kode, serta mendorong berbagi pengetahuan dan kolaborasi di dalam komunitas developer.

Bacaan terkait

1 komentar

 
GN⁺ 2023-11-13
Opini Hacker News
  • Secara teori dan dalam contoh sederhana memang menarik, tetapi perlu ada contoh yang menunjukkan bagaimana prinsip-prinsip ini diterapkan pada proyek besar dan perbedaan apa yang dihasilkannya.
  • Saya setuju untuk memanfaatkan platform web semaksimal mungkin dan mengurangi kompleksitas, tetapi saya ragu apakah prinsip-prinsip yang diajukan benar-benar akan mengurangi kompleksitas.
  • Menggunakan kemampuan dasar HTML itu bagus, tetapi baik 10 tahun lalu maupun sekarang hal itu tidak praktis, dan htmx serta sejenisnya tidak terasa lebih baik daripada solusi berat seperti React.
  • Saat mengimplementasikan fitur seperti dropdown, multi-select, dan date picker, konsistensi antar-browser tidak ada dan styling terbatas, jadi elemen HTML bawaan saja tidak cukup.
  • Contohnya lemah, dan mendefinisikan style serta perilaku dengan atribut HTML inline bisa menjadi rumit.
  • Saat menggunakan library yang diperlukan, saya setuju menggunakan library yang memanfaatkan atribut HTML alih-alih JavaScript atau sintaks kustom.
  • Filosofi ini sangat cocok untuk pengembangan platform SaaS yang disusun hanya dengan markup HTML.
  • Ini terlihat seperti antipola dan nasihat buruk dari seseorang yang belum pernah melalui proses membangun situs web yang kompleks.
  • Saya setuju dengan klaim bahwa pengguna harus bisa memahaminya melalui lihat sumber, tetapi untuk web app, menggunakan bahasa bertipe lebih disarankan.
  • "Lokalitas perilaku" adalah aturan yang didefinisikan secara samar dan bertentangan dengan pemisahan kepentingan, dan menyebut CSS sebagai "aksi seram dari kejauhan" adalah ungkapan yang berlebihan.