අතුරුමුහුණත් සංවර්ධන පාසල: මින්ස්ක් සඳහා කාර්යයන් විශ්ලේෂණය සහ මොස්කව්හි නව කට්ටලයක්

අද නව බඳවා ගැනීමක් විවෘත විය Yandex අතුරුමුහුණත් සංවර්ධන පාසල මොස්කව්හි. පළමු අදියරේ පුහුණුව සැප්තැම්බර් 7 සිට ඔක්තෝබර් 25 දක්වා පැවැත්වේ. වෙනත් නගරවල සිසුන්ට දුරස්ථව හෝ පෞද්ගලිකව එයට සහභාගී වීමට හැකි වනු ඇත - සමාගම විසින් නේවාසිකාගාරයක ගමන් සහ නවාතැන් සඳහා ගෙවනු ඇත. දෙවන, අවසාන අදියර ද දෙසැම්බර් 3 දක්වා පවතිනු ඇත, එය සම්පූර්ණ කළ හැක්කේ පුද්ගලිකව පමණි.

මගේ නම යුලියා සෙරෙඩිච්, අපි මෙම ලිපිය ලිව්වේ සර්ජි කසකොව් සමඟ ය. අපි දෙදෙනාම Yandex හි Minsk කාර්යාලයේ අතුරු මුහුණත් සංවර්ධකයින් සහ පෙර වසරවල SRI උපාධිධාරීන් වේ.

අතුරුමුහුණත් සංවර්ධන පාසල: මින්ස්ක් සඳහා කාර්යයන් විශ්ලේෂණය සහ මොස්කව්හි නව කට්ටලයක්

මොස්කව් හි ලියාපදිංචිය විවෘත කිරීමේ අවස්ථාවෙහිදී, අපි පෙර පාසලට හඳුන්වාදීමේ කාර්යයන් පිළිබඳ විශ්ලේෂණයක් ප්‍රකාශයට පත් කරන්නෙමු - මෙහි මින්ස්ක් හි.

ඔබ SRI පැවරුම්වල ඉතිහාසය සොයා ගන්නේ නම්, වසරින් වසර අපි ක්‍රමලේඛකයෙකු සඳහා වැදගත් කුසලතා තුනක් පරීක්ෂා කළෙමු:

  • පිරිසැලසුම. සෑම සංවර්ධකයෙකුටම පිරිසැලසුම කිරීමට හැකි විය යුතුය. ඔබට මුළු කණ්ඩායමටම නිර්මාණ කරන සීරියෝෂා මාමා සිටින බව සිදු නොවන අතර ඔබ ලියන්නේ පිටපත් පමණි. එමනිසා, සෑම සිසුවෙකුම යතුරු ලියනය කරන්නේ කෙසේදැයි ඔහු දන්නා ආකාරය පෙන්විය යුතුය.
  • JavaScript. කාරණය පිරිසැලසුමට සීමා වූයේ නම්, අපට අතුරු මුහුණත් සංවර්ධන පාසලක් නොව, පිරිසැලසුම් නිර්මාණකරුවන්ගේ පාසලක් ඇත. අලංකාර ලෙස නිර්මාණය කර ඇති අතුරු මුහුණත නැවත පණ ගැන්විය යුතුය. එමනිසා, JS සඳහා සෑම විටම කාර්යයක් ඇත, නමුත් සමහර විට එය ඇල්ගොරිතම සඳහාද කාර්යයකි - අපි ඔවුන්ට බොහෝ සේ ආදරය කරමු.
  • ගැටළු විසඳීම සමහර විට සංවර්ධකයෙකුගේ වැදගත්ම කුසලතාව වේ. අතුරුමුහුණත් නිර්මාණය කිරීමේදී, දේවල් ඉතා ඉක්මනින් වෙනස් වේ. එය හරියට ලුවිස් කැරොල් වැනි ය: "එකම ස්ථානයක සිටීමට ඔබට හැකි තරම් වේගයෙන් ධාවනය කළ යුතු අතර වෙනත් ස්ථානයකට යාමට ඔබ දෙගුණයක් වේගයෙන් ධාවනය කළ යුතුය." සෑම දිනකම අපට නව තාක්ෂණයන් හමු වේ - අපි ඒවා සැලකිල්ලට ගත යුතු අතර ඒවා තේරුම් ගැනීමට හැකි විය යුතුය. එබැවින්, තුන්වන කාර්යයේදී, නවක සංවර්ධකයෙකු සාමාන්යයෙන් හුරුපුරුදු නොවන තාක්ෂණයන් තේරුම් ගැනීමට අපි යෝජනා කළෙමු.

