Bugün yeni kayıt açıldı Moskova'da. Eğitimin ilk aşaması 7 Eylül - 25 Ekim tarihleri arasında gerçekleşecek. Diğer şehirlerden gelen öğrenciler uzaktan veya şahsen katılabilecekler - şirket seyahat ve pansiyonda konaklama masraflarını karşılayacak. İkinci aşama olan son aşama ise 3 Aralık'a kadar sürecek, sadece şahsen tamamlanabilecek.
Adım Yulia Seredich, bu yazıyı Sergei Kazakov ile birlikte yazdık. İkimiz de Yandex'in Minsk ofisinde arayüz geliştiriciyiz ve SRI'nin önceki yıllardan mezunlarıyız.
Moskova'da kayıtların açılması vesilesiyle, burada, Minsk'te bulunan önceki Okula giriş görevlerinin bir analizini yayınlıyoruz.
SRI görevlerinin geçmişini takip ederseniz, yıldan yıla bir programcı için üç önemli beceriyi test ettiğimizi görürsünüz:
- Düzen. Her geliştiricinin düzen yapabilmesi gerekir. Tüm ekip için tasarım yapan Seryozha Amcanız yok ve siz sadece senaryo yazıyorsunuz. Bu nedenle her öğrencinin dizgi yapmayı nasıl bildiğini göstermesi gerekir.
- JavaScript. Eğer konu sadece mizanpajla sınırlı olsaydı, Arayüz Geliştirme Okulumuz değil, Mizanpaj Tasarımcıları Okulumuz olurdu. Güzel tasarlanmış arayüzün yeniden canlandırılması gerekiyor. Bu nedenle JS için her zaman bir görev vardır, ancak bazen algoritmalar için de bir görev vardır - onları çok seviyoruz.
- Problem çözme belki de bir geliştiricinin en önemli becerisidir. Arayüz oluşturmaya gelince işler çok hızlı değişiyor. Lewis Carroll'un dediği gibi: "Aynı yerde kalabilmek için koşabildiğin kadar hızlı koşmalısın, başka bir yere varmak için ise iki kat daha hızlı koşmalısın." Her gün yeni teknolojilerle karşılaşıyoruz; bunları dikkate almamız ve anlayabilmemiz gerekiyor. Bu nedenle üçüncü görevde acemi bir geliştiricinin genellikle aşina olmadığı teknolojileri anlamayı önerdik.
Her görevin analizinde size yalnızca doğru prosedür hakkında değil, aynı zamanda yaygın hatalar hakkında da bilgi vereceğiz.
Görev 1: Portföy
İlk görev, düzenin nasıl yapılacağını bilen Yandex.Collections tasarımcısı Alexey Cherenkevich ve hizmet arkadaşı arayüz geliştiricisi Sergey Samsonov tarafından gerçekleştirildi.
durum
Bir portföy web sitesi oluşturun: bize kendinizden, işinizden ve Okuldan beklentilerinizden bahsedin. Site, önerilen düzene mümkün olduğunca uygun olmalıdır (düzenlere bağlantılar: , , , ). Biz yalnızca düzen ile ilgileniyoruz, bu nedenle lütfen JavaScript kullanmayın.
Kontrol ederken şunları dikkate alacağız:
- girinti boyutları, renk doğruluğu, yazı tipi stili, yazı tipi boyutu;
- anlamsal düzen;
- öğelerin farklı durumlarının varlığı: imlecin üzerine gelindiğinde düğmelerin ve bağlantıların görüntülenmesi, aktif giriş alanlarının vurgulanması vb.;
- tarayıcılar arası uyumluluk (popüler tarayıcıların en son sürümlerinde test edilmiştir).
Avantajı şu olacaktır:
- modern CSS çözümlerinin kullanımı: flexbox, grid, vb.;
- Uyarlanabilir düzen;
- ön ve (veya) son işlemcilerin kullanımı, çıktı kodunun montajı, küçültülmesi, optimizasyonu;
- HTML form doğrulama, stilize dosya yükleme düğmesi.
Görev oldukça hacimlidir, bu nedenle işe yaramayacak olanı atlayabilirsiniz. Bu, puanınızı biraz düşürecektir ancak yine de bilginizi gösterebileceksiniz. İşiniz bittiğinde bize portföyünüzün ve GitHub'daki kaynak kodunun iki bağlantısını gönderin.
Ödevde önerilen düzenler yalnızca mobil cihazlar, tabletler ve masaüstü bilgisayarlar için ekranlar değil, aynı zamanda gerçek özelliklerdi.
İlk görevin kontrolünün sonucuna mümkün olduğunca fazla nesnellik kazandırmak amacıyla bu kontrol için birçok kriter vardı.
kriterler
Tasarlanmış web sitesi. Bu açık görünüyor, ancak bazı adamlar bazı blokları tamamen atladılar; ya zamandan tasarruf etmek istediler ya da yapamadılar. Düzen kabaca dört ana ekrana bölünebilir: avatarın bulunduğu ana ekran, SRI'dan beklentilerin listesinin bulunduğu bir blok, portföyün bulunduğu bir blok ve iletişim bilgilerinin bulunduğu bir blok. Bölümler halinde veya sadece div'ler kullanılarak yapılabilirler, asıl önemli olan dört bloğun tamamının mevcut olmasıdır.
Yerleşim planının yerleşim planına uygunluğu. Tasarımcı, adayların işini kolaylaştırmak için ayrı bir spesifikasyon (renkler, tipografi, düğme durumları vb. dahil) yaptı. Alt kısımda ilk ekranın girintileri ve özellikleri hakkında bir ipucu vardı. Tasarımcının tüm isteklerini dikkate alan adamlardan çok memnun kaldım: örneğin, ilk ekranın görüntü alanının yüksekliğinden daha az olmaması gerekiyordu.
Uyarlanabilir düzen - bu, arayüzün üç çözünürlükte her şeyin pikselden piksele düzenleneceği şekilde düzenlenmediği zamandır. Ara durumlarda düzenin de bozulmaması gerekir. Bazıları kabın maksimum genişliğini sınırlamayı unuttu ve her şeyi 1920 piksele ayarladı, bazıları arka planları bozdu, ancak genel olarak adaylar bu görevle iyi başa çıktı.
Anlamsal düzen. Bağlantının , butonun da böyle tasarlanması gerektiğini “dünyaya kaç kez söylediler” . Neyse ki çoğu aday da bu şartı yerine getirdi. Herkes SRI'nın beklentilerindeki gizli listeyi fark edemedi, bu da onu div etiketlerini kullanarak yaptı, ancak o kadar da kötü değil. Bildiği tüm anlamsal etiketleri gerekli olan ve gerekli olmayan yerlere yerleştiren bir aday vardı. Örneğin, bir liste yerine - ve . Sonuçta anlambilim, sayfanızın kompozisyonunu ve her bloğun amacını (çoğunluk burada yönetmiştir) ve aynı zamanda ön ve/veya son işlemcilerin kullanımını (bazıları burada yönetmiştir, ancak bu) anlamakla ilgilidir. aynı zamanda noktalarda da vardı - çoğunlukla less ve scss kullanıyorlardı) .
Çalışma kaydırıcısı. Ödevimizde JS'nin kullanılamayacağını yazdık. Burada sorunları çözme yeteneği test edildi - bir grup kullanılarak bir kaydırıcı yapılabilir Ve . Tüm sihir #button-N:checked ~ .slider-inner .slider-slides seçici seviyesinde gerçekleşir. Giriş onay kutularından birine tıkladığımızda işaretli duruma geçer. Bundan faydalanarak ihtiyacımız olan çeviriyi slaytların bulunduğu konteynere atayabiliriz: transform:translate(-33%). Kaydırıcının uygulamasını görebilirsiniz .
Açılır listeler. Burada da her şey şuna geldi ve benzer bir seçici: .accordion-item input:checked ~ .accordion-item__content. Uygulamayı görebilirsiniz .
:hover, :active ve :focu* durumlarının kullanılabilirliği. Çok önemli bir nokta. Arayüzle etkileşim sırasındaki konfor buna bağlıydı. Kullanıcı her zaman eylemleri hakkında geri bildirim almalıdır. Bu madde anketle etkileşim boyunca kontrol edildi. "Beni ara" düğmesine tıkladım ve görsel olarak hiçbir şey olmadıysa (istek gönderilmiş olsa bile), bu kötü çünkü o zaman tekrar tekrar tıklayacağım. Sonuç olarak on istek gönderilecek ve on kez geri aranacağım. Mobil cihazlarda fare bulunmadığını, yani fareyle üzerine gelmenin olmaması gerektiğini unutmamalıyız. Ve anlambilimle ilgili noktayı yerine getirenleri etkilemeyen bir nokta daha. Kontrolünüz etkileşimli bir öğe değilse, üzerine geldiğinizde imleç standart kalacaktır. Fareyle üzerine gelme işlemine bir tepki yazmış olsanız bile çok düzensiz görünüyor. İmleci hafife almayın: işaretçi.
Animasyonlar. Elementlerle meydana gelen tüm reaksiyonların düzgün olması önemlidir. Hayatta hiçbir şey anlık değildir, bu nedenle geçişlerin fareyle üzerine gelindiğinde ve aktif olması arayüzü daha keyifli hale getirmek için yeterliydi. Kaydırıcıyı ve listeleri canlandıranlar genellikle harikadır.
En son teknolojiyi kullanma. Birçok kişi flex'i kullandı, ancak hiç kimse görevi grid kullanarak tamamlamadı. Flex doğru kullanıldığında puan sayıldı. Bir yerde bu esneklikler nedeniyle düzen bozulursa, ne yazık ki herhangi bir ek puan alamazsınız.
Form Doğrulama. Gerekli olan tek şey, formun her girişine gerekli özelliği eklemekti. Email alanını email olarak doğrulayanlara puan ekledik.
Dosya yükleme düğmesinin şekillendirilmesi. Aşağıdaki gibi bir kombinasyon görmeyi bekliyorduk: ve Dosya seç'e tıklayın . Daha sonra girişi gizlememiz ve etikete stil vermemiz gerekiyordu. Başka bir yaygın yol daha var - şeffaf bir giriş yapmak ve onu düğmenin üstüne koymak. Ancak tüm tarayıcılar stillendirmeye izin vermez ve böyle bir çözüme tamamen tarayıcılar arası denemez. Ve etiket yapmak anlamsal olarak daha doğrudur.
Tarayıcılar arası uyumluluk. Modern tarayıcıların en son iki sürümünde (IE olmadan - katılımcılar şanslıydı) ve iPhone'larda Safari ve Android'lerde Chrome'da her şeyin yolunda olduğunu kontrol ettik.
Tam tersine, birisi JS veya Bootstrap kullanmışsa puanları düşürdük: her ikisi de tüm görevin amacını boşa çıkaracaktı. Üstelik Bootstrap katılımcıları yalnızca eksi almakla kalmadı, aynı zamanda anlambilim ve uygulanan öğeler açısından da birçok puan kaybetti.
Sitelerini internette bir yerde barındıranlar herhangi bir avantaj elde etmediler - ancak incelemeyi yapanlar, depoları indirip bilgisayarlarında yerel olarak çalıştırmak zorunda olmadıklarında çok mutlu oldular. Yani bu karma için bir artı görevi gördü.
İlk görev öncelikle öğrenci için çok faydalıydı. Kabul etmediğimiz kişilerin artık hazırlanmış bir özgeçmişleri var; bunu gururla tüm yanıtlara ekleyebilir veya gh sayfalarınızda yayınlayabilirsiniz.
Görev 2: Taşıma rotası
Görevin yazarı, arama arayüzleri grubu Denis Balyko'nun başkanıdır.
durum
Yıldız haritanız var mı? Her yıldızın adını ve ondan diğer yıldızlara olan mesafeyi ışık saniyesi cinsinden gösterir. Üç argüman alması gereken çözüm fonksiyonunu uygulayın: anahtarların yıldızların isimleri olduğu ve değerlerin yıldızlara olan mesafeler (uzayda tek yönlü trafik) ve ayrıca yıldızların isimleri olduğu bir nesne. yolun başlangıç ve bitiş noktaları - sırasıyla başlangıç ve bitiş. Fonksiyon başlangıç yıldızından bitiş yıldızına kadar olan en kısa mesafeyi ve izlenecek yolu döndürmelidir.
İşlev imzası:
const solution = function(graph, start, finish) { // Ваше решение }Örnek giriş verileri:
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';Örnek çıktı:
{ distance: 90, path: ['start', 'A', 'D', 'finish'] }Not: Çözüm iskeleti src/ klasöründedir; çözümünüzü Solution.js dosyasına koyun.
İkinci görevin doğrulanması en otomatik ve objektif olanıydı. Adamların çoğu Dijkstra'nın algoritmasını uygulamanın gerekli olduğunu tahmin etti. Onun açıklamasını bulan ve algoritmayı JS'de uygulayanların işi çok kolay. Ancak ödevi kontrol ederken aynı hataların olduğu birçok kağıtla karşılaştık. İnternette kod parçaları aradık ve katılımcıların algoritmayı kopyaladığı bir makale bulduk. Pek çok kişinin makaledeki kodu ve yazarın yorumlarını kopyalaması komik. Bu tür çalışmalar düşük puan aldı. Herhangi bir kaynağın kullanımını yasaklamıyoruz, ancak kişinin yazdıklarını derinlemesine incelemesini istiyoruz.
kriterler
Testler için ana puanlar verildi. Bazen adamların depoyla uğraştığı, klasörleri yeniden adlandırdığı ve gerekli dosyaları bulamadıkları için testlerin başarısız olduğu açıktı. Bu yıl bu tür adamlara yardım etmeye çalıştık ve onlar için her şeyi yerli yerine koyduk. Ancak gelecek yıl yarışma sistemine geçmeyi planlıyoruz ve bu artık affedilmeyecek.
Ayrıca “insan”, manuel kriterler de vardı. Örneğin tek bir kod stilinin varlığı. Hiç kimse boşluk yerine sekme kullanmaktan veya tam tersinden puan düşürmedi. Bildiğiniz bir kurala göre tek tırnakları çift tırnaklarla değiştirmeniz ve noktalı virgülleri rastgele yerleştirmeniz başka bir konudur.
Çözümün netliği ve okunabilirliği ayrı ayrı dikkate alınmıştır. Dünyadaki tüm konferanslarda bir programcının işinin %80'inin diğer insanların kodlarını okumaktan ibaret olduğu söylenir. Okul çocukları bile küratörlerinden ve birbirlerinden kod incelemelerine tabi tutulur. Dolayısıyla bu kriter önemli bir ağırlık taşıyordu. Bir karakterden daha uzun değişkenlerin olmadığı çalışmalar da oldu; lütfen bunu yapmayın. Katılımcıların yorumları oldukça cesaret vericiydi; ancak Stella Chang'ın yorumlarıyla aynı olanlar dışında.
Son kriter, otomatik testlerin varlığıdır. Sadece birkaç kişi onları ekledi ama bu, herkesin karmasında büyük bir artı oldu.
Doğru karar:
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);
};
};Görev 3: Etkinlik Takvimi
Arayüz geliştiricileri Sergey Kazakov ve Alexander Podskrebkin tarafından hazırlandı.
durum
Programınızı görüntülemek için bir mini takvim yazın. Dilediğiniz programı alabilirsiniz. Örneğin, 2019'daki ön uç konferansların programı.
Takvim bir liste gibi görünmelidir. Başka hiçbir tasarım gereksinimi yoktur. Etkinlik hatırlatıcılarını 3, 7 ve 14 gün önceden ayarlamayı mümkün kılın. İnternetten ilk indirmenin ardından takvim açılmalı ve çevrimdışı çalışmalıdır.
Faydalı kaynaklar
Ön uç konferans programı:
Servis çalışanları:
Bildirimler API'si:
Üçüncü görev test edilmesi en ilginç olanıydı çünkü her birinin kendine ait pek çok olası çözümü vardı. Adayın alışılmadık teknolojileri nasıl ele aldığını, nasıl araştırma yapacağını bilip bilmediğini, çözümlerini test edip etmediğini kontrol ettik.
kriterler
Katlanmış takvim. Evet, hala ortaya konması gerekiyordu. Koşulu tam anlamıyla ele alıp tek bir CSS kodu satırı bile eklemeyenler de vardı. Pek çekici görünmüyordu ama her şey işe yararsa puanlar azalmadı.
Bir kaynaktan olayların listesini alma. Bu bir düzen görevi olmadığından, içerdiği olayların listesi sayılmamıştır. Bir konferansı istediğiniz zaman iptal edebilir, yeniden planlayabilir veya yeni bir konferans ekleyebilirsiniz. Bu nedenle dışarıdan veri almak ve alınan JSON'a göre düzeni oluşturmak gerekiyordu. Verilerin herhangi bir şekilde (getirme yöntemini kullanarak veya XMLHttpRequest kullanarak) elde edilmesi önemliydi. Bir kişi getir için çoklu doldurma eklediyse ve benioku dosyasında seçimini işaretlediyse, bu bir artı olarak sayıldı.
Servis çalışanının hatasız kaydı ve ilk indirmeden sonra çevrimdışı çalışın. İlk açılışta zamanlamayı önbelleğe alan servis çalışanı. Hizmet çalışanları, yetenekleri ve onlarla çalışma yolları (önbelleklerle çalışma stratejileri, çevrimdışı çalışma) hakkındaki ayrıntılara burada ulaşabilirsiniz.
Hatırlatıcı ayarlama yeteneğiyani aslında 3, 7, 14 gün sonra işe yarıyor. Bildirimler API'sini anlamak gerekiyordu, görevdeydi. İlerleme zamanının gelip gelmediğini kontrol edecek özel bir uygulama beklemiyorduk. Herhangi bir çalışma seçeneği kabul edildi: localStorage'da depolama, IndexDB veya bir hizmet çalışanı tarafından periyodik yoklama. Bir push sunucusu bile yapmak mümkündü (burada ), ancak çevrimdışı çalışmaz. Sayfa kapatıldıktan ve bir süre sonra açıldıktan sonra bir bildirim almak da aynı derecede önemliydi. Hatırlatıcı sayfanın kapatılmasıyla aynı anda sona ererse çözüm sayılmaz. Adamların eleştirmenleri düşünmeleri ve 3 gün beklememek için hemen bir destek almayı mümkün kılmaları harika.
Masaüstüne simge yerleştirme yeteneği (PWA). Dosyanın varlığını kontrol ettik doğru simgelerle. Bazıları bu dosyayı oluşturdu (veya CreateReactApp'ta oluşturulmuş halde bıraktı) - ancak doğru simgeleri eklemediler. Daha sonra kurulum yapmaya çalışırken “farklı bir simge gerekiyor” gibi bir hata oluştu.
Kod stili ve proje yapısı. İkinci görevde olduğu gibi, tek bir kod stiline baktık (bizimkiyle örtüşmese bile). Bazı adamlar linterlere bulaştı; bu harika.
Konsol hataları. Konsolda bir şeylerin ters gittiğine dair bir gösterge varsa ve katılımcı buna dikkat etmediyse puan düşürdük.
sonuçlar
Katılımcıların kararlarının komik yanı:
- Anketlerden biri şu metni içeriyordu: “Bir programcı arkadaşım bir React uygulaması oluşturmama yardım etti. Onu nasıl ve neden diye soru yağmuruna tuttum ve o da bana anlattı. Gerçekten hoşuma gitti, hakkında daha fazla bilgi edinmek istiyorum.” Biz bu başvuruyu tüm kalbimizle destekliyorduk ama ne yazık ki adayın arkadaşı başvurunun işe yaraması konusunda pek yardımcı olmadı.
- Adaylardan biri RAR arşivinin bulunduğu GitHub'a bir bağlantı gönderdi; bu konuda yorum yapmak zor. 🙂
- Başka bir aday, Solution.js dosyasının ilk satırındaki yorumda, algoritmayı kopyaladığını dürüstçe itiraf etti.
76 adayın başvurusunu aldık ve 23 kişiyi seçtik. Bize sadece Minsk'ten değil, Moskova'dan, St. Petersburg'dan ve hatta Tataristan'dan da anketler gönderildi. Adamlardan bazıları şu anki meslekleriyle bizi şaşırttı: Biri adli tıp uzmanı, diğeri tıp öğrencisi.
Sonuç, görevleri tamamlamadaki başarı oranlarının ilginç bir dağılımıydı. Katılımcılar ilk görevi ortalama %60, ikinci görevi %50, en zoru olan üçüncü görevi ise ortalama %40 oranında tamamladılar.
İlk bakışta görevler karmaşık ve zaman alıcı görünüyor. Bunun nedeni mümkün olduğu kadar çok adayı elemek istememiz değil. Öğrenciler öğrenimleri sırasında sohbet etme, çocuklar için Yandex.Müzik veya hava durumuna bağımlı kişiler için Yandex.Hava Durumu gibi gerçek hayattaki görevlerle karşı karşıya kalırlar. Bunun için bir başlangıç üssüne ihtiyacınız var.
İki yıl önce SRI'ye giriş görevimi gördüğümü ve bunu asla çözemeyeceğimi düşündüğümü hatırlıyorum. Şu anda asıl önemli olan oturup koşulları dikkatlice okumak ve yapmaya başlamaktır. Koşulların çözümün neredeyse %80'ini içerdiği ortaya çıktı. Örneğin, üçüncü görevin (en zoru) durumunda, MDN'deki hizmet çalışanlarına ve Bildirimler API'sine bağlantılar ekledik. Bağlantıların içeriğini inceleyen öğrenciler zorluk yaşamadan tamamladılar.
Bu makalenin gelecekte SRI'ye girmeyi planlayan, Minsk Okulu'na giremeyen veya başka bir test görevine başlayacak adaylar tarafından okunmasını gerçekten çok isterim. Gördüğünüz gibi bunu yapmak oldukça mümkün. Sadece kendinize inanmanız ve yazarların tüm ipuçlarını dinlemeniz gerekiyor.
Kaynak: habr.com