JSFiddle - नया संस्करण

नमस्ते!

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

jsFiddle सबसे लोकप्रिय वेब डेवलपमेंट एन्वायरमेंट (वेब ​​ब्राउज़र में चलने वाला) है जो आपको HTML, जावास्क्रिप्ट और सीएसएस में लिखे गए कोड को संपादित और चलाने की अनुमति देता है, जिसे "फ़ीड" कहा जाएगा। जावास्क्रिप्ट के लिए पुस्तकालयों का उपयोग करना संभव है, जैसे कि jQuery।

JsFiddle के सबसे लोकप्रिय उपयोगों में से एक है ब्लॉग में कोड पेस्ट करना, सोशल नेटवर्क के माध्यम से कोड साझा करना और कोड पर सहयोग करना।

कार्य क्षेत्र

वर्षों से साइट के इंटरफ़ेस में कई बार परिवर्तन हुए हैं और फिलहाल यह इस तरह दिखता है:

लेआउट संपादन। क्षेत्र की स्थापना

JsField कार्यक्षेत्र को चार भागों में विभाजित किया गया है, जिसके आयामों को आपके विवेक पर बदला जा सकता है: HTML , CSS , जावास्क्रिप्ट और परिणाम । यदि आपके पास आकार बदलने के दौरान अभी भी पर्याप्त देखने का क्षेत्र नहीं है, तो आप सेटिंग्स में लेआउट संपादक का उपयोग कर सकते हैं। खुलने वाले ब्लॉक के बहुत नीचे, आप संपादक लेआउट आइटम देख सकते हैं और वहां आपके लिए सुविधाजनक लेआउट का चयन कर सकते हैं।

06/05/2018 JSFiddle ने एक और लेआउट जोड़ा जो आपको टैब के रूप में कार्यक्षेत्र बनाने की अनुमति देता है। यह पहले ऑस्कर द्वारा अपने ट्विटर पर उल्लेख किया गया था।

एचटीएमएल

अपना प्रोजेक्ट बनाते समय, हम html फ़ील्ड को नहीं छू सकते हैं, क्योंकि डिफ़ॉल्ट रूप से इसका वर्तमान संस्करण है, फिलहाल यह HTML5 है। लेकिन फिर यह बेहतर है।

सीएसएस

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



यदि आप एक एस्थेट हैं और आपने गलती से कोड खो दिया है, तो घबराएं नहीं। आप किसी भी समय शीर्ष पैनल पर साफ बटन पर क्लिक कर सकते हैं और सभी पंक्तियों को स्वचालित रूप से संरेखित कर सकते हैं।

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

जावास्क्रिप्ट

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



दूसरी ड्रॉप-डाउन सूची js चौखटे और एक्सटेंशन है। यहाँ, आपकी ज़रूरत की लगभग हर चीज़। मैं आमतौर पर इसका उपयोग केवल jQuery (अब 3.3.1) को सक्षम करने के लिए करता हूं।

अन्य उपयोगकर्ताओं की परियोजनाओं के आसपास घूमते हुए, मैंने देखा कि तीसरी और चौथी सूची व्यावहारिक रूप से किसी के द्वारा उपयोग नहीं की जाती है। व्यवहार में! इसलिए आप उन्हें छोड़ सकते हैं यदि आप नहीं जानते कि वे क्या हैं।

ऊर्ध्वाधर पैनल में, संपादन क्षेत्र के बाईं ओर, पंक्ति संसाधन है - URL cdnjs । इसमें आप तृतीय-पक्ष स्रोतों से सीएसएस और जेएस फाइलों के लिए सीधे लिंक रख सकते हैं। उदाहरण के लिए, फ़ॉन्टवॉटर फ़ॉन्ट जोड़ें

परिणाम

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

यह वह जगह है जहाँ JSFiddle अनुशंसित लेआउट आपके लिए है - यह एक ओपन सोर्स प्रोजेक्ट है, जो आपके प्रोजेक्ट के अंदर लेआउट (ग्रिड) है। उनका उपयोग उन उपयोगकर्ताओं के लिए एक सहायक उपकरण के रूप में किया जा सकता है, जो सही सामग्री की तलाश में हैं, आपके विकास पृष्ठ पर जाएंगे।

सेविंग, पोस्टिंग और प्रकाशन जेएसफिल्ड

प्रोजेक्ट सहेजें

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



हुर्रे! आपका पहला चारा तैयार है।

प्रोजेक्ट प्रकाशन

और इसलिए, हमारी परियोजना को साइट पर पोस्ट करें।

फिर, शीर्ष पैनल पर, परियोजना को बचाने के बाद, हमें इसे साझा करने का अवसर मिला। ऐसा करने के लिए, नया एम्बेड बटन ढूंढें।



खुलने वाली विंडो में, अनावश्यक टैब (टैब) को हटा दें, थीम, पाठ, पृष्ठभूमि का रंग चुनें या डिफ़ॉल्ट सेटिंग्स को छोड़ दें। इसके बाद, एम्बेड कोड फ़ील्ड में क्लिक करें और स्क्रिप्ट को अपनी वेबसाइट पर कॉपी करें। हो गया!
एक फ्रेम के उपयोग से एक वैकल्पिक प्लेसमेंट विकल्प भी है। इसका उपयोग करने के लिए, वहां आइफ्रे प्रेफर लिंक पर क्लिक करें? और iframe कॉपी करें। इसमें, आप अपनी इच्छानुसार ऊँचाई और चौड़ाई भी समायोजित कर सकते हैं। यदि आप सभी अनावश्यक टैब (संपादन क्षेत्र में फ़ील्ड) हटाते हैं और केवल परिणाम छोड़ते हैं, तो साइट पर आप इसे केवल देखेंगे।

वह सब है! यदि आपके पास प्रश्न और सुझाव हैं, तो टिप्पणियों में लिखें।

स्रोत: https://madeas.ru