Oghje hè stata aperta una nova iscrizzione in Mosca. A prima tappa di furmazione si ferà da u 7 di sittembri à u 25 d'ottobre. I studienti di altre cità puderanu participà à questu remotamente o in persona - a cumpagnia pagarà u viaghju è l'alloghju in un ostello. A siconda, ancu a tappa finale, durà finu à u 3 di dicembre, pò esse compie solu in persona.
Mi chjamu Yulia Seredich, avemu scrittu stu post inseme cù Sergei Kazakov. Semu tramindui sviluppatori di l'interfaccia in l'uffiziu Minsk di Yandex è graduate di SRI da anni precedenti.
In l'occasione di l'apertura di iscrizzione in Mosca, pubblichemu una analisi di i travaglii introduttori à a scola precedente - quì in Minsk.
Se tracciate a storia di l'assignazioni SRI, da annu à annu avemu pruvatu trè cumpetenze impurtanti per un programatore:
- Disposizione. Ogni sviluppatore deve esse capace di fà layout. Ùn succede micca chì avete Uncle Seryozha chì cuncepisce per tutta a squadra, è scrivite solu scripts. Dunque, ogni studiente deve dimustrà cumu si sapi componi.
- JavaScript. Se a materia era limitata à u layout, allora ùn averemu micca una Scola di Sviluppu di l'Interfaccia, ma una Scola di Designers di Layout. L'interfaccia bella cuncepita deve esse rinvivita. Dunque, ci hè sempre un compitu per JS, ma qualchì volta hè ancu un compitu per l'algoritmi - l'amemu tantu.
- A risoluzione di i prublemi hè forse l'abilità più impurtante di un sviluppatore. Quandu si tratta di creà interfacce, e cose cambianu assai rapidamente. Hè cum'è Lewis Carroll: "Avete da correre u più veloce chì pudete solu per stà in u stessu locu, è per arrivà à un altru locu duvete curriri duie volte più veloce". Ogni ghjornu avemu scontru novi tecnulugii - avemu bisognu di piglià in contu è esse capaci di capiscenu. Per quessa, in u terzu compitu, avemu prupostu di capisce i tecnulugii chì un sviluppatore principiante ùn hè di solitu micca familiarizatu.
In l'analisi di ogni compitu, vi diceremu micca solu nantu à a prucedura curretta, ma ancu di i sbagli cumuni.
Task 1: Portfolio
U primu travagliu hè statu travagliatu da u designer di Yandex.Collections Alexey Cherenkevich, chì sà cumu fà layout, è u so cumpagnu di serviziu, u sviluppatore di l'interfaccia Sergey Samsonov.
Cundizione
Crea un situ web di portfolio : parlaci di sè stessu, di u vostru travagliu è di e vostre aspettative da a Scola. U situ deve currispondenu quant'è pussibule à u layout prupostu (ligami à i layout: , , , ). Semu interessate solu in u layout, cusì per piacè ùn aduprate micca JavaScript.
Quandu cuntrollà, avemu da piglià in contu:
- dimensioni di indentazione, correzione di culore, stile di font, dimensione di font;
- layout semanticu;
- a prisenza di diversi stati di elementi: vede buttuni è ligami quandu passa u cursore, mette in evidenza i campi di input attivi, etc.;
- cumpatibilità cross-browser (pruvata in l'ultime versioni di i navigatori populari).
U vantaghju serà:
- usu di suluzioni CSS muderni: flexbox, grid, etc.;
- Disposizione adattativa;
- usu di pre- è (o) post-processori, assemblea, minificazione, ottimisazione di u codice di output;
- Validazione di forma HTML, buttone di carica di u schedariu stilizatu.
U compitu hè abbastanza voluminoso, cusì pudete saltà ciò chì ùn viaghja micca. Questu hà da calà u vostru puntuatu ligeramente, ma puderete sempre dimustrà a vostra cunniscenza. Quandu avete finitu, mandateci dui ligami - à u vostru portfolio è u codice fonte in GitHub.
I dispusitivi pruposti in l'assignazione ùn sò micca solu cù schermi per i dispositi mobili, tablette è desktop, ma ancu cù specificazioni reali.
Per portà a più ughjettività pussibule in u risultatu di cuntrollà u primu compitu, ci era assai criterii per questa verificazione.
Criterii
U situ web cuncepitu. Questu pare evidenti, ma certi picciotti anu saltatu alcuni blocchi interamente - o vulianu risparmià tempu, o ùn pudianu micca fà. U layout pò esse divisu in quattru schermi principali: u screnu principale cù un avatar, un bloccu cù una lista di aspettative da SRI, un bloccu cù una cartera è un bloccu cù l'infurmazioni di cuntattu. Puderanu esse fatti in rùbbriche o simpricimenti cù divs, u principale hè chì tutti i quattru blocchi eranu dispunibili.
Cunformità di u layout cù u layout. U designer hà fattu una specificazione separata (cumprese culori, tipografia, stati di buttone, etc.) per fà più faciule per i candidati. À u fondu ci era un suggerimentu nantu à l'indentazioni è e caratteristiche di a prima schermu. Eru assai cuntentu di i picciotti chì anu pigliatu in contu tutti i desideri di u designer: per esempiu, a prima schermu ùn deve esse micca menu di l'altitudine di u viewport.
Disposizione adattativa - questu hè quandu l'interfaccia ùn hè micca solu disposta in modu chì à trè risoluzioni tuttu hè pixel à pixel in layout. In i stati intermedii, u layout ùn deve micca cascate ancu. Certi anu scurdatu di limità a larghezza massima di u cuntinuu è stabiliscenu tuttu à 1920 pixel, alcuni anu sbulicatu i sfondi, ma in generale i candidati anu affruntatu bè stu compitu.
Disposizione semantica. "Quante volte anu dettu à u mondu" chì u ligame deve esse designatu cum'è , u buttone - cum'è . Fortunatamente, a maiò parte di i candidati cumpiavanu ancu questu requisitu. Ùn tutti ùn anu ricunnisciutu a lista oculta in l'aspettattivi di u SRI, facendu cù tag div, ma ùn hè micca cusì male. Ci era un candidatu chì hà inseritu tutte e tag semantichi chì sapia - induve era necessariu è induve ùn era micca necessariu. Per esempiu, invece di una lista - è . Dopu tuttu, a semantica - si tratta di capiscenu a cumpusizioni di a vostra pagina è u scopu di ogni bloccu (a maiuranza l'hà gestitu quì), è ancu l'usu di pre- è / o post-processori (uni pochi l'hanu gestitu quì, ancu questu questu era ancu in i punti - a maiò spessu usavanu menu è scss) .
Slider di travagliu. In l'assignazione avemu scrittu chì JS ùn pò micca esse usatu. Quì a capacità di risolve i prublemi hè stata pruvata - un slider puderia esse fattu cù una mansa è . Tutta a magia succede à u livellu di selettore #button-N: verificatu ~ .slider-inner .slider-slides. Quandu clicchemu nantu à una di e caselle di cuntrollu di input, entra in u statu verificatu. Pudemu prufittà di questu è assignà a traduzzione chì avemu bisognu à u cuntinuu cù i slides: transform: translate(-33%). Pudete vede l'implementazione di u slider .
Liste a discesa. Quì tuttu hè ancu falatu è un selettore simili: .accordion-item input: verificatu ~ .accordion-item__content. Pudete vede l'implementazione .
Disponibilità di stati :hover, :active è :focu*. Un puntu assai impurtante. A cunfortu durante l'interazzione cù l'interfaccia dipende da questu. L'utilizatore deve sempre riceve feedback nantu à e so azzioni. Questu articulu hè statu verificatu in tutta l'interazzione cù u questionnaire. Se aghju clicatu u buttone "Call me" è visualmente nunda hè accadutu (ancu s'ellu a dumanda hè stata mandata), questu hè male, perchè dopu cliccà una volta è una volta. In u risultatu, dece dumande seranu mandate è mi chjamà dece volte. Ùn ci vole micca scurdà chì i dispositi mobili ùn anu micca un mouse, chì significa chì ùn deve esse un hover. È un puntu più chì ùn hà micca affettatu quelli chì cumpiendu u puntu nantu à a semantica. Se u vostru cuntrollu ùn hè micca un elementu interattivu, allora quandu si passa sopra, u cursore restarà standard. Sembra assai disordinatu, ancu s'è vo avete scrittu una reazione à hover. Ùn sottovalutate u cursore: puntatore.
Animazioni. Hè impurtante chì tutte e reazzioni chì si trovanu cù l'elementi sò liscia. Nunda in a vita ùn hè istantaneu, cusì avè transizioni nantu à u passaghju è attivu era abbastanza per rende l'interfaccia più piacevule. Ebbè, quelli chì anu animatu u slider è i listi sò generalmente grandi.
Utilizendu l'ultime tecnulugia. Parechje persone anu utilizatu flex, ma nimu hà finitu u compitu cù a griglia. U puntu hè statu cuntatu se flex hè stata utilizata currettamente. Se in qualchì locu u layout hè spartitu per via di sti stessi flexes, sfortunatamente, ùn avete micca ricevutu punti supplementari.
Forma di validazione. Tuttu ciò chì era necessariu era di aghjunghje l'attributu necessariu à ogni input di a forma. Avemu aghjustatu punti à quelli chì anu validatu u campu di email cum'è email.
Stile u buttone di carica di u schedariu. Avemu aspittatu di vede una cumminazione cum'è: è Selezziunà u schedariu . Dopu avemu bisognu di ammuccià l'input è stile l'etichetta. Ci hè un altru modu cumuni - per fà un input trasparente è mette nantu à u buttone. Ma micca tutti i navigatori permettenu styling , è una tale suluzione ùn pò esse chjamata cumpletamente cross-browser. È hè semanticamente più curretta per fà una etichetta.
Compatibilità cross-browser. Avemu verificatu chì tuttu era bè in e duie ultime versioni di i navigatori muderni (senza IE - i participanti eranu furtunati), è ancu in Safari in iPhones è Chrome in Androids.
À u cuntrariu, avemu dedutu punti se qualchissia hà utilizatu JS o Bootstrap: tutti dui anu scunfittu u scopu di tuttu u compitu. Inoltre, i participanti cù Bootstrap ùn sò micca solu ricivutu un minus, ma ancu persu assai punti per a semantica è l'elementi implementati.
Quelli chì anu allughjatu u so situ in un locu in Internet ùn anu micca ricivutu alcun vantaghju particulari - ma i critichi eranu assai cuntenti quandu ùn avianu micca bisognu di scaricà repository è eseguite in u locu in u so urdinatore. Allora questu hè servitu cum'è un plus per u karma.
U primu compitu era assai utile principalmente per u studiente. Quelli chì ùn avemu micca accettatu avà anu un curriculum vitae preparatu - pudete attaccà cù orgogliu à tutte e risposte o pubblicà nantu à e vostre pagine gh.
Task 2: Percorsu di trasportu
L'autore di u compitu hè u capu di u gruppu di interfacce di ricerca Denis Balyko.
Cundizione
Avete una mappa di stella ? Mostra u nome di ogni stella, è ancu a distanza da ellu à l'altri stelle in seconde luci. Implementa a funzione di suluzione, chì deve piglià trè argumenti: un ughjettu in quale i chjavi sò i nomi di l'astri, è i valori sò e distanze à e stelle (traffico unidirezionale in u spaziu), è ancu i nomi di e stelle. i punti di partenza è di fine di a strada - iniziu è finitu, rispettivamente. A funzione deve rinvià a distanza più corta da a stella di partenza à a stella di fine è a strada da seguità.
Firma di funzione:
const solution = function(graph, start, finish) { // Ваше решение }Esempi di dati di input:
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';Esempiu di output:
{ distance: 90, path: ['start', 'A', 'D', 'finish'] }Nota: U scheletru di suluzione hè in u cartulare src/, mette a vostra suluzione in solution.js.
A verificazione di u secondu compitu era u più automatizatu è ughjettivu. A maiò parte di i picciotti guessu chì era necessariu di implementà l'algoritmu di Dijkstra. Quelli chì anu truvatu a so descrizzione è implementatu l'algoritmu in JS sò ben fatti. In ogni casu, quandu cuntrollà l'assignatura, avemu scontru assai documenti cù i stessi errori. Avemu cercatu in Internet per frammenti di codice è truvamu un articulu da quale i participanti copianu l'algoritmu. Hè curiosu chì parechje persone anu copiatu u codice da l'articulu cù i cumenti di l'autore. Tali opere anu ricevutu un puntuatu bassu. Ùn pruibite micca l'usu di qualsiasi fonti, ma vulemu chì una persona sfondate in ciò chì scrive.
Criterii
I punti principali sò stati attribuiti per i testi. Calchì volta era chjaru chì i picciotti si missing around with the repository, rinoming folders, è i testi fallenu solu perchè ùn anu pussutu truvà i fugliali necessarii. Quist'annu avemu pruvatu à aiutà tali picciotti è riturnò tuttu à u so postu per elli. Ma l'annu dopu avemu pensatu di cambià à un sistema di cuncorsu, è questu ùn serà più pardunatu.
Ci era ancu "umani", criterii manuali. Per esempiu, a prisenza di un unicu stile di codice. Nisunu hà dedutu punti per aduprà tabulazioni invece di spazii o viceversa. Hè una altra materia s'ellu si alterna virgulette singuli cù virgulette doppie secondu una regula cunnisciuta da voi, è mette i punti e virgule à l'aleatoriu.
A chiarezza è a leggibilità di a suluzione sò state cunsiderate separatamente. In tutte e cunferenze in u mondu dicenu chì u 80% di u travagliu di un programatore hè di leghje u codice di l'altri. Ancu i scolari sò sottumessi à recensioni di codice - da i so curatori è da l'altri. Allora stu criteriu hà avutu un pesu significativu. Ci sò stati travaglii in quale ùn ci era micca variabili più longu di un caratteru - per piacè ùn fate micca cusì. I cumenti di i participanti eranu assai incuraghjini - cù l'eccezzioni di quelli chì eranu identici à i cumenti di Stella Chang.
L'ultimu criteriu hè a prisenza di l'autotest. Solu uni pochi di persone anu aghjustatu, ma per tutti hè diventatu un grande plus in u so karma.
Soluzione curretta:
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);
};
};Task 3: Calendariu Avvenimenti
Hè stata preparata da i sviluppatori di l'interfaccia Sergey Kazakov è Alexander Podskrebkin.
Cundizione
Scrivite un mini-calendaru per vede u vostru schedariu. Pudete piglià qualsiasi pianificazione chì ti piace. Per esempiu, u calendariu di cunferenze frontend in 2019.
U calendariu deve esse cum'è una lista. Ùn ci hè micca altre esigenze di design. Fate pussibule di stabilisce i ricordi di l'avvenimenti 3, 7 è 14 ghjorni in anticipu. Dopu a prima scaricata da Internet, u calendariu deve esse apertu è funziona offline.
Risorse utili
Programma di cunferenza di frontend:
I travagliadori di serviziu:
Notificazioni API:
U terzu compitu era u più interessante per pruvà, perchè ci era tanti suluzioni pussibuli, ognunu cù u so propiu. Avemu verificatu cumu u candidatu manighja tecnulugii scunnisciuti - s'ellu sà cumu fà ricerche, s'ellu prova e so suluzioni.
Criterii
Calendariu plegatu. Iè, era ancu bisognu à esse dispostu. Ci era ancu quelli chì anu pigliatu a cundizione troppu literalmente è ùn anu micca inseritu una sola linea di codice CSS. Ùn pareva micca assai attrattiva, ma se tuttu hà travagliatu, i punti ùn anu micca diminuitu.
Ottene una lista di avvenimenti da una fonte. Questu ùn hè micca un compitu di layout, cusì a lista di l'avvenimenti inclusi in questu ùn hè micca cuntatu. Pudete sempre annullà una cunferenza, riprogrammà, o aghjunghje una nova. Allora era necessariu di riceve dati da l'esternu è rende u layout basatu annantu à u JSON ricevutu. Hè stata impurtante per ottene e dati in ogni modu (usendu u metudu fetch o usendu XMLHttpRequest). Se una persona hà aghjustatu un polyfill per fetch è hà marcatu a so scelta in u readme, questu hè statu cuntatu cum'è un plus.
Registrazione di u travagliu di serviziu senza errori è travaglià offline dopu a prima scaricata. servitore di serviziu cù cache di pianificazione in u primu boot. I dettagli nantu à i travagliadori di serviziu, e so capacità è e manere di travaglià cun elli (strategie per travaglià cù cache, travagliendu offline) ponu esse truvati quì.
Capacità di stabilisce un ricorduin modu chì travaglia in realtà dopu à 3, 7, 14 ghjorni. Era necessariu capisce l'API di Notificazioni, era ghjustu nantu à u compitu. Ùn ci aspettavamu micca una implementazione specifica per verificà s'ellu hè ora di spinghja. Ogni opzione di travagliu hè stata accettata: almacenamentu in localStorage, IndexDB o sondaggi periodici da un servitore di serviziu. Era ancu pussibule di fà un servitore push (qui ), ma ùn funziona micca offline. Era ugualmente impurtante per riceve una spinta dopu chì a pagina hè stata chjusa - è aperta dopu qualchì tempu. Se u ricordu morse à u stessu tempu chì a pagina era chjusa, a suluzione ùn hè micca cuntata. Hè bellu quandu i picciotti pensanu à i revisori è anu permessu di ottene una spinta avà - per ùn aspittà micca 3 ghjorni.
Capacità di mette una icona nantu à u desktop (PWA). Avemu verificatu a prisenza di u schedariu cù l'icone currette. Certi picciotti anu fattu stu schedariu (o l'abbandunò generatu in CreateReactApp) - ma ùn aghjunghjenu micca l'icone currette. Allora, quandu pruvate d'installà, hè accadutu un errore cum'è "una icona diversa hè necessaria".
Codestyle è struttura di prughjettu. Cum'è in u sicondu compitu, avemu guardatu un unicu codestyle (ancu s'ellu ùn hà micca coincide cù u nostru). Certi picciotti anu avvitatu nantu à linters - questu hè grande.
Errori di cunsola. Se ci era un indicatore ghjustu in a cunsola chì qualcosa era sbagliatu, è u participante ùn hà micca attentu à questu, allora avemu dedutu punti.
Risultati
Ciò chì hè divertente nantu à e decisioni di i participanti:
- Un questionnaire contene u testu seguente: "Un amicu programatore m'hà aiutatu à cullà una applicazione React. L'aghju bombardatu cù dumande nantu à cumu è perchè, è m'hà dettu. Mi hè piaciutu assai, vogliu sapè di più nantu à questu ". Avemu avutu l'arradichera per questa applicazione cù tutti i nostri cori, ma sfurtunatamenti, l'amicu di u candidatu ùn era micca assai utile per fà u travagliu di l'applicazione.
- Un candidatu hà mandatu un ligame à GitHub, induve l'archiviu RAR era situatu - hè difficiule di cummentà questu. 🙂
- Un altru candidatu, in u cumentu nantu à a prima linea di u schedariu solution.js, ammissu onestamente chì hà copiatu l'algoritmu.
Avemu ricevutu applicazioni da 76 candidati è selezziunate 23 persone. Ci sò stati mandati questionarii micca solu da Minsk, ma ancu da Mosca, San Petruburgu è ancu Tatarstan. Qualchidunu di i picciotti ci anu sorpresu cù e so professioni attuali: unu di elli hè un espertu forensicu, è l'altru hè un studiente di medicina.
U risultatu era una distribuzione interessante di i tassi di successu in cumpiendu i travaglii. I participanti anu cumpletu u primu compitu da una media di 60%, u sicondu da 50%, è u terzu hè statu u più difficiuli è hè statu cumpletu da una media di 40%.
À u primu sguardu, i travaglii parenu cumplessi è di tempu. U mutivu ùn hè micca chì vulemu eliminà quant'è più candidati pussibule. Duranti i so studii, i studienti sò affruntati cù compiti di a vita reale - facenu un chat, Yandex.Music per i zitelli o Yandex.Weather per e persone dipendente da u clima. Per questu avete bisognu di una basa di partenza.
M'arricordu di avè vistu u mo compitu di ingressu SRI dui anni fà è di pensà chì ùn l'aghju mai risolve. A cosa principal in questu mumentu hè di pusà, leghje attentamente e cundizioni è cumincià à fà. Ci hè chì e cundizioni cuntenenu quasi 80% di a suluzione. Per esempiu, in a cundizione di u terzu compitu (u più difficiule), avemu aghjustatu ligami à i travagliadori di serviziu è Notificazioni API in MDN. I studienti chì anu studiatu u cuntenutu di i ligami l'hanu cumpletu senza difficultà.
Mi piacerebbe veramente stu articulu per esse lettu da i candidati chì pensanu à entre in SRI in u futuru, chì ùn anu pussutu entre in a Scola di Minsk, o chì cumincianu à fà qualsiasi altra attività di prova. Comu pudete vede, hè abbastanza pussibule di fà. Basta à crede in sè stessu è à sente tutti i cunsiglii di l'autori.
Source: www.habr.com