Netscape Meteors

 (erynwells.me)
2 पॉइंट द्वारा GN⁺ 2023-08-04 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • बचपन में वेब की यादों से जुड़ी Netscape Navigator की “meteors” लोडिंग animation की मूल फाइल खोजने की प्रक्रिया कई दिनों तक चली, और संदर्भ के तौर पर इस्तेमाल किया गया मूल आकार 60×60 px था
  • वेब पर मिले उम्मीदवार मूल से अलग थे; खासकर 400×400 px version बहुत बड़ा था और pixels आयताकार जैसे विकृत हो गए थे, इसलिए उस पर भरोसा करना मुश्किल था
  • Netscape 5.0 GitHub mirror और Mozilla FTP के पुराने source archives तक जांचे गए, लेकिन animation file पहले ही हटाई जा चुकी थी
  • Mastodon पर मदद मांगने पर एक दोस्त ने Jamie Zawinski को tag किया, और Netscape Navigator पर काम कर चुके Zawinski द्वारा भेजे गए page में मूल फाइल मिल गई
  • मूल में frame 10 के बाईं ओर एक छोटा artifact बचा हुआ था, और आसपास के pixels से मेल खाते हुए सुधारे गए 60×60 px और 240×240 px versions बनाए गए

Netscape animation के मूल को ट्रैक करने की प्रक्रिया

  • लक्ष्य Netscape Navigator के “meteors” animation का मूल खोजना था
    • यह animation लेखक के लिए बचपन में वेब की खोज वाली यादों से गहराई से जुड़ी image थी
    • मूल आकार 60×60 px था
  • web search से कई candidates मिले, लेकिन उन्हें मूल मानने के लिए वे पर्याप्त नहीं थे
    • एक version 400×400 px का था, जो बहुत बड़ा था
    • गलत resizing की वजह से pixels आयताकार जैसे बदल गए थे
  • source archives की खोज से भी तुरंत नतीजा नहीं मिला

