Frontend டெவலப்பர் நேர்காணல் கேள்விகள்: பொதுவான கேள்வி பட்டியல்

1. வலை உருவாக்கத்தில் HTML, CSS மற்றும் JavaScript ஆகியவற்றுக்கு இடையே உள்ள வேறுபாடுகளை விளக்குங்கள்

பதில்: HTML என்பது ஒரு வலைப்பக்கத்தில் உள்ள உள்ளடக்கத்தின் கட்டமைப்பையும் வடிவமைப்பையும் உருவாக்க பயன்படும் மார்க்அப் மொழியாகும்.

- CSS என்பது ஒரு வலைப்பக்கத்தின் தோற்றத்தையும் அமைப்பையும் வரையறுக்கப் பயன்படும் ஒரு ஸ்டைலிங் மொழியாகும்.

- ஜாவாஸ்கிரிப்ட் என்பது ஒரு வலைப்பக்கத்தில் ஊடாடுதல் மற்றும் செயலாக்க தர்க்கத்தைச் சேர்க்கப் பயன்படும் ஒரு நிரலாக்க மொழியாகும்.

2. பதிலளிக்கக்கூடிய இணையதளத்தை எவ்வாறு உருவாக்குவது?

பதில்: பதிலளிக்கக்கூடிய இணையதளத்தை உருவாக்க, வெவ்வேறு திரை அளவுகளுக்கு ஏற்ப திரவ அளவீட்டு அலகுகள், கட்ட அமைப்புகள் மற்றும் ஃப்ளெக்ஸ்பாக்ஸ் போன்ற ஊடக வினவல்கள் மற்றும் CSS நுட்பங்களைப் பயன்படுத்துகிறோம். நாங்கள் நெகிழ்வான வடிவமைப்பு வடிவங்கள், பலதரப்பட்ட படத் தீர்மானங்கள் மற்றும் திரை அளவின் அடிப்படையில் கூறுகளைக் காண்பி/மறைக்கவும் பயன்படுத்துகிறோம்.

3. இன் CSS இன் கருத்தை விளக்குங்கள் box model.

பதில்: CSS இல் உள்ள பெட்டி மாதிரி என்பது ஒரு உறுப்பின் அடிப்படை கூறுகளை உள்ளடக்கிய ஒரு மாதிரியாகும்: எல்லை, விளிம்பு, திணிப்பு மற்றும் உள்ளடக்கம். ஒவ்வொரு கூறுகளும் உறுப்பின் உள்ளடக்கத்தைச் சுற்றி ஒரு "பெட்டியை" உருவாக்குகிறது மற்றும் வலைப்பக்கத்தில் உறுப்புக்கான இடம் மற்றும் நிலையை வரையறுக்கிறது.

4. பூட்ஸ்டார்ப் போன்ற CSS கட்டமைப்புகளுடன் நீங்கள் எவ்வாறு வேலை செய்கிறீர்கள்?

பதில்: பூட்ஸ்டார்ப் போன்ற CSS கட்டமைப்புகளுடன் பணிபுரிய, கட்டமைப்பின் CSS மற்றும் JavaScript கோப்புகளை எங்கள் வலைப்பக்கத்தில் சேர்க்கிறோம். இடைமுகத்தை உருவாக்க மற்றும் மேம்பாட்டு செயல்முறையை விரைவுபடுத்த கட்டமைப்பால் வழங்கப்பட்ட முன் வரையறுக்கப்பட்ட வகுப்புகள் மற்றும் கூறுகளைப் பயன்படுத்தலாம்.

5. சேவையகத்திலிருந்து தரவை அனுப்புதல் மற்றும் பெறுவதில் அஜாக்ஸ் எவ்வாறு செயல்படுகிறது என்பதை விளக்குக

