Новый курс от Школы разработки интерфейсов. В Екатеринбурге и везде

Меня зовут Денис Чистяков, и я руковожу группой разработки интерфейсов в Екатеринбурге. Мы занимаемся фронтендом: делаем множество сложных, ярких и красивых страниц для приложений Яндекса.

Два года назад мы запустили свою Школу разработки интерфейсов, в рамках которой пытаемся в максимально сжатый срок превратить веб-разработчиков в крутых веб-разработчиков, готовых к специфике нашей компании, нашей инфраструктуре и нашим технологиям. Этот год тоже не стал исключением. В 2014 году ШРИ пройдет в Минске и Екатеринбурге ^[1].

Сегодня я хочу поделиться с вами курсом, собранных из лучших лекций в нашей школе за последние годы, а также рассказать о том, что в ней будет по-новому.

В этом году мы приняли решение отойти от ставшего привычным за два года формата Школы и попробовать провести её в совершенно новом ритме. В этом году обучение разделится на две части, условно говоря, очную и заочную.

^[2]

Мы понимаем, что часто желающие поучиться у нас выкраивают время между учебой, работой и семьей. А мы не обычная школа и не вуз, где нужно обязательное присутствия на уроках и парах. У нас есть уверенность, что те люди, которые попадают в ШРИ, обладают здоровым азартом, ответственны и понимают то, для чего они начали путь обучения. (Да-да, мы знаем, что вы крутые :)

Поэтому, обобщив все вышеперечисленное, мы решили, что теоретический материал учащиеся будут осваивать самостоятельно в удобное для них время. Но чтобы почувствовать вкус создания интерфейсов, мало много читать и смотреть. Нужно еще много практиковаться и кодить. Поэтому второй — очной — частью обучения будут практические занятия (которых, важно заметить, не было в прошлых ШРИ).

Это будут мини хакатоны, на которых ребятам придется реализовывать целый проект. А помогать им в этом будет команда яндексовых менторов. И в этом есть много плюсов: общение, возможность поработать бок о бок с профессионалами, получить «живой опыт» и, самое главное, попробовать почувствовать себя частью Яндекса.

Что еще? Еще будет история про работу в команде. Очень часто успешность вашего продукта зависит от слаженной работы многих людей. Круто если вы все можете сделать сами, но чаще бывает все немного сложнее. Понятное дело, что получить навык работы в команде без команды — достаточно сложная задача. Поэтому во время практических занятий мы также уделим внимание этому аспекту. Студенты смогут придумывать, планировать, договариваться, строить архитектуру собственного проекта и выбирать технологии для реализации. Придется принимать решения и нести ответственность за готовый продукт. И именно в таком формате, с такими нововведениями мы стартуем в этом году.

Сейчас хотелось бы немного подробнее остановиться на курсе лекций, о которых говорилось выше.

Повторюсь, действительно у нас много качественного материала от опытных разработчиков, которые кроме того, что являются действительно крутыми специалистами, готовились специально для выступления перед студентами, продумывали контент каждой лекции, чтобы рассказать самое полезное. И самая большая ценность всего этого багажа материала в том, что он открытом доступе. Каждый может самостоятельно в свободном режиме с ним ознакомиться, даже не обучаясь в Школе.

В процессе отбора материалов для домашнего изучения, мы старались отобрать не просто самое лучше, но самое ценное и полезное. В итоге у нас получился курс видеолекций, который поможет любому желающему погрузиться в веб-разработку.

Структура курса

