Emmet: HTML को संक्षेप में बदलें

को निर्मित 13 अक्तू॰ 2012  ·  25टिप्पणियाँ  ·  स्रोत: emmetio/emmet

कन्वर्टर बनाएं जो HTML ब्लॉक को पार्स करेगा और इसे एक्सप्रेशन में बदल देगा (काउंटर- "संक्षिप्त नाम का विस्तार करें")।

इस मुद्दे का समर्थन करना चाहते हैं? उस पर एक इनाम पोस्ट करें! हम बाउंटीसोर्स के माध्यम से इनाम स्वीकार करते हैं।

Enhancement

सबसे उपयोगी टिप्पणी

मैंने निर्माता/निर्माताओं को एक ईमेल भेजा है, लेकिन मैं अनुरोध को ऊपर उठाने के लिए यहां दोबारा पोस्ट कर रहा हूं:


नमस्ते,

सबसे पहले, आपके महान कार्य के लिए धन्यवाद, आपने बहुत अच्छा काम किया है, मैं वास्तव में परिणाम की प्रशंसा करता हूं।

आपके कार्यक्रम के बारे में मेरा एक विचार था:

क्या 'रिवर्स कोडिंग' करना संभव है?

यानी ले लो

<div id="container">
    <div class="header"></div>
    <div class="body">
        <div class="title">Title</div>
        <div class="text">Text</div>
    </div>
    <div class="footer"></div>
</div>

और इसे रूपांतरित करें

कंटेनर>.हेडर+.बॉडी>.शीर्षक{शीर्षक}+.पाठ{पाठ}^.पाद लेख

??

क्यों? ठीक है, सबसे पहले, दूसरे कोड के साथ काम करना आसान है, और फिर इसे वापस सामान्य में लाना। और, सबसे महत्वपूर्ण और, यदि संभव हो तो क्लाइंट साइड जावास्क्रिप्ट का उपयोग करना - या यहां तक ​​​​कि स्वयंसेवकों द्वारा सर्वर साइड कोड लिखने के लिए, _directly_, एम्मेट कोड एचटीएमएल पेजों में।

उस प्रभाव के बारे में सोचें जो होगा।

खैर, यह सिर्फ एक विचार है :)

एक बार फिर धन्यवाद,

मज़ा लें,
जियानिस,
एथेंस, ग्रीस, यूरोप, विश्व।


तो, वह है, इस विचार को ऊपर उठाना: +1: और इसे पूरा करने की उम्मीद है :)

सभी 25 टिप्पणियाँ

मैंने निर्माता/निर्माताओं को एक ईमेल भेजा है, लेकिन मैं अनुरोध को ऊपर उठाने के लिए यहां दोबारा पोस्ट कर रहा हूं:


नमस्ते,

सबसे पहले, आपके महान कार्य के लिए धन्यवाद, आपने बहुत अच्छा काम किया है, मैं वास्तव में परिणाम की प्रशंसा करता हूं।

आपके कार्यक्रम के बारे में मेरा एक विचार था:

क्या 'रिवर्स कोडिंग' करना संभव है?

यानी ले लो

<div id="container">
    <div class="header"></div>
    <div class="body">
        <div class="title">Title</div>
        <div class="text">Text</div>
    </div>
    <div class="footer"></div>
</div>

और इसे रूपांतरित करें

कंटेनर>.हेडर+.बॉडी>.शीर्षक{शीर्षक}+.पाठ{पाठ}^.पाद लेख

??

क्यों? ठीक है, सबसे पहले, दूसरे कोड के साथ काम करना आसान है, और फिर इसे वापस सामान्य में लाना। और, सबसे महत्वपूर्ण और, यदि संभव हो तो क्लाइंट साइड जावास्क्रिप्ट का उपयोग करना - या यहां तक ​​​​कि स्वयंसेवकों द्वारा सर्वर साइड कोड लिखने के लिए, _directly_, एम्मेट कोड एचटीएमएल पेजों में।

उस प्रभाव के बारे में सोचें जो होगा।