பதில்: AJAX(Asynchronous JavaScript மற்றும் XML) இணையப் பக்கத்திலிருந்து ஒத்திசைவற்ற HTTP கோரிக்கைகளை அனுப்பவும், முழுப் பக்கத்தையும் மீண்டும் ஏற்றாமல் சேவையகத்திலிருந்து பதில்களைப் பெறவும் அனுமதிக்கிறது. கோரிக்கைகளை உருவாக்கவும் பெறப்பட்ட முடிவுகளை GET அல்லது POST போன்ற முறைகள் மூலம் கையாளவும் JavaScript இன் XMLHttpRequest ஆப்ஜெக்ட் அல்லது Fetch API ஐப் பயன்படுத்துகிறோம்.

6. பதிலளிக்கக்கூடிய இணையதளத்தை உருவாக்க CSS இல் மீடியா வினவல்களின் பயன்பாட்டை விளக்கவும்

பதில்: CSS இல் உள்ள மீடியா வினவல்கள் திரையின் அளவு, தெளிவுத்திறன் மற்றும் சாதன நோக்குநிலை போன்ற நிபந்தனைகளின் அடிப்படையில் வெவ்வேறு CSS விதிகளைப் பயன்படுத்த அனுமதிக்கிறது. நிபந்தனைகளை வரையறுக்க ஊடக வினவல்களைப் பயன்படுத்துகிறோம் மற்றும் அந்த நிபந்தனைகள் பூர்த்தி செய்யப்படும்போது பயன்படுத்தப்படும் தொடர்புடைய CSS விதிகள்.

7. பக்கம் ஏற்றும் நேரத்தையும் இணையதள செயல்திறனையும் எவ்வாறு மேம்படுத்துவது?

பதில்: பக்கம் ஏற்றும் நேரம் மற்றும் இணையதளத்தின் செயல்திறனை மேம்படுத்த, நாம் பல நடவடிக்கைகளை எடுக்கலாம்:

- CSS, ஜாவாஸ்கிரிப்ட் மற்றும் படக் கோப்புகளை மேம்படுத்தி சுருக்கவும்.

- உலாவியில் ஆதாரங்களை தற்காலிகமாக சேமிக்க கேச்சிங் நுட்பங்களைப் பயன்படுத்தவும்.

- கோப்புகளை இணைப்பதன் மூலமும் பட உருவங்களைப் பயன்படுத்துவதன் மூலமும் HTTP கோரிக்கைகளின் எண்ணிக்கையைக் குறைக்கவும்

- இணையதளத்தின் ஏற்றத்தை விநியோகிக்க, உள்ளடக்க விநியோக நெட்வொர்க்கை(CDN) பயன்படுத்தவும்.

- எஸ்சிஓவிற்கான திறமையான மூலக் குறியீடு மற்றும் தேர்வுமுறையை உறுதிப்படுத்த HTML மற்றும் CSS கட்டமைப்பை மேம்படுத்தவும்.

8. ஜாவாஸ்கிரிப்ட்டில் நிகழ்வுகளை எவ்வாறு கையாளுகிறீர்கள்? addEventListener இன் பயன்பாட்டை விளக்குங்கள்

பதில்: JavaScript இல் நிகழ்வுகளைக் கையாள, HTML உறுப்புடன் நிகழ்வு கையாளுதல் செயல்பாட்டை இணைக்க addEventListener() முறையைப் பயன்படுத்துகிறோம். உதாரணத்திற்கு:

const button = document.querySelector('#myButton');  
button.addEventListener('click', function() {  
    // Event handling when the button is clicked  
});  


addEventListener() முறையானது நிகழ்வின் பெயரை(எ.கா., 'கிளிக்', 'மவுஸ்ஓவர்') மற்றும் நிகழ்வு நிகழும்போது செயல்படுத்தப்படும் நிகழ்வு கையாளுதல் செயல்பாட்டைக் குறிப்பிட அனுமதிக்கிறது.

9. CSS மற்றும் JavaScript ஐப் பயன்படுத்தி இயக்கம் மற்றும் அனிமேஷன் விளைவுகளை எவ்வாறு உருவாக்குவது?