Jamie Zawinski का जवाब और सुधारा गया version

  • Mastodon पर मदद मांगने के बाद, एक दोस्त ने @jwz को tag करके पूछा कि क्या उनके पास file है
  • Jamie Zawinski ने सीधे जवाब दिया, और उनके भेजे हुए page पर Netscape meteors loading animation मिल गई
    • Jamie Zawinski 1990 के दशक में कई software projects में शामिल रहे और Netscape Navigator पर काम में भी शामिल थे
    • उन्होंने Xscreensaver बनाया और maintain करते हैं, और अभी San Francisco में DNA Lounge चलाते हैं
  • मिली हुई original file में frame 10 के बाईं ओर एक छोटा artifact बचा हुआ था
    • वह हिस्सा लाल और नारंगी pixels जैसा render होता था
    • लेखक ने उन pixels को आसपास से मेल खाने वाले pixels से बदलकर एक सुधारा हुआ version बनाया
  • सुधारा गया version 60×60 px और बड़े 240×240 px versions में बनाया गया

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2023-08-04
Hacker News की टिप्पणियाँ

  • winworldpc.com से मिले Netscape Communicator से animation को काफी सरल प्रक्रिया से extract किया जा सका: 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
    यहाँ extract_images.py https://github.com/akx/res-extract project का tool है। पहले किसी ने Excel 95 icon चाहिए कहा था, इसलिए इसे बनाकर दिया था
    हालांकि result लेख में दिखे शानदार 60x60 नहीं, बल्कि सिर्फ 32x32 frames थे: https://i.imgur.com/sXcEEDU.png

    • mobile पर imgur page की actual image देखना लगभग नामुमकिन है। शिकायत करने के लिए नहीं कह रहा, लेकिन ऊपर बड़ा-सा Futurama ad है, नीचे promoted content है, और screen का लगभग 3% ही वह image है, इसलिए थोड़ा अजीब लगता है। बेशक वजह यह भी है कि image की height सिर्फ 30px है
    • अगर “पहले किसी ने Excel 95 icon चाहिए कहा था, इसलिए बनाकर दिया” वाली बात है, तो reshacker.exe भी बताना चाहूँगा: http://www.angusj.com/resourcehacker/
      teenager रहते हुए मैंने इससे Windows graphics बदलने में काफी समय बिताया था। जैसे Windows loading screen या PC shutdown screen की image बदलना; मजेदार दिन थे
    • नाम से अंदाजा लग सकता है, लेकिन यह लेख में चर्चा किए गए version से बाद का, ज्यादा चमकीला और ज्यादा रंगों वाला Netscape Communicator version है। आम तौर पर “Netscape 4” कहलाता था, जिसका UI ज्यादा सुनहरा और ज्यादा “detailed” था
      लेख शायद Netscape Navigator version 3, यानी “Netscape 3” के animation की बात कर रहा है
      Navigator: https://duckduckgo.com/?q=netscape+navigator&t=h_&iar=images...
      Communicator: https://duckduckgo.com/?q=netscape+communicator&t=h_&iar=ima...
    • अब जिज्ञासा हो रही है कि meteor animation के कुल कितने versions थे
      loop वाला हिस्सा अलग से बनाया गया animation यहाँ है। पहला frame शामिल नहीं है: https://i.ibb.co/DMDBR7L/Netscape-Communicator-Meteor-Loop.g...

  • Dataglyph website (Marsh Chamberlain) के archive में इस animation के दूसरे versions हैं: https://web.archive.org/web/20011214155044/http://dataglyph....
    site के पुराने version में लिखा है कि unused icon rotating compass भी Dataglyph ने बनाया था: https://web.archive.org/web/19981206034010/http://www.datagl...

    • हैरानी होती है कि लोग ऐसी चीजें कैसे ढूँढ निकालते हैं

  • सब कुछ यहाँ है। सिर्फ Netscape 4 वाला ही नहीं: http://www.netscape-communications.com/netscapes-throbber-an...

    • site फिर से online आई तो देखकर लगा, पता नहीं सचमुच सब कुछ है या नहीं। original post में जो है, वह इसमें नहीं दिखता। original वाला भी Netscape 4 नहीं लगता, और [1] के मुताबिक original post जिस चीज़ को ढूँढ रही थी, वह Netscape 1, यानी लेखक के कहे “original Netscape Navigator” वाली लगती है
      और [1] की image में बदलाव के निशान हैं। सफेद border है, लगता है आखिरी कुछ frames गायब हैं, और palette भी ठीक-ठीक match नहीं करता। इसके उलट original post का palette उस दौर का अहसास बिल्कुल सही पकड़ता है, जिससे लेख का point और मजबूत होता है
      [1]: https://www.versionmuseum.com/history-of/netscape-browser
    • irony है कि जिसे हजारों लोगों ने देखा था, उसके एक छोटे-से हिस्से को किसी ने blog post में recreate करने के लिए समय लगाया। लगता है जैसे जानकारी द्वीपों की तरह बिखरे हुए युग में है
    • लगता है वह site HN traffic नहीं झेल पाई। फिर भी blog post live है
    • NCSA Mosaic सबसे बढ़िया था। खासकर SunOS पर चलाते समय की याद आती है

  • उस dithering और quantized palette के combination से वह दौर बहुत जोर से याद आ जाता है

    • web-safe colors सचमुच बहुत लंबे समय बाद याद आए
    • सबसे नीचे side-by-side comparison वाले example में खासकर dithered red दिलचस्प है

  • आह, Netscape Navigator icon। गर्मजोशी भरी यादें हैं। Netscape site और browser के रंग सुंदर और सुकून देने वाले थे
    meteor चलता दिखता तो समझते थे internet connection हो गया है, और अगर नहीं चलता था तो बाद में फिर से phone करना पड़ता था

  • बेशक यह थोड़ी मज़ाकिया बात है, लेकिन animation speed की वजह से IE 3 और 4 हमेशा Netscape से ज़्यादा तेज़ “महसूस” होते थे
    मैं हमेशा सोचता था कि क्या Microsoft ने इसी धारणा को निशाना बनाकर जानबूझकर इसे तेज़ बनाया था

    • फर्क तो साफ़ है। Facebook टीम ने iOS app startup loader को Facebook-स्टाइल धारियों ||||| से standard iOS spinner में बदल दिया था, क्योंकि users को Facebook loader में लगता था कि Facebook धीमा है, और iOS spinner में लगता था कि iPhone धीमा है
    • यह बिल्कुल भी मज़ाकिया बात नहीं, बल्कि मानव मनोविज्ञान के ज़्यादा करीब है। मैंने पहले कहीं पढ़ा था कि असल में धीमा होने पर भी अगर प्रतिक्रिया दिखती रहे, तो वह तेज़ महसूस होता है
      खुद आज़माना हो तो अपनी पसंदीदा language में 3 buttons वाला app बना लें। पहला button 9 सेकंड इंतज़ार करे और फिर “done” दिखाए, दूसरा button 10 सेकंड तक हर 1 सेकंड में progress bar update करे और फिर “done” दिखाए, तीसरा button 10 सेकंड तक हर 100ms में progress bar update करे और फिर “done” दिखाए। फिर देखें कौन सा सबसे तेज़ महसूस होता है
    • मैं इसे investigate करना चाहूँगा। अटकने या हिचकिचाने वाले spinner/loader की मौजूदगी या गैर-मौजूदगी के हिसाब से UI change timing मिलाकर देखें और compare करें कि users की धारणा कैसे बदलती है
      smoothness का एहसास हो तो machine अच्छी तरह programmed और व्यवस्थित लगती है, लेकिन धीमा GIF animation ऐसा एहसास देता है कि कुछ गड़बड़ है
    • क्या तुम Windows logo के पीछे बादलों के चलने वाले icon की बात कर रहे हो? मेरे laptop पर उसकी speed हास्यास्पद रूप से तेज़ थी, ऐसा लगता था जैसे बादल warp speed पर चल रहे हों। याद नहीं कि वह IE 3 था या नहीं, लेकिन हमेशा अजीब दिखता था
      Edit: वह IE 2 था
    • शुरुआती IE versions वाकई तेज़ थे और features भी बहुत थे। executable file size भी काफ़ी छोटा था

  • nostalgia को ठीक निशाने पर छू गया। World Wide Web में शामिल होने के लिए सच में बढ़िया दौर था

    • वह दौर था जब web शुद्ध था, बिना तरह-तरह की सजावट के
      फिर Netscape ने JavaScript बनाया, जो पहले Mocha/LiveScript था, और आखिरकार आज की स्थिति तक आ गया
    • इससे मेरे शुरुआती programming projects में से एक भी याद आ गया। teacher ने Netscape के लिए एक spaceship game बनाया था, और मैंने उसे IE के UI model पर port किया था
      उस समय standardized DOM नहीं था, और मेरी याद के मुताबिक incompatibility को मजबूर करना Microsoft की strategy का एक हिस्सा था

  • मैं यहाँ .net और Wired magazine का ढेर रख देता हूँ, आप modem handshake की आवाज़ सुनिए

    • “Yahoo! Internet Life” magazine को भी मत भूलिए

  • क्या किसी को पता है कि original animation किस process से बनाया गया था? क्या हर frame हाथ से draw किया गया था, या कोई और technique इस्तेमाल हुई थी?

    • लगता है frames हाथ से बनाए गए होंगे, लेकिन उस समय ANI को GIF में convert करने वाले tools भी थे
      इसलिए हो सकता है कि इसे 3D Studio Max या SGI के Maya, या Amiga के Lightwave में बनाया गया हो और .ANI के रास्ते .GIF तक गया हो
      अगर ऐसा है, तो original project files खोज निकालकर शानदार 8K render बनाने का रास्ता भी हो सकता है
    • मुझे लगता है workflow कुछ इसी तरह का hacked रहा होगा। basic animation और lighting rendering शायद Autodesk 3D Studio R3/R4(DOS) या Lightwave 3D(Amiga) जैसी चीज़ों से की गई होगी, क्योंकि इसे हाथ से करना बहुत ही नरक जैसा होता
      उसके बाद palette optimization के लिए custom software, compositing के लिए Mac Photoshop, और frame-by-frame manual work का mix रहा होगा। order ज़रूरी नहीं कि यही रहा हो
      3ds Max 1996 में आया था, Maya 1998 में। हालांकि Netscape की स्थापना SGI के लिए मशहूर Jim Clark ने की थी, इसलिए 3D work शायद SGI machines पर चलने वाले software से किया गया होगा
    • यह अलग-अलग frames को horizontally जोड़कर बनाई गई bitmap image थी। कुछ समय तक web पर बहुत लोकप्रिय animated GIFs में ऐसी चीज़ें बनाने का यह common तरीका था: http://leighb.com/throbgif.htm

  • वह ऐसा दौर था जब लगता था कि internet ऐसी चीज़ है जिसमें कोई भी Borders Bookstore से 6-inch मोटी किताब खरीदकर बैठकर पढ़ सकता है, HTML सीख सकता है, फिर तुरंत कुछ बना सकता है और career बना सकता है
    सच में मैंने ऐसा ही किया था, और शुरुआत में Netscape के अंदर आने वाला program इस्तेमाल किया था