खैर, यह सिर्फ एक विचार है :)

एक बार फिर धन्यवाद,

मज़ा लें,
जियानिस,
एथेंस, ग्रीस, यूरोप, विश्व।


तो, वह है, इस विचार को ऊपर उठाना: +1: और इसे पूरा करने की उम्मीद है :)

मेरा अपवोट करें! कल्पना कीजिए कि क्या हम HTML में पृष्ठों को कोड कर सकते हैं, इसे एम्मेट में अनुवाद कर सकते हैं, और फिर PHP कोड लिख सकते हैं जिसमें एम्मेट कोड शामिल है जो गतिशील रूप से HTML में विस्तारित हो जाता है।

:हाथ: मेरा ड्राइव-बाय टू सेंट:

@icb931023 पहले मैंने सोचा कि आपने जो कहा वह अच्छा लगता है लेकिन वास्तव में, इससे क्या लाभ होगा? आपके PHP को निश्चित रूप से आपके HTML का प्रतिनिधित्व करने वाली एक छोटी स्ट्रिंग से निपटना होगा, लेकिन फिर इसके साथ और अधिक काम करना होगा।

मुझे लगता है कि टाइपो के बारे में ज्यादा चिंता करने की ज़रूरत नहीं होगी (उदाहरण के लिए एक बंद टैग में एक लापता स्लैश की तरह) क्योंकि सभी टैग आपके लिए जेनरेट किए जाएंगे, लेकिन आप विस्तारित एचटीएमएल के साथ काम कर रहे हैं जो मैं मान रहा हूं (यद्यपि इसके साथ शुरू हो रहा है संक्षिप्त वाक्यविन्यास) इसलिए मुझे यकीन नहीं है कि यह इसके लिए एक मजबूत तर्क है या नहीं। या हो सकता है कि मैं यह मानने में गलत हूं कि आप संक्षिप्त/संक्षिप्त वाक्यविन्यास में पूरी तरह से काम नहीं करेंगे।

मैं यह चाहता हूँ। मैं सिर्फ एक ठोस उपयोग का मामला नहीं देख सकता। उदाहरण के लिए यह सीएसएस प्रीप्रोसेसिंग जितना स्पष्ट रूप से फायदेमंद नहीं है।

यह एक अलग कहानी होगी यदि ब्राउज़र/टेम्पलेटिंग इंजन एम्मेट सिंटैक्स को समझते हैं। यह दिलचस्प होगा!

मम्म, इसे बनाने के लिए जेएस लाइब्रेरी बनाने के लिए काफी दिलचस्प है;)

यहाँ ग्राहक के दृष्टिकोण से एक शुरुआत है; एम्मेट की मूंछें । योगदान करने के लिए स्वतंत्र महसूस करें।

@वबट्टा :)

कोई सुधार?

यह भी पसंद आएगा। मैं एक स्टाइलगाइड पृष्ठ का उपयोग करता हूं जहां मैं अपने सभी तत्वों को संग्रहीत करता हूं, इसे प्रबंधित करने के लिए मेरे पास तत्वों का प्रतिनिधित्व करने के लिए एम्मेट स्ट्रिंग्स का उपयोग करके एक विशाल JSON फ़ाइल है और मैंने उन्हें एक पृष्ठ पर थूकने के लिए एक जावास्क्रिप्ट टूल बनाया है। लेकिन अभी जब भी कुछ नया बनाया जाता है, तो इस फ़ाइल को अद्यतित रखने के लिए मुझे उन सभी को हाथ से बदलना होगा। एचटीएमएल को एम्मेट स्ट्रिंग में कनवर्ट करने का एक तरीका पसंद करेंगे।

_बम्प_

मुझे HTML को एम्मेट में बदलने में सक्षम होना अच्छा लगेगा। मेरे द्वारा अक्सर उपयोग किए जाने वाले कोड ब्लॉक की चीट शीट बनाने के लिए यह बहुत उपयोगी होगा।

कोर्इ बदलाव?