එක් එක් කාර්යය විශ්ලේෂණය කිරීමේදී, නිවැරදි ක්රියා පටිපාටිය ගැන පමණක් නොව, පොදු වැරදි ගැනද අපි ඔබට පවසනු ඇත.

කාර්යය 1: කළඹ

පළමු කාර්යය Yandex.Collections සැලසුම්කරු Alexey Cherenkevich විසින් වැඩ කරන ලදී, ඔහු පිරිසැලසුම කරන්නේ කෙසේදැයි දන්නා අතර ඔහුගේ සේවා සගයා, අතුරුමුහුණත් සංවර්ධක සර්ජි සැම්සොනොව්.

තත්වය

කළඹ වෙබ් අඩවියක් සාදන්න: ඔබ ගැන, ඔබේ වැඩ ගැන සහ පාසලෙන් ඔබේ අපේක්ෂාවන් ගැන අපට කියන්න. වෙබ් අඩවිය යෝජිත පිරිසැලසුමට හැකි තරම් අනුරූප විය යුතුය (පිරිසැලසුම් වෙත සබැඳි: 1000px, 600px, 320px, පිරිවිතර) අපි උනන්දු වන්නේ පිරිසැලසුම ගැන පමණි, එබැවින් කරුණාකර JavaScript භාවිතා නොකරන්න.

පරීක්ෂා කිරීමේදී අපි සැලකිල්ලට ගනිමු:

  • ඉන්ඩෙන්ටේෂන් ප්‍රමාණය, වර්ණ නිවැරදි බව, අකුරු විලාසය, අකුරු ප්‍රමාණය;
  • අර්ථකථන පිරිසැලසුම;
  • මූලද්‍රව්‍යවල විවිධ අවස්ථා තිබීම: කර්සරය සැරිසරන විට බොත්තම් සහ සබැඳි ප්‍රදර්ශනය කිරීම, ක්‍රියාකාරී ආදාන ක්ෂේත්‍ර ඉස්මතු කිරීම යනාදිය;
  • හරස් බ්‍රවුසර ගැළපුම (ජනප්‍රිය බ්‍රව්සර්වල නවතම අනුවාදවල පරීක්ෂා කර ඇත).

වාසිය වනුයේ:

  • නවීන CSS විසඳුම් භාවිතය: flexbox, grid, ආදිය.
  • අනුවර්තන පිරිසැලසුම;
  • පෙර සහ (හෝ) පසු සැකසුම් භාවිතා කිරීම, එකලස් කිරීම, අවම කිරීම, නිමැවුම් කේතය ප්‍රශස්ත කිරීම;
  • HTML පෝරමය වලංගු කිරීම, ශෛලීගත ගොනු උඩුගත කිරීමේ බොත්තම.

කාර්යය තරමක් විශාල ය, එබැවින් ඔබට ක්‍රියා නොකරන දේ මඟ හැරිය හැක. මෙය ඔබේ ලකුණු තරමක් අඩු කරනු ඇත, නමුත් ඔබට තවමත් ඔබේ දැනුම ප්‍රදර්ශනය කිරීමට හැකි වනු ඇත. ඔබ අවසන් වූ පසු, අපට සබැඳි දෙකක් එවන්න - ඔබේ කළඹට සහ GitHub හි මූල කේතයට.

පැවරුමේ යෝජනා කර ඇති පිරිසැලසුම් ජංගම උපාංග, ටැබ්ලට් සහ ඩෙස්ක්ටොප් සඳහා තිර පමණක් නොව, සැබෑ පිරිවිතරයන් සමඟ ද විය.

