Sekolah pangembangan antarmuka: analisis tugas kanggo Minsk lan pesawat anyar ing Moskow

Dina iki enrollment anyar dibukak Sekolah Pengembangan Antarmuka Yandex ing Moscow. Tahap pertama latihan bakal ditindakake wiwit tanggal 7 September nganti 25 Oktober. Siswa saka kutha liyane bakal bisa melu ing jarak adoh utawa langsung - perusahaan bakal mbayar lelungan lan akomodasi ing asrama. Kapindho, uga tahap pungkasan, bakal nganti 3 Desember, mung bisa rampung kanthi pribadi.

Jenengku Yulia Seredich, kita nulis kirim iki bebarengan karo Sergei Kazakov. Kita loro pangembang antarmuka ing kantor Minsk Yandex lan lulusan SRI saka taun sadurunge.

Ing kesempatan mbukak registrasi ing Moskow, kita nerbitake analisis tugas pambuka kanggo Sekolah sadurunge - ing Minsk.

Yen sampeyan nglacak sejarah tugas SRI, saben taun kita nguji telung katrampilan penting kanggo programmer:

• Tata letak. Saben pangembang kudu bisa nggawe tata letak. Ora kelakon yen sampeyan duwe Pakdhe Seryozha sing ngrancang kanggo kabeh tim, lan sampeyan mung nulis skrip. Mulane, saben siswa kudu nuduhake carane dheweke ngerti carane ngetik.
• JavaScript. Yen masalah iki diwatesi kanggo tata letak, mula kita ora duwe Sekolah Pengembangan Antarmuka, nanging Sekolah Desainer Tata Letak. Antarmuka sing dirancang kanthi apik kudu diuripake maneh. Mulane, tansah ana tugas kanggo JS, nanging kadhangkala uga tugas kanggo algoritma - kita tresna banget.
• Pemecahan masalah bisa uga minangka skill paling penting saka pangembang. Nalika nggawe antarmuka, owah-owahan cepet banget. Iku kaya Lewis Carroll: "Sampeyan kudu mbukak minangka cepet sing bisa mung kanggo tetep ing panggonan sing padha, lan kanggo njaluk menyang panggonan liyane sampeyan kudu mbukak kaping pindho minangka cepet." Saben dina kita nemokake teknologi anyar - kita kudu nggatekake lan bisa ngerti. Mulane, ing tugas katelu, kita ngajokaken kanggo mangerteni teknologi sing pangembang anyar biasane ora menowo.

Ing analisis saben tugas, kita bakal ngandhani sampeyan ora mung babagan prosedur sing bener, nanging uga babagan kesalahan umum.

Tugas 1: Portofolio

Tugas pisanan digarap dening desainer Yandex.Collections Alexey Cherenkevich, sing ngerti carane nggawe tata letak, lan rekan layanan, pangembang antarmuka Sergey Samsonov.

Kahanan

Nggawe situs web portofolio: nyritakake babagan sampeyan, karya lan pangarepan saka Sekolah. Situs kasebut kudu cocog karo tata letak sing diusulake (pranala menyang tata letak: 1000px, 600px, 320px, spesifikasi). Kita mung kasengsem ing tata letak, mula aja nganggo JavaScript.

Nalika mriksa kita bakal nimbang:

• ukuran indentasi, bener werna, gaya font, ukuran font;
• tata semantik;
• ngarsane macem-macem negara unsur: nampilake tombol lan pranala nalika nglayang kursor, nyorot kolom input aktif, etc.;
• kompatibilitas lintas-browser (dites ing versi paling anyar saka browser populer).

Kauntungan bakal:

• nggunakake solusi CSS modern: flexbox, kothak, etc.;
• Tata letak adaptif;
• nggunakake pra- lan (utawa) pasca-prosesor, perakitan, minifikasi, optimalisasi kode output;
• Validasi formulir HTML, tombol upload file kanthi gaya.

Tugas kasebut cukup akeh, supaya sampeyan bisa ngliwati apa sing ora bakal bisa ditindakake. Iki bakal ngedhunake skor sampeyan, nanging sampeyan isih bisa nduduhake kawruh sampeyan. Yen wis rampung, kirimake rong tautan - menyang portofolio lan kode sumber ing GitHub.

