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

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

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

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

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

CodePen के बारे में

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

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

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

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

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

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


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

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

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

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

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

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