Бүгін жаңа қабылдау ашылды Мәскеуде. Оқудың бірінші кезеңі 7 қыркүйек пен 25 қазан аралығында өтеді. Басқа қалалардың студенттері оған қашықтан немесе тікелей қатыса алады - компания жол ақысы мен жатақханада тұру ақысын төлейді. Екінші, сонымен қатар соңғы кезең 3 желтоқсанға дейін жалғасады, оны тек жеке қабылдауға болады.
Менің атым Юлия Середич, біз бұл жазбаны Сергей Казаковпен бірге жазғанбыз. Біз Яндекстің Минск кеңсесінде интерфейс әзірлеушілеріміз және өткен жылдардағы SRI түлектеріміз.
Мәскеуде тіркеудің ашылуына байланысты біз бұрынғы Мектепке кіріспе тапсырмаларының талдауын жариялап жатырмыз - мұнда Минскіде.
Егер сіз SRI тапсырмаларының тарихын қадағалайтын болсаңыз, біз жылдан жылға бағдарламашы үшін үш маңызды дағдыны сынап көрдік:
- Орналасу. Әрбір әзірлеуші макет жасай алуы керек. Сізде Серёжа ағай бар, ол бүкіл командаға дизайн жасайды және сіз тек сценарий жазасыз. Сондықтан әр оқушы теруді қалай білетінін көрсетуі керек.
- JavaScript. Егер мәселе макетпен шектелсе, онда бізде интерфейсті дамыту мектебі емес, макет дизайнерлерінің мектебі болар еді. Әдемі жобаланған интерфейсті қайта жаңғырту керек. Сондықтан JS үшін әрқашан тапсырма болады, бірақ кейде бұл алгоритмдер үшін де тапсырма - біз оларды өте жақсы көреміз.
- Мәселені шешу - әзірлеушінің ең маңызды дағдысы. Интерфейстерді құруға келетін болсақ, заттар өте тез өзгереді. Бұл Льюис Кэрролл сияқты: «Бір орында қалу үшін мүмкіндігінше жылдам жүгіру керек, ал басқа жерге жету үшін екі есе жылдам жүгіру керек». Біз күн сайын жаңа технологияларды кездестіреміз – біз оларды ескеріп, түсіне білуіміз керек. Сондықтан, үшінші тапсырмада біз бастаушы әзірлеушіге әдетте таныс емес технологияларды түсінуді ұсындық.
Әрбір тапсырманы талдау барысында біз сізге дұрыс процедура туралы ғана емес, сонымен қатар жиі кездесетін қателер туралы да айтып береміз.
1-тапсырма: Портфолио
Бірінші тапсырманы макет жасауды білетін Yandex.Collections дизайнері Алексей Черенкевич пен оның сервистік әріптесі, интерфейсті әзірлеуші Сергей Самсонов жасады.
Шарт
Портфолио веб-сайтын жасаңыз: өзіңіз, жұмысыңыз және мектептен күткеніңіз туралы айтып беріңіз. Сайт мүмкіндігінше ұсынылған макетке сәйкес болуы керек (макеттерге сілтемелер: , , , ). Бізді тек макет қызықтырады, сондықтан JavaScript қолданбаңыз.
Тексеру кезінде мыналарды ескереміз:
- шегініс өлшемдері, түс дұрыстығы, шрифт стилі, шрифт өлшемі;
- семантикалық орналасу;
- элементтердің әртүрлі күйлерінің болуы: курсорды жылжытқанда түймелер мен сілтемелерді көрсету, белсенді енгізу өрістерін ерекшелеу және т.б.;
- кросс-браузер үйлесімділігі (танымал браузерлердің соңғы нұсқаларында тексерілген).
Артықшылығы болады:
- заманауи CSS шешімдерін қолдану: flexbox, grid және т.б.;
- Бейімделетін орналасу;
- алдын ала және (немесе) кейінгі процессорларды пайдалану, шығару кодын жинақтау, минимизациялау, оңтайландыру;
- HTML пішінін тексеру, стильдендірілген файлды жүктеп салу түймесі.
Тапсырма өте көлемді, сондықтан жұмыс істемейтін нәрсені өткізіп жіберуге болады. Бұл сіздің ұпайыңызды аздап төмендетеді, бірақ сіз әлі де өз біліміңізді көрсете аласыз. Аяқтаған кезде бізге екі сілтемені жіберіңіз - портфолиоңызға және GitHub-тағы бастапқы кодқа.
Тапсырмада ұсынылған макеттер мобильді құрылғыларға, планшеттерге және жұмыс үстелдеріне арналған экрандармен ғана емес, сонымен қатар нақты сипаттамалармен де болды.
Бірінші тапсырманы тексеру нәтижесіне барынша объективтілік әкелу үшін бұл тексерудің көптеген критерийлері болды.
критерийлері
Жобаланған веб-сайт. Бұл анық көрінеді, бірақ кейбір жігіттер кейбір блоктарды толығымен өткізіп жіберді - олар уақытты үнемдегісі келді, немесе оларды орындай алмады. Орналасуды төрт негізгі экранға бөлуге болады: аватары бар негізгі экран, SRI-дан күтулер тізімі бар блок, портфолиосы бар блок және байланыс ақпараты бар блок. Оларды бөлімдерде немесе жай ғана divs көмегімен жасауға болады, ең бастысы, барлық төрт блок қол жетімді болды.
Макеттің макетке сәйкестігі. Үміткерлерге жеңілдету үшін дизайнер бөлек спецификация жасады (оның ішінде түстер, типография, түйме күйлері және т.б.). Төменгі жағында бірінші экранның шегіністері мен мүмкіндіктері туралы кеңес болды. Мен дизайнердің барлық тілектерін ескерген жігіттерге өте риза болдым: мысалы, бірінші экран көру алаңының биіктігінен кем болмауы керек.
Бейімделетін орналасу - бұл интерфейс үш ажыратымдылықта барлығы пиксельден пиксельге орналасатындай етіп жай орналастырылмаған кезде. Аралық күйлерде орналасу да бұзылмауы керек. Кейбіреулер контейнердің максималды енін шектеуді ұмытып, барлығын 1920 пиксельге орнатуды ұмытты, кейбіреулері фондарды шатастырды, бірақ жалпы үміткерлер бұл тапсырманы жақсы орындады.
Семантикалық орналасу. «Олар әлемге қанша рет айтты» сілтеме ретінде жобалануы керек , түймесі – ретінде . Бақытымызға орай, үміткерлердің көпшілігі бұл талапты орындады. SRI күтулеріндегі жасырын тізімді барлығы бірдей танымайды, оны div тегтері арқылы жасайды, бірақ бұл жаман емес. Өзі білетін барлық семантикалық тегтерді - қажет және қажет емес жерде енгізген үміткер болды. Мысалы, тізімнің орнына - және . Ақыр соңында, семантика - бұл сіздің бетіңіздің құрамын және әрбір блоктың мақсатын түсіну туралы (көпшілігі оны осында басқарды), сонымен қатар алдын-ала және/немесе кейінгі процессорларды пайдалануды (мұнда бірнеше адам басқарды, бірақ бұл нүктелерде де болды - көбінесе олар аз және scss пайдаланды) .
Жұмыс жүгірткісі. Тапсырмада біз JS қолдануға болмайтынын жаздық. Мұнда есептерді шешу қабілеті тексерілді - сырғытпаны байлам арқылы жасауға болады Және . Барлық сиқырлар селектор деңгейінде орын алады #button-N:checked ~ .slider-inner .slider-slides. Енгізу құсбелгілерінің біреуін басқан кезде ол белгіленген күйге өтеді. Біз мұны пайдалана аламыз және слайдтары бар контейнерге қажетті аударманы тағайындай аламыз: transform: translate (-33%). Сіз жүгірткінің орындалуын көре аласыз .
Ашылмалы тізімдер. Міне, бәрі де осында болды және ұқсас селектор: .accordion-element input:checked ~ .accordion-element__content. Сіз іске асыруды көре аласыз .
:hover, :active және :focu* күйлерінің қолжетімділігі. Өте маңызды нүкте. Интерфейспен өзара әрекеттесу кезіндегі жайлылық оған байланысты. Пайдаланушы әрқашан өз әрекеттері туралы кері байланыс алуы керек. Бұл тармақ сауалнамамен өзара әрекеттесу барысында тексерілді. Егер мен «Маған қоңырау шалу» түймесін бассам және визуалды түрде ештеңе болмаса (сұраныс жіберілсе де), бұл жаман, өйткені мен оны қайта-қайта басамын. Нәтижесінде он сұраныс жіберіліп, маған он рет қоңырау шалылады. Мобильді құрылғыларда тінтуір жоқ екенін ұмытпауымыз керек, яғни меңзер болмауы керек. Және семантика туралы тармақты орындағандарға әсер етпеген тағы бір мәселе. Егер басқару элементі интерактивті элемент болмаса, меңзерді оның үстіне апарған кезде курсор стандартты болып қалады. Бұл өте ұқыпсыз көрінеді, тіпті егер сіз меңгеуге реакция жазған болсаңыз да. Курсорды бағаламаңыз: көрсеткіш.
Анимациялар. Элементтермен жүретін барлық реакциялардың тегіс болуы маңызды. Өмірде ештеңе лезде болмайды, сондықтан интерфейсті жағымдырақ ету үшін жылжыту және белсенді өту жеткілікті болды. Слайдер мен тізімдерді анимациялағандар әдетте керемет.
Соңғы технологияны қолдану. Көптеген адамдар flex-ті пайдаланды, бірақ ешкім торды пайдаланып тапсырманы орындамады. Флекс дұрыс пайдаланылса, ұпай есептелді. Егер бір жерде орналасу дәл осы икемділіктерге байланысты бұзылса, өкінішке орай, сіз ешқандай қосымша ұпай алған жоқсыз.
Пішінді тексеру. Пішіннің әрбір енгізуіне қажетті төлсипатты қосу ғана талап етілді. Біз электрондық пошта өрісін электрондық пошта ретінде растағандарға ұпай қостық.
Файлды жүктеп салу түймешігін сәндеу. Біз комбинацияны көреміз деп күттік: және Файлды таңдаңыз . Содан кейін біз енгізуді жасырып, белгіні стильдеуіміз керек еді. Басқа кең таралған әдіс бар - мөлдір енгізу және оны түйменің үстіне қою. Бірақ барлық браузерлер сәндеуге мүмкіндік бермейді , және мұндай шешімді толық кросс-шолғыш деп атауға болмайды. Ал белгіні жасау мағыналық жағынан дұрысырақ.
Браузер арасындағы үйлесімділік. Біз заманауи браузерлердің екі соңғы нұсқасында (IE жоқ - қатысушылардың жолы болды), сондай-ақ iPhone-дағы Safari және Android-тегі Chrome-да бәрі жақсы екенін тексердік.
Керісінше, егер біреу JS немесе Bootstrap пайдаланса, біз ұпайларды шегереміз: екеуі де бүкіл тапсырманың мақсатын жеңеді. Сонымен қатар, Bootstrap қатысушылары минус алып қана қоймай, семантика мен іске асырылған элементтер үшін көптеген ұпай жоғалтты.
Интернетте өз сайтын орналастырғандар ешқандай артықшылыққа ие болмады - бірақ репозиторийлерді жүктеп алып, оларды компьютерде жергілікті түрде іске қосудың қажеті болмаған кезде рецензенттер өте қуанышты болды. Сондықтан бұл карма үшін плюс болды.
Бірінші тапсырма ең алдымен студентке өте пайдалы болды. Біз қабылдамағандардың қазір дайын түйіндемелері бар - сіз оны барлық жауаптарға мақтанышпен қоса аласыз немесе оны gh-парақтарыңызға орналастыра аласыз.
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'] }Ескерту: Шешім қаңқасы src/ қалтасында, шешіміңізді solution.js ішіне қойыңыз.
Екінші тапсырманы тексеру барынша автоматтандырылған және объективті болды. Жігіттердің көпшілігі Дейкстра алгоритмін енгізу қажет деп есептеді. Оның сипаттамасын тауып, алгоритмді JS-де жүзеге асырғандар жақсы жұмыс істейді. Алайда, тапсырманы тексерген кезде сол қателері бар көптеген қағаздарды кездестірдік. Біз Интернеттен код фрагменттерін іздеп, қатысушылар алгоритмді көшірген мақаланы таптық. Бір қызығы, көпшіліктің мақаладағы кодты автордың пікірлерімен бірге көшіріп алғаны. Мұндай жұмыстар төмен балл алды. Біз қандай да бір дереккөзді пайдалануға тыйым салмаймыз, бірақ біз адамның жазғанын тереңдетуін қалаймыз.
критерийлері
Негізгі ұпайлар сынақтарға берілді. Кейде жігіттер репозиториймен араласып, қалталардың атын өзгертіп, қажетті файлдарды таба алмағандықтан сынақтар сәтсіз болатыны анық болды. Биыл біз осындай жігіттерге көмектесуге тырыстық және олар үшін бәрін өз орнына қайтардық. Бірақ келесі жылы біз конкурстық жүйеге көшуді жоспарлап отырмыз, бұл енді кешірілмейді.
Сондай-ақ «адам», қол критерийлері болды. Мысалы, бір код стилінің болуы. Ешкім бос орындардың орнына қойындыларды пайдалану үшін ұпайларды шегермеді немесе керісінше. Сізге белгілі бір ережеге сәйкес жалғыз тырнақшаларды қос тырнақшалармен ауыстырып, нүктелі үтірлерді кездейсоқ орналастырсаңыз, бұл басқа мәселе.
Шешімнің анықтығы мен оқылу мүмкіндігі бөлек ескерілді. Әлемдегі барлық конференцияларда олар бағдарламашы жұмысының 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 күн бұрын орнатуға мүмкіндік беріңіз. Интернеттен бірінші жүктеп алғаннан кейін күнтізбе ашылып, желіден тыс жұмыс істеуі керек.
Пайдалы ресурстар
Frontend конференциясының кестесі:
Қызмет көрсету қызметкерлері:
Хабарландырулар API:
Үшінші тапсырма тестілеу үшін ең қызықты болды, өйткені мүмкін болатын шешімдер өте көп болды, олардың әрқайсысының өзіндік ерекшеліктері бар. Біз үміткердің бейтаныс технологияларды қалай өңдейтінін тексердік - ол зерттеуді біледі ме, өз шешімдерін сынай ма.
критерийлері
Бүктелген күнтізбе. Иә, оны әлі де төсеу керек еді. Шартты тым тура қабылдап, CSS кодының бір жолын енгізбегендер де болды. Бұл өте тартымды көрінбеді, бірақ бәрі жұмыс істесе, ұпайлар азайған жоқ.
Дереккөзден оқиғалар тізімін алу. Бұл орналасу тапсырмасы емес, сондықтан оған енгізілген оқиғалар тізімі есептелмеді. Кез келген уақытта конференциядан бас тартуға, оны қайта жоспарлауға немесе жаңасын қосуға болады. Сондықтан сырттан деректерді қабылдау және алынған JSON негізінде орналасуды көрсету қажет болды. Деректерді кез келген жолмен алу маңызды болды (алу әдісін пайдалану немесе XMLHttpRequest пайдалану). Егер адам алу үшін политолтырғышты қосса және Readme файлында өз таңдауын белгілесе, бұл плюс болып саналды.
Қызметкерді қатесіз тіркеу және бірінші жүктеп алғаннан кейін желіден тыс жұмыс істеңіз. бірінші жүктеуде кесте кэштеуімен қызмет көрсету қызметкері. Қызмет көрсетуші қызметкерлер, олардың мүмкіндіктері және олармен жұмыс істеу тәсілдері (кэштермен жұмыс істеу, желіден тыс жұмыс істеу стратегиялары) туралы мәліметтерді осы жерден табуға болады.
Еске салғышты орнату мүмкіндігісондықтан ол 3, 7, 14 күннен кейін жұмыс істейді. Хабарландырулар API түсіну қажет болды, тапсырманы дұрыс орындады. Біз итеру уақыты келген-келмегенін тексеру үшін нақты іске асыруды күткен жоқпыз. Кез келген жұмыс опциясы қабылданды: localStorage, IndexDB сақтау немесе қызмет көрсету қызметкерінің мерзімді сұрауы. Тіпті push-сервер жасау мүмкін болды (мұнда ), бірақ ол желіден тыс жұмыс істемейді. Бет жабылғаннан кейін және біраз уақыттан кейін ашылғаннан кейін итеруді алу бірдей маңызды болды. Егер еске салғыш парақ жабылған уақытта өлсе, шешім есептелмейді. Жігіттер рецензенттер туралы ойланып, 3 күн күтпеу үшін дәл қазір итермелеуге мүмкіндік бергені керемет.
Жұмыс үстеліне белгішені орналастыру мүмкіндігі (PWA). Біз файлдың бар-жоғын тексердік дұрыс белгішелермен. Кейбір жігіттер бұл файлды жасады (немесе оны CreateReactApp бағдарламасында қалдырды) - бірақ дұрыс белгішелерді қоспады. Содан кейін орнату әрекеті кезінде «басқа белгіше қажет» сияқты қате пайда болды.
Codestyle және жоба құрылымы. Екінші тапсырмадағыдай, біз бір код стилін қарастырдық (тіпті ол біздікімен сәйкес келмесе де). Кейбір жігіттер линтерлерді бұрап алды - бұл тамаша.
Консоль қателері. Егер консольде бірдеңе дұрыс емес деген көрсеткіш болса және қатысушы оған назар аудармаса, біз ұпайларды шегереміз.
Нәтижелері
Қатысушылардың шешімдерінің күлкілісі:
- Бір сауалнамада келесі мәтін болды: «Бағдарламашы досым маған React қосымшасын құрастыруға көмектесті. Мен оны қалай және неге деген сұрақтармен бомбаладым, ол маған айтты. Маған бұл өте ұнады, мен бұл туралы көбірек білгім келеді ». Біз бұл қосымшаны шын жүректен іздедік, бірақ, өкінішке орай, үміткердің досы өтініштің жұмыс істеуіне көп көмектеспеді.
- Бір үміткер RAR мұрағаты орналасқан GitHub-қа сілтеме жіберді - бұл туралы түсініктеме беру қиын. 🙂
- Тағы бір үміткер, solution.js файлының бірінші жолындағы түсініктемеде, алгоритмді көшіргенін шынайы мойындады.
Біз 76 үміткерден өтініш қабылдап, 23 адамды таңдадық. Бізге Минсктен ғана емес, Мәскеуден, Санкт-Петербургтен, тіпті Татарстаннан да сауалнамалар жіберілді. Кейбір жігіттер бізді қазіргі мамандықтарымен таң қалдырды: бірі сот-медициналық сарапшы, екіншісі медицина факультетінің студенті.
Нәтиже тапсырмаларды орындаудағы табыстылық көрсеткіштерін қызықты бөлу болды. Қатысушылар бірінші тапсырманы орта есеппен 60% орындаса, екіншісі 50% орындаса, үшінші тапсырма ең қиын болып шықты және орташа есеппен 40% орындады.
Бір қарағанда, тапсырмалар күрделі және көп уақытты қажет етеді. Себебі, біз мүмкіндігінше көп үміткерді алып тастағымыз келмейді. Студенттер оқу барысында нақты өмірлік тапсырмалармен кездеседі – чат құру, балаларға арналған Яндекс.Музыка немесе ауа райына тәуелді адамдар үшін Яндекс.Ауа райы. Ол үшін сізге бастапқы негіз қажет.
Мен екі жыл бұрын SRI-ға түсу тапсырмамды көріп, оны ешқашан шешпеймін деп ойлағаным есімде. Қазіргі уақытта ең бастысы - отыру, шарттарды мұқият оқып шығу және оны орындауға кірісу. Шарттарда ерітіндінің 80% дерлік бар екені белгілі болды. Мысалы, үшінші тапсырма жағдайында (ең қиыны) біз MDN-де қызмет көрсету қызметкерлеріне және Notifications API-ге сілтемелер қостық. Сілтемелердің мазмұнын зерттеген оқушылар оны еш қиындықсыз аяқтады.
Мен бұл мақаланы болашақта ҒЗИ-ға түсуді жоспарлап отырған, Минск мектебіне түсе алмаған немесе басқа тест тапсырмасын орындай бастаған үміткерлердің оқығанын қалаймын. Көріп отырғаныңыздай, мұны істеу әбден мүмкін. Сізге тек өзіңізге сену және авторлардың барлық кеңестерін тыңдау керек.
Ақпарат көзі: www.habr.com