Seorang research engineer di Conjecture telah menciptakan HTML quine yang mengesankan - sebuah halaman web yang menampilkan source code-nya sendiri sebagai output. Website pribadi Pranav mendemonstrasikan konsep pemrograman yang menarik ini menggunakan teknik styling CSS yang cerdas untuk membuat struktur HTML yang mendasarinya terlihat oleh pengunjung.
Konsep quine berasal dari ilmu komputer, di mana sebuah program menghasilkan source code-nya sendiri sebagai output. Meskipun quine biasanya dikaitkan dengan bahasa pemrograman, implementasi ini membawa ide tersebut ke pengembangan web dengan cara yang elegan.
Contoh HTML Quine Terkait:
- HTML quine bergaya Brutalist dari tahun 2019 (dibahas di Hacker News dua kali)
- GitHub contribution chart quine oleh pengguna ' mame '
- Eksperimen renderer CSS-ke-Markdown
- Berbagai demonstrasi pemrograman self-referential
Trik CSS Display Membuat Struktur HTML Terlihat
Keajaiban di balik quine ini terletak pada styling CSS yang memaksa elemen HTML untuk ditampilkan sebagai teks yang terlihat daripada markup yang di-render. Teknik ini menggunakan properti display:block dan pseudo-element CSS untuk menampilkan tag HTML pembuka dan penutup di sekitar konten. Ini menciptakan ilusi bahwa Anda sedang melihat source code HTML mentah, padahal sebenarnya Anda sedang melihat halaman web yang telah di-styling.
Anggota komunitas telah mencatat beberapa perilaku browser yang menarik dengan pendekatan ini. Fungsi pencarian berperilaku berbeda dengan konten yang di-styling - meskipun Anda dapat menemukan teks di dalam elemen head dan title yang ditampilkan, teks di dalam blok style tetap tidak dapat dicari melalui fungsi find browser, bahkan ketika ditampilkan secara visual.
Komponen Teknis Utama:
- Menggunakan aturan CSS
* {display:block;}untuk membuat semua elemen menjadi tingkat blok - Memanfaatkan pseudo-elemen CSS (::before dan ::after) untuk menampilkan tag HTML
- Berfungsi di browser modern tetapi tidak di browser berbasis teks seperti Lynx
- Fungsi pencarian browser tidak dapat menemukan teks di dalam elemen
<style>meskipun ditampilkan
Kompatibilitas Browser dan Keterbatasan Teknis
Quine ini bekerja di sebagian besar browser modern, meskipun browser berbasis teks seperti Lynx tidak me-render styling CSS yang menciptakan efek quine. Dalam kasus ini, pengunjung hanya melihat konten biasa tanpa tampilan markup HTML yang membuatnya istimewa.
document.body.innerText memang berisi konten style sheet, jadi browser memang menganggapnya sebagai teks yang terlihat dalam beberapa hal.
Implementasi ini bergabung dengan HTML quine kreatif lainnya yang telah muncul selama bertahun-tahun, termasuk versi HTML brutalist dan bahkan quine yang tertanam dalam chart kontribusi GitHub . Pendekatan ini mendemonstrasikan bagaimana CSS dapat memanipulasi presentasi konten dengan cara yang tidak terduga.
Halaman web ini berfungsi sebagai portofolio pribadi dan demonstrasi teknis, menunjukkan bagaimana coding kreatif dapat membuat teknologi web biasa melakukan hal-hal yang luar biasa. Ini terinspirasi oleh konsep dari Gödel, Escher, Bach karya Douglas Hofstadter , menghubungkan ide self-reference matematis dengan pengembangan web praktis.
Referensi: Hi, I'm Pranav