Meteors Netscape

• Pencarian untuk menemukan versi asli animasi loading “meteors” milik Netscape Navigator, yang melekat dengan kenangan masa kecil tentang web, berlangsung selama beberapa hari, dan ukuran asli yang dijadikan acuan adalah 60×60 px
• Beberapa kandidat yang ditemukan di web berbeda dari versi asli; khususnya versi 400×400 px terlalu besar dan pikselnya berubah seperti persegi panjang sehingga sulit dipercaya
• Mirror GitHub Netscape 5.0 dan arsip source lawas di Mozilla FTP juga sudah diperiksa, tetapi file animasinya telah dihapus
• Setelah meminta bantuan di Mastodon, seorang teman menandai Jamie Zawinski, dan versi asli akhirnya ditemukan dari halaman yang ia kirim; ia pernah terlibat dalam pengerjaan Netscape Navigator
• Versi asli masih menyisakan artefak kecil di sisi kiri frame 10, lalu dibuat versi perbaikan 60×60 px dan 240×240 px dengan menyesuaikan piksel di sekitarnya

---

Proses melacak versi asli animasi Netscape

• Tujuannya adalah menemukan versi asli animasi “meteors” milik Netscape Navigator
  • Bagi penulis, animasi ini adalah gambar yang sangat kuat terkait dengan kenangan masa kecil saat menemukan web
  • Ukuran aslinya adalah 60×60 px
• Pencarian di web menemukan beberapa kandidat, tetapi belum memadai untuk dianggap sebagai versi asli
  • Salah satu versinya berukuran 400×400 px, terlalu besar
  • Karena penskalaan yang keliru, pikselnya berubah seperti persegi panjang
• Penelusuran arsip source juga tidak langsung membuahkan hasil
  • Memeriksa mirror GitHub Netscape 5.0
  • Juga menelusuri source Mozilla lama di Mozilla FTP
  • Di arsip-arsip tersebut, file animasinya sudah dihapus

Balasan Jamie Zawinski dan versi perbaikan

• Setelah meminta bantuan di Mastodon, seorang teman menandai @jwz untuk menanyakan apakah ia masih menyimpan file tersebut
• Jamie Zawinski menjawab langsung, dan dari halaman yang ia kirim, animasi loading Netscape meteors bisa ditemukan
  • Jamie Zawinski terlibat dalam berbagai proyek perangkat lunak pada 1990-an dan juga ikut mengerjakan Netscape Navigator
  • Ia membuat dan memelihara Xscreensaver, dan saat ini mengelola DNA Lounge
• Versi asli yang ditemukan masih menyisakan artefak kecil di sisi kiri frame 10
  • Bagian itu dirender seperti piksel merah dan oranye
  • Penulis membuat versi perbaikan dengan mengganti piksel-piksel itu ke piksel yang selaras dengan area sekitarnya
• Versi perbaikan dibuat dalam ukuran 60×60 px dan versi yang lebih besar 240×240 px

[GN⁺]

Pendapat di Hacker News

