Dnes sa otvorila nová prihláška v v Moskve. Prvá etapa školenia bude prebiehať od 7. septembra do 25. októbra. Študenti z iných miest sa do nej budú môcť zapojiť na diaľku alebo osobne – firma zaplatí cestovné a ubytovanie v ubytovni. Druhá, tiež záverečná etapa, potrvá do 3. decembra, absolvovať ju možno len osobne.
Volám sa Julia Seredich, tento príspevok sme napísali spolu so Sergejom Kazakovom. Obaja sme vývojári rozhrania v Minskej kancelárii Yandex a absolventi SRI z predchádzajúcich rokov.
Pri príležitosti otvorenia registrácie v Moskve zverejňujeme analýzu úvodných úloh do predchádzajúcej školy - tu v Minsku.
Ak sledujete históriu úloh SRI, z roka na rok sme testovali tri dôležité zručnosti programátora:
- Rozloženie. Každý vývojár by mal vedieť urobiť layout. Nestane sa, že máte strýka Seryozhu, ktorý navrhuje pre celý tím, a píšete iba scenáre. Každý študent preto musí ukázať, ako vie sadzbu.
- JavaScript. Ak by sa záležitosť obmedzila na rozloženie, potom by sme nemali Školu vývoja rozhrania, ale Školu dizajnérov rozloženia. Krásne navrhnuté rozhranie je potrebné oživiť. Preto vždy existuje úloha pre JS, ale niekedy je to aj úloha pre algoritmy - máme ich tak radi.
- Riešenie problémov je možno najdôležitejšou zručnosťou vývojára. Pokiaľ ide o vytváranie rozhraní, veci sa menia veľmi rýchlo. Je to ako Lewis Carroll: "Musíte bežať tak rýchlo, ako môžete, len aby ste zostali na tom istom mieste, a aby ste sa dostali na iné miesto, musíte bežať dvakrát rýchlejšie." Každý deň sa stretávame s novými technológiami – treba ich brať do úvahy a vedieť im porozumieť. Preto sme v tretej úlohe navrhli porozumieť technológiám, ktoré začínajúci vývojár zvyčajne nepozná.
V rozbore každej úlohy vám prezradíme nielen správny postup, ale aj časté chyby.
Úloha 1: Portfólio
Na prvej úlohe pracoval dizajnér Yandex.Collections Alexey Cherenkevich, ktorý vie, ako urobiť rozloženie, a jeho servisný kolega, vývojár rozhrania Sergej Samsonov.
Podmienka
Vytvorte webovú stránku portfólia: povedzte nám o sebe, svojej práci a očakávaniach od školy. Stránka by mala čo najviac zodpovedať navrhovanému rozloženia (odkazy na rozloženia: , , , ). Zaujíma nás iba rozloženie, preto prosím nepoužívajte JavaScript.
Pri kontrole budeme brať do úvahy:
- veľkosti odsadenia, správnosť farieb, štýl písma, veľkosť písma;
- sémantické usporiadanie;
- prítomnosť rôznych stavov prvkov: zobrazenie tlačidiel a odkazov pri umiestnení kurzora, zvýraznenie aktívnych vstupných polí atď.;
- kompatibilita medzi prehliadačmi (testovaná v najnovších verziách populárnych prehliadačov).
Výhodou bude:
- využitie moderných CSS riešení: flexbox, grid atď.;
- Adaptívne rozloženie;
- použitie pre- a (alebo) post-procesorov, zostavovanie, minifikácia, optimalizácia výstupného kódu;
- Overenie formulára HTML, tlačidlo na nahranie štylizovaného súboru.
Úloha je dosť objemná, takže to, čo nebude fungovať, môžete preskočiť. Tým sa vaše skóre mierne zníži, ale stále budete môcť preukázať svoje znalosti. Keď budete hotoví, pošlite nám dva odkazy – na vaše portfólio a zdrojový kód na GitHub.
Rozloženia navrhnuté v zadaní neboli len s obrazovkami pre mobilné zariadenia, tablety a desktopy, ale aj so skutočnými špecifikáciami.
Aby výsledok kontroly prvej úlohy vniesol čo najväčšiu objektivitu, bolo pri tejto kontrole veľa kritérií.
kritériá
Navrhnutá webová stránka. Zdá sa to byť zrejmé, ale niektorí chlapci úplne preskočili niektoré bloky - buď chceli ušetriť čas, alebo ich nemohli urobiť. Rozloženie je možné zhruba rozdeliť do štyroch hlavných obrazoviek: hlavná obrazovka s avatarom, blok so zoznamom očakávaní od SRI, blok s portfóliom a blok s kontaktnými informáciami. Mohli byť vyrobené v sekciách alebo jednoducho pomocou divov, hlavná vec je, že boli k dispozícii všetky štyri bloky.
Súlad dispozície s dispozíciou. Dizajnér urobil samostatnú špecifikáciu (vrátane farieb, typografie, stavu tlačidiel atď.), aby to kandidátom uľahčil. V spodnej časti bol náznak odsadenia a funkcií prvej obrazovky. Bol som veľmi spokojný s chlapcami, ktorí zohľadnili všetky želania dizajnéra: napríklad prvá obrazovka nemala byť menšia ako výška výrezu.
Adaptívne rozloženie - toto je vtedy, keď rozhranie nie je usporiadané tak, že pri troch rozlíšeniach je všetko v rozložení pixel po pixeli. V medzistavoch by sa nemalo rozpadnúť ani rozloženie. Niektorí zabudli obmedziť maximálnu šírku kontajnera a nastaviť všetko na 1920 pixelov, niektorí pokazili pozadia, no celkovo sa kandidáti s touto úlohou popasovali dobre.
Sémantické rozloženie. „Koľkokrát povedali svetu“, že odkaz by mal byť navrhnutý ako , tlačidlo – ako . Našťastie väčšina kandidátov splnila aj túto požiadavku. Nie každý rozpoznal skrytý zoznam v očakávaniach SRI, vďaka čomu používa značky div, ale nie je to také zlé. Bol kandidát, ktorý vložil všetky sémantické značky, ktoré poznal – tam, kde to bolo potrebné a kde to nebolo potrebné. Napríklad namiesto zoznamu - a . Predsa sémantika - ide o pochopenie zloženia vašej stránky a účelu každého bloku (tu to zvládla väčšina), ako aj použitie pre- a/alebo post-procesorov (niekoľkým sa to tu podarilo, aj keď toto bol aj v bodoch - najčastejšie používali menej a scss) .
Pracovný posúvač. V zadaní sme napísali, že JS nemožno použiť. Tu sa testovala schopnosť riešiť problémy - pomocou zväzku sa dal vyrobiť posúvač a . Všetky kúzla sa odohrávajú na úrovni voliča #button-N:checked ~ .slider-inner .slider-slides. Keď klikneme na jedno zo zaškrtávacích políčok vstupu, prejde do začiarknutého stavu. Môžeme to využiť a ku kontajneru so snímkami priradiť preklad, ktorý potrebujeme: transform: translate(-33%). Môžete vidieť implementáciu posúvača .
Rozbaľovacie zoznamy. Tu to tiež všetko dopadlo a podobný selektor: .accordion-item input:checked ~ .accordion-item__content. Môžete vidieť implementáciu .
Dostupnosť stavov :hover, :active a :focu*. Veľmi dôležitý bod. Záviselo od toho pohodlie pri interakcii s rozhraním. Používateľ by mal vždy dostávať spätnú väzbu o svojej činnosti. Táto položka bola kontrolovaná počas interakcie s dotazníkom. Ak som klikol na tlačidlo „Zavolaj mi“ a vizuálne sa nič nedialo (aj keď žiadosť bola odoslaná), je to zlé, pretože na to budem klikať znova a znova. V dôsledku toho sa odošle desať žiadostí a desaťkrát mi zavolajú späť. Nesmieme zabúdať, že mobilné zariadenia nemajú myš, čo znamená, že by tam nemalo byť vznášanie sa. A ešte jeden bod, ktorý sa nedotkol tých, ktorí splnili bod o sémantike. Ak váš ovládací prvok nie je interaktívny prvok, potom keď naň prejdete, kurzor zostane štandardný. Vyzerá to veľmi neupravene, aj keď ste napísali reakciu na vznášanie sa. Nepodceňujte kurzor: ukazovateľ.
Animácie. Je dôležité, aby všetky reakcie vyskytujúce sa s prvkami boli plynulé. Nič v živote nie je okamžité, takže prechody na visenie a aktívne stačilo na spríjemnenie rozhrania. Tí, ktorí animovali posúvač a zoznamy, sú vo všeobecnosti skvelí.
Použitie najnovšej technológie. Mnoho ľudí používalo flex, ale nikto nedokončil úlohu pomocou mriežky. Bod sa rátal, ak bol flex použitý správne. Ak sa niekde rozloženie rozpadlo práve kvôli týmto ohybom, bohužiaľ ste nezískali žiadne ďalšie body.
Overenie formulára. Všetko, čo bolo potrebné, bolo pridať požadovaný atribút do každého vstupu formulára. Body sme pridali tým, ktorí potvrdili pole email ako email.
Úprava štýlu tlačidla na nahranie súboru. Očakávali sme kombináciu ako: a Vyberte súbor . Ďalej sme potrebovali skryť vstup a štýl štítku. Existuje ďalší bežný spôsob - urobiť priehľadný vstup a umiestniť ho na tlačidlo. Nie všetky prehliadače však umožňujú úpravu štýlu , a takéto riešenie nemožno nazvať plne cross-browser. A sémanticky správnejšie je urobiť štítok.
Kompatibilita medzi prehliadačmi. Skontrolovali sme, či je všetko v poriadku v dvoch najnovších verziách moderných prehliadačov (bez IE – účastníci mali šťastie), ako aj v Safari na iPhonoch a Chrome na Androidoch.
Naopak, ak niekto použil JS alebo Bootstrap, odrátali sme body: oba by zmarili účel celej úlohy. Účastníci s Bootstrap navyše nielenže dostali mínus, ale stratili aj veľa bodov za sémantiku a implementované prvky.
Tí, ktorí hostili svoju stránku niekde na internete, nezískali žiadnu zvláštnu výhodu – ale recenzenti boli veľmi radi, keď si nemuseli sťahovať úložiská a spúšťať ich lokálne na svojom počítači. Takže toto slúžilo ako plus pre karmu.
Prvá úloha bola veľmi užitočná predovšetkým pre študenta. Tí, ktorých sme teraz neprijali, majú pripravený životopis - môžete ho hrdo pripojiť ku všetkým odpovediam alebo ho zavesiť na svoje gh-stránky.
Úloha 2: Dopravná trasa
Autorom úlohy je vedúci skupiny vyhľadávacích rozhraní Denis Balyko.
Podmienka
Máte hviezdnu mapu? Zobrazuje názov každej hviezdy, ako aj vzdialenosť od nej k iným hviezdam vo svetelných sekundách. Implementujte funkciu riešenia, ktorá by mala mať tri argumenty: objekt, v ktorom sú kľúčmi názvy hviezd a hodnoty sú vzdialenosti ku hviezdam (jednosmerná premávka vo vesmíre), ako aj názvy začiatočný a koncový bod cesty - začiatok a cieľ. Funkcia by mala vrátiť najkratšiu vzdialenosť od počiatočnej hviezdy k cieľovej hviezde a cestu, ktorú treba sledovať.
Podpis funkcie:
const solution = function(graph, start, finish) { // Ваше решение }Príklad vstupných údajov:
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';Príklad výstupu:
{ distance: 90, path: ['start', 'A', 'D', 'finish'] }Poznámka: Kostra riešenia sa nachádza v priečinku src/, riešenie vložte do súboru solution.js.
Overenie druhej úlohy bolo najviac automatizované a objektívne. Väčšina chlapcov uhádla, že je potrebné implementovať Dijkstrov algoritmus. Tí, ktorí našli jeho popis a implementovali algoritmus v JS, majú dobrú prácu. Pri kontrole zadania sme však narazili na veľa papierov s rovnakými chybami. Hľadali sme na internete fragmenty kódu a našli sme článok, z ktorého účastníci skopírovali algoritmus. Je zábavné, že veľa ľudí skopírovalo kód z článku spolu s komentármi autora. Takéto práce získali nízke skóre. Nezakazujeme používať žiadne zdroje, ale chceme, aby sa človek ponoril do toho, čo napíše.
kritériá
Hlavné body boli udelené za testy. Niekedy bolo jasné, že chlapci sa motali s úložiskom, premenovali priečinky a testy zlyhali jednoducho preto, že nemohli nájsť potrebné súbory. Tento rok sme sa snažili takýmto chalanom pomôcť a vrátili sme im všetko na svoje miesto. Ale budúci rok plánujeme prejsť na súťažný systém, a to sa už neodpustí.
Existovali aj „ľudské“, manuálne kritériá. Napríklad prítomnosť jediného štýlu kódu. Body za použitie tabulátorov namiesto medzier nikto neodrátal alebo naopak. Iná vec je, ak striedate jednoduché úvodzovky s dvojitými úvodzovkami podľa jedného známeho pravidla a bodkočiarky umiestňujete náhodne.
Samostatne sa brala do úvahy prehľadnosť a čitateľnosť riešenia. Na všetkých konferenciách vo svete hovoria, že 80 % práce programátora pozostáva z čítania kódu iných ľudí. Dokonca aj školáci podstupujú kontroly kódov – od svojich kurátorov a od seba navzájom. Takže toto kritérium malo významnú váhu. Boli diela, v ktorých neboli žiadne premenné dlhšie ako jeden znak – prosím, nerobte to. Komentáre účastníkov boli veľmi povzbudivé – s výnimkou tých, ktoré boli totožné s komentármi Stelly Changovej.
Posledným kritériom je prítomnosť autotestov. Pridalo si ich len pár ľudí, no pre všetkých sa to stalo obrovským plusom v karme.
Správne rozhodnutie:
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);
};
};Úloha 3: Kalendár udalostí
Pripravili ho vývojári rozhrania Sergey Kazakov a Alexander Podskrebkin.
Podmienka
Napíšte minikalendár, v ktorom sa zobrazí váš rozvrh. Môžete si vziať akýkoľvek rozvrh, ktorý sa vám páči. Napríklad harmonogram frontend konferencií v roku 2019.
Kalendár by mal vyzerať ako zoznam. Neexistujú žiadne ďalšie požiadavky na dizajn. Umožnite nastaviť pripomienky udalostí 3, 7 a 14 dní vopred. Po prvom stiahnutí z internetu by sa mal kalendár otvoriť a fungovať offline.
Užitočné zdroje
Program frontendovej konferencie:
Servisní pracovníci:
Notifications API:
Tretia úloha bola najzaujímavejšia na testovanie, pretože tam bolo toľko možných riešení, z ktorých každé malo svoje vlastné. Overili sme si, ako kandidát narába s neznámymi technológiami – či vie bádať, či svoje riešenia testuje.
kritériá
Skladaný kalendár. Áno, ešte to bolo potrebné rozložiť. Našli sa aj takí, ktorí podmienku brali príliš doslovne a nevložili ani riadok kódu CSS. Nevyzeralo to veľmi atraktívne, ale ak všetko fungovalo, body neklesali.
Získanie zoznamu udalostí zo zdroja. Toto nie je úloha rozloženia, takže zoznam udalostí, ktoré sú v nej zahrnuté, nebol započítaný. Konferenciu môžete kedykoľvek zrušiť, preplánovať alebo pridať novú. Bolo teda potrebné prijímať dáta zvonku a vykresľovať rozloženie na základe prijatého JSON. Dôležité bolo získať dáta akýmkoľvek spôsobom (pomocou metódy fetch alebo pomocou XMLHttpRequest). Ak osoba pridala polyfill na načítanie a označila svoju voľbu v readme, počítalo sa to ako plus.
Registrácia servisného pracovníka bez chýb a pracovať offline po prvom stiahnutí. servisný pracovník s plánovaním ukladania do vyrovnávacej pamäte pri prvom spustení. Podrobnosti o servisných pracovníkoch, ich možnostiach a spôsoboch práce s nimi (stratégie práce s cache, práca offline) nájdete tu.
Možnosť nastaviť pripomienkuaby to vlastne fungovalo po 3, 7, 14 dňoch. Bolo potrebné pochopiť rozhranie Notifications API, mal pravdu v úlohe. Neočakávali sme žiadnu konkrétnu implementáciu, ktorá by preverila, či je čas tlačiť. Akceptovaná bola akákoľvek pracovná možnosť: uloženie v localStorage, IndexDB alebo pravidelné dotazovanie servisným pracovníkom. Dokonca bolo možné vytvoriť push server (tu ), ale nefungovalo by to offline. Rovnako dôležité bolo dostať stlačenie po zatvorení stránky – a otvorení po určitom čase. Ak pripomenutie zomrelo súčasne so zatvorením stránky, riešenie sa nezapočítalo. Je skvelé, keď chalani mysleli na recenzentov a umožnili im to hneď teraz – aby nečakali 3 dni.
Možnosť umiestniť ikonu na plochu (PWA). Skontrolovali sme prítomnosť súboru so správnymi ikonami. Niektorí chlapci vytvorili tento súbor (alebo ho nechali vygenerovať v CreateReactApp) - ale nepridali správne ikony. Potom sa pri pokuse o inštaláciu vyskytla chyba ako „je potrebná iná ikona“.
Kódový štýl a štruktúra projektu. Rovnako ako v druhej úlohe sme sa pozreli na jeden kódový štýl (aj keď sa nezhodoval s naším). Niektorí chlapi naskrutkovali lintre - to je skvelé.
Chyby konzoly. Ak bol priamo v konzole indikátor, že niečo nie je v poriadku, a účastník tomu nevenoval pozornosť, body sme odpočítali.
Výsledky
Čo je vtipné na rozhodnutiach účastníkov:
- Jeden dotazník obsahoval nasledujúci text: „Kamarát programátor mi pomohol zostaviť aplikáciu React. Zasypal som ho otázkami ako a prečo a on mi to povedal. Veľmi sa mi to páčilo, chcem sa o tom dozvedieť viac.“ Tejto aplikácii sme fandili z celého srdca, no žiaľ, kamarát kandidáta nám pri fungovaní aplikácie veľmi nepomohol.
- Jeden kandidát poslal odkaz na GitHub, kde sa nachádzal archív RAR - je ťažké to komentovať. 🙂
- Ďalší kandidát v komentári k prvému riadku súboru solution.js úprimne priznal, že skopíroval algoritmus.
Prihlášky sme dostali od 76 kandidátov a vybrali sme 23 ľudí. Dotazníky nám poslali nielen z Minska, ale aj z Moskvy, Petrohradu a dokonca aj z Tatarstanu. Niektorí chalani nás prekvapili svojimi súčasnými profesiami: jeden z nich je súdny znalec a druhý študent medicíny.
Výsledkom bolo zaujímavé rozdelenie úspešnosti pri plnení úloh. Prvú úlohu splnili účastníci v priemere na 60 %, druhú na 50 % a tretia sa ukázala ako najťažšia a bola splnená v priemere na 40 %.
Úlohy na prvý pohľad vyzerajú zložito a časovo náročné. Dôvodom nie je to, že by sme chceli vyradiť čo najviac kandidátov. Študenti počas štúdia čelia skutočným úlohám – chatovanie, Yandex.Music pre deti alebo Yandex.Weather pre ľudí závislých od počasia. Na to potrebujete štartovaciu základňu.
Pamätám si, že som pred dvoma rokmi videl svoju vstupnú úlohu na SRI a myslel som si, že ju nikdy nevyriešim. Hlavná vec v tejto chvíli je sadnúť si, pozorne si prečítať podmienky a začať to robiť. Ukazuje sa, že podmienky obsahujú takmer 80% roztoku. Napríklad v podmienke tretej úlohy (najťažšej) sme pridali odkazy na servisných pracovníkov a Notifications API na MDN. Študenti, ktorí si preštudovali obsah odkazov, ho dokončili bez problémov.
Bol by som veľmi rád, keby si tento článok prečítali kandidáti, ktorí plánujú v budúcnosti vstúpiť do SRI, ktorí nemohli vstúpiť do Minskej školy alebo ktorí začínajú robiť akúkoľvek inú testovaciu úlohu. Ako vidíte, je to celkom možné. Musíte len veriť v seba a počúvať všetky tipy od autorov.
Zdroj: hab.com