Sekolah pembangunan antara muka: analisis tugas untuk Minsk dan set baru di Moscow

Hari ini pendaftaran baharu dibuka Sekolah Pembangunan Antaramuka Yandex di Moscow. Latihan peringkat pertama akan berlangsung dari 7 September hingga 25 Oktober. Pelajar dari bandar lain akan dapat menyertainya dari jauh atau secara peribadi - syarikat akan membayar perjalanan dan penginapan di asrama. Peringkat kedua, juga peringkat akhir, akan berlangsung sehingga 3 Disember, ia hanya boleh disiapkan secara peribadi.

Nama saya Yulia Seredich, kami menulis siaran ini bersama-sama dengan Sergei Kazakov. Kami berdua adalah pembangun antara muka di pejabat Minsk Yandex dan graduan SRI dari tahun-tahun sebelumnya.

Pada kesempatan pembukaan pendaftaran di Moscow, kami menerbitkan analisis tugas pengenalan kepada Sekolah sebelumnya - di sini di Minsk.

Jika anda mengesan sejarah tugasan SRI, dari tahun ke tahun kami menguji tiga kemahiran penting untuk seorang pengaturcara:

• Susun atur. Setiap pembangun sepatutnya boleh membuat susun atur. Ia tidak berlaku bahawa anda mempunyai Uncle Seryozha yang mereka bentuk untuk seluruh pasukan, dan anda hanya menulis skrip. Oleh itu, setiap pelajar mesti menunjukkan bagaimana dia tahu cara menaip.
• JavaScript. Jika perkara itu terhad kepada reka letak, maka kami tidak akan mempunyai Sekolah Pembangunan Antara Muka, tetapi Sekolah Pereka Reka Letak. Antara muka yang direka dengan cantik perlu dihidupkan semula. Oleh itu, sentiasa ada tugas untuk JS, tetapi kadangkala ia juga merupakan tugas untuk algoritma - kami sangat menyukainya.
• Penyelesaian masalah mungkin merupakan kemahiran paling penting bagi pembangun. Apabila ia datang untuk mencipta antara muka, perkara berubah dengan cepat. Ia seperti Lewis Carroll: "Anda perlu berlari sepantas yang anda boleh hanya untuk kekal di tempat yang sama, dan untuk sampai ke tempat lain anda perlu berlari dua kali lebih pantas." Setiap hari kita menemui teknologi baharu - kita perlu mengambil kira dan dapat memahaminya. Oleh itu, dalam tugasan ketiga, kami mencadangkan untuk memahami teknologi yang biasanya tidak diketahui oleh pembangun pemula.

Dalam analisis setiap tugas, kami akan memberitahu anda bukan sahaja tentang prosedur yang betul, tetapi juga tentang kesilapan biasa.

Tugasan 1: Portfolio

Tugas pertama telah diusahakan oleh pereka Yandex.Collections Alexey Cherenkevich, yang tahu cara membuat susun atur, dan rakan sekerja perkhidmatannya, pemaju antara muka Sergey Samsonov.

Keadaan

Cipta tapak web portfolio: beritahu kami tentang diri anda, kerja anda dan jangkaan anda daripada Sekolah. Tapak hendaklah sepadan sebanyak mungkin dengan reka letak yang dicadangkan (pautan ke reka letak: 1000px, 600px, 320px, spesifikasi). Kami hanya berminat dengan reka letak, jadi sila jangan gunakan JavaScript.

Apabila menyemak kami akan mengambil kira:

• saiz lekukan, ketepatan warna, gaya fon, saiz fon;
• susun atur semantik;
• kehadiran keadaan elemen yang berbeza: memaparkan butang dan pautan apabila melayang kursor, menyerlahkan medan input aktif, dsb.;
• keserasian silang pelayar (diuji dalam versi terkini pelayar popular).

Kelebihannya ialah:

• penggunaan penyelesaian CSS moden: flexbox, grid, dsb.;
• Susun atur penyesuaian;
• penggunaan pra dan (atau) pemproses pasca, pemasangan, pengurangan, pengoptimuman kod output;
• Pengesahan borang HTML, butang muat naik fail bergaya.

Tugas ini agak besar, jadi anda boleh melangkau apa yang tidak akan berfungsi. Ini akan menurunkan sedikit skor anda, tetapi anda masih dapat menunjukkan pengetahuan anda. Apabila anda selesai, hantarkan kepada kami dua pautan - ke portfolio anda dan kod sumber di GitHub.