Весь материал мы разделили на три блока, в соответствии с циклом разработки: это верстка, «оживление» наших страниц JS`ом и блок про выкатку и оптимизацию. С одной стороны, каждая лекция наполнена отобранной информацией по теме и курс дает хорошую базу. С другой стороны, каждый блок нужно воспринимать как якорные точки того, что нужно знать. Что-то после просмотра лекции нужно взять и попробовать сделать самостоятельно, где-то мы рекомендуем списки литературы и дополнительные источники для изучения.

Курс полезен и начинающим разработчикам, которые только делают первые шаги в этом действительно крутом деле, и тем, кто уже имеет некий опыт работы. С его помощью можно как получить новые знания и найти ответы на свои вопросы, так и просто структурировать уже имеющийся материал у вас в голове.

Список лекций появился неспроста. Лекции идут в том же порядке, в каком обычно происходит процесс разработки: статическая верстка, «прикручивание» яваскрипта, затем — отладка и тестирование кода. За два года мы прочитали и записали несколько курсов в разных городах, и эта подборка, на мой взгляд, является самой удачной для целей обучения. Я выбрал самые краткие и содержательные лекции, чтобы ученик мог получить представление обо всем процессе разработки, а потом при желании углубляться в детали и смотреть другие лекции.

Верстка: HTML+ CSS

В работе над любым интерфейсным проектом нам никуда не деться от верстки. Сейчас технологии HTML и CSS шагнули очень далеко, и много крутых и даже анимированных штук можно реализовать уже на данном этапе разработки, даже не прикасаясь к JS.

В данный блок мы поместили девять лекций, рассказывающих обо всём необходимом для верстки макета:

• вводная лекция о языке разметки HTML ^[3], истории его создания и развития, а также о базовых тегах;
• вводная лекция о каскадных таблицах стилей CSS ^[4], принимающих на себя всю оформительскую часть верстки;
• лекция о способах выборки элементов дерева документа ^[5] и наложения на них стилей из CSS;
• tech.yandex.ru/education/shri/ekb-2013/talks/1492/ ^[6] tech.yandex.ru/education/shri/ekb-2013/talks/1493/ ^[7] tech.yandex.ru/education/shri/ekb-2013/talks/1494/ ^[8] — лекции о потоке отображения страницы в браузере, порядке вывода элементов дерева и правил их расположения;
• основы пользования и настройки фотошопа ^[9] как самого главного инструмента для работы с макетом;
• о методологии верстки БЭМ ^[10], зародившейся в Яндексе: как и почему мы к ней пришли и о том, что БЭМ это не больно и просто;
• рассказ о системах контроля версий ^[11], о том почему без них невозможно вести крупные проекты, а также рассказ о GIT, который так полюбили в Яндексе.

JavaScript

Блок лекций про «оживление» верстки JS`ом рассказывает о возможностях языка программирования JavaScript, и о том, как с его помощью сделать нашу пока статичную страницу более живой, интерактивной и динамичной:

• расскажет зачем человечество наплодило такое огромное количество языков программирования ^[12] и почему нам не хватает C;
• расскажет об основных возможностях JS ^[13], его особенностях, типах данных и конструкциях языка;
• лекция о способах «доставки» данных на страницу ^[14] в реальном времени и получении ответов от серверов без перезагрузки;
• tech.yandex.ru/education/shri/msk-2013/talks/1432/ ^[15] tech.yandex.ru/education/shri/msk-2013/talks/1579/ ^[16] лекции о событийной модели в JS, принципах обработки событий браузерами, будильниках, таймерах и всём-всём-всём асинхронном;
• рассказ о том как появился серверный JS ^[17], чем он хорош и почему на нем получаются прекрасные фронтэнд-сервера;
• лекция о работе с объектным деревом документа ^[17] и популярном фреймворке jQuery, упрощающем нашу жизнь;
• лекция о том какими могут быть шаблонизаторы ^[18], в чем плюсы и минусы того или иного решения и о том, почему мы написали свой;
• tech.yandex.ru/education/shri/msk-2013/talks/1581/ ^[19] вводная лекция о нашем фреймворке i-bem.js который делает работу на клиенте простой, декларативной и с привкусом БЭМа;
• tech.yandex.ru/education/shri/ekb-2013/talks/1495/ ^[20] tech.yandex.ru/education/shri/msk-2013/talks/1345/ ^[21] лекции об истории и принципе работы протокола HTTP и том как на его основе строятся веб-сервисы.

Оптимизация и деплой

Блок лекций про те самые 20% задач, которые занимают 80% времени — выкатка изменений на продакшн сервера, профилирование, оптимизации, а также различные виды тестирования:

• рассказ о том, как происходит процесс разработки сервиса в Яндексе ^[22], и как наш опыт можно использовать в других проектах;
• tech.yandex.ru/education/shri/ekb-2013/talks/1561/ ^[23] tech.yandex.ru/education/shri/msk-2013/talks/1580/ ^[24] рассказы о всевозможных видах тестирования: автоматизированном, ручном, регрессионном, юнит-тестами и многих других;
• лекция отвечает на очень важный вопрос «Что происходит когда я нажимаю Enter в адресной строке браузера? ^[25]»;
• лекция о регулярных выражениях ^[26] — гибком и мощном средстве обработки текста, без которого не обходится ни один язык программирования;
• рассказ об одном из самых эффективных способах улучшения и приведения в порядок кода в группе ^[27] — Code review.

Но если ты хочешь попробовать свои силы и поучаствовать в практических занятиях, задать свои вопросы сотрудникам Яндекса или просто покодить вместе, мы с радостью приглашаем к нам в Школу! Участие и обучение полностью бесплатны, а для поступления нужно только желание и успешное прохождение вступительного испытания. Всю необходимую информацию можно найти здесь: bit.ly/shri-ekb_2014 ^[1]

Не бойся и приходи к нам в ШРИ! Поверь, ты сможешь многому научиться у нас, а мы — у тебя.

Автор: DenCh

Источник ^[28]