@Kcko कोई अपडेट नहीं। इस सुविधा की मेरे लिए सबसे कम प्राथमिकता है

यह एक अच्छी विशेषता होगी। एम्मेट/ज़ेन सिंटैक्स में पदानुक्रम को पढ़ना आसान होता है और कभी-कभी HTML खंड डिज़ाइन को पुनरावृत्त करते समय संक्षेप में एक प्रकार का मोटा-ड्राफ्ट होना सहायक होता है।

एक बेहतरीन फीचर होगा!
*n फीचर के साथ कई ब्लॉक बनाने की कल्पना करें और बाद में पता करें कि आपको ब्लॉक को बदलने की जरूरत है। अब आपको ब्लॉक्स को हटाना है और एम्मेट कोड को फिर से लिखना है। वापस जाना, केवल एक भाग को संशोधित करना और फिर इसे फिर से उत्पन्न करना बहुत तेज़ होगा!

@MarcoWilli Emmet के पास मौजूदा कोड को जल्दी से संशोधित करने के लिए पर्याप्त तरीके हैं:

  • (संक्षिप्त नाम के साथ लपेटें) [http://docs.emmet.io/actions/wrap-with-abbreviation/]
  • (अपडेट टैग)[http://emmet.io/blog/beta-v1-1/]

आपको यह भी ध्यान रखना चाहिए कि यदि आपके दोहराए गए तत्वों में अलग-अलग सामग्री है (जैसा कि आपने "बाद में संशोधित करें" के रूप में वर्णित किया है), तो उल्टा संक्षिप्त नाम स्ट्रिंग वैसा नहीं होगा जैसा आपने कोड उत्पन्न करने के लिए उपयोग किया था।

मेरी ओर से अपवोट करें। एम्मेट के लिए नया और यह मेरे कौशल में सुधार करने का एक शानदार तरीका होगा।

वास्तव में इस सुविधा की आवश्यकता है, यहाँ मेरा मामला है:

मुझे कुछ ब्लॉक मिलते हैं जैसे
<record class="main1 text"> <field name id="1">1</field> <field name id="2">2</field> <field name id="3">3</field> <field name id="4">4</field> </record>

इसलिए मैं पहले वाले का उपयोग करके अधिक रिकॉर्ड बनाना चाहता हूं, इसलिए अब मैं रिकॉर्ड संक्षिप्त नाम प्राप्त करने के लिए संक्षेप को पुन: पेश करने का प्रयास करता हूं और फिर मैं (record...)*10 जैसा कुछ टाइप करता हूं

धन्यवाद

@chermed ... या आप बस कोड स्निपेट को कॉपी-पेस्ट कर सकते हैं। कृपया ध्यान दें कि आपके द्वारा प्रदान किया गया कोड एक बहुत ही सरल लेकिन बहुत ही दुर्लभ उपयोग का मामला है। ज्यादातर मामलों में आप record>field[name=name1]{text1}+field[name=name2]{text2}+field[name=name3]{text3}+... संक्षेप जैसे कुछ के साथ समाप्त हो जाएंगे, जो बहुत उपयोगी नहीं है

हमारे पास एक माइक्रोसर्विस है जो एक टेम्पलेट + JSON ऑब्जेक्ट w/डेटा से एक HTML स्ट्रिंग प्रस्तुत करता है और प्रदान की गई HTML स्ट्रिंग के साथ POST अनुरोधों का जवाब देता है। HTTP प्रतिक्रिया में एक विशाल HTML स्ट्रिंग भेजने से हमारे एप्लिकेशन प्रवाह में बाधा उत्पन्न होती है।

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

@kizzlebot यह एक व्यवहार्य उपयोग के मामले की तरह लगता है, लेकिन आपको निम्नलिखित पर विचार करना चाहिए:

  • विशाल HTML को एम्मेट में परिवर्तित करना भी एक अड़चन हो सकता है, लेकिन इस मामले में सीपीयू की तरफ
  • क्या आउटपुट gzipping समस्या हल करता है?
  • क्लाइंट-साइड पर एम्मेट का विस्तार करने का मतलब है कि इसे रेंडरिंग के लिए एक विशेष रनटाइम की आवश्यकता होती है। तो, ऐसा लगता है कि आपके माइक्रोसर्विस की बिल्कुल भी आवश्यकता नहीं है क्योंकि आप क्लाइंट को अपना खुद का टेम्प्लेट और JSON डेटा भेज सकते हैं और इसे अपने रनटाइम का उपयोग करके प्रस्तुत कर सकते हैं

@kizzlebot मैसेजपैक और/या अपाचे एवरो क्यों नहीं?

@sergeche अधिक विशिष्ट होने के लिए, "रेंडर" शब्द का उपयोग करने के लिए गलत हो सकता है। हम एक माइक्रोसर्विस के माध्यम से एक पीडीएफ दस्तावेज़ बनाने के लिए एचटीएमएल का उपयोग करते हैं जो केवल एचटीएमएल पेलोड प्राप्त करता है और इसे पीडीएफ में परिवर्तित करता है। इसलिए, यदि एचटीएमएल से एम्मेट संक्षेप में जाना संभव होगा, तो एमेट संक्षेप प्राप्त करने वाला क्लाइंट वर्तमान एम्मेट एनपीएम मॉड्यूल का उपयोग करके इसे आसानी से विस्तारित करने में सक्षम होना चाहिए। हमें रेंडर करने के लिए रनटाइम की आवश्यकता नहीं होगी क्योंकि html क्लाइंटसाइड पर कभी भी रेंडर नहीं होता है। तार के ऊपर से गुजरने के लिए हमें बस एक कॉम्पैक्ट पेलोड की आवश्यकता है।

मैं नमूना साइटों का निर्माण करना चाहता हूं और प्रेजेंटेशन टाइपिंग को तेज करने के लिए उन्हें वापस एम्मेट स्निपेट में बदलना चाहता हूं (और यह प्रक्रिया डेमो एम्मेट है)।

संभवतः हाइपरस्क्रिप्ट/जेएसएक्स और एएसटी का उपयोग करना संभव है।

इसमें काफी संभावनाएं हैं।
दूसरे दिन मैं जेड और एचएएमएल जैसे एचटीएमएल ढांचे के साथ खिलवाड़ कर रहा था और मुझे लगा कि वे अस्पष्ट एचटीएमएल सिंटैक्स के लिए एक महान प्रतिस्थापन थे। लेकिन मैं अपनी परियोजनाओं के लिए उनके पास नहीं जा सका क्योंकि इसके लिए बस उस अतिरिक्त स्थापना और रूपांतरण की आवश्यकता थी। मैंने हमेशा एम्मेट का उपयोग किया जो लगभग उतना ही अच्छा था (यह केवल थोड़ा कम समर्थन करता है और स्थापना की आवश्यकता नहीं है)।
लेकिन आज जब मैं साइट टेम्पलेट बना रहा था, मैंने एम्मेट में लिखते समय इंडेंटेशन का उपयोग करने का निर्णय लिया और मैं इसके साथ आया:

.navbar>
  .logo+
  ul.menu_v>
    li.menu_itm*2+
    li.menu_item.dropd
  ^
  ul.menu_v>
    li.item_dd

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

आपका मतलब वेबकंपोनेंट्स, हाइपरस्क्रिप्ट, JSX और पग है? खैर, इम्हो इसे पढ़ना बहुत आसान नहीं है।

एम्मेट का उपयोग ज्यादातर त्वरित प्रोटोटाइप और कमांड पूरा करने / मचान के लिए किया जाता है जैसे कि PhpStorm प्रोजेक्ट्स में। तो एम्मेट सिंटैक्स आम तौर पर किसी भी प्रोजेक्ट में संग्रहीत नहीं होता है, केवल अंतिम एचटीएमएल।

क्या यह पृष्ठ उपयोगी था?
0 / 5 - 0 रेटिंग्स