பதில்: CSS மற்றும் JavaScript ஐப் பயன்படுத்தி இயக்கம் மற்றும் அனிமேஷன் விளைவுகளை உருவாக்க, ஒரு தனிமத்தின் காட்சி பண்புகளை மாற்ற, மாற்றம், அனிமேஷன் மற்றும் உருமாற்றம் போன்ற CSS பண்புகளைப் பயன்படுத்தலாம். CSS பண்புகளைக் கட்டுப்படுத்தவும் நிகழ்வுகளின் அடிப்படையில் அனிமேஷன் விளைவுகளைத் தூண்டவும் JavaScript ஐப் பயன்படுத்தலாம்.

10. குறுக்கு-உலாவி இணக்கத்தன்மை மற்றும் இணைய மேம்பாட்டில் இந்த சிக்கலை எவ்வாறு தீர்ப்பது என்பதை விளக்குங்கள்

பதில்: குறுக்கு-உலாவி இணக்கத்தன்மை என்பது வெவ்வேறு இணைய உலாவிகளில் தொடர்ந்து மற்றும் நம்பகத்தன்மையுடன் செயல்படும் ஒரு வலைத்தளத்தின் திறன் ஆகும். இந்தச் சிக்கலைத் தீர்க்க, பல உலாவிகளில் இணையதளம் சரியாகச் செயல்படுவதை நாங்கள் சோதித்து உறுதிப்படுத்த வேண்டும். நாங்கள் மேம்பட்ட இணைய மேம்பாட்டு நுட்பங்களைப் பயன்படுத்த வேண்டும், இணைய தரநிலைகளை கடைபிடிக்க வேண்டும் மற்றும் பழைய உலாவிகளால் பரவலாக ஆதரிக்கப்படாத அம்சங்களின் பயன்பாட்டைக் கட்டுப்படுத்த வேண்டும்.

11. Frontend டெவலப்மென்ட்டில் மீண்டும் பயன்படுத்தக்கூடிய கூறுகளை எப்படி உருவாக்கி பயன்படுத்துகிறீர்கள்?

பதில்: Frontend மேம்பாட்டில் மீண்டும் பயன்படுத்தக்கூடிய கூறுகளை உருவாக்க மற்றும் பயன்படுத்த, நாங்கள் அடிக்கடி ரியாக்ட், வியூ அல்லது ஆங்குலர் போன்ற UI லைப்ரரிகளைப் பயன்படுத்துகிறோம். நாங்கள் சுயாதீனமான கூறுகளை உருவாக்குகிறோம், பின்னர் அவற்றை பயனர் இடைமுகத்தின் பல்வேறு பகுதிகளில் பயன்படுத்துகிறோம். இது மாடுலாரிட்டி மற்றும் குறியீடு மறுபயன்பாட்டை அதிகரிக்கிறது, திறமையான UI நிர்வாகத்தை எளிதாக்குகிறது.

12. HTML இல் சொற்பொருள் குறிச்சொற்களின் பயன்பாடு மற்றும் அவை SEO க்கு ஏன் முக்கியம் என்பதை விளக்குங்கள்

பதில்: HTML இல் உள்ள சொற்பொருள் குறிச்சொற்கள், அதாவது <header>, <nav>, <section>, <article> மற்றும் <footer> ஆகியவை வலைப்பக்கத்தில் உள்ள உறுப்புகளின் பொருளையும் கட்டமைப்பையும் வரையறுக்கப் பயன்படுகிறது. அவை மூலக் குறியீட்டை மேலும் படிக்கக்கூடியதாகவும் புரிந்துகொள்ளக்கூடியதாகவும் ஆக்குகின்றன மற்றும் தேடுபொறிகளுக்கு முக்கியமான தகவலை வழங்குகின்றன. நன்கு செயல்படுத்தப்பட்ட சொற்பொருள் குறிச்சொற்கள் தேடல் முடிவுகளில் வலைத்தளத்தின் தேடலையும் தரவரிசையையும் மேம்படுத்தலாம்.

