இடைமுக மேம்பாட்டு பள்ளி: மின்ஸ்கிற்கான பணிகளின் பகுப்பாய்வு மற்றும் மாஸ்கோவில் ஒரு புதிய தொகுப்பு

இன்று ஒரு புதிய சேர்க்கை திறக்கப்பட்டது யாண்டெக்ஸ் இடைமுக மேம்பாட்டு பள்ளி மாஸ்கோவில். முதல் கட்ட பயிற்சி செப்டம்பர் 7 முதல் அக்டோபர் 25 வரை நடைபெறும். மற்ற நகரங்களில் இருந்து மாணவர்கள் தொலைதூரத்தில் அல்லது நேரில் பங்கேற்க முடியும் - நிறுவனம் ஒரு விடுதியில் பயணம் மற்றும் தங்குவதற்கு பணம் செலுத்தும். இரண்டாவது, இறுதி கட்டம், டிசம்பர் 3 வரை நீடிக்கும், அதை நேரில் மட்டுமே முடிக்க முடியும்.

என் பெயர் யூலியா செரெடிச், நாங்கள் இந்த இடுகையை செர்ஜி கசகோவ் உடன் எழுதினோம். நாங்கள் இருவரும் Yandex இன் மின்ஸ்க் அலுவலகத்தில் இடைமுக டெவலப்பர்கள் மற்றும் முந்தைய ஆண்டுகளில் SRI பட்டம் பெற்றவர்கள்.

மாஸ்கோவில் பதிவு தொடங்கும் சந்தர்ப்பத்தில், முந்தைய பள்ளியின் அறிமுகப் பணிகளின் பகுப்பாய்வை வெளியிடுகிறோம் - இங்கே மின்ஸ்கில்.

SRI பணிகளின் வரலாற்றை நீங்கள் கண்டறிந்தால், ஆண்டுதோறும் ஒரு புரோகிராமருக்கான மூன்று முக்கியமான திறன்களை நாங்கள் சோதித்தோம்:

• தளவமைப்பு. ஒவ்வொரு டெவலப்பரும் லேஅவுட் செய்ய முடியும். முழு அணிக்கும் வடிவமைக்கும் மாமா செரியோஷா உங்களிடம் இருப்பது நடக்காது, நீங்கள் ஸ்கிரிப்ட்களை மட்டுமே எழுதுகிறீர்கள். எனவே, ஒவ்வொரு மாணவரும் தனக்கு எப்படி தட்டச்சு செய்யத் தெரியும் என்பதைக் காட்ட வேண்டும்.
• ஜாவாஸ்கிரிப்ட். விஷயம் லேஅவுட்டிற்கு மட்டுப்படுத்தப்பட்டிருந்தால், எங்களிடம் ஸ்கூல் ஆஃப் இன்டர்ஃபேஸ் டெவலப்மென்ட் இருக்காது, ஆனால் லேஅவுட் டிசைனர்களின் ஸ்கூல். அழகாக வடிவமைக்கப்பட்ட இடைமுகம் புதுப்பிக்கப்பட வேண்டும். எனவே, JS க்கு எப்போதும் ஒரு பணி உள்ளது, ஆனால் சில சமயங்களில் இது அல்காரிதம்களுக்கான பணியாகும் - நாங்கள் அவர்களை மிகவும் விரும்புகிறோம்.
• சிக்கலைத் தீர்ப்பது டெவலப்பரின் மிக முக்கியமான திறமையாக இருக்கலாம். இடைமுகங்களை உருவாக்கும் போது, ​​விஷயங்கள் மிக விரைவாக மாறுகின்றன. இது லூயிஸ் கரோல் போன்றது: "நீங்கள் ஒரே இடத்தில் இருக்க எவ்வளவு வேகமாக ஓட வேண்டும், மற்றொரு இடத்திற்குச் செல்ல நீங்கள் இரண்டு மடங்கு வேகமாக ஓட வேண்டும்." ஒவ்வொரு நாளும் நாம் புதிய தொழில்நுட்பங்களைக் காண்கிறோம் - அவற்றை கணக்கில் எடுத்துக்கொண்டு அவற்றைப் புரிந்துகொள்ள முடியும். எனவே, மூன்றாவது பணியில், ஒரு புதிய டெவலப்பருக்கு பொதுவாகத் தெரியாத தொழில்நுட்பங்களைப் புரிந்துகொள்ள நாங்கள் முன்மொழிந்தோம்.

