Home-theater-designers
ஜாவாஸ்கிரிப்ட் வலை வளர்ச்சியுடன் தொடங்குவது வெறுப்பூட்டும் செயல்முறையாக இருக்கலாம், ஆனால் அதை எளிதாக்கும் கருவிகள் உள்ளன.
CodePen.io உலாவியில் உள்ள குறியீட்டு சூழல் குறியீட்டை கற்றல் மற்றும் குறைந்த தொந்தரவுடன் யோசனைகளை விரைவாக முன்மாதிரி செய்ய வடிவமைக்கப்பட்டுள்ளது.
இந்த கட்டுரையில், தளத்தின் சில அம்சங்கள் மற்றும் ஒரு சிறந்த புரோகிராமர் ஆக அவை உங்களுக்கு எவ்வாறு உதவும் என்பதை நாங்கள் பார்க்கிறோம்.
கோட்பென் என்றால் என்ன?
கோட் பென் ஏ என்ற ஒன்றை வழங்குகிறது பேனா , இது HTML, CSS மற்றும் JavaScript ஆகியவற்றுக்கான மூன்று வெவ்வேறு சாளரங்களையும், நீங்கள் தட்டச்சு செய்யும் போது நிகழ்நேரத்தில் புதுப்பிக்கும் முன்னோட்டப் பலகத்தையும் உள்ளடக்கியது.
வலைத்தள உருவாக்குநர்களுக்கு வலைத்தளங்களுக்கான யோசனைகளை வெளிப்படுத்த இது அடிக்கடி பயன்படுத்தப்படுகிறது என்றாலும், முன்-இறுதி வலை வளர்ச்சியின் அடிப்படைகளை அறிய இது ஒரு சிறந்த இடமாகும். கோட்பெனைப் பயன்படுத்தும் போது நீங்கள் தெரிந்து கொள்ள வேண்டிய மிகவும் குறிப்பிடத்தக்க அம்சங்கள் இங்கே.
1. முன் செயலிகள்
முன் செயலிகள் குறியீட்டு எளிமைப்படுத்த வடிவமைக்கப்பட்ட மொழிகள் அல்லது தொகுக்கப்பட்ட மொழிகள். அவர்கள் வசதிக்காக ஒரு மொழியில் அம்சங்களைச் சேர்க்கலாம், மேலும் குறியீட்டை எளிதாகப் படிக்கலாம். வலை வளர்ச்சியில், HTML, CSS மற்றும் JavaScript ஆகியவற்றுக்கான முன் செயலிகளின் கலவையானது விரைவாக சுத்தமான குறியீட்டை உருவாக்க பயன்படுகிறது.
நீங்கள் வலை மேம்பாட்டைக் கற்றுக் கொண்டு, வெவ்வேறு ப்ரீப்ராசசர்களை முயற்சி செய்ய விரும்பினால், கோட் பென் நீங்கள் ப்ரீ ப்ராசஸர்களை பறக்கும்போது மாற்ற அனுமதிக்கிறது, மேலும் அது தொகுக்கப்பட்ட குறியீட்டை உண்மையான நேரத்தில் பார்க்கவும். கோட்பென் செயலியில் உள்ள மூன்று பலகங்களில் மேல் வலதுபுறத்தில் கீழ்தோன்றும் மெனு உள்ளது. தேர்ந்தெடுக்கவும் தொகுக்கப்பட்ட HTML/CSS/JS ஐப் பார்க்கவும் குறியீடு எவ்வாறு விளக்கப்படும் என்பதைப் பார்க்க.
இந்த பேனாவில், நாங்கள் ஒரு எளிய தளத்தைப் பயன்படுத்தி உருவாக்கியுள்ளோம் ஹாம்ல் மற்றும் சாஸ் சில தலைப்பு உரையை வடிவமைக்க. தேர்ந்தெடுப்பது தொகுக்கப்பட்டதைப் பார்க்கவும் நிலையான HTML மற்றும் CSS ஐக் காட்டுகிறது. இந்த எடுத்துக்காட்டில் வேறுபாடு குறைவாக உள்ளது. இருப்பினும், ஒரு புதிய மொழியைக் கற்றுக் கொள்ளும்போது, முன் தொகுக்கப்பட்ட குறியீடு எவ்வாறு தொகுக்கப்பட்டிருக்கிறது என்பதைப் பார்ப்பது பயனுள்ளதாக இருக்கும்.
2. வெளி வளங்கள்
முன் செயலிகளுக்கான சொந்த ஆதரவுடன், கோட் பென் வெளிப்புற ஸ்கிரிப்ட்களை ஆதரிக்கிறது. இது உங்கள் தனிப்பட்ட திட்டங்களுக்கான நூலகங்களுடன் அனுபவத்தைப் பெற அல்லது ரியாக்ட் போன்ற பிரபலமான வலை பயன்பாட்டு நூலகங்களில் தேடுவதற்கு சரியான இடமாக அமைகிறது.
வெளிப்புற நூலகத்தைச் சேர்க்க, திறக்கவும் அமைப்புகள் உங்கள் பேனாவில் தட்டவும், ஜாவாஸ்கிரிப்ட் தாவலுக்குச் செல்லவும். வள URL ஐ கைமுறையாக சேர்ப்பதன் மூலமோ அல்லது தேடுவதன் மூலமோ வளங்களைச் சேர்க்க இரண்டு வழிகள் உள்ளன.
எங்கள் கட்டுரையில் இந்த அம்சத்தை நாங்கள் பயன்படுத்தினோம் mo.js உடன் இணைய அனிமேஷன் , பாபல் முன் செயலாக்கத்துடன்.
பேனாவைப் பார்க்கவும் Mojs MUO உதாரணம் இயன் மூலம் ( @பார்டோக்டரஸ் ) கோட்பெனில்.
ஆம், CodePen பேனாக்களை உட்பொதிக்கலாம்! மேலே சென்று Mo.js டுடோரியலின் முடிவுகளைப் பார்க்க மேலே உள்ள முன்னோட்டப் பலகத்தில் கிளிக் செய்யவும்!
வெளிப்புற நூலகங்களைப் போலவே மற்ற பேனாக்களையும் இறக்குமதி செய்யலாம். இதன் பொருள் உங்கள் புதிய பேனாக்களில் தொகுதிகள் போல பயன்படுத்த முன்பு எழுதப்பட்ட பேனாக்களில் இருந்து கூறுகளை எடுக்கலாம். CodePen பயனர் ஆடம் எளிய வாக்கெடுப்பு பேனா இதற்கு ஒரு நல்ல உதாரணம்.
3. வார்ப்புருக்கள்
நீங்கள் புதிய கருத்துக்களைக் கற்றுக் கொள்ளும்போது அல்லது புதிய யோசனைகளைச் சோதிக்கும்போது, நீங்கள் அடிக்கடி ஒத்த கூறுகளைப் பயன்படுத்துகிறீர்கள் மற்றும் தொடங்குவதற்கு அதே படிகளை மீண்டும் படிக்கிறீர்கள். கோட் பென் டெம்ப்ளேட் பேனாக்களை உருவாக்க அனுமதிக்கிறது, இது மீண்டும் மீண்டும் குறைக்கப்படலாம், மேலும் நீங்கள் நேராக புள்ளிக்கு செல்லலாம்.
ஒரு டெம்ப்ளேட்டை உருவாக்க, ஒரு புதிய பேனாவைத் திறந்து, உங்கள் மாற்றங்களைச் செய்து, அதைத் தேர்ந்தெடுக்கவும் டெம்ப்ளேட் அமைப்புகள் மெனுவில் ஸ்லைடர்.
https://vimeo.com/221428690
சமீப காலம் வரை, இலவச பயனர்கள் மூன்று வார்ப்புருக்களை மட்டுமே உருவாக்க முடியும், ஆனால் இப்போது அனைத்து பயனர்களும் தங்கள் கணக்கில் எத்தனை வார்ப்புருக்கள் வேண்டுமானாலும் வைத்திருக்கலாம். குறைந்தபட்ச தாமதத்துடன் ஒரு புதிய யோசனையைத் தொடங்க சரியானது!
4. ஃபேஷன் ஒத்துழைப்பு
CodePen உடன் ஒத்துழைத்து கற்பிக்கும் திறன் அதன் மிகப்பெரிய சொத்தாக இருக்கலாம். புரோகிராமர்களுக்காக ஏற்கனவே பெரும் ஒத்துழைப்பு கருவிகள் உள்ளன, ஆனால் கோட்பெனின் அணுகுமுறை எளிமையானது மற்றும் உள்ளுணர்வு கொண்டது.
கோட்பெனின் சார்பு பயனர்கள் ஒரு புதிய பேனாவை உருவாக்கி, அதன் கீழ் ஒத்துழைப்புக்கு திறக்கலாம் பார்வையை மாற்று பட்டியல். இது உங்கள் கோட்பென் புரோ திட்டத்தைப் பொறுத்து ஒரு எண்ணிக்கையிலான மக்களுக்கு இடமளிக்கும் பகிரக்கூடிய அழைப்பாக பேனாவின் இணைப்பை மாற்றுகிறது.
ஸ்னாப் மதிப்பெண்கள் எப்படி உயரும்
இந்த நிகழ்வில், நான் HTML ஐ எழுதினேன், அதே நேரத்தில் ஒரு நண்பர் CSS ஐ நிகழ்நேரத்தில் புதுப்பித்தார், பெயரிடப்பட்ட கர்சர் அவர்கள் வேலை செய்யும் இடம் அடையாளம் காணப்பட்டது.
இணைப்பைக் கொண்ட எவரும் உலாவி அரட்டை செயல்பாட்டில் சேரலாம் மற்றும் பயன்படுத்தலாம், அவர்கள் சார்பு பயனராக இருந்தாலும் சரி அல்லது கோட்பென் கணக்கைக் கொண்டிருந்தாலும் சரி. வழங்கப்பட்ட தன்னியக்க சேமிப்பு பேனாவின் உரிமையாளர் மட்டுமே எந்த மாற்றத்தையும் சேமிக்க முடியும், இது உங்கள் குறியீட்டை மற்றவர்களுக்கு ஆபத்து இல்லாமல் திறக்க பாதுகாப்பான வழியாகும்.
இந்த பயன்முறையின் வெளிப்படையான தன்மை ஆரம்பநிலைக்கு பயனளிக்கும், ஏனெனில் கடினமான கருத்தாக்கத்தின் மூலம் உங்களுக்கு வழிகாட்ட கிட்டத்தட்ட யாரையும் உங்கள் பேனாவிற்கு அழைக்கலாம். சாத்தியமான ஊழியர்களை நேர்காணல் செய்வதற்கு இது சரியானது என்பதால் உங்கள் வழியை அறிய இது ஒரு எளிமையான முறையாகும், ஏற்கனவே உள்ளது இந்த வழியில் தொழில்முறை பயன்படுத்தப்படுகிறது !
5. பேராசிரியர் முறை
பேராசிரியர் பயன்முறை ஒரு புரோ பயனர் அறையை ஹோஸ்ட் செய்ய அனுமதிக்கிறது, அதில் அவர்கள் மட்டுமே குறியீட்டை திருத்த முடியும். ஹோஸ்டின் ப்ரோ திட்டத்தைப் பொறுத்து 10-100 பயனர்கள் பார்க்கவும் அரட்டை செய்யவும் முடியும்.
பேராசிரியர் பயன்முறை வகுப்பறை கற்றல் மற்றும் தொலைதூர கற்றல் அல்லது இரண்டின் கலவையின் இடையே நெகிழ்வுத்தன்மையை அனுமதிக்கிறது. பேராசிரியர் பயன்முறையைப் பயன்படுத்துவது வகுப்பின் பின்புறத்தில் உள்ளவர்களுக்கு முன்னால் உள்ளவர்களின் அதே அனுபவத்தைப் பெறவும், ஆசிரியருக்கு பிழைத்திருத்தங்களைக் காட்டவும் உண்மையான நேரத்தில் புதுப்பிக்கும்.
6. விளக்கக்காட்சி முறை
விளக்கக்காட்சி முறை வடிவமைக்கப்பட்டுள்ளது, ஆச்சரியப்படாமல், குறியீட்டை மனதில் கொண்டு. பயன்பாடு மேல்நிலை ப்ரொஜெக்டர்களுடன் வேலை செய்ய வடிவமைக்கப்பட்ட எளிமையான பார்வையில் காட்டுகிறது. கோட்பென் குறைந்த வேக இணைய இணைப்புகள் மற்றும் பலவீனமான வன்பொருளில் பயன்படுத்த விளக்கக்காட்சி பயன்முறையை மேம்படுத்தியுள்ளது.
புத்திசாலித்தனமான வாசகர்கள் ஏற்கனவே CodePen இன் இலவச பதிப்பு துல்லியமாக இந்த செயல்பாட்டை வழங்கும் என்பதை உணர்ந்திருக்கலாம், இருப்பினும் ப்ரோ பயன்முறையில் சில பயனுள்ள அம்சங்கள் உள்ளன. தளவமைப்பு, எழுத்துரு அளவு மற்றும் கருப்பொருள்களை ஏறக்குறைய எந்த அமைப்பிற்கும் ஏற்றவாறு விரைவாக மாற்ற முடியும், மேலும் பேனாவிற்கான இணைப்பைக் காண்பிப்பது திட்டத்தைப் பகிர்வதை எளிதாக்கும் ஒரு ஜம்போ-அளவு சுருக்கப்பட்ட URL ஐக் கொண்டுவருகிறது.
இந்த சிறிய மாற்றங்கள், முன்னோட்ட சாளரத்தை நீங்கள் காண்பிக்கும் எதற்கும் பொருந்தும் வகையில் அளவிட முடியும், ஆசிரியர்கள் மற்றும் டெவலப்பர்கள் இருவருக்கும் கருத்துக்களை வழங்கும் விளக்கக்காட்சி பயன்முறையை சரியானதாக்குங்கள். ஒரு நிரலாக்க நிலைக்கு நீங்கள் நேர்காணல் செய்வதைக் கண்டால் விளக்கக்காட்சி முறை சுத்தமாகவும், குறியீட்டை வழங்குவதற்கான எளிய வழியாகும்.
7. வடிவங்கள்
உத்வேகத்தைத் தேடுவது கோட்பெனின் சேகரிப்புகளுடன் மிகவும் எளிதாகிறது வடிவமைப்பு வடிவங்கள் .
ஒவ்வொரு வகையும் குறிப்பிட்ட பணிகளுக்காக CodePen பயனர்களால் வழங்கப்பட்ட உதாரணக் குறியீட்டின் தொகுப்பாகும். உங்கள் தளத்திற்கு மாறும் பொத்தான்களை உருவாக்க வழி தேடுகிறீர்களா? மெனுக்களைத் துருத்திக்கொள்வது? ஏறக்குறைய எந்த உதாரணத்திற்கும் பொருந்தக்கூடிய வகைகளின் செல்வம் உள்ளது.
இந்த வடிவங்கள் ஊடாடும் பொத்தான்கள் எவ்வாறு செயல்படுகின்றன என்பதை அறிய ஒரு சிறந்த வழியாகும், மேலும் பல்வேறு வழிகளில் மாறும் பயனர் இடைமுகங்கள் செயல்பட முடியும்.
8. எம்மெட்
எம்மெட் , முன்பு ஜென் கோடிங் என அறியப்பட்டது, பரவலாக HTML மற்றும் CSS மேம்பாட்டிற்கான சிறந்த நேர சேமிப்பாளராக கருதப்படுகிறது. செருகுநிரல் நீங்கள் நிறைய எழுதும் சில குறியீடுகளை எடுத்து அவற்றை எளிய குறுக்குவழிகளாக மாற்றுகிறது.
அதை விளக்குவதை விட அதை செயலில் பார்ப்பது சிறந்தது, எனவே ஒரு HTML ஆவணத்திற்கான வழக்கமான அமைப்பை எடுத்துக் கொள்ளுங்கள்:
ஒவ்வொரு HTML ஆவணத்திலும் இதைச் சேர்ப்பது இரண்டு செயல்களாகக் குறைக்கப்பட்டுள்ளது. எம்மெட் பயன்படுத்தி, தட்டச்சு செய்க ! மற்றும் அடிக்க தாவல் சாவி. மந்திரம்!
Emmet CodePen இல் தரநிலையாக செயலில் உள்ளது மற்றும் நீங்கள் ஜாவாஸ்கிரிப்ட்டில் ஒரு புதிய கருத்தைக் கற்றுக்கொள்ள முயற்சிக்கிறீர்கள் மற்றும் துணை HTML மற்றும் CSS ஐ விரைவாக உருவாக்க வேண்டும் என்றால் மிகவும் பயனுள்ளதாக இருக்கும்.
சிறந்த அனுபவத்திற்காக CodePen உடன் உருவாக்கவும்
கோட் பென் வலை உருவாக்குநர்களுக்கு ஒரு சிறந்த கருவியாகும், மேலும் புலம் தொடர்ந்து வளர்ந்து வருகிறது. ஜாவாஸ்கிரிப்ட் வலை வளர்ச்சியில் எதிர்காலத்திற்காக கற்றுக்கொள்ள ஒரு சிறந்த மொழி.
சிம் கார்டு வழங்கப்படவில்லை mm#2
ஜாவாஸ்கிரிப்டுடன் தொடங்க விரும்பும் மக்களுக்கு சில சிறந்த பயிற்சிகள் மற்றும் படிப்புகள் உள்ளன, மேலும் உங்கள் புதிய திறன்களை சோதிக்க கோட்பென் ஒரு சிறந்த சூழல்.
பகிர் பகிர் ட்வீட் மின்னஞ்சல் ஆடியோபுக்குகளை இலவசமாக பதிவிறக்கம் செய்ய 8 சிறந்த இணையதளங்கள்ஆடியோ புத்தகங்கள் ஒரு சிறந்த பொழுதுபோக்கு ஆதாரமாகும், மேலும் ஜீரணிக்க மிகவும் எளிதானது. எட்டு சிறந்த இணையதளங்களை நீங்கள் இலவசமாக பதிவிறக்கம் செய்யலாம்.
அடுத்து படிக்கவும் தொடர்புடைய தலைப்புகள்- நிரலாக்க
- HTML
- இணைய மேம்பாடு
- ஜாவாஸ்கிரிப்ட்
- CSS
இயன் பக்லி ஜெர்மனியின் பெர்லினில் வசிக்கும் ஒரு ஃப்ரீலான்ஸ் பத்திரிகையாளர், இசைக்கலைஞர், கலைஞர் மற்றும் வீடியோ தயாரிப்பாளர் ஆவார். அவர் எழுதாதபோது அல்லது மேடையில் இருக்கும்போது, அவர் ஒரு பைத்தியக்கார விஞ்ஞானி ஆவார் என்ற நம்பிக்கையில் DIY எலக்ட்ரானிக்ஸ் அல்லது குறியீட்டுடன் டிங்கரிங் செய்கிறார்.
இயன் பக்லேயிடமிருந்து மேலும்எங்கள் செய்திமடலுக்கு குழுசேரவும்
தொழில்நுட்ப குறிப்புகள், மதிப்புரைகள், இலவச மின் புத்தகங்கள் மற்றும் பிரத்யேக ஒப்பந்தங்களுக்கு எங்கள் செய்திமடலில் சேரவும்!
குழுசேர இங்கே சொடுக்கவும்