13. இணையதளத்தில் எஸ்சிஓவை எவ்வாறு மேம்படுத்துவது?

பதில்: இணையதளத்தில் எஸ்சிஓவை மேம்படுத்த, நாம் பல நடவடிக்கைகளை எடுக்கலாம், அவற்றுள்:

- தொடர்புடைய முக்கிய வார்த்தைகளை உள்ளடக்கிய கட்டாய மற்றும் துல்லியமான மெட்டா தலைப்புகளை உருவாக்குதல்.

- பக்க உள்ளடக்கத்தின் நல்ல சுருக்கத்தை வழங்கும் கவர்ச்சிகரமான மெட்டா விளக்கங்களை உருவாக்குதல்.

- தெளிவான உள்ளடக்க கட்டமைப்பை வழங்க பொருத்தமான தலைப்பு குறிச்சொற்களை(h1, h2, h3) பயன்படுத்துதல்.

- Alt பண்புக்கூறுகள் மற்றும் பொருத்தமான அளவுகளைப் பயன்படுத்தி படங்களை மேம்படுத்துதல்.

- கண்டறிதல் மற்றும் வலம் வரும் தன்மையை மேம்படுத்த உள் இணைப்புகளை உருவாக்குதல்.

- பயனர் நட்பு மற்றும் முக்கிய வார்த்தைகள் நிறைந்த URLகளை வடிவமைத்தல்.

- விரும்பிய முக்கிய வார்த்தைகளை இலக்காகக் கொண்டு தரம் மற்றும் தொடர்புடைய உள்ளடக்கத்தை உருவாக்குதல்.

14. இணையப் படிவங்களில் பயனர் உள்ளீட்டுத் தரவை எவ்வாறு கையாள்வது மற்றும் சரிபார்ப்பது?

பதில்: இணையப் படிவங்களில் பயனர் உள்ளீட்டுத் தரவைக் கையாளவும் சரிபார்க்கவும், JavaScript மற்றும் PHP போன்ற நுட்பங்களைப் பயன்படுத்துகிறோம். கிளையன்ட் பக்கத்தில், உலாவியில் நேரடியாக நிகழ்நேர தரவு சரிபார்ப்பைச் செய்ய JavaScript ஐப் பயன்படுத்துகிறோம். சேவையக பக்கத்தில், பாதுகாப்பையும் நம்பகத்தன்மையையும் உறுதிப்படுத்த, தரவை மீண்டும் செயலாக்க மற்றும் சரிபார்க்க PHP ஐப் பயன்படுத்துகிறோம்.

15. SASS அல்லது LESS போன்ற CSS முன்செயலிகளின் பயன்பாடு மற்றும் முகப்பு மேம்பாட்டில் அவற்றின் நன்மைகளை விளக்குங்கள்

பதில்: SASS(Syntactically Awesome Stylesheets) அல்லது LESS(Leaner CSS) போன்ற CSS முன்செயலிகள் CSSஐ எழுதுவதற்கான சக்திவாய்ந்த அம்சங்களையும் பயன்பாடுகளையும் வழங்கும் CSS நீட்டிப்பு மொழிகளாகும். மேலும் படிக்கக்கூடிய, பராமரிக்கக்கூடிய மற்றும் மீண்டும் பயன்படுத்தக்கூடிய CSS ஐ உருவாக்க, வெளிப்பாடுகள், மாறிகள், கூடு கட்டுதல் மற்றும் மிக்ஸின்களைப் பயன்படுத்த அவை எங்களை அனுமதிக்கின்றன. CSS முன்செயலிகளைப் பயன்படுத்துவது வளர்ச்சியை விரைவுபடுத்த உதவுகிறது மற்றும் பெரிய Frontend திட்டங்களில் CSS ஐ திறம்பட நிர்வகிக்க உதவுகிறது.