Reka letak yang dicadangkan dalam tugasan bukan sahaja dengan skrin untuk peranti mudah alih, tablet dan desktop, tetapi juga dengan spesifikasi sebenar.

Untuk membawa objektiviti sebanyak mungkin ke dalam hasil penyemakan tugasan pertama, terdapat banyak kriteria untuk semakan ini.

kriteria

Laman web yang direka. Ini nampak jelas, tetapi sesetengah lelaki melangkau beberapa blok sepenuhnya - sama ada mereka mahu menjimatkan masa, atau mereka tidak dapat melakukannya. Reka letak boleh dibahagikan secara kasar kepada empat skrin utama: skrin utama dengan avatar, blok dengan senarai jangkaan daripada SRI, blok dengan portfolio dan blok dengan maklumat hubungan. Mereka boleh dibuat dalam bahagian atau hanya menggunakan div, perkara utama ialah keempat-empat blok itu tersedia.

Pematuhan susun atur dengan susun atur. Pereka bentuk membuat spesifikasi berasingan (termasuk warna, tipografi, keadaan butang, dll.) untuk memudahkan calon. Di bahagian bawah terdapat pembayang pada inden dan ciri skrin pertama. Saya sangat gembira dengan lelaki yang mengambil kira semua kehendak pereka: sebagai contoh, skrin pertama sepatutnya tidak kurang daripada ketinggian tempat pandang.

Susun atur penyesuaian - ini adalah apabila antara muka tidak hanya dibentangkan supaya pada tiga resolusi semuanya adalah piksel ke piksel dalam susun atur. Dalam keadaan pertengahan, susun atur tidak sepatutnya runtuh sama ada. Ada yang terlupa untuk mengehadkan lebar maksimum bekas dan menetapkan segala-galanya kepada 1920 piksel, ada yang mengacaukan latar belakang, tetapi secara keseluruhan calon mengatasi tugas ini dengan baik.

Susun atur semantik. "Berapa kali mereka memberitahu dunia" bahawa pautan itu harus direka bentuk sebagai , butang – sebagai . Nasib baik, kebanyakan calon memenuhi syarat ini juga. Tidak semua orang mengenali senarai tersembunyi dalam jangkaan SRI, menjadikannya menggunakan tag div, tetapi ia tidak begitu buruk. Terdapat seorang calon yang memasukkan semua tag semantik yang dia tahu - di mana ia perlu dan di mana ia tidak perlu. Sebagai contoh, bukannya senarai - dan . Lagipun, semantik - ini tentang memahami komposisi halaman anda dan tujuan setiap blok (majoriti menguruskannya di sini), serta penggunaan pra dan / atau pemproses pasca (beberapa menguruskannya di sini, walaupun ini juga dalam mata - selalunya mereka menggunakan kurang dan scss) .

Gelangsar yang berfungsi. Dalam tugasan kami menulis bahawa JS tidak boleh digunakan. Di sini keupayaan untuk menyelesaikan masalah telah diuji - gelangsar boleh dibuat menggunakan sekumpulan Dan . Semua keajaiban berlaku pada peringkat pemilih #button-N:checked ~ .slider-inner .slider-slider. Apabila kita mengklik pada salah satu kotak semak input, ia masuk ke dalam keadaan diperiksa. Kami boleh memanfaatkan ini dan menetapkan terjemahan yang kami perlukan kepada bekas dengan slaid: transform: translate(-33%). Anda boleh melihat pelaksanaan peluncur di sini.

Senarai jatuh turun. Di sini semuanya juga datang ke dan pemilih serupa: .accordion-item input:checked ~ .accordion-item__content. Anda boleh melihat pelaksanaannya di sini.

Ketersediaan keadaan :hover, :active dan :focu*. Satu perkara yang sangat penting. Keselesaan semasa interaksi dengan antara muka bergantung padanya. Pengguna harus sentiasa menerima maklum balas tentang tindakan mereka. Item ini telah disemak sepanjang interaksi dengan soal selidik. Jika saya mengklik butang "Panggil saya" dan secara visual tiada apa yang berlaku (walaupun permintaan telah dihantar), ini adalah buruk, kerana kemudian saya akan mengkliknya lagi dan lagi. Akibatnya, sepuluh permintaan akan dihantar dan saya akan dipanggil semula sepuluh kali. Kita tidak boleh lupa bahawa peranti mudah alih tidak mempunyai tetikus, yang bermaksud tidak perlu ada hover. Dan satu lagi perkara yang tidak menjejaskan mereka yang memenuhi perkara tentang semantik. Jika kawalan anda bukan elemen interaktif, maka apabila anda menuding di atasnya, kursor akan kekal standard. Ia kelihatan sangat tidak kemas, walaupun anda telah menulis reaksi untuk menuding. Jangan memandang rendah kursor: penunjuk.