Tata letak sing diusulake ing tugas kasebut ora mung karo layar kanggo piranti seluler, tablet lan desktop, nanging uga kanthi spesifikasi nyata.

Supaya bisa nggawa obyektivitas sabisa menyang asil mriksa tugas pisanan, ana akeh kritéria kanggo mriksa iki.

Kritéria

Situs web sing dirancang. Iki ketoke ketok, nanging sawetara wong nglewati sawetara pamblokiran tanggung - salah siji padha pengin ngirit wektu, utawa padha ora bisa nindakake. Tata letak bisa kira-kira dipérang dadi papat layar utama: layar utama kanthi avatar, blok kanthi dhaptar pangarepan saka SRI, blok kanthi portofolio lan blok kanthi informasi kontak. Bisa digawe ing bagean utawa mung nggunakake div, sing utama yaiku kabeh pamblokiran kasedhiya.

Selaras karo tata letak. Desainer nggawe spesifikasi sing kapisah (kalebu warna, tipografi, negara tombol, lsp.) kanggo nggampangake para calon. Ing sisih ngisor ana tandha ing indents lan fitur saka layar pisanan. Aku seneng banget karo wong lanang sing njupuk kabeh kepinginan desainer: contone, layar pisanan kudu ora kurang saka dhuwur viewport.

Tata letak adaptif - iki nalika antarmuka ora mung glethakaken metu supaya ing telung résolusi kabeh piksel kanggo piksel ing tata letak. Ing negara penengah, tata letak ngirim uga ora ambruk. Sawetara kelalen kanggo matesi jembaré maksimum wadhah lan nyetel kabeh kanggo 1920 piksel, sawetara ngaco latar mburi, nanging sakabèhé calon coped karo tugas iki uga.

Tata letak semantik. "Kaping pirang-pirang padha marang donya" sing link kudu dirancang minangka , tombol - minangka . Untunge, umume calon uga ngrampungake syarat kasebut. Ora saben wong ngenali dhaptar sing didhelikake ing pangarepan SRI, nggawe nggunakake tag div, nanging ora dadi ala. Ana calon sing nglebokake kabeh tag semantik sing dheweke ngerti - ing ngendi perlu lan ora perlu. Contone, tinimbang dhaftar - lan . Sawise kabeh, semantik - babagan mangerteni komposisi kaca sampeyan lan tujuan saben blok (mayoritas ngatur ing kene), uga nggunakake pra- lan / utawa prosesor pasca (sawetara sing ngatur ing kene, sanajan iki uga ana ing titik - paling asring digunakake kurang lan scss).

Panggeser kerja. Ing assignment kita wrote sing JS ora bisa digunakake. Ing kene kemampuan kanggo ngatasi masalah dites - panggeser bisa digawe kanthi nggunakake akeh lan . Kabeh keajaiban kedadeyan ing level pamilih #tombol-N:dicenthang ~ .slider-inner .slider-slides. Nalika kita ngeklik salah siji saka kothak input, dadi menyang negara dicenthang. Kita bisa njupuk kauntungan saka iki lan nemtokake terjemahan sing dibutuhake kanggo wadhah kanthi slide: transform: translate(-33%). Sampeyan bisa ndeleng implementasine saka slider kene.

Dhaptar gulung mudhun. Kene iku kabeh uga teka mudhun kanggo lan pamilih padha: .accordion-item input: dicenthang ~ .accordion-item__content. Sampeyan bisa ndeleng implementasine kene.

Kasedhiyan: hover,:active lan:focu* states. Titik penting banget. Comfort sak interaksi karo antarmuka gumantung ing. Pangguna kudu tansah nampa umpan balik babagan tumindake. Item iki dicenthang sajrone interaksi karo kuesioner. Yen aku ngeklik tombol "Telpon kula" lan ora ana sing katon (sanajan panjaluk kasebut dikirim), iki ora becik, amarga aku bakal ngeklik maneh lan maneh. Akibaté, sepuluh panjalukan bakal dikirim lan aku bakal ditelpon maneh kaping sepuluh. Kita ora kudu lali yen piranti seluler ora duwe mouse, tegese ora ana hover. Lan siji titik liyane sing ora mengaruhi wong-wong sing kapenuhan titik bab semantik. Yen kontrol sampeyan dudu unsur interaktif, banjur nalika sampeyan nglayang, kursor bakal tetep standar. Katon banget ora rapi, sanajan sampeyan wis nulis reaksi kanggo hover. Aja ngremehake kursor: pointer.

