Hari ini pendaftaran baru dibuka di Moscow. Pelatihan tahap pertama akan berlangsung pada 7 September hingga 25 Oktober. Siswa dari kota lain akan dapat berpartisipasi dari jarak jauh atau secara langsung - perusahaan akan membayar biaya perjalanan dan akomodasi di asrama. Tahap kedua, juga tahap terakhir, akan berlangsung hingga 3 Desember, hanya bisa diselesaikan secara langsung.
Nama saya Yulia Seredich, kami menulis postingan ini bersama Sergei Kazakov. Kami berdua adalah pengembang antarmuka di kantor Minsk Yandex dan lulusan SRI dari tahun-tahun sebelumnya.
Pada kesempatan pembukaan pendaftaran di Moskow, kami menerbitkan analisis tugas pengantar ke Sekolah sebelumnya - di sini di Minsk.
Jika menelusuri sejarah penugasan SRI, dari tahun ke tahun kami menguji tiga keterampilan penting bagi seorang programmer:
- Tata Letak. Setiap pengembang harus bisa melakukan tata letak. Kebetulan Anda tidak memiliki Paman Seryozha yang mendesain untuk seluruh tim, dan Anda hanya menulis skrip. Oleh karena itu, setiap siswa harus menunjukkan bagaimana dia mengetahui cara mengeset.
- JavaScript. Jika hanya sebatas tata letak, maka kita tidak akan memiliki Sekolah Pengembangan Antarmuka, melainkan Sekolah Desainer Tata Letak. Antarmuka yang dirancang dengan indah perlu dihidupkan kembali. Oleh karena itu, selalu ada tugas untuk JS, tetapi terkadang ini juga merupakan tugas untuk algoritme - kami sangat menyukainya.
- Pemecahan masalah mungkin merupakan keterampilan paling penting dari seorang pengembang. Dalam hal pembuatan antarmuka, banyak hal berubah dengan sangat cepat. Ini seperti Lewis Carroll: "Anda harus berlari secepat mungkin agar tetap berada di tempat yang sama, dan untuk mencapai tempat lain Anda harus berlari dua kali lebih cepat." Setiap hari kita menemukan teknologi baru - kita perlu mempertimbangkannya dan dapat memahaminya. Oleh karena itu, pada tugas ketiga, kami mengusulkan untuk memahami teknologi yang biasanya tidak dipahami oleh pengembang pemula.
Dalam analisis setiap tugas, kami akan memberi tahu Anda tidak hanya tentang prosedur yang benar, tetapi juga tentang kesalahan umum.
Tugas 1: Portofolio
Tugas pertama dikerjakan oleh desainer Yandex.Collections Alexei Cherenkevich, yang tahu cara membuat tata letak, dan rekan layanannya, pengembang antarmuka Sergey Samsonov.
Kondisi
Buat situs web portofolio: ceritakan kepada kami tentang diri Anda, pekerjaan Anda, dan harapan Anda dari Sekolah. Situs harus sedapat mungkin sesuai dengan tata letak yang diusulkan (tautan ke tata letak: , , , ). Kami hanya tertarik pada tata letaknya, jadi mohon jangan gunakan JavaScript.
Saat memeriksa kami akan mempertimbangkan:
- ukuran lekukan, kebenaran warna, gaya font, ukuran font;
- tata letak semantik;
- adanya berbagai status elemen: menampilkan tombol dan tautan saat mengarahkan kursor, menyorot kolom input aktif, dll.;
- kompatibilitas lintas-browser (diuji pada versi terbaru browser populer).
Keuntungannya adalah:
- penggunaan solusi CSS modern: flexbox, grid, dll.;
- Tata letak adaptif;
- penggunaan pra dan (atau) pasca prosesor, perakitan, minifikasi, optimalisasi kode keluaran;
- Validasi formulir HTML, tombol unggah file bergaya.
Tugasnya cukup banyak, jadi Anda bisa melewatkan apa pun yang tidak berhasil. Ini akan sedikit menurunkan skor Anda, tetapi Anda masih bisa menunjukkan pengetahuan Anda. Setelah selesai, kirimkan kepada kami dua tautan - ke portofolio Anda dan kode sumber di GitHub.
Tata letak yang diusulkan dalam penugasan tidak hanya dengan layar untuk perangkat seluler, tablet, dan desktop, tetapi juga dengan spesifikasi sebenarnya.
Untuk memaksimalkan objektivitas hasil pemeriksaan tugas pertama, ada banyak kriteria dalam pemeriksaan ini.
kriteria
Situs web yang dirancang. Hal ini tampak jelas, namun beberapa orang melewatkan beberapa blok sepenuhnya - entah mereka ingin menghemat waktu, atau mereka tidak dapat melakukannya. Tata letaknya secara kasar dapat dibagi menjadi empat layar utama: layar utama dengan avatar, blok dengan daftar ekspektasi dari SRI, blok dengan portofolio, dan blok dengan informasi kontak. Mereka dapat dibuat dalam beberapa bagian atau hanya menggunakan div, yang utama adalah keempat blok tersedia.
Kesesuaian tata letak dengan tata letak. Perancang membuat spesifikasi tersendiri (termasuk warna, tipografi, status tombol, dll) untuk memudahkan kandidat. Di bagian bawah ada petunjuk tentang indentasi dan fitur layar pertama. Saya sangat senang dengan orang-orang yang memperhitungkan semua keinginan desainer: misalnya, layar pertama seharusnya tidak kurang dari ketinggian area pandang.
Tata letak adaptif - ini adalah saat antarmuka tidak hanya ditata sehingga pada tiga resolusi semuanya tata letak piksel ke piksel. Di negara bagian perantara, tata letaknya juga tidak boleh berantakan. Beberapa orang lupa membatasi lebar maksimum wadah dan mengatur semuanya menjadi 1920 piksel, beberapa mengacaukan latar belakang, tetapi secara umum para kandidat mengatasi tugas ini dengan baik.
Tata letak semantik. “Berapa kali mereka mengatakan kepada dunia” bahwa tautan harus dirancang sebagai , tombol – sebagai . Untungnya, sebagian besar kandidat juga memenuhi persyaratan ini. Tidak semua orang mengenali daftar tersembunyi dalam ekspektasi SRI, membuatnya menggunakan tag div, tapi itu tidak terlalu buruk. Ada seorang kandidat yang memasukkan semua tag semantik yang dia tahu - di mana perlu dan di mana tidak diperlukan. Misalnya, alih-alih daftar - dan . Bagaimanapun, semantik - ini tentang memahami komposisi halaman Anda dan tujuan setiap blok (mayoritas mengelolanya di sini), serta penggunaan pra dan / atau pasca-pemrosesan (beberapa mengelolanya di sini, meskipun ini juga dalam poin - paling sering mereka menggunakan less dan scss) .
Penggeser yang berfungsi. Dalam tugas kami menulis bahwa JS tidak dapat digunakan. Di sini kemampuan memecahkan masalah diuji - penggeser dapat dibuat menggunakan tandan dan . Semua keajaiban terjadi di tingkat pemilih #button-N:checked ~ .slider-inner .slider-slides. Ketika kita mengklik salah satu kotak centang masukan, itu masuk ke status tercentang. Kita dapat mengambil keuntungan dari ini dan menetapkan terjemahan yang kita perlukan ke wadah dengan slide: transform: Translate (-33%). Anda dapat melihat penerapan slider .
Daftar tarik-turun. Di sini semuanya juga terjadi dan pemilih serupa: .accordion-item input:checked ~ .accordion-item__content. Anda dapat melihat implementasinya .
Ketersediaan status :hover, :active dan :focu*. Poin yang sangat penting. Kenyamanan saat berinteraksi dengan antarmuka bergantung padanya. Pengguna harus selalu menerima umpan balik atas tindakan mereka. Item ini diperiksa selama interaksi dengan kuesioner. Jika saya mengklik tombol “Hubungi saya” dan secara visual tidak terjadi apa-apa (walaupun permintaan telah terkirim), ini buruk, karena saya akan mengkliknya lagi dan lagi. Hasilnya, sepuluh permintaan akan dikirim dan saya akan dipanggil kembali sepuluh kali. Kita tidak boleh lupa bahwa perangkat seluler tidak memiliki mouse, yang berarti tidak boleh ada hover. Dan satu poin lagi yang tidak mempengaruhi mereka yang memenuhi poin tentang semantik. Jika kontrol Anda bukan elemen interaktif, maka saat Anda mengarahkan kursor ke elemen tersebut, kursor akan tetap standar. Kelihatannya sangat tidak rapi, bahkan jika Anda telah menulis reaksi terhadap hover. Jangan meremehkan kursor: penunjuk.
Animasi. Penting agar semua reaksi yang terjadi dengan unsur-unsur tersebut lancar. Tidak ada sesuatu pun dalam hidup ini yang instan, jadi transisi saat mengarahkan kursor dan aktif sudah cukup untuk membuat antarmuka lebih menyenangkan. Ya, mereka yang menganimasikan penggeser dan daftar umumnya hebat.
Menggunakan teknologi terkini. Banyak orang menggunakan flex, tapi tidak ada yang menyelesaikan tugas menggunakan grid. Poinnya dihitung jika flex digunakan dengan benar. Jika suatu tempat tata letaknya berantakan karena kelenturan ini, sayangnya, Anda tidak menerima poin tambahan apa pun.
Validasi Formulir. Yang diperlukan hanyalah menambahkan atribut yang diperlukan ke setiap masukan formulir. Kami menambahkan poin kepada mereka yang memvalidasi bidang email sebagai email.
Menata tombol unggah file. Kami berharap melihat kombinasi seperti: dan Pilih file . Selanjutnya kita perlu menyembunyikan input dan menata labelnya. Ada cara umum lainnya - membuat input transparan dan meletakkannya di atas tombol. Namun tidak semua browser mengizinkan penataan gaya , dan solusi seperti itu tidak dapat disebut sepenuhnya lintas-browser. Dan secara semantik lebih tepat membuat label.
Kompatibilitas lintas browser. Kami memeriksa bahwa semuanya baik-baik saja di dua versi terbaru browser modern (tanpa IE - peserta beruntung), serta di Safari di iPhone dan Chrome di Android.
Sebaliknya, kami mengurangi poin jika seseorang menggunakan JS atau Bootstrap: keduanya akan menggagalkan tujuan keseluruhan tugas. Selain itu, peserta Bootstrap tidak hanya mendapat nilai minus, tetapi juga kehilangan banyak poin untuk elemen semantik dan implementasi.
Mereka yang menghosting situs mereka di suatu tempat di Internet tidak mendapatkan keuntungan khusus apa pun - tetapi pengulas sangat senang ketika mereka tidak perlu mengunduh repositori dan menjalankannya secara lokal di komputer mereka. Jadi ini menjadi nilai tambah untuk karma.
Tugas pertama sangat bermanfaat terutama bagi siswa. Mereka yang tidak kami terima sekarang telah menyiapkan resume - Anda dapat dengan bangga melampirkannya ke semua tanggapan atau mempostingnya di halaman gh Anda.
Tugas 2: Rute transportasi
Penulis tugas ini adalah kepala grup antarmuka pencarian Denis Balyko.
Kondisi
Apakah Anda memiliki peta bintang? Ini menunjukkan nama setiap bintang, serta jarak dari bintang tersebut ke bintang lain dalam hitungan detik cahaya. Implementasikan fungsi solusi, yang harus mengambil tiga argumen: objek yang kuncinya adalah nama bintang, dan nilainya adalah jarak ke bintang (lalu lintas satu arah di luar angkasa), serta nama bintang. titik awal dan akhir jalan - masing-masing awal dan akhir. Fungsi tersebut harus mengembalikan jarak terpendek dari bintang awal ke bintang akhir dan jalur yang harus diikuti.
Tanda tangan fungsi:
const solution = function(graph, start, finish) { // Ваше решение }Contoh masukan 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';Contoh keluaran:
{ distance: 90, path: ['start', 'A', 'D', 'finish'] }Catatan: Kerangka solusi ada di folder src/, letakkan solusi Anda di solution.js.
Verifikasi tugas kedua adalah yang paling otomatis dan obyektif. Kebanyakan orang menebak bahwa algoritma Dijkstra perlu diimplementasikan. Mereka yang menemukan deskripsinya dan mengimplementasikan algoritme di JS adalah orang yang hebat. Namun saat memeriksa tugas, kami menemukan banyak makalah dengan kesalahan yang sama. Kami mencari potongan kode di Internet dan menemukan artikel yang pesertanya menyalin algoritme tersebut. Lucunya banyak orang yang menyalin kode dari artikel beserta komentar penulisnya. Karya-karya seperti itu mendapat nilai rendah. Kami tidak melarang penggunaan sumber apapun, tapi kami ingin seseorang mendalami apa yang dia tulis.
kriteria
Poin utama diberikan untuk tes. Kadang-kadang terlihat jelas bahwa orang-orang tersebut mengutak-atik repositori, mengganti nama folder, dan pengujian akan gagal hanya karena mereka tidak dapat menemukan file yang diperlukan. Tahun ini kami mencoba membantu orang-orang seperti itu dan mengembalikan semuanya ke tempatnya. Namun tahun depan kami berencana untuk beralih ke sistem kontes, dan hal ini tidak dapat dimaafkan lagi.
Ada juga kriteria “manusia” yang manual. Misalnya saja dengan adanya gaya kode tunggal. Tidak ada yang mengurangi poin karena menggunakan tab, bukan spasi, atau sebaliknya. Lain halnya jika Anda mengganti tanda kutip tunggal dengan tanda kutip ganda sesuai dengan satu aturan yang Anda ketahui, dan menempatkan titik koma secara acak.
Kejelasan dan keterbacaan solusi diperhitungkan secara terpisah. Di semua konferensi di dunia mereka mengatakan bahwa 80% pekerjaan seorang programmer adalah membaca kode orang lain. Bahkan anak-anak sekolah menjalani tinjauan kode - dari kurator mereka dan dari satu sama lain. Jadi kriteria ini mempunyai bobot yang signifikan. Ada karya yang variabelnya tidak lebih dari satu karakter - tolong jangan lakukan itu. Komentar para peserta sangat menggembirakan - kecuali komentar yang identik dengan komentar Stella Chang.
Kriteria terakhir adalah adanya autotest. Hanya sedikit orang yang menambahkannya, tetapi bagi semua orang, ini menjadi nilai tambah yang besar dalam karma mereka.
Solusi yang benar:
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: Kalender Acara
Itu disiapkan oleh pengembang antarmuka Sergey Kazakov dan Alexander Podskrebkin.
Kondisi
Tulis kalender mini untuk menampilkan jadwal Anda. Anda dapat mengambil jadwal apa pun yang Anda suka. Misalnya saja jadwal konferensi frontend pada tahun 2019.
Kalender akan terlihat seperti daftar. Tidak ada persyaratan desain lainnya. Memungkinkan untuk menyetel pengingat acara 3, 7, dan 14 hari sebelumnya. Setelah pengunduhan pertama dari Internet, kalender akan terbuka dan berfungsi offline.
Sumber daya yang berguna
Jadwal konferensi frontend:
Pekerja layanan:
API Pemberitahuan:
Tugas ketiga adalah yang paling menarik untuk diuji, karena ada begitu banyak kemungkinan solusi, yang masing-masing memiliki solusinya sendiri. Kami memeriksa bagaimana kandidat menangani teknologi asing - apakah dia tahu cara melakukan penelitian, apakah dia menguji solusinya.
kriteria
Kalender dilipat. Ya, itu masih perlu ditata. Ada juga yang menganggap kondisi tersebut terlalu harafiah dan tidak menyisipkan satu baris kode CSS pun. Kelihatannya tidak terlalu menarik, tetapi jika semuanya berfungsi, poinnya tidak berkurang.
Mendapatkan daftar acara dari sumber. Ini bukan tugas tata letak, jadi daftar acara yang disertakan di dalamnya tidak dihitung. Anda selalu dapat membatalkan konferensi, menjadwalkan ulang, atau menambahkan konferensi baru. Jadi perlu menerima data dari luar dan merender tata letak berdasarkan JSON yang diterima. Penting untuk memperoleh data dengan cara apa pun (menggunakan metode pengambilan atau menggunakan XMLHttpRequest). Jika seseorang menambahkan polyfill untuk pengambilan dan menandai pilihannya di readme, ini dihitung sebagai nilai tambah.
Pendaftaran pekerja layanan tanpa kesalahan dan bekerja offline setelah unduhan pertama. pekerja layanan dengan jadwal caching pada boot pertama. Detail tentang pekerja layanan, kemampuan mereka, dan cara bekerja dengannya (strategi untuk bekerja dengan cache, bekerja offline) dapat ditemukan di sini.
Kemampuan untuk mengatur pengingatsehingga benar-benar berfungsi setelah 3, 7, 14 hari. Penting untuk memahami API Notifikasi, tepat pada tugasnya. Kami tidak mengharapkan penerapan khusus untuk memeriksa apakah sudah waktunya untuk melakukan push. Opsi kerja apa pun diterima: penyimpanan di Penyimpanan lokal, IndexDB, atau polling berkala oleh pekerja layanan. Bahkan dimungkinkan untuk membuat server push (di sini ), tapi itu tidak akan berfungsi secara offline. Sama pentingnya untuk menerima push setelah halaman ditutup - dan dibuka setelah beberapa waktu. Jika pengingat mati pada saat halaman ditutup, solusinya tidak dihitung. Sangat keren ketika orang-orang memikirkan pengulas dan memungkinkan untuk mendapatkan dorongan sekarang - agar tidak menunggu 3 hari.
Kemampuan untuk menempatkan ikon di desktop (PWA). Kami memeriksa keberadaan file tersebut dengan ikon yang benar. Beberapa orang membuat file ini (atau membiarkannya dibuat di CreateReactApp) - tetapi tidak menambahkan ikon yang benar. Kemudian ketika mencoba menginstal, terjadi kesalahan seperti “diperlukan ikon yang berbeda”.
Gaya kode dan struktur proyek. Seperti pada tugas kedua, kita melihat satu gaya kode (walaupun itu tidak sesuai dengan gaya kita). Beberapa orang memasang linter - itu bagus.
Kesalahan konsol. Jika ada indikator tepat di konsol bahwa ada sesuatu yang salah, dan peserta tidak memperhatikannya, maka poin kami kurangi.
Hasil
Yang lucu dari keputusan peserta:
- Salah satu kuesioner berisi teks berikut: “Seorang teman programmer membantu saya membuat aplikasi React. Saya membombardirnya dengan pertanyaan tentang bagaimana dan mengapa, dan dia memberi tahu saya. Saya sangat menyukainya, saya ingin tahu lebih banyak tentangnya.” Kami melakukan rooting terhadap aplikasi ini dengan sepenuh hati, namun sayangnya teman kandidat tidak terlalu membantu dalam membuat aplikasi tersebut berfungsi.
- Salah satu kandidat mengirimkan tautan ke GitHub, tempat arsip RAR berada - sulit untuk mengomentari hal ini. 🙂
- Kandidat lain, dalam komentar di baris pertama file solution.js, dengan jujur mengakui bahwa dia menyalin algoritma tersebut.
Kami menerima lamaran dari 76 kandidat dan menyeleksi 23 orang. Kami dikirimi kuesioner tidak hanya dari Minsk, tetapi juga dari Moskow, St. Petersburg, dan bahkan Tatarstan. Beberapa dari mereka mengejutkan kami dengan profesi mereka saat ini: salah satunya adalah ahli forensik, dan yang lainnya adalah mahasiswa kedokteran.
Hasilnya adalah distribusi tingkat keberhasilan yang menarik dalam menyelesaikan tugas. Peserta menyelesaikan tugas pertama rata-rata 60%, tugas kedua 50%, dan tugas ketiga ternyata paling sulit dan diselesaikan rata-rata 40%.
Sekilas, tugas tersebut terlihat rumit dan memakan waktu. Alasannya bukan karena kami ingin menyingkirkan kandidat sebanyak mungkin. Selama masa studinya, siswa dihadapkan pada tugas kehidupan nyata - membuat obrolan, Yandex.Music untuk anak-anak, atau Yandex.Weather untuk orang-orang yang bergantung pada cuaca. Untuk ini, Anda memerlukan basis awal.
Saya ingat melihat tugas masuk SRI saya dua tahun lalu dan berpikir bahwa saya tidak akan pernah menyelesaikannya. Hal utama saat ini adalah duduk, membaca kondisi dengan cermat dan mulai melakukannya. Ternyata kondisinya mengandung hampir 80% larutan. Misalnya, dalam kondisi tugas ketiga (yang paling sulit), kami menambahkan tautan ke pekerja layanan dan API Pemberitahuan di MDN. Siswa yang mempelajari isi tautan menyelesaikannya tanpa kesulitan.
Saya sangat ingin artikel ini dibaca oleh kandidat yang berencana masuk SRI di masa depan, yang tidak bisa masuk Sekolah Minsk, atau yang mulai mengerjakan tugas ujian lainnya. Seperti yang Anda lihat, hal ini sangat mungkin dilakukan. Anda hanya perlu percaya pada diri sendiri dan mendengarkan semua tips dari penulis.
Sumber: www.habr.com