Hal-Hal yang Hanya Diingat oleh Pengembang Web Era 90-an (2014)

 (zachholman.com)
1 poin oleh GN⁺ 2024-01-26 | 1 komentar | Bagikan ke WhatsApp
  • Web pribadi pada 1990-an adalah masa ketika alat layout terstandarisasi masih minim, sehingga teknik seperti , , 1x1.gif,  , dan DHTML dipakai untuk memaksakan penataan dan efek
  • Sebelum layout CSS mapan, 1x1.gif dan   yang diulang dipakai seperti alat layout utama untuk mendorong posisi elemen, dan tulisan ini menyindirnya dengan nostalgia yang dilebih-lebihkan
  • CSS awal berfokus pada efek visual kecil seperti menghapus garis bawah tautan dan mengubah gaya a:hover, sehingga batas antara tautan dan teks biasa jadi kabur
  • DHTML berkaitan dengan budaya salin-tempel yang mencampur CSS dan JavaScript untuk membuat efek seperti alert() saat memuat halaman, salju turun, menu akordeon, dan `` kustom
  • Font piksel, tombol 88x31, Internet Explorer 4.0, GeoCities, dan FrontPage ’98 muncul sebagai cara situs pribadi saat itu memamerkan pilihan teknologi dan identitasnya

Masa ketika dan adalah animasi

  • Kombinasi menaruh di dalam diperlakukan secara bercanda sebagai animasi komputer yang mengagumkan di web era 1990-an
  • Tersirat rasa bangga yang dilebih-lebihkan, seolah pengembang web 1990-an punya kisah yang lebih penting daripada jQuery modern atau basis data nonrelasional masa kini

Layout yang mendorong halaman dengan 1x1.gif

  • 1x1.gif, spacer.gif, dan transparent.gif semuanya merujuk pada GIF transparan 1 piksel × 1 piksel
  • Dengan memberi nilai besar pada atribut WIDTH dan HEIGHT gambar HTML, ruang tak terlihat bisa dibuat untuk mendorong elemen halaman ke posisi yang diinginkan
  • Contoh kode memakai , , , , ``, dan CGI penghitung web sekaligus untuk menangani struktur dan dekorasi dalam satu waktu
  • Sindiran berlanjut seolah 1x1.gif memungkinkan elemen ditempatkan di mana saja pada halaman, dan bahkan sampai sekarang masih menjadi satu-satunya cara untuk perataan vertikal di tengah

Jarak manual dengan  

  • Jika sulit memakai tag gambar, mengulang   juga bisa dipakai untuk mengatur jarak
  • Ada contoh menempatkan teks guestbook dengan menyisipkan banyak   di antara PLEASE SIGN dan MY GUESTBOOK BELOW:
  • Lalu dilanjutkan dengan lelucon bahwa jika mendapat satu nickel setiap kali memakai   pada 1990-an, uangnya akan cukup untuk membayar biaya kelebihan pemakaian bulanan AOL