ஒவ்வொரு பணியின் பகுப்பாய்விலும், சரியான நடைமுறையைப் பற்றி மட்டுமல்ல, பொதுவான தவறுகளைப் பற்றியும் நாங்கள் உங்களுக்குச் சொல்வோம்.

பணி 1: போர்ட்ஃபோலியோ

முதல் பணியானது Yandex.Collections வடிவமைப்பாளர் அலெக்ஸி செரென்கெவிச், தளவமைப்பு செய்யத் தெரிந்தவர் மற்றும் அவரது சக ஊழியரான இடைமுகம் டெவலப்பர் செர்ஜி சாம்சோனோவ் ஆகியோரால் செய்யப்பட்டது.

நிலை

போர்ட்ஃபோலியோ இணையதளத்தை உருவாக்கவும்: உங்களைப் பற்றியும், உங்கள் பணியைப் பற்றியும், பள்ளியிலிருந்து உங்கள் எதிர்பார்ப்புகளைப் பற்றியும் எங்களிடம் கூறுங்கள். தளம் முன்மொழியப்பட்ட தளவமைப்புக்கு முடிந்தவரை ஒத்திருக்க வேண்டும் (தளவமைப்புகளுக்கான இணைப்புகள்: 1000px, 600px, 320px, விவரக்குறிப்பு) நாங்கள் தளவமைப்பில் மட்டுமே ஆர்வமாக உள்ளோம், எனவே JavaScript ஐப் பயன்படுத்த வேண்டாம்.

சரிபார்க்கும் போது நாம் கணக்கில் எடுத்துக்கொள்வோம்:

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

நன்மை இருக்கும்:

• நவீன CSS தீர்வுகளின் பயன்பாடு: ஃப்ளெக்ஸ்பாக்ஸ், கிரிட் போன்றவை.
• தகவமைப்பு தளவமைப்பு;
• முன் மற்றும் (அல்லது) பிந்தைய செயலிகளின் பயன்பாடு, அசெம்பிளி, மினிஃபிகேஷன், அவுட்புட் குறியீட்டை மேம்படுத்துதல்;
• HTML படிவ சரிபார்ப்பு, பகட்டான கோப்பு பதிவேற்ற பொத்தான்.

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

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

முதல் பணியைச் சரிபார்த்ததன் விளைவாக முடிந்தவரை புறநிலைத்தன்மையைக் கொண்டுவருவதற்காக, இந்த காசோலைக்கு நிறைய அளவுகோல்கள் இருந்தன.

அடிப்படை

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

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

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

