वे बातें जो सिर्फ 90 के दशक के वेब डेवलपर्स को याद होंगी (2014)

 (zachholman.com)
1 पॉइंट द्वारा GN⁺ 2024-01-26 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • 1990 के दशक के पर्सनल वेब में standardized layout tools की कमी थी, इसलिए , , 1x1.gif,  , DHTML जैसी तकनीकों से layout और effects को किसी तरह गढ़ा जाता था
  • CSS layout के स्थापित होने से पहले 1x1.gif और बार-बार दोहराए गए   तत्वों को धकेलने वाले मुख्य layout tools की तरह इस्तेमाल होते थे, और लेख इसे बढ़ा-चढ़ाकर दिखाई गई nostalgia के रूप में व्यंग्य करता है
  • शुरुआती CSS लिंक के underline हटाने और a:hover style बदलने जैसे छोटे visual effects पर केंद्रित था, और नतीजतन लिंक और सामान्य text के बीच का फर्क धुंधला हो गया
  • DHTML, CSS और JavaScript को मिलाकर loading alert(), बर्फ़ के फाहे, accordion menu, custom `` जैसे effects बनाने वाली copy-paste culture से जुड़ा हुआ था
  • pixel fonts, 88x31 buttons, Internet Explorer 4.0, GeoCities, FrontPage ’98 उस दौर में पर्सनल वेबसाइटों के तकनीकी चुनाव और पहचान दिखाने के तरीक़े के रूप में सामने आते हैं

वह दौर जब और ही animation थे

  • को के अंदर रखना 1990 के दशक के वेब में किसी कमाल की computer animation की तरह, मज़ाकिया अंदाज़ में लिया जाता था
  • इसमें यह बढ़ा-चढ़ाकर दिखाया गया गर्व छिपा है कि 1990 के दशक के वेब डेवलपर्स के पास आज की jQuery या non-relational databases से भी ज़्यादा अहम कहानियाँ थीं

1x1.gif से पेज को धकेलने वाला layout

  • 1x1.gif, spacer.gif, transparent.gif सभी 1 pixel × 1 pixel transparent GIF को ही दर्शाते हैं
  • HTML image के WIDTH और HEIGHT attributes को बड़ा सेट करके अदृश्य space बनाई जा सकती थी, और पेज के elements को मनचाही जगह तक धकेला जा सकता था
  • उदाहरण कोड में , , , , ``, और web counter CGI को साथ इस्तेमाल करके structure और decoration दोनों एक साथ संभाले जाते थे
  • व्यंग्य आगे कहता है कि 1x1.gif की वजह से elements को पेज में कहीं भी रखा जा सकता था, और आज तक vertical center alignment का वही एकमात्र तरीका है

  से हाथ से किया गया spacing

  • अगर image tag इस्तेमाल करना मुश्किल हो, तो   को बार-बार दोहराकर spacing मिलाने का तरीका भी था
  • PLEASE SIGN और MY GUESTBOOK BELOW: के बीच कई   डालकर guestbook टेक्स्ट को जमाने का उदाहरण दिया गया है
  • फिर मज़ाक में कहा गया है कि अगर 1990 के दशक में इस्तेमाल किए गए हर   पर एक nickel मिला होता, तो AOL के monthly overage charges भरने के लिए काफ़ी पैसे हो जाते