CSS awal dimulai dari menghapus garis bawah tautan

  • CSS diperkenalkan sebagai teknologi yang muncul di akhir masa keemasan HTML dan menjanjikan pemisahan konten dan gaya
  • Hal pertama yang banyak dilakukan dengan CSS saat itu adalah menghapus garis bawah pada tautan
  • Tautan jadi terlihat seperti teks, dan teks terlihat seperti tautan, sehingga sulit tahu bagian mana yang harus diklik
  • Efek jejak api yang tertinggal di belakang kursor mouse juga ikut disebut
  • Dalam contoh file index.shtml tahun 2000, CSS inline yang ada hanya a:hover {text-decoration: none; color: #000000}
    • Itu adalah kode untuk menghapus garis bawah saat hover dan mengubah warnanya menjadi hitam
    • Fakta bahwa filenya bernama index.shtml dan memakai SSI juga ditegaskan sebagai bagian dari candaan

DHTML dan budaya menyalin kode

  • Setelah menghilangkan garis bawah tautan dengan CSS, alurnya berlanjut ke JavaScript yang menampilkan alert("Welcome to my website!") saat halaman dimuat
  • Gabungan CSS dan JavaScript disindir sebagai DHTML, “teknologi yang mengerikan”
  • Efek DHTML mencakup salju yang jatuh di atas halaman, image map animasi menu akordeon, dan kustom yang memakai
  • Berkat situs seperti Dynamic Drive, masalah digambarkan seolah tak perlu diselesaikan sendiri; cukup salin-tempel blok kode 50 baris
  • DHTML diibaratkan sebagai Twitter Bootstrap pada masanya

Font piksel dan estetika resolusi rendah

  • Layar komputer saat itu masih CRT, jadi secara fisik besar tetapi resolusinya tidak tinggi
  • Untuk memakai piksel yang terbatas secara efisien, ada kecenderungan memakai huruf kecil setara 6 poin
  • Pengembang web yang melihat tipografi sederhana berbasis piksel lalu ingin menjadi ilustrator, dan ada juga upaya menaruh ilustrasi piksel isometrik di splash screen
  • Ditambah candaan bahwa waktu dan uang itu mungkin lebih baik dipakai untuk berinvestasi di IPO dot-com daripada memasang Photoshop

Internet Explorer 4.0 dan tombol 88x31

  • Disindir bahwa alasan orang sekarang membenci Internet Explorer adalah karena ia sudah terlalu jauh dari “bentuk murni” Internet Explorer 4.0
  • Internet Explorer 4.0 dibesar-besarkan seolah browser sempurna yang punya Active Desktop dan Channels
  • Situs web saat itu sering menempelkan tombol 88x31 piksel untuk memberi tahu pengunjung browser apa yang harus dipakai, serta alat dan layanan apa yang mereka gunakan
  • Tombol-tombol itu diibaratkan seperti tanda jasa pada seragam militer, menunjukkan pilihan dan afiliasi pengelola situs
    • Contoh editornya adalah FrontPage ’98
    • Contoh web server-nya adalah GeoCities
    • Ada juga candaan bahwa web ring ingin berada di posisi yang paling mengangkat situs, meski tempat seperti itu sebenarnya tidak ada

Candaan tentang web masa kini

  • Web masa kini digambarkan sebagai tumpukan berbagai abstraksi di atas JavaScript
  • Ditutup dengan lelucon bahwa JavaScript bahkan tidak bisa menghitung matematika dengan benar, sehingga cukup mengejutkan kita bisa sampai pada web seperti sekarang
  • Tulisan berakhir dengan saran untuk iseng mengerjai tim dengan menambahkan banyak   ke pull request berikutnya

Bacaan terkait

1 komentar

 
GN⁺ 2024-01-26
Komentar Hacker News

  • Cerita soal server-side image map benar-benar terasa dekat
    Saya lebih merupakan admin sistem yang sesekali membuat alat berbasis web daripada programmer web, jadi kemampuan web saya berhenti di awal 2000-an, dan saya juga punya semacam penolakan aneh terhadap JavaScript. Di alat terbaru, saya membutuhkan perilaku dasar untuk menangani titik di atas gambar; hal yang bisa selesai dengan 5 baris JavaScript itu malah saya tangani pada 2023 dengan server-side image map
    Akhirnya, alih-alih 5 baris JavaScript, muncullah 50 baris Python untuk mengelola state dan kasus khusus di request handler untuk menangani sintaks fragmen yang aneh. Agak memalukan, tapi ada kebanggaan aneh juga karena berhasil membuatnya berjalan

    • Hal terburuk dari server-side image map adalah ia benar-benar merusak pengarsipan
      Kalau menemukan situs lama di archive.org Wayback Machine dan seluruh berandanya berupa server-side image map, tanpa server aslinya tidak ada cara untuk mengetahui URL tujuan ke bagian situs lainnya, sehingga benar-benar jadi jalan buntu
    • Pada 2015, saya pernah memperbaiki dukungan server-side image map di Chromium
      Saat itu kondisinya hampir rusak: kalau zoom bukan 100% atau padding bukan 0, koordinatnya meleset, dan ada beberapa masalah serupa. Tidak ada yang menyadarinya karena image map sendiri hampir tidak dipakai, apalagi server-side image map
      Saya juga ingin jalan keluar mudah tanpa JavaScript, jadi teringat HTML era 90-an. Namun pada akhirnya, setelah memperbaiki bug Chromium, saya menyimpulkan server-side image map itu kurang bagus lalu memakai JavaScript, dan versi JavaScript-nya memang lebih baik
    • Saya sepenuhnya paham perasaan “walaupun cuma 5 baris JavaScript di seluruh benda neraka ini, saya tetap tidak akan memasukkannya ke program saya”
      HTMX benar-benar terasa seperti penyelamat, dan kalau membeli Tailwind UI, siapa pun bisa menjadi orang yang cukup berbahaya di frontend. Meski begitu, saya juga penasaran dari sudut pandang lain kenapa JavaScript terasa mengganjal. Secara pribadi, masalah besarnya adalah kurangnya konsistensi sintaks, dan di sisi TypeScript, melihat folder node_modules saja sudah bikin mual
      Secara keseluruhan, perasaan tidak bisa mengendalikan apa yang sedang terjadi membuat saya lama menjauh dari frontend
    • Pada akhir 2019, saya harus mengoperasikan GUI perangkat di kantor dari rumah, tetapi tidak ada remote desktop; yang ada hanya alat screenshot dan tool baris perintah untuk menyuntikkan klik
      Dengan beberapa puluh baris Lisp, saya membuat web server yang menyediakan image map dari layar, lalu saat request image map datang, server itu menyisipkan klik. Awalnya itu hanya tool kecil sekali pakai untuk menghemat perjalanan pulang-pergi ke kantor, tetapi kemudian COVID terjadi dan terlalu banyak orang memakainya; sampai sekarang saya tidak tahu apakah masih ada yang menggunakannya

  • “Satu-satunya cara untuk meratakan elemen secara vertikal di tengah bahkan sekarang” sudah tidak benar lagi, tetapi biaya produktivitas selama 30 tahun terakhir akibat tidak bisa begitu saja memakai vertical-align: middle; di dalam div mungkin mencapai miliaran dolar
    Saya juga ingat tren sekitar era IE4 atau IE6 ketika link :hover diberi gaya overline. Kami juga membuat div dan tombol bersudut membulat dengan tabel, dan bahkan pada 2000-an penderitaan memotong desain di Photoshop lalu memasukkannya ke sel tabel masih berlanjut

    • Bahkan saat itu, di dalam sel tabel sudah ada VALIGN=MIDDLE
      Saya tidak tahu apakah itu sudah bisa di era 90-an, tetapi pada 2000-an jelas ada
    • Sekarang saya menyuruh ChatGPT menulis CSS seperti itu, dan lucunya ia tampaknya mengeluarkan setidaknya selusin solusi
      Namun sering juga terselip aturan berlebihan, misalnya cukup 2–3 aturan tetapi malah menambahkan 5 atau lebih. Benar-benar bodoh sampai menggelikan
    • Masa ketika sudut membulat dibuat dengan tabel memang benar-benar sedang tren
      Entah berapa banyak waktu yang terbuang gara-gara sudut sialan itu
    • Bahkan sekarang, perataan vertikal masih tetap menjadi masalah besar dan membutuhkan banyak pemahaman yang halus
      Di Tailwind CSS pun tidak sederhana; kita harus terus mempertimbangkan apakah elemennya block, teks, seperti apa layout induknya, dan seterusnya
    • Salah satu hack CSS favorit saya adalah div { display: table-cell; vertical-align: middle; }
      Tidak berhasil di semua situasi, tetapi meski awalnya terasa kotor, pemisahan concern tetap terjaga dan saya tidak melihat kekurangan lain yang berarti

  • Dalam konteks ini, DHTML adalah Dynamic HTML, bukan Distributed HTML, dan karena itu juga Dynamic dalam Dynamic Drive

    • “DHTML tentu saja distributed HTML” itu sebenarnya lelucon, tetapi sepertinya dikutip keliru
      Melihat orang lain juga mengutipnya dengan keliru yang sama, ada kemungkinan penulisnya baru-baru ini mengubahnya secara bercanda
    • Meski begitu, deskripsi “Technology of Terror” tetap valid tanpa perlu dibantah
    • Saya sempat mengira itu bermaksud mengisyaratkan bagian di bawah yang mengatakan “tinggal salin dan tempel”, dan mungkin juga permainan kata dari DCOM
    • Dibahas di thread di bawah ini: https://news.ycombinator.com/item?id=39127528
      Kesimpulannya, itu memang lelucon, tetapi bukan lelucon yang bagus
    • Sepertinya di sini kita benar-benar menemukan polisi anti-kesenangan

  • Frame juga tidak bisa dilewatkan. Itu adalah “solusi” awal untuk masalah harus mengubah bilah navigasi di setiap halaman.
    Masalahnya, mesin pencari bisa mengindeks setiap halaman frame secara terpisah, jadi kita harus menangani apa yang terjadi jika seseorang masuk langsung ke halaman frame. Garis pemisah antarseksi juga selalu terlalu jelas, sehingga terasa canggung dan tidak nyaman.

    • Para jagoan sejati memakai server-side include.
      Jika kita menaruh komentar khusus di dalam HTML, Apache akan menggantinya dengan isi file lain sebelum mengirimkannya ke klien.
    • Jika situs web lain memasukkan halamanku ke dalam frame, kita menyebarkan skrip frame-buster; jika halaman menjadi yatim tanpa frame milikku, kita memanggil skrip frame-joiner.
    • Frame sampai sekarang pun ternyata masih cukup sering dipakai sebagai teknologi microfrontend dasar.
      Teorinya ada di https://martinfowler.com/articles/micro-frontends.html#Run-t..., dan implementasinya bisa dilihat di https://luigi-project.io.
    • Porsi yang lucunya sangat besar dari penggunaan JavaScript bergaya “AJAX” sebenarnya bisa ditangani juga dengan frame, dan kalau frame tidak mandek lalu berkembang sedikit saja, performanya mungkin malah lebih baik.
      Kalau ditambah tabel HTML punya fungsi dasar, lalu tabel dan tampilan daftar berbasis sumber data tersedia pada pertengahan 2000-an, waktu dan uang yang bisa dihemat pasti luar biasa besar.
      Kalau mulai membahas berapa banyak uang yang bisa dihemat seandainya web mengadopsi standar pembayaran dan browser sendiri menangani input pembayaran, itu tidak akan ada habisnya.
    • Batas antarseksi juga tidak selalu persis sama di tiap browser.
      Teman-teman, dulu ada masa ketika tidak semua orang memakai browser yang sama.

  • Pada 1996, beranda Microsoft punya menu bar yang terbuka saat mouse diarahkan ke atasnya, dan aku bertekad mencari tahu cara kerjanya.
    Saat itu IE punya tombol “View Source”, tetapi karena kurang punya rasa sebagai platform, sumbernya dibuka sebagai dokumen Notepad. Servernya Unix sehingga line break-nya \n, sedangkan Windows mengharapkan \r, jadi source HTML terlihat seperti dokumen panjang satu baris.
    Setelah menelusuri source dengan saksama, tag HTML-nya semua sudah kukenal dan isinya hanya teks yang terlihat di halaman. Satu-satunya yang asing adalah HTML entity, dan karena terlihat di setiap situs yang punya menu bergerak, aku yakin itu pasti terkait.
    Selama 6 bulan aku percaya efek DHTML ternyata diimplementasikan dengan mantra-mantra ajaib yang disebut HTML entity, lalu belakangan aku menemukan tutorial WebMonkey, dan itu berlanjut menjadi seluruh karierku.

    • View Source adalah titik awalku.
      Minifier dan compiler memang hebat, tetapi aku benar-benar merindukan masa ketika bisa membaca source yang rapi dan terkelola dari situs yang dirancang dengan baik.
      Kadang aku berpikir alangkah baiknya kalau kita memilih metode kompresi yang tetap mempertahankan format source asli di kode produksi, dan tetap menjaga ekspektasi bahwa orang lain di seluruh dunia akan membaca kode kita. Budaya seperti ini juga berperan besar dalam perkembangan cepat web awal, dan jelas menjadi bagian besar dari kisahku masuk ke industri ini.
    • Aku penasaran apa sebenarnya yang waktu itu membuat menu bergerak tersebut. Karena aku bukan generasi yang menulis kode pada masa itu, mungkin penyebabnya semacam tag atau skrip tertentu.
    • Aku punya pengalaman serupa saat ingin mengganti gambar ketika mouse diarahkan ke atasnya.
      Aku membeli JavaScript Bible di Barnes & Noble dan membacanya sepanjang akhir pekan, lalu terus belajar sejak itu.
    • WebMonkey, wah, nostalgia langsung hidup lagi.

  • Jangan lupa bahwa tabel juga dipakai untuk sudut membulat.
    Kita membuat tabel 3×3 dan menaruh gambar di sel-sel selain sel tengah untuk membuat elemen situs web bersudut membulat, dan itu terasa seperti puncak daya ekspresi manusia.
    Email HTML juga sedang populer, dan karena klien email diperbarui jauh lebih lambat daripada browser, teknik ini masih dipakai sampai 2010-an kalau ingin tampil dengan benar.

    • Aku tidak akan pernah lupa membuat kumpulan gambar seperti tl.gif, tr.gif, bl.gif untuk tabel 3×3.
      Karena browser saat itu tidak merender gambar latar pada sel kosong, kita juga membutuhkan 1x1.gif yang disebut di tulisan itu agar latar sel kiri dan kanan terlihat. Masa-masa indah.
    • Begitu kita mendapatkan border-radius, tren desain berubah sehingga tidak ada lagi yang menginginkan sudut membulat.
    • Beberapa poin dalam tulisan itu rasanya lebih dekat ke awal 2000-an daripada 90-an.
      Sebelum membuat sudut membulat dengan tabel, aku ingat mengutak-atik aplikasi multi-chat bernama Trillian seperti menghias skin. Aplikasi itu menangani Yahoo Chat, ICQ, dan lainnya, dan seperti menangani sudut membulat, aku menaruh gambar berulang di sel atas dan samping agar pengubahan ukuran jendela berjalan baik.
    • https://www.folklore.org/Round_Rects_Are_Everywhere.html
      Prestasi terbesar Oz yang agung dan mahakuasa. Yah, mungkin iPhone lebih besar.
    • Tabel juga dipakai untuk bayangan.

  • Kalau bicara situs web 90-an/00-an, tombol “dioptimalkan untuk resolusi 800×600” tidak boleh ketinggalan.
    Kalau ingin sedikit lebih keren, tambahkan juga “Valid HTML 4.01”.
    Iklan waktu itu bukan bundel JavaScript rumit dan iklan video seperti sekarang, melainkan banner sederhana berukuran standar. Aku ingat terkejut melihat Norton Internet Security 2003 diam-diam menulis ulang HTML halaman yang dikunjungi, menghapus hanya banner berukuran iklan standar dan membiarkan yang lain. Itu juga semacam konfirmasi berusia 20 tahun bahwa pemblokir iklan adalah solusi keamanan.

  • Aneh juga dalam seluruh tulisan tidak sekali pun muncul kata webmaster; jadi aku jadi bertanya-tanya apakah Zach benar-benar ada di era 90-an.

    • Aku masih punya kartu nama “Webmaster” yang kubuat pada akhir 90-an.
      Tidak ada yang akan memahami betapa “kerennya” jabatan itu pada masa itu. Sekarang bahkan aku sendiri merasa agak malu melihatnya, tetapi kenangan baiknya benar-benar banyak.
    • Aku pernah bekerja dengan seorang perempuan yang secara resmi menyebut dirinya “webmistress”.
      Itu bukan bercanda.

  • Jika ingin merasakan langsung web era 90-an, saya merekomendasikan The Geocities Gallery https://geocities.restorativland.org/
    Ada sesuatu yang indah pada halaman-halaman web pribadi seperti ini. Tiap halaman punya tampilan yang khas, dan dari itu saja sudah banyak menunjukkan kepribadian pembuatnya
    Biasanya isinya perkenalan diri, beberapa foto pribadi acak, daftar tautan rekomendasi dengan deskripsi singkat, tulisan ringan tentang hobi, dan sebagainya; sangat personal dan tenang. Ini sangat kontras dengan media sosial masa kini, di mana semua halaman profil tampak sama-sama hambar dan membosankan, dengan tekanan untuk terus menyediakan konten tanpa henti dan mempertahankan citra hidup tertentu

    • Gara-gara itu saya jatuh ke lubang kelinci
      Saya menghabiskan cukup lama mencari situs lama saya yang dulu entah berada di direktori mana di bawah Area51, dan mungkin juga tidak terarsipkan, sambil sekadar menghidupkan kembali masa itu
      Ingatan itu aneh. Melihat Geocities bahkan membuat saya teringat bau internet lama, yang mungkin sebenarnya adalah bau ruang keluarga tempat komputer berada
    • Saya ingat pada pertengahan 90-an pernah membuat efek yang cukup keren dengan menggabungkan latar bata Windows dan grafiti GIF transparan
      Karya awal grup seni BBS seperti ACID, ICE, dan FIRE juga benar-benar keren pada masa itu
      Sebelum dominasi IE5/6, hal-hal yang lebih canggih umumnya terdorong ke Flash. Pada awal 2000-an, ada framework mirip React berbasis E4X; ActionScript/Flash/Flex serta Mozilla/Netscape mendukungnya, dan itu juga mirip dengan notasi literal XML di VB.Net
      Microsoft dan Google tidak mengadopsinya, dan pada akhirnya JSON menjadi raja

  • Pada era 90-an, jawaban untuk pertanyaan tata letak web hampir selalu tabel
    Perataan teks meleset? Tabel. Butuh menu keren? Tabel. Membangun seluruh situs? Tabel bersarang. Untuk apa CSS kalau desain bisa diakali dengan baris dan sel

    • Pada 2024 pun ini masih benar untuk tata letak email
    • Dan jangan lupa, dulu setiap sel harus diberi tag font
    • Waktu itu semuanya TDD. TD-Driven Design
    • Saya masih suka tabel
      Sangat bagus untuk desain dinamis, dan mendukung penggabungan kolom/baris, perataan, serta bobot. CSS masih jauh lebih rumit daripada tabel lama
    • Sekarang kita punya cara yang lebih benar secara semantik untuk melakukan itu