今天，一套新产品已经在莫斯科
的Yandex界面开发学院开业。 从9月7日至10月25日，将进行第一阶段的培训。 来自其他城市的学生将可以远程或亲自参加该活动-该公司将为旅馆支付道路和住宿费用。 其次，最后阶段将持续到12月3日，只能亲自完成。
我叫Julia Seredich，我们和Sergey Kazakov一起写了这篇文章。 我们都是Yandex明斯克办事处的界面开发人员，也是过去几年SRI的毕业生。
在莫斯科开放注册之际，我们发布了对前一所学校-明斯克的入学任务的分析。
如果我们追溯SRI任务的历史，那么每年我们都会为程序员测试三个重要技能：
- 布局。 每个开发人员都应该能够排版。 您不会让Seryozha叔叔为整个团队排版，而您只编写脚本。 因此，每个学生必须证明自己知道如何排版。
- Java脚本 如果事情仅限于排版，那么我们将没有接口开发学校，而是布局学校。 需要恢复漂亮的折叠式界面。 因此，在JS上总是有一个任务，但是有时在算法上也是一个任务-我们非常喜欢它们。
- 解决问题也许是开发人员的主要技能。 创建界面时，一切都在快速变化。 就像刘易斯·卡罗尔（Lewis Carroll）所说：“您必须以最快的速度跑到同一个地方，但要到达另一个地方，则需要以两倍的速度跑。” 我们每天都面临着新技术-有必要对它们进行反思并能够理解它们。 因此，在第三项任务中，我们建议了解新手开发人员通常不熟悉的技术。
在分析每个任务时，我们不仅会告诉您正确的程序，而且还会告诉您常见的错误。
任务1：投资组合
Yandex的设计师，知道如何排版的Alexei Cherenkevich和他在服务中的同事界面设计师Sergey Samsonov共同完成了第一个任务。
条件
创建作品集网站：向我们介绍您自己，您的工作和对学校的期望。 该网站应尽可能匹配建议的布局（布局的链接： 1000px ， 600px ， 320px ， 规格 ）。 我们仅对布局感兴趣，因此请不要使用JavaScript。
在检查时，我们将考虑：
- 填充大小，颜色准确性，字体样式，大小尺寸；
- 语义布局；
- 元素的各种状态的存在：悬停时显示按钮和链接，突出显示活动的输入字段等；
- 跨浏览器兼容性（已在流行浏览器的最新版本中选中）。
加号将是：
- 使用现代CSS解决方案：flexbox，grid等；
- 自适应布局；
- 使用前置和/或后置处理器，汇编，最小化，优化输出代码；
- HTML表单验证，样式化的文件上传按钮。
该任务非常繁琐，因此您可以跳过无效的任务。 这会稍微降低分数，但是您仍然可以证明自己的知识。 完成后，向我们发送两个链接-到GitHub上的产品组合和源代码。
作业中建议的布局不仅具有用于移动设备，平板电脑和台式机的屏幕，而且还具有真实的规格。
为了给第一个任务的测试结果增加尽可能多的客观性，此测试有很多标准。
标准
完成的网站 。 这似乎很明显，但是有些人完全错过了一些障碍-他们想节省时间，或者他们无法做到。 布局可以有条件地分为四个主屏幕：带化身的主屏幕，带SRI期望列表的块，带投资组合的块和带联系信息的块。 它们可以分节制作，也可以简单地使用div制作，主要是四个块都可用。
配套布局 。 设计师制定了单独的规范（包括颜色，版式，按钮状态等），以使求职者更加容易。 以下是有关第一个屏幕的缩进和功能的提示。 考虑到设计师的所有愿望的人感到非常满意：例如，第一个屏幕的显示尺寸不应小于视口的高度。
自适应布局 -这是在不仅仅构成接口的情况下，根据布局，在三种分辨率下，每个像素都是一个像素一个像素。 在中间状态下，布局也不应崩溃。 有人忘记限制容器的最大宽度，将所有内容拉到1920像素，有人弄乱了背景，但总体而言，候选人做得很好。
语义布局 。 “他们告诉世界多少次”，链接应该用<a>框起来，按钮应该用<button>框起来。 幸运的是，大多数候选人都遵守了这一要求。 并不是每个人都通过使用div标签将SRI期望中的潜伏列表识别出来，但这并不可怕。 有一个候选人插入了他只知道的所有语义标记-在什么地方是必需的，在什么地方是不必要的。 例如，用<section>和<article>代替列表。 尽管如此，语义-它是关于了解页面的组成和每个块的目的（在这里做的最多），以及在使用预处理器和/或后处理程序（在这里很少这样做，尽管它也很重要-更少，并且scss最经常被连接） 。
工作滑块 。 在作业中，我们写道无法使用JS。 这里测试了解决问题的能力-可以使用<input>和<label =“＃id”>连接词来制作滑块。 所有魔术都发生在选择器级别＃button-N：已选中〜.slider-inner .slider-slides。 当我们单击输入复选框之一时，它将进入选中状态。 我们可以使用它，并使用幻灯片将所需的翻译分配给我们的容器：转换：翻译（-33％）。 请参见
此处的滑块实现。
下拉列表 。 全部归结为<input name =“ accordion” type =“ radio”>和一个类似的选择器：.accordion-item输入：已选中〜.accordion-item__content。 在
此处查看实现。
状态的存在：悬停，活动和focu * 。 非常重要的一点。 与界面交互时，舒适感取决于他。 用户应始终收到有关其操作的反馈。 在与问卷的整个交互过程中都检查了该项目。 如果我单击“给我打电话”按钮，并且在视觉上没有任何反应（即使发送了请求）-这很糟糕，因为那样我会一次又一次单击它。 结果，将发送十个请求，并且我将被回十遍。 不要忘记移动设备上没有鼠标-这意味着不应该将鼠标悬停。 还有一件事情与那些符合语义学观点的人无关。 如果控件不是交互式元素，则将鼠标悬停在其上时，光标将保持标准状态。 即使您已指定悬停响应，它看起来也很不整洁。 不要小看cursor：指针。
动画制作 重要的是，反应元素发生的所有事情都必须平稳。 生活中没有任何瞬间，因此悬停和活动过渡的存在足以使界面更加愉悦。 好吧，那些为滑块和列表添加动画的人通常做得很好。
采用最新技术 。 许多人使用flex，但没有人使用网格完成任务。 如果正确使用了flex，则计算一个项目。 如果在某个地方，由于这些相同的弯曲，布局就分开了-las，您没有得到更多的积分。
表格的确认 。 所需要做的就是向每个输入表单添加必需的属性。 我们向那些将电子邮件字段验证为电子邮件的人添加了分数。
文件上传按钮的样式化 。 我们希望看到这样的形式：<input type =” file” id =” file” name =” file” class =” inputfile” />和<label for =” file”>选择文件</ label>。 此外，还需要隐藏输入和样式标签。 还有另一种常见的方法-进行透明输入并将其放在按钮顶部。 但是，并非所有浏览器都允许设置<input type =“ file”>的样式，因此不能将这种解决方案称为完全跨浏览器。 在标签上，从语义上讲更正确。
跨浏览器兼容性 。 我们检查了最新浏览器的最后两个版本（没有IE，参加者都很幸运），以及iPhone的Safari和Android的Chrome中，一切是否正常。
相反，如果有人使用JS或Bootstrap，我们会获得分数：两者都使整个任务变得毫无意义。 此外，使用Bootstrap的参与者不仅获得减分，而且在语义和实现元素方面也失去了很多要点。
那些在Internet上的某个地方标记了站点的人没有什么特别的优势-但是当检查员不必下载存储库并在计算机上本地运行它们时，他们感到非常高兴。 因此，这在业力方面具有优势。
首要任务对学生非常有用。 那些我们尚未接受的人现在有一个汇总的摘要-您可以自豪地将其附加到所有回复中，也可以将其放在gh页上。
任务2：运输路线
该任务的作者是搜索界面小组负责人Denis Balyko。
条件
您有星空图。 它以光秒为单位显示每颗恒星的名称，以及到其他恒星的距离。 实现解决方案功能，该功能应采用三个参数：一个对象，其中的键是星星的名称，值是到星星的距离（在空间单向交通中），以及路径的起点和终点的名称-分别是start和finish。 该函数应返回从星形起点到星形终点的最短距离以及必须走的路径。
功能签名：
const solution = function(graph, start, finish) {
输入样例：
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';
样本输出：
{ distance: 90, path: ['start', 'A', 'D', 'finish'] }
注意：解决方案框架位于src /文件夹中，将您的解决方案放在solution.js中。
验证第二项任务是最自动化和客观的。 大多数人都认为有必要实施Dijkstra的算法。 那些找到他的描述并在JS上实现算法的人很棒。 但是，在检查作业时，我们遇到了很多工作，但都存在相同的错误。 我们在互联网上搜索了代码片段，然后从参与者那里写下了该算法的文章。 有趣的是，许多人都从文章中复制了代码以及作者的评论。 这样的工作得分很低。 我们不禁止使用任何来源，但我们希望此人深入研究他所写的内容。
标准
主要分数被授予测试。 有时候，很明显的是，这些家伙通过重命名文件夹而误用了存储库，而测试失败只是因为他们找不到所需的文件。 今年，我们试图帮助这些人，并将一切归还给他们。 但是明年我们计划切换到竞赛系统，这不会被原谅。
也有“人工”的手动标准。 例如-单个代码样式的存在。 没有人减少使用制表符而不是空格的问题，反之亦然。 如果您根据一个已知规则将单引号与双引号交替使用，并分别放置分号，则是另一回事。
另外，考虑了解决方案的清晰度和可读性。 在世界各地的所有会议上，他们都说程序员的工作由80％的人员阅读他人的代码组成。 即使是学童，也要与策展人和其他人一起进行代码审查。 因此，该标准具有重要意义。 在有些作品中，没有超过一个字符的变量-请不要这样做。 除了与斯特拉·张的评论相同的评论外，与会人员的评论非常令人高兴。
最后一个标准是自动测试的可用性。 只有少数几个人添加了它们，但是对于每个人来说，这已经成为业力的巨大优势。
正确的决定：
const solution = function(graph, START, FINISH) {
任务3：事件日历
它是由界面开发人员Sergey Kazakov和Alexander Podskrebkin编写的。
条件
编写一个迷你日历以显示时间表。 您可以选择自己喜欢的任何时间表。 例如，2019年前端会议的时间表。
日历应该看起来像一个列表。 没有其他设计要求。 可以设置3天，7天和14天的事件提醒。 首次通过Internet下载后，日历应打开并可以离线使用。
有用的资源
前端会议时间表：
confs.tech/javascript?topics=javascript%2Bcss%2Bux
服务人员：
developer.mozilla.org/en/docs/Web/API/Service_Worker_API/Using_Service_Workers
developers.google.com/web/fundamentals/primers/service-workers
通知API：
developer.mozilla.org/en/docs/Web/API/Notifications_API
第三个任务是最有趣的测试，因为有很多解决方案，每个解决方案都有自己的解决方案。 我们检查了候选人如何处理不熟悉的技术-他是否知道如何调查，是否测试了他的解决方案。
标准
编造的日历 。 是的，他仍然需要弥补。 有些人从字面上理解这种情况，并且没有插入一行CSS代码。 它看起来不是很个人化，但是如果一切正常，那么积分并没有减少。
从源检索事件列表 。 这不是排版任务，因此未计入其中的事件列表。 您可以随时取消会议，重新安排会议，添加新会议。 因此，需要从外部接收数据并根据接收的JSON渲染布局。 以任何方式（使用fetch方法或使用XMLHttpRequest）获取数据都很重要。 如果某人添加了一个polyfill以进行提取并在自述文件中标记了他的选择，则该计数为加号。
在没有错误的情况下注册服务工作者，并在首次引导后脱机工作。
这是一个服务工作者
的示例，该服务工作者在首次引导时进行了日程表缓存。 有关服务工作者，其能力和与他们合作的方式（使用缓存的策略，脱机工作的策略）的详细信息，可以在
此处找到。
可以设置提醒 ，使其在3、7、14天后真正起作用的功能。 有必要了解Notifications API，该
链接直接在任务中。 我们没有等待任何特定的实现来验证是否需要推进。 接受任何可行的选择：将其存储在localStorage，IndexDB中或由服务工作者进行定期轮询。 您甚至可以制作一个推送服务器（这里是
一个示例 ），但是它不能离线工作。 关闭页面并在一段时间后打开后进行推送同样重要。 如果在关闭页面的同时提醒“死了”，则该决定不计在内。 伙计们考虑了检查员并立即有机会推动检查，这很酷-不用等待3天。
能够在桌面上制作图标 （PWA）。 我们检查了带有正确图标的
manifest.json文件。 有些人制作了此文件（或将生成的文件留在了CreateReactApp中）-但未添加正确的图标。 然后，在尝试安装时，出现诸如“需要另一个图标”之类的错误。
代码风格和项目结构 。 与第二项任务一样，我们着眼于单一的代码样式（即使它与我们的样式不匹配）。 有些人把短绒砸死了-太好了。
控制台中的错误 。 如果控制台中直接有一个指示器指示出了问题，并且参与者没有注意它，那么我们就记分了。
总结
参加者的决定很有趣：
- 一个调查表包含以下文本：“一位朋友程序员帮助组装了react应用程序。 我告诉他有关什么，如何以及为什么的问题。 我非常喜欢它，我想进一步了解它。” 我们全心全意地支持这份调查表，但不幸的是，候选人的朋友并没有真正帮助他提出有效的申请。
- 一名候选人向RAR档案所在的GitHub发送了一个链接-很难对此发表评论。 :)
- 在solution.js文件第一行的注释中，另一位候选人诚实地承认他复制了该算法。
我们收到了来自76位候选人的问卷，并从中选择了23位。 不仅从明斯克，还从莫斯科，圣彼得堡甚至Ta斯坦向我们发送了问卷。 有些人对他们目前的职业感到惊讶：其中一个是体检医师，另一个是医学院的学生。
事实证明，完成任务非常有趣。 参与者平均完成了第一项任务的60％，第二项完成了50％，而第三项则是最困难的任务，平均完成了40％。
乍一看，这些任务看起来很复杂且耗时。 原因不是我们要淘汰尽可能多的候选人。 在培训过程中，学生要面对真正的任务-聊天，Yandex（儿童音乐）或Yandex（气象依赖者）天气。 为此，您需要一个起点。
我记得两年前如何看待我对SRI的介绍，并以为我永远无法解决它。 此刻的主要事情是坐下，仔细阅读条件并开始做。 事实证明，这些条件几乎包含了解决方案的80％。 例如，在第三个任务（最困难的情况）下，我们在MDN上添加了指向服务工作者和Notifications API的链接。 研究链接内容的学生可以轻松应对。
我真的希望这篇文章能被打算将来进入SRI，无法进入明斯克学校或开始执行任何其他测试任务的候选人阅读。 如您所见，采取行动很有可能。 您只需要相信自己并听听作者的所有提示。