Danes se je odprl nov vpis v Moskvi. Prva stopnja usposabljanja bo potekala od 7. septembra do 25. oktobra. Študenti iz drugih mest se ga bodo lahko udeležili na daljavo ali osebno - podjetje bo plačalo pot in nastanitev v hostlu. Druga, tudi zadnja etapa, bo trajala do 3. decembra, opraviti jo je mogoče le osebno.
Moje ime je Yulia Seredich, to objavo sva napisala skupaj s Sergejem Kazakovom. Oba sva razvijalca vmesnikov v pisarni Yandex v Minsku in diplomirana SRI iz prejšnjih let.
Ob odprtju vpisa v Moskvi objavljamo analizo uvodnih nalog v prejšnjo Šolo - tukaj v Minsku.
Če sledite zgodovini nalog SRI, smo iz leta v leto testirali tri pomembne veščine za programerja:
- Postavitev. Vsak razvijalec bi moral biti sposoben narediti postavitev. Ne zgodi se, da imate strica Seryozha, ki oblikuje za celotno ekipo, vi pa pišete samo scenarije. Zato mora vsak učenec pokazati, kako zna tipkati.
- JavaScript. Če bi bila zadeva omejena na postavitev, potem ne bi imeli Šole za razvoj vmesnikov, ampak Šolo za postavitev. Lepo oblikovan vmesnik je treba obuditi. Zato vedno obstaja naloga za JS, včasih pa je tudi naloga za algoritme - tako radi jih imamo.
- Reševanje problemov je morda najpomembnejša veščina razvijalca. Ko gre za ustvarjanje vmesnikov, se stvari spreminjajo zelo hitro. To je kot Lewis Carroll: "Teči moraš čim hitreje, samo da ostaneš na istem mestu, in da prideš na drugo mesto, moraš teči dvakrat hitreje." Vsak dan se srečujemo z novimi tehnologijami – moramo jih upoštevati in jih znati razumeti. Zato smo v tretji nalogi predlagali razumevanje tehnologij, ki jih razvijalec začetnik običajno ne pozna.
Pri analizi vsake naloge vam bomo povedali ne le o pravilnem postopku, ampak tudi o pogostih napakah.
Naloga 1: Portfolio
Prvo nalogo sta delala oblikovalec Yandex.Collections Alexey Cherenkevich, ki ve, kako narediti postavitev, in njegov servisni kolega, razvijalec vmesnikov Sergey Samsonov.
Pogoj
Ustvarite spletno stran za portfelj: povejte nam o sebi, svojem delu in svojih pričakovanjih od šole. Stran naj čim bolj ustreza predlagani postavitvi (povezave do postavitev: , , , ). Zanima nas samo postavitev, zato vas prosimo, da ne uporabljate JavaScripta.
Pri preverjanju bomo upoštevali:
- velikosti zamikov, barvna pravilnost, slog pisave, velikost pisave;
- pomenska postavitev;
- prisotnost različnih stanj elementov: prikaz gumbov in povezav pri premikanju kazalca, označevanje aktivnih vnosnih polj itd.;
- združljivost med brskalniki (preizkušeno v najnovejših različicah priljubljenih brskalnikov).
Prednost bo:
- uporaba sodobnih CSS rešitev: flexbox, grid itd.;
- Prilagodljiva postavitev;
- uporaba pred- in (ali) post-procesorjev, sestavljanje, minifikacija, optimizacija izhodne kode;
- Preverjanje obrazca HTML, stiliziran gumb za nalaganje datoteke.
Naloga je precej obsežna, zato lahko preskočite tisto, kar ne bo delovalo. To bo nekoliko znižalo vaš rezultat, vendar boste še vedno lahko pokazali svoje znanje. Ko končate, nam pošljite dve povezavi – do vašega portfelja in izvorne kode na GitHub.
Postavitve, predlagane v nalogi, niso bile samo z zasloni za mobilne naprave, tablice in namizne računalnike, ampak tudi z resničnimi specifikacijami.
Da bi vnesli čim večjo objektivnost v rezultat preverjanja prve naloge, je bilo za to preverjanje veliko meril.
merila
Oblikovana spletna stran. To se zdi očitno, vendar so nekateri fantje nekatere bloke v celoti preskočili – ali so želeli prihraniti čas ali pa jih niso mogli narediti. Postavitev lahko grobo razdelimo na štiri glavne zaslone: glavni zaslon z avatarjem, blok s seznamom pričakovanj od SRI, blok s portfeljem in blok s kontaktnimi podatki. Lahko so izdelani v odsekih ali preprosto z uporabo divov, glavna stvar je, da so bili na voljo vsi štirje bloki.
Skladnost postavitve s postavitvijo. Oblikovalec je naredil ločeno specifikacijo (vključno z barvami, tipografijo, stanjem gumbov itd.), da bi kandidatom olajšal delo. Na dnu je bil namig o alinejah in značilnostih prvega zaslona. Zelo sem bil zadovoljen s fanti, ki so upoštevali vse želje oblikovalca: na primer, prvi zaslon ne bi smel biti nižji od višine vidnega polja.
Prilagodljiva postavitev - to je takrat, ko vmesnik ni le postavljen tako, da je pri treh ločljivostih vse v postavitvi pik do pike. V vmesnih stanjih tudi postavitev ne sme razpadati. Nekateri so pozabili omejiti največjo širino vsebnika in vse nastaviti na 1920 slikovnih pik, nekateri so pokvarili ozadje, a na splošno so se kandidati s to nalogo dobro spopadli.
Semantična postavitev. »Kolikokrat so svetu povedali«, da mora biti povezava oblikovana kot , gumb – kot . Na srečo je večina kandidatov izpolnila tudi ta pogoj. Vsi niso prepoznali skritega seznama v pričakovanjih SRI, zaradi česar uporablja oznake div, vendar ni tako slabo. Bil je kandidat, ki je vstavil vse pomenske oznake, ki jih je poznal – kjer je bilo treba in kjer ni bilo treba. Na primer, namesto seznama - in . Konec koncev, semantika – gre za razumevanje sestave vaše strani in namena posameznega bloka (večina je to upravljala tukaj), kot tudi uporabo pred- in/ali postprocesorjev (nekaterim je to uspelo tukaj, čeprav ta je bil tudi v točkah - največkrat so uporabili manj in scss) .
Delovni drsnik. V nalogi smo zapisali, da JS ni mogoče uporabiti. Tukaj je bila preizkušena sposobnost reševanja problemov - drsnik je bilo mogoče narediti s šopkom in . Vsa čarovnija se zgodi na ravni izbirnika #button-N:checked ~ .slider-inner .slider-slides. Ko kliknemo na eno od potrditvenih polj za vnos, preide v označeno stanje. To lahko izkoristimo in vsebniku z diapozitivi dodelimo prevod, ki ga potrebujemo: transform: translate(-33%). Ogledate si lahko izvedbo drsnika .
Spustni seznami. Tukaj je tudi prišlo do vsega in podoben izbirnik: .accordion-item input:checked ~ .accordion-item__content. Izvedbo lahko vidite .
Razpoložljivost stanj :hover, :active in :focu*. Zelo pomembna točka. Od tega je bilo odvisno udobje med interakcijo z vmesnikom. Uporabnik mora vedno prejemati povratne informacije o svojih dejanjih. Ta element je bil preverjen skozi celotno interakcijo z vprašalnikom. Če sem kliknil gumb »Pokliči me« in se vizualno nič ni zgodilo (čeprav je bila zahteva poslana), je to slabo, ker ga bom potem kliknil znova in znova. Posledično bo poslanih deset zahtev in desetkrat me bodo poklicali nazaj. Ne smemo pozabiti, da mobilne naprave nimajo miške, kar pomeni, da lebdenja ne sme biti. In še ena točka, ki ni vplivala na tiste, ki so izpolnili točko o semantiki. Če vaš kontrolnik ni interaktivni element, bo kazalec ostal standarden, ko premaknete miškin kazalec nad njim. Izgleda zelo neurejeno, tudi če ste napisali reakcijo na lebdenje. Ne podcenjujte kazalec: kazalec.
Animacije. Pomembno je, da so vse reakcije, ki potekajo z elementi, gladke. Nič v življenju ni takojšnje, zato so bili prehodi pri lebdenju in aktivni dovolj, da je bil vmesnik prijetnejši. No, tisti, ki so animirali drsnik in sezname, so nasploh super.
Z uporabo najnovejše tehnologije. Veliko ljudi je uporabljalo flex, vendar nihče ni dokončal naloge z uporabo mreže. Točka je bila šteta, če je bil flex pravilno uporabljen. Če se je kje postavitev razšla prav zaradi teh upogibov, žal, niste prejeli nobenih dodatnih točk.
Preverjanje obrazca. Vse, kar je bilo potrebno, je bilo dodati zahtevani atribut vsakemu vnosu obrazca. Dodali smo točke tistim, ki so polje elektronske pošte potrdili kot elektronsko pošto.
Oblikovanje gumba za nalaganje datoteke. Pričakovali smo kombinacijo, kot je: in izberite datoteko . Nato smo morali skriti vnos in oblikovati oznako. Obstaja še en pogost način - narediti pregleden vnos in ga postaviti na vrh gumba. Vendar vsi brskalniki ne omogočajo stiliziranja , in takšne rešitve ni mogoče imenovati popolnoma navzkrižno brskalnik. In pomensko je pravilneje narediti oznako.
Združljivost med brskalniki. Preverili smo, ali je vse v redu v zadnjih dveh različicah sodobnih brskalnikov (brez IE – udeleženci so imeli srečo), pa tudi v Safariju na iPhonih in Chromu na Androidih.
Nasprotno, odšteli smo točke, če je nekdo uporabil JS ali Bootstrap: oba bi izničila namen celotne naloge. Poleg tega udeleženci z Bootstrapom niso prejeli le minusa, ampak so izgubili tudi veliko točk za semantiko in implementirane elemente.
Tisti, ki so svoje spletno mesto gostili nekje na internetu, niso bili deležni nobene posebne prednosti – ocenjevalci pa so bili zelo veseli, ko jim ni bilo treba prenašati repozitorijev in jih izvajati lokalno na svojem računalniku. Torej je to služilo kot plus za karmo.
Prva naloga je bila zelo koristna predvsem za učenca. Tisti, ki jih nismo sprejeli, imajo zdaj že pripravljen življenjepis - lahko ga ponosno pripnete vsem odgovorom ali objavite na svojih gh-straneh.
2. naloga: Transportna pot
Avtor naloge je vodja skupine iskalnih vmesnikov Denis Balyko.
Pogoj
Imate zvezdni zemljevid? Prikazuje ime vsake zvezde in razdaljo od nje do drugih zvezd v svetlobnih sekundah. Izvedite funkcijo rešitve, ki naj sprejme tri argumente: objekt, v katerem so ključi imena zvezd, vrednosti pa so razdalje do zvezd (enosmerni promet v vesolju), pa tudi imena začetno in končno točko poti – start oziroma cilj. Funkcija mora vrniti najkrajšo razdaljo od startne do ciljne zvezde in pot, ki ji je treba slediti.
Podpis funkcije:
const solution = function(graph, start, finish) { // Ваше решение }Primer vhodnih podatkov:
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';Primer izhoda:
{ distance: 90, path: ['start', 'A', 'D', 'finish'] }Opomba: okostje rešitve je v mapi src/, svojo rešitev postavite v solution.js.
Preverjanje druge naloge je bilo najbolj avtomatizirano in objektivno. Večina fantov je ugibala, da je treba implementirati Dijkstrajev algoritem. Tisti, ki so našli njegov opis in implementirali algoritem v JS, so dobri. Pri preverjanju naloge pa smo naleteli na veliko papirjev z enakimi napakami. Na internetu smo iskali fragmente kode in našli članek, iz katerega so udeleženci prepisali algoritem. Smešno je, da je veliko ljudi kopiralo kodo iz članka skupaj z avtorjevimi komentarji. Takšna dela so prejela nizko oceno. Ne prepovedujemo uporabe kakršnih koli virov, želimo pa, da se človek poglobi v to, kar piše.
merila
Glavne točke so bile podeljene za teste. Včasih je bilo jasno, da se fantje zafrkavajo z repozitorijem, preimenujejo mape in da bodo testi neuspešni preprosto zato, ker niso našli potrebnih datotek. Letos smo poskušali pomagati takim fantom in jim vse vrnili na svoje mesto. Naslednje leto pa nameravamo preiti na tekmovalni sistem in tega ne bomo več oprostili.
Obstajala so tudi »človeška«, ročna merila. Na primer, prisotnost enega sloga kode. Nihče ni odvzel točk za uporabo tabulatorjev namesto presledkov ali obratno. Druga stvar je, če enojne narekovaje zamenjate z dvojnimi narekovaji v skladu z enim pravilom, ki ga poznate, in podpičja postavite naključno.
Posebej sta bili upoštevani jasnost in berljivost rešitve. Na vseh konferencah po svetu pravijo, da je 80% dela programerjev sestavljeno iz branja kode drugih ljudi. Celo šolarji so podvrženi pregledu kode – pri svojih kustosih in drug od drugega. Torej je imelo to merilo pomembno težo. Obstajajo dela, v katerih ni bilo spremenljivk, daljših od enega znaka - prosim, ne počnite tega. Komentarji udeležencev so bili zelo spodbudni - z izjemo tistih, ki so bili enaki komentarjem Stelle Chang.
Zadnji kriterij je prisotnost samodejnih testov. Dodalo jih je le nekaj ljudi, a za vse je to postalo velik plus v njihovi karmi.
Pravilna rešitev:
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);
};
};Naloga 3: Koledar dogodkov
Pripravila sta ga razvijalca vmesnika Sergey Kazakov in Alexander Podskrebkin.
Pogoj
Napišite mini koledar za prikaz svojega urnika. Lahko vzamete kateri koli urnik, ki vam je všeč. Na primer urnik frontend konferenc v letu 2019.
Koledar mora izgledati kot seznam. Drugih konstrukcijskih zahtev ni. Omogočite nastavitev opomnikov za dogodke 3, 7 in 14 dni vnaprej. Po prvem prenosu iz interneta bi se moral koledar odpreti in delovati brez povezave.
Koristni viri
Urnik konference Frontend:
Storitveni delavci:
API za obvestila:
Tretja naloga je bila najbolj zanimiva za preizkus, saj je bilo možnih rešitev ogromno, vsaka je imela svojo. Preverili smo, kako se kandidat znajde v nepoznanih tehnologijah – ali zna raziskovati, ali preizkuša svoje rešitve.
merila
Zložen koledar. Da, še vedno ga je bilo treba postaviti. Bili so tudi takšni, ki so pogoj vzeli preveč dobesedno in niso vstavili niti ene vrstice kode CSS. Ni bilo videti zelo privlačno, a če je vse delovalo, se točke niso zmanjšale.
Pridobivanje seznama dogodkov iz vira. To ni naloga postavitve, zato seznam dogodkov, vključenih v to nalogo, ni bil preštet. Konferenco lahko kadar koli prekličete, jo prestavite ali dodate novo. Zato je bilo treba prejeti podatke od zunaj in upodobiti postavitev na podlagi prejetega JSON. Pomembno je bilo pridobiti podatke na kakršenkoli način (z metodo fetch ali z uporabo XMLHttpRequest). Če je oseba dodala polifill za pridobivanje in označila svojo izbiro v readme, se je to štelo kot plus.
Registracija storitvenega delavca brez napak in delajte brez povezave po prvem prenosu. servisni delavec s predpomnjenjem urnika ob prvem zagonu. Podrobnosti o servisnih delavcih, njihovih zmožnostih in načinih dela z njimi (strategije za delo s predpomnilniki, delo brez povezave) najdete tukaj.
Možnost nastavitve opomnikatako da dejansko deluje po 3, 7, 14 dneh. Treba je bilo razumeti Notifications API, je bil pri nalogi. Nismo pričakovali nobene posebne izvedbe, ki bi preverila, ali je čas za pritisk. Sprejeta je bila katera koli delujoča možnost: shranjevanje v localStorage, IndexDB ali občasno anketiranje s strani storitvenega delavca. Možno je bilo narediti celo potisni strežnik (tukaj ), vendar ne bi delovalo brez povezave. Enako pomembno je bilo prejeti potisno stran, potem ko je bila stran zaprta – in čez nekaj časa odprta. Če je opomnik umrl ob istem času, ko je bila stran zaprta, se rešitev ni štela. Super je, ko so fantje pomislili na recenzente in omogočili, da se takoj poženejo - da ne bi čakali 3 dni.
Možnost postavitve ikone na namizje (PWA). Preverili smo prisotnost datoteke s pravimi ikonami. Nekateri fantje so naredili to datoteko (ali jo pustili ustvarjeno v CreateReactApp) - vendar niso dodali pravilnih ikon. Nato se je pri poskusu namestitve pojavila napaka, kot je »potrebna je drugačna ikona«.
Slog kode in struktura projekta. Tako kot pri drugi nalogi smo si ogledali en kodni slog (čeprav ni sovpadal z našim). Nekateri fantje so privili linterje - to je super.
Napake konzole. Če je bil prav v konzoli indikator, da je nekaj narobe, in udeleženec na to ni bil pozoren, smo odšteli točke.
Rezultati
Kaj je smešnega pri odločitvah udeležencev:
- En vprašalnik je vseboval naslednje besedilo: »Prijatelj programer mi je pomagal sestaviti aplikacijo React. Zasula sem ga z vprašanji, kako in zakaj, pa mi je povedal. Zelo mi je bilo všeč, rad bi izvedel več o tem.« Z vsem srcem smo navijali za to aplikacijo, žal pa kandidatov prijatelj ni bil v veliko pomoč, da bi aplikacija delovala.
- En kandidat je poslal povezavo na GitHub, kjer je bil arhiv RAR - to je težko komentirati. 🙂
- Drugi kandidat je v komentarju na prvo vrstico datoteke solution.js pošteno priznal, da je kopiral algoritem.
Prejeli smo prijave 76 kandidatov in izbrali 23 oseb. Vprašalnike so nam poslali ne le iz Minska, ampak tudi iz Moskve, Sankt Peterburga in celo Tatarstana. Nekateri fantje so nas presenetili s svojim trenutnim poklicem: eden je sodni izvedenec, drugi pa študent medicine.
Rezultat je bila zanimiva porazdelitev uspešnosti pri opravljanju nalog. Udeleženci so prvo nalogo opravili v povprečju 60 %, drugo 50 %, tretja pa se je izkazala za najtežjo in so jo opravili v povprečju 40 %.
Na prvi pogled so naloge videti zapletene in dolgotrajne. Razlog ni v tem, da bi želeli izločiti čim več kandidatov. Študenti se med študijem soočajo z nalogami iz resničnega življenja - ustvarjanjem klepeta, Yandex.Music za otroke ali Yandex.Weather za ljudi, ki so odvisni od vremena. Za to potrebujete izhodiščno osnovo.
Spomnim se, da sem pred dvema letoma videl svojo vstopno nalogo na SRI in mislil, da je ne bom nikoli rešil. Glavna stvar v tem trenutku je, da se usedete, natančno preberete pogoje in začnete delati. Izkazalo se je, da pogoji vsebujejo skoraj 80% raztopine. Na primer, v pogoju tretje naloge (najtežja) smo dodali povezave do storitvenih delavcev in Notifications API na MDN. Dijaki, ki so preučevali vsebino povezav, so jo brez težav izpolnili.
Res bi rad, da bi ta članek prebrali kandidati, ki nameravajo v prihodnosti vstopiti v SRI, ki niso mogli vstopiti v šolo v Minsku ali ki začenjajo opravljati katero koli drugo testno nalogo. Kot lahko vidite, je to povsem mogoče. Samo verjeti morate vase in poslušati vse nasvete avtorjev.
Vir: www.habr.com