சொற்பொருள் தளவமைப்பு. "எத்தனை முறை அவர்கள் உலகிற்குச் சொன்னார்கள்" என்று இணைப்பை வடிவமைக்க வேண்டும் , பொத்தான் - என . அதிர்ஷ்டவசமாக, பெரும்பாலான வேட்பாளர்கள் இந்தத் தேவையையும் பூர்த்தி செய்தனர். எஸ்ஆர்ஐயின் எதிர்பார்ப்புகளில் மறைக்கப்பட்ட பட்டியலை அனைவரும் அங்கீகரிக்கவில்லை, இது div குறிச்சொற்களைப் பயன்படுத்தி உருவாக்கியது, ஆனால் அது மோசமாக இல்லை. ஒரு வேட்பாளர், தனக்குத் தெரிந்த சொற்பொருள் குறிச்சொற்களை - தேவையான இடத்தில், தேவையில்லாத இடத்தில் செருகினார். எடுத்துக்காட்டாக, பட்டியலுக்குப் பதிலாக - மற்றும் . எல்லாவற்றிற்கும் மேலாக, சொற்பொருள் - இது உங்கள் பக்கத்தின் கலவை மற்றும் ஒவ்வொரு தொகுதியின் நோக்கத்தையும் (பெரும்பான்மையினர் இங்கே நிர்வகித்தனர்), அத்துடன் முன் மற்றும் / அல்லது பிந்தைய செயலிகளின் பயன்பாடு (சிலர் அதை இங்கே நிர்வகித்தார்கள், இருப்பினும் இது புள்ளிகளிலும் இருந்தது - பெரும்பாலும் அவர்கள் குறைவாகப் பயன்படுத்தினார்கள் மற்றும் scss) .

வேலை செய்யும் ஸ்லைடர். வேலைநிறுத்தத்தில் JS ஐப் பயன்படுத்த முடியாது என்று எழுதினோம். இங்கே சிக்கல்களைத் தீர்க்கும் திறன் சோதிக்கப்பட்டது - ஒரு கொத்தை பயன்படுத்தி ஒரு ஸ்லைடரை உருவாக்கலாம் மற்றும் . அனைத்து மேஜிக்களும் தேர்வாளர் மட்டத்தில் நடக்கும் #பொத்தான்-N: சரிபார்க்கப்பட்டது ~ .slider-inner .slider-slides. உள்ளீட்டு தேர்வுப்பெட்டிகளில் ஒன்றைக் கிளிக் செய்தால், அது சரிபார்க்கப்பட்ட நிலைக்குச் செல்லும். இதைப் பயன்படுத்தி, ஸ்லைடுகளைக் கொண்ட கொள்கலனில் நமக்குத் தேவையான மொழிபெயர்ப்பை ஒதுக்கலாம்: உருமாற்றம்: மொழிபெயர்த்தல்(-33%). ஸ்லைடரை செயல்படுத்துவதைக் காணலாம் இங்கே.

கீழ்தோன்றும் பட்டியல்கள். இங்கே எல்லாம் கூட வந்தது மற்றும் இதேபோன்ற தேர்வி: .accordion-item input:checked ~ .accordion-item__content. செயல்படுத்துவதைக் காணலாம் இங்கே.

:ஹோவர், :ஆக்டிவ் மற்றும் :ஃபோகு* நிலைகளின் கிடைக்கும் தன்மை. ஒரு மிக முக்கியமான புள்ளி. இடைமுகத்துடன் தொடர்பு கொள்ளும்போது ஆறுதல் அதைச் சார்ந்தது. பயனர் எப்போதும் தங்கள் செயல்களைப் பற்றிய கருத்தைப் பெற வேண்டும். கேள்வித்தாளுடனான தொடர்பு முழுவதும் இந்த உருப்படி சரிபார்க்கப்பட்டது. நான் "என்னை அழை" பொத்தானைக் கிளிக் செய்து பார்வைக்கு எதுவும் நடக்கவில்லை என்றால் (கோரிக்கை அனுப்பப்பட்டிருந்தாலும்), இது மோசமானது, ஏனென்றால் நான் அதை மீண்டும் மீண்டும் கிளிக் செய்வேன். இதன் விளைவாக, பத்து கோரிக்கைகள் அனுப்பப்படும் மற்றும் நான் பத்து முறை திரும்ப அழைக்கப்படுவேன். மொபைல் சாதனங்களில் சுட்டி இல்லை என்பதை நாம் மறந்துவிடக் கூடாது, அதாவது ஒரு மிதவை இருக்கக்கூடாது. சொற்பொருள் பற்றிய புள்ளியை நிறைவேற்றியவர்களை பாதிக்காத மற்றொரு புள்ளி. உங்கள் கட்டுப்பாடு ஒரு ஊடாடும் உறுப்பு இல்லை என்றால், நீங்கள் அதன் மேல் வட்டமிடும்போது, ​​கர்சர் நிலையானதாக இருக்கும். நீங்கள் வட்டமிடுவதற்கு எதிர்வினையை எழுதியிருந்தாலும், அது மிகவும் அசுத்தமாகத் தெரிகிறது. கர்சரை குறைத்து மதிப்பிடாதீர்கள்: சுட்டிக்காட்டி.

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

