शुरुआती के लिए 10 कोडपेन टिप्स

कोडपेन एक सुपर आसान और लोकप्रिय साइट है कलम वर्किंग फ्रंट-एंड कोड कॉम्बो नीचे बिल्कुल अभी। यदि आप नहीं जानते कि कोडपेन क्या है या इसके बारे में पहले नहीं सुना है, तो यह मूल रूप से एक है ऑनलाइन स्रोत कोड खेल का मैदान (चलो बुलावा आया OSCP फ्रंट-कोडिंग के तीन संगीतकारों के लिए nerdier को ध्वनि देना); एचटीएमएल, सीएसएस तथा जावास्क्रिप्ट.

JSFiddle, JS Bin, CSSDeck और Dabblet जैसे अन्य समान OSCPs हैं। कोडपेन निश्चित रूप से फ्रंट-एंड डेवलपर्स के बीच सबसे प्रसिद्ध में से एक है। आगे की हलचल के बिना, चलो कुछ में सही कूदते हैं बुनियादी और उपयोगी सुझाव कोडपेन का उपयोग करने के लिए.

1. रन बटन

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

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

2. संख्या वृद्धि / कमी

कोडपेन में अपने कोड में संख्याओं को बढ़ाएँ या घटाएँ नए नंबरों में टाइप किए बिना. आपको बस Ctrl / Cmd के प्रमुख संयोजन का उपयोग करना है तथा ऊपर और नीचे तीर.

3. कई कर्सर

आप पर अभिशाप डाल सकते हैं स्रोत कोड में कई बिंदु, फिर उन सभी बिंदुओं पर टाइप या संपादन करें एक ही समय में. यह केवल तभी काम करता है जब आप एक ही जानकारी इनपुट कर रहे हों, और कॉपी-पेस्टिंग की आवश्यकता कम कर दें। बस उन कई बिंदुओं पर क्लिक करते समय Ctrl / Cmd कुंजी दबाए रखें.

4. विभिन्न रंगीन कंसोल संदेश

कंसोल जावास्क्रिप्ट ऑब्जेक्ट है कुछ और तरीके के अतिरिक्त लॉग इन करें () आपको अनुमति देने के लिए वेब कंसोल में चीजें प्रिंट करें.

आप उपयोग कर सकते हैं जानकारी (), चेतावनी दी है () तथा त्रुटि () के लिए तरीके जानकारी, चेतावनी तथा त्रुटि. आमतौर पर, वेब कंसोल इन संदेशों को टाइप-वार रंग देते हैं, या उनके बगल में एक उचित आइकन प्रदर्शित करेंगे (जैसे चेतावनी के लिए चेतावनी चिह्न) आसान मान्यता के लिए.

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

5. निर्यात करें

एक बार बच गया, ए कलम (एक एकल कोडपेन इकाई) का निर्यात किया जा सकता है एक ज़िप फ़ाइल के रूप में HTML, CSS और JS कोड के सभी फाइलों में। पेन को बचाने के लिए एक विकल्प भी है जीथुब जिस्ट के रूप में (एक गिट भंडार)। आप प्रत्येक पेन के दाहिने निचले कोने में एक्सपोर्ट बटन पा सकते हैं.

6. ढूँढें और बदलें

खोजें और बदलें - उन लोगों के लिए एक आवश्यक ऑपरेशन जो अपने चर नामों को अब और फिर नाम बदलना चाहते हैं। Ctrl / Cmd + Shift + F प्रमुख कॉम्बो टू है को खोलो “खोजें और बदलें” संवाद.

7. इमेट टैब ट्रिगर

क्या आप एम्मेट कोडिंग के लिए टैब ट्रिगर्स के बारे में जानते हैं? एम्मेट फ्रंट-एंड डेवलपर्स के लिए एक उत्पादकता उपकरण है जो आपको अनुमति देता है कंकाल कोड टाइप करें जो बाद में विस्तारित हो जाता है. कोडपेन में ऐसा करने के लिए, बस संपादक में उचित संक्षिप्त नाम टाइप करें, टैब कुंजी दबाएं, और पूरा कोड एक ही बार में दिखाई देता है. केवल HTML के लिए उपलब्ध है कोडपेन में.

8. व्यक्तिगत कोड फ़ाइलें प्राप्त करें

यदि आप पहले बताए गए निर्यात विकल्प का उपयोग करते हैं, तो आपको अपनी कलम की सभी तीन फाइलें (HTML, CSS और JS) मिलेंगी। लेकिन अगर आप में रुचि रखते हैं उन फ़ाइलों में से केवल एक या दो, और उन्हें व्यक्तिगत रूप से डाउनलोड करना चाहते हैं, इसके लिए कोडपेन में भी एक विकल्प है.

कोडपेन में लॉग इन करने के बाद, अपनी पेन पर जाएं, और ऊपर दाएं कोने में स्थित चेंज व्यू बटन पर क्लिक करें। ड्रॉपडाउन सूची में सबसे नीचे, आप देखेंगे व्यक्तिगत फ़ाइलों के लिए प्रत्यक्ष डाउनलोड लिंक.

9. जावास्क्रिप्ट चर का निरीक्षण करें

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

10. पेन को टेम्प्लेट में बदल दें

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