शुरुआती CSS ने पहले लिंक के underline हटाए

  • CSS को HTML के स्वर्ण युग के अंत में आए उस तकनीक के रूप में पेश किया गया है, जिसने content और style को अलग करने का वादा किया था
  • उस समय CSS से सबसे पहले किया गया काम था लिंक के underline हटाना
  • लिंक text जैसे दिखने लगे और text लिंक जैसा, जिससे यह समझना मुश्किल हो गया कि कहाँ क्लिक करना है
  • mouse cursor के पीछे आग की लपटों जैसी trail छोड़ने वाले effect का भी ज़िक्र आता है
  • 2000 की index.shtml फ़ाइल के उदाहरण में inline CSS के रूप में सिर्फ a:hover {text-decoration: none; color: #000000} है
    • hover पर underline हटता है और रंग काला हो जाता है
    • यह index.shtml फ़ाइल SSI का इस्तेमाल करती है, इस बात को भी मज़ाकिया ढंग से उभारा गया है

DHTML और code copy culture

  • CSS से लिंक के underline हटाने के बाद JavaScript से page load पर alert("Welcome to my website!") दिखाने वाला क्रम आता है
  • CSS और JavaScript का मेल DHTML नाम की “डरावनी तकनीक” के रूप में व्यंग्यात्मक ढंग से पेश किया गया है
  • DHTML effects में पेज पर ऊपर से गिरते बर्फ़ के फाहे, accordion menu, animated image maps, और का उपयोग करने वाला custom शामिल है
  • Dynamic Drive जैसी साइटों की वजह से, समस्या को खुद हल करने के बजाय 50 lines का code block copy-paste कर देने से ही काम हो जाता है, ऐसा दिखाया गया है
  • DHTML की तुलना उस दौर के Twitter Bootstrap से की गई है

pixel font और low-resolution aesthetics

  • उस समय कंप्यूटर स्क्रीन CRT होती थीं, इसलिए उनका physical size बड़ा था लेकिन resolution बहुत ऊँचा नहीं होता था
  • सीमित pixels का असरदार इस्तेमाल करने के लिए 6-point के आसपास के छोटे fonts इस्तेमाल करने का चलन था
  • ऐसी साधारण pixel-based typefaces देखकर कई web developers illustrator बनना चाहते थे, और splash screen में isometric pixel illustration डालने की कोशिशें भी होती थीं
  • साथ ही यह मज़ाक भी जोड़ा गया है कि वह समय और पैसा Photoshop install करने के बजाय dot-com IPO में निवेश करना बेहतर होता

Internet Explorer 4.0 और 88x31 buttons

  • व्यंग्य यह कहता है कि आज लोग Internet Explorer से नफ़रत इसलिए करते हैं क्योंकि वह Internet Explorer 4.0 के “शुद्ध रूप” से दूर हो गया
  • Internet Explorer 4.0 को Active Desktop और Channels से लैस एक परफेक्ट browser की तरह बढ़ा-चढ़ाकर पेश किया गया है
  • उस दौर की वेबसाइटों पर ऐसे 88x31 pixel buttons बहुत लगे होते थे, जो बताते थे कि visitor को कौन-सा browser इस्तेमाल करना चाहिए और साइट कौन-से tools व services इस्तेमाल करती है
  • इन buttons की तुलना सैन्य वर्दी पर लगे medals से की गई है, जो साइट चलाने वाले के चुनाव और संबद्धता दिखाते थे
    • editor का उदाहरण: FrontPage ’98
    • web server का उदाहरण: GeoCities
    • web ring के बारे में मज़ाक है कि लोग उसे साइट को सबसे ऊपर ले जाने वाली जगह मानते थे, जबकि असल में ऐसा कुछ था ही नहीं

आज के web पर एक मज़ाक

  • आज के web को JavaScript के ऊपर कई layers of abstraction चढ़ी हुई अवस्था के रूप में दिखाया गया है
  • JavaScript के साधारण गणित भी ठीक से न कर पाने वाले मज़ाक के साथ बात ख़त्म होती है कि फिर भी यह हैरानी की बात है कि web यहाँ तक पहुँच गया
  • अंत में सुझाव दिया गया है कि अगली pull request में ढेर सारे   जोड़कर टीम को मज़ाक-मज़ाक में परेशान किया जाए

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

1 टिप्पणियां

 
GN⁺ 2024-01-26
Hacker News की राय

  • server-side image maps की बात बिल्कुल अपनी जैसी लगती है
    मैं वेब प्रोग्रामर से ज़्यादा कभी-कभार web-based tools बनाने वाला system administrator हूँ, इसलिए मेरी web skills 2000 के शुरुआती दशक में ही अटकी हुई हैं, और JavaScript से एक अजीब-सी दूरी भी है। हाल की एक tool में image पर points को संभालने वाला basic behavior चाहिए था; जो काम JavaScript की 5 lines में हो जाता, उसे मैंने 2023 में server-side image map से किया
    नतीजा यह हुआ कि JavaScript की 5 lines की जगह state संभालने वाली Python की 50 lines और उस अजीब fragment syntax को handle करने के लिए request handler में special case बन गया। थोड़ा शर्मनाक है, लेकिन फिर भी उसे चलने लायक बना दिया, इस बात पर अजीब-सा गर्व भी है

    • server-side image maps की सबसे बुरी बात यह है कि वे archiving को पूरी तरह तोड़ देते हैं
      archive.org Wayback Machine पर एक पुरानी site मिली, लेकिन अगर पूरी homepage ही server-side image map हो, तो मूल server के बिना बाकी site के destination URL पता करने का कोई तरीका नहीं रहता, और बात पूरी तरह dead end पर आकर रुक जाती है
    • मैंने 2015 में Chromium के server-side image map support को ठीक किया था
      उस समय वह लगभग टूटा हुआ था, इसलिए अगर zoom 100% न हो या padding 0 न हो, तो coordinates बिगड़ जाते थे, और ऐसे कई मिलते-जुलते issues थे। किसी ने ध्यान नहीं दिया, क्योंकि image maps खुद ही लगभग इस्तेमाल नहीं होते थे, और server-side image maps तो उससे भी कम
      मैं भी JavaScript के बिना आसान रास्ता निकालना चाहता था, इसलिए 90s HTML याद आया। लेकिन आखिर में Chromium bug ठीक करने के बाद यही निष्कर्ष निकला कि server-side image maps अच्छे नहीं हैं, और मैंने JavaScript इस्तेमाल किया; JavaScript वाला version बेहतर था
    • “इस पूरे नर्क जैसे सिस्टम में सिर्फ JavaScript की 5 lines ही क्यों न हों, मैं उसे अपने program में नहीं डालूँगा” वाली भावना से पूरी तरह सहमत हूँ
      HTMX सच में किसी उद्धार जैसा है, और Tailwind UI खरीद लो तो कोई भी frontend में काफ़ी खतरनाक इंसान बन सकता है। फिर भी JavaScript से असहजता क्यों होती है, इस पर दूसरी राय भी जानना चाहूँगा। मेरे लिए तो syntax की असंगति बड़ी वजह है, और TypeScript की तरफ़ node_modules folder देखते ही जी मिचलाने लगता है
      कुल मिलाकर लंबे समय तक frontend से दूर रहने की वजह यही रही कि कभी लगता ही नहीं था कि जो कुछ हो रहा है, उस पर मेरा नियंत्रण है
    • 2019 के अंत में मुझे घर से office में रखे एक device के GUI को नियंत्रित करना था, लेकिन remote desktop नहीं था; सिर्फ screenshot tool और clicks inject करने वाला command-line tool था
      मैंने Lisp की कुछ दर्जन lines से एक web server बनाया जो screen का image map देता था, और image map request आने पर click insert कर देता था। यह एक छोटा-सा one-off tool था, जो सिर्फ office आना-जाना बचाने के लिए बनाया था, लेकिन बाद में COVID आ गया और बहुत ज़्यादा लोगों ने उसका इस्तेमाल करना शुरू कर दिया। शायद आज भी कोई न कोई उसे इस्तेमाल कर रहा हो

  • “अब भी किसी element को vertically center करने का यही एक तरीका है” अब सही नहीं है, लेकिन पिछले 30 सालों में div के अंदर बस vertical-align: middle; न चला पाने की productivity cost शायद अरबों डॉलर रही होगी
    IE4 या IE6 के दौर में links के :hover पर overline style देने वाला चलन भी याद है। tables से rounded-corner div और buttons बनते थे, और 2000s में भी Photoshop से slices काटकर table cells में भरने वाला दर्द जारी था

    • तब भी table cells के अंदर VALIGN=MIDDLE था
      90s में भी था या नहीं, पता नहीं, लेकिन 2000s में तो निश्चित रूप से था
    • आजकल मैं ऐसा CSS ChatGPT से लिखवाता हूँ, और मज़ेदार बात यह है कि वह जैसे कम से कम बारह तरह के solutions दे देता है
      लेकिन अक्सर 2~3 rules काफ़ी होते हैं, फिर भी वह 5 से ज़्यादा जोड़कर redundant rules मिला देता है। सच में हद दर्जे का बेवकूफ़ है
    • tables से rounded corners बनाने का दौर सच में बहुत चला था
      उन corners की वजह से न जाने कितना समय बर्बाद हुआ
    • आज भी vertical alignment एक बड़ा सिरदर्द है, और इसमें बहुत-सी बारीक समझ चाहिए
      Tailwind CSS में भी यह सीधा नहीं है; element block है या text, parent layout क्या है, जैसी बातें बार-बार देखनी पड़ती हैं
    • मेरे पसंदीदा CSS hacks में से एक है div { display: table-cell; vertical-align: middle; }
      यह हर situation में काम नहीं करता, लेकिन शुरुआत में चाहे गंदा लगे, concerns की separation फिर भी बनी रहती है और कोई खास दूसरी कमी नज़र नहीं आती

  • इस संदर्भ में DHTML का मतलब Distributed HTML नहीं बल्कि Dynamic HTML था, और इसलिए Dynamic Drive का Dynamic भी वही है

    • “DHTML तो obviously distributed HTML है” एक मज़ाक था, लेकिन लगता है उसे गलत उद्धृत किया गया
      जब दूसरे लोगों ने भी उसे उसी तरह गलत उद्धृत किया, तो लगता है लेखक ने हाल में मज़ाक में उसे बदल दिया होगा
    • फिर भी “Technology of Terror” वाला वर्णन अब भी बिना किसी आपत्ति के लागू होता है
    • लगा कि शायद नीचे वाले “बस copy-paste किया जा सकता था” हिस्से की तरफ़ इशारा था, और शायद यह DCOM पर भी एक शब्द-खेल हो सकता है
    • नीचे वाले thread में इस पर चर्चा हुई थी: https://news.ycombinator.com/item?id=39127528
      निष्कर्ष यही था कि यह मज़ाक तो है, लेकिन अच्छा मज़ाक नहीं है
    • लगता है यहाँ सचमुच मज़ा-विरोधी ब्रिगेड मिल गई

  • frames को भी नहीं भूल सकते। यह हर page के navigation bar को बदलने की समस्या का मूल “solution” था
    समस्या यह थी कि search engine हर frame page को अलग-अलग index कर सकते थे, इसलिए अगर कोई सीधे किसी frame page पर आ जाए तो उसे कैसे handle करना है, यह सोचना पड़ता था। sections के बीच की dividing line भी हमेशा साफ़ दिखती थी, इसलिए सब कुछ अटपटा और असुविधाजनक लगता था

    • असली उस्ताद server-side include इस्तेमाल करते थे
      HTML के अंदर special comments डाल दिए जाते थे, और Apache उन्हें client को भेजने से पहले किसी दूसरी file के contents से replace कर देता था
    • अगर कोई दूसरी website मेरे page को अपने frame में डाल दे, तो frame-buster script चलाते थे, और अगर मेरा page अपने frame के बिना orphan बन जाए, तो frame-joiner script बुलाते थे
    • frames आज भी एक बुनियादी microfrontend technology के रूप में हैरानीजनक रूप से काम आ रहे हैं
      इसका theory https://martinfowler.com/articles/micro-frontends.html#Run-t... में है, और implementation https://luigi-project.io पर देख सकते हैं
    • JavaScript के “AJAX” वाले इस्तेमाल का हँसाने लायक बड़ा हिस्सा frames से भी किया जा सकता था, और अगर frames रुक न गए होते और थोड़ा-सा evolve हुए होते, तो शायद performance भी बेहतर होती
      अगर इसके साथ HTML tables में built-in functionality होती, और data source आधारित tables और list views 2000s के मध्य में मिल गए होते, तो बेहिसाब समय और पैसा बच सकता था
      और अगर web ने payment standards अपना लिए होते और browser खुद payment input handle करता, तो कितना पैसा बचता, यह गिनना शुरू करें तो बात खत्म ही न हो
    • sections के बीच की boundaries भी हर browser में बिल्कुल एक जैसी नहीं होती थीं
      बच्चों, एक ज़माना था जब सब लोग एक ही browser इस्तेमाल नहीं करते थे

  • 1996 में Microsoft homepage पर hover करने पर खुलने वाला menu bar था, और मैंने ठान लिया था कि यह कैसे काम करता है, पता लगाकर रहूँगा
    उस समय IE में “View Source” button था, लेकिन platform sense की कमी के कारण वह Notepad document की तरह खुलता था, और server Unix पर था इसलिए line breaks \n थे, जबकि Windows \r की उम्मीद करता था, नतीजा यह कि पूरा HTML source एक ही लंबी line में दिखता था
    source को कितनी भी ध्यान से देखो, HTML tags सब जाने-पहचाने थे और contents भी वही text था जो page पर दिख रहा था। बस HTML entities ही अनजान थीं, और क्योंकि वे हर उस site पर दिखती थीं जहाँ moving menu था, मुझे पूरा यक़ीन हो गया था कि राज़ उन्हीं में है
    6 महीने तक मैं मानता रहा कि DHTML effects असल में HTML entities के रूप में छिपे जादुई मंत्रों से बनते हैं, और बाद में जब WebMonkey tutorial मिला, तो वहीं से पूरी career की शुरुआत हो गई

    • View Source ही मेरी शुरुआत थी
      minification tools और compilers शानदार हैं, लेकिन अच्छी तरह designed sites का साफ़-सुथरा, maintain किया गया source पढ़ने वाले दिन सच में याद आते हैं
      काश हम ऐसे compression तक पहुँचे होते जो production code में भी original source formatting को बचाए रखता, और यह उम्मीद बनाए रखता कि दुनिया भर के दूसरे लोग हमारा code पढ़ेंगे। शुरुआती web के तेज़ी से बढ़ने में इस culture की बड़ी भूमिका थी, और मेरे इस industry में आने की कहानी में भी इसका हिस्सा बहुत बड़ा था
    • उस समय असल में moving menu किससे बनता था, यह जानने की जिज्ञासा है। मैं उस दौर में coding करने वाली पीढ़ी का नहीं हूँ, इसलिए शायद कोई tag या script इसकी वजह रही होगी
    • hover पर image बदलने की चाह में मेरा भी ऐसा ही अनुभव रहा
      Barnes & Noble से JavaScript Bible खरीदी, weekend भर पढ़ी, और उसके बाद सीखना चलता ही रहा
    • WebMonkey का नाम सुनते ही यादें ताज़ा हो गईं

  • यह भी नहीं भूलना चाहिए कि tables का इस्तेमाल rounded corners के लिए भी होता था
    3×3 table बनाते थे और बीच वाले cell को छोड़कर बाकी cells में images डालते थे, ताकि rounded corners वाला website element बनाया जा सके, और उस समय यह इंसानी अभिव्यक्ति की चरम सीमा जैसा लगता था
    HTML email भी चलन में था, और email clients browsers की तुलना में बहुत धीरे update होते थे, इसलिए अगर आप चाहते थे कि चीज़ें सही दिखें, तो यह technique 2010s तक भी इस्तेमाल होती रही

    • 3×3 table के लिए tl.gif, tr.gif, bl.gif जैसी image sets बनाना मैं कभी नहीं भूलूँगा
      उस समय browsers खाली cells की background images render नहीं करते थे, इसलिए बाएँ और दाएँ cells का background दिखाने के लिए लेख में बताए गए 1x1.gif की भी ज़रूरत पड़ती थी। क्या दिन थे
    • जैसे ही border-radius मिला, design trend बदल गया और किसी को rounded corners चाहिए ही नहीं रहे
    • लेख की कई बातें 90s से ज़्यादा 2000s की शुरुआत की लगती हैं
      tables से rounded corners बनाने से पहले मुझे Trillian नाम का multi-chat app skinning की तरह customize करना याद है। वह Yahoo Chat, ICQ वगैरह संभालता था, और rounded corners की तरह ऊपर और side cells में repeating images डालकर window resizing ठीक रखी जाती थी
    • https://www.folklore.org/Round_Rects_Are_Everywhere.html
      महान और सर्वशक्तिमान Oz की सबसे बड़ी उपलब्धि। खैर, iPhone शायद उससे भी बड़ा रहा हो
    • tables का इस्तेमाल shadows के लिए भी होता था

  • 90s/00s की websites की बात हो और “800×600 resolution के लिए optimized” button न हो, ऐसा हो ही नहीं सकता था
    अगर थोड़ा और style मारना हो तो “Valid HTML 4.01” भी जोड़ देते थे
    उस समय ads आज की तरह जटिल JavaScript bundles और video ads नहीं थे, बल्कि simple standard-size banners होते थे। मुझे याद है, Norton Internet Security 2003 चुपचाप visited page के HTML को rewrite कर देता था, standard ad-size banners को हटा देता था और बाकी सब छोड़ देता था—यह देखकर मैं दंग रह गया था। यह इस बात की 20 साल पुरानी पुष्टि भी है कि ad blocker दरअसल security solution है

  • हैरानी है कि पूरे लेख में webmaster शब्द एक बार भी नहीं आया; तब तो लगता है Zach सच में 90s में था भी या नहीं

    • 90s के आखिर में छपवाया हुआ “Webmaster” business card अभी भी मेरे पास है
      उस समय यह title कितना “cool” लगता था, यह आज कोई समझ ही नहीं सकता। अब देखकर मुझे खुद भी थोड़ी शर्म आती है, लेकिन उससे जुड़ी यादें बहुत प्यारी हैं
    • मैंने एक ऐसी महिला के साथ काम किया है जो आधिकारिक तौर पर खुद को “webmistress” कहती थी
      यह मज़ाक नहीं था

  • अगर आप 90s के web को सीधे अनुभव करना चाहते हैं, तो The Geocities Gallery https://geocities.restorativland.org/ की सिफारिश है
    इन personal webpages में कुछ सुंदर-सा है। हर page का अपना एक अलग रूप होता है, और सिर्फ उससे ही लेखक की personality काफी झलकती है
    आमतौर पर इनमें self-introduction, कुछ random personal photos, छोटे विवरण के साथ recommended links की list, और hobbies पर ढीले-ढाले लिखे नोट्स होते थे, इसलिए वे बहुत व्यक्तिगत और शांत लगते थे। यह आज के social media से साफ़ तौर पर अलग था, जहाँ हर profile page एक जैसा फीका और उबाऊ दिखता है, content अंतहीन बढ़ता रहता है, और एक खास तरह की life image बनाए रखने का दबाव रहता है

    • इसकी वजह से मैं rabbit hole में उतर गया
      मैं काफी देर तक अपना पुराना site ढूँढ़ता रहा, जो Area51 के नीचे किसी directory में था, लेकिन याद नहीं कि कहाँ, और शायद वह archive भी नहीं हुआ होगा; साथ ही बस उस दौर को फिर से जीता रहा
      यादें अजीब होती हैं। Geocities देखते ही मुझे पुराने internet की गंध तक याद आ गई, शायद वह उस family room की गंध थी जहाँ computer रखा था
    • मुझे याद है कि 90s के मध्य में Windows के ईंट-जैसे background और transparent GIF graffiti को मिलाकर काफी शानदार effect बनाया जाता था
      ACID, ICE, FIRE जैसे BBS art groups के शुरुआती काम भी उस समय सचमुच बहुत शानदार लगते थे
      IE5/6 के दबदबे से पहले, ज़्यादा advanced चीज़ें आम तौर पर Flash की ओर खिसक गई थीं। 2000s की शुरुआत में E4X आधारित React-जैसा framework बनाया गया था, जिसे ActionScript/Flash/Flex और Mozilla/Netscape support करते थे, और वह VB.Net के XML literal notation जैसा भी था
      Microsoft और Google ने इसे नहीं अपनाया, और आखिरकार JSON ही राजा बन गया

  • 90s में web layout से जुड़े सवालों का जवाब लगभग हमेशा table होता था
    text alignment बिगड़ गया? table. कोई शानदार menu चाहिए? table. पूरा site बना रहे हैं? nested tables. जब rows और cells से design को hack किया जा सकता था, तो CSS की क्या ज़रूरत थी

    • 2024 में भी email layouts के लिए यह अब भी लगभग सच है
    • और यह भी नहीं भूलना चाहिए कि हर cell में font tag डालना पड़ता था
    • उस समय सब कुछ TDD था। TD-Driven Design था
    • मुझे अब भी tables पसंद हैं
      वे dynamic design के लिए सचमुच शानदार हैं, और column/row merge, alignment, और weighting भी support करते हैं। CSS अब भी पुराने tables की तुलना में कहीं ज़्यादा जटिल है
    • अब हमारे पास वही काम करने का थोड़ा ज़्यादा semantically correct तरीका है