फ़्रंटएंड डेवलपमेंट: कोडपैन या सबलाइम टेक्स्ट?

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

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

आज हम CodePen, JSBin, Plunkr, उदात्त का विश्लेषण करने जा रहे हैं, CSSDeck, Dabblet, और LiveWeave। जो इस वातावरण में सबसे अधिक ज्ञात और प्रयुक्त उपकरण हैं। और भी हैं, बिल्कुल।

लेकिन आप सभी के लिए जो ये नहीं जानते होंगे कि FrontEnd या BackEnd किस बारे में है, आइए थोड़ा समझाते हैं। फ्रंट-एंड या इंटरफ़ेस वह दृश्य भाग है जिसे नेविगेट करने वाला उपयोगकर्ता वेब पर देख सकेगा। BackEnd वह भाग होगा जिसे साइट व्यवस्थापक नियंत्रित करता है। प्रोग्रामिंग में, यदि आप एक उपकरण के माध्यम से कोड दर्ज करते हैं जो एक साथ परिणाम प्रदर्शित करता है, तो इसे फ्रंट-एंड कहा जाएगा.

CodePen

कई सबसे पूर्ण उपकरण के लिए हम जो बोलते हैं। एक वेब टूल के रूप में उपयोग किया जाता है जो आपके काम को दिखाने के लिए एक समुदाय के लिए निकटतम चीज है। एक तरह का यूट्यूब प्रोग्रामर से। इसमें, आप वेब से जुड़े प्रोग्रामर्स के काम को देख सकते हैं और यदि आपकी कोई रुचि है तो उनसे संपर्क करें, उनकी प्रोफ़ाइल देखें, उन्हें नेटवर्क पर फॉलो करें और भविष्य की सभी परियोजनाओं को देखने के लिए उनके चैनल की सदस्यता लें।

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

कोडपेन प्रस्तुति सबसे दिलचस्प हैक्योंकि कुछ ही क्लिक के साथ, आप तुरंत प्रक्रिया के माध्यम से काम कर सकते हैं। Html, css और javascript की बहुत अच्छी तरह से अलग लाइनों के साथ। दृश्य भाग के अतिरिक्त, जिसे आप अपनी प्रगति को स्पष्ट रूप से देखने के लिए ऊपर और नीचे को फैला सकते हैं। इस प्रकार प्रत्येक भाषा को अच्छी तरह से अंतर करने में मदद करना। कुछ जो नए प्रोग्रामर के काम आता है।

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

यदि आप उन लोगों में से हैं जो उपयोग करने के लिए उपयोग किए जाते हैं casi पूरी तरह से काम करते समय कीबोर्ड, CodePen आपके लिए अद्भुत होगा। अन्य उपकरणों की जरूरत है plugins वातावरण में भरने के लिए कीबोर्ड शॉर्टकट का उपयोग करने में सक्षम होना। यह काम को थोड़ा और अधिक असुविधाजनक बनाता है (हालांकि सिर्फ एक बार स्थापित होने के बाद प्रभावी)। सी.पी. मानक के रूप में एकीकृत होता है एक प्रणाली जो आपको बार-बार कोड की समान पंक्तियों में भर देगी, जैसा कि एक सूची में हो सकता है। आप लिखते हैं कि आप कैसे चाहते हैं कि सूची दिखाई दे और टैब पर क्लिक करें।

प्रो संस्करण "सुपर" पैकेज के लिए मूल पैकेज के लिए € 9,00 के लिए € 29,25 की कीमत के लिए कई और विकल्प भी देता है। कई उपकरणों को एक साथ अपडेट करने में सक्षम होने के नाते हम एक में क्या करते हैं। इसके अलावा एक सहकारी मोड, एक "शिक्षक मोड", आदि। यहां आप चाहें तो लाभ उठाएं।

जेएसबीएन

JSBin एक ऐसा उपकरण है जिसे हम प्रत्यक्ष रूप से योग्य बना सकते हैं। एक बार जब आप अपने वेब डोमेन पर जाते हैं, तो यह बिना किसी देरी के, आपकी अगली परियोजना शुरू करने के लिए तैयार हो जाएगा। और हालांकि इसका पहला मंचन बहुत आकर्षक नहीं है, यह आरामदायक है.

JSBin सरल है, html में बनाई गई मूल संरचना के साथ ताकि समय बर्बाद न हो, आप काम पूरा करने के लिए विभिन्न भाषाओं के बीच में अंतर करेंगे। पहले HTML, फिर CSS, जावास्क्रिप्ट और अंत में आपका काम नेत्रहीन है। और यद्यपि यह अधिक कठिन लगता है, आपके पास कुछ भी स्थापित किए बिना एक ही प्रकार के शॉर्टकट होंगे। सीधे ब्राउज़र से।

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

इसकी केवल दो किस्तें हैं, मुफ्त या भुगतान। यह CodePen की तुलना में थोड़ा अधिक महंगा है, हालांकि यदि आप इसे सालाना भुगतान करते हैं, तो यह अधिक लाभदायक है, यदि आप € 120 का भुगतान कर सकते हैं।

सीएसएसडेक

के काम का माहौल सीएसएसडेक ऊपर देखे गए से अलग है। केवल दो कॉलम में विभाजित, दृश्य-कोड, CSSDeck 3 पंक्तियों के साथ काम करता है जिसके साथ यह विभिन्न प्रकार की भाषा को विभाजित करता है। एक सामाजिक नेटवर्क के रूप में एक प्रस्तुति और हल्के रंग में एक क्लीनर काम के माहौल के साथ। यह एक साधारण उपकरण की तरह प्रतीत होता है। हालांकि कभी-कभी इसका मतलब यह नहीं है कि यह नकारात्मक है।

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

प्लंकर

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

यह भी कहना है कि वेब के अनुसार, वे संस्करण 1.0.0 में हैं। इसलिए यह थोड़ा सा डिज़ाइन, प्रस्तुति और संभावित त्रुटियों की व्याख्या करता है जो आपको वेब ब्राउज़ करते समय मिलते हैं।

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

दबबल

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

जब आप संपादन कर रहे हैं, तो आप अपने द्वारा देखे जाने वाले टैब को कॉन्फ़िगर कर सकते हैं सरलता। यहां तक ​​कि अगर आप संपादन करने वाले व्यक्ति के आधार पर आरामदायक देखने के लिए कॉलम या पंक्तियों पर स्विच करना चाहते हैं। फ़ॉन्ट आकार को बदलना, HTML कोड को पंजीकृत या मान्य किए बिना अनाम के रूप में सहेजना अधिक संभावनाएं हैं जो पहली नज़र में Dabblet प्रदान करता है। हालांकि यह पहला विकल्प नहीं है कि मैं चुनूं, यह भविष्य के संस्करणों में ध्यान में रखा जा सकता है यदि वे अपडेट किए जाते हैं।

चीजों में से एक जो मुझे कम से कम पसंद थी, लेकिन जो महान प्रोग्रामर पसंद कर सकते हैं, वह है आपके पास किसी लेबल को सारणीबद्ध करने का विकल्प नहीं है और इसे स्वयं लिखना है। यही है, HTML डालें और टैब पर क्लिक करें और "html" और "/ html" स्वचालित रूप से लिखें। यदि ऐसा किया जाता है तो अन्य अनुप्रयोगों में कुछ।

लाइववेव

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

उदात्त पाठ

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

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

निष्कर्ष

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