🌴 📎 🍨 दृश्य स्टूडियो के लिए वेब आवश्यक एक्सटेंशन: लेस, ज़ेन कोडिंग, कॉफीस्क्रिप्ट और बहुत कुछ 👨🏻‍🎓 🚶🏾 🛋️

विजुअल स्टूडियो सामान्य रूप से अनुप्रयोगों के विकास के लिए वास्तव में एक बहुत बढ़िया उपकरण है (विशेष रूप से इस वाक्यांश की संपूर्ण विपणन शक्ति?) और विशेष रूप से वेब विकास। लेकिन विज़ुअल स्टूडियो की ताकत न केवल उन क्षमताओं में है, जो बॉक्स से बाहर हैं, बल्कि हजारों उपयोगी एक्सटेंशन की उपस्थिति में भी हैं। मेरे पसंदीदा एक्सटेंशन में से एक, जो LESS, Zen Coding और CoffeeScript के लिए समर्थन जोड़ता है, साथ ही इसमें कई अन्य विशेषताएं हैं, वेब एसेंशियल 2012 एक्सटेंशन ( डाउनलोड ) है, जिसके बारे में हम इस लेख में बात करेंगे।

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

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

लेकिन चलो वेब एसेंशियल की बहुत क्षमताओं पर चलते हैं।

सीएसएस काम

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

विक्रेता उपसर्ग CSS गुणों के नाम के लिए उपसर्ग हैं जो गैर-मानक गुणों के लिए ब्राउज़र निर्माताओं द्वारा जोड़े जाते हैं। विक्रेता उपसर्गों के उदाहरण हैं -moz, -ms, -webkit और –o। अक्सर, ब्राउज़र निर्माता पहले एक विक्रेता के उपसर्ग के साथ एक नई सीएसएस संपत्ति को लागू करते हैं, और फिर, संपत्ति के मानकीकरण के बाद, उपसर्ग के बिना इसके लिए समर्थन जोड़ते हैं। इसलिए, स्थिति तब उत्पन्न हो सकती है जब आपको एक ही संपत्ति को कई बार अलग-अलग ब्राउज़रों के लिए अलग-अलग विक्रेता उपसर्गों के साथ निर्दिष्ट करने की आवश्यकता होती है, और संभवतः, उपसर्ग के बिना संस्करण में भी।

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

#text { word-wrap: break-word; }

लेकिन हमेशा ऐसा नहीं था। IE8 में, यह कोड काम नहीं करेगा, हालांकि IE8 शब्द-आवरण संपत्ति द्वारा प्रदान की गई सुविधाओं का समर्थन करता है। ब्राउज़र के इस संस्करण के लिए, आपको वेंडर उपसर्ग के साथ वर्ड-रैप प्रॉपर्टी को निर्दिष्ट करना होगा: -ms-वर्ड-रैप।

 #text { -ms-word-wrap: break-word; word-wrap: break-word; }

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

अक्सर ऐसी परिस्थितियां होती हैं जब पहले से आवश्यक विक्रेता उपसर्ग वाले गुण मानक बन जाते हैं। लेकिन आपने अपनी परियोजना एक बार बनाई और आपको पता नहीं है कि संपत्ति मानक बन गई है। मान लें कि आपके पास एक शैली है जो -moz- रूपांतरित संपत्ति का उपयोग करती है।

 .foother { -moz-transform: rotate(10deg); }

ऐसा कोड केवल फ़ायरफ़ॉक्स में काम करेगा। और यह बहुत बुरा है। वेब एसेंशियल का उपयोग करते हुए, आप सीखेंगे कि आपको मानक ट्रांसफ़ॉर्म प्रॉपर्टी को जोड़ने की आवश्यकता है, साथ ही अन्य ब्राउज़रों के लिए वेंडर उपसर्गों के साथ गुण।

 .foother { -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg); -webkit-transform: rotate(10deg); transform: rotate(10deg); }

इसके अलावा, आप यह पता लगा सकते हैं कि कौन सी संपत्ति किस ब्राउज़र संस्करणों द्वारा उपयोग की जाती है। तो, वैल्यू रोटेट (<कोण>) के साथ रूपांतरण फ़ायरफ़ॉक्स 16, IE10 और ओपेरा 12.5 के साथ काम करता है।

A -webkit- वैल्यू रोटेट (<कोण>) क्रोम, सफारी 3.1 और उच्चतर के साथ-साथ ओपेरा 12 और उच्चतर के लिए काम करेगा।

कृपया ध्यान दें कि वेंडर उपसर्गों के साथ और बिना गुणों में भिन्न क्षमताएं और व्यवहार हो सकते हैं। चूंकि ब्राउज़र में पहले से लागू की गई संपत्ति का गैर-मानक संस्करण उस चीज से भिन्न हो सकता है जो उन्होंने स्वीकार की थी या मानक के रूप में स्वीकार करना चाहते थे।

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

