Danas je otvoren novi upis u Moskvi. Prva faza obuke održat će se od 7. rujna do 25. listopada. Studenti iz drugih gradova moći će sudjelovati na daljinu ili osobno - tvrtka će platiti put i smještaj u hostelu. Druga, ujedno i završna etapa, trajat će do 3. prosinca, moći će se završiti samo osobno.
Moje ime je Yulia Seredich, napisali smo ovaj post zajedno sa Sergejem Kazakovim. Oboje smo programeri sučelja u Yandexovom uredu u Minsku i diplomirali smo SRI prethodnih godina.
Povodom otvaranja upisa u Moskvi, objavljujemo analizu uvodnih zadataka u prethodnu Školu - ovdje u Minsku.
Ako pratite povijest SRI zadataka, iz godine u godinu testirali smo tri važne vještine za programera:
- Izgled. Svaki programer bi trebao biti u stanju napraviti raspored. Ne događa se da imate ujaka Serjožu koji dizajnira za cijeli tim, a vi samo pišete scenarije. Stoga svaki učenik mora pokazati kako zna slagati.
- JavaScript. Da se stvar ograničila na layout, onda ne bismo imali školu za razvoj sučelja, nego školu za layout dizajnere. Lijepo dizajnirano sučelje treba oživjeti. Stoga uvijek postoji zadatak za JS, ali ponekad je to zadatak i za algoritme - toliko ih volimo.
- Rješavanje problema možda je najvažnija vještina programera. Kada je u pitanju kreiranje sučelja, stvari se vrlo brzo mijenjaju. To je kao Lewis Carroll: "Morate trčati što brže možete samo da biste ostali na istom mjestu, a da biste stigli na drugo mjesto morate trčati duplo brže." Svakodnevno se susrećemo s novim tehnologijama – moramo ih uzeti u obzir i biti u stanju razumjeti. Stoga smo u trećem zadatku predložili razumijevanje tehnologija s kojima programer početnik obično nije upoznat.
U analizi svakog zadatka reći ćemo vam ne samo o pravilnom postupku, već i o uobičajenim pogreškama.
Zadatak 1: Portfolio
Na prvom su zadatku radili dizajner Yandex.Collections Alexey Cherenkevich, koji zna kako napraviti layout, i njegov kolega iz servisa, programer sučelja Sergey Samsonov.
Stanje
Napravite web stranicu za portfelj: recite nam nešto o sebi, svom radu i očekivanjima od škole. Stranica treba što više odgovarati predloženom izgledu (linkovi na izglede: , , , ). Zanima nas samo izgled, stoga molimo da ne koristite JavaScript.
Prilikom provjere uzet ćemo u obzir:
- veličine uvlaka, ispravnost boja, stil slova, veličina slova;
- semantički raspored;
- prisutnost različitih stanja elemenata: prikaz gumba i poveznica kada lebdite kursorom, označavanje aktivnih polja za unos itd.;
- kompatibilnost s više preglednika (testirano u najnovijim verzijama popularnih preglednika).
Prednost će biti:
- korištenje modernih CSS rješenja: flexbox, grid itd.;
- Prilagodljiv raspored;
- korištenje pred- i (ili) post-procesora, asembler, minifikacija, optimizacija izlaznog koda;
- Provjera valjanosti HTML obrasca, stilizirani gumb za učitavanje datoteke.
Zadatak je prilično obiman, tako da možete preskočiti ono što neće raditi. To će malo smanjiti vaš rezultat, ali ćete i dalje moći pokazati svoje znanje. Kada završite, pošaljite nam dvije poveznice – na svoj portfelj i izvorni kod na GitHubu.
Izgledi predloženi u zadatku nisu bili samo sa zaslonima za mobilne uređaje, tablete i stolna računala, već i sa stvarnim specifikacijama.
Kako bismo unijeli što veću objektivnost u rezultat provjere prvog zadatka, kriteriji za ovu provjeru bili su brojni.
kriteriji
Dizajnirana web stranica. Ovo se čini očiglednim, ali neki su dečki potpuno preskočili neke blokove - ili su htjeli uštedjeti vrijeme, ili ih nisu mogli napraviti. Izgled se može grubo podijeliti na četiri glavna zaslona: glavni zaslon s avatarom, blok s popisom očekivanja od SRI-ja, blok s portfeljem i blok s kontakt podacima. Mogu se napraviti u dijelovima ili jednostavno pomoću divova, glavna stvar je da su sva četiri bloka bila dostupna.
Usklađenost izgleda s izgledom. Dizajner je izradio zasebnu specifikaciju (uključujući boje, tipografiju, stanje gumba itd.) kako bi olakšao kandidatima. Na dnu se nalazio savjet o uvlakama i značajkama prvog zaslona. Bio sam jako zadovoljan momcima koji su uzeli u obzir sve želje dizajnera: na primjer, prvi zaslon nije trebao biti manji od visine prozora.
Adaptivni izgled - ovo je kada sučelje nije samo postavljeno tako da je na tri rezolucije sve piksel do piksela u rasporedu. U srednjim stanjima, raspored se također ne bi trebao raspasti. Neki su zaboravili ograničiti maksimalnu širinu spremnika i postaviti sve na 1920 piksela, neki su zeznuli pozadinu, ali sve u svemu kandidati su se dobro nosili s ovim zadatkom.
Semantički raspored. “Koliko su puta rekli svijetu” da link treba biti dizajniran kao , gumb – kao . Srećom, većina kandidata je ispunila i ovaj uvjet. Nisu svi prepoznali skriveni popis u očekivanjima SRI-a, čineći ga pomoću div oznaka, ali nije tako loše. Bio je kandidat koji je ubacio sve semantičke oznake koje je znao – gdje je trebalo i gdje nije trebalo. Na primjer, umjesto popisa - i . Uostalom, semantika - radi se o razumijevanju sastava vaše stranice i svrhe svakog bloka (ovdje je većina to uspjela), kao i o korištenju pred- i/ili post-procesora (nekolicina je to uspjela ovdje, iako je ovaj bio i u točkama - najčešće su koristili manje i scss) .
Radni klizač. U zadatku smo napisali da se JS ne može koristiti. Ovdje je testirana sposobnost rješavanja problema - klizač se može napraviti pomoću hrpe i . Sva se magija događa na razini selektora #button-N:checked ~ .slider-inner .slider-slides. Kada kliknemo na jedan od okvira za unos, on prelazi u označeno stanje. To možemo iskoristiti i spremniku sa slajdovima dodijeliti prijevod koji nam je potreban: transform: translate(-33%). Možete vidjeti implementaciju klizača .
Padajući popisi. I ovdje se sve svelo na to i sličan selektor: .accordion-item input:checked ~ .accordion-item__content. Možete vidjeti implementaciju .
Dostupnost stanja :hover, :active i :focu*. Vrlo važna točka. O tome je ovisila udobnost tijekom interakcije sa sučeljem. Korisnik uvijek treba dobiti povratnu informaciju o svojim postupcima. Ova je stavka provjeravana tijekom cijele interakcije s upitnikom. Ako sam kliknuo gumb "Nazovi me" i vizualno se ništa nije dogodilo (iako je zahtjev poslan), to je loše, jer ću ga kliknuti uvijek iznova. Kao rezultat, bit će poslano deset zahtjeva i bit ću pozvan deset puta. Ne smijemo zaboraviti da mobilni uređaji nemaju miša, što znači da ne bi trebalo biti lebdenja. I još jedna točka koja nije utjecala na one koji su ispunili točku o semantici. Ako vaša kontrola nije interaktivni element, tada će kursor ostati standardan kada prijeđete iznad nje. Izgleda vrlo neuredno, čak i ako ste napisali reakciju na lebdenje. Ne podcjenjujte kursor: pokazivač.
Animacije. Važno je da sve reakcije koje se događaju s elementima budu glatke. Ništa u životu nije trenutačno, tako da su prijelazi pri lebdenju i aktivni bili dovoljni da sučelje bude ugodnije. Pa oni koji su animirali klizač i liste su općenito super.
Korištenje najnovije tehnologije. Mnogi su ljudi koristili flex, ali nitko nije dovršio zadatak koristeći grid. Bod se računa ako je flex ispravno korišten. Ako se negdje raspored raspao upravo zbog ovih savijanja, nažalost, niste dobili nikakve dodatne bodove.
Provjera valjanosti obrasca. Sve što je bilo potrebno je dodati traženi atribut svakom unosu forme. Dodali smo bodove onima koji su polje e-pošte potvrdili kao e-poštu.
Oblikovanje gumba za prijenos datoteke. Očekivali smo da ćemo vidjeti kombinaciju poput: i Odaberite datoteku . Zatim smo morali sakriti unos i stilizirati oznaku. Postoji još jedan uobičajeni način - napraviti transparentan unos i staviti ga na vrh gumba. Ali ne dopuštaju svi preglednici stiliziranje , a takvo se rješenje ne može nazvati potpuno cross-browserom. I semantički je ispravnije napraviti oznaku.
Kompatibilnost s različitim preglednicima. Provjerili smo je li sve u redu u dvije najnovije verzije modernih preglednika (bez IE - sudionici su imali sreće), kao i u Safariju na iPhoneu i Chromeu na Androidu.
Naprotiv, oduzeli smo bodove ako je netko koristio JS ili Bootstrap: oba bi poništila svrhu cijelog zadatka. Štoviše, sudionici s Bootstrapom ne samo da su dobili minus, već su izgubili i mnogo bodova za semantiku i implementirane elemente.
Oni koji su svoju stranicu smjestili negdje na Internetu nisu imali nikakvu posebnu prednost - ali recenzenti su bili vrlo sretni kada nisu morali preuzimati repozitorije i pokretati ih lokalno na svom računalu. Dakle, ovo je poslužilo kao plus za karmu.
Prvi zadatak bio je vrlo koristan prvenstveno za učenika. Oni koje nismo prihvatili sada imaju pripremljen životopis - s ponosom ga možete priložiti uz sve odgovore ili postaviti na svoje gh-stranice.
Zadatak 2: Transportna ruta
Autor zadatka je voditelj grupe sučelja za pretraživanje Denis Balyko.
Stanje
Imate li zvjezdanu kartu? Prikazuje naziv svake zvijezde, kao i udaljenost od nje do drugih zvijezda u svjetlosnim sekundama. Implementirati funkciju rješenja koja treba uzeti tri argumenta: objekt u kojem su ključevi imena zvijezda, a vrijednosti udaljenosti do zvijezda (jednosmjerni promet u svemiru), kao i imena početna i završna točka staze - start i cilj. Funkcija bi trebala vratiti najkraću udaljenost od startne zvijezde do ciljne zvijezde i putanju koju treba slijediti.
Potpis funkcije:
const solution = function(graph, start, finish) { // Ваше решение }Primjer ulaznih podataka:
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';Primjer izlaza:
{ distance: 90, path: ['start', 'A', 'D', 'finish'] }Napomena: Kostur rješenja nalazi se u mapi src/, stavite svoje rješenje u solution.js.
Provjera drugog zadatka bila je najautomatiziranija i najobjektivnija. Većina momaka je pretpostavila da je potrebno implementirati Dijkstrin algoritam. Oni koji su pronašli njegov opis i implementirali algoritam u JS su dobri. No, prilikom provjere zadaće naišli smo na mnogo radova s istim greškama. Na internetu smo tražili fragmente koda i pronašli članak iz kojeg su sudionici kopirali algoritam. Smiješno je što su mnogi ljudi kopirali kod iz članka zajedno s komentarima autora. Takvi su radovi dobili nisku ocjenu. Ne zabranjujemo korištenje bilo kakvih izvora, ali želimo da se čovjek udubi u ono što piše.
kriteriji
Glavni bodovi dodijeljeni su za testove. Ponekad je bilo jasno da se momci petljaju s repozitorijem, preimenuju mape i testovi ne bi uspjeli jednostavno zato što nisu mogli pronaći potrebne datoteke. Ove godine smo pokušali pomoći takvim momcima i vratili im sve na svoje mjesto. Ali sljedeće godine planiramo prijeći na sustav natjecanja, a to se više neće opraštati.
Postojali su i “ljudski”, ručni kriteriji. Na primjer, prisutnost jednog stila koda. Nitko nije oduzimao bodove za korištenje tabulatora umjesto razmaka ili obrnuto. Druga je stvar ako izmjenjujete jednostruke navodnike s dvostrukim navodnicima prema jednom vama poznatom pravilu i stavljate točku-zarez nasumično.
Posebno se vodilo računa o jasnoći i čitljivosti rješenja. Na svim svjetskim konferencijama kažu da se 80% posla programera sastoji od čitanja koda drugih ljudi. Čak se i školarci podvrgavaju recenziji kodeksa - od svojih kustosa i međusobno. Stoga je ovaj kriterij imao značajnu težinu. Bilo je radova u kojima nije bilo varijabli dužih od jednog znaka – molim vas nemojte to raditi. Komentari sudionika bili su vrlo ohrabrujući - s izuzetkom onih koji su bili identični komentarima Stelle Chang.
Posljednji kriterij je prisutnost autotestova. Samo nekoliko ljudi ih je dodalo, ali za sve je to postao veliki plus u njihovoj karmi.
Prava odluka:
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);
};
};Zadatak 3: Kalendar događaja
Pripremili su ga programeri sučelja Sergey Kazakov i Alexander Podskrebkin.
Stanje
Napišite mini-kalendar za prikaz svog rasporeda. Možete uzeti bilo koji raspored koji želite. Na primjer, raspored frontend konferencija u 2019.
Kalendar bi trebao izgledati kao popis. Nema drugih zahtjeva za dizajn. Omogućite postavljanje podsjetnika za događaje 3, 7 i 14 dana unaprijed. Nakon prvog preuzimanja s interneta, kalendar bi se trebao otvoriti i funkcionirati offline.
Korisni resursi
Frontend konferencijski raspored:
Uslužni radnici:
API za obavijesti:
Treći zadatak bio je najzanimljiviji za testiranje, jer je bilo toliko mogućih rješenja, svako je imalo svoje. Provjerili smo kako se kandidat snalazi u nepoznatim tehnologijama - zna li istraživati, testira li svoja rješenja.
kriteriji
Preklopljeni kalendar. Da, još ga je trebalo postaviti. Bilo je i onih koji su uvjet shvatili previše doslovno i nisu ubacili niti jedan redak CSS koda. Nije izgledalo baš atraktivno, ali ako je sve funkcioniralo, bodovi se nisu smanjivali.
Dohvaćanje popisa događaja iz izvora. Ovo nije zadatak rasporeda, tako da se popis događaja uključenih u njega nije računao. Uvijek možete otkazati konferenciju, promijeniti je ili dodati novu. Stoga je bilo potrebno primiti podatke izvana i renderirati izgled na temelju primljenog JSON-a. Podatke je bilo važno dobiti na bilo koji način (metodom fetch ili XMLHttpRequest). Ako je osoba dodala polifill za dohvaćanje i označila svoj izbor u readmeu, to se računalo kao plus.
Registracija servisera bez grešaka i raditi offline nakon prvog preuzimanja. servisni radnik s predmemorijom rasporeda pri prvom pokretanju. Detalje o uslužnim radnicima, njihovim mogućnostima i načinima rada s njima (strategije za rad s predmemorijama, rad izvan mreže) možete pronaći ovdje.
Mogućnost postavljanja podsjetnikatako da stvarno djeluje nakon 3, 7, 14 dana. Bilo je potrebno razumjeti Notifications API, bio u pravu na zadatku. Nismo očekivali nikakvu konkretnu implementaciju koja bi provjerila je li vrijeme za guranje. Prihvaćena je bilo koja radna opcija: pohrana u localStorage, IndexDB ili periodično ispitivanje od strane servisera. Čak je bilo moguće napraviti i push server (ovdje ), ali ne bi radilo izvan mreže. Jednako je važno bilo primiti push nakon što je stranica zatvorena – i otvorena nakon nekog vremena. Ako je podsjetnik prestao u isto vrijeme kada je stranica zatvorena, rješenje se ne računa. Super je kad su dečki mislili na recenzente i omogućili da se odmah dobije poticaj - kako ne bi čekali 3 dana.
Mogućnost postavljanja ikone na radnu površinu (PWA). Provjerili smo prisutnost datoteke s ispravnim ikonama. Neki dečki su napravili ovu datoteku (ili je ostavili generiranu u CreateReactAppu) - ali nisu dodali ispravne ikone. Zatim se prilikom pokušaja instalacije pojavila pogreška poput "potrebna je druga ikona".
Stil koda i struktura projekta. Kao iu drugom zadatku, gledali smo jedan stil koda (čak i ako se nije podudarao s našim). Neki dečki su zeznuli lintere - to je super.
Greške konzole. Ako je na konzoli postojao indikator da nešto nije u redu, a sudionik nije obratio pozornost na to, tada smo oduzimali bodove.
Rezultati
Što je smiješno u odlukama sudionika:
- Jedan upitnik sadržavao je sljedeći tekst: “Prijatelj programer mi je pomogao sastaviti React aplikaciju. Obasula sam ga pitanjima kako i zašto, a on mi je rekao. Stvarno mi se svidjelo, želim znati više o tome.” Svim smo srcem navijali za ovu aplikaciju, ali nažalost kandidatov prijatelj nije bio od velike pomoći da aplikacija funkcionira.
- Jedan kandidat je poslao link na GitHub, gdje se nalazi RAR arhiva - teško je to komentirati. 🙂
- Drugi kandidat je u komentaru na prvi redak solution.js datoteke iskreno priznao da je kopirao algoritam.
Zaprimili smo prijave od 76 kandidata i odabrali 23 osobe. Upitnike su nam slali ne samo iz Minska, već i iz Moskve, Sankt Peterburga, pa čak i iz Tatarstana. Neki od momaka iznenadili su nas svojim trenutnim zanimanjima: jedan je sudski vještak, a drugi student medicine.
Rezultat je bila zanimljiva distribucija uspješnosti u izvršavanju zadataka. Sudionici su prvi zadatak riješili u prosjeku 60%, drugi 50%, a treći se pokazao kao najteži i bio je riješen u prosjeku 40%.
Na prvi pogled zadaci izgledaju složeni i dugotrajni. Razlog nije u tome da želimo izbaciti što više kandidata. Tijekom studija studenti se suočavaju sa zadacima iz stvarnog života - kreiranje chata, Yandex.Music za djecu ili Yandex.Weather za ljude ovisne o vremenu. Za ovo vam je potrebna početna baza.
Sjećam se da sam prije dvije godine vidio svoj zadatak za prijem u SRI i pomislio da ga nikad neću riješiti. Glavna stvar u ovom trenutku je sjesti, pažljivo pročitati uvjete i početi to raditi. Ispada da uvjeti sadrže gotovo 80% otopine. Na primjer, u uvjetu trećeg zadatka (najtežeg), dodali smo poveznice na servisne radnike i Notifications API na MDN-u. Učenici koji su proučavali sadržaj poveznica dovršili su ga bez poteškoća.
Zaista bih volio da ovaj članak pročitaju kandidati koji planiraju upisati SRI u budućnosti, koji nisu uspjeli ući u Minsku školu ili koji počinju rješavati bilo koji drugi ispitni zadatak. Kao što vidite, sasvim je moguće to učiniti. Samo trebate vjerovati u sebe i poslušati sve savjete autora.
Izvor: www.habr.com