फ्रन्टएन्ड विकास: कोडपेन वा उदात्त पाठ?

CodePen वा उदात्त पाठ?
CodePen वा उदात्त पाठ? यदि हामी वेब प्रोग्रामिंगको बारेमा कुरा गर्छौं भने, HTML, CSS र जाभास्क्रिप्टको नाम तत्काल हामीलाई आउँदछ। त्यहाँ पुग्न धेरै तरिकाहरू छन्। सम्म, यदि हामीले एउटा नोटप्याड खोल्‍यौं भने हामी "html" लेखन कार्य गर्न सक्दछौं।। यो सत्य हो कि तपाई प्याडबाट प्रोग्रामिंगको नतीजा हेर्न, तपाईंलाई प्रगति याद गर्न श्रम प्रक्रियाको आवश्यक पर्दछ।

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

आज हामी CodePen, JSBin, Plunkr, उदात्त विश्लेषणको लागि जाँदैछौं, CSSDeck, Dabblet, र LiveWeave। कुन परिचित छन् र उपकरणहरू यस वातावरणमा अधिक प्रयोग गरिन्छ। अवश्य पनि त्यहाँ छन्।

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

CodePen

धेरै धेरै पूर्ण उपकरणका लागि हामी सबै कुरा गर्छौं। वेब उपकरणको रूपमा प्रयोग गरीन्छ जुन तपाईंको काम देखाउन समुदायको सब भन्दा नजिकको चीज हो। एक प्रकारको Youtube प्रोग्रामरबाट यसमा तपाई वेबसँग आबद्ध प्रोग्रामरहरूको काम हेर्न र उनीहरूसँग सम्पर्क गर्न सक्नुहुनेछ यदि तपाईंलाई कुनै रूचि छ भने, उनीहरूको प्रोफाइल हेर्नुहोस्, तिनीहरूलाई नेटवर्कमा पछ्याउनुहोस् र उनीहरूको भविष्यका सबै परियोजनाहरू हेर्नको लागि उनीहरूको च्यानलको सदस्यता लिनुहोस्।

सामग्री, समर्थन र किबोर्ड सर्टकटको प्रस्तुतीकरण

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

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

यदि तपाईं ती मध्ये एक हुनुहुन्छ जो प्रयोगको लागि प्रयोग भएको छ Casi पूर्ण रूपमा कुञ्जीपाटी जब तपाइँ कार्य गर्नुहुन्छ, CodePen तपाइँको लागि अद्भुत हुनेछ। अन्य उपकरणहरू चाहिन्छ प्लगइन वातावरणमा भर्न कुञ्जीपाटी सर्टकटहरू प्रयोग गर्न सक्षम हुन। यसले कार्यलाई अलि बढी असहज बनाउँदछ (यद्यपि एक पटक स्थापित भएपछि मात्र प्रभावी)। सीपी मानक प्रणालीको रूपमा एकीकृत गर्दछ जसले तपाईंलाई कोडको समान लाइनहरू भर्न गराउँदछ जुन दोहोर्याइएको छ, किनकि यो सूचीमा हुन सक्छ। तपाईं कसरी सूची बनाउन र ट्याब क्लिक गर्न चाहानुहुन्छ भनेर लेख्नुहोस्।

प्रो संस्करण पनि "सुपर" प्याकेज को लागी आधारभूत प्याकेज को लागी € 9,00 .२ of को मूल्य को लागी धेरै अधिक विकल्पहरु लाई अनुमति दिन्छ। हामी एक मा के गर्छौं धेरै उपकरणहरूमा एक साथ अपडेट गर्न सक्षम हुँदै। एक सहकारी मोड, एक "शिक्षक मोड", आदि। लाभ उठाउनुहोस् यदि तपाईं यहाँ चाहनुहुन्छ भने।

JSBin

JSBin एक उपकरण हो जुन हामी प्रत्यक्ष रूपमा योग्य हुन सक्छौं। एक पटक तपाईं यसको वेब डोमेनमा जानु भए पछि, यो ढिलाइ नगरीकन, तपाईंको अर्को परियोजना कोर्न सुरू गर्न तयार हुनेछ। र यसको पहिलो चरण धेरै आकर्षक छैन, तर यो सहज छ.

JSBin सरल छ, html मा सिर्जना गरिएको आधारभूत संरचनाको साथ समय बर्बाद नगर्नुहोस्, तपाईं काम समाप्त गर्न बिभिन्न भाषाहरूको बीचमा मिल्नुहुनेछ। पहिले त्यहाँ एचटीएमएल, त्यसपछि सीएसएस, जाभास्क्रिप्ट र अन्ततः तपाईंको काम भिजुएल हुन्छ। र यद्यपि यो अधिक गाह्रो देखिन्छ, तपाईंसँग केहि पनि स्थापना बिना नै शर्टकटको समान प्रकारको हुनेछ। प्रत्यक्ष रूपमा ब्राउजरबाट।

जे होस्, मैले कोड सहीसँग हेर्न असहज महसुस गरें, एकपटक यो पछिल्लो स्तम्भहरूको कारण लुकेको छ। पछिबाट, ल्यापटपको साथ तपाईले त्याग्नु पर्छ तलका साथ तल ट्रयाकप्याड र यो धेरै तरल छैन।

योसँग केवल दुई किस्ता छन्, नि: शुल्क वा भुक्तान गरिएको। यो कोडपेन भन्दा अलि बढी महँगो छ, यद्यपि यदि तपाईं यसलाई वार्षिक रूपमा तिर्नुहुन्छ भने, यो अधिक लाभदायक हुन्छ, यदि तपाईंले € १२० तिर्न सक्नुहुन्छ भने।

