उसके लिए आपको JavaScript की ज़रूरत नहीं है

 (htmhell.dev)
3 पॉइंट द्वारा GN⁺ 2023-12-03 | 1 टिप्पणियां | WhatsApp पर शेयर करें

वेब डेवलपमेंट का मुख्य सिद्धांत: न्यूनतम विशेषाधिकार का सिद्धांत

  • वेब डेवलपमेंट के मुख्य सिद्धांतों में से एक, 'न्यूनतम विशेषाधिकार का सिद्धांत', का मतलब है किसी दिए गए उद्देश्य के लिए उपयुक्त सबसे निम्न-स्तर की भाषा चुनना.
  • HTML, CSS, JS में HTML सबसे अधिक पसंद किया जाता है, उसके बाद CSS, और अंत में JS आता है.
  • JS सबसे बहुमुखी है, लेकिन इसमें लोड फेल होना, अतिरिक्त resources की खपत, accessibility समस्याएँ जैसी जोखिम भी हैं.

कस्टम स्विच

  • डिज़ाइन आवश्यकताओं के अनुसार सामान्य checkbox के बजाय कस्टम स्विच लागू करते समय, JS की जगह :checked pseudo-class का उपयोग करते हुए HTML और CSS से इसे बनाया जा सकता है.
  • ब्राउज़र label के अंदर मौजूद input element को अपने-आप जोड़ देता है और उसे clickable बनाता है, जिससे अतिरिक्त JS handler के बिना भी toggle फ़ंक्शनैलिटी मिलती है.

नेटिव ऑटो-कम्प्लीट फ़ीचर: Datalist

  • JavaScript के बजाय ब्राउज़र की built-in सुविधा datalist का उपयोग करके ऐसा फ़ीचर बनाया जा सकता है जो उपयोगकर्ता के टाइप करते ही options को अपने-आप filter करके दिखाए.
  • उपयोगकर्ता अपनी इच्छित value दर्ज कर सकता है, या ब्राउज़र द्वारा जोड़े गए dropdown icon पर क्लिक करके सभी options देख सकता है.

नेटिव color picker

  • जटिल JS से बने color picker के बजाय, एक ही HTML line से लागू होने वाला नेटिव color picker इस्तेमाल किया जा सकता है.
  • Chrome-आधारित ब्राउज़रों में स्क्रीन पर कहीं से भी रंग चुनने की अतिरिक्त सुविधा भी मिलती है.

accordion

  • details और summary elements का उपयोग करके सामग्री को तब तक छिपाया जा सकता है जब तक उपयोगकर्ता को उसकी ज़रूरत न हो, और इससे पेज की संरचना बेहतर होती है.
  • open attribute का उपयोग करके accordion items में से किसी एक को डिफ़ॉल्ट रूप से खुला रखा जा सकता है.

इंटरैक्टिव modal

  • dialog element का उपयोग करके ऐसा modal बनाया जा सकता है जो उपयोगकर्ता को जानकारी दे या उससे input मांगे.
  • JS का उपयोग modal खोलने के लिए किया जाता है, लेकिन बाकी सब नेटिव HTML और CSS से संभाला जा सकता है.

निष्कर्ष

  • यह लेख दिखाता है कि कम JS का उपयोग करके, और CSS व HTML की क्षमताओं का बेहतर उपयोग करके, अधिक बेहतर वेबसाइट बनाई जा सकती है.
  • accessibility को ध्यान में रखते हुए नए implementation तरीकों का परीक्षण करना महत्वपूर्ण है.

GN⁺ की राय

  • इस लेख का सबसे महत्वपूर्ण बिंदु यह है कि वेब डेवलपमेंट में JS पर निर्भर हुए बिना HTML और CSS की क्षमताओं का अधिकतम उपयोग करके performance और accessibility को बेहतर बनाया जा सकता है.
  • वेब डेवलपर्स के लिए यह इसलिए दिलचस्प है क्योंकि यह उन फ़ीचर्स को, जिन्हें पहले केवल JS से संभव माना जाता था, अधिक सरल और कुशल तरीकों से लागू करने के नए तरीके सुझाता है.

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

