Home-theater-designers
जावास्क्रिप्ट वेब विकास के साथ शुरुआत करना एक निराशाजनक प्रक्रिया हो सकती है, लेकिन ऐसे उपकरण हैं जो इसे आसान बनाते हैं।
कोडपेन.io एक इन-ब्राउज़र कोडिंग वातावरण है जिसे कोड सीखने और कम से कम परेशानी के साथ विचारों को जल्दी से प्रोटोटाइप करने के लिए डिज़ाइन किया गया है।
इस लेख में, हम साइट की कुछ विशेषताओं को देखते हैं और वे आपको एक बेहतर प्रोग्रामर बनने में कैसे मदद कर सकते हैं।
कोडपेन क्या है?
कोडपेन कुछ प्रदान करता है जिसे a . कहा जाता है कलम , जिसमें एचटीएमएल, सीएसएस और जावास्क्रिप्ट के लिए तीन अलग-अलग विंडो शामिल हैं, साथ ही एक पूर्वावलोकन फलक जो आपके टाइप करते ही रीयल-टाइम में अपडेट होता है।
जबकि वेब डेवलपर्स के लिए वेबसाइटों के लिए विचारों को प्रदर्शित करने के लिए इसका अक्सर उपयोग किया जाता है, यह फ्रंट-एंड वेब डेवलपमेंट की मूल बातें सीखने के लिए भी एक बेहतरीन जगह है। यहां सबसे उल्लेखनीय विशेषताएं हैं जिन्हें आपको कोडपेन का उपयोग करते समय जानना आवश्यक है।
1. प्रीप्रोसेसर
प्रीप्रोसेसरों की व्याख्या या संकलित भाषाएं कोडिंग को सरल बनाने के लिए डिज़ाइन की गई हैं। वे सुविधा के लिए किसी भाषा में सुविधाएँ जोड़ सकते हैं, और कोड को पढ़ने में आसान बना सकते हैं। वेब विकास में, HTML, CSS और जावास्क्रिप्ट के लिए प्रीप्रोसेसरों के संयोजन का उपयोग शीघ्रता से स्वच्छ कोड बनाने के लिए किया जाता है।
यदि आप वेब विकास सीख रहे हैं और विभिन्न प्रीप्रोसेसरों को आज़माना चाहते हैं, तो कोडपेन आपको प्रीप्रोसेसरों को फ़्लाई पर स्विच करने की अनुमति देता है, और कोड को वास्तविक समय में संकलित करता है। कोडपेन ऐप के तीन पैन में से प्रत्येक में ऊपर दाईं ओर एक ड्रॉपडाउन मेनू है। चुनते हैं संकलित HTML/CSS/JS देखें यह देखने के लिए कि कोड की व्याख्या कैसे की जाएगी।
इस पेन में, हमने उपयोग करके एक साधारण साइट बनाई है Haml तथा सास कुछ हेडर टेक्स्ट को स्टाइल करने के लिए। चुनना संकलित देखें मानक HTML और CSS दिखाता है। इस उदाहरण में अंतर न्यूनतम है। हालाँकि, एक नई भाषा सीखते समय, यह देखना उपयोगी हो सकता है कि एक बार संकलित हो जाने के बाद पूर्व-संसाधित कोड कैसा दिखता है।
2. बाहरी संसाधन
प्रीप्रोसेसरों के लिए मूल समर्थन के साथ, कोडपेन बाहरी स्क्रिप्ट का समर्थन करता है। यह आपकी व्यक्तिगत परियोजनाओं के लिए पुस्तकालयों के साथ व्यावहारिक अनुभव प्राप्त करने के लिए या रिएक्ट जैसे लोकप्रिय वेब ऐप पुस्तकालयों पर ब्रश करने के लिए एक आदर्श स्थान बनाता है।
बाहरी पुस्तकालय जोड़ने के लिए, खोलें समायोजन अपनी कलम पर फलक, और जावास्क्रिप्ट टैब पर जाएं। संसाधन जोड़ने के दो तरीके हैं, या तो संसाधन URL को मैन्युअल रूप से जोड़कर, या खोज कर।
हमने इस फीचर का इस्तेमाल अपने आर्टिकल कवरिंग में किया है Mo.js . के साथ वेब एनिमेशन , बैबेल प्रीप्रोसेसिंग के साथ।
पेन देखें Mojs MUO उदाहरण इयान द्वारा ( @Bardoctorus ) कोडपेन पर।
हाँ, कोडपेन पेन एम्बेड किए जा सकते हैं! Mo.js ट्यूटोरियल के परिणाम देखने के लिए आगे बढ़ें और ऊपर पूर्वावलोकन फलक पर क्लिक करें!
अन्य पेन बाहरी पुस्तकालयों की तरह आयात किए जा सकते हैं। इसका मतलब है कि आप अपने नए पेन में मॉड्यूल की तरह उपयोग करने के लिए पहले से लिखे गए पेन से तत्व ले सकते हैं। कोडपेन उपयोगकर्ता एडम्स साधारण मतदान कलम इसका एक अच्छा उदाहरण है।
3. टेम्पलेट्स
जब आप नई अवधारणाएँ सीख रहे होते हैं या नए विचारों का परीक्षण कर रहे होते हैं, तो आप अक्सर समान घटकों का उपयोग करते हैं और आरंभ करने के लिए समान चरणों को फिर से पढ़ते हैं। कोडपेन टेम्पलेट पेन के निर्माण की अनुमति देता है जो दोहराव को कम कर सकता है, और आपको सीधे मुद्दे पर आने देता है।
एक टेम्पलेट बनाने के लिए, एक नया पेन खोलें, अपने परिवर्तन करें, और चुनें टेम्पलेट सेटिंग मेनू में स्लाइडर।
https://vimeo.com/221428690
कुछ समय पहले तक फ्री यूजर्स केवल तीन टेम्प्लेट ही बना सकते थे, लेकिन अब सभी यूजर्स के अकाउंट में जितने चाहें उतने टेम्प्लेट हो सकते हैं। न्यूनतम विलंब के साथ एक नए विचार पर आरंभ करने के लिए बिल्कुल सही!
4. फैशन सहयोग
कोडपेन के साथ सहयोग करने और सिखाने की क्षमता इसकी सबसे बड़ी संपत्ति हो सकती है। प्रोग्रामर के लिए पहले से ही बहुत अच्छे सहयोग उपकरण मौजूद हैं, लेकिन कोडपेन का दृष्टिकोण सरल और सहज है।
कोडपेन के प्रो उपयोगकर्ता एक नया पेन बना सकते हैं, और इसे सहयोग के लिए खोल सकते हैं परिवर्तन देखें मेन्यू। यह आपके कोडपेन प्रो प्लान के आधार पर पेन के लिंक को साझा करने योग्य आमंत्रण में बदल देता है, जिसमें लोगों की संख्या बढ़ जाती है।
विंडोज़ पर पीएनजी को पीडीएफ में कैसे बदलें
इस उदाहरण में, मैंने HTML लिखा था, जबकि एक मित्र ने वास्तविक समय में CSS को अपडेट किया था, जिसमें एक लेबल वाले कर्सर की पहचान की गई थी कि वे कहाँ काम कर रहे थे।
लिंक वाला कोई भी व्यक्ति इन-ब्राउज़र चैट फ़ंक्शन में शामिल हो सकता है और उसका उपयोग कर सकता है, भले ही वे एक समर्थक उपयोगकर्ता हों या यहां तक कि एक कोडपेन खाता भी हो। बशर्ते स्वतः सहेजना बंद हो, केवल पेन का स्वामी ही किसी भी परिवर्तन को सहेज सकता है, जिससे यह आपके कोड को बिना किसी जोखिम के दूसरों के लिए खोलने का एक सुरक्षित तरीका बन जाता है।
इस विधा की ओपन-एंडेड प्रकृति शुरुआती लोगों के लिए फायदेमंद है क्योंकि आप एक कठिन अवधारणा के माध्यम से आपका मार्गदर्शन करने के लिए लगभग किसी को भी अपनी कलम में आमंत्रित कर सकते हैं। यह अपने तरीके से जानने का एक आसान तरीका भी है क्योंकि यह संभावित कर्मचारियों के साक्षात्कार के लिए एकदम सही है, और पहले से ही है इस तरह से पेशेवर रूप से इस्तेमाल किया गया है !
5. प्रोफेसर मोड
प्रोफेसर मोड एक प्रो उपयोगकर्ता को एक कमरे की मेजबानी करने की अनुमति देता है जिसमें केवल वे कोड संपादित कर सकते हैं। होस्ट के प्रो प्लान के आधार पर 10-100 उपयोगकर्ता देख सकते हैं और चैट कर सकते हैं।
प्रोफेसर मोड कक्षा सीखने और दूरस्थ शिक्षा, या दोनों के संयोजन के बीच लचीलेपन की अनुमति देता है। प्रोफ़ेसर मोड का उपयोग करने से कक्षा के पीछे के लोगों को सामने वाले लोगों के समान अनुभव प्राप्त होगा, और शिक्षक को बग फिक्स दिखाने में मदद मिलेगी जो वास्तविक समय में अपडेट हो जाएगी।
6. प्रस्तुति मोड
प्रेजेंटेशन मोड को कोड प्रस्तुत करने को ध्यान में रखते हुए, आश्चर्यजनक रूप से डिज़ाइन किया गया है। ऐप एक सरलीकृत दृश्य में प्रदर्शित होता है, जिसे ओवरहेड प्रोजेक्टर के साथ काम करने के लिए डिज़ाइन किया गया है। कोडपेन ने कम गति के इंटरनेट कनेक्शन और कमजोर हार्डवेयर पर उपयोग के लिए प्रस्तुति मोड को अनुकूलित किया है।
चतुर पाठकों ने पहले ही महसूस कर लिया होगा कि कोडपेन का मुफ्त संस्करण ठीक यही फ़ंक्शन प्रदान करेगा, हालांकि प्रो मोड में कुछ उपयोगी विशेषताएं हैं। लेआउट, फ़ॉन्ट आकार और थीम को लगभग किसी भी सेटिंग के अनुरूप फ्लाई पर जल्दी से बदला जा सकता है, और पेन के लिंक को दिखाने से परियोजना को साझा करना आसान बनाने के लिए एक जंबो-आकार का छोटा यूआरएल आता है।
ये छोटे परिवर्तन, पूर्वावलोकन विंडो को स्केल करने में सक्षम होने के साथ-साथ जो कुछ भी आप दिखा रहे हैं उसे फिट करने में सक्षम होने के कारण, प्रस्तुति मोड को शिक्षकों और डेवलपर्स दोनों के लिए सहयोगियों को विचार प्रस्तुत करने के लिए सही बनाते हैं। प्रेजेंटेशन मोड भी कोड को प्रस्तुत करने का एक साफ-सुथरा और सरल तरीका है यदि आप प्रोग्रामिंग स्थिति के लिए खुद को साक्षात्कार देते हुए पाते हैं।
7. पैटर्न
कोडपेन के के संग्रह के साथ प्रेरणा की खोज करना बहुत आसान बना दिया गया है डिजाइन पैटर्न्स .
प्रत्येक श्रेणी विशिष्ट कार्यों के लिए कोडपेन उपयोगकर्ताओं द्वारा प्रदान किए गए उदाहरण कोड का एक संग्रह है। क्या आप अपनी साइट के लिए डायनामिक बटन बनाने का तरीका ढूंढ रहे हैं? मेनू के अनुसार? लगभग किसी भी उदाहरण में फिट होने के लिए कई श्रेणियां हैं।
ये पैटर्न यह जानने का भी एक शानदार तरीका है कि इंटरैक्टिव बटन कैसे काम करते हैं, और विभिन्न तरीके से गतिशील उपयोगकर्ता इंटरफ़ेस कार्य कर सकते हैं।
8. एम्मेट
चिंउंटी , जिसे पहले ज़ेन कोडिंग के रूप में जाना जाता था, व्यापक रूप से HTML और CSS विकास के लिए सबसे बड़ा समय बचाने वाला माना जाता है। प्लगइन कुछ कोड लेता है जो आप स्वयं को बहुत कुछ लिखते हुए पाते हैं और उन्हें सरल शॉर्टकट में परिवर्तित करते हैं।
इसे क्रिया में देखना इसे समझाने से बेहतर है, इसलिए HTML दस्तावेज़ के लिए सामान्य सेटअप लें:
प्रत्येक HTML दस्तावेज़ में इसे जोड़ने से दो क्रियाओं को कम कर दिया गया है। एम्मेट का उपयोग करना, टाइप करें ! और मारो टैब चाभी। जादू!
एम्मेट कोडपेन पर मानक के रूप में सक्रिय है और विशेष रूप से उपयोगी है यदि आप जावास्क्रिप्ट में एक नई अवधारणा सीखने की कोशिश कर रहे हैं और जल्दी से सहायक एचटीएमएल और सीएसएस बनाने की जरूरत है।
बेहतर अनुभव के लिए कोडपेन के साथ विकसित करें
कोडपेन वेब डेवलपर्स के लिए एक उत्कृष्ट उपकरण है, और यह क्षेत्र लगातार बढ़ रहा है। वेब विकास में भविष्य के लिए सीखने के लिए जावास्क्रिप्ट एक बेहतरीन भाषा है।
विंडोज़ 7 को xp की तरह बनाना
जावास्क्रिप्ट के साथ शुरुआत करने के इच्छुक लोगों के लिए कुछ बेहतरीन ट्यूटोरियल और पाठ्यक्रम उपलब्ध हैं, और कोडपेन आपके नए कौशल का परीक्षण करने के लिए एक अच्छा वातावरण है।
साझा करना साझा करना कलरव ईमेल मुफ्त में ऑडियोबुक डाउनलोड करने के लिए 8 सर्वश्रेष्ठ वेबसाइटेंऑडियोबुक मनोरंजन का एक बड़ा स्रोत हैं, और पचाने में बहुत आसान हैं। यहां आठ सर्वश्रेष्ठ वेबसाइट हैं जहां आप उन्हें मुफ्त में डाउनलोड कर सकते हैं।
आगे पढ़िए संबंधित विषय- प्रोग्रामिंग
- एचटीएमएल
- वेब विकास
- जावास्क्रिप्ट
- सीएसएस
इयान बकले बर्लिन, जर्मनी में रहने वाले एक स्वतंत्र पत्रकार, संगीतकार, कलाकार और वीडियो निर्माता हैं। जब वह लिख नहीं रहा होता है या मंच पर नहीं होता है, तो वह पागल वैज्ञानिक बनने की उम्मीद में DIY इलेक्ट्रॉनिक्स या कोड के साथ छेड़छाड़ कर रहा होता है।
इयान बकले की और फ़िल्में या टीवी शोहमारे न्यूज़लेटर की सदस्यता लें
तकनीकी युक्तियों, समीक्षाओं, निःशुल्क ई-पुस्तकों और अनन्य सौदों के लिए हमारे न्यूज़लेटर से जुड़ें!
सब्सक्राइब करने के लिए यहां क्लिक करें