පළමු කාර්යය පරීක්ෂා කිරීමේ ප්රතිඵලය තුළට හැකි තරම් වාස්තවිකත්වය ගෙන ඒම සඳහා, මෙම චෙක්පත සඳහා බොහෝ නිර්ණායක තිබුණි.

නිර්ණායක

නිර්මාණය කරන ලද වෙබ් අඩවිය. මෙය පැහැදිලිව පෙනේ, නමුත් සමහර පිරිමි ළමයින් සමහර අවහිර කිරීම් සම්පූර්ණයෙන්ම මඟ හැරිය - එක්කෝ ඔවුන්ට කාලය ඉතිරි කර ගැනීමට අවශ්‍ය විය, නැතහොත් ඔවුන්ට ඒවා කිරීමට නොහැකි විය. පිරිසැලසුම දළ වශයෙන් ප්‍රධාන තිර හතරකට බෙදිය හැකිය: අවතාරයක් සහිත ප්‍රධාන තිරය, SRI වෙතින් අපේක්ෂා ලැයිස්තුවක් සහිත බ්ලොක් එකක්, කළඹක් සහිත බ්ලොක් එකක් සහ සම්බන්ධතා තොරතුරු සහිත බ්ලොක් එකක්. ඒවා කොටස් වශයෙන් හෝ සරලව divs භාවිතයෙන් සෑදිය හැකිය, ප්රධාන දෙය නම් කුට්ටි හතරම ලබා ගත හැකි වීමයි.

පිරිසැලසුම සමඟ පිරිසැලසුම අනුකූල වීම. අපේක්ෂකයින් සඳහා එය පහසු කිරීම සඳහා නිර්මාණකරු විසින් වෙනම පිරිවිතරයක් (වර්ණ, මුද්‍රණ ශිල්පය, බොත්තම් අවස්ථා, ආදිය ඇතුළුව) සාදන ලදී. පතුලේ පළමු තිරයේ ඉන්ඩෙන්ට් සහ විශේෂාංග පිළිබඳ ඉඟියක් විය. නිර්මාණකරුගේ සියලු කැමැත්ත සැලකිල්ලට ගත් පිරිමි ළමයින් ගැන මම ඉතා සතුටු විය: නිදසුනක් ලෙස, පළමු තිරය දර්ශන තලයේ උසට වඩා අඩු නොවිය යුතුය.

අනුවර්තන පිරිසැලසුම - මෙය විභේදන තුනකදී සෑම දෙයක්ම පිරිසැලසුමෙහි පික්සෙල් සිට පික්සෙල් දක්වා වන පරිදි අතුරු මුහුණත සකස් කර නොමැති විටය. අතරමැදි තත්වයන් තුළ, පිරිසැලසුම ද නොවැටිය යුතුය. සමහරුන්ට කන්ටේනරයේ උපරිම පළල සීමා කිරීමට අමතක වූ අතර සියල්ල පික්සල 1920 ලෙස සකසා ඇත, සමහරු පසුබිම අවුල් කළ නමුත් සමස්ත අපේක්ෂකයින් මෙම කාර්යයට හොඳින් මුහුණ දුන්හ.

අර්ථකථන පිරිසැලසුම. "ඔවුන් කී වතාවක් ලෝකයට පවසා තිබේද" සබැඳිය ලෙස නිර්මාණය කළ යුතු බව , බොත්තම - ලෙස . වාසනාවකට මෙන්, බොහෝ අපේක්ෂකයින් මෙම අවශ්‍යතාවය ද සපුරා ඇත. SRI හි අපේක්ෂාවන් තුළ සැඟවුණු ලැයිස්තුව සෑම කෙනෙකුම හඳුනාගෙන නැත, එය div ටැග් භාවිතයෙන් සාදන නමුත් එය එතරම් නරක නැත. අවශ්‍ය සහ අනවශ්‍ය තැන්වලට - තමන් දන්නා සියලු අර්ථකථන ටැග් ඇතුළු කළ අපේක්ෂකයෙක් සිටියේය. උදාහරණයක් ලෙස, ලැයිස්තුවක් වෙනුවට - සහ . සියල්ලට පසු, අර්ථ ශාස්ත්‍රය - එය ඔබගේ පිටුවේ සංයුතිය සහ එක් එක් කොටසෙහි අරමුණ (බහුතරයක් එය මෙහි කළමනාකරණය කර ඇත), මෙන්ම පෙර සහ / හෝ පසු-ප්‍රොසෙසර භාවිතා කිරීම (කිහිප දෙනෙක් එය මෙහි කළමනාකරණය කර ඇත, නමුත් මෙය වේ. ලකුණුවල ද විය - බොහෝ විට ඔවුන් අඩුවෙන් භාවිතා කළ අතර scss) .