1 टिप्पणियां

 
GN⁺ 2023-12-03
Hacker News टिप्पणियाँ

  • यह इंगित किया गया कि JavaScript की बेहतर compatibility की वजह से कुछ खास क्षेत्रों में उसके उपयोग का उल्लेख छूट गया था

    • नए JavaScript को transpiling के जरिए इस्तेमाल किया जा सकता है, लेकिन CSS और HTML की missing features को polyfill करना कहीं अधिक कठिन है और कभी-कभी असंभव भी
    • appearance property के उपयोग पर MDN कई सावधानियाँ बताता है, खासकर appearance: none के उपयोग के लिए thorough testing की सिफारिश करता है
    • datalist Firefox Android में काम नहीं करता और सिर्फ एक साधारण input box की तरह दिखता है
    • color picker बहुत non-standard है, इसलिए अधिकांश business में इसका उपयोग करना कठिन है
    • लेख खुद भी details और dialog की consistency की कमी को स्वीकार करता है
    • उम्मीद है कि कभी ब्राउज़र इन features को consistently support करेंगे, लेकिन तब तक इन्हें मुख्यतः personal projects में ही इस्तेमाल करेंगे

  • इस बात पर हैरानी जताई गई कि 2023 में भी forms और user data input से जुड़ी सामान्य user experience (UX) समस्याएँ बनी हुई हैं

    • समझ नहीं आता कि यह समस्या अब तक क्यों हल नहीं हुई
    • XForms के जरिए इसे एक बार में हल करने की कोशिश हुई थी, लेकिन ब्राउज़रों में इसे implement नहीं किया गया, और उसकी जगह CSS/JS component frameworks ने सीमित form elements का set दिया

  • datalist के बारे में पहले पता नहीं था, लेकिन लगता है कि यह Chrome Android में भी ठीक से काम नहीं करता

    • keyboard में options दिखते हैं, लेकिन mobile web UI में यह feature पहली बार देखा है, और भरोसा नहीं कि आम user समझ पाएँगे कि इसे कैसे इस्तेमाल करना है
    • Firefox Android में इसका बिल्कुल support नहीं है

  • scroll-behavior: smooth का उपयोग करके native smooth scrolling, scroll-snap का उपयोग करके native carousel, और scroll-based animations का उल्लेख

    • सलाह दी गई कि इन features का उपयोग सीमित रखा जाए और सावधानी से किया जाए, क्योंकि इनके अक्सर नकारात्मक side effects होते हैं

  • <details> का एक फायदा यह है that Ctrl+F से उसके अंदर की सामग्री खोजी जा सकती है, जबकि JavaScript accordion को खोला नहीं जा सकता, लेकिन <details> को खोला जा सकता है

  • यह राय दी गई कि datalist internal tools के अलावा उचित विकल्प नहीं है

    • इसके defaults अच्छे नहीं हैं, styling बदली नहीं जा सकती, और जब styling या behavior बदलने में सीमाएँ हों, तब JavaScript का उपयोग अक्सर एकमात्र विकल्प होता है

  • यह राय दी गई कि HTML standard का पालन करने पर सब कुछ consistent रहता है और accessibility या translation जैसी चीज़ों पर इसे आसानी से लागू किया जा सकता है

    • यह भी इंगित किया गया कि modern sites dynamically pages load करती हैं, इसलिए back button तक काम नहीं करता

  • यह इंगित किया गया कि CSS का उपयोग web pages को पढ़ने में कठिन बनाने वाले tool के रूप में किया जा सकता है

    • यह राय दी गई कि हमें ऐसे browser की ओर लौटना चाहिए जहाँ layout और typography के हर पहलू पर user का नियंत्रण हो

  • web development के एक मुख्य सिद्धांत के रूप में "Rule of Least Power" का उल्लेख

    • एक developer ने कहा कि उसने इस सिद्धांत के बारे में कभी नहीं सुना, और जिज्ञासा जताई कि क्या frontend developers में ऐसे लोग हैं जो चीज़ों को यथासंभव सरल रखना चाहते हैं