Heute wurde ein neues Set in
der Yandex School of Interface Development in Moskau eröffnet. Vom 7. September bis 25. Oktober findet die erste Ausbildungsphase statt. Studenten aus anderen Städten können remote oder persönlich daran teilnehmen - das Unternehmen bezahlt die Straße und die Unterkunft im Hostel. Zweitens dauert die letzte Phase bis zum 3. Dezember und kann nur persönlich abgeschlossen werden.
Mein Name ist Julia Seredich, wir haben diesen Beitrag zusammen mit Sergey Kazakov geschrieben. Wir sind beide Schnittstellenentwickler im Minsker Büro von Yandex und Absolventen von SRI der letzten Jahre.

Anlässlich der Eröffnung der Registrierung in Moskau veröffentlichen wir eine Analyse der Zugangsaufgaben zur vorherigen Schule - hier in Minsk.
Wenn wir die Geschichte der SRI-Aufgaben verfolgen, haben wir von Jahr zu Jahr drei wichtige Fähigkeiten für einen Programmierer getestet:
- Layout. Jeder Entwickler sollte in der Lage sein, zu setzen. Es kommt nicht vor, dass Sie Onkel Seryozha haben, der für das gesamte Team gesetzt hat, und Sie schreiben nur Skripte. Daher muss jeder Schüler zeigen, wie er sich setzen kann.
- Javascript Wenn sich die Angelegenheit auf den Satz beschränken würde, hätten wir keine Schule für Schnittstellenentwicklung, sondern eine Layoutschule. Die schöne zusammengeklappte Oberfläche muss wiederbelebt werden. Daher gibt es bei JS immer eine Aufgabe, aber manchmal auch bei Algorithmen - wir lieben sie so sehr.
- Problemlösung ist vielleicht die Hauptkompetenz des Entwicklers. Bei der Erstellung von Schnittstellen ändert sich alles sehr schnell. Es ist wie bei Lewis Carroll: "Man muss genauso schnell laufen, um am selben Ort zu bleiben, aber um an einen anderen Ort zu gelangen, muss man doppelt so schnell laufen." Jeden Tag sind wir mit neuen Technologien konfrontiert - es ist notwendig, mit ihnen zu rechnen und sie verstehen zu können. Daher haben wir in der dritten Aufgabe vorgeschlagen, Technologien zu verstehen, mit denen ein unerfahrener Entwickler normalerweise nicht vertraut ist.
Bei der Analyse jeder Aufgabe werden wir nicht nur über das richtige Verfahren, sondern auch über häufige Fehler berichten.
Aufgabe 1: Portfolio
Die erste Aufgabe wurde vom Designer von Yandex.Collections Alexei Cherenkevich, der sich mit dem Setzen auskennt, und seinem Kollegen im Service, dem Interface-Designer Sergey Samsonov, erledigt.
Zustand
Erstellen Sie eine Portfolio-Site: Erzählen Sie uns von sich selbst, Ihrer Arbeit und den Erwartungen an die Schule. Die Site sollte so weit wie möglich mit dem vorgeschlagenen Layout übereinstimmen (Links zu Layouts: 1000px , 600px , 320px , Spezifikation ). Wir interessieren uns nur für das Layout, verwenden Sie also bitte kein JavaScript.
Bei der Prüfung berücksichtigen wir:
- Füllgrößen, Farbgenauigkeit, Schriftstil, Größe der Größe;
- semantisches Layout;
- das Vorhandensein verschiedener Zustände von Elementen: Anzeige von Schaltflächen und Links, wenn Sie den Mauszeiger bewegen, aktive Eingabefelder markieren usw.;
- Cross-Browser-Kompatibilität (in den neuesten Versionen gängiger Browser überprüft).
Das Plus wird sein:
- Verwendung moderner CSS-Lösungen: Flexbox, Grid usw.;
- adaptives Layout;
- Verwendung von Prä- und (oder) Postprozessoren, Zusammenbau, Minimierung, Optimierung des Ausgabecodes;
- HTML-Formularüberprüfung, stilisierte Schaltfläche zum Hochladen von Dateien.
Die Aufgabe ist ziemlich umfangreich, so dass Sie überspringen können, was nicht funktioniert. Dadurch wird die Punktzahl geringfügig gesenkt, Sie können jedoch Ihr Wissen nachweisen. Senden Sie uns nach Abschluss zwei Links - zum Portfolio und zum Quellcode auf GitHub.
Die in der Aufgabe vorgeschlagenen Layouts enthielten nicht nur Bildschirme für mobile Geräte, Tablets und Desktops, sondern auch eine echte Spezifikation.
Um dem Ergebnis des Tests der ersten Aufgabe so viel Objektivität wie möglich zu verleihen, gab es viele Kriterien für diesen Test.
Kriterien
Website fertiggestellt . Dies scheint offensichtlich, aber einige Leute haben einige Blöcke komplett verpasst - entweder wollten sie Zeit sparen oder sie konnten sie nicht schaffen. Das Layout kann bedingt in vier Hauptbildschirme unterteilt werden: den Hauptbildschirm mit einem Avatar, einen Block mit einer Liste der Erwartungen von SRI, einen Block mit einem Portfolio und einen Block mit Kontaktinformationen. Sie können in Abschnitten oder einfach mit einem Div erstellt werden. Hauptsache, alle vier Blöcke sind verfügbar.
Passendes Layout Layout . Der Designer hat eine separate Spezifikation (einschließlich Farben, Typografie, Schaltflächenzustände usw.) erstellt, um es den Kandidaten zu erleichtern. Unten finden Sie einen Tipp zum Einzug und zu den Funktionen des ersten Bildschirms. Sehr zufrieden mit den Jungs, die alle Wünsche des Designers berücksichtigt haben: Zum Beispiel sollte der erste Bildschirm nicht weniger als die Höhe des Ansichtsfensters sein.
Adaptives Layout - In diesem
Fall ist die Benutzeroberfläche nicht nur so aufgebaut, dass bei drei Auflösungen alles Pixel für Pixel entsprechend dem Layout war. In Zwischenzuständen sollte das Layout auch nicht auseinanderfallen. Jemand hat vergessen, die maximale Breite des Containers zu begrenzen und alles auf 1920 Pixel zu ziehen, jemand hat die Hintergründe durcheinander gebracht, aber insgesamt haben die Kandidaten diese Arbeit gut gemacht.
Semantisches Layout . "Wie oft haben sie der Welt gesagt", dass der Link als <a>, die Schaltfläche als <button> eingerahmt sein sollte. Glücklicherweise haben die meisten Kandidaten diese Anforderung erfüllt. Nicht jeder hat die lauernde Liste in den Erwartungen des SRI erkannt, indem er sie mit div-Tags erstellt hat, aber es ist nicht so beängstigend. Es gab einen Kandidaten, der alle semantischen Tags einfügte, die er nur kannte - wo es notwendig war und wo es nicht notwendig war. Zum Beispiel anstelle einer Liste <Abschnitt> und <Artikel>. Semantik - es geht darum, die Zusammensetzung Ihrer Seite und den Zweck jedes Blocks zu verstehen (die meisten haben es hier getan) sowie um die Verwendung von Vor- und / oder Nachprozessoren (nur wenige haben es hier getan, obwohl es auch in Punkten war - weniger und scss waren am häufigsten miteinander verbunden). .
Arbeitsschieberegler . In der Aufgabe haben wir geschrieben, dass JS nicht verwendet werden kann. Hier wurde die Fähigkeit zur Lösung von Problemen getestet - der Schieberegler konnte mit den Konnektiven <input> und <label for = ”# id”> erstellt werden. Alle Magie geschieht auf der Auswahlebene # button-N: aktiviert ~ .slider-inner .slider-slide. Wenn wir auf eines der Eingabe-Kontrollkästchen klicken, wird es aktiviert. Wir können dies verwenden und die gewünschte Übersetzung unserem Container mit Folien zuweisen: transform: translate (-33%). Siehe die Slider-Implementierung
hier .
Dropdown-Listen . Es kam alles auf <input name = "akkordeon" type = "radio"> und einen ähnlichen Selektor an: .accordion-item input: checked ~ .accordion-item__content. Siehe die Implementierung
hier .
Die Anwesenheit der Zustände: schweben,: aktiv und: focu * . Ein sehr wichtiger Punkt. Bei der Interaktion mit der Benutzeroberfläche hing der Komfort von ihm ab. Der Benutzer sollte immer Feedback zu seinen Aktionen erhalten. Dieser Punkt wurde während der Interaktion mit dem Fragebogen überprüft. Wenn ich auf die Schaltfläche "Ruf mich an" geklickt habe und visuell nichts passiert ist (obwohl die Anfrage gesendet wurde), ist dies schlecht, da ich dann immer wieder darauf klicke. Infolgedessen werden zehn Anfragen gesendet und ich werde zehnmal zurückgerufen. Vergessen Sie nicht, dass auf Mobilgeräten keine Maus vorhanden ist - das heißt, es sollte kein Schwebeflug vorhanden sein. Und noch etwas, das diejenigen nicht betraf, die dem Punkt der Semantik entsprachen. Wenn Ihr Steuerelement kein interaktives Element ist, bleibt der Cursor beim Bewegen des Mauszeigers Standard. Es sieht sehr unordentlich aus, selbst wenn Sie eine Antwort auf den Schwebeflug verschrieben haben. Cursor: Zeiger nicht unterschätzen.
Animationen Es ist wichtig, dass alles, was mit den Reaktionselementen passiert, glatt ist. Es gibt keinen Augenblick im Leben, daher war das Vorhandensein von Übergängen beim Schweben und Aktivieren ausreichend, um die Benutzeroberfläche angenehmer zu gestalten. Nun, diejenigen, die den Schieberegler und die Listen animiert haben, sind im Allgemeinen gut gemacht.
Mit der neuesten Technologie . Viele verwendeten Flex, aber niemand erledigte die Aufgabe mit Grid. Ein Element wurde gezählt, wenn Flex korrekt verwendet wurde. Wenn sich das Layout aufgrund dieser Biegungen irgendwo trennte, erhielten Sie leider keine zusätzlichen Punkte.
Validierung des Formulars . Alles, was erforderlich war, war das Hinzufügen des erforderlichen Attributs zu jedem Eingabeformular. Wir haben denjenigen Punkte hinzugefügt, die das E-Mail-Feld als E-Mail validiert haben.
Stilisierung der Datei-Upload-Schaltfläche . Wir haben erwartet, dass eine Reihe des Formulars angezeigt wird: <input type = ”file” id = ”file” name = ”file” class = ”inputfile” /> und <label for = ”file”> Wählen Sie die Datei </ label> aus. Außerdem mussten Eingaben ausgeblendet und Beschriftungen formatiert werden. Es gibt noch einen anderen gängigen Weg: Sie können eine transparente Eingabe vornehmen und diese über der Schaltfläche platzieren. Aber nicht alle Browser erlauben das Styling von <input type = ”file”>, und eine solche Lösung kann nicht als vollständig browserübergreifend bezeichnet werden. Und es ist semantisch korrekter, ein Etikett zu erstellen.
Browserübergreifende Kompatibilität . Wir haben überprüft, ob alles in Ordnung ist, in den letzten beiden Versionen moderner Browser (ohne IE hatten die Teilnehmer Glück) sowie in Safari auf iPhones und in Chrome auf Androiden.
Wir haben im Gegenteil Punkte erzielt, wenn jemand JS oder Bootstrap verwendet hat: Beide haben die ganze Aufgabe bedeutungslos gemacht. Darüber hinaus erhielten Teilnehmer mit Bootstrap nicht nur ein Minus, sondern verloren auch viele Punkte für Semantik und implementierte Elemente.
Diejenigen, die ihre Site irgendwo im Internet markiert haben, hatten keinen besonderen Vorteil - aber die Inspektoren waren sehr glücklich, als sie die Repositorys nicht herunterladen und lokal auf ihrem Computer ausführen mussten. Das war also ein Plus im Karma.
Die erste Aufgabe war vor allem für den Schüler sehr nützlich. Diejenigen, die wir jetzt nicht akzeptiert haben, haben eine zusammengestellte Zusammenfassung - Sie können sie stolz an alle Antworten anhängen oder auf Ihre Gh-Seiten setzen.
Aufgabe 2: Transportroute
Der Autor der Aufgabe ist Denis Balyko, Leiter der Suchschnittstellengruppe.
Zustand
Sie haben eine Sternenhimmelkarte. Es zeigt den Namen jedes Sterns sowie die Entfernung von ihm zu anderen Sternen in Lichtsekunden. Implementieren Sie die Lösungsfunktion, die drei Argumente annehmen sollte: ein Objekt, bei dem die Schlüssel die Namen der Sterne und die Werte die Abstände zu den Sternen (Einwegbewegung im Raum) sowie die Namen der Start- und Endpunkte des Pfades sind - Start und Ende. Die Funktion sollte die kürzeste Entfernung vom Sternstart bis zum Sternende und den Weg zurücklegen, auf dem sie gehen muss.
Funktionssignatur:
const solution = function(graph, start, finish) {
Beispieleingabe:
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';
Beispielausgabe:
{ distance: 90, path: ['start', 'A', 'D', 'finish'] }
Hinweis: Das Lösungsframework befindet sich im Ordner src /. Legen Sie Ihre Lösung in solution.js ab.
Die Überprüfung der zweiten Aufgabe war am automatisiertesten und objektivsten. Die meisten Leute vermuteten, dass es notwendig war, den Dijkstra-Algorithmus zu implementieren. Diejenigen, die seine Beschreibung gefunden und den Algorithmus auf JS implementiert haben, sind großartig. Bei der Überprüfung der Zuordnung haben wir jedoch viel Arbeit mit denselben Fehlern festgestellt. Wir suchten im Internet nach Codefragmenten und fanden einen Artikel, in dem die Teilnehmer den Algorithmus abschrieben. Es ist lustig, dass viele Leute den Code aus dem Artikel zusammen mit den Kommentaren des Autors kopiert haben. Solche Arbeiten erhielten eine niedrige Punktzahl. Wir verbieten nicht die Verwendung von Quellen, aber wir möchten, dass die Person sich mit dem befasst, was sie schreibt.
Kriterien
Die Hauptpunkte wurden für die Tests vergeben. Manchmal war es offensichtlich, dass die Jungs das Repository durch das Umbenennen von Ordnern verwechselten, und die Tests fielen einfach, weil sie die benötigten Dateien nicht finden konnten. Dieses Jahr haben wir versucht, solchen Leuten zu helfen und haben alles für sie an ihren Platz zurückgebracht. Aber nächstes Jahr planen wir, auf ein Wettbewerbssystem umzusteigen, und dies wird nicht vergeben.
Es gab auch „menschliche“ manuelle Kriterien. Zum Beispiel das Vorhandensein eines einzelnen Codestils. Niemand hat Punkte für die Verwendung von Tabulatoren anstelle von Leerzeichen reduziert oder umgekehrt. Es ist eine andere Sache, wenn Sie einfache Anführungszeichen nach einer bekannten Regel durch doppelte Anführungszeichen abwechseln und Semikolons separat einfügen.
Separat wurde die Klarheit und Lesbarkeit der Lösung berücksichtigt. Auf allen Konferenzen auf der ganzen Welt heißt es, dass die Arbeit des Programmierers zu 80% darin besteht, den Code anderer Leute zu lesen. Sogar Schulkinder durchlaufen eine Codeüberprüfung - mit ihren Kuratoren und untereinander. Dieses Kriterium hatte also ein erhebliches Gewicht. Es gab Werke, in denen es keine Variablen gab, die länger als ein Zeichen waren - bitte nicht. Die Kommentare der Teilnehmer waren sehr erfreut - mit Ausnahme derjenigen, die mit den Kommentaren von Stella Chang identisch waren.
Das letzte Kriterium ist die Verfügbarkeit von Autotests. Sie wurden nur von wenigen Leuten hinzugefügt, aber für alle ist dies ein großes Plus im Karma geworden.
Die richtige Entscheidung:
const solution = function(graph, START, FINISH) {
Aufgabe 3: Veranstaltungskalender
Es wurde von den Schnittstellenentwicklern Sergey Kazakov und Alexander Podskrebkin vorbereitet.
Zustand
Schreiben Sie einen Minikalender, um den Zeitplan anzuzeigen. Sie können einen beliebigen Zeitplan festlegen. Zum Beispiel der Zeitplan für Front-End-Konferenzen im Jahr 2019.
Der Kalender sollte wie eine Liste aussehen. Es gibt keine weiteren Designanforderungen. Ermöglichen das Festlegen von Ereigniserinnerungen für 3, 7 und 14 Tage. Nach dem ersten Download über das Internet sollte der Kalender geöffnet sein und offline funktionieren.
Nützliche Ressourcen
Zeitplan der Front-End-Konferenzen:
confs.tech/javascript?topics=javascript%2Bcss%2Bux
Servicemitarbeiter:
developer.mozilla.org/en/docs/Web/API/Service_Worker_API/Using_Service_Workers
developer.google.com/web/fundamentals/primers/service-workers
Benachrichtigungs-API:
developer.mozilla.org/en/docs/Web/API/Notifications_API
Die dritte Aufgabe war am interessantesten zu testen, da es so viele Lösungen gab, jede mit ihren eigenen. Wir haben überprüft, wie der Kandidat mit unbekannten Technologien umgeht - ob er zu untersuchen weiß, ob er seine Lösungen testet.
Kriterien
Der erfundene Kalender . Ja, er musste noch geschminkt werden. Es gab diejenigen, die den Zustand zu wörtlich verstanden und keine einzige Zeile CSS-Code einfügten. Es sah nicht sehr persönlich aus, aber wenn alles funktionierte, gingen die Punkte nicht zurück.
Abrufen einer Liste von Ereignissen aus einer Quelle . Dies ist keine Aufgabe für den Satz, daher wurde die Liste der darin eingenähten Ereignisse nicht gezählt. Sie können die Konferenz jederzeit abbrechen, neu planen und eine neue hinzufügen. Daher war es erforderlich, Daten von außen zu empfangen und das Layout bereits basierend auf dem empfangenen JSON zu rendern. Es war in keiner Weise wichtig (unter Verwendung der Abrufmethode oder unter Verwendung von XMLHttpRequest), die Daten abzurufen. Wenn eine Person eine Polyfüllung zum Abrufen hinzugefügt und ihre Auswahl in der Readme-Datei markiert hat, gilt dies als Plus.
Registrieren eines Service Workers ohne Fehler und Arbeiten offline nach dem ersten Start.
Hier ist ein Beispiel eines Servicemitarbeiters mit Zeitplan-Caching beim ersten Start. Details zu Servicemitarbeitern, ihren Fähigkeiten und Arbeitsweisen (Strategien für die Arbeit mit dem Cache, Offline-Arbeit) finden Sie
hier .
Die Möglichkeit, eine Erinnerung so
einzustellen , dass sie nach 3, 7, 14 Tagen wirklich funktioniert. Es war notwendig, die Benachrichtigungs-API zu verstehen, deren
Link direkt in der Aufgabe enthalten war. Wir haben nicht auf eine bestimmte Implementierung gewartet, um zu überprüfen, ob die Zeit für einen Push gekommen ist. Jede Arbeitsoption wurde akzeptiert: Speicherung in localStorage, IndexDB oder regelmäßige Abfrage durch einen Servicemitarbeiter. Sie könnten sogar einen Push-Server erstellen (hier
ein Beispiel ), der jedoch offline nicht funktioniert. Ebenso wichtig war es, einen Push zu erhalten, nachdem die Seite geschlossen und nach einiger Zeit geöffnet wurde. Wenn die Erinnerung gleichzeitig mit dem Schließen der Seite "starb", zählte die Entscheidung nicht. Es ist cool, wenn die Jungs an die Inspektoren denken und die Gelegenheit nutzen, sich jetzt einen Schub zu geben - um nicht 3 Tage zu warten.
Die Möglichkeit, das Symbol auf dem Desktop (PWA) zu erstellen. Wir haben nach der Datei
manifest.json mit den richtigen Symbolen gesucht. Einige Leute haben diese Datei erstellt (oder die generierte in CreateReactApp belassen) - aber nicht die richtigen Symbole hinzugefügt. Bei der Installation ist dann ein Fehler wie "Benötigen Sie ein anderes Symbol" aufgetreten.
Codestil und Projektstruktur . Wie in der zweiten Aufgabe haben wir uns einen einzelnen Codestil angesehen (auch wenn er nicht zu unserem passte). Einige Leute haben Linters geschraubt - das ist großartig.
Fehler in der Konsole . Wenn sich direkt in der Konsole ein Indikator befand, dass etwas nicht stimmte und der Teilnehmer nicht darauf achtete, haben wir Punkte gesammelt.
Zusammenfassung
Lustig in den Entscheidungen der Teilnehmer:
- Ein Fragebogen enthielt den folgenden Text: „Ein befreundeter Programmierer half bei der Zusammenstellung der Reaktionsanwendung. Ich warf ihm Fragen zu was, wie und warum, sagte er. Es hat mir sehr gut gefallen, ich möchte mehr darüber wissen. “ Wir haben diesen Fragebogen von ganzem Herzen unterstützt, aber leider hat ihm der Freund des Bewerbers nicht wirklich geholfen, eine funktionierende Bewerbung einzureichen.
- Ein Kandidat hat einen Link zu GitHub gesendet, wo sich das RAR-Archiv befand - es ist schwer, dies irgendwie zu kommentieren. :) :)
- Ein anderer Kandidat im Kommentar in der ersten Zeile der Datei solution.js gab ehrlich zu, dass er den Algorithmus kopiert hat.
Wir haben Fragebögen von 76 Kandidaten erhalten und 23 davon ausgewählt. Fragebögen wurden uns nicht nur aus Minsk, sondern auch aus Moskau, St. Petersburg und sogar Tatarstan zugesandt. Einige Leute waren von ihren derzeitigen Berufen überrascht: Einer von ihnen ist ein medizinischer Prüfer, der andere ein Student an einer medizinischen Universität.
Es stellte sich eine interessante Verteilung des Erfolgs bei der Erledigung von Aufgaben heraus. Die Teilnehmer erledigten die erste Aufgabe im Durchschnitt um 60%, die zweite um 50% und die dritte als die schwierigste und durchschnittlich um 40%.
Auf den ersten Blick wirken die Aufgaben kompliziert und zeitaufwändig. Der Grund ist nicht, dass wir so viele Kandidaten wie möglich aussortieren wollen. Während des Trainings stehen die Schüler vor echten Aufgaben - einem Chat, Yandex.Music für Kinder oder Yandex.Weather für meteoabhängige Menschen. Dazu benötigen Sie eine Startbasis.
Ich erinnere mich, wie ich meine Einführung in SRI vor zwei Jahren sah und dachte, ich könnte es nie lösen. Die Hauptsache in diesem Moment ist, sich hinzusetzen, die Bedingungen sorgfältig zu lesen und zu beginnen. Es stellt sich heraus, dass die Bedingungen fast 80% der Lösung enthalten. Im Zustand der dritten Aufgabe (der schwierigsten) haben wir beispielsweise Links zu Servicemitarbeitern und zur Benachrichtigungs-API auf MDN hinzugefügt. Studenten, die den Inhalt der Links studiert haben, kamen ohne Schwierigkeiten zurecht.
Ich möchte wirklich, dass dieser Artikel von Kandidaten gelesen wird, die planen, in Zukunft in das SRI einzutreten, die Minsk-Schule nicht betreten oder eine andere Testaufgabe ausführen können. Wie Sie sehen, ist es durchaus möglich zu handeln. Sie müssen nur an sich glauben und alle Tipps der Autoren anhören.