Speed up your HTML and CSS workflow with Emmet and Pug

Speed up your HTML and CSS workflow with Emmet and Pug

आधुनिक वेबसाइटों को बहुत सारे HTML कोड की आवश्यकता होती है। अलग-अलग विचारों वाले राज्यों को अलग-अलग लेआउट दिए गए हैं और एक साधारण पाठ संपादक वाले राज्यों को बनाना मुश्किल हो सकता है। स्वाभाविक रूप से, HTML के बहुत सारे उपकरण उपलब्ध हैं। यहां हम दो सबसे लोकप्रिय उपकरणों, एममेट और पग पर एक नज़र डालते हैं।

हालाँकि, आपको अभी भी अपने HTML को इन दो शक्तिशाली समय बचाने वालों का उपयोग करने के लिए जानना होगा। इसलिए, गोता लगाने से पहले, सुनिश्चित करें कि आप लोकप्रिय शब्दार्थ HTML टैग्स का सही उपयोग करते हैं। HTML प्रोटोटाइप का उपयोग करने के लिए हमारा गाइड देखें।

HTML को तुरंत जनरेट करें

एक साथ बहुत सारे HTML लिखने पर, प्रत्येक टैग को हाथ से लिखना बहुत थकाऊ और त्वरित हो सकता है। उदाहरण के लिए, लिंक की सूची लिखते समय, हमें यह सुनिश्चित करना होगा कि सभी <ul> <li> और <a> टैग सही स्थानों पर खुले और बंद हों। अन्यथा, लिंक काम नहीं कर सकता है और पूरे पृष्ठ का लेआउट गड़बड़ हो जाएगा।

एम्मेट का उपयोग कैसे करें

आप एम्मेट की प्रतिभा का उपयोग यह सुनिश्चित करने के लिए कर सकते हैं कि आप ऐसा होने की संभावना कम कर सकते हैं। यह एक उपकरण है जो आपको टाइप करने में समय बचाएगा और नाटकीय रूप से आपके HTML और CSS वर्कफ़्लो में सुधार करेगा।

एम्मेट आपको सीएसएस-जैसे चयनकर्ता में टाइप करके तत्वों को बनाने की अनुमति देता है, फिर उस तत्व को आम एचटीएमएल में पार्स और विस्तारित करता है। बेल्लो एम्मेट में बनाया गया एक मूल तत्व है।

एम्मेट इस तत्व का पता लगाएगा, इसे पार्स करेगा, और नीचे दिखाए अनुसार तत्व को मानक HTML में बदल देगा।

एम्मेट तत्वों पर एक त्वरित नज़र से पता चलता है कि गुणा को ली (3) से लिया जाता है और प्रत्येक लीक को उचित संख्या (3) के बाद एक अध्याय कहा जाता है।

उन वर्णों की संख्या नोट करें जिनमें एम्मेट तत्व और मानक HTML की संख्या है। यहां तक ​​कि इस छोटे स्निपेट से पता चलता है कि एम्मेट शॉर्टहैंड का उपयोग करके कितना समय बचाया जा सकता है।

एम्मेट को भी संदर्भ के बारे में पता है। उदाहरण के लिए, यदि हम एक <तालिका> का संपादन कर रहे हैं, तो संभव है कि हमें भरे जाने के लिए <tr> तत्व (ये पंक्तियाँ हों) की आवश्यकता हो। हमें सिर्फ यह बताना है कि हम कितना चाहते हैं।

यह केवल एक छोटा सा उदाहरण है कि एम्मेट क्या कर सकता है, लेकिन बहुत सारे अतिरिक्त कॉन्फ़िगरेशन विकल्प हैं। इसमें संपादन सीएसएस, बीईएम (ब्लॉक एलिमेंट मॉडिफायर) कक्षाएं और लोरम एप्सॉम जनरेटर बनाना शामिल है।

यह भी ध्यान देने योग्य है कि अधिकांश कोड संपादकों के पास एक प्लगइन है जो उनके द्वारा निर्मित या समर्थित है। आप इसके बारे में अधिक जानकारी Emmet प्रलेखन पृष्ठ पर पा सकते हैं।

गतिशील सामग्री के लिए पग का उपयोग करें

हालांकि, एम्मेट स्थिर सामग्रियों के लिए आदर्श है। लेकिन क्या होगा यदि सामग्री को अधिक गतिशील होने की आवश्यकता है? उदाहरण के लिए, हमें एक व्यक्तिगत होमपेज, एक जटिल ऑर्डर टेबल या जेनेरिक HTML ब्लॉकों की प्रतिलिपि बनाने की आवश्यकता हो सकती है।

यह सब जावास्क्रिप्ट में संभव है, लेकिन इस सामग्री को प्री-रेंडर करने से उपयोगकर्ता के ब्राउज़र पर भरोसा किए बिना हमें अतिरिक्त गति मिलती है।

स्टेप फॉरवर्ड स्टेप यह HTML के लिए एक टेम्प्लेट जनरेटर है। आप “.pug” प्रारूप में एक पृष्ठ लिख सकते हैं और पग इसे पढ़ेगा, कुछ गतिशील डेटा को इंजेक्ट करेगा, और मानक HTML लौटाएगा।

नीचे दिया गया उदाहरण है कि आप उसी HTML को Emmet उदाहरण (ऊपर) उत्पन्न करने के लिए पग में कैसे कोड करेंगे।

पग फाइलें केवल नेस्टिंग को इंगित करने के लिए इंडेंटेशन का उपयोग करती हैं। मानों को एक साथ कई HTML बनाने के लिए पुनरावृत्त किया जा सकता है। इन “.pug” फ़ाइलों को एक परियोजना में कई बार पुन: उपयोग करने के लिए डिज़ाइन किया गया है।

पग को एनपीएम पैकेज मैनेजर से स्थापित किया जा सकता है, लेकिन यदि आप पग के साथ शुरू होने के बारे में अधिक जानकारी चाहते हैं, तो वेबसाइट पर जाएं।

क्या आप वेबसाइट डिजाइन के बारे में अधिक जानना चाहते हैं? फिर वेबसाइट डिजाइनरों और डेवलपर्स के लिए दुनिया की सबसे ज्यादा बिकने वाली पत्रिका नेट की सदस्यता लें।

Leave a Comment

Your email address will not be published.