சமீபத்திய தொழில்நுட்பத்தைப் பயன்படுத்துதல். பலர் ஃப்ளெக்ஸைப் பயன்படுத்தினர், ஆனால் யாரும் கட்டத்தைப் பயன்படுத்தி பணியை முடிக்கவில்லை. ஃப்ளெக்ஸ் சரியாகப் பயன்படுத்தப்பட்டால் புள்ளி கணக்கிடப்படும். இந்த நெகிழ்வுகளின் காரணமாக எங்காவது தளவமைப்பு பிரிந்திருந்தால், ஐயோ, நீங்கள் எந்த கூடுதல் புள்ளிகளையும் பெறவில்லை.

படிவம் சரிபார்ப்பு. படிவத்தின் ஒவ்வொரு உள்ளீட்டிலும் தேவையான பண்புக்கூறுகளைச் சேர்ப்பது மட்டுமே தேவைப்பட்டது. மின்னஞ்சல் புலத்தை மின்னஞ்சலாக சரிபார்த்தவர்களுக்கு புள்ளிகளைச் சேர்த்துள்ளோம்.

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

குறுக்கு உலாவி இணக்கத்தன்மை. நவீன உலாவிகளின் இரண்டு சமீபத்திய பதிப்புகளில் (IE இல்லாமல் - பங்கேற்பாளர்கள் அதிர்ஷ்டசாலிகள்) எல்லாம் சரியாக உள்ளதா எனச் சரிபார்த்தோம், அதே போல் iPhoneகளில் Safari மற்றும் Androids இல் Chrome இல்.

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

இணையத்தில் எங்காவது தங்கள் தளத்தை ஹோஸ்ட் செய்தவர்கள் எந்த குறிப்பிட்ட நன்மையையும் பெறவில்லை - ஆனால் மதிப்பாய்வாளர்கள் களஞ்சியங்களைப் பதிவிறக்கம் செய்து அவற்றை தங்கள் கணினியில் உள்நாட்டில் இயக்க வேண்டியதில்லை. எனவே இது கர்மாவிற்கு ஒரு கூட்டாக செயல்பட்டது.

முதல் பணி முதன்மையாக மாணவருக்கு மிகவும் பயனுள்ளதாக இருந்தது. நாங்கள் ஏற்காதவர்களிடம் இப்போது தயார் செய்யப்பட்ட விண்ணப்பம் உள்ளது - நீங்கள் அதை அனைத்து பதில்களிலும் பெருமையுடன் இணைக்கலாம் அல்லது உங்கள் gh-பக்கங்களில் இடுகையிடலாம்.

பணி 2: போக்குவரத்து பாதை

பணியின் ஆசிரியர் டெனிஸ் பாலிகோ தேடல் இடைமுகக் குழுவின் தலைவர்.

நிலை

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

செயல்பாட்டு கையொப்பம்:

const solution = function(graph, start, finish)  {
    // Ваше решение
} 

எடுத்துக்காட்டு உள்ளீட்டு தரவு:

const graph = {
  start: { A: 50, B: 20 },
  A: { C: 40, D: 20 },
  B: { A: 90, D: 90 },
  C: { D: 160, finish: 50 },
  D: { finish: 20 },
  finish: {}
};
const start = 'start';
const finish = 'finish'; 

எடுத்துக்காட்டு வெளியீடு:

{
    distance: 90,
    path: ['start', 'A', 'D', 'finish']
} 

குறிப்பு: தீர்வு எலும்புக்கூடு src/ கோப்புறையில் உள்ளது, தீர்வு.js இல் உங்கள் தீர்வை வைக்கவும்.

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

அடிப்படை

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

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

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

கடைசி அளவுகோல் autotests முன்னிலையில் உள்ளது. ஒரு சிலர் மட்டுமே அவற்றைச் சேர்த்தனர், ஆனால் அனைவருக்கும் அது அவர்களின் கர்மாவில் ஒரு பெரிய பிளஸ் ஆனது.

சரியான தீர்வு:

const solution = function(graph, START, FINISH)  {
    // Всё не бесплатно в этом мире
    const costs = Object.assign({[FINISH]: Infinity}, graph[START]);

    // Первая волна родительских нод
    const parents = { [FINISH]: null };
    Object.keys(graph[START]).reduce((acc, child) => (acc[child] = START) && acc, parents)

    const visited = [];
    let node;

    // Ищем «дешёвого» родителя, отмечаем пройденные
    do {
        node = lowestCostNode(costs, visited);
        let children = graph[node];
        for (let n in children) {
            let newCost = costs[node] + children[n];

            // Ещё не оценена или нашёлся более дешёвый переход
            if (!costs[n] || costs[n] > newCost) {
                costs[n] = newCost;
                parents[n] = node;
            }
        }
        visited.push(node);
    } while (node)

    return {
        distance: costs[FINISH],
        path: optimalPath(parents)
    };

    // Возврат назад по самым «дешёвым» родителям
    function optimalPath(parents) {
        let optimalPath = [FINISH];
        let parent = parents[FINISH];
        while (parent && parent !== START) {
            optimalPath.push(parent);
            parent = parents[parent];
        }
        optimalPath.push(START);
        return optimalPath.reverse();
    }

    // Минимальная стоимость из текущей ноды среди непросмотренных
    function lowestCostNode(costs, visited) {
        return Object.keys(costs).reduce((lowest, node) => {
            if (lowest === null || costs[node] < costs[lowest]) {
                if (!visited.includes(node)) {
                    lowest = node;
                }
            }

            return lowest;
        }, null);
    };
};

பணி 3: நிகழ்வுகள் நாட்காட்டி

இது இடைமுக டெவலப்பர்களான செர்ஜி கசகோவ் மற்றும் அலெக்சாண்டர் போட்ஸ்கிரெப்கின் ஆகியோரால் தயாரிக்கப்பட்டது.

நிலை

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

காலெண்டர் ஒரு பட்டியல் போல் இருக்க வேண்டும். வேறு வடிவமைப்பு தேவைகள் எதுவும் இல்லை. நிகழ்வு நினைவூட்டல்களை 3, 7 மற்றும் 14 நாட்களுக்கு முன்பே அமைக்கவும். இணையத்திலிருந்து முதல் பதிவிறக்கத்திற்குப் பிறகு, காலெண்டர் திறக்கப்பட்டு ஆஃப்லைனில் செயல்பட வேண்டும்.

பயனுள்ள வளங்கள்

முகப்பு மாநாட்டு அட்டவணை:
confs.tech/javascript?topics=javascript%2Bcss%2Bux

சேவை ஊழியர்கள்:
developer.mozilla.org/ru/docs/Web/API/Service_Worker_API/Using_Service_Workers
developers.google.com/web/fundamentals/primers/service-workers

அறிவிப்புகள் API:
developer.mozilla.org/ru/docs/Web/API/Notifications_API

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

அடிப்படை

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

