<Blink> और <Marquee> (2020)

• 90 के दशक की शुरुआती वेब दुनिया में आए <blink> और <marquee> टैग उस समय के वेब डिज़ाइन के प्रतीकात्मक तत्व थे
• <blink> टैग को Netscape Navigator 2.0 में पेश किया गया था, और मज़ाकिया उद्देश्य व सीमित सौंदर्यबोध के बावजूद इसका व्यापक उपयोग हुआ
• Microsoft ने इसके जवाब में Internet Explorer में <marquee> टैग जोड़ा, जिससे टेक्स्ट animation को कहीं अधिक विविध तरीकों से नियंत्रित किया जा सका
• इन दोनों टैगों को nested करके इस्तेमाल करने पर ब्राउज़र के अनुसार अलग-अलग animation effects दिए जा सकते थे, और इसे progressive enhancement सिद्धांत के एक उदाहरण के रूप में भी देखा जाता है
• आज <blink> गायब हो चुका है और <marquee> का उपयोग भी अनुशंसित नहीं है, लेकिन वेब इतिहास और online nostalgia के प्रतिनिधि उदाहरण के रूप में इनका ज़िक्र अब भी होता है

---

परिचय: <blink> और <marquee> टैगों की याद

• हाल ही में एक साथी web developer से बातचीत के दौरान HTML <blink> और <marquee> टैग पर मज़ाक हुआ, तब पता चला कि सामने वाले developer इन दोनों टैगों से परिचित ही नहीं थे
• आज के युवा developers के लिए ये टैग अपरिचित हो सकते हैं, लेकिन एक समय ये 90 के दशक के वेब डिज़ाइन के प्रतीकात्मक तत्व थे

<blink> टैग की उत्पत्ति और इतिहास

• <blink> टैग के निर्माता के रूप में अक्सर Lynx browser बनाने वाले Lou Montulli का नाम लिया जाता है, लेकिन उन्होंने खुद कहा है कि उन्होंने इसका code सीधे नहीं लिखा था
• उनके अनुसार, एक bar में Netscape engineers के साथ बातचीत के दौरान Lynx जैसे text browser में भी इस्तेमाल हो सकने वाले “text blinking effect” का विचार मज़ाक में सामने आया, और उसी के आधार पर एक दूसरे engineer ने रातोंरात इसे implement कर दिया
• 1995 में Netscape Navigator 2.0 में <blink> टैग आधिकारिक रूप से शामिल हुआ, और moving GIFs तथा शुरुआती JavaScript के साथ मिलकर इसने personal websites के अनुभव को परिभाषित करने में भूमिका निभाई
• <blink> टैग बिना attributes के इस्तेमाल होता था, और HTML4 में इसे औपचारिक रूप से मज़ाक के लिए बना टैग दर्ज किए जाने के बावजूद, 90 के दशक के उत्तरार्ध में इसका खूब दुरुपयोग हुआ
• “नवीनतम अपडेट” जैसे संदेशों पर ध्यान खींचने के लिए इसका बहुत इस्तेमाल किया जाता था

<marquee> टैग और ब्राउज़र प्रतिस्पर्धा

• उसी वर्ष Microsoft द्वारा जारी Internet Explorer 2.0 ने Netscape के <blink> से अलग रास्ता अपनाते हुए <marquee> टैग पेश किया
• <marquee> टैग में scroll direction, speed, repeat जैसे विभिन्न attributes थे, जिनसे animation को नियंत्रित किया जा सकता था
• जहाँ <blink> मज़ाकिया अंदाज़ में visual readability को बिगाड़ सकता था, वहीं <marquee> ने प्रभाव को जानबूझकर और प्रमुख बनाया
• 90 के दशक के अंत तक दोनों टैगों को साथ इस्तेमाल करने का तरीका—<marquee> के अंदर <blink>—IE और Netscape जैसे ब्राउज़रों में अलग-अलग प्रभाव देने के लिए लोकप्रिय हो गया

Progressive Enhancement और वेब संगतता

• <blink> और <marquee> को nested करके इस्तेमाल करना इस बात से जुड़ा था कि web browsers unsupported tags को ignore कर देते हैं, लेकिन अंदर की content को वैसे ही render करते हैं; यह Postel’s Law से संबंधित है
• नए HTML elements (<video> आदि) भी इसी कारण अक्सर non-self-closing tag pattern अपनाते हैं, ताकि compatibility बनी रहे
• <blink>/<marquee> जैसे टैगों का उपयोग करने पर, इन टैगों को न पहचानने वाले browsers में भी users जानकारी पढ़ सकते थे
• वेब का मूल विचार यही है कि सभी users को information मिले, जबकि कुछ browsers अतिरिक्त effects का आनंद ले सकें; यही progressive enhancement की अवधारणा है