Animasi. Adalah penting bahawa semua tindak balas yang berlaku dengan unsur-unsur adalah lancar. Tiada apa-apa dalam kehidupan yang serta-merta, jadi mempunyai peralihan pada tuding dan aktif sudah cukup untuk menjadikan antara muka lebih menyenangkan. Nah, mereka yang menganimasikan peluncur dan senarai umumnya hebat.

Menggunakan teknologi terkini. Ramai orang menggunakan flex, tetapi tiada siapa yang menyelesaikan tugas menggunakan grid. Titik dikira jika flex digunakan dengan betul. Jika susun atur di suatu tempat terpecah kerana kelenturan ini, malangnya, anda tidak menerima sebarang mata tambahan.

Pengesahan Borang. Apa yang diperlukan ialah menambah atribut yang diperlukan pada setiap input borang. Kami menambah mata kepada mereka yang mengesahkan medan e-mel sebagai e-mel.

Menggayakan butang muat naik fail. Kami menjangkakan untuk melihat gabungan seperti: dan Pilih fail . Seterusnya kami perlu menyembunyikan input dan menggayakan label. Terdapat satu lagi cara biasa - untuk membuat input telus dan meletakkannya di atas butang. Tetapi tidak semua pelayar membenarkan penggayaan , dan penyelesaian sedemikian tidak boleh dipanggil penyemak imbas silang sepenuhnya. Dan secara semantik lebih betul untuk membuat label.

Keserasian merentas pelayar. Kami menyemak sama ada semuanya baik-baik saja dalam dua versi terkini penyemak imbas moden (tanpa IE - peserta bernasib baik), serta dalam Safari pada iPhone dan Chrome pada Android.

Sebaliknya, kami menolak mata jika seseorang menggunakan JS atau Bootstrap: kedua-duanya akan mengalahkan tujuan keseluruhan tugasan. Selain itu, peserta dengan Bootstrap bukan sahaja menerima tolak, tetapi juga kehilangan banyak mata untuk semantik dan elemen yang dilaksanakan.

Mereka yang mengehoskan tapak mereka di suatu tempat di Internet tidak menerima apa-apa kelebihan tertentu - tetapi penyemak sangat gembira apabila mereka tidak perlu memuat turun repositori dan menjalankannya secara tempatan pada komputer mereka. Jadi ini berfungsi sebagai tambahan untuk karma.

Tugasan pertama sangat berguna terutamanya untuk pelajar. Mereka yang tidak kami terima kini mempunyai resume yang disediakan - anda dengan bangganya boleh melampirkannya pada semua respons atau menyiarkannya di halaman gh anda.

Tugasan 2: Laluan pengangkutan

Pengarang tugas itu ialah ketua kumpulan antara muka carian Denis Balyko.

Keadaan

Adakah anda mempunyai peta bintang? Ia menunjukkan nama setiap bintang, serta jarak daripadanya ke bintang lain dalam saat cahaya. Laksanakan fungsi penyelesaian, yang sepatutnya mengambil tiga hujah: objek yang kuncinya ialah nama bintang, dan nilainya ialah jarak ke bintang (trafik sehala di angkasa), serta nama titik permulaan dan penamat laluan - masing-masing mula dan tamat. Fungsi harus mengembalikan jarak terpendek dari bintang mula ke bintang penamat dan laluan untuk diikuti.

Tandatangan fungsi:

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

Contoh 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'; 

Contoh output:

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

Nota: Rangka penyelesaian berada dalam folder src/, letakkan penyelesaian anda dalam solution.js.

Pengesahan tugas kedua adalah yang paling automatik dan objektif. Kebanyakan lelaki meneka bahawa ia adalah perlu untuk melaksanakan algoritma Dijkstra. Mereka yang menemui penerangannya dan melaksanakan algoritma dalam JS telah dilakukan dengan baik. Namun, semasa menyemak tugasan, kami terjumpa banyak kertas dengan ralat yang sama. Kami mencari serpihan kod di Internet dan menemui artikel yang peserta menyalin algoritma. Kelakarnya ramai yang menyalin kod dari artikel tersebut bersama-sama komen penulis. Kerja-kerja sedemikian mendapat markah yang rendah. Kami tidak melarang penggunaan mana-mana sumber, tetapi kami mahu seseorang itu mendalami apa yang dia tulis.

kriteria