• Dari Netscape Communicator yang diunduh dari winworldpc.com, animasinya bisa diekstrak dengan prosedur yang cukup sederhana: binwalk -e cc32d48.exe, cd _cc32d48.exe.extracted, unshieldv3 extract comm.z comm, python extract_images.py --ico --png -d ns/ ~/Downloads/Netscape/_cc32d48.exe.extracted/comm/program/*.dll --continue-on-errors
  Di sini extract_images.py adalah alat dari proyek https://github.com/akx/res-extract. Dulu saya membuatnya karena ada seseorang yang membutuhkan ikon Excel 95
  Namun hasilnya bukan 60x60 keren seperti di tulisan, melainkan hanya frame 32x32: https://i.imgur.com/sXcEEDU.png

  • Di mobile, hampir mustahil melihat gambar sebenarnya di halaman imgur. Bukan mau mengeluh, tapi di atas ada iklan Futurama raksasa, di bawah ada konten promosi, dan hanya sekitar 3% layar yang berisi gambar itu, jadi agak absurd. Tentu saja ini juga karena tinggi gambarnya cuma 30px
  • Kalau “dulu saya membuatnya karena ada seseorang yang membutuhkan ikon Excel 95”, saya juga ingin memperkenalkan reshacker.exe: http://www.angusj.com/resourcehacker/
    Waktu remaja saya banyak menghabiskan waktu memakai ini untuk mengubah grafik Windows. Misalnya mengganti gambar layar loading Windows atau layar saat mematikan PC; masa-masa yang menyenangkan
  • Seperti yang mungkin bisa ditebak dari namanya, ini adalah versi Netscape Communicator yang lebih baru, lebih meriah, dan lebih berwarna daripada yang dibahas di artikel. Biasanya disebut “Netscape 4”, dengan UI yang lebih keemasan dan lebih “detail”
    Artikel itu tampaknya membahas animasi dari Netscape Navigator versi 3, alias “Netscape 3”
    Navigator: https://duckduckgo.com/?q=netscape+navigator&t=h_&iar=images...
    Communicator: https://duckduckgo.com/?q=netscape+communicator&t=h_&iar=ima...
  • Sekarang saya jadi penasaran, total ada berapa versi animasi meteor
    Animasi yang hanya berisi bagian loop ada di sini. Frame pertama tidak disertakan: https://i.ibb.co/DMDBR7L/Netscape-Communicator-Meteor-Loop.g...

• Di arsip situs web Dataglyph (Marsh Chamberlain) ada versi-versi lain dari animasi ini: https://web.archive.org/web/20011214155044/http://dataglyph....
  Pada versi situs yang lebih lama, tertulis bahwa kompas berputar, ikon yang tidak digunakan, juga dibuat oleh Dataglyph: https://web.archive.org/web/19981206034010/http://www.datagl...

  • Menakjubkan bagaimana orang bisa menemukan hal-hal seperti ini

• Semuanya ada di sini. Bukan hanya yang dari Netscape 4: http://www.netscape-communications.com/netscapes-throbber-an...

  • Karena situsnya sudah kembali online, saya lihat-lihat, dan saya tidak yakin itu benar-benar semuanya. Sepertinya yang ada di tulisan asli tidak ada. Yang di tulisan asli juga tampaknya bukan Netscape 4, dan menurut [1], yang dicari tulisan asli adalah Netscape 1, yaitu “original Netscape Navigator” yang disebut penulis
    Selain itu, gambar di [1] tampak sudah dimodifikasi. Ada bingkai putih, beberapa frame terakhir sepertinya hilang, dan paletnya juga tidak pas. Sebaliknya, palet pada tulisan asli terasa sangat tepat untuk era itu, sehingga makin memperkuat inti tulisannya
    [1]: https://www.versionmuseum.com/history-of/netscape-browser
  • Ironis rasanya bahwa seseorang meluangkan waktu untuk merekonstruksi lewat posting blog secuil kecil dari sesuatu yang dulu dilihat ribuan orang. Rasanya seperti era ketika informasi tersebar seperti pulau-pulau
  • Situs itu sepertinya tidak sanggup menahan trafik HN. Namun posting blognya masih hidup
  • NCSA Mosaic memang terbaik. Terutama rindu saat menjalankannya di SunOS

• Kombinasi dithering dan palet terkuantisasi itu benar-benar membangkitkan ingatan kuat tentang era tersebut

  • Sudah lama sekali tidak teringat warna web-safe (web-safe colors)
  • Kalau melihat contoh perbandingan berdampingan di bagian paling bawah, khususnya warna merah yang di-dither itu menarik

• Ah, ikon Netscape Navigator. Kenangan yang hangat. Nuansa warna situs dan browser Netscape indah dan nyaman
  Kalau meteornya bergerak, rasanya koneksi internet sudah tersambung; kalau tidak bergerak, berarti harus menelepon lagi nanti

• Tentu saja ini agak lucu, tetapi IE 3 dan 4 selalu “terasa” lebih cepat daripada Netscape karena kecepatan animasinya
  Saya selalu penasaran apakah Microsoft sengaja membuatnya lebih cepat untuk membidik persepsi seperti itu

  • Memang jelas ada perbedaannya. Tim Facebook mengganti loader awal aplikasi iOS dari garis-garis khas Facebook ||||| ke spinner iOS standar, karena pengguna merasa Facebook lambat saat melihat loader Facebook, dan merasa iPhone yang lambat saat melihat spinner iOS
  • Ini sama sekali bukan cerita lucu, lebih dekat ke psikologi manusia. Saya pernah membaca tulisan bahwa meskipun sebenarnya lebih lambat, jika terlihat ada respons, itu terasa lebih cepat
    Kalau ingin mencobanya sendiri, buat aplikasi dengan 3 tombol dalam bahasa favorit Anda. Tombol pertama menunggu 9 detik lalu menampilkan “done”; tombol kedua memperbarui progress bar setiap 1 detik selama 10 detik lalu menampilkan “done”; tombol ketiga memperbarui progress bar setiap 100 ms selama 10 detik lalu menampilkan “done”. Lihat mana yang terasa paling cepat
  • Saya ingin meneliti itu. Menarik untuk menyelaraskan timing perubahan UI dengan ada/tidaknya spinner/loader yang tersendat atau patah-patah, lalu membandingkan bagaimana persepsi pengguna berubah
    Jika ada kesan mulus, mesin terasa seperti diprogram dengan baik dan rapi, tetapi animasi GIF yang lambat memberi kesan ada sesuatu yang tidak beres
  • Maksudnya ikon awan yang bergerak di belakang logo Windows? Di laptop saya kecepatannya konyol sekali, seperti awannya bergerak dengan kecepatan warp. Saya tidak ingat apakah itu IE 3, tetapi selalu terlihat aneh
    Koreksi: ternyata IE 2
  • Versi-versi awal IE memang sangat cepat dan kaya fitur. Ukuran file executable-nya juga cukup kecil

• Ini benar-benar menyentuh rasa nostalgia. Saat yang sangat bagus untuk bergabung dengan World Wide Web

  • Itu masa ketika web masih murni, tanpa segala macam hiasan
    Lalu Netscape membuat JavaScript; awalnya bernama Mocha/LiveScript, dan akhirnya berkembang sampai menjadi seperti sekarang
  • Saya juga teringat salah satu proyek pemrograman pertama saya. Guru saya membuat game pesawat luar angkasa untuk Netscape, dan saya mem-porting-nya ke model UI IE
    Saat itu belum ada DOM yang terstandardisasi, dan seingat saya memaksakan inkompatibilitas adalah salah satu bagian dari strategi Microsoft

• Saya akan menaruh setumpuk .net dan majalah Wired di sini, jadi tinggal dengarkan suara handshake modem

  • Jangan lupakan majalah “Yahoo! Internet Life” juga

• Apakah ada yang tahu proses asli pembuatan animasinya? Saya penasaran apakah tiap frame digambar tangan, atau memakai teknik lain

  • Sepertinya frame-nya digambar langsung, tetapi saat itu juga ada alat untuk mengonversi ANI ke GIF
    Jadi bisa saja dibuat di 3D Studio Max, Maya dari SGI, atau Lightwave di Amiga, lalu lewat .ANI sebelum menjadi .GIF
    Kalau begitu, mungkin ada jalan untuk menggali file proyek aslinya dan membuat render 8K yang keren
  • Kemungkinan alur kerjanya adalah hasil hack seperti ini. Animasi dasar dan rendering pencahayaan mungkin dikerjakan dengan sesuatu seperti Autodesk 3D Studio R3/R4 (DOS) atau Lightwave 3D (Amiga), karena kalau dikerjakan manual pasti terlalu menyiksa
    Setelah itu mungkin bercampur dengan software kustom untuk optimasi palet, Mac Photoshop untuk compositing, dan sentuhan manual frame demi frame. Urutannya belum tentu seperti ini
    3ds Max keluar pada 1996, Maya pada 1998. Namun Netscape didirikan oleh Jim Clark yang terkenal dengan SGI, jadi besar kemungkinan pekerjaan 3D-nya dilakukan dengan software yang berjalan di mesin SGI
  • Itu adalah gambar bitmap yang menyambungkan frame-frame individual secara horizontal. Untuk GIF animasi yang sempat banyak dan populer di web, cara membuatnya seperti ini cukup umum: http://leighb.com/throbgif.htm

• Itu adalah era ketika internet terasa seperti sesuatu yang bisa dipelajari siapa saja dengan membeli buku setebal 6 inci di Borders Bookstore, duduk membacanya, belajar HTML, lalu langsung mencoba dan membangun karier
  Saya benar-benar melakukan hal itu, dan saat mulai saya memakai program yang ada di dalam Netscape

  • Editor WYSIWYG Netscape itu adalah Composer
    https://en.wikipedia.org/wiki/Netscape_Composer
  • Ah, Borders. Benar-benar masa yang terasa ajaib