Vandag het 'n nuwe inskrywing oopgemaak in Moskou. Die eerste fase van opleiding sal van 7 September tot 25 Oktober plaasvind. Studente van ander stede sal op afstand of persoonlik daaraan kan deelneem – die maatskappy sal vir reis en verblyf in ’n koshuis betaal. Die tweede, ook die laaste fase, sal tot 3 Desember duur, dit kan slegs persoonlik voltooi word.
My naam is Yulia Seredich, ons het hierdie pos saam met Sergei Kazakov geskryf. Ons is albei koppelvlakontwikkelaars in die Minsk-kantoor van Yandex en gegradueerdes van SRI van vorige jare.
Ter geleentheid van die opening van registrasie in Moskou, publiseer ons 'n ontleding van inleidende take tot die vorige Skool - hier in Minsk.
As jy die geskiedenis van SRI-opdragte naspeur, het ons van jaar tot jaar drie belangrike vaardighede vir 'n programmeerder getoets:
- Uitleg. Elke ontwikkelaar behoort uitleg te kan doen. Dit gebeur nie dat jy oom Seryozha het wat vir die hele span ontwerp, en jy skryf net skrifte nie. Daarom moet elke student wys hoe hy weet hoe om te tipeset.
- JavaScript. As die saak tot uitleg beperk was, sou ons nie 'n Skool vir Interfaceontwikkeling gehad het nie, maar 'n Skool vir Uitlegontwerpers. Die pragtig ontwerpte koppelvlak moet herleef word. Daarom is daar altyd 'n taak vir JS, maar soms is dit ook 'n taak vir algoritmes - ons is so lief vir hulle.
- Probleemoplossing is miskien die belangrikste vaardigheid van 'n ontwikkelaar. Wanneer dit kom by die skep van koppelvlakke, verander dinge baie vinnig. Dit is soos Lewis Carroll: "Jy moet so vinnig hardloop as wat jy kan net om op dieselfde plek te bly, en om by 'n ander plek uit te kom moet jy twee keer so vinnig hardloop." Elke dag kom ons nuwe tegnologieë teë – ons moet dit in ag neem en dit kan verstaan. Daarom het ons in die derde taak voorgestel om tegnologieë te verstaan waarmee 'n beginner ontwikkelaar gewoonlik nie vertroud is nie.
In die ontleding van elke taak sal ons jou nie net oor die korrekte prosedure vertel nie, maar ook oor algemene foute.
Taak 1: Portefeulje
Aan die eerste taak is gewerk deur die ontwerper van Yandex.Collections, Alexey Cherenkevich, wat weet hoe om uitleg te doen, en sy dienskollega, koppelvlakontwikkelaar Sergey Samsonov.
Toestand
Skep 'n portefeuljewebwerf: vertel ons van jouself, jou werk en jou verwagtinge van die Skool. Die webwerf moet soveel as moontlik ooreenstem met die voorgestelde uitleg (skakels na uitlegte: , , , ). Ons stel net belang in die uitleg, so moet asseblief nie JavaScript gebruik nie.
Wanneer ons nagaan, sal ons in ag neem:
- inkepingsgroottes, kleurkorrektheid, fontstyl, fontgrootte;
- semantiese uitleg;
- die teenwoordigheid van verskillende toestande van elemente: die vertoon van knoppies en skakels wanneer die wyser beweeg, aktiewe invoervelde uitlig, ens.;
- kruisblaaierversoenbaarheid (getoets in die nuutste weergawes van gewilde blaaiers).
Die voordeel sal wees:
- gebruik van moderne CSS-oplossings: flexbox, grid, ens.;
- Aanpasbare uitleg;
- gebruik van voor- en (of) naverwerkers, samestelling, verkleining, optimalisering van uitsetkode;
- HTML-vorm validering, gestileerde lêer oplaai knoppie.
Die taak is nogal omvangryk, so jy kan oorslaan wat nie sal werk nie. Dit sal jou telling effens verlaag, maar jy sal steeds jou kennis kan demonstreer. Wanneer jy klaar is, stuur vir ons twee skakels – na jou portefeulje en die bronkode op GitHub.
Die uitlegte wat in die opdrag voorgestel is, was nie net met skerms vir mobiele toestelle, tablette en rekenaars nie, maar ook met werklike spesifikasies.
Om soveel objektiwiteit as moontlik in die resultaat van die kontrolering van die eerste taak te bring, was daar baie kriteria vir hierdie kontrole.
Kriteria
Ontwerp webwerf. Dit lyk voor die hand liggend, maar sommige ouens het 'n paar blokke heeltemal oorgeslaan - óf hulle wou tyd bespaar, óf hulle kon dit nie doen nie. Die uitleg kan rofweg in vier hoofskerms verdeel word: die hoofskerm met 'n avatar, 'n blok met 'n lys van verwagtinge van SRI, 'n blok met 'n portefeulje en 'n blok met kontakinligting. Hulle kan in afdelings gemaak word of bloot met behulp van divs, die belangrikste ding is dat al vier blokke beskikbaar was.
Voldoening van uitleg met uitleg. Die ontwerper het 'n aparte spesifikasie gemaak (insluitend kleure, tipografie, knoppies, ens.) om dit vir kandidate makliker te maak. Onderaan was daar 'n wenk oor die inkepings en kenmerke van die eerste skerm. Ek was baie tevrede met die ouens wat al die ontwerper se wense in ag geneem het: die eerste skerm moes byvoorbeeld nie minder as die hoogte van die uitsigpoort gewees het nie.
Aanpasbare uitleg - dit is wanneer die koppelvlak nie net so uitgelê is dat alles by drie resolusies pixel tot pixel in uitleg is nie. In intermediêre toestande moet die uitleg ook nie uitmekaar val nie. Sommige het vergeet om die maksimum breedte van die houer te beperk en alles op 1920 pixels te stel, sommige het die agtergronde deurmekaar gemaak, maar oor die algemeen het die kandidate hierdie taak goed hanteer.
Semantiese uitleg. "Hoeveel keer het hulle vir die wêreld gesê" dat 'n skakel ontwerp moet word as , 'n knoppie - as . Gelukkig het die meeste kandidate ook aan hierdie vereiste voldoen. Nie almal het die versteekte lys in die verwagtinge van die SRI herken nie, wat dit met div-etikette maak, maar dit is nie so erg nie. Daar was 'n kandidaat wat al die semantiese etikette wat hy geken het, ingesit het – waar dit nodig was en waar dit nie nodig was nie. Byvoorbeeld, in plaas van 'n lys - en . Per slot van rekening, semantiek - dit gaan oor die begrip van die samestelling van jou bladsy en die doel van elke blok (die meerderheid het dit hier reggekry), asook die gebruik van voor- en/of naverwerkers ('n paar het dit hier reggekry, alhoewel hierdie was ook in die punte - meestal gebruik hulle minder en scss) .
Werkende skuifbalk. In die werkopdrag het ons geskryf dat JS nie gebruik kan word nie. Hier is die vermoë om probleme op te los getoets - 'n skuifbalk kan gemaak word deur 'n kombinasie van en te gebruik. Al die magie gebeur op die kieservlak #button-N:checked ~ .slider-inner .slider-slides. Wanneer ons op een van die invoermerkblokkies klik, gaan dit na die gemerkte toestand. Ons kan hieruit voordeel trek en die vertaling wat ons benodig aan die houer met die skyfies toewys: transform: translate(-33%). U kan die implementering van die skuifbalk sien .
Aftreklyste. Hier het dit alles ook neergekom op en 'n soortgelyke kieser: .accordion-item input:checked ~ .accordion-item__content. U kan die implementering sien .
Beskikbaarheid van :sweef-, :aktief- en :fokus*-toestande. 'n Baie belangrike punt. Gerief tydens interaksie met die koppelvlak het daarvan afgehang. Die gebruiker moet altyd terugvoer oor hul optrede ontvang. Hierdie item is regdeur die interaksie met die vraelys nagegaan. As ek op die “Bel my”-knoppie geklik het en daar het visueel niks gebeur nie (al is die versoek gestuur), is dit sleg, want dan sal ek dit weer en weer klik. Gevolglik sal tien versoeke gestuur word en ek sal tien keer teruggebel word. Ons moet nie vergeet dat mobiele toestelle nie 'n muis het nie, wat beteken dat daar nie 'n sweef moet wees nie. En nog een punt wat nie diegene geraak het wat die punt oor semantiek vervul het nie. As jou beheer nie 'n interaktiewe element is nie, sal die wyser standaard bly wanneer jy daaroor beweeg. Dit lyk baie slordig, selfs al het jy 'n reaksie op sweef geskryf. Moenie wyser onderskat nie: wyser.
Animasies. Dit is belangrik dat alle reaksies wat met die elemente plaasvind glad is. Niks in die lewe is oombliklik nie, so om oorgange op sweef en aktief te hê, was genoeg om die koppelvlak aangenamer te maak. Wel, diegene wat die skuifbalk en lyste geanimeer het, is oor die algemeen wonderlik.
Gebruik die nuutste tegnologie. Baie mense het flex gebruik, maar niemand het die taak met rooster voltooi nie. Die punt is getel as flex korrek gebruik is. As die uitleg iewers uitmekaar gegaan het as gevolg van hierdie einste buigings, helaas, het jy geen bykomende punte ontvang nie.
Vorm validering. Al wat nodig was, was om die vereiste kenmerk by elke invoer van die vorm te voeg. Ons het punte bygevoeg aan diegene wat die e-posveld as e-pos bekragtig het.
Stileer die lêeroplaaiknoppie. Ons het verwag om 'n kombinasie te sien soos: en Kies lêer. Vervolgens moes ons die invoer versteek en die etiket stileer. Daar is nog 'n algemene manier - om 'n deursigtige invoer te maak en dit bo-op die knoppie te plaas. Maar nie alle blaaiers laat toe dat gestileer word nie, en hierdie oplossing kan nie volledig kruisblaaier genoem word nie. En dit is semanties meer korrek om 'n etiket te maak.
Kruisblaaierversoenbaarheid. Ons het gekyk dat alles reg is in die twee nuutste weergawes van moderne blaaiers (sonder IE - deelnemers was gelukkig), sowel as in Safari op iPhones en Chrome op Androids.
Inteendeel, ons het punte afgetrek as iemand JS of Bootstrap gebruik: albei van hulle sou die doel van die hele taak verslaan. Boonop het deelnemers met Bootstrap nie net 'n minus gekry nie, maar het ook baie punte vir semantiek en geïmplementeerde elemente verloor.
Diegene wat hul webwerf iewers op die internet gehuisves het, het geen besondere voordeel gekry nie – maar die beoordelaars was baie bly toe hulle nie bewaarplekke hoef af te laai en dit plaaslik op hul rekenaar te laat loop nie. So dit het gedien as 'n pluspunt vir karma.
Die eerste taak was hoofsaaklik vir die student baie nuttig. Diegene wat ons nie aanvaar het nie, het nou 'n voorbereide CV - jy kan dit met trots by alle antwoorde aanheg of dit op jou gh-bladsye plaas.
Taak 2: Vervoerroete
Die skrywer van die taak is die hoof van die soekkoppelvlakgroep Denis Balyko.
Toestand
Het jy 'n sterrekaart? Dit wys die naam van elke ster, sowel as die afstand daarvan na ander sterre in ligte sekondes. Implementeer die oplossingsfunksie, wat drie argumente moet neem: 'n voorwerp waarin die sleutels die name van die sterre is, en die waardes die afstande na die sterre is (eenrigtingverkeer in die ruimte), sowel as die name van die begin- en eindpunte van die pad - onderskeidelik begin en eindpunt. Die funksie moet die kortste afstand van die beginster na die eindster en die pad om te volg terugstuur.
Funksie handtekening:
const solution = function(graph, start, finish) { // Ваше решение }Voorbeeld van invoerdata:
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';Voorbeeld uitset:
{ distance: 90, path: ['start', 'A', 'D', 'finish'] }Let wel: Die oplossingskelet is in die src/-lêergids, plaas jou oplossing in solution.js.
Die verifikasie van die tweede taak was die mees geoutomatiseerde en objektiewe. Meeste van die ouens het geraai dat dit nodig was om Dijkstra se algoritme te implementeer. Diegene wat die beskrywing daarvan gevind het en die algoritme in JS geïmplementeer het, is goed gedoen. Toe ons egter die werkopdrag nagaan, het ons op baie vraestelle met dieselfde foute afgekom. Ons het op die internet vir kodefragmente gesoek en 'n artikel gevind waaruit deelnemers die algoritme gekopieer het. Dit is snaaks dat baie mense die kode uit die artikel gekopieer het saam met die skrywer se kommentaar. Sulke werke het 'n lae telling gekry. Ons verbied nie die gebruik van enige bronne nie, maar ons wil hê 'n persoon moet delf in wat hy skryf.
Kriteria
Hoofpunte is vir toetse toegeken. Soms was dit duidelik dat die ouens met die bewaarplek gemors het, dopgehou hernoem het, en toetse sou misluk bloot omdat hulle nie die nodige lêers kon vind nie. Ons het hierdie jaar probeer om sulke ouens te help en alles op sy plek teruggegee vir hulle. Maar volgende jaar beplan ons om na 'n kompetisiestelsel oor te skakel, en dit sal nie meer vergewe word nie.
Daar was ook “menslike”, handmatige kriteria. Byvoorbeeld, die teenwoordigheid van 'n enkele kodestyl. Niemand het punte afgetrek vir die gebruik van oortjies in plaas van spasies of andersom nie. Dit is 'n ander saak as jy enkel aanhalingstekens met dubbele aanhalings afwissel volgens een reël wat aan jou bekend is, en puntkommae lukraak plaas.
Die duidelikheid en leesbaarheid van die oplossing is afsonderlik in ag geneem. By alle konferensies in die wêreld sê hulle dat 80% van 'n programmeerder se werk bestaan uit die lees van ander mense se kode. Selfs skoolkinders ondergaan kode-resensies – van hul kurators en van mekaar. Hierdie maatstaf het dus aansienlike gewig gedra. Daar was werke waarin daar geen veranderlikes langer as een karakter was nie - moet dit asseblief nie doen nie. Die opmerkings van die deelnemers was baie bemoedigend – met die uitsondering van dié wat identies was aan Stella Chang se opmerkings.
Die laaste maatstaf is die teenwoordigheid van outotoetse. Slegs 'n paar mense het hulle bygevoeg, maar vir almal het dit 'n groot pluspunt in hul karma geword.
Korrekte oplossing:
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);
};
};Taak 3: Gebeurtenissekalender
Dit is voorberei deur koppelvlakontwikkelaars Sergey Kazakov en Alexander Podskrebkin.
Toestand
Skryf 'n mini-kalender om jou skedule te vertoon. Jy kan enige skedule neem wat jy wil. Byvoorbeeld, die skedule van frontend-konferensies in 2019.
Die kalender moet soos 'n lys lyk. Daar is geen ander ontwerpvereistes nie. Maak dit moontlik om gebeurtenisherinnerings 3, 7 en 14 dae vooruit te stel. Na die eerste aflaai vanaf die internet, moet die kalender oopmaak en vanlyn funksioneer.
Nuttige hulpbronne
Voorkant konferensie skedule:
Dienswerkers:
Kennisgewings-API:
Die derde taak was die interessantste om te toets, want daar was soveel moontlike oplossings, elk met hul eie. Ons het nagegaan hoe die kandidaat onbekende tegnologieë hanteer – of hy weet hoe om navorsing te doen, of hy sy oplossings toets.
Kriteria
Gevoude kalender. Ja, dit moes nog uitgelê word. Daar was ook diegene wat die toestand te letterlik opgeneem het en nie 'n enkele reël CSS-kode ingevoeg het nie. Dit het nie baie aantreklik gelyk nie, maar as alles gewerk het, het die punte nie afgeneem nie.
Kry 'n lys van gebeure van 'n bron. Dit is nie 'n uitlegtaak nie, so die lys gebeurtenisse wat daarin ingesluit is, is nie getel nie. Jy kan altyd 'n konferensie kanselleer, dit herskeduleer of 'n nuwe een byvoeg. Dit was dus nodig om data van buite te ontvang en die uitleg op grond van die ontvangde JSON weer te gee. Dit was belangrik om die data op enige manier te verkry (met die haalmetode of met behulp van XMLHttpRequest). Indien 'n persoon 'n polyfill bygevoeg het om te gaan haal en sy keuse in die readme gemerk het, is dit as 'n pluspunt gereken.
Dienswerker registrasie sonder foute en werk vanlyn na die eerste aflaai. dienswerker met skedule-kas by eerste selflaai. Besonderhede oor dienswerkers, hul vermoëns en maniere om met hulle te werk (strategieë vir werk met kas, werk vanlyn) kan hier gevind word.
Vermoë om 'n herinnering te stelsodat dit eintlik werk na 3, 7, 14 dae. Dit was nodig om die Kennisgewings-API te verstaan, was reg op taak. Ons het geen spesifieke implementering verwag om te kyk of dit tyd is om te druk nie. Enige werkopsie is aanvaar: berging in localStorage, IndexDB of periodieke peiling deur 'n dienswerker. Dit was selfs moontlik om 'n drukbediener te maak (hier ), maar dit sal nie vanlyn werk nie. Dit was ewe belangrik om 'n stoot te ontvang nadat die bladsy toegemaak is - en na 'n rukkie oopgemaak is. As die herinnering gesterf het op dieselfde tyd dat die bladsy gesluit is, is die oplossing nie getel nie. Dit is gaaf as die ouens aan die beoordelaars gedink het en dit moontlik gemaak het om nou 'n drukkie te kry - om nie 3 dae te wag nie.
Vermoë om 'n ikoon op die lessenaar te plaas (PWA). Ons het die teenwoordigheid van die lêer nagegaan met die regte ikone. Sommige ouens het hierdie lêer gemaak (of dit in CreateReactApp gegenereer gelaat) - maar nie die korrekte ikone bygevoeg nie. Toe, wanneer u probeer installeer, het 'n fout soos "'n ander ikoon is nodig" voorgekom.
Kodestyl en projekstruktuur. Soos in die tweede taak het ons na 'n enkele kodestyl gekyk (al het dit nie met ons s'n saamgeval nie). Sommige ouens het aan linters geskroef - dit is wonderlik.
Konsole foute. As daar 'n aanwyser reg in die konsole was dat iets verkeerd is, en die deelnemer het nie aandag daaraan gegee nie, dan het ons punte afgetrek.
Resultate van
Wat is snaaks van die deelnemers se besluite:
- Een vraelys het die volgende teks bevat: “'n Programmeerdervriend het my gehelp om 'n React-toepassing saam te stel. Ek het hom gebombardeer met vrae oor hoe en hoekom, en hy het my vertel. Ek het baie daarvan gehou, ek wil meer daaroor weet.” Ons het met ons hele hart na hierdie aansoek gewortel, maar ongelukkig was die kandidaat se vriend nie baie behulpsaam om die aansoek te laat werk nie.
- Een kandidaat het 'n skakel na GitHub gestuur, waar die RAR-argief geleë was - dit is moeilik om hieroor kommentaar te lewer. 🙂
- 'n Ander kandidaat het in die kommentaar op die eerste reël van die solution.js-lêer eerlik erken dat hy die algoritme gekopieer het.
Ons het aansoeke van 76 kandidate ontvang en 23 mense gekies. Ons is nie net van Minsk af vraelyste gestuur nie, maar ook van Moskou, St. Petersburg en selfs Tatarstan. Van die ouens het ons verras met hul huidige beroepe: een van hulle is 'n forensiese deskundige, en die ander is 'n mediese student.
Die resultaat was 'n interessante verspreiding van sukseskoerse in die voltooiing van take. Die deelnemers het die eerste taak met gemiddeld 60% voltooi, die tweede met 50%, en die derde was die moeilikste en is met gemiddeld 40% voltooi.
Met die eerste oogopslag lyk die take kompleks en tydrowend. Die rede is nie dat ons soveel as moontlik kandidate wil uitwis nie. Tydens hul studies word studente voor werklike take gekonfronteer - om 'n geselsie te maak, Yandex.Music vir kinders of Yandex.Weather vir weerafhanklike mense. Hiervoor het jy 'n beginbasis nodig.
Ek onthou dat ek my SRI-toegangstaak twee jaar gelede gesien het en gedink het dat ek dit nooit sou oplos nie. Die belangrikste ding op hierdie oomblik is om te gaan sit, die voorwaardes noukeurig te lees en dit te begin doen. Dit blyk dat die toestande byna 80% van die oplossing bevat. Byvoorbeeld, in die toestand van die derde taak (die moeilikste), het ons skakels bygevoeg na dienswerkers en Kennisgewings-API op MDN. Studente wat die inhoud van die skakels bestudeer het, het dit sonder moeite voltooi.
Ek wil baie graag hê dat hierdie artikel gelees word deur kandidate wat beplan om in die toekoms SRI te betree, wat nie die Minsk Skool kon betree nie, of wat enige ander toetstaak begin doen. Soos u kan sien, is dit heel moontlik om dit te doen. Jy moet net in jouself glo en luister na al die wenke van die skrywers.
Bron: will.com