विभिन्न ब्राउज़रों में बदलाव और समर्थन

• Opera users, paid license होने पर भी, <blink> या <marquee> effects शायद ही देख पाते थे, लेकिन content access में कोई समस्या नहीं थी
• Netscape 7 लगभग एकमात्र browser था जो <blink> और <marquee> दोनों को support करता था, जिससे एक साथ scrolling + blinking effect संभव होता था और वेब पर सबसे दुर्लभ दृश्य प्रभावों में से एक बनाया जा सकता था

निष्कर्ष: आज की स्थिति और वेब डिज़ाइन की सीख

• <blink> टैग अब पूरी तरह गायब हो चुका है (आधुनिक browsers में unsupported), और आवश्यकता हो तो इसे CSS animation से बदला जा सकता है
• <marquee> कुछ browsers में अब भी default support या polyfill के रूप में मौजूद हो सकता है, फिर भी इसका उपयोग अनुशंसित नहीं है
• यह वेब इतिहास और पुरानी online aesthetics का प्रतीक होने के साथ-साथ, web standards तथा accessibility और maintainability से जुड़ा एक शिक्षाप्रद उदाहरण भी है
• अगर आपकी रुचि digital nostalgia में है, तो पुराने web design से जुड़ी सामग्री या sites देखी जा सकती हैं

[GN⁺]

Hacker News की राय

• याद है कि पहले नीचे दिए गए लिंक जैसी एक साइट हुआ करती थी https://web.archive.org/web/20201111125145/https://danq.me/2020/11/11/blink-and-marquee/

• मैं खुद को 3,000 साल पुराना महसूस करने वाले लोगों में से एक मानता हूँ। वह दौर याद है जब frame navigation खराब प्रथा है या नहीं, इस पर ज़ोरदार बहस होती थी (iframe नहीं, frame)। अगर यहाँ कोई frame जानता हो तो अच्छा लगेगा। AJAX आने से पहले मैं HTTP 204 का इस्तेमाल करके पेज रिफ्रेश किए बिना सर्वर को संदेश भेजने के तरीके खुद लिखता था। 2000 के शुरुआती दशक में image map भी बनाए थे image map संदर्भ: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/map। Dreamweaver में कई दिनों तक map boundaries खींचकर clickable देशों का नक्शा भी पूरा किया था। Dreamweaver templates में version control नहीं होता था, इसलिए अपडेट करते-करते बदलाव उड़ जाना और फिर उन्हें वापस न ला पाना आम बात थी। input type=image से इमेज पर क्लिक की गई जगह backend में हैंडल करने की याद भी है। Motion JPEG का इस्तेमाल करके पेज पर streaming updates भी लागू किए थे, और आज भी यह Chrome में चलता है, जबकि Firefox में थोड़ा अस्थिर है। IE में PNG alpha blending की समस्या सुलझाने के लिए कई तरीके आज़माए, आखिर में कुछ समय तक ActiveX version भी चलाया, लेकिन फिर flat design का दौर आ गया और उसकी ज़रूरत ही खत्म हो गई। navigation के लिए JAVA, Flash, Silverlight तक सब इस्तेमाल किया। spacer GIF, conditional comments, और Firebug आने के बाद dev environment कितना आसान हो गया, यह भी बहुत साफ़ याद है। समय ऐसे बीता कि पता ही नहीं चला कब बूढ़ा हो गया

  • पुराने frames के साथ web software बनाया था और मुझे कोई खास दिक्कत महसूस नहीं हुई। लोग accessibility की बात करते हैं, लेकिन असल में समस्या कहाँ थी, यह आज तक ठीक से समझ नहीं पाया

  • IE6 के सारे अजीब bugs और limitations के बीच support माँगने वाले clients के लिए काम करने की याद है। designer जब Photoshop से rounded corners वाला design भेजता था, तो हर बार आह निकलती थी। उस समय responsive का मतलब असल में desktop की कई resolutions को संभालना भर था। corners को images में काटकर table cells में हाथ से रखना पड़ता था। ऐसी मेहनत करते-करते developer की मानसिक ताकत काफ़ी बढ़ जाती थी

  • वह समय याद है जब Photoshop slice tool से इमेज को बारीकी से काटकर gif में export करते थे और फिर HTML tables में एकदम सही जगह बैठाने की कोशिश करते थे। 800x600 resolution के लिए optimized designs बहुत आम थे। लगता है ये सारी यादें समय में घुलकर गायब हो गईं

  • आज भी कुछ बार-बार देखने वाली साइटें frames इस्तेमाल करती हैं। Open Group/POSIX साइट अभी भी frames का उपयोग करती है

  • frames का इस्तेमाल करके एक web chat बनाया था। ऊपर endlessly loading chat window थी, नीचे input box, और message भेजते समय 204 से refresh रुकवाता था। ऊपर वाले frame में ऐसा छोटा script भी भेज सकते थे जो user list वाले दाएँ frame को reload कर दे। 2000 के आसपास इसे कुछ दोस्तों के साथ इस्तेमाल किया था

