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