ஒரு மூலத்திலிருந்து நிகழ்வுகளின் பட்டியலைப் பெறுதல். இது தளவமைப்பு பணி அல்ல, எனவே இதில் உள்ள நிகழ்வுகளின் பட்டியல் கணக்கிடப்படவில்லை. நீங்கள் எப்போது வேண்டுமானாலும் ஒரு மாநாட்டை ரத்து செய்யலாம், அதை மீண்டும் திட்டமிடலாம் அல்லது புதிய ஒன்றைச் சேர்க்கலாம். எனவே வெளியில் இருந்து தரவைப் பெறுவது மற்றும் பெறப்பட்ட JSON அடிப்படையில் தளவமைப்பை வழங்குவது அவசியம். எந்த வகையிலும் தரவைப் பெறுவது முக்கியம் (பெறும் முறையைப் பயன்படுத்தி அல்லது XMLHttpRequest ஐப் பயன்படுத்தி). ஒரு நபர் பெறுவதற்காக பாலிஃபில்லைச் சேர்த்து, ரீட்மீயில் தனது விருப்பத்தைக் குறித்திருந்தால், இது ஒரு கூட்டாகக் கணக்கிடப்படும்.

பிழைகள் இல்லாமல் சேவை பணியாளர் பதிவு முதல் பதிவிறக்கத்திற்குப் பிறகு ஆஃப்லைனில் வேலை செய்யுங்கள். இங்கே ஒரு உதாரணம் முதல் துவக்கத்தில் அட்டவணை கேச்சிங் கொண்ட சேவை பணியாளர். சேவைப் பணியாளர்கள், அவர்களின் திறன்கள் மற்றும் அவர்களுடன் பணிபுரியும் வழிகள் (தேக்ககங்களுடன் பணிபுரியும் உத்திகள், ஆஃப்லைனில் வேலை செய்வது) பற்றிய விவரங்களை இங்கே காணலாம்.

நினைவூட்டலை அமைக்கும் திறன்அது உண்மையில் 3, 7, 14 நாட்களுக்குப் பிறகு வேலை செய்யும். அறிவிப்புகள் API ஐப் புரிந்துகொள்வது அவசியம், அதற்கான இணைப்பு பணியில் சரியாக இருந்தது. தள்ளுவதற்கான நேரம் இதுதானா என்பதைச் சரிபார்க்க, குறிப்பிட்ட செயலாக்கம் எதையும் நாங்கள் எதிர்பார்க்கவில்லை. எந்த வேலை விருப்பமும் ஏற்றுக்கொள்ளப்பட்டது: லோக்கல் ஸ்டோரேஜ், IndexDB இல் சேமிப்பகம் அல்லது சேவைப் பணியாளரால் அவ்வப்போது வாக்குப்பதிவு. புஷ் சேவையகத்தை உருவாக்குவது கூட சாத்தியமாகும் (இங்கே உதாரணமாக), ஆனால் அது ஆஃப்லைனில் வேலை செய்யாது. பக்கத்தை மூடிய பிறகு - மற்றும் சிறிது நேரம் கழித்து திறக்கப்பட்ட பிறகு ஒரு அழுத்தத்தைப் பெறுவது சமமாக முக்கியமானது. பக்கம் மூடப்பட்ட அதே நேரத்தில் நினைவூட்டல் இறந்தால், தீர்வு கணக்கிடப்படாது. தோழர்களே விமர்சகர்களைப் பற்றி யோசித்து, இப்போதே ஒரு உந்துதலைப் பெறுவதை சாத்தியமாக்கியது - அதனால் 3 நாட்கள் காத்திருக்க வேண்டாம்.

டெஸ்க்டாப்பில் ஒரு ஐகானை வைக்கும் திறன் (PWA). கோப்பு இருப்பதை நாங்கள் சரிபார்த்தோம் manifest.json என்பது சரியான சின்னங்களுடன். சிலர் இந்தக் கோப்பை உருவாக்கினர் (அல்லது CreateReactAppல் உருவாக்கி விட்டு) - ஆனால் சரியான ஐகான்களைச் சேர்க்கவில்லை. பின்னர், நிறுவ முயற்சிக்கும் போது, ​​"வேறு ஐகான் தேவை" போன்ற பிழை ஏற்பட்டது.