• पहले मैंने सिर्फ marquee tag से animation बनाने वाली एक साइट बनाई थी। JavaScript बिल्कुल इस्तेमाल नहीं किया था, और जिसे भी दिखाओ, सब चौंक जाते थे https://udel.edu/~ianozi/

  • marquee tag देखे हुए शायद 20 साल हो गए, और मुझे लगता है कि direction parameter से vertical scroll भी किया जा सकता है, यह बात मुझे पता ही नहीं थी

• marquee tag की मेरी पसंदीदा ट्रिक उसे nested करके इस्तेमाल करना है। directions अलग रखो, और inner marquee की speed उलटी दिशा वाली speed के बराबर कर दो, तो कुछ पल रुककर फिर चलने जैसा effect मिलता है। speed अलग-अलग रखो तो और जटिल movement भी बनाई जा सकती थी। याद है कि इसे ठीक से चलाने के लिए inner marquee पर max width सेट करनी पड़ती थी

• एक समय blink tag से इतनी चिढ़ थी कि अपने browser (शायद Netscape) की binary file में 'blink' को 'blonk' से बदल दिया था, ताकि वह अब blink न करे

  • मैं इस तरह के binary tweaks ज़्यादातर Slack client में करता हूँ (Electron app होने की वजह से बहुत आसान है)। जो features मुझे पसंद नहीं होते (जैसे notification छिपाना, typing signal रोकना वगैरह), उन्हें आसानी से हटा सकता हूँ

  • अगर किसी ने blonk tag इस्तेमाल किया हो, तो शायद अब blonking भी पैदा हो गया होगा। काफ़ी मज़ेदार hack लगता है

  • binary patching काफ़ी मज़ेदार है। मैं __gnu_warning को __gnu_whining में बदलकर gets() वाले warning messages हटाया करता था। buffer overrun हो जाए तो हो जाए, जल्दी-जल्दी लिखे गए code में उसकी फ़िक्र नहीं करता था

• HTML injection testing में marquee tag बहुत काम का है। लगभग कोई इसका इस्तेमाल नहीं करता, इसलिए हमला कामयाब हुआ या नहीं, यह तुरंत समझ में आ जाता है। non-technical लोगों को भी जब ऐसा टेक्स्ट हिलता-चलता दिखाओ जो नहीं चलना चाहिए, तो वे bold जैसी चीज़ों की तुलना में ख़तरे को बहुत जल्दी समझ लेते हैं

  • HTML sanitization करते समय, easter egg की तरह सिर्फ marquee को whitelist में छोड़ देता हूँ और बाक़ी लगभग सब ब्लॉक कर देता हूँ

  • मैं Hacker News को एक custom aggregator से देखता हूँ, और इस पोस्ट से पता चला कि वह HTML injection के प्रति vulnerable है। 2020 की पोस्ट स्क्रीन पर marquee की तरह घूम रही थी

• “The beast shall come forth surrounded by a roiling cloud of vengeance. The house of the unbelievers shall be razed and their tags shall blink until the end of days.” – The Book of Mozilla, 12:10 (about:mozilla) यह पंक्ति देखकर लगता है कि अब Mozilla भी धीरे-धीरे गायब हो रहा है। कुछ-कुछ प्रलय जैसा एहसास होता है

  • मैं अभी भी Firefox को default browser की तरह इस्तेमाल करता हूँ

• कॉलेज हॉस्टल फ्लोर की वेबसाइट अपने कंप्यूटर पर चलाने का समय याद आता है। marquee में 997 शब्दों का लंबा संदेश डाल रखा था, जिसमें लड़कियों, उदासी, दर्शन वगैरह पर लगातार बकबक लिखी थी। संदेश के अंत में ! लगा था, और वही hidden page का link था। आखिरकार किसी ने view source में वह लंबा टेक्स्ट पढ़ते-पढ़ते वह page ढूँढ़ ही लिया

• मेरा एक दोस्त हमेशा अपने middle name को blink tag में लपेटकर escaping की कमी और संभावित xss को जल्दी टेस्ट करता था। पहले ऐसे सीधे-सादे तरीके भी vulnerabilities ढूँढ़ने में काफ़ी असरदार थे

• यह comment इस समय निर्माणाधीन है। अपडेट देखने के लिए बार-बार आते रहें

  • visitor counter और guestbook कहाँ हैं, यह जानने की जिज्ञासा है

  • यह पेज किस browser के लिए optimized है, यह जानने की जिज्ञासा है

  • [NEW] लगाना मत भूलिए