වැඩ කරන ස්ලයිඩරය. assignment එකේ අපි ලිව්වා JS පාවිච්චි කරන්න බෑ කියලා. මෙහිදී ගැටළු විසඳීමේ හැකියාව පරීක්ෂා කරන ලදී - පොකුරක් භාවිතයෙන් ස්ලයිඩරයක් සෑදිය හැකිය සහ . සියලුම මැජික් සිලෙක්ටර් මට්ටමේ #බොත්තම-N:පරීක්ෂා කර ඇත ~ .slider-inner .slider-slides. අපි ආදාන පිරික්සුම් කොටුවක් මත ක්ලික් කළ විට, එය සලකුණු කළ තත්වයට යයි. අපට මෙයින් ප්‍රයෝජන ගත හැකි අතර අපට අවශ්‍ය පරිවර්තනය ස්ලයිඩ සහිත බහාලුමට පැවරිය හැකිය: පරිවර්තනය: පරිවර්තනය (-33%). ස්ලයිඩරය ක්රියාත්මක කිරීම ඔබට දැක ගත හැකිය මෙහි.

පතන ලැයිස්තු. මෙන්න ඒ සියල්ල ද පහළ විය සහ සමාන තේරීමක්: .accordion-item input:checked ~ .accordion-item__content. ක්රියාත්මක කිරීම ඔබට දැක ගත හැකිය මෙහි.

ලබා ගත හැකි : hover, :active සහ :focu* තත්වයන්. ඉතා වැදගත් කරුණක්. අතුරු මුහුණත සමඟ අන්තර්ක්‍රියා කිරීමේදී සුවපහසුව එය මත රඳා පවතී. පරිශීලකයා සැමවිටම ඔවුන්ගේ ක්‍රියාවන් පිළිබඳ ප්‍රතිපෝෂණ ලැබිය යුතුය. මෙම අයිතමය ප්‍රශ්නාවලිය සමඟ අන්තර්ක්‍රියා පුරාවටම පරීක්ෂා කරන ලදී. මම “මට අමතන්න” බොත්තම ක්ලික් කර දෘශ්‍යමය වශයෙන් කිසිවක් සිදු නොවූයේ නම් (ඉල්ලීම යවා තිබුණද), මෙය නරක ය, මන්ද එවිට මම එය නැවත නැවතත් ක්ලික් කරන්නෙමි. එහි ප්රතිඵලයක් වශයෙන්, ඉල්ලීම් දහයක් එවනු ලබන අතර, මා දස වතාවක් නැවත කැඳවනු ලැබේ. ජංගම උපාංගවල මූසිකයක් නොමැති බව අප අමතක නොකළ යුතුය, එයින් අදහස් කරන්නේ සැරිසැරීමක් නොතිබිය යුතු බවයි. තවද අර්ථ ශාස්ත්‍රය පිළිබඳ කාරණය සම්පූර්ණ කළ අයට බලපාන්නේ නැති තවත් එක් කරුණක්. ඔබගේ පාලනය අන්තර්ක්‍රියාකාරී මූලද්‍රව්‍යයක් නොවේ නම්, ඔබ එය මත සැරිසරන විට, කර්සරය සම්මතව පවතිනු ඇත. ඔබ සැරිසැරීමට ප්‍රතිචාරයක් ලියා තිබුණද, එය ඉතා අපිරිසිදු බව පෙනේ. කර්සරය අවතක්සේරු නොකරන්න: දර්ශකය.

සජීවිකරණ. මූලද්‍රව්‍ය සමඟ සිදුවන සියලුම ප්‍රතික්‍රියා සුමට වීම වැදගත්ය. ජීවිතයේ කිසිවක් ක්ෂණිකව සිදු නොවේ, එබැවින් අතුරු මුහුණත වඩාත් ප්‍රසන්න කිරීමට ප්‍රමාණවත් විය. හොඳයි, ස්ලයිඩරය සහ ලැයිස්තු සජීවීකරණය කළ අය සාමාන්යයෙන් විශිෂ්ටයි.

නවීන තාක්ෂණය භාවිතා කිරීම. බොහෝ අය flex භාවිතා කළ නමුත් කිසිවෙක් ජාලකය භාවිතයෙන් කාර්යය සම්පූර්ණ කළේ නැත. Flex නිවැරදිව භාවිතා කළේ නම් ලක්ෂ්යය ගණනය කෙරේ. මෙම flexes නිසා කොතැනක හෝ පිරිසැලසුම කැඩී ගියේ නම්, අහෝ, ඔබට අමතර ලකුණු කිසිවක් නොලැබුණි.

පෝරමය වලංගු කිරීම. අවශ්‍ය වූයේ පෝරමයේ එක් එක් ආදානයට අවශ්‍ය ගුණාංග එකතු කිරීම පමණි. ඊමේල් ක්ෂේත්‍රය විද්‍යුත් තැපෑලක් ලෙස වලංගු කළ අයට අපි ලකුණු එකතු කළෙමු.

ගොනු උඩුගත කිරීමේ බොත්තම හැඩගැන්වීම. මෙවැනි සංයෝජනයක් දැකීමට අපි බලාපොරොත්තු වෙමු: සහ ගොනුව තෝරන්න . ඊළඟට අපට ආදානය සැඟවීමට සහ ලේබලය හැඩගැන්වීමට අවශ්‍ය විය. තවත් පොදු ක්රමයක් තිබේ - විනිවිද පෙනෙන ආදානයක් සාදා එය බොත්තම මත තැබීම. නමුත් සෑම බ්‍රව්සරයක්ම මෝස්තර කිරීමට ඉඩ නොදේ , සහ එවැනි විසඳුමක් සම්පූර්ණයෙන්ම හරස් බ්රවුසරය ලෙස හැඳින්විය නොහැකිය. තවද ලේබලයක් සෑදීම අර්ථාන්විතව වඩාත් නිවැරදිය.

හරස් බ්‍රවුසර ගැළපුම. නවීන බ්‍රවුසරවල නවතම අනුවාද දෙකෙහි (IE නොමැතිව - සහභාගිවන්නන් වාසනාවන්තයි), මෙන්ම iPhone වල Safari සහ Androids හි Chrome හි සියල්ල හොඳින් දැයි අපි පරීක්ෂා කළෙමු.

ඊට පටහැනිව, යමෙකු JS හෝ Bootstrap භාවිතා කරන්නේ නම් අපි ලකුණු අඩු කළෙමු: ඔවුන් දෙකම සම්පූර්ණ කාර්යයේ අරමුණ පරාජය කරනු ඇත. එපමනක් නොව, 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/ ෆෝල්ඩරයේ ඇත, ඔබේ විසඳුම solution.js තුළ තබන්න.

දෙවන කාර්යයේ සත්යාපනය වඩාත් ස්වයංක්රීය සහ වෛෂයික විය. බොහෝ පිරිමි ළමයින් අනුමාන කළේ Dijkstra හි ඇල්ගොරිතම ක්‍රියාත්මක කිරීම අවශ්‍ය බවයි. එහි විස්තරය සොයාගෙන JS හි ඇල්ගොරිතම ක්‍රියාත්මක කළ අය හොඳින් කර ඇත. කෙසේ වෙතත්, පැවරුම පරීක්ෂා කිරීමේදී, එම දෝෂ සහිත බොහෝ කඩදාසි අපට හමු විය. අපි කේත කොටස් සඳහා අන්තර්ජාලය සෙවූ අතර සහභාගිවන්නන් ඇල්ගොරිතම පිටපත් කළ ලිපියක් සොයා ගත්තෙමු. බොහෝ අය කතෘගේ අදහස් සමඟ ලිපියේ කේතය පිටපත් කිරීම විහිළුවකි. එවැනි වැඩ සඳහා අඩු ලකුණු ලැබුණි. අපි කිසිම මූලාශ්‍රයක් භාවිතා කිරීම තහනම් නොකරමු, නමුත් අපට අවශ්‍ය වන්නේ ඔහු ලියන දේ ගැන සොයා බැලීමයි.

නිර්ණායක

පරීක්ෂණ සඳහා ප්‍රධාන ලකුණු ලබා දෙන ලදී. සමහර විට පිරිමි ළමයින් නිධිය සමඟ අවුල් කරන බව පැහැදිලි විය, ෆෝල්ඩර නැවත නම් කිරීම සහ අවශ්‍ය ලිපිගොනු සොයා ගැනීමට නොහැකි වූ නිසා පරීක්ෂණ අසාර්ථක වනු ඇත. මේ වසරේ අපි එවැනි පුද්ගලයින්ට උදව් කිරීමට උත්සාහ කළ අතර ඔවුන් වෙනුවෙන් සෑම දෙයක්ම එහි ස්ථානයට ගෙන ගියෙමු. නමුත් ලබන වසරේ අපි තරඟ පද්ධතියකට මාරු වීමට සැලසුම් කර ඇති අතර, මෙය තවදුරටත් සමාව නොදෙනු ඇත.

"මිනිස්", අතින් නිර්ණායක ද විය. උදාහරණයක් ලෙස, තනි කේත ශෛලියක් තිබීම. කිසිවෙකු හිස්තැන් වෙනුවට ටැබ් භාවිතා කිරීම සඳහා ලකුණු අඩු කළේ නැත, නැතහොත් අනෙක් අතට. ඔබ දන්නා එක් රීතියකට අනුව ද්විත්ව උද්ධෘත සමඟ තනි උද්ධෘත විකල්ප කිරීම සහ අහඹු ලෙස අර්ධ කෝණ ස්ථානගත කිරීම තවත් කාරණයකි.

විසඳුමේ පැහැදිලි බව සහ කියවීමේ හැකියාව වෙන වෙනම සැලකිල්ලට ගන්නා ලදී. ලෝකයේ සියලුම සම්මන්ත්‍රණවලදී ඔවුන් පවසන්නේ ක්‍රමලේඛකයෙකුගේ රැකියාවෙන් 80% ක්ම අන් අයගේ කේතය කියවීමෙන් සමන්විත වන බවයි. පාසල් සිසුන් පවා කේත සමාලෝචන වලට ලක් වේ - ඔවුන්ගේ භාරකරුවන්ගෙන් සහ එකිනෙකාගෙන්. එබැවින් මෙම නිර්ණායකය සැලකිය යුතු බරක් දරයි. එක් අක්ෂරයකට වඩා දිගු විචල්‍යයන් නොතිබූ කෘති තිබේ - කරුණාකර එය නොකරන්න. සහභාගී වූවන්ගේ අදහස් ඉතා දිරිගන්වන සුළු විය - ස්ටෙලා චැංගේ අදහස් වලට සමාන ඒවා හැර.

අවසාන නිර්ණායකය වන්නේ ස්වයංක්‍රීය පරීක්ෂණ තිබීමයි. ඒවා එකතු කළේ ස්වල්ප දෙනෙක් පමණි, නමුත් සෑම කෙනෙකුටම එය ඔවුන්ගේ කර්මයේ විශාල වාසියක් විය.

නිවැරදි විසඳුම:

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 තේරුම් ගැනීමට අවශ්‍ය විය, කුමන සබැඳිය කාර්යය නිවැරදිව විය. තල්ලු කිරීමට කාලය පැමිණ ඇත්දැයි පරීක්ෂා කිරීමට අපි නිශ්චිත ක්‍රියාත්මක කිරීමක් අපේක්ෂා නොකළෙමු. ඕනෑම ක්‍රියාකාරී විකල්පයක් පිළිගෙන ඇත: localStorage හි ගබඩා කිරීම, IndexDB හෝ සේවා සේවකයෙකු විසින් වරින් වර ඡන්ද විමසීම. තල්ලු සේවාදායකයක් සෑදීමට පවා හැකි විය (මෙහි උදාහරණයකි), නමුත් එය නොබැඳිව ක්‍රියා නොකරයි. පිටුව වසා දැමීමෙන් පසු තල්ලුවක් ලැබීමත් - ටික වේලාවකට පසු විවෘත කිරීමත් එකසේම වැදගත් විය. පිටුව වසා දැමූ අවස්ථාවේදීම මතක් කිරීම මිය ගියේ නම්, විසඳුම ගණන් නොගනී. යාලුවනේ සමාලෝචකයින් ගැන සිතා දැන් තල්ලුවක් ලබා ගැනීමට හැකි වූ විට එය සිසිල් ය - දින 3 ක් බලා නොසිටින ලෙස.

ඩෙස්ක්ටොප් එක මත අයිකනයක් තැබීමේ හැකියාව (PWA). අපි ගොනුව තිබේදැයි පරීක්ෂා කළෙමු මනිෆෙස්ට් නිවැරදි අයිකන සමඟ. සමහර අය මෙම ගොනුව සෑදුවා (හෝ CreateReactApp තුළ එය ජනනය කර ඇත) - නමුත් නිවැරදි අයිකන එකතු කළේ නැත. ඉන්පසුව, ස්ථාපනය කිරීමට උත්සාහ කරන විට, "වෙනස් අයිකනයක් අවශ්යයි" වැනි දෝෂයක් ඇති විය.

කේත විලාසය සහ ව්‍යාපෘති ව්‍යුහය. දෙවන කාර්යයේ දී මෙන්, අපි තනි කේතයක් දෙස බැලුවෙමු (එය අපගේ සමග සමපාත නොවූවත්). සමහර පිරිමි ළමයින් ලින්ටර් මත ඉස්කුරුප්පු කළා - ඒක නියමයි.

කොන්සෝල දෝෂ. කොන්සෝලයේ යම් දෙයක් වැරදී ඇති බවට දර්ශකයක් තිබේ නම් සහ සහභාගිවන්නා ඒ ගැන අවධානය යොමු නොකළේ නම්, අපි ලකුණු අඩු කළෙමු.

ප්රතිඵල

සහභාගිවන්නන්ගේ තීරණ ගැන හාස්‍යජනක දේ:

  • එක් ප්‍රශ්නාවලියක පහත පාඨය අඩංගු විය: “ක්‍රමලේඛක මිතුරෙකු මට ප්‍රතික්‍රියා යෙදුමක් සැකසීමට උදව් කළේය. කොහොමද සහ ඇයි කියන ප්‍රශ්නවලින් මම ඔහුට පහර දුන්නා, ඔහු මට කිව්වා. මම එයට ඇත්තෙන්ම කැමතියි, මට ඒ ගැන වැඩි විස්තර දැන ගැනීමට අවශ්‍යයි. ” අපි අපගේ මුළු හදවතින්ම මෙම යෙදුම සඳහා මුල් බැස ගත්තෙමු, නමුත් අවාසනාවකට, අයදුම්කරුගේ මිතුරා යෙදුම ක්‍රියාත්මක කිරීමට එතරම් ප්‍රයෝජනවත් නොවීය.
  • එක් අපේක්ෂකයෙකු RAR සංරක්ෂිතය පිහිටා ඇති GitHub වෙත සබැඳියක් යවා ඇත - මේ පිළිබඳව අදහස් දැක්වීම දුෂ්කර ය. 🙂
  • තවත් අපේක්ෂකයෙක්, solution.js ගොනුවේ පළමු පේළියේ අදහස් දැක්වීමේදී, ඔහු ඇල්ගොරිතම පිටපත් කළ බව අවංකව පිළිගත්තේය.

අපිට අයදුම්කරුවන් 76 දෙනෙකුගෙන් අයදුම්පත් ලැබී 23 දෙනෙකු තෝරා ගත්තා. අපට මින්ස්ක් වෙතින් පමණක් නොව, මොස්කව්, ශාන්ත පීටර්ස්බර්ග් සහ ටාටාර්ස්තානයේ පවා ප්රශ්නාවලියක් එවන ලදී. සමහර පිරිමි ළමයින් ඔවුන්ගේ වර්තමාන වෘත්තීන් ගැන අපව පුදුමයට පත් කළහ: ඔවුන්ගෙන් එක් අයෙක් අධිකරණ වෛද්‍ය විශේෂඥයෙකි, අනෙක වෛද්‍ය ශිෂ්‍යයෙකි.

එහි ප්‍රතිඵලය වූයේ කාර්යයන් සම්පූර්ණ කිරීමේ සාර්ථකත්ව අනුපාත සිත් ඇදගන්නා සුළු බෙදා හැරීමකි. සහභාගිවන්නන් පළමු කාර්යය සාමාන්‍යයෙන් 60% කින් ද, දෙවැන්න 50% කින් ද, තෙවැන්න වඩාත් දුෂ්කර වූ අතර සාමාන්‍යයෙන් 40% කින් සම්පූර්ණ කරන ලදී.

මුලින්ම බැලූ බැල්මට, කාර්යයන් සංකීර්ණ හා කාලය ගතවන බව පෙනේ. හේතුව හැකිතාක් අපේක්ෂකයන් ඉවත් කිරීමට අවශ්‍ය වීම නොවේ. ඔවුන්ගේ අධ්‍යයන කාලය තුළ සිසුන් සැබෑ ජීවිතයේ කාර්යයන් වලට මුහුණ දෙයි - කතාබස් කිරීම, ළමුන් සඳහා Yandex.Music හෝ කාලගුණය මත යැපෙන පුද්ගලයින් සඳහා Yandex.Weather. මේ සඳහා ඔබට ආරම්භක පදනමක් අවශ්ය වේ.

මට මතකයි මීට වසර දෙකකට පෙර මගේ SRI ඇතුල්වීමේ කාර්යය දැකීමෙන් මම එය කිසි විටෙකත් විසඳන්නේ නැතැයි සිතුවෙමි. මේ මොහොතේ ප්රධානතම දෙය වන්නේ වාඩි වී සිටීම, ප්රවේශමෙන් කොන්දේසි කියවා එය කිරීමට පටන් ගැනීමයි. කොන්දේසි වල විසඳුමෙන් 80% ක් පමණ අඩංගු වන බව පෙනේ. උදාහරණයක් ලෙස, තුන්වන කාර්යයේ තත්ත්වය (වඩාත්ම දුෂ්කර), අපි MDN මත සේවා සේවකයින් සහ දැනුම්දීම් API වෙත සබැඳි එකතු කළෙමු. සබැඳිවල අන්තර්ගතය අධ්‍යයනය කළ සිසුන් එය අපහසුවකින් තොරව සම්පූර්ණ කළහ.

අනාගතයේදී SRI වෙත ඇතුළු වීමට අදහස් කරන, මින්ස්ක් පාසලට ඇතුළු වීමට නොහැකි වූ හෝ වෙනත් පරීක්ෂණ කාර්යයක් කිරීමට පටන් ගන්නා අපේක්ෂකයින් මෙම ලිපිය කියවීමට මම ඇත්තෙන්ම කැමතියි. ඔබට පෙනෙන පරිදි, එසේ කිරීම තරමක් හැකි ය. ඔබට අවශ්‍ය වන්නේ ඔබ ගැන විශ්වාස කර කතුවරුන්ගේ සියලු ඉඟි වලට සවන් දීමයි.

මූලාශ්රය: www.habr.com

අදහස් එක් කරන්න