கோட் ஸ்டைல் ​​மற்றும் திட்ட அமைப்பு. இரண்டாவது பணியைப் போலவே, நாங்கள் ஒரு குறியீட்டு பாணியைப் பார்த்தோம் (அது எங்களுடையதுடன் ஒத்துப்போகாவிட்டாலும் கூட). சில தோழர்கள் லிண்டர்களில் திருகினார்கள் - அது நன்றாக இருக்கிறது.

கன்சோல் பிழைகள். கன்சோலில் ஏதோ தவறு இருப்பதாக ஒரு காட்டி சரியாக இருந்தால், மற்றும் பங்கேற்பாளர் அதில் கவனம் செலுத்தவில்லை என்றால், நாங்கள் புள்ளிகளைக் கழித்தோம்.

முடிவுகளை

பங்கேற்பாளர்களின் முடிவுகளில் வேடிக்கை என்னவென்றால்:

• ஒரு கேள்வித்தாளில் பின்வரும் வாசகம் இருந்தது: “ஒரு புரோகிராமர் நண்பர் எனக்கு ஒரு ரியாக்ட் அப்ளிகேஷனை உருவாக்க உதவினார். எப்படி, ஏன் என்ற கேள்விகளால் நான் அவரைத் தாக்கினேன், அவர் என்னிடம் கூறினார். நான் அதை மிகவும் விரும்பினேன், அதைப் பற்றி மேலும் அறிய விரும்புகிறேன். எங்கள் முழு மனதுடன் இந்த பயன்பாட்டிற்கு நாங்கள் வேரூன்றி இருந்தோம், ஆனால் துரதிர்ஷ்டவசமாக, விண்ணப்பத்தை வேலை செய்ய வேட்பாளரின் நண்பர் மிகவும் உதவியாக இல்லை.
• ஒரு வேட்பாளர் RAR காப்பகம் அமைந்துள்ள GitHub க்கு இணைப்பை அனுப்பியுள்ளார் - இது குறித்து கருத்து தெரிவிப்பது கடினம். 🙂
• மற்றொரு வேட்பாளர், solution.js கோப்பின் முதல் வரியில் உள்ள கருத்தில், அவர் வழிமுறையை நகலெடுத்ததாக நேர்மையாக ஒப்புக்கொண்டார்.

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

இதன் விளைவாக, பணிகளை முடிப்பதில் வெற்றி விகிதங்களின் சுவாரஸ்யமான விநியோகம் இருந்தது. பங்கேற்பாளர்கள் முதல் பணியை சராசரியாக 60% ஆகவும், இரண்டாவது 50% ஆகவும், மூன்றாவது பணியை மிகவும் கடினமாகவும் சராசரியாக 40% ஆகவும் முடித்தனர்.

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

இரண்டு வருடங்களுக்கு முன்பு என் SRI நுழைவுப் பணியைப் பார்த்ததும், நான் அதை ஒருபோதும் தீர்க்க மாட்டேன் என்று நினைத்தேன். இந்த நேரத்தில் முக்கிய விஷயம் என்னவென்றால், உட்கார்ந்து, நிலைமைகளை கவனமாகப் படித்து அதைச் செய்யத் தொடங்குங்கள். நிலைமைகளில் கிட்டத்தட்ட 80% தீர்வு உள்ளது என்று மாறிவிடும். எடுத்துக்காட்டாக, மூன்றாவது பணியின் நிலையில் (மிகவும் கடினமானது), MDN இல் சேவை பணியாளர்கள் மற்றும் அறிவிப்புகள் APIக்கான இணைப்புகளைச் சேர்த்துள்ளோம். இணைப்புகளின் உள்ளடக்கங்களைப் படித்த மாணவர்கள் சிரமமின்றி அதை முடித்தனர்.

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

ஆதாரம்: www.habr.com