CSSDeck

CSSDeck
को कार्य वातावरण CSSDeck माथि देखिएको भन्दा फरक छ। दुई स्तम्भहरूमा मात्र विभाजित, भिजुअल-कोड, CSSDeck ले r पows्क्ति तल काम गर्दछ जसको साथ यसले भाषाको बिभिन्न प्रकारहरूलाई विभाजित गर्दछ। एक सामाजिक नेटवर्क को रूप मा एक प्रस्तुतिको साथ र हल्का रंगमा सफा कार्य वातावरण। यो एक साधारण उपकरण जस्तो देखिन्छ। यद्यपि कहिलेकाँही, यसको मतलब यो नकारात्मक छैन।

Xt० हजार भन्दा बढी पंजीकृत प्रयोगकर्ताहरू र दुई सय पचास हजार भन्दा बढी प्रोजेक्टहरू सिर्जनाका साथ खोजी गर्न र तपाईंलाई चाहेको खोजी गर्न गाह्रो हुने छैन। भाषा जहिले जत्तिकै, यदि यो अ know्ग्रेजी नजान्नेहरूको लागि असुविधा हुन सक्छ, तर यसमा सामाजिक नेटवर्क छवि धेरै महत्त्वपूर्ण छ, त्यसैले मलाई लाग्दैन कि यो एक ठूलो चुनौती हो।

प्लन्कर

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

यो पनि भन्नुहोस् कि वेब अनुसार, तिनीहरू संस्करण १.०.० मा छन्। त्यसोभए यसले वेबपृष्ठ ब्राउज गर्ने बित्तिकै डिजाइन, प्रस्तुतीकरण र सम्भावित त्रुटिहरूको बारेमा थोरै वर्णन गर्दछ।

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

ड्याब्लेट

ड्याब्लेट यो एक सरल उपकरण हो, तपाईं भित्र जानुहोस् र सिर्जना गर्नुहोस्। यद्यपि तपाई GitHub को माध्यम बाट दर्ता गर्न र तपाईको प्रयोगकर्ता नाम राख्न सक्नुहुन्छ, यो वेबमा धेरै देखिदैन। पहेलोदेखि रातो ढाँचामा पृष्ठभूमिसहित, भिजुअल भागमा र सेतो पृष्ठभूमिमा कोड भागमा (सामान्य जस्तो), ड्याब्लेट प्रोजेक्ट प्रस्तुत गरिएको छ, यद्यपि तपाईं यसलाई CSS ट्याबबाट परिवर्तन गर्न सक्नुहुनेछ। मेरो लागि, यसलाई खाली राख्नु राम्रो हुन्छ, किनकि त्यो ग्रेडीएन्टले दिने सबै थोरै हुन्छ जीवन a

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

एउटा चीज जुन मैले कमसेकम मनपराएँ, तर त्यो महान प्रोग्रामरहरू मनपर्न सक्छन् तपाईंसँग लेबल ट्याबलेट गर्न विकल्प छैन र यसलाई आफै लेख्नुहोस्। त्यो हो, HTML राख्नुहोस् र ट्याबमा क्लिक गर्नुहोस् र "html" र "/ html" स्वचालित रूपमा लेख्नुहोस्। केहि चीज जुन अन्य अनुप्रयोगहरूमा यो गरियो भने।

LiveWeave

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

उदास पाठ

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

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

निष्कर्ष

सबै कार्यक्रमहरू प्रत्येक कम्पनीको केही व्यक्तिगत टचको साथ समान हुन्छन् जसले उनीहरूमा पेशेवर र विपक्ष ल्याउँछ। प्रत्येकले एक छनौट गर्नेछ जुन उनीहरूलाई उत्तम सूट गर्दछ, मेरो सिफारिश भनेको कोडपेन वा CSSDeck वातावरण र सामाजिक सञ्जालको लागि प्रयोग गर्दछ। तर, यदि तपाइँलाई अर्को एक मनपर्‍यो भने, एक टिप्पणी छोड्नुहोस् र तपाइँका कारणहरू वर्णन गर्नुहोस्, तिनीहरू पक्कै उपयोगी हुन्छन्।


लेखको सामग्री हाम्रो सिद्धान्तहरूको पालना गर्दछ सम्पादकीय नैतिकता। त्रुटि क्लिक गर्न रिपोर्ट गर्नुहोस् यहाँ.

टिप्पणी गर्न पहिलो हुनुहोस्

तपाइँको टिप्पणी छोड्नुहोस्

तपाईंको ईमेल ठेगाना प्रकाशित हुनेछैन। आवश्यक फिल्डहरू चिन्ह लगाइएको छ *

*

*

  1. डाटाका लागि उत्तरदायी: मिगुएल gelन्गल ग्याटन
  2. डाटाको उद्देश्य: नियन्त्रण स्पाम, टिप्पणी प्रबन्धन।
  3. वैधानिकता: तपाईंको सहमति
  4. डाटाको सञ्चार: डाटा कानुनी बाध्यता बाहेक तेस्रो पक्षलाई सूचित गरिने छैन।
  5. डाटा भण्डारण: डाटाबेस ओसीन्टस नेटवर्क (EU) द्वारा होस्ट गरिएको
  6. अधिकार: कुनै पनि समयमा तपाईं सीमित गर्न सक्नुहुनेछ, पुन: प्राप्ति र तपाईंको जानकारी मेटाउन।