Dinten ieu pendaptaran anyar dibuka di Moscow. Tahap kahiji palatihan bakal lumangsung ti 7 Séptémber nepi ka 25 Oktober. Siswa ti kota séjén bakal tiasa ilubiung dina jarak jauh atanapi sacara pribadi - perusahaan bakal mayar perjalanan sareng akomodasi di asrama. Anu kadua, ogé katelah tahap ahir, bakal lumangsung dugi ka 3 Désémber, sareng ngan tiasa réngsé sacara pribadi.
Nami abdi Yulia Seredich, kami nyerat tulisan ieu sareng Sergei Kazakov. Kami duanana pamekar panganteur di kantor Minsk of Yandex sarta lulusan SRI ti taun saméméhna.
Dina kasempetan bubuka pendaptaran di Moscow, urang medarkeun analisis tugas bubuka ka Sakola saméméhna - didieu di Minsk.
Upami anjeun ngalacak sajarah tugas SRI, ti taun ka taun kami nguji tilu kaahlian penting pikeun programmer:
- Tata perenah. Unggal pamekar kedah tiasa ngalakukeun perenah. Teu kajadian nu boga Paman Seryozha anu ngarancang pikeun sakabéh tim, jeung anjeun ngan nulis naskah. Ku alatan éta, unggal murid kedah nunjukkeun kumaha anjeunna terang kumaha carana nyerat.
- JavaScript. Upami masalahna dugi ka perenah, maka urang henteu ngagaduhan Sakola Pangembangan Antarmuka, tapi Sakola Desainer Layout. Antarbeungeut anu dirarancang saé kedah dihirupkeun deui. Ku alatan éta, sok aya tugas pikeun JS, tapi kadang eta oge tugas pikeun algoritma - urang cinta aranjeunna pisan.
- Ngarengsekeun masalah panginten mangrupikeun kaahlian anu paling penting pikeun pamekar. Lamun datang ka nyieun interfaces, hal anu ngarobah pisan gancang. Ieu kawas Lewis Carroll: "Anjeun kudu ngajalankeun sakumaha gancang anjeun ngan pikeun tetep di tempat anu sarua, sarta pikeun meunangkeun ka tempat séjén anjeun kudu ngajalankeun dua kali gancang". Unggal dinten urang mendakan téknologi anyar - urang kedah tumut kana akun sareng tiasa ngartos aranjeunna. Ku alatan éta, dina tugas katilu, urang ngajukeun ngartos téknologi nu pamekar novice biasana teu wawuh jeung.
Dina analisa unggal tugas, urang bakal ngabejaan Anjeun teu ukur ngeunaan prosedur bener, tapi ogé ngeunaan kasalahan umum.
Pancén 1: Portopolio
Tugas kahiji digarap ku Yandex.Collections desainer Alexey Cherenkevich, anu weruh kumaha carana ngalakukeun perenah, jeung batur sapagawean jasa-Na, pamekar interface Sergey Samsonov.
Kaayaan
Jieun ramatloka portopolio: ngabejaan urang ngeunaan diri, karya anjeun sarta ekspektasi anjeun ti Sakola. Situs kedah cocog saloba mungkin sareng perenah anu diusulkeun (tumbu ka perenah: , , , ). Kami ngan museurkeun perenah, jadi punten ulah make JavaScript.
Nalika mariksa kami bakal tumut kana akun:
- ukuran indentation, bener warna, gaya font, ukuran font;
- perenah semantis;
- ayana kaayaan elemen béda: mintonkeun tombol jeung tumbu nalika hovering kursor, nyorot widang input aktip, jsb;
- kasaluyuan cross-browser (diuji dina versi panganyarna tina browser populér).
Kauntungannana bakal:
- pamakéan solusi CSS modern: flexbox, grid, jsb;
- perenah adaptif;
- pamakéan pre- jeung (atawa) pos-processors, assembly, minification, optimasi kode kaluaran;
- Validasi formulir HTML, tombol unggah file stylized.
Tugasna cukup ageung, janten anjeun tiasa ngalangkungan naon anu henteu tiasa dianggo. Ieu bakal nurunkeun skor anjeun rada, tapi anjeun masih bakal tiasa nunjukkeun pangaweruh anjeun. Sawaktos Anjeun tos rengse, kirimkeun kami dua tautan - ka portopolio anjeun sareng kode sumber dina GitHub.
Layout anu diusulkeun dina tugas éta henteu ngan ukur nganggo layar pikeun alat sélulér, tablet sareng desktop, tapi ogé kalayan spésifikasi nyata.
Dina raraga mawa saloba obyektif mungkin kana hasil mariksa tugas kahiji, aya loba kriteria keur dipariksa ieu.
Kritéria
ramatloka dirancang. Ieu sigana atra, tapi sababaraha guys skipped sababaraha blok sagemblengna - boh maranéhna rék ngahemat waktos, atawa maranéhna teu bisa ngalakukeunana. Tata perenah tiasa dibagi kana opat layar utama: layar utama kalayan avatar, blok kalayan daptar ekspektasi ti SRI, blok kalayan portopolio sareng blok kalayan inpormasi kontak. Éta tiasa dilakukeun dina bagian atanapi ngan ukur nganggo divs, anu utama nyaéta sadayana opat blok sayogi.
Patuh tata perenah sareng perenah. Désainer ngadamel spésifikasi anu misah (kalebet warna, tipografi, kaayaan tombol, jsb) pikeun ngagampangkeun calon. Di handap aya hint on indents sarta fitur tina layar munggaran. Kuring éta pisan gumbira jeung guys anu tumut kana akun sagala kahayang desainer urang: contona, layar mimitina kudu teu kirang ti jangkungna viewport nu.
perenah adaptif - Ieu nalika panganteur henteu ngan diteundeun kaluar sahingga dina tilu resolusi sagalana piksel ka piksel dina perenah. Dina kaayaan panengah, perenah henteu kedah dirobih ogé. Sababaraha poho pikeun ngawatesan lebar maksimum wadahna tur nyetel sagalana pikeun 1920 piksel, sababaraha messed up backgrounds, tapi sakabéh calon coped kalawan tugas ieu ogé.
Tata semantis. "Sabaraha kali aranjeunna ngawartoskeun dunya" nu link kudu dirancang salaku , tombol - salaku . Untungna, lolobana calon minuhan sarat ieu ogé. Henteu sadayana terang daptar anu disumputkeun dina ekspektasi SRI, ngajantenkeun nganggo tag div, tapi éta henteu goréng. Aya calon anu nyelapkeun sadaya tag semantik anu anjeunna terang - mana anu diperyogikeun sareng dimana anu henteu diperyogikeun. Contona, tinimbang daptar a - jeung . Barina ogé, semantik - éta ngeunaan pamahaman komposisi kaca anjeun sarta tujuan unggal blok (seuseueurna junun dieu), kitu ogé pamakéan pre- jeung / atawa pos-processors (sababaraha junun dieu, sanajan ieu. éta ogé dina titik - paling sering aranjeunna dipaké kirang na scss) .
Geser ngagarap. Dina ngerjakeun kami wrote yén JS teu bisa dipaké. Di dieu kamampuan pikeun ngajawab masalah diuji - slaider tiasa dilakukeun nganggo kebat jeung . Kabéh magic lumangsung dina tingkat pamilih #button-N: dipariksa ~ .slider-inner .slider-slides. Lamun urang klik salah sahiji kotak centang input, eta mana kana kaayaan dipariksa. Urang tiasa ngamangpaatkeun ieu sareng napelkeun tarjamahan anu urang peryogikeun kana wadahna kalayan slides: transformasi: narjamahkeun (-33%). Anjeun tiasa ningali palaksanaan slaider .
Daptar dropdown. Di dieu eta sadayana ogé turun ka sarta pamilih sarupa: .accordion-item input: dipariksa ~ .accordion-item__content. Anjeun tiasa ningali palaksanaan .
Kasadiaan: hover,: aktip jeung: focu * kaayaan. Hiji titik pohara penting. Kanyamanan nalika interaksi sareng antarmuka gumantung kana éta. Pamaké kedah salawasna nampi tanggapan kana lampahna. Item ieu dipariksa sapanjang interaksi jeung kuesioner. Upami kuring ngaklik tombol "Telepon kuring" sareng sacara visual teu aya anu kajantenan (sanaos pamenta dikirim), ieu goréng, sabab kuring bakal ngaklik deui. Hasilna, sapuluh requests bakal dikirim jeung kuring bakal disebut deui sapuluh kali. Kami henteu kedah hilap yén alat sélulér henteu gaduh beurit, anu hartosna teu kedah aya hover. Jeung hiji deui titik nu teu mangaruhan jalma anu minuhan titik ngeunaan semantik. Upami kontrol anjeun sanés unsur interaktif, teras nalika anjeun hover, kursor bakal tetep standar. Sigana pisan teu rapih, sanajan anjeun geus nulis réaksi pikeun hover. Ulah underestimate kursor: pointer.
Animasi. Penting yén sadaya réaksi anu lumangsung sareng unsur-unsurna lancar. Henteu aya dina kahirupan anu sakedapan, janten gaduh transisi dina hover sareng aktip cekap ngajantenkeun antarmuka langkung pikaresepeun. Nya, jalma anu animasi slaider sareng daptar umumna saé.
Ngagunakeun téknologi panganyarna. Seueur jalma anu nganggo flex, tapi teu aya anu ngalengkepan tugasna nganggo grid. Titikna diitung upami flex dianggo leres. Upami di mana waé perenahna dipisahkeun kusabab flexes ieu, sayang, anjeun henteu nampi titik tambahan.
Validasi Bentuk. Sadaya anu diperyogikeun nyaéta nambihan atribut anu diperyogikeun pikeun unggal input formulir. Kami nambihan titik ka jalma anu nga-validasi widang email salaku email.
Styling tombol unggah file. Kami ngarepkeun ningali kombinasi sapertos: sareng Pilih file . Salajengna urang kedah nyumputkeun input sareng gaya labél. Aya deui cara umum - nyieun input transparan sarta nempatkeun eta dina luhureun tombol. Tapi teu kabeh panyungsi ngidinan styling , sareng solusi sapertos kitu henteu tiasa disebat sapinuhna cross-browser. Sareng sacara semantik langkung leres pikeun ngadamel labél.
Kasaluyuan cross-browser. Urang pariksa yen sagalana éta rupa dina dua versi panganyarna tina browser modern (tanpa IE - pamilon éta untung), kitu ogé dina Safari on iPhones jeung Chrome on Androids.
Sabalikna, urang ngirangan poin upami aya anu nganggo JS atanapi Bootstrap: duanana bakal ngelehkeun tujuan sadaya tugas. Leuwih ti éta, pamilon kalawan Bootstrap teu ngan narima dikurangan, tapi ogé leungit loba titik pikeun semantik jeung elemen dilaksanakeun.
Jalma anu hosted situs maranéhanana di mana waé dina Internet henteu nampi kauntungan tinangtu - tapi reviewers éta pisan senang lamun maranéhna teu kudu ngundeur repositories tur ngajalankeun eta sacara lokal dina komputer maranéhanana. Jadi ieu dilayanan salaku tambah pikeun karma.
Tugas kahiji mangpaat pisan utamana pikeun murid. Jalma anu kami henteu nampi ayeuna gaduh resume anu disusun - anjeun tiasa bangga ngagantelkeun kana sadaya réspon atanapi pasang dina halaman gh anjeun.
Pancén 2: Rute angkutan
Panulis tugas nyaéta kapala grup search interfaces Denis Balyko.
Kaayaan
Dupi anjeun gaduh peta béntang? Ieu nembongkeun nami unggal béntang, kitu ogé jarak ti dinya ka béntang séjén dina detik lampu. Nerapkeun fungsi solusi, anu kedah nyandak tilu alesan: hiji obyék anu koncina mangrupikeun nami béntang, sareng nilaina mangrupikeun jarak ka béntang (lalulintas saarah di angkasa), ogé nami titik awal jeung tungtung jalur - mimiti jeung rengse, masing-masing. fungsi kudu balik jarak shortest ti béntang mimiti ka béntang finish jeung jalur nuturkeun.
Tanda tangan fungsi:
const solution = function(graph, start, finish) { // Ваше решение }Conto input data:
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';conto kaluaran:
{ distance: 90, path: ['start', 'A', 'D', 'finish'] }Catetan: Rorongkong solusi aya dina folder src/, nempatkeun solusi anjeun dina solution.js.
Verifikasi tugas kadua mangrupikeun anu paling otomatis sareng obyektif. Kalolobaan guys ditebak yén éta téh perlu pikeun nerapkeun algoritma Dijkstra urang. Jalma anu mendakan pedaranana sareng ngalaksanakeun algoritma dina JS parantos dilakukeun. Nanging, nalika mariksa tugas, kami mendakan seueur makalah anu gaduh kasalahan anu sami. Urang searched Internet pikeun fragmen kode jeung kapanggih hiji artikel ti mana pamilon nyalin algoritma. Éta lucu yén seueur jalma anu nyalin kode tina tulisan sareng koméntar panulis. Karya sapertos nampi skor low. Kami henteu ngalarang ngagunakeun sumber naon waé, tapi kami hoyong jalma pikeun ngalenyepan naon anu ditulis.
Kritéria
Titik utama dileler pikeun tés. Kadang-kadang écés yén jalma-jalma éta ngaco sareng gudang, ngaganti nami polder, sareng tés bakal gagal ngan saukur kusabab henteu mendakan file anu diperyogikeun. Taun ieu kami nyobian ngabantosan jalma-jalma sapertos kitu sareng ngabalikeun sadayana ka tempatna pikeun aranjeunna. Tapi taun hareup urang rencanana pindah ka sistem kontes, sarta ieu moal deui dihampura.
Aya ogé "manusa", kriteria manual. Contona, ayana gaya kode tunggal. Teu aya anu ngirangan poin pikeun ngagunakeun tab tibatan spasi atanapi sabalikna. Éta masalah sanés upami anjeun ngagentos tanda petik tunggal sareng tanda petik ganda dumasar kana hiji aturan anu anjeun terang, sareng nempatkeun titik koma sacara acak.
Kajelasan sareng kabacaan solusi dipertimbangkeun sacara misah. Dina sagala konferensi di dunya maranéhna ngomong yén 80% tina pakasaban programmer urang diwangun ku maca kodeu jalma séjén. Malah barudak sakola ngalaman ulasan kode - ti kurator maranéhanana sarta ti silih. Jadi kriteria ieu mawa beurat signifikan. Aya karya anu henteu aya variabel anu langkung panjang ti hiji karakter - punten ulah ngalakukeun éta. Koméntar ti para pamilon ngadorong pisan - iwal ti anu idéntik sareng koméntar Stella Chang.
Kriteria anu terakhir nyaéta ayana autotes. Ngan ukur sababaraha jalma anu nambihanana, tapi pikeun sadayana éta janten tambah ageung dina karma na.
Solusi anu leres:
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);
};
};Pancén 3: Kalénder Kajadian
Éta disiapkeun ku pamekar panganteur Sergey Kazakov sareng Alexander Podskrebkin.
Kaayaan
Tulis kalénder mini pikeun mintonkeun jadwal anjeun. Anjeun tiasa nyandak jadwal naon waé anu anjeun pikahoyong. Salaku conto, jadwal konferensi frontend di 2019.
Kalénder kudu kasampak kawas daptar. Henteu aya sarat desain anu sanés. Ngamungkinkeun pikeun nyetél panginget acara 3, 7 sareng 14 dinten sateuacanna. Saatos undeuran munggaran tina Internét, kalénder kedah dibuka sareng fungsina offline.
sumberdaya mangpaat
Jadwal konferensi frontend:
Pagawe jasa:
API Bewara:
Tugas katilu éta paling metot pikeun nguji, sabab aya kitu loba solusi mungkin, unggal kalawan sorangan. Kami pariksa kumaha calon éta ngadamel téknologi anu teu biasa - naha anjeunna terang kumaha panalungtikan, naha anjeunna nguji solusi na.
Kritéria
Kalender dilipat. Sumuhun, éta masih perlu diteundeun kaluar. Aya ogé anu nganggap kaayaan éta sacara harfiah sareng henteu ngalebetkeun garis tunggal kode CSS. Teu kasampak pisan pikaresepeun, tapi lamun sagalana digawé, titik teu ngurangan.
Meunang daptar acara ti sumber. Ieu sanés tugas perenah, janten daptar acara anu kalebet dina éta henteu diitung. Anjeun salawasna tiasa ngabatalkeun konperénsi, ngajadwalkeun deui, atanapi nambihan anu énggal. Janten peryogi nampi data ti luar sareng ngadamel perenah dumasar kana JSON anu ditampi. Éta penting pikeun ménta data dina sagala cara (ngagunakeun metode dipulut atanapi nganggo XMLHttpRequest). Upami hiji jalma nambihan polyfill pikeun dipulut sareng ditandaan pilihanna dina readme, ieu diitung salaku tambah.
pendaptaran pagawe Service tanpa kasalahan sareng damel offline saatos undeuran munggaran. worker jasa kalawan jadwal cache on boot munggaran. Rincian ngeunaan pagawé jasa, kamampuan sareng cara damel sareng aranjeunna (strategi pikeun damel sareng cache, damel offline) tiasa dipendakan di dieu.
Kamampuhan pikeun nyetél pangingetsupados leres tiasa dianggo saatos 3, 7, 14 dinten. Perlu ngartos API Notifikasi, éta katuhu dina tugas. Kami henteu ngarepkeun palaksanaan khusus pikeun mariksa naha éta waktuna pikeun nyorong. Sakur pilihan gawé anu ditarima: neundeun di localStorage, IndexDB atawa polling periodik ku worker jasa. Ieu malah mungkin nyieun server push (di dieu ), tapi moal jalan offline. Ieu sarua penting pikeun nampa push sanggeus kaca ditutup - sarta dibuka sanggeus sababaraha waktu. Upami panginget maot dina waktos anu sami halaman ditutup, solusina henteu diitung. Éta saé nalika éta jalma-jalma mikir ngeunaan ulasan sareng ngamungkinkeun pikeun ngadorong ayeuna - supados henteu ngantosan 3 dinten.
Kamampuhan pikeun nempatkeun ikon dina desktop (PWA). Urang pariksa ayana file kalayan ikon anu leres. Sababaraha urang ngadamel file ieu (atanapi ngantepkeunana di CreateReactApp) - tapi henteu nambihan ikon anu leres. Teras, nalika nyobian masang, aya kasalahan sapertos "ikon anu béda diperyogikeun".
Codestyle jeung struktur proyék. Saperti dina tugas kadua, urang nempo hiji codestyle tunggal (sanajan teu coincide jeung urang). Sababaraha guys ngaco dina linters - éta hébat.
Kasalahan konsol. Upami aya indikator anu leres dina konsol yén aya anu salah, sareng pamilon henteu nengetan éta, maka kami ngirangan poin.
hasil
Naon lucu ngeunaan kaputusan pamilon:
- Hiji kuesioner ngandung téks di handap ieu: "Babaturan programmer ngabantosan abdi ngahijikeun aplikasi React. Kuring bombarded anjeunna patarosan ngeunaan kumaha jeung naha, sarta anjeunna ngawartoskeun kuring. Abdi resep pisan, abdi hoyong terang langkung seueur ngeunaan éta. ” Kami rooting pikeun aplikasi ieu kalayan sagala haté urang, tapi hanjakalna, sobat calon urang teu pisan mantuan sangkan aplikasi jalan.
- Hiji calon ngirimkeun tautan ka GitHub, dimana arsip RAR aya - sesah pikeun mairan ngeunaan ieu. 🙂
- Calon anu sanés, dina koméntar dina baris kahiji file solution.js, jujur ngaku yén anjeunna nyalin algoritma.
Kami nampi aplikasi ti 76 calon sareng milih 23 jalma. Kami dikirim questionnaires teu ukur ti Minsk, tapi ogé ti Moscow, St Petersburg komo Tatarstan. Sababaraha lalaki kaget urang ku profési ayeuna: salah sahijina nyaéta ahli forensik, sareng anu sanésna nyaéta mahasiswa médis.
Hasilna mangrupikeun distribusi anu pikaresepeun pikeun tingkat kasuksésan dina ngarengsekeun tugas. Pamilon ngaréngsékeun pancén kahiji rata-rata 60%, nu kadua 50%, jeung nu katilu tétéla paling hese jeung réngsé rata-rata 40%.
Dina glance kahiji, tugas kasampak kompléks jeung waktu-consuming. Anu jadi sababna mah urang rek ngaburak-barik calon saloba-lobana. Salila pangajaran maranéhanana, siswa Nyanghareupan tugas real-hirup - nyieun obrolan, Yandex.Music pikeun barudak atawa Yandex.Weather pikeun jalma gumantung cuaca. Pikeun ieu anjeun peryogi dasar awal.
Abdi émut ningali tugas asup SRI dua taun ka pengker sareng mikir yén kuring moal pernah ngabéréskeunana. Hal utama dina momen ieu calik, taliti maca kaayaan sareng mimitian ngalakukeunana. Tétéla yén kaayaan ngandung ampir 80% solusi. Contona, dina kaayaan tugas katilu (paling hese), urang ditambahkeun Tumbu ka pagawe jasa jeung API Bewara on MDN. Siswa anu ngulik eusi tautan ngalengkepan éta tanpa kasusah.
Abdi hoyong pisan artikel ieu dibaca ku calon anu ngarencanakeun asup ka SRI di mangsa nu bakal datang, anu teu bisa asup ka Sakola Minsk, atawa anu mimiti ngalakukeun sagala tugas tés séjén. Sakumaha anjeun tiasa tingali, éta rada mungkin pikeun ngalakukeunana. Anjeun ngan kedah percanten ka diri anjeun sareng ngadangukeun sadaya tip ti pangarang.
sumber: www.habr.com