Šiandien atidaryta nauja registracija Maskvoje. Pirmasis mokymų etapas vyks rugsėjo 7 – spalio 25 dienomis. Studentai iš kitų miestų jame galės dalyvauti nuotoliniu būdu arba asmeniškai – įmonė apmokės keliones ir nakvynę nakvynės namuose. Antrasis, taip pat ir baigiamasis, etapas truks iki gruodžio 3 d., jį bus galima atlikti tik asmeniškai.
Mano vardas Julija Seredich, šį įrašą rašėme kartu su Sergejumi Kazakovu. Esame ir sąsajų kūrėjai „Yandex“ Minsko biure, ir ankstesnių metų SRI absolventai.
Registracijos atidarymo Maskvoje proga publikuojame įvadinių užduočių analizę į ankstesnę mokyklą – čia, Minske.
Jei atsekate SRI užduočių istoriją, metai iš metų išbandėme tris svarbius programuotojo įgūdžius:
- Išdėstymas. Kiekvienas kūrėjas turi mokėti maketuoti. Nebūna taip, kad turi dėdę Seryozha, kuri kuria visai komandai, o tu rašai tik scenarijus. Todėl kiekvienas mokinys turi parodyti, kaip moka spausdinti.
- JavaScript. Jei reikalas apsiribotų maketavimu, tuomet turėtume ne sąsajų kūrimo mokyklą, o maketuotojų mokyklą. Gražiai suprojektuotą sąsają reikia atgaivinti. Todėl visada yra užduotis JS, bet kartais tai yra ir algoritmų užduotis - mes juos labai mylime.
- Problemų sprendimas yra bene svarbiausias kūrėjo įgūdis. Kalbant apie sąsajų kūrimą, viskas keičiasi labai greitai. Tai panašu į Lewisą Carrollą: „Jūs turite bėgti taip greitai, kaip galite, kad išliktumėte toje pačioje vietoje, o norėdami patekti į kitą vietą, turite bėgti dvigubai greičiau“. Kasdien susiduriame su naujomis technologijomis – turime į jas atsižvelgti ir mokėti jas suprasti. Todėl trečioje užduotyje pasiūlėme suprasti technologijas, kurių pradedantysis kūrėjas dažniausiai nėra susipažinęs.
Kiekvienos užduoties analizėje papasakosime ne tik apie teisingą procedūrą, bet ir apie dažniausiai daromas klaidas.
1 užduotis: Portfelis
Pirmąją užduotį atliko „Yandex.Collections“ dizaineris Aleksejus Čerenkevičius, išmanantis maketavimą, ir jo tarnybos kolega, sąsajų kūrėjas Sergejus Samsonovas.
Būklė
Sukurkite aplanko svetainę: papasakokite apie save, savo darbą ir savo lūkesčius iš mokyklos. Svetainė turi kuo labiau atitikti siūlomą išdėstymą (nuorodos į maketus: , , , ). Mus domina tik išdėstymas, todėl nenaudokite JavaScript.
Tikrindami atsižvelgsime į:
- įtraukų dydžiai, spalvų teisingumas, šrifto stilius, šrifto dydis;
- semantinis išdėstymas;
- skirtingų elementų būsenų buvimas: mygtukų ir nuorodų rodymas užvedus žymeklį, aktyvių įvesties laukų paryškinimas ir kt.;
- kelių naršyklių suderinamumas (išbandyta naujausiose populiarių naršyklių versijose).
Privalumas bus:
- šiuolaikinių CSS sprendimų naudojimas: flexbox, grid ir kt.;
- Adaptyvus išdėstymas;
- pirminių ir (ar) po procesorių naudojimas, surinkimas, sumažinimas, išvesties kodo optimizavimas;
- HTML formos patvirtinimas, stilizuotas failo įkėlimo mygtukas.
Užduotis yra gana didelė, todėl galite praleisti tai, kas neveiks. Tai šiek tiek sumažins jūsų balą, bet vis tiek galėsite pademonstruoti savo žinias. Kai baigsite, atsiųskite mums dvi nuorodas – į savo portfelį ir šaltinio kodą „GitHub“.
Užduotyje pasiūlyti maketai buvo ne tik su mobiliųjų įrenginių, planšetinių kompiuterių ir stalinių kompiuterių ekranais, bet ir su realiomis specifikacijomis.
Siekiant, kad pirmosios užduoties patikrinimo rezultatas būtų kuo objektyvesnis, šiam patikrinimui buvo nustatyta daug kriterijų.
kriterijai
Sukurta svetainė. Tai atrodo akivaizdu, tačiau kai kurie vaikinai visiškai praleido kai kuriuos blokus – arba norėjo sutaupyti laiko, arba negalėjo to padaryti. Išdėstymą galima apytiksliai suskirstyti į keturis pagrindinius ekranus: pagrindinį ekraną su avataru, bloką su SRI lūkesčių sąrašu, bloką su aplanku ir bloką su kontaktine informacija. Jie gali būti gaminami sekcijomis arba tiesiog naudojant divus, svarbiausia, kad visi keturi blokai būtų prieinami.
Išdėstymo atitikimas maketui. Dizaineris sukūrė atskirą specifikaciją (įskaitant spalvas, tipografiją, mygtukų būsenas ir kt.), kad kandidatams būtų lengviau. Apačioje buvo užuomina apie pirmojo ekrano įtraukas ir savybes. Labai džiaugiausi vaikinais, kurie atsižvelgė į visus dizainerio pageidavimus: pavyzdžiui, pirmasis ekranas turėjo būti ne mažesnis už peržiūros srities aukštį.
Adaptyvus išdėstymas - tai yra tada, kai sąsaja nėra tiesiog išdėstyta taip, kad trimis skyromis viskas būtų nuo pikselių iki pikselių. Tarpinėse būsenose išdėstymas taip pat neturėtų subyrėti. Kai kurie pamiršo apriboti maksimalų konteinerio plotį ir viską nustatyti iki 1920 pikselių, kai kurie sujaukė fonus, tačiau apskritai kandidatai su šia užduotimi susidorojo puikiai.
Semantinis išdėstymas. „Kiek kartų jie pasauliui pasakė“, kad nuoroda turėtų būti sukurta kaip , mygtukas – kaip . Laimei, dauguma kandidatų įvykdė ir šį reikalavimą. Ne visi atpažino paslėptą sąrašą pagal SRI lūkesčius, sudarydami jį naudodami div žymas, tačiau tai nėra taip blogai. Buvo kandidatas, kuris įdėjo visas jam žinomas semantines žymas – kur reikia, o kur nereikia. Pavyzdžiui, vietoj sąrašo - ir . Galų gale, semantika - tai jūsų puslapio sudėties ir kiekvieno bloko tikslo supratimas (čia daugumai tai pavyko), taip pat apie išankstinio ir (arba) papildomo procesoriaus naudojimą (čia kai kuriems pavyko, nors tai buvo ir taškuose - dažniausiai jie jungdavosi mažiau ir scss) .
Veikiantis slankiklis. Užduotyje rašėme, kad JS naudoti negalima. Čia buvo išbandytas gebėjimas spręsti problemas – naudojant krūvą buvo galima padaryti slankiklį Ir . Visa magija vyksta selektorių lygyje #button-N:checked ~ .slider-inner .slider-slides. Kai spustelėjame vieną iš įvesties žymimųjų laukelių, jis pereina į pažymėtą būseną. Galime tuo pasinaudoti ir priskirti mums reikalingą vertimą konteineriui su skaidrėmis: transform: translate (-33%). Galite pamatyti slankiklio įgyvendinimą .
Išskleidžiamieji sąrašai. Čia taip pat viskas susiklostė ir panašus parinkiklis: .accordion-item input:checked ~ .accordion-item__content. Galite pamatyti įgyvendinimą .
Būsenų :hover, :active ir :focu* prieinamumas. Labai svarbus momentas. Nuo to priklausė patogumas sąveikos su sąsaja metu. Vartotojas visada turėtų gauti atsiliepimą apie savo veiksmus. Šis elementas buvo tikrinamas per visą sąveiką su klausimynu. Jei paspaudžiau mygtuką „Paskambinti“ ir vizualiai nieko neįvyko (nors užklausa buvo išsiųsta), tai yra blogai, nes tada jį spustelėsiu dar ir dar. Dėl to bus išsiųsta dešimt užklausų, o man perskambins dešimt kartų. Turime nepamiršti, kad mobiliuosiuose įrenginiuose nėra pelės, o tai reiškia, kad neturėtų būti pelės. Ir dar vienas punktas, kuris neturėjo įtakos tiems, kurie įvykdė tašką apie semantiką. Jei valdiklis nėra interaktyvus elementas, užvedus pelės žymeklį virš jo, žymeklis išliks standartinis. Atrodo labai netvarkingai, net jei parašei reakciją, kad užvesk. Nenuvertinkite žymeklio: rodyklė.
Animacijos. Svarbu, kad visos reakcijos, vykstančios su elementais, būtų sklandžios. Niekas gyvenime nevyksta akimirksniu, todėl pakako perėjimų užvedus pelės žymeklį ir aktyvumo, kad sąsaja būtų malonesnė. Na, tie, kurie animavo slankiklį ir sąrašus, paprastai yra puikūs.
Naudojant naujausias technologijas. Daugelis žmonių naudojo lankstumą, bet niekas neatliko užduoties naudodamas tinklelį. Taškas buvo skaičiuojamas, jei flex buvo naudojamas teisingai. Jei kur nors išdėstymas išsiskyrė dėl šių labai lankstų, deja, jūs negavote jokių papildomų taškų.
Formos patvirtinimas. Viskas, ko reikėjo, buvo pridėti reikiamą atributą prie kiekvienos formos įvesties. Pridėjome taškų tiems, kurie patvirtino el. pašto lauką kaip el.
Failo įkėlimo mygtuko stiliaus nustatymas. Tikėjomės pamatyti tokį derinį: ir Pasirinkite failą . Toliau reikėjo paslėpti įvestį ir stilių etiketę. Yra dar vienas įprastas būdas – padaryti skaidrų įvestį ir uždėti ant mygtuko viršaus. Tačiau ne visos naršyklės leidžia kurti stilių , ir tokio sprendimo negalima vadinti visiškai kryžmine naršykle. Ir semantiškai teisingiau daryti etiketę.
Suderinamumas tarp naršyklių. Patikrinome, ar viskas gerai dviejose naujausiose šiuolaikinių naršyklių versijose (be IE – dalyviams pasisekė), taip pat „Safari“ „iPhone“ ir „Chrome“ „Android“ įrenginiuose.
Priešingai, atimdavome taškus, jei kas nors naudojo JS arba Bootstrap: abu jie nugalės visos užduoties tikslą. Be to, dalyviai su „Bootstrap“ ne tik gavo minusą, bet ir prarado daug taškų už semantiką ir įgyvendintus elementus.
Tie, kurie savo svetainę priglobė kur nors internete, ypatingo pranašumo negavo – tačiau apžvalgininkai labai džiaugėsi, kai jiems nereikėjo atsisiųsti saugyklų ir paleisti jų vietoje savo kompiuteryje. Taigi tai buvo karmos pliusas.
Pirmoji užduotis buvo labai naudinga pirmiausia studentui. Tie, kurių nepriėmėme, dabar turi paruoštą gyvenimo aprašymą – galite su pasididžiavimu jį pridėti prie visų atsakymų arba paskelbti savo gh-puslapiuose.
2 užduotis: Transporto maršrutas
Užduoties autorius – paieškos sąsajų grupės vadovas Denisas Balyko.
Būklė
Ar turite žvaigždžių žemėlapį? Tai rodo kiekvienos žvaigždės pavadinimą, taip pat atstumą nuo jos iki kitų žvaigždžių šviesos sekundėmis. Įdiekite sprendimo funkciją, kuri turėtų turėti tris argumentus: objektą, kuriame raktai yra žvaigždžių pavadinimai, o reikšmės yra atstumai iki žvaigždžių (vienpusis eismas erdvėje), taip pat tako pradžios ir pabaigos taškai – atitinkamai pradžia ir finišas. Funkcija turėtų grąžinti trumpiausią atstumą nuo starto žvaigždės iki finišo žvaigždės ir kelią, kuriuo reikia sekti.
Funkcijos parašas:
const solution = function(graph, start, finish) { // Ваше решение }Įvesties duomenų pavyzdys:
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';Išvesties pavyzdys:
{ distance: 90, path: ['start', 'A', 'D', 'finish'] }Pastaba: sprendimo skeletas yra aplanke src/, įdėkite sprendimą į solution.js.
Antrosios užduoties patikrinimas buvo labiausiai automatizuotas ir objektyviausias. Dauguma vaikinų spėjo, kad reikia įgyvendinti Dijkstros algoritmą. Tiems, kurie rado jo aprašymą ir įdiegė algoritmą JS, viskas gerai. Tačiau tikrindami užduotį aptikome daug popierių su tomis pačiomis klaidomis. Internete ieškojome kodo fragmentų ir radome straipsnį, iš kurio dalyviai nukopijavo algoritmą. Juokinga, kad daug kas nukopijavo kodą iš straipsnio kartu su autoriaus komentarais. Tokie darbai gavo žemą balą. Nedraudžiame naudoti jokių šaltinių, bet norime, kad žmogus įsigilintų į tai, ką rašo.
kriterijai
Pagrindiniai balai buvo skirti už testus. Kartais būdavo aišku, kad vaikinai blaškosi su saugykla, pervardija aplankus, o testai nepavyks vien dėl to, kad jie neranda reikiamų failų. Šiemet stengėmės padėti tokiems vaikinams ir grąžinome jiems viską į savo vietas. Tačiau kitais metais planuojame pereiti prie konkursų sistemos, ir tai jau nebus atleista.
Taip pat buvo „žmogiški“, rankiniai kriterijai. Pavyzdžiui, vieno kodo stiliaus buvimas. Niekas neatėmė taškų už skirtukų naudojimą vietoj tarpų ar atvirkščiai. Kitas reikalas, jei pavienes kabutes keisite dvigubomis kabutėmis pagal vieną jums žinomą taisyklę, o kabliataškius dėsite atsitiktinai.
Atskirai buvo atsižvelgta į sprendimo aiškumą ir įskaitomumą. Visose pasaulio konferencijose sakoma, kad 80% programuotojo darbo sudaro kitų žmonių kodų skaitymas. Netgi moksleiviai patiria kodų peržiūras – iš kuratorių ir vieni kitų. Taigi šis kriterijus turėjo didelę reikšmę. Buvo darbų, kuriuose nebuvo ilgesnių nei vienas simbolis kintamųjų – prašau to nedaryti. Dalyvių komentarai buvo labai padrąsinantys – išskyrus tuos, kurie buvo identiški Stella Chang komentarams.
Paskutinis kriterijus yra automatinių testų buvimas. Tik keli žmonės juos pridėjo, bet kiekvienam tai tapo didžiuliu karmos pliusu.
Teisingas sprendimas:
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 užduotis: Renginių kalendorius
Ją parengė sąsajos kūrėjai Sergejus Kazakovas ir Aleksandras Podskrebkinas.
Būklė
Parašykite mini kalendorių, kad būtų rodomas jūsų tvarkaraštis. Galite pasirinkti bet kokį jums patinkantį tvarkaraštį. Pavyzdžiui, frontend konferencijų tvarkaraštis 2019 m.
Kalendorius turėtų atrodyti kaip sąrašas. Kitų projektavimo reikalavimų nėra. Sudarykite galimybę nustatyti įvykių priminimus prieš 3, 7 ir 14 dienų. Po pirmojo atsisiuntimo iš interneto kalendorius turėtų atsidaryti ir veikti neprisijungus.
Naudingi ištekliai
Frontend konferencijos tvarkaraštis:
Aptarnaujantys darbuotojai:
Pranešimų API:
Trečiąją užduotį buvo įdomiausia išbandyti, nes buvo labai daug galimų sprendimų, kiekvienas turi savo. Tikrinome, kaip kandidatas elgiasi su nepažįstamomis technologijomis – ar moka tyrinėti, ar išbando savo sprendimus.
kriterijai
Sulankstytas kalendorius. Taip, dar reikėjo jį išdėstyti. Buvo ir tokių, kurie sąlygą suprato per daug pažodžiui ir neįterpė nė vienos CSS kodo eilutės. Tai neatrodė labai patraukli, bet jei viskas pavyko, taškų nemažėjo.
Įvykių sąrašo gavimas iš šaltinio. Tai nėra maketavimo užduotis, todėl į ją įtrauktų įvykių sąrašas nebuvo skaičiuojamas. Visada galite atšaukti konferenciją, suplanuoti ją iš naujo arba pridėti naują. Taigi reikėjo gauti duomenis iš išorės ir pateikti maketą pagal gautą JSON. Svarbu buvo gauti duomenis bet kokiu būdu (naudojant gavimo metodą arba naudojant XMLHttpRequest). Jei asmuo pridėjo daugialypį užpildą ir pažymėjo savo pasirinkimą readme, tai buvo skaičiuojama kaip pliusas.
Serviso darbuotojo registracija be klaidų ir dirbti neprisijungus po pirmojo atsisiuntimo. aptarnaujantis darbuotojas, turintis tvarkaraščio talpyklą pirmą kartą paleidžiant. Išsamią informaciją apie paslaugų darbuotojus, jų galimybes ir darbo su jais būdus (darbo su talpyklomis strategijos, darbo neprisijungus) rasite čia.
Galimybė nustatyti priminimąkad jis iš tikrųjų veiktų po 3, 7, 14 dienų. Reikėjo suprasti pranešimų API, teisingai atliko užduotį. Nesitikėjome, kad bus atliktas konkretus diegimas, kad patikrintume, ar laikas stumti. Buvo priimta bet kokia darbo parinktis: saugojimas vietinėje saugykloje, „IndexDB“ arba periodinis aptarnavimo darbuotojo atliktas tyrimas. Netgi buvo galima padaryti tiesioginį serverį (čia ), bet neprisijungus jis neveiks. Lygiai taip pat svarbu buvo gauti postūmį uždarius puslapį ir po kurio laiko jį atidaryti. Jei priminimas mirė tuo pačiu metu, kai buvo uždarytas puslapis, sprendimas nebuvo skaičiuojamas. Šaunu, kai vaikinai galvojo apie apžvalgininkus ir leido gauti postūmį jau dabar - kad nelauktų 3 dienų.
Galimybė įdėti piktogramą darbalaukyje (PWA). Patikrinome, ar failas yra su tinkamomis piktogramomis. Kai kurie vaikinai sukūrė šį failą (arba paliko jį sugeneruotą „CreateReactApp“), bet nepridėjo tinkamų piktogramų. Tada, bandant įdiegti, įvyko klaida, pavyzdžiui, „reikia kitos piktogramos“.
Kodo stilius ir projekto struktūra. Kaip ir antroje užduotyje, žiūrėjome į vieną kodo stilių (net jei jis nesutapo su mūsų). Kai kurie vaikinai prisuko antgalius – tai puiku.
Konsolės klaidos. Jei konsolėje buvo indikatorius, kad kažkas negerai, o dalyvis į tai nekreipė dėmesio, tada atimdavome taškus.
rezultatai
Kas juokinga dėl dalyvių sprendimų:
- Vienoje anketoje buvo toks tekstas: „Draugas programuotojas padėjo man sukurti „React“ programą. Aš jį užpuoliau klausimais, kaip ir kodėl, ir jis man pasakė. Man tai labai patiko, noriu sužinoti daugiau apie tai. Iš visos širdies siekėme šios paraiškos, bet, deja, kandidato draugas nelabai padėjo, kad paraiška veiktų.
- Vienas kandidatas atsiuntė nuorodą į „GitHub“, kur buvo RAR archyvas – sunku tai komentuoti. 🙂
- Kitas kandidatas, komentuodamas pirmąja failo lahendus.js eilutėje, nuoširdžiai prisipažino, kad nukopijavo algoritmą.
Gavome 76 kandidatų paraiškas ir atrinkome 23 žmones. Mums anketas siuntė ne tik iš Minsko, bet ir iš Maskvos, Sankt Peterburgo ir net Tatarstano. Kai kurie vaikinai mus nustebino dabartinėmis profesijomis: vienas – teismo medicinos ekspertas, kitas – medicinos studentas.
Rezultatas buvo įdomus sėkmės rodiklių pasiskirstymas atliekant užduotis. Pirmąją užduotį dalyviai įveikė vidutiniškai 60 proc., antrąją – 50 proc., o trečioji pasirodė pati sunkiausia ir buvo atlikta vidutiniškai 40 proc.
Iš pirmo žvilgsnio užduotys atrodo sudėtingos ir reikalaujančios daug laiko. Priežastis yra ne ta, kad norime atmesti kuo daugiau kandidatų. Studijų metu studentai susiduria su realiomis užduotimis – pokalbių kūrimas, Yandex.Music vaikams arba Yandex.Weather nuo oro priklausomiems žmonėms. Tam jums reikia pradinio pagrindo.
Pamenu, prieš dvejus metus mačiau savo SRI įėjimo užduotį ir galvojau, kad niekada jos neišspręsiu. Svarbiausia šiuo metu yra atsisėsti, atidžiai perskaityti sąlygas ir pradėti tai daryti. Pasirodo, sąlygose yra beveik 80% tirpalo. Pavyzdžiui, trečiosios užduoties sąlygoje (sunkiausia) mes įtraukėme nuorodas į paslaugų darbuotojus ir pranešimų API MDN. Nuorodų turinį studijavę studentai ją be vargo užbaigė.
Labai norėčiau, kad šį straipsnį skaitytų kandidatai, kurie ateityje planuoja stoti į SRI, kurie negalėjo įstoti į Minsko mokyklą ar pradeda atlikti kokią nors kitą bandomąją užduotį. Kaip matote, tai padaryti visiškai įmanoma. Jums tereikia tikėti savimi ir įsiklausyti į visus autorių patarimus.
Šaltinis: www.habr.com