Mata utama telah diberikan untuk ujian. Kadang-kadang jelas bahawa lelaki itu bermain-main dengan repositori, menamakan semula folder, dan ujian akan gagal hanya kerana mereka tidak dapat mencari fail yang diperlukan. Tahun ini kami cuba membantu lelaki seperti itu dan mengembalikan segala-galanya ke tempatnya untuk mereka. Tetapi tahun depan kami merancang untuk beralih kepada sistem peraduan, dan ini tidak akan dimaafkan lagi.

Terdapat juga kriteria manual "manusia". Sebagai contoh, kehadiran gaya kod tunggal. Tiada siapa yang memotong mata kerana menggunakan tab dan bukannya ruang atau sebaliknya. Perkara lain jika anda menggantikan petikan tunggal dengan petikan berganda mengikut satu peraturan yang anda ketahui dan meletakkan koma bertitik secara rawak.

Kejelasan dan kebolehbacaan penyelesaian diambil kira secara berasingan. Di semua persidangan di dunia mereka mengatakan bahawa 80% daripada tugas pengaturcara terdiri daripada membaca kod orang lain. Malah pelajar sekolah menjalani semakan kod - daripada kurator mereka dan dari satu sama lain. Jadi kriteria ini membawa berat yang ketara. Terdapat kerja yang tidak ada pembolehubah lebih panjang daripada satu aksara - tolong jangan lakukan itu. Komen daripada para peserta sangat menggalakkan - kecuali komen yang sama dengan komen Stella Chang.

Kriteria terakhir ialah kehadiran autotest. Hanya beberapa orang yang menambahnya, tetapi untuk semua orang ia menjadi tambahan besar dalam karma mereka.

Penyelesaian yang betul:

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

Tugasan 3: Kalendar Acara

Ia telah disediakan oleh pemaju antara muka Sergey Kazakov dan Alexander Podskrebkin.

Keadaan

Tulis kalendar mini untuk memaparkan jadual anda. Anda boleh mengambil apa-apa jadual yang anda suka. Sebagai contoh, jadual persidangan bahagian hadapan pada 2019.

Kalendar sepatutnya kelihatan seperti senarai. Tiada keperluan reka bentuk lain. Jadikan kemungkinan untuk menetapkan peringatan acara 3, 7 dan 14 hari lebih awal. Selepas muat turun pertama dari Internet, kalendar harus dibuka dan berfungsi di luar talian.

Sumber Berguna

Jadual persidangan hadapan:
confs.tech/javascript?topics=javascript%2Bcss%2Bux

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

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

Tugas ketiga adalah yang paling menarik untuk diuji, kerana terdapat begitu banyak penyelesaian yang mungkin, masing-masing dengan penyelesaiannya sendiri. Kami menyemak cara calon mengendalikan teknologi yang tidak dikenali - sama ada dia tahu cara menyelidik, sama ada dia menguji penyelesaiannya.

kriteria

Kalendar berlipat. Ya, ia masih perlu dibentangkan. Terdapat juga mereka yang mengambil syarat terlalu literal dan tidak memasukkan satu baris kod CSS. Ia tidak kelihatan sangat menarik, tetapi jika semuanya berfungsi, mata tidak berkurangan.

Mendapatkan senarai acara daripada sumber. Ini bukan tugas susun atur, jadi senarai acara yang disertakan di dalamnya tidak dikira. Anda sentiasa boleh membatalkan persidangan, menjadualkannya semula atau menambah persidangan baharu. Oleh itu, adalah perlu untuk menerima data dari luar dan membuat susun atur berdasarkan JSON yang diterima. Adalah penting untuk mendapatkan data dalam apa jua cara (menggunakan kaedah pengambilan atau menggunakan XMLHttpRequest). Jika seseorang menambah poliisi untuk pengambilan dan menandakan pilihannya dalam readme, ini dikira sebagai tambah.

Pendaftaran pekerja perkhidmatan tanpa kesilapan dan bekerja di luar talian selepas muat turun pertama. Berikut adalah contoh pekerja perkhidmatan dengan caching jadual pada but pertama. Butiran tentang pekerja perkhidmatan, keupayaan mereka dan cara bekerja dengan mereka (strategi untuk bekerja dengan cache, bekerja di luar talian) boleh didapati di sini.