इसके अलावा, वेब एसेंशियल का उपयोग करके, आप तुरंत पाई गई समस्याओं को हल कर सकते हैं और बड़ी सीएसएस फाइल को निम्न द्वारा अनुकूलित कर सकते हैं:

डुप्लिकेट गुण निकालें
स्कैन्ड मानक गुण जोड़ें
विक्रेता उपसर्गों के साथ लापता गुण जोड़ें
सभी गुणों को क्रमबद्ध करें

वेब अनिवार्यताओं की क्षमता विक्रेता उपसर्गों के साथ काम करने तक सीमित नहीं है। अन्य विशेषताओं में से जो मुझे वास्तव में पसंद हैं, आप DataURI में आसान छवि रूपांतरण के उदाहरण का उपयोग कर सकते हैं।

मान लीजिए कि आपकी परियोजना में किसी फ़ाइल के लिंक द्वारा डाली गई छवि है:

 .foother { background-image: url(themes/base/images/ui-bg_flat_0_aaaaaa_40x100.png); }

वेब एसेंशियल का उपयोग करते हुए, यह एक-क्लिक की छवि को बेस 64 में इनकोड किया गया है और इसे निम्नलिखित सीएसएस कोड में बदल दिया गया है:

 .foother { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAABkCAYAAAD0ZHJ6AAAAe0lEQVRoge3OMQHAIBAAMcC/kjdZJHTI0A4XBdkz86wfO18H3hRUBVVBVVAVVAVVQVVQFVQFVUFVUBVUBVVBVVAVVAVVQVVQFVQFVUFVUBVUBVVBVVAVVAVVQVVQFVQFVUFVUBVUBVVBVVAVVAVVQVVQFVQFVUFVUBVUF8O8A8WdY6opAAAAAElFTkSuQmCC') /*themes/base/images/ui-bg_flat_0_aaaaaa_40x100.png*/; *background-image: url(themes/base/images/ui-bg_flat_0_aaaaaa_40x100.png); /* For IE 6 and 7 */ } : छवि / PNG; बेस 64, iVBORw0KGgoAAAANSUhEUgAAACgAAABkCAYAAAD0ZHJ6AAAAe0lEQVRoge3OMQHAIBAAMcC / kjdZJHTI0A4XBdkz86wfO18H3hRUBVVBVVAVVAVVQVVQFVQFVUFVUBVUBVVBVVAVVAVVQVVQFVQFVUFVUBVUBVVBVVAVVAVVQVVQFVQFVUFVUBVUBVVBVVAVVAVVQVVQFVQFVUFVUBVUF8O8A8WdY6opAAAAAElFTkSuQmCC') /*themes/base/images/ui-bg_flat_0_aaaaaa_40x100.png*/; .foother { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAABkCAYAAAD0ZHJ6AAAAe0lEQVRoge3OMQHAIBAAMcC/kjdZJHTI0A4XBdkz86wfO18H3hRUBVVBVVAVVAVVQVVQFVQFVUFVUBVUBVVBVVAVVAVVQVVQFVQFVUFVUBVUBVVBVVAVVAVVQVVQFVQFVUFVUBVUBVVBVVAVVAVVQVVQFVQFVUFVUBVUF8O8A8WdY6opAAAAAElFTkSuQmCC') /*themes/base/images/ui-bg_flat_0_aaaaaa_40x100.png*/; *background-image: url(themes/base/images/ui-bg_flat_0_aaaaaa_40x100.png); /* For IE 6 and 7 */ }

ध्यान दें कि यह Internet Explorer के पुराने संस्करणों के साथ संगतता समस्याओं को ध्यान में रखता है।

ऊपर, केवल कुछ वेब एसेंशियल सीएसएस क्षमताओं पर चर्चा की गई है। लेख को अधिभार नहीं देने के लिए, मैं पाठक को स्वयं को इस तरह की विशेषताओं के साथ स्वयं को परिचित करने के लिए छोड़ दूंगा जैसे कि iOS के लिए स्क्रॉल स्क्रॉल का समर्थन, CSS3 एनिमेशन के साथ काम करना, रंगों को हाइलाइट करना (आंकड़ा देखें), आदि।

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

कम समर्थन

लेस एक ऐसी भाषा है जो सीएसएस का विस्तार करती है और चर, मिश्रण, संचालन और कार्यों जैसी सुविधाओं का समर्थन करती है। Habré पर LESS के बारे में एक अच्छा लेख है । मैं इसे यहां नहीं दोहराऊंगा।

Web Essentials सिंटैक्स हाइलाइटिंग और IntelliScence समर्थन के साथ Visual Studio में एक पूर्ण विशेषताओं वाली LESS फ़ाइल संपादक जोड़ता है। सीएसएस फ़ाइलों का एक छोटा संस्करण बनाते समय, कम फ़ाइलों को स्वचालित रूप से CSS में संकलित किया जाएगा। इसके अलावा, LESS फ़ाइलों को संपादित करते समय, उत्पन्न सीएसएस पूर्वावलोकन विंडो में प्रदर्शित होता है।

मैं LESS कोड का एक उदाहरण दूंगा जिसमें एक चर और एक मिश्रण (मिक्सिन, मिश्रण) है :

 @corner: 15px; .round_courners(@radius: 5px) { -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius; } #header { .round_courners(@corner); } #footer { .round_courners(); }

इस कोड से निम्नलिखित सीएसएस शैलियों को उत्पन्न किया जाएगा:

 #header { -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; } #footer { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }

CoffeeScript समर्थन

Web Essentials, CoffeeScript के लिए समर्थन भी जोड़ता है, जो JavaScript के विकल्पों में से एक है और इस JavaScript में संकलित करता है। सिंटैक्स हाइलाइटिंग वाला एक कोड संपादक समर्थित है और स्वचालित रूप से संकलित किया गया है जावास्क्रिप्ट में एक छोटा संस्करण सहित पीढ़ी के साथ किया जाता है।

CoffeeScript एक बहुत शक्तिशाली भाषा है, हालांकि मैं व्यक्तिगत रूप से, एक व्यक्ति के रूप में जो रूबी (रूबी प्रेमियों के लिए, कॉफीस्क्रिप्ट आदर्श रूप से अनुकूल है) के बजाय C # सिंटैक्स का उपयोग किया जाता है, Microsoft के टाइपस्क्रिप्ट भाषा का समर्थन करना पसंद करते हैं जिसे आपको Visual Studio (और) में आधिकारिक विकास उपकरण स्थापित करने की आवश्यकता होती है वेब अनिवार्य रूप से टाइपस्क्रिप्ट में सुधार होता है।)

HTML के लिए ZenCoding

LESS की तरह, ज़ेनकोडिंग पहले से ही हैबे पर चर्चा की गई थी । ZenCoding एक ऐसा उपकरण है जो आपको इस मामले में जल्दी से HTML मार्कअप बनाने की अनुमति देता है। यह इस तथ्य के कारण प्राप्त किया जाता है कि आप ज़ेनकोडिंग के लिए एक अपेक्षाकृत सरल रेखा लिख सकते हैं, जिसे तब जटिल एचटीएमएल मार्कअप में बदल दिया जाता है।

उदाहरण के लिए, Visual Studio में HTML संपादक में, आप दर्ज कर सकते हैं:

 div#content>h1+p

उसके बाद, टैब की दबाएं। और निम्न HTML मार्कअप उत्पन्न होता है:

 <div id="content"> <h1></h1> <p></p> </div>

आप वीडियो से ZenCoding के बारे में अधिक जान सकते हैं।

बंडलों का निर्माण, शैलियों और लिपियों का छोटाकरण

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

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

जावास्क्रिप्ट के लिए JSHint

जावास्क्रिप्ट अनुप्रयोगों को विकसित करना मुश्किल है। अनुप्रयोगों को विकसित करते समय सर्वोत्तम प्रथाओं का पालन करना आसान बनाने के लिए, JSHint जैसे उपकरण मौजूद हैं । JSHint जावास्क्रिप्ट कोड में त्रुटियों और संभावित समस्याओं का पता लगाता है, और स्वीकृत सम्मेलनों के लिए विसंगतियों को भी दर्शाता है।

वेब एसेंशियल विजुअल स्टूडियो में JSHint सपोर्ट जोड़ता है। JSHint शुरू करने के लिए, विकल्प का चयन करें वेब एसेंशियल | JSHint चलाएं। उसके बाद, त्रुटि सूची विंडो में पाई गई सभी समस्याओं को प्रदर्शित करेगा।

प्रोजेक्ट बनाते समय JSHint को अपने आप शुरू भी किया जा सकता है। इस तरह से आप अपने जावास्क्रिप्ट कोड को बेहतर बना सकते हैं (बशर्ते आप JSHint दिशानिर्देशों का पालन करें, निश्चित रूप से)।

परिणाम

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

मुझे बहुत खुशी होगी यदि आप वेब एसेंशियल इंस्टॉल करते हैं और ऊपर की कोशिश करते हैं, साथ ही साथ विचार नहीं किया जाता है, लेकिन निश्चित रूप से उपयोगी विशेषताएं अपने आप में! यह एक्सटेंशन वास्तव में वेब एप्लिकेशन के विकास में मदद करता है, इसे आज़माएं!

दृश्य स्टूडियो के लिए वेब आवश्यक एक्सटेंशन: लेस, ज़ेन कोडिंग, कॉफीस्क्रिप्ट और बहुत कुछ