CodePen: निर्मित, परीक्षण, शेयर और डिस्कवर HTML, सीएसएस, और जावास्क्रिप्ट

कोडपेन: बिल्ड, टेस्ट और डिस्कवर फ्रंट-एंड कोड

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

इसलिए, अपनी छोटी लिपियों को काम में लेने के लिए मुझे उपयोग करने में आनंद आता है CodePen. कोडपेन एक एचटीएमएल पैनल, एक सीएसएस पैनल, एक जावास्क्रिप्ट पैनल, कंसोल, और परिणामी कोड के एक प्रकाशित के साथ एक सुव्यवस्थित उपकरण है। जब आप तत्वों पर माउस ले जाते हैं तो प्रत्येक पैनल में जानकारी होती है ताकि आप समझ सकें कि क्या संभव है, साथ ही आपके HTML, CSS और JS की रंग-कोडिंग आपको आसानी से संपादित करने और लिखने में मदद करने के लिए है।

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

CodePen के बारे में

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

कोडपैन - ऑनलाइन समीक्षाओं की बिक्री प्रभाव की भविष्यवाणी के लिए कैलकुलेटर

कोडपेन के साथ, आप अपना दृश्य बदल सकते हैं यदि आप चाहते हैं कि पैन काम करते समय बाएँ, दाएँ या नीचे हों… या HTML को एक नए टैब में देखें। आपकी प्रतिक्रियाशील सेटिंग्स का परीक्षण करने के लिए अगल-बगल का दृश्य अविश्वसनीय रूप से अच्छी तरह से काम करता है क्योंकि आप देखने योग्य फलक के आकार को समायोजित कर सकते हैं।

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

आप GitHub Gist के रूप में सहेज सकते हैं, ज़िप फ़ाइल में निर्यात कर सकते हैं, और यहां तक ​​कि एम्बेड इस तरह एक लेख में कलम:

पेन देखें
ऑनलाइन समीक्षा का अनुमानित बिक्री प्रभाव
by Douglas Karr (@douglaskarr)
on CodePen.


पेन एडिटर की सीमाओं में से एक कोड की सरासर मात्रा है। आप इस मुद्दे पर कभी नहीं चल सकते, क्योंकि संपादक को सैकड़ों या हजारों लाइनों के साथ ठीक होना चाहिए। लेकिन जब वे 5,000 - 10,000 या अधिक लाइनों की कोड मारना शुरू करते हैं, तो आप देखेंगे कि संपादक विफल होना शुरू हो गया है। हालाँकि, आप कहीं और होस्ट किए गए स्टाइलशीट या जावास्क्रिप्ट में बाहरी संदर्भ जोड़ सकते हैं!

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

का पालन करें Douglas Karr कोडपेन पर

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

तुम्हें क्या लगता है?

यह साइट स्पैम को कम करने के लिए अकिस्मेट का उपयोग करती है। जानें कि आपका डेटा कैसे संसाधित किया जाता है.