Keupayaan untuk menetapkan peringatansupaya ia benar-benar berfungsi selepas 3, 7, 14 hari. Ia adalah perlu untuk memahami API Pemberitahuan, pautan ke mana tepat pada tugas. Kami tidak menjangkakan sebarang pelaksanaan khusus untuk menyemak sama ada sudah tiba masanya untuk menolak. Sebarang pilihan kerja telah diterima: storan dalam localStorage, IndexDB atau tinjauan berkala oleh pekerja perkhidmatan. Malah mungkin untuk membuat pelayan tolak (di sini contoh), tetapi ia tidak akan berfungsi di luar talian. Sama pentingnya untuk menerima tolakan selepas halaman ditutup - dan dibuka selepas beberapa ketika. Jika peringatan mati pada masa yang sama halaman ditutup, penyelesaian tidak dikira. Sungguh menarik apabila mereka memikirkan tentang pengulas dan memungkinkan untuk mendapatkan dorongan sekarang - supaya tidak menunggu 3 hari.

Keupayaan untuk meletakkan ikon pada desktop (PWA). Kami menyemak kehadiran fail itu manifest.json dengan ikon yang betul. Sesetengah lelaki membuat fail ini (atau membiarkannya dijana dalam CreateReactApp) - tetapi tidak menambah ikon yang betul. Kemudian, apabila cuba memasang, ralat seperti "ikon berbeza diperlukan" berlaku.

Gaya kod dan struktur projek. Seperti dalam tugasan kedua, kami melihat gaya kod tunggal (walaupun ia tidak bertepatan dengan kami). Sesetengah lelaki meragam - itu bagus.

Ralat konsol. Sekiranya terdapat penunjuk tepat di konsol bahawa ada sesuatu yang salah, dan peserta tidak memberi perhatian kepadanya, maka kami menolak mata.

Keputusan

Apa yang lucu tentang keputusan peserta:

• Satu soal selidik mengandungi teks berikut: “Seorang rakan pengaturcara membantu saya menyusun aplikasi React. Saya membombardir dia dengan soalan tentang bagaimana dan mengapa, dan dia memberitahu saya. Saya sangat menyukainya, saya ingin mengetahui lebih lanjut mengenainya.” Kami berusaha keras untuk permohonan ini dengan sepenuh hati, tetapi malangnya, rakan calon tidak begitu membantu dalam membuat permohonan itu berfungsi.
• Seorang calon menghantar pautan ke GitHub, tempat arkib RAR terletak - sukar untuk mengulas mengenai perkara ini. 🙂
• Calon lain, dalam ulasan pada baris pertama fail solution.js, dengan jujur ​​mengakui bahawa dia menyalin algoritma.

Kami menerima permohonan daripada 76 calon dan memilih 23 orang. Kami telah dihantar soal selidik bukan sahaja dari Minsk, tetapi juga dari Moscow, St. Petersburg dan juga Tatarstan. Beberapa lelaki mengejutkan kami dengan profesion semasa mereka: seorang daripada mereka adalah pakar forensik, dan seorang lagi pelajar perubatan.

Hasilnya ialah taburan kadar kejayaan yang menarik dalam menyelesaikan tugasan. Para peserta menyelesaikan tugas pertama dengan purata 60%, yang kedua sebanyak 50%, dan yang ketiga ternyata paling sukar dan diselesaikan dengan purata 40%.

Pada pandangan pertama, tugas kelihatan rumit dan memakan masa. Alasannya bukan kerana kita mahu menyingkirkan seberapa ramai calon yang boleh. Semasa pengajian mereka, pelajar berhadapan dengan tugasan sebenar - membuat sembang, Yandex.Music untuk kanak-kanak atau Yandex.Weather untuk orang yang bergantung kepada cuaca. Untuk ini anda memerlukan asas permulaan.

Saya masih ingat melihat tugas masuk SRI saya dua tahun lalu dan berfikir bahawa saya tidak akan menyelesaikannya. Perkara utama pada masa ini ialah duduk, baca dengan teliti syarat dan mula melakukannya. Ternyata keadaan mengandungi hampir 80% penyelesaian. Sebagai contoh, dalam keadaan tugas ketiga (paling sukar), kami menambah pautan kepada pekerja perkhidmatan dan API Pemberitahuan pada MDN. Pelajar yang mempelajari kandungan pautan menyelesaikannya tanpa kesukaran.

Saya sangat ingin artikel ini dibaca oleh calon yang merancang untuk memasuki SRI pada masa hadapan, yang tidak dapat memasuki Sekolah Minsk, atau yang mula melakukan apa-apa tugas ujian lain. Seperti yang anda lihat, adalah agak mustahil untuk melakukannya. Anda hanya perlu percaya pada diri sendiri dan mendengar semua petua daripada penulis.

Sumber: www.habr.com