CodePen: निर्मित, परीक्षण, सेयर र डिस्कभर HTML, CSS, र जाभास्क्रिप्ट

कोडपेन: निर्माण, परीक्षण, र फ्रन्ट-एन्ड कोड पत्ता लगाउनुहोस्

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

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

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

CodePen बारे

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

CodePen - अनलाइन समीक्षाको बिक्री प्रभावको भविष्यवाणी गर्न क्यालकुलेटर

CodePen को साथ, तपाईं आफ्नो दृश्य परिवर्तन गर्न सक्नुहुन्छ यदि तपाईं प्यानहरू बायाँ, दायाँ वा तल काम गरिरहनुभएको चाहानुहुन्छ भने ... वा नयाँ ट्याबमा HTML हेर्नुहोस्। छेउ छेउमा दृश्य तपाईंको उत्तरदायी सेटिंग्सको परीक्षण गर्न अविश्वसनीयसँग राम्रोसँग काम गर्दछ किनकि तपाईं दृश्य फलकको आकार समायोजित गर्न सक्नुहुन्छ।

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

तपाईं GitHub Gist को रूपमा बचत गर्न सक्नुहुनेछ, zip फाइलमा निर्यात गर्नुहोस्, र पनि इम्बेड गर्नुहोस् यस्तो लेखमा कलम:

कलम हेर्नुहोस्
अनलाइन समीक्षाको भविष्यवाणी बिक्री प्रभाव
by Douglas Karr (@dgglaskarr)
on CodePen.


कलम सम्पादकको एक सीमितता कोडको सरासर भोल्युम हो। तपाईं यस मुद्दामा कहिले पनि चलाउन सक्नुहुन्न, किनकि सम्पादक सयौं वा हजारौं लाइन कोडसहित ठीक हुनुपर्दछ। तर जब उनीहरूले 5,000००० - १०,००० वा कोडका अधिक लाइनहरू हिर्काउन थाल्छन्, तपाईं संपादक विफल हुन सुरू देख्नुहुनेछ। जहाँसम्म, तपाईं स्टाइलसिट वा अन्यत्र होस्ट गरिएको जाभास्क्रिप्टमा बाह्य सन्दर्भ थप्न सक्नुहुन्छ!

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

पालना Douglas Karr Codepen मा

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

तिम्रो के बिचार छ?

यो साइट स्प्याम कम गर्न Akismet को उपयोग गर्दछ। जान्नुहोस् कि तपाईंको डेटा कसरी संसाधित छ.