Ինտերֆեյսի զարգացման դպրոց. առաջադրանքների վերլուծություն Մինսկի համար և նոր հավաքածու Մոսկվայում

Այսօր բացվել է նոր ընդունելություն Yandex ինտերֆեյսի զարգացման դպրոց Մոսկվայում։ Ուսուցման առաջին փուլը տեղի կունենա սեպտեմբերի 7-ից հոկտեմբերի 25-ը։ Այլ քաղաքների ուսանողները կկարողանան մասնակցել դրան հեռակա կամ անձամբ՝ ընկերությունը կվճարի ճանապարհորդության և հանրակացարանում տեղավորման համար: Երկրորդ՝ նաև եզրափակիչ փուլը, կտևի մինչև դեկտեմբերի 3-ը, այն կարող է ավարտվել միայն անձամբ։

Ես Յուլիա Սերեդիչն եմ, այս գրառումը գրել ենք Սերգեյ Կազակովի հետ միասին։ Մենք երկուսս էլ Yandex-ի Մինսկի գրասենյակում ինտերֆեյս մշակողներ ենք և նախորդ տարիների ԳՀԻ-ի շրջանավարտներ:

Մոսկվայում գրանցման բացման կապակցությամբ մենք հրապարակում ենք նախորդ դպրոցի ներածական առաջադրանքների վերլուծություն՝ այստեղ՝ Մինսկում:

Եթե ​​դուք հետևում եք ԳՀՀ-ի առաջադրանքների պատմությանը, ապա տարեցտարի մենք ստուգում ենք երեք կարևոր հմտություններ ծրագրավորողի համար.

• Դասավորություն. Յուրաքանչյուր մշակող պետք է կարողանա կատարել դասավորություն: Չի լինում, որ դու ունես քեռի Սերյոժա, ով նախագծում է ամբողջ թիմի համար, իսկ դու միայն սցենարներ ես գրում։ Ուստի յուրաքանչյուր աշակերտ պետք է ցույց տա, թե ինչպես գիտի տպագրություն:
• JavaScript. Եթե ​​հարցը սահմանափակվեր դասավորությամբ, ապա մենք կունենայինք ոչ թե ինտերֆեյսի մշակման դպրոց, այլ դասավորության դիզայներների դպրոց: Գեղեցիկ ձևավորված ինտերֆեյսը պետք է վերածնվի: Հետևաբար, JS-ի համար միշտ առաջադրանք կա, բայց երբեմն դա նաև ալգորիթմների խնդիր է. մենք շատ ենք սիրում դրանք:
• Խնդրի լուծումը ծրագրավորողի, թերևս, ամենակարևոր հմտությունն է: Ինչ վերաբերում է միջերեսներ ստեղծելուն, ամեն ինչ շատ արագ է փոխվում: Դա նման է Լյուիս Քերոլին. «Դուք պետք է վազեք այնքան արագ, որքան կարող եք, պարզապես նույն տեղում մնալու համար, իսկ մեկ այլ տեղ հասնելու համար դուք պետք է վազեք երկու անգամ ավելի արագ»: Ամեն օր մենք հանդիպում ենք նոր տեխնոլոգիաների. մենք պետք է հաշվի առնենք դրանք և կարողանանք հասկանալ դրանք: Հետևաբար, երրորդ առաջադրանքում մենք առաջարկեցինք հասկանալ տեխնոլոգիաները, որոնց սկսնակ մշակողը սովորաբար ծանոթ չէ:

Յուրաքանչյուր առաջադրանքի վերլուծության ժամանակ մենք ձեզ կպատմենք ոչ միայն ճիշտ ընթացակարգի, այլև տարածված սխալների մասին:

Առաջադրանք 1. Պորտֆոլիո

Առաջին առաջադրանքի վրա աշխատել են Yandex.Collections-ի դիզայներ Ալեքսեյ Չերենկևիչը, ով գիտի դասավորություն անել, և նրա սպասարկող գործընկերը՝ ինտերֆեյսի մշակող Սերգեյ Սամսոնովը։

Վիճակը

Ստեղծեք պորտֆոլիո կայք. պատմեք ձեր մասին, ձեր աշխատանքի և Դպրոցից ձեր ակնկալիքների մասին: Կայքը պետք է հնարավորինս համապատասխանի առաջարկվող դասավորությանը (հղումներ դեպի դասավորություն. 1000px, 600px, 320px, ճշգրտում). Մեզ հետաքրքրում է միայն դասավորությունը, ուստի խնդրում ենք չօգտագործել JavaScript:

Ստուգելիս մենք հաշվի կառնենք.

• ներծծման չափերը, գույնի ճշգրտությունը, տառատեսակի ոճը, տառաչափը;
• իմաստային դասավորություն;
• տարրերի տարբեր վիճակների առկայություն. կոճակների և հղումների ցուցադրում կուրսորը սավառնելիս, ակտիվ մուտքագրման դաշտերի ընդգծում և այլն;
• բրաուզերի համատեղելիություն (փորձարկվել է հանրաճանաչ բրաուզերների վերջին տարբերակներում):

Առավելությունը կլինի.

• ժամանակակից CSS լուծումների օգտագործումը՝ flexbox, grid և այլն;
• Հարմարվողական դասավորություն;
• նախնական և (կամ) հետպրոցեսորների օգտագործում, հավաքում, մինիֆիկացում, ելքային կոդի օպտիմալացում.
• HTML ձևի վավերացում, ոճավորված ֆայլի վերբեռնման կոճակ:

Առաջադրանքը բավականին ծավալուն է, այնպես որ կարող եք բաց թողնել այն, ինչը չի աշխատի։ Սա մի փոքր կնվազեցնի ձեր գնահատականը, բայց դուք դեռ կկարողանաք ցուցադրել ձեր գիտելիքները: Ավարտելուց հետո մեզ ուղարկեք երկու հղում՝ ձեր պորտֆոլիոյին և ելակետային կոդը GitHub-ում:

Առաջադրանքում առաջարկված դասավորությունները ոչ միայն բջջային սարքերի, պլանշետների և աշխատասեղանների էկրաններով էին, այլ նաև իրական բնութագրերով:

Առաջին առաջադրանքի ստուգման արդյունքի մեջ հնարավորինս շատ օբյեկտիվություն բերելու համար այս ստուգման համար շատ չափանիշներ կային։

Չափանիշներ

Նախագծված կայք. Սա ակնհայտ է թվում, բայց որոշ տղաներ ամբողջովին բաց թողեցին որոշ բլոկներ. կամ նրանք ցանկանում էին խնայել ժամանակը, կամ նրանք չկարողացան դա անել: Դասավորությունը կարելի է մոտավորապես բաժանել չորս հիմնական էկրանների՝ հիմնական էկրան՝ ավատարով, բլոկ՝ SRI-ից սպասելիքների ցանկով, բլոկ՝ պորտֆոլիոյով և բլոկ՝ կոնտակտային տվյալներով: Նրանք կարող էին պատրաստվել բաժիններով կամ պարզապես օգտագործելով divs, գլխավորն այն է, որ բոլոր չորս բլոկները հասանելի էին:

Հատակագծի համապատասխանությունը դասավորությանը. Դիզայները կատարել է առանձին ճշգրտում (ներառյալ գույները, տպագրությունը, կոճակների վիճակները և այլն)՝ թեկնածուների համար հեշտացնելու համար: Ներքևի մասում ակնարկ կար առաջին էկրանի անցքերի և առանձնահատկությունների մասին: Ես շատ գոհ էի տղաներից, ովքեր հաշվի էին առնում դիզայների բոլոր ցանկությունները. օրինակ, առաջին էկրանը պետք է լինի ոչ պակաս, քան տեսադաշտի բարձրությունը:

Հարմարվողական դասավորություն - սա այն դեպքում, երբ ինտերֆեյսը պարզապես այնպես չէ դասավորված, որ երեք լուծաչափով ամեն ինչ պիքսել-պիքսել դասավորության մեջ լինի: Միջանկյալ վիճակներում դասավորությունը նույնպես չպետք է քանդվի։ Ոմանք մոռացել են սահմանափակել կոնտեյների առավելագույն լայնությունը և ամեն ինչ սահմանել 1920 պիքսել, ոմանք խառնել են ֆոնը, բայց ընդհանուր առմամբ թեկնածուները լավ են հաղթահարել այս խնդիրը:

Իմաստային դասավորություն. «Քանի՞ անգամ են նրանք աշխարհին ասել», որ հղումը պետք է ձևավորվի որպես , կոճակը՝ որպես . Բարեբախտաբար, թեկնածուների մեծ մասը կատարել է նաև այս պահանջը։ Ոչ բոլորը ճանաչեցին թաքնված ցուցակը SRI-ի ակնկալիքներում, դարձնելով այն div պիտակների միջոցով, բայց դա այնքան էլ վատ չէ: Մի թեկնածու կար, ով մտցրեց իր իմացած բոլոր իմաստային թեգերը՝ որտեղ պետք էր, որտեղ՝ ոչ: Օրինակ, ցուցակի փոխարեն - և . Ի վերջո, իմաստաբանությունը - դա ձեր էջի կազմը և յուրաքանչյուր բլոկի նպատակը հասկանալու մասին է (մեծամասնությունը դա հաջողվել է այստեղ), ինչպես նաև նախա- և/կամ հետմշակող պրոցեսորների օգտագործումը (մի քանիսը դա հաջողվել են այստեղ, չնայած սա եղել է նաև կետերում՝ ամենից հաճախ ավելի քիչ են օգտագործել և scss) ։

Աշխատանքային սահիչ. Առաջադրանքում գրել էինք, որ JS-ը չի կարող օգտագործվել։ Այստեղ փորձարկվել է խնդիրներ լուծելու ունակությունը՝ սահիկ կարելի էր պատրաստել՝ օգտագործելով փունջ Եվ . Ամբողջ կախարդանքը տեղի է ունենում ընտրիչի մակարդակում #button-N:checked ~ .slider-inner .slider-slides. Երբ մենք սեղմում ենք մուտքագրման վանդակներից մեկի վրա, այն անցնում է նշված վիճակի: Մենք կարող ենք օգտվել դրանից և վերագրել մեզ անհրաժեշտ թարգմանությունը սլայդներով բեռնարկղին՝ transform: translate(-33%): Դուք կարող եք տեսնել սլայդերի իրականացումը այստեղ.

Բացվող ցուցակներ. Այստեղ ամեն ինչ նույնպես հանգեցրեց և նմանատիպ ընտրիչ՝ .accordion-item input:checked ~ .accordion-item__content. Դուք կարող եք տեսնել իրականացումը այստեղ.

:hover, :active և :focu* վիճակների առկայությունը. Շատ կարևոր կետ. Հարմարավետությունը ինտերֆեյսի հետ փոխազդեցության ժամանակ կախված էր դրանից: Օգտագործողը միշտ պետք է արձագանք ստանա իր գործողությունների վերաբերյալ: Այս կետը ստուգվել է հարցաշարի հետ փոխգործակցության ընթացքում: Եթե ​​ես սեղմել եմ «Զանգիր ինձ» կոճակը և տեսողականորեն ոչինչ չի պատահել (չնայած հարցումն ուղարկվել է), դա վատ է, քանի որ այնուհետև ես նորից ու նորից կսեղմեմ այն: Արդյունքում տասը հարցում կուղարկվի, և ինձ տասն անգամ հետ կկանչեն։ Չպետք է մոռանալ, որ շարժական սարքերը չունեն մկնիկ, ինչը նշանակում է, որ սավառնում չպետք է լինի: Եվ ևս մեկ կետ, որը չազդեց իմաստաբանության կետը կատարողների վրա. Եթե ​​ձեր կառավարումը ինտերակտիվ տարր չէ, ապա երբ սավառնում եք դրա վրա, կուրսորը կմնա ստանդարտ: Այն շատ անբարեկարգ տեսք ունի, նույնիսկ եթե դուք գրել եք արձագանք սավառնելու համար։ Մի թերագնահատեք կուրսորը՝ սլաքը:

Անիմացիաներ. Կարևոր է, որ տարրերի հետ տեղի ունեցող բոլոր ռեակցիաները հարթ լինեն: Կյանքում ոչինչ ակնթարթային չէ, ուստի սավառնող և ակտիվ անցումներ ունենալը բավական էր ինտերֆեյսն ավելի հաճելի դարձնելու համար: Դե, նրանք, ովքեր աշխուժացրել են սլայդերը և ցուցակները, ընդհանուր առմամբ հիանալի են:

Օգտագործելով նորագույն տեխնոլոգիա. Շատ մարդիկ օգտագործեցին flex-ը, բայց ոչ ոք չավարտեց առաջադրանքը ցանցի միջոցով: Միավորը հաշվվում էր, եթե ֆլեքսը ճիշտ օգտագործվեր: Եթե ​​ինչ-որ տեղ դասավորությունը փչացավ հենց այս ճկունությունների պատճառով, ավաղ, դուք լրացուցիչ միավորներ չեք ստացել:

Ձևի վավերացում. Այն ամենը, ինչ պահանջվում էր, ձևի յուրաքանչյուր մուտքագրում անհրաժեշտ հատկանիշ ավելացնելն էր: Մենք միավորներ ենք ավելացրել նրանց, ովքեր վավերացրել են էլփոստի դաշտը որպես էլ.

Ֆայլի վերբեռնման կոճակի ձևավորում. Մենք ակնկալում էինք տեսնել այնպիսի համադրություն, ինչպիսին է. և ընտրել ֆայլը : Հաջորդիվ մեզ անհրաժեշտ էր թաքցնել մուտքագրումը և ոճավորել պիտակը: Կա ևս մեկ տարածված միջոց՝ թափանցիկ մուտքագրում կատարել և դնել կոճակի վերևում: Բայց ոչ բոլոր բրաուզերներն են թույլ տալիս ոճավորել , և նման լուծումը չի կարելի անվանել ամբողջությամբ խաչաձև զննարկիչ: Իսկ իմաստային առումով ավելի ճիշտ է պիտակ անելը։

Բրաուզերների համատեղելիություն. Մենք ստուգեցինք, որ ամեն ինչ կարգին է ժամանակակից բրաուզերների երկու վերջին տարբերակներում (առանց IE - մասնակիցների բախտը բերել է), ինչպես նաև Safari-ում iPhone-ներում և Chrome-ում՝ Android-ներում:

Ընդհակառակը, մենք միավորներ էինք հանում, եթե ինչ-որ մեկը օգտագործեր 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-ում:

Երկրորդ առաջադրանքի ստուգումն ամենաավտոմատացվածն ու օբյեկտիվն էր։ Տղաներից շատերը կռահեցին, որ անհրաժեշտ է իրականացնել Դեյկստրայի ալգորիթմը։ Նրանք, ովքեր գտել են դրա նկարագրությունը և կիրառել ալգորիթմը 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 օր առաջ: Ինտերնետից առաջին ներբեռնումից հետո օրացույցը պետք է բացվի և գործի անցանց:

Օգտակար ռեսուրսներ

Frontend կոնֆերանսի ժամանակացույց.
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-ի հիման վրա դասավորել: Կարևոր էր տվյալներ ստանալ ցանկացած ձևով (օգտագործելով fetch մեթոդը կամ օգտագործելով XMLHttpRequest): Եթե ​​անձը ավելացրել է պոլիֆիլֆ ֆետչ-ի համար և նշել իր ընտրությունը readme-ում, դա հաշվվում է որպես գումարած:

Սպասարկման աշխատողի գրանցում առանց սխալների և առաջին ներբեռնումից հետո աշխատեք անցանց: Ահա մի օրինակ: սպասարկման աշխատող առաջին բեռնման ժամանակ ժամանակացույցի քեշավորումով: Սպասարկման աշխատողների, նրանց հնարավորությունների և նրանց հետ աշխատելու եղանակների մասին մանրամասներ (քեշերի հետ աշխատելու ռազմավարություններ, օֆլայն աշխատանք) կարող եք գտնել այստեղ։

Հիշեցում տեղադրելու ունակությունայնպես, որ այն իրականում աշխատում է 3, 7, 14 օր հետո: Անհրաժեշտ էր հասկանալ Ծանուցումների API-ն, հղում, որին ճիշտ էր առաջադրանքի մեջ: Մենք չէինք սպասում որևէ կոնկրետ իրականացում, որպեսզի ստուգենք, թե արդյոք ժամանակն է մղել: Ընդունվել է ցանկացած աշխատանքային տարբերակ՝ պահեստավորում localStorage-ում, IndexDB-ում կամ սպասարկման աշխատողի կողմից պարբերական հարցում: Հնարավոր էր նույնիսկ push սերվեր ստեղծել (այստեղ օրինակ), բայց այն չէր աշխատի անցանց: Հավասարապես կարևոր էր էջը փակելուց և որոշ ժամանակ անց բացելուց հետո հրում ստանալը: Եթե ​​հիշեցումը մահացավ էջը փակելու հետ միաժամանակ, լուծումը չէր հաշվվում: Հիասքանչ է, երբ տղաները մտածեցին գրախոսների մասին և հնարավորություն տվեցին հենց հիմա մղել, որպեսզի չսպասեն 3 օր:

Սեղանի վրա պատկերակ տեղադրելու ունակություն (PWA): Մենք ստուգեցինք ֆայլի առկայությունը manifest.json- ը ճիշտ պատկերակներով: Որոշ տղաներ ստեղծել են այս ֆայլը (կամ թողել են այն ստեղծվել CreateReactApp-ում), բայց չեն ավելացրել ճիշտ պատկերակները: Այնուհետև, երբ փորձում եք տեղադրել, տեղի ունեցավ սխալ, ինչպիսին է «անհրաժեշտ է այլ պատկերակ»:

Codestyle և նախագծի կառուցվածքը. Ինչպես և երկրորդ առաջադրանքում, մենք դիտարկեցինք մեկ կոդի ոճ (նույնիսկ եթե այն չի համընկնում մերի հետ): Որոշ տղաներ պտտվել են պտտվող լինտերների վրա, դա հիանալի է:

Վահանակի սխալներ. Եթե ​​հենց կոնսոլում ցուցիչ կար, որ ինչ-որ բան այն չէ, և մասնակիցը դրան ուշադրություն չդարձրեց, ապա մենք միավորներ էինք հանում։

Արդյունքները

Ինչն է զվարճալի մասնակիցների որոշումների մեջ.

• Հարցաթերթիկներից մեկը պարունակում էր հետևյալ տեքստը. «Ծրագրավորող ընկերս օգնեց ինձ ստեղծել React հավելված: Ես նրան ռմբակոծեցի հարցերով, թե ինչպես և ինչու, և նա ինձ ասաց. Ինձ շատ դուր եկավ, ուզում եմ ավելին իմանալ դրա մասին»։ Մենք ամբողջ սրտով արմատավորում էինք այս հավելվածը, բայց, ցավոք, թեկնածուի ընկերն այնքան էլ չօգնեց հայտը գործելու համար:
• Թեկնածուներից մեկը հղում է ուղարկել GitHub-ին, որտեղ գտնվում էր RAR արխիվը, դժվար է մեկնաբանել դա: 🙂
• Մեկ այլ թեկնածու, solution.js ֆայլի առաջին տողի մեկնաբանության մեջ, անկեղծորեն խոստովանել է, որ պատճենել է ալգորիթմը։

Մենք դիմում ենք ստացել 76 թեկնածուից, ընտրել ենք 23 հոգու։ Մեզ հարցաթերթիկներ ուղարկեցին ոչ միայն Մինսկից, այլեւ Մոսկվայից, Սանկտ Պետերբուրգից եւ նույնիսկ Թաթարստանից։ Տղաներից ոմանք մեզ զարմացրել են իրենց ներկայիս մասնագիտություններով. մեկը դատաբժշկական փորձագետ է, մյուսը՝ բժշկական ուսանող։

Արդյունքը եղել է առաջադրանքների կատարման հաջողության ցուցանիշների հետաքրքիր բաշխումը: Առաջին առաջադրանքը մասնակիցները կատարել են միջինը 60%-ով, երկրորդը՝ 50%-ով, իսկ երրորդը ամենադժվարն է ստացվել և կատարել է միջինը 40%-ով։

Առաջին հայացքից առաջադրանքները բարդ և ժամանակատար են թվում: Պատճառն այն չէ, որ մենք ցանկանում ենք հնարավորինս շատ թեկնածուների հեռացնել: Ուսման ընթացքում ուսանողներին առջևում են իրական կյանքի առաջադրանքներ՝ զրուցել, Yandex.Music երեխաների համար կամ Yandex.Weather եղանակից կախված մարդկանց համար: Դրա համար անհրաժեշտ է մեկնարկային հիմք:

Հիշում եմ, որ երկու տարի առաջ տեսա իմ ԳՀԻ մուտքի առաջադրանքը և մտածեցի, որ այն երբեք չեմ լուծի: Հիմնական բանը այս պահին նստելն է, ուշադիր կարդալ պայմանները և սկսել դա անել։ Ստացվում է, որ պայմանները պարունակում են լուծույթի գրեթե 80%-ը։ Օրինակ, երրորդ առաջադրանքի պայմաններում (ամենադժվարը) մենք ավելացրեցինք հղումներ սպասարկող աշխատողներին և MDN-ի Notifications API-ին։ Ուսանողները, ովքեր ուսումնասիրել են հղումների բովանդակությունը, այն լրացրել են առանց դժվարության:

Ես շատ կուզենայի, որ այս հոդվածը կարդան այն թեկնածուները, ովքեր պատրաստվում են ապագայում ընդունվել ԳՀՀ, ովքեր չեն կարողացել ընդունվել Մինսկի դպրոց կամ ովքեր սկսում են կատարել որևէ այլ թեստային առաջադրանք: Ինչպես տեսնում եք, դա միանգամայն հնարավոր է անել։ Պարզապես պետք է հավատալ ինքներդ ձեզ և լսել հեղինակների բոլոր խորհուրդները:

Source: www.habr.com