Данас је отворен нови упис у у Москви. Прва фаза обуке одржаће се од 7. септембра до 25. октобра. Студенти из других градова ће у њему моћи да учествују на даљину или лично – компанија ће платити пут и смештај у хостелу. Друга, такође завршна етапа, трајаће до 3. децембра, може се завршити само лично.
Моје име је Јулиа Середицх, написали смо овај пост заједно са Сергејем Казаковим. Обојица смо програмери интерфејса у канцеларији Иандек-а у Минску и дипломци СРИ из претходних година.
Поводом отварања регистрације у Москви, објављујемо анализу уводних задатака у претходну Школу – овде у Минску.
Ако пратите историју СРИ задатака, из године у годину смо тестирали три важне вештине за програмера:
- Лаиоут. Сваки програмер би требало да буде у стању да уради распоред. Не дешава се да имате чика Серјожу који дизајнира за цео тим, а пишете само сценарије. Зато сваки ученик мора показати како уме да куца.
- ЈаваСцрипт. Да је ствар ограничена на изглед, онда не бисмо имали Школу за развој интерфејса, већ Школу дизајнера распореда. Прелепо дизајниран интерфејс треба оживети. Дакле, увек постоји задатак за ЈС, али понекад је то и задатак за алгоритме - толико их волимо.
- Решавање проблема је можда најважнија вештина програмера. Када је у питању креирање интерфејса, ствари се веома брзо мењају. То је као Луис Керол: „Морате да трчите што је брже могуће само да бисте остали на истом месту, а да бисте стигли на друго место морате да трчите дупло брже. Сваког дана се сусрећемо са новим технологијама – треба да их узмемо у обзир и да их разумемо. Стога смо у трећем задатку предложили да разумемо технологије са којима почетник програмер обично није упознат.
У анализи сваког задатка, рећи ћемо вам не само о исправном поступку, већ и о уобичајеним грешкама.
Задатак 1: Портфолио
На првом задатку су радили дизајнер Иандек.Цоллецтионс Алексеј Черенкевич, који уме да уради лаиоут, и његов сервисни колега, програмер интерфејса Сергеј Самсонов.
Стање
Направите портфолио веб страницу: реците нам о себи, свом раду и очекивањима од Школе. Сајт треба да одговара што је више могуће предложеном изгледу (везе до изгледа: , , , ). Занима нас само изглед, па вас молимо да не користите ЈаваСцрипт.
Приликом провере ћемо узети у обзир:
- величине увлачења, исправност боја, стил фонта, величина фонта;
- семантички распоред;
- присуство различитих стања елемената: приказивање дугмади и веза приликом померања курсора, истицање активних поља за унос итд.;
- компатибилност међу претраживачима (тестирано у најновијим верзијама популарних претраживача).
Предност ће бити:
- коришћење савремених ЦСС решења: флекбок, грид итд.;
- Адаптиве лаиоут;
- коришћење пре- и (или) постпроцесора, асемблер, минификација, оптимизација излазног кода;
- Валидација ХТМЛ обрасца, стилизовано дугме за отпремање датотеке.
Задатак је прилично обиман, тако да можете прескочити оно што неће радити. Ово ће мало смањити ваш резултат, али ћете и даље моћи да покажете своје знање. Када завршите, пошаљите нам две везе - до вашег портфолија и изворног кода на ГитХуб-у.
Распореди предложени у задатку нису били само са екранима за мобилне уређаје, таблете и десктоп рачунаре, већ и са стварним спецификацијама.
Да би се у резултат провере првог задатка унела што већа објективност, за ову проверу је било доста критеријума.
Критеријуми
Дизајнирана веб страница. Ово изгледа очигледно, али неки момци су у потпуности прескочили неке блокове - или су желели да уштеде време, или нису могли. Изглед се може грубо поделити на четири главна екрана: главни екран са аватаром, блок са листом очекивања од СРИ, блок са портфолиом и блок са контакт информацијама. Могу се направити у секцијама или једноставно помоћу див-ова, главна ствар је да су сва четири блока била доступна.
Усклађеност изгледа са распоредом. Дизајнер је направио посебну спецификацију (укључујући боје, типографију, стања дугмади, итд.) како би олакшао кандидатима. На дну је био наговештај о увлачењима и карактеристикама првог екрана. Био сам веома задовољан момцима који су узели у обзир све жеље дизајнера: на пример, први екран није требало да буде мањи од висине прозора.
Адаптиве лаиоут - ово је када интерфејс није само постављен тако да је на три резолуције све пиксел на пиксел у распореду. У средњим стањима, распоред такође не би требало да се распадне. Неки су заборавили да ограниче максималну ширину контејнера и све подесе на 1920 пиксела, неки су побркали позадину, али генерално, кандидати су се добро носили са овим задатком.
Семантички распоред. „Колико су пута рекли свету“ да линк треба да буде дизајниран као , дугме – као . На срећу, већина кандидата је испунила и овај услов. Нису сви препознали скривену листу у очекивањима СРИ-а, користећи див ознаке, али није тако лоше. Постојао је кандидат који је убацио све семантичке ознаке које је знао – где је требало и где није. На пример, уместо листе - и . На крају крајева, семантика - ради се о разумевању састава ваше странице и сврхе сваког блока (већина је то успела овде), као и о коришћењу пре- и/или постпроцесора (неколицина је то успела овде, иако је ово био је и у тачкама – најчешће су користили мање и сцсс) .
Радни клизач. У задатку смо написали да се ЈС не може користити. Овде је тестирана способност решавања проблема - клизач се могао направити помоћу гомиле и . Сва магија се дешава на нивоу селектора #буттон-Н:цхецкед ~ .слидер-иннер .слидер-слидес. Када кликнемо на један од поља за потврду за унос, он прелази у означено стање. Можемо искористити ово и доделити превод који нам је потребан контејнеру са слајдовима: трансформ: транслате(-33%). Можете видети имплементацију клизача .
Падајуће листе. И овде се све свело на то и сличан селектор: .аццордион-итем инпут:цхецкед ~ .аццордион-итем__цонтент. Можете видети имплементацију .
Доступност стања :ховер, :ацтиве и :фоцу*. Веома важна тачка. Од тога је зависила удобност током интеракције са интерфејсом. Корисник увек треба да добије повратне информације о својим поступцима. Ова ставка је проверавана током интеракције са упитником. Ако сам кликнуо на дугме „Позови ме“ и визуелно се ништа није десило (иако је захтев послат), ово је лоше, јер ћу онда кликнути поново и поново. Као резултат тога, биће послато десет захтева и десет пута ћу бити позван. Не смемо заборавити да мобилни уређаји немају миша, што значи да не би требало да постоји лебдење. И још једна тачка која није утицала на оне који су испунили тачку о семантици. Ако ваша контрола није интерактивни елемент, онда када пређете преко ње, курсор ће остати стандардан. Изгледа веома неуредно, чак и ако сте написали реакцију да лебдите. Не потцењујте курсор: показивач.
Анимације. Важно је да све реакције које се дешавају са елементима буду глатке. Ништа у животу није тренутно, тако да су прелази на лебдећи и активни били довољни да интерфејс буде пријатнији. Па, они који су анимирали клизач и листе су генерално одлични.
Користећи најновију технологију. Многи људи су користили флекс, али нико није завршио задатак користећи мрежу. Бод се рачуна ако је флекс правилно употребљен. Ако се негде распоред покварио управо због ових савијања, авај, нисте добили додатне поене.
Валидација обрасца. Све што је било потребно било је додати тражени атрибут сваком уносу обрасца. Додали смо бодове онима који су потврдили поље е-поште као имејл.
Стилизирање дугмета за отпремање датотеке. Очекивали смо да видимо комбинацију попут: и Изабери датотеку . Затим смо морали да сакријемо унос и стилизујемо ознаку. Постоји још један уобичајен начин - да направите транспарентан унос и ставите га на врх дугмета. Али не дозвољавају сви претраживачи стилизовање , а такво решење се не може назвати потпуно унакрсним претраживачем. И семантички је исправније направити ознаку.
Компатибилност са више претраживача. Проверили смо да је све у реду у две најновије верзије модерних претраживача (без ИЕ - учесници су имали среће), као и у Сафарију на иПхоне-у и Цхроме-у на Андроид-у.
Напротив, одузимали смо поене ако би неко користио ЈС или Боотстрап: оба би поразила сврху целог задатка. Штавише, учесници са Боотстрапом не само да су добили минус, већ су и изгубили много поена за семантику и имплементиране елементе.
Они који су хостовали свој сајт негде на Интернету нису добили никакву посебну предност – али су рецензенти били веома срећни када нису морали да преузимају ризнице и покрећу их локално на свом рачунару. Дакле, ово је послужило као плус за карму.
Први задатак је био веома користан првенствено за ученика. Они које нисмо прихватили сада имају припремљену биографију - можете је са поносом приложити уз све одговоре или поставити на своје гх-странице.
Задатак 2: Транспортни пут
Аутор задатка је шеф групе интерфејса за претраживање Денис Балико.
Стање
Имате ли мапу звезда? Приказује име сваке звезде, као и растојање од ње до других звезда у светлосним секундама. Имплементирајте функцију решења која треба да узме три аргумента: објекат у коме су кључеви имена звезда, а вредности су растојања до звезда (једносмерни саобраћај у свемиру), као и имена почетна и завршна тачка пута - почетак и крај, респективно. Функција треба да врати најкраћу удаљеност од почетне звезде до циљне звезде и путању коју треба пратити.
Потпис функције:
const solution = function(graph, start, finish) { // Ваше решение }Пример улазних података:
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';Пример излаза:
{ distance: 90, path: ['start', 'A', 'D', 'finish'] }Напомена: Костур решења је у фасцикли срц/, ставите решење у солутион.јс.
Верификација другог задатка била је најаутоматизованија и најобјективнија. Већина момака је претпоставила да је потребно имплементирати Дијкстрин алгоритам. Они који су пронашли његов опис и имплементирали алгоритам у ЈС су добро урађени. Међутим, приликом провере задатка, наишли смо на много радова са истим грешкама. Претражили смо интернет у потрази за фрагментима кода и пронашли чланак из којег су учесници копирали алгоритам. Смешно је што су многи копирали код из чланка уз коментаре аутора. Такви радови су добили ниску оцену. Не забрањујемо коришћење било каквих извора, али желимо да се човек удуби у оно што пише.
Критеријуми
За тестове су додељени главни поени. Понекад је било јасно да се момци петљају са спремиштем, преименовању фасцикли, а тестови би били неуспешни једноставно зато што нису могли да пронађу потребне датотеке. Ове године смо покушали да помогнемо таквим момцима и вратили им све на своје место. Али следеће године планирамо да пређемо на систем такмичења и то нам више неће бити опроштено.
Постојали су и „људски“, ручни критеријуми. На пример, присуство једног стила кода. Нико није одузимао поене за коришћење табулатора уместо размака или обрнуто. Друга је ствар ако једноструке наводнике мењате са дуплим наводницима према једном вама познатом правилу, а тачке и зарезе постављате насумично.
Посебно су узете у обзир јасноћа и читљивост решења. На свим конференцијама у свету кажу да се 80% посла програмера састоји од читања туђег кода. Чак и школарци пролазе кроз прегледе кода - од својих кустоса и једни од других. Дакле, овај критеријум је имао значајну тежину. Било је радова у којима није било променљивих дужих од једног знака - немојте то да радите. Коментари учесника су били веома охрабрујући - са изузетком оних који су били идентични коментарима Стеле Чанг.
Последњи критеријум је присуство аутотестова. Само неколико људи их је додало, али за све је то постао огроман плус у њиховој карми.
Права одлука:
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: Календар догађаја
Припремили су га програмери интерфејса Сергеј Казаков и Александар Подскребкин.
Стање
Напишите мини календар да бисте приказали свој распоред. Можете узети било који распоред који желите. На пример, распоред фронтенд конференција у 2019.
Календар треба да изгледа као листа. Не постоје други захтеви за дизајн. Омогућите постављање подсетника на догађаје 3, 7 и 14 дана унапред. Након првог преузимања са Интернета, календар би требало да се отвори и функционише ван мреже.
Корисни ресурси
Распоред фронтенд конференције:
Услужни радници:
АПИ за обавештења:
Трећи задатак је био најзанимљивији за тестирање, јер је било толико могућих решења, свако са својим. Проверили смо како кандидат барата са непознатим технологијама – да ли зна да истражује, да ли тестира своја решења.
Критеријуми
Преклопљени календар. Да, још увек је требало да се постави. Било је и оних који су услов схватили пребуквално и нису убацили ни један ред ЦСС кода. Није изгледало баш атрактивно, али ако је све функционисало, бодови се нису смањивали.
Добијање листе догађаја из извора. Ово није задатак распореда, тако да се листа догађаја укључених у њега није рачунала. Увек можете да откажете конференцију, да је поново закажете или да додате нову. Дакле, било је потребно примити податке споља и приказати изглед на основу примљеног ЈСОН-а. Било је важно добити податке на било који начин (користећи методу дохваћања или користећи КСМЛХттпРекуест). Ако је особа додала полифил за преузимање и означила свој избор у реадме-у, то се рачунало као плус.
Регистрација услужног радника без грешака и радити ван мреже након првог преузимања. сервисер са кеширањем распореда при првом покретању. Детаље о сервисерима, њиховим могућностима и начинима рада са њима (стратегије за рад са кешовима, рад ван мреже) можете пронаћи овде.
Могућност постављања подсетникатако да стварно ради после 3, 7, 14 дана. Било је неопходно разумети АПИ за обавештења, био у праву на задатку. Нисмо очекивали никакву конкретну имплементацију која ће проверити да ли је време за гурање. Било која радна опција је прихваћена: складиштење у лоцалСтораге, ИндекДБ или периодично испитивање од стране сервисера. Било је чак могуће направити и пусх сервер (овде ), али не би функционисало ван мреже. Подједнако је било важно примити пусх након што је страница затворена - и отворена након неког времена. Ако је подсетник нестао у исто време када је страница затворена, решење се није рачунало. Сјајно је када су момци размишљали о рецензентима и омогућили да се одмах погура - како не би чекали 3 дана.
Могућност постављања иконе на радну површину (ПВА). Проверили смо присуство датотеке са исправним иконама. Неки момци су направили ову датотеку (или су је оставили генерисану у ЦреатеРеацтАпп) - али нису додали исправне иконе. Затим, када покушавате да инсталирате, појавила се грешка попут „потребна је друга икона“.
Цодестиле и структура пројекта. Као иу другом задатку, посматрали смо један кодни стил (чак и ако се не поклапа са нашим). Неки момци су зезнули линтере - то је супер.
Грешке на конзоли. Ако је на конзоли био индикатор да нешто није у реду, а учесник није обратио пажњу на то, онда смо одузимали поене.
Резултати
Шта је смешно у одлукама учесника:
- Један упитник је садржао следећи текст: „Пријатељ програмер ми је помогао да саставим Реацт апликацију. Засипао сам га питањима како и зашто, а он ми је рекао. Заиста ми се допало, желим да знам више о томе.” Свим срцем смо навијали за ову апликацију, али нажалост, пријатељ кандидата није био од велике помоћи да апликација функционише.
- Један кандидат је послао везу на ГитХуб, где се налази РАР архива - тешко је ово коментарисати. 🙂
- Други кандидат је у коментару на првом реду фајла солутион.јс искрено признао да је копирао алгоритам.
Примили смо пријаве од 76 кандидата и одабрали 23 особе. Послали су нам упитнике не само из Минска, већ и из Москве, Санкт Петербурга, па чак и из Татарстана. Неки од момака су нас изненадили садашњим занимањима: један је судски вештак, а други студент медицине.
Резултат је била занимљива дистрибуција успеха у извршавању задатака. Учесници су први задатак урадили у просеку 60%, други за 50%, а трећи се показао као најтежи и реализован је у просеку 40%.
На први поглед, задаци изгледају сложени и дуготрајни. Разлог није у томе што желимо да избацимо што више кандидата. Током студија студенти се суочавају са задацима из стварног живота – прављење ћаскања, Иандек.Мусиц за децу или Иандек.Веатхер за људе који зависе од временских прилика. За ово вам је потребна почетна база.
Сећам се да сам пре две године видео свој улазни задатак за СРИ и помислио да га никада нећу решити. Главна ствар у овом тренутку је да седнете, пажљиво прочитате услове и почнете то да радите. Испоставља се да услови садрже скоро 80% раствора. На пример, у услову трећег задатка (најтежег), додали смо везе ка сервисерима и АПИ за обавештења на МДН-у. Ученици који су проучавали садржај линкова завршили су га без потешкоћа.
Заиста бих волео да овај чланак прочитају кандидати који планирају да уђу у СРИ у будућности, који нису могли да уђу у школу у Минску или почињу да раде било који други тестни задатак. Као што видите, то је сасвим могуће учинити. Само треба веровати у себе и послушати све савете аутора.
Извор: ввв.хабр.цом