Vanilla JavaScript से DOM manipulation को पूरी तरह सीखें

 (phuoc.ng)
6 पॉइंट द्वारा GN⁺ 2023-11-07 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • यह लेख Vanilla JavaScript का उपयोग करके Document Object Model (DOM) manipulation में महारत हासिल करने पर चर्चा करता है.
  • Angular, VueJS, React, Solid, Svelte जैसे आधुनिक tools के उपयोग के बावजूद, यह web development के लिए browser DOM API को समझने के महत्व पर ज़ोर देता है.
  • लेखक basic browser API, आसानी से समझ आने वाले examples, real-time demos, tips और best practices, real-world use cases, तथा modern browsers और Internet Explorer के साथ compatibility सहित संसाधनों का एक संग्रह प्रदान करते हैं.
  • इन संसाधनों को तीन स्तरों में बाँटा गया है: basic, intermediate, और advanced.
  • basic स्तर में user's color scheme preference के अनुसार favicon को dynamically बदलना, webpage का reading time निकालना, और CSS root variables को dynamically update करना जैसे कार्य शामिल हैं.
  • intermediate स्तर में Shift+Tab key combination का उपयोग करके text area में indentation हटाना, full-screen mode में जाना, और spin input बनाना जैसे कार्य शामिल हैं.
  • advanced स्तर में custom cursor बनाना, HTML strings को sanitize करना, और custom scrollbar बनाना जैसे कार्य शामिल हैं.
  • लेखक modal खोलते समय layout shift से बचने और text node का bounding rectangle प्राप्त करने जैसे tips भी देते हैं.
  • लेख का समापन frontend technical content पर लेखक के newsletter की subscription invitation के साथ होता है.

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

1 टिप्पणियां

 
GN⁺ 2023-11-07
Hacker News की राय
  • यह लेख DOM manipulation को पूरी तरह मास्टर करने के लिए कई तरह के उदाहरण देता है।
  • उदाहरणों को विस्तारपूर्ण और कार्यात्मक UI काम के लिए सराहा गया है।
  • कुछ उपयोगकर्ताओं को लगा कि बुनियादी DOM API के साथ काम करना उबाऊ है और उसमें गलती होने की संभावना रहती है, इसलिए वे Svelte जैसे framework इस्तेमाल करने लगे।
  • खास कोड से जुड़ी संभावित security vulnerability पर चर्चा है, और whitelist के उपयोग का सुझाव दिया गया है।
  • कुछ उपयोगकर्ताओं ने कोड में अनावश्यक दोहराव की ओर इशारा किया और अधिक efficient विकल्प सुझाए।
  • कुछ उदाहरण ऐसे पुराने API का उपयोग करते हैं, जबकि उनके अधिक सुविधाजनक modern versions उपलब्ध हैं।
  • "text area auto-expand" तकनीक कुछ लोगों को पुरानी लगी, और नए CSS property या hidden mirror element के उपयोग का सुझाव दिया गया।
  • इस लेख ने बुनियादी DOM manipulation की समझ की उपयोगिता पर चर्चा को बढ़ावा दिया।
  • कुछ उपयोगकर्ताओं ने वेब development के शुरुआती दिनों को याद किया, जब सब कुछ "vanilla" JS में लिखा जाता था।
  • यह सुझाव भी दिया गया कि इन उदाहरणों को package करके इस तरह उपलब्ध कराया जाए कि उन्हें आसानी से update और उपयोग किया जा सके, जो copy-paste से बेहतर होगा।