Animasi. Penting kabeh reaksi sing kedadeyan karo unsur kasebut lancar. Ora ana apa-apa ing urip sing cepet, mula transisi ing hover lan aktif cukup kanggo nggawe antarmuka luwih nyenengake. Ya, sing nggawe animasi slider lan dhaptar umume apik.

Nggunakake teknologi paling anyar. Akeh wong nggunakake flex, nanging ora ana sing ngrampungake tugas nggunakake kothak. Titik kasebut diitung yen lentur digunakake kanthi bener. Yen nang endi wae tata letak teka loro amarga iki banget flexes, sayangé, sampeyan ora nampa TCTerms tambahan.

Validasi Formulir. Kabeh sing dibutuhake yaiku nambah atribut sing dibutuhake kanggo saben input saka formulir kasebut. Kita nambahake poin kanggo wong sing ngevalidasi lapangan email minangka email.

Nggawe gaya tombol upload file. Kita ngarepake bisa ndeleng kombinasi kaya: lan Pilih file . Sabanjure kita kudu ndhelikake input lan gaya label. Ana cara umum liyane - kanggo nggawe input transparan lan sijine ing ndhuwur tombol. Nanging ora kabeh browser ngidini gaya , lan solusi kasebut ora bisa diarani kanthi cross-browser. Lan kanthi semantik luwih bener kanggo nggawe label.

Kompatibilitas lintas-browser. Kita mriksa manawa kabeh wis apik ing rong versi browser modern (tanpa IE - peserta begja), uga ing Safari ing iPhone lan Chrome ing Android.

Kosok baline, kita nyuda poin yen ana sing nggunakake JS utawa Bootstrap: loro-lorone bakal ngalahake tujuan kabeh tugas. Kajaba iku, peserta karo Bootstrap ora mung nampa minus, nanging uga ilang akeh poin kanggo semantik lan unsur sing diimplementasikake.

Wong-wong sing dadi tuan rumah situs kasebut ing endi wae ing Internet ora entuk kaluwihan tartamtu - nanging para panaliti seneng banget nalika ora kudu ndownload repositori lan mbukak sacara lokal ing komputer. Dadi iki dadi plus kanggo karma.

Tugas pisanan migunani banget utamane kanggo siswa. Wong-wong sing ora ditampa saiki duwe resume sing disiapake - sampeyan bisa kanthi bangga nempelake kabeh tanggapan utawa ngirim ing kaca gh sampeyan.

Tugas 2: Rute transportasi

Penulis tugas kasebut minangka kepala klompok antarmuka telusuran Denis Balyko.

Kahanan

Apa sampeyan duwe peta lintang? Iki nuduhake jeneng saben lintang, uga jarak saka lintang liyane ing detik cahya. Ngleksanakake fungsi solusi, kang kudu njupuk telung bantahan: obyek kang tombol iku jeneng lintang, lan nilai-nilai iku jarak kanggo lintang (lalu lintas siji-arah ing papan), uga jeneng saka titik wiwitan lan pungkasan dalan - wiwitan lan rampung, mungguh. Fungsi kasebut kudu ngasilake jarak paling cedhak saka lintang wiwitan nganti lintang rampung lan dalan sing kudu ditindakake.

Tanda tangan fungsi:

const solution = function(graph, start, finish)  {
    // Ваше решение
} 

Tuladha data 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'; 

Tuladha output:

{
    distance: 90,
    path: ['start', 'A', 'D', 'finish']
} 

Cathetan: Balung solusi ana ing folder src/, lebokake solusi sampeyan ing solution.js.

Verifikasi tugas kapindho minangka sing paling otomatis lan objektif. Umume wong lanang ngira yen perlu ngetrapake algoritma Dijkstra. Sing nemokake deskripsi lan ngetrapake algoritma ing JS wis rampung. Nanging, nalika mriksa tugas, kita nemoni akeh makalah kanthi kesalahan sing padha. Kita nggolèki Internet kanggo fragmen kode lan nemokake artikel saka peserta sing nyalin algoritma kasebut. Lucu banget yen akeh wong sing nyalin kode saka artikel bebarengan karo komentar penulis. Karya kasebut entuk skor sing kurang. Kita ora nglarang nggunakake sembarang sumber, nanging kita pengin wong kanggo delve menyang apa kang nyerat.

Kritéria

Titik utama dianugerahi kanggo tes. Kadhangkala cetha yen wong lanang padha ngubengi repositori, ngganti jeneng folder, lan tes bakal gagal mung amarga ora bisa nemokake file sing dibutuhake. Taun iki kita nyoba nulungi wong lanang kaya ngono lan bali kabeh menyang papan kanggo dheweke. Nanging taun sabanjuré kita rencana kanggo ngalih menyang sistem kontes, lan iki ora bakal diapura.

Ana uga "manungsa", kritéria manual. Contone, anane gaya kode siji. Ora ana sing nyuda poin kanggo nggunakake tab tinimbang spasi utawa kosok balene. Iku prakara liyane yen sampeyan sulih kuotasi siji karo kuotasi pindho miturut siji aturan dikenal kanggo sampeyan, lan panggonan titik koma kanthi acak.

Kejelasan lan keterbacaan solusi kasebut dianggep kanthi kapisah. Ing kabeh konferensi ing donya padha ngomong sing 80% saka proyek programmer kasusun saka maca kode wong liya. Malah bocah sekolah ngalami review kode - saka kurator lan saka saben liyane. Dadi kritéria iki nggawa bobot sing signifikan. Ana karya sing ora ana variabel luwih saka siji karakter - aja nglakoni. Komentar saka peserta banget nyemangati - kajaba sing padha karo komentar Stella Chang.

Kriteria pungkasan yaiku anané tes otomatis. Mung sawetara wong sing nambahake, nanging kanggo kabeh wong dadi tambah gedhe ing karma.

Solusi sing bener:

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);
    };
};

Tugas 3: Tanggalan Acara

Iki disiapake dening pangembang antarmuka Sergey Kazakov lan Alexander Podskrebkin.

Kahanan

Tulis tanggalan mini kanggo nampilake jadwal sampeyan. Sampeyan bisa njupuk jadwal sing disenengi. Contone, jadwal konferensi frontend ing 2019.

Tanggalan kudu katon kaya dhaptar. Ora ana syarat desain liyane. Nggawe pangeling acara 3, 7 lan 14 dina sadurunge. Sawise download pisanan saka Internet, tanggalan kudu mbukak lan bisa digunakake ing offline.

Sumber daya migunani

Jadwal konferensi ngarep:
confs.tech/javascript?topics=javascript%2Bcss%2Bux

Buruh layanan:
developer.mozilla.org/ru/docs/Web/API/Service_Worker_API/Using_Service_Workers
developers.google.com/web/fundamentals/primers/service-workers

API Notifikasi:
developer.mozilla.org/ru/docs/Web/API/Notifications_API

Tugas katelu minangka sing paling menarik kanggo dites, amarga ana akeh solusi sing bisa ditindakake, saben duwe dhewe. Kita mriksa carane calon nangani teknologi sing ora pati ngerti - apa dheweke ngerti carane riset, apa dheweke nyoba solusi.

Kritéria

Kalender lipat. Ya, isih kudu ditata. Ana uga sing njupuk kondisi kasebut kanthi harfiah lan ora nglebokake siji baris kode CSS. Iku ora katon banget atraktif, nanging yen kabeh bisa, TCTerms ora suda.

Njupuk dhaptar acara saka sumber. Iki dudu tugas tata letak, mula dhaptar acara sing kalebu ing kono ora diitung. Sampeyan bisa tansah mbatalake konferensi, jadwal maneh, utawa nambah sing anyar. Dadi kudu nampa data saka njaba lan nggawe tata letak adhedhasar JSON sing ditampa. Penting kanggo njupuk data kanthi cara apa wae (nggunakake metode njupuk utawa nggunakake XMLHttpRequest). Yen wong nambahake polyfill kanggo njupuk lan menehi tandha pilihan ing readme, iki dianggep minangka plus.

Registrasi buruh layanan tanpa kesalahan lan bisa offline sawise download pisanan. Mangkene conto pekerja layanan kanthi caching jadwal nalika boot pisanan. Rincian babagan buruh layanan, kemampuan lan cara kerjane (strategi kanggo nggarap cache, nggarap offline) bisa ditemokake ing kene.

Kemampuan kanggo nyetel pangelingsupaya bisa bener sawise 3, 7, 14 dina. Sampeyan kudu ngerti API Notifikasi, link menyang kang wis bener ing tugas. Kita ora ngarep-arep implementasine khusus kanggo mriksa apa wektu kanggo push. Opsi kerja apa wae ditampa: panyimpenan ing localStorage, IndexDB utawa polling periodik dening pekerja layanan. Malah bisa nggawe server push (kene conto), nanging ora bisa digunakake ing offline. Sampeyan uga penting kanggo nampa push sawise kaca ditutup - lan dibukak sawise sawetara wektu. Yen pangeling mati ing wektu sing padha kaca ditutup, solusi kasebut ora diitung. Apik banget nalika wong lanang mikir babagan para panaliti lan nggawe push saiki - supaya ora ngenteni 3 dina.

Kemampuan kanggo nyelehake lambang ing desktop (PWA). Kita mriksa anané file kasebut manifest.json kanthi lambang sing bener. Sawetara wong lanang nggawe file iki (utawa ditinggalake ing CreateReactApp) - nanging ora nambah lambang sing bener. Banjur, nalika nyoba nginstal, ana kesalahan kaya "lambang sing beda dibutuhake".

Codestyle lan struktur proyek. Kaya ing tugas kapindho, kita ndeleng gaya kode siji (sanajan ora cocog karo kita). Sawetara wong ngaco ing linters - sing apik.

Kesalahan konsol. Yen ana indikator sing bener ing konsol yen ana sing salah, lan peserta ora nggatekake, mula kita nyuda poin.

Hasil

Apa sing lucu babagan keputusan peserta:

• Siji kuesioner ngemot teks ing ngisor iki: "Kanca programer nulungi aku nggawe aplikasi React. Aku bombarded wong karo pitakonan bab carane lan apa, lan marang kula. Aku seneng banget, aku pengin ngerti luwih akeh babagan iki. Kita padha rooting kanggo aplikasi iki karo kabeh ati, nanging sayangé, kanca calon iku ora banget mbiyantu kanggo nggawe aplikasi bisa.
• Siji calon ngirim link menyang GitHub, ing ngendi arsip RAR ana - angel menehi komentar babagan iki. 🙂
• Calon liyane, ing komentar ing baris pisanan saka file solution.js, kanthi jujur ​​ngakoni yen dheweke nyalin algoritma kasebut.

Kita nampa aplikasi saka 76 calon lan milih 23 wong. Kita dikirim kuesioner ora mung saka Minsk, nanging uga saka Moskow, St. Petersburg lan malah Tatarstan. Sawetara wong lanang kaget karo profesi sing saiki: salah sijine ahli forensik, lan liyane minangka mahasiswa kedokteran.

Asil ana distribusi menarik saka tingkat sukses ing ngrampungake tugas. Para peserta ngrampungake tugas kapisan kanthi rata-rata 60%, kaloro 50%, lan katelu dadi paling angel lan rampung kanthi rata-rata 40%.

Sepisanan, tugas katon rumit lan butuh wektu. Alasane ora amarga kita pengin ngilangi calon sing akeh. Sajrone sinau, para siswa ngadhepi tugas nyata - nggawe obrolan, Yandex.Music kanggo bocah-bocah utawa Yandex.Weather kanggo wong sing gumantung karo cuaca. Kanggo iki sampeyan butuh basis wiwitan.

Aku kelingan ndeleng tugas mlebu SRI rong taun kepungkur lan mikir yen aku ora bakal ngrampungake. Wangsulan: Bab ingkang utama ing wektu iki kanggo njagong mudhun, kasebut kanthi teliti maca kahanan lan miwiti nindakake. Pranyata kahanan kasebut ngemot meh 80% solusi. Contone, ing kondisi tugas katelu (paling angel), kita nambahake pranala menyang layanan buruh lan Notifikasi API ing MDN. Siswa sing sinau isi pranala rampung tanpa kangelan.

Aku pancene pengin artikel iki diwaca dening calon sing arep mlebu SRI ing mangsa ngarep, sing ora bisa mlebu ing Minsk School, utawa sing miwiti kanggo nindakake tugas test liyane. Nalika sampeyan bisa ndeleng, iku cukup bisa kanggo nindakake. Sampeyan mung kudu pracaya ing dhewe lan ngrungokake kabeh tips saka penulis.

Source: www.habr.com