CodePen: निर्मित, परीक्षण, शेयर और डिस्कवर HTML, सीएसएस, और जावास्क्रिप्ट
सामग्री प्रबंधन प्रणाली के साथ एक चुनौती स्क्रिप्टेड टूल का परीक्षण और निर्माण करना है। हालाँकि अधिकांश प्रकाशकों के लिए यह कोई आवश्यकता नहीं है, एक प्रौद्योगिकी प्रकाशन के रूप में, मैं अन्य लोगों की मदद के लिए कभी-कभी कामकाजी स्क्रिप्ट साझा करना पसंद करता हूँ। मैंने साझा किया है कि पासवर्ड की ताकत की जांच करने के लिए जावास्क्रिप्ट का उपयोग कैसे करें, रेगुलर एक्सप्रेशन (रेगेक्स) के साथ ईमेल एड्रेस सिंटैक्स की जांच कैसे करें, और हाल ही में ऑनलाइन समीक्षाओं के बिक्री प्रभाव की भविष्यवाणी करने के लिए इस कैलकुलेटर को जोड़ा है। मुझे साइट पर दर्जनों टूल जोड़ने की उम्मीद है लेकिन वर्डप्रेस इस तरह से प्रकाशन के लिए अनुकूल नहीं है... यह एक सामग्री प्रणाली है, विकास प्रणाली नहीं।
इसलिए, अपनी छोटी-छोटी स्क्रिप्ट्स पर काम करने के लिए, मैं CodePen का उपयोग करने का आनंद लेता हूँ। CodePen एक HTML पैनल, एक CSS पैनल, एक जावास्क्रिप्ट पैनल, कंसोल और परिणामी कोड के प्रकाशन के साथ एक सुव्यवस्थित उपकरण है। जब आप तत्वों पर माउस ले जाते हैं तो प्रत्येक पैनल में जानकारी होती है ताकि आप समझ सकें कि क्या संभव है, साथ ही आपके HTML, CSS और JS की रंग-कोडिंग भी आपको अधिक आसानी से संपादित करने और लिखने में मदद करती है।
कोडपेन एक सामाजिक विकास का वातावरण है। इसके दिल में, यह आपको ब्राउज़र में कोड लिखने की अनुमति देता है, और इसके निर्माण के परिणामों को देखते हैं। किसी भी कौशल के डेवलपर्स के लिए एक उपयोगी और मुक्त ऑनलाइन कोड संपादक, और विशेष रूप से कोड करने के लिए सीखने वाले लोगों के लिए सशक्त बनाना। CodePen मुख्य रूप से HTML, CSS, JavaScript, और प्रीप्रोसेसिंग सिंटैक्स जैसी फ्रंट-एंड भाषाओं पर केंद्रित है जो उन चीजों में बदल जाती हैं।
CodePen के बारे में
CodePen के साथ, मैं सभी आवश्यक कार्य कर सका कैलकुलेटर प्रकाशित करें मैंने साइट में एम्बेड किया है। CodePen पर अधिकांश रचनाएँ सार्वजनिक और खुला स्रोत हैं। वे जीवित चीजें हैं जिनके साथ अन्य लोग और समुदाय सरल हृदय से, टिप्पणी छोड़ने से लेकर, अपनी जरूरतों के लिए बदलाव करने तक, बातचीत कर सकते हैं।
CodePen के साथ, आप अपने दृश्य को बदल सकते हैं यदि आप चाहते हैं कि पैन आपके द्वारा काम करने के साथ बाईं, दाईं ओर या नीचे हो, या HTML को एक नए टैब में देखें। साइड-बाय-साइड दृश्य आपकी प्रतिक्रियाशील सेटिंग्स का परीक्षण करने के लिए अविश्वसनीय रूप से अच्छी तरह से काम करता है क्योंकि आप देखने योग्य फलक के आकार को समायोजित कर सकते हैं।
आप अपनी कामकाजी स्क्रिप्ट को पेन में व्यवस्थित कर सकते हैं, उन्हें प्रोजेक्ट्स (मल्टी-फ़ाइल एडिटर) में जोड़ सकते हैं, या संग्रह भी बना सकते हैं। यह फ्रंट-एंड कोड के लिए एक कार्यशील पोर्टफोलियो साइट है जहां आप अन्य लेखकों का अनुसरण कर सकते हैं, संशोधित करने के लिए अन्य सार्वजनिक रूप से साझा की गई परियोजनाओं को अपने में शामिल कर सकते हैं, और यहां तक कि चुनौतियों के माध्यम से कुछ मजेदार चीजें करना भी सीख सकते हैं।
आप इसे GitHub Gist के रूप में सहेज सकते हैं, इसे निर्यात कर सकते हैं ज़िप फ़ाइल, और यहां तक कि एम्बेड इस तरह एक लेख में कलम:
पेन देखें ऑनलाइन समीक्षा का अनुमानित बिक्री प्रभाव by Douglas Karr (@ स्मार्टटेक_ज़ोन) पर CodePen.
पेन संपादक की सीमाओं में से एक कोड की विशाल मात्रा है। हो सकता है कि आपको कभी भी इस समस्या का सामना न करना पड़े, क्योंकि संपादक को कोड की सैकड़ों या हजारों पंक्तियों के साथ कोई दिक्कत नहीं होनी चाहिए। लेकिन जब वे कोड की 5,000 - 10,000 या अधिक लाइनें मारना शुरू कर देते हैं, तो आप देखेंगे कि संपादक विफल होना शुरू हो गया है। हालाँकि, आप अन्यत्र होस्ट की गई स्टाइलशीट या जावास्क्रिप्ट में बाहरी संदर्भ जोड़ सकते हैं!
मैं आपको साइन अप करने के लिए प्रोत्साहित करूंगा। आप उनके साप्ताहिक ईमेल के सदस्य होंगे और नए प्रकाशित पेन देखने के लिए फ़ीड को अपने RSS फ़ीड में जोड़ सकते हैं। और, यदि आप वहां सार्वजनिक पेन खोजना या ब्राउज़ करना शुरू करते हैं, तो आपको कुछ अविश्वसनीय परियोजनाएं मिलेंगी... उपयोगकर्ता काफी प्रतिभाशाली हैं!
का पालन करें Douglas Karr कोडपेन पर
भुगतान किया गया संस्करण, कोडपेन प्रो, बेहतर कार्यक्षमता या टीमों के लिए कई अतिरिक्त सुविधाएं प्रदान करता है - जिसमें सहयोग, प्रक्रियाएं, परिसंपत्ति होस्टिंग, निजी दृश्य और यहां तक कि आपके डोमेन या उपडोमेन के साथ तैनात परियोजनाएं भी शामिल हैं। और, निश्चित रूप से, CodePen Github एकीकरण के साथ एक बेहतरीन रिपॉजिटरी प्रदान करता है जहां आपकी पूरी टीम काम कर सकती है। यदि आप मेरी तरह कुछ सरल कोड का परीक्षण करना चाहते हैं, तो CodePen एक अमूल्य उपकरण है।