Download to read offline
Обучение фронтенд разработке
- 1.
- 2.
- 4.
- 5.
- 6. начали получили зачёты лекции практика 60 30 20 сквозная домашка курсыв 2014 году лекторы 2(+2)
- 7. <= 1 лекциив неделю
- 8.
- 9. C# Python Assembler JScript Компьютерные сети Архитектура ЭВМ матан функан теорияавтоматов диффуры теория вероятностей комбинаторные алгоритмы
- 10.
- 11. HTML тег атрибуты CSS Шрифты и текст Модельотображения Анимации Браузер Photoshop селекторы семантика и микроформаты flexbox блочная модель форматирования позиционирование transition аппаратное ускорение модульная система вёрстки контекст наложения 3d трансформации reflow и repaint парсинг HTML и CSS растровые и векторные форматы
- 12. Типы данных примитивы атрибуты Функции this Замыкания Асинхронность Прототипы DOM областьвидимости приведение типов bind/call/apply function expression и function declaration лексическое окружение eventLoop регулярные выражения всплытие контекст наложения конструкторы DOM-события классы в ES2015 история языка JavaScript
- 13.
- 14.
- 15.
- 16.
- 17.
- 21.
- 23.
- 24. Результаты вёрстка js автомат допущено дозачёта сдавали зачёт сдали зачёт 25 28 29 25 12 8 9 8 всего 34 36
- 26.
- 27. Оценка работы все сдалиоба зачёта A B C D 10 1 19 10 11 10 10 7 E 5 4
- 29.
- 31.
- 32.
- 34.
- 35.
- 36.
- 39.
- 42.
- 43. сбор фидбека доступ извнутренней сети до surge сложные первые домашки текстовые лекции Маркировка PR hrundel-board менторы-студенты менторские веб-группа автотесты проблемы с вентиляцией запасная задача звёздочки и система поощрений разделение ролей улучшенный хрюндель флуд в чатике автоматизация поиска списывальщиков несколько каналов в Slack дедлайн до 3-х ночи корреляция взятых на стажировку с оценками и результатами в первом семестре запасные ноутбуки на хакатоны автоматизация сбора данных на первой паре
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 53. Ссылки – https://github.com/urfu-2015 –лекции, текстовые лекции и задачи – http://www.youtube.com/playlist?list=PLKaafC45L_SThr77Wm716ba3Ca-mOr-xc – видео лекций 2-го семестра
- 54. Олег Мохов Разработчик интерфейсов Контакты @olmokhov olmokhov +7(912) 621 45 27 mokhov@yandex-team.ru
Editor's Notes
- #3 В ШРИ с некоторых пор практика проходит посредством проведения хакатонов, нам эта практика понравилась и мы тоже решили, что студентов нужно объединить в группы и дать большую общую задачу, которую бы они решали. Мы эту задачу придумали, назвали её фотоквест. Человек заходит в него, и проходит квесты, т.е ему выдаётся набор фотографий с различными достопримечательностями, например, цель квеста найти и сфотографировать эти достопримечательности. Тут много всего: и работа с файлами, и авторизация, географическое позиционировании и много чего ещё можно придумать.
- #4 но для начала, возможно кто-нибудь знает этого человека? [5 секунд паузы]. Его зовут Максим Викторович Баклановский. Он работал в УрГУ на мат-мехе, когда я там учился и именно он один из авторов идеи введения
- #5 веб-группа. После 2-го курса, студенты направления компьютерные науки выбирают специализацию. Я выбрал веб-группу, и я не знал тогда, что это предопределит мою дальнейшую судьбу. У веб-группы в качестве обязательных спецкурсов читаются курсы XSLT, веб-семинар и DHTML. Помимо этого на самом направлении есть курс Интернет
- #6 веб-группа. После 2-го курса, студенты направления компьютерные науки выбирают специализацию. Я выбрал веб-группу, и я не знал тогда, что это предопределит мою дальнейшую судьбу. У веб-группы в качестве обязательных спецкурсов читаются курсы XSLT, веб-семинар и DHTML. Помимо этого на самом направлении есть курс Интернет
- #7 В общем-то всё это дело существует благополучно до сих пор и мы с Сергеем Жигаловым в 2014 году решили попробовать себя в новом амплуа – преподавателей в университете. Да, это был эксперимент, первый блин комом, но с чего-то надо было начинать. Собственно наш первый блин позволил нам набить несколько шишек, чтобы в следующем году, когда ШРИ вообще не планировалось проводить, мы смогли спроектировать курс опираясь на них
- #8 первый и достаточно правильный вывод – у лектора не должно быть больше одной лекции в неделю. Не важно даже была готова лекция или нет. Не должно. Это сложно и с точки зрения совмещения с работой, это сложно эмоционально. Это просто очень сложно – два раза в неделю вещать по полтора-два часа. Второй вывод – нужно делать упор на практику
- #9 и причём делать это регулярно. Одна из проблем прошлого года была в том, что т.к нас было двое мы не могли уделять достаточно времени для того чтобы придумывать и давать ребята много практики и фидбека по домашним заданиям. И это нужно было менять
- #10 если взглянуть на курсы, которые читаются в УрФУ, то становится понятно, что студенты выходят оттуда с очень неплохим математическим и техническим бэкграундом. А с учетом того, что они только начинают свой профессиональный путь – они не избалованы деньгами и могут работать с полной самоотдачей
- #11 А также решили что курсы нужно читать не 1, а 2 семестра. Тогда мы сможем и больше рассказать, и, главное, окончание 2-х семестровых курсов отлично ложится под начало летних стажировок и мы сразу сможем забирать лучших ребят к себе, пока знания ещё свежи
- #12 В первом семестре мы решили сделать упор на азы и разделили курс на два: вёрстка и JavaScript. И стали с самых азов погружать ребят в профессию. Здесь можно увидеть на какие темы мы читали лекции по вёрстке [возможно дать посмотреть]
- #13 а здесь лекции по JavaScript’у. Заметьте, что лекции вообще никак не касаются браузерного JavaScript, а впервую очередь посвящены именно языку JavaScript. К каждой лекции, кроме последней мы придумали задачи, закрепляющие определённые знания. Как-то так получилось с самого начала, что мы несколько нестандартно подошли к формулировке задач
- #14 Здесь сполна раскрылся талант Сергея Гоголева, который и формулировал в итоге задачи, даже сейчас я перечитываю эти задачи как поэмы, ну а картинки к каждой задаче – просто огонь
- #15 Помимо заманчивого текста в каждой домашке были дополнительные задания, допы, они были не обязательны для того чтобы получить зачёт, но позволяли тем, кто сделает их, закрепить тему ещё глубже.
- #16 Вот одно из лучших решений, к задаче «Анимации», суть задачи была сделать фотогалерею с возможностей пролистывания, а также по нажатию красивый эффект появления кулинарного рецепта. Самое клевое в этой задаче и всех её решениях, что требовалось это сделать без JavaScript’а. Курс же называется вёрстка. И таких задач мы придумали целых 20, по 10 на каждый курс
- #17 Конечно, зная студентов, мы сразу же предупредили ситуацию, при которой они ринулись бы сдавать все задачи в конце семестра, для получения зачёта и сформулировали критерий. Если задача сдается в течение недели после лекции, а потом правки на замечания вносятся в течение следующей недели (т.е за 2 недели). То студент получает 1 балл. Иначе полбалла. Для автоматического зачёта нужно было набрать не менее 8 баллов
- #18 Задачи проверяют менторы, т.е сотрудники Яндекса. За каждым студентом присматривают два человека, один по вёрстке, другой по JS. Общение мы организовали посредством Slack, а приём заданий через Pull Request’ы на github. Вообще мы постарались учесть все блины прошлого раза, но один, самый большой блин, мы никак не предусмотрели, а именно вот что
- #19 это первая пара. Здесь на фотографии даже не поместились все студенты. Более того люди не поместились в аудиторию, т.к на первые пары ходили больше 100 человек. Я честно не знаю почему так получилось, потому что в прошлом году, как мне кажется мы потратили даже больше усилий по тому чтобы распиарить наши курсы на факультете. И тогда пришло 50 человек. А тут больше 100. Загадка!
- #20 ещё более удивительно, что многие сдавали первые задачи. Тут, конечно, есть объяснение – первые задачи были очень простыми. Но все равно нужно было хотя бы чуть-чуть усилий потратить, чтобы их решить, и чтобы больше 100 человек добровольно это делали. Это очень круто, конечно. Мы тратили очень много времени поначалу на проверку задач. Да, не скрою, здесь и наша вина, т.к мы не озаботились и не написали заблаговременно тесты. Многое из этого нам пришлось делать учась на горьком опыте.
- #21 или например такая банальная задача: назначить ментора студенту. Казалось бы её легко можно решить вручную и мы тоже так думали. Но когда у вас 100 задач, то эта 101 задача превращается в головную боль. Да, мы учились на горьком опыте. И написали к 3-й паре студентов инструмент, который умел назначать ментора автоматически. Мы назвали его хрюндель. Впоследствии он же подсчитывал студентам баллы, а сейчас уже умеет даже пинговать ментора или студента, если те припозднились с правками или проверкой
- #22 конечно к 3-4 паре мы более-менее начали справляться с нагрузкой. Появились новые менторы, да и студентов просто стало меньше. Анализируя первый семестр на ретроспективе мы пришли к нескольким выводам – почему же так произошло. И помимо понятной причины: быть первопроходцем сложно. Есть несколько выводов, которые можно взять на будущее
- #23 например, на первые пары ходило очень много студентов с 1-2 курса. У них ещё не началась нагрузка по основным курсам, а наш курс мы в этот раз стартовали почти тогда же что обучение в универе, а не в октябре, когда стартуют все спецкурсы (собственно это и причина ажиотажа на первых парах). Конечно к середине семестра почти все младшекурсники отсеялись и до второго семестра дошла всего одна особенно упорная девушка.
- #24 ещё одной не до конца понятно системой у нас была схема выставления балла. Кто-нибудь помнит её? Неделя на задачу и неделя на правки, напомню. Так вот, конечно же, иногда у менторов не было физической возможности отсмотреть задачу, а получалось, что виноват студент? Мы решили эту схему исправить и сделать как в шахматах. Т.е в шахматах у каждого игрока есть часы, заведенные, например, на 30 минут. Когда игрок делает ход он нажимает кнопку и часы уже тикают на стороне оппонента. Если чьё-то время кончается, то он автоматически проигрывает. Во втором семестре у нас стало точно так же.
- #25 вот результаты
- #26 но вообще студенты – это студент. Расскажу две истории. Один студент мучался 6 часов на пересдаче. Не сдал, мы предложили ему вариант: он доделывает за две недели до 2-го семестра 5 задач, которые он не сдал, и мы берём его во второй семестр. В итоге неделю он не появлялся, я спросил у него: будет ли сдавать. Он уверил что будет, ещё 4 дня молчал, потом сказал что болел и начал с разницей в 5 минут сдавать задания. Я быстро по самому последней задаче (т.к её сдали всего 20 человек), нашел у кого он списал, а дальше, идя по всем остальным решениям, конечно же обнаружил, что он списал вообще все 5 задач. Второй студент, также списывавший, попался на этом когда получал допуск. Мы обнаружили сам факт списывания случайно, но забавность факта в том, что он в процессе списывания удалил часть кода. Т.е у него вызывалась в коде функция, которой у него не было. А дальше на консультации был такой ситуация: Мы спрашиваем: «Что делает функция такая-то?» Студент читает название и пытается из него угадать что же именно она делает. Мы просим его показать код. Он пытается найти. Не находит и говорит: «Нет». Вот так. Студентам нельзя верить.
- #27 В конце семестра, помимо собственно зачётов мы провели своеобразный аналог ревью и решили оценить студентов по 5-ти бальной шкале от 0 до 4, потом я правда перевёл эти оценки в более знакомые любому яндексоиду A, B, C, D, E. Вот наши результаты:
- #28 результаты достаточно занятные, но вполне справедливые. Тут интересно почему из 5-ти Е-шек во второй семестр попали 4. Дело в том, что ещё одну Е получил парень, который случайно узнал о наших курсах, когда я был у него ментором на HTMLAcademy, а вообще он был из Севастополя. Но у этого парня были и желание, и силы и он упорно сдавал задачи. К сожалению 2-й семестр он рассчитан на очную работу, хотя задачи он продолжил сдавать
- #29 собственно почти всё про первый семестр. В конце мы ещё провели сбор фидбека, вот, например, очень интересно посмотреть на то как сами студенты оценили рост своих знаний за время курса
- #30 ну или вот очень интересная статистика о том сколько времени студенты тратили на домашки
- #31 Казалось, у нас всё налажено и теперь надо только лишь провести второй семестр. Но как и порой в футболе два абсолютно разных тайма, так и у нас получилось: второй семестр оказался совершенно не похож на первый.
- #32 Второй семестр должен был стать с упором на практику, это и понятно. Мы готовим студентов к стажировке, да и у них хорошая теоретическая база, которую надо научиться применять в бою. Надо только рассказать о том, как этот бой выглядят
- #33 В ШРИ с некоторых пор практика проходит посредством проведения хакатонов, нам эта практика понравилась и мы тоже решили, что студентов нужно объединить в группы и дать большую общую задачу, которую бы они решали. Мы эту задачу придумали, назвали её фотоквест. Человек заходит в него, и проходит квесты, т.е ему выдаётся набор фотографий с различными достопримечательностями, например, цель квеста найти и сфотографировать эти достопримечательности. Тут много всего: и работа с файлами, и авторизация, географическое позиционировании и много чего ещё можно придумать.
- #34 Так вот, помните этот замечательный эпизод из фильма Операция Ы? «За изобретение 5, а по предмету неуд». Так же получилось и у нас. Идея хакатонов отличная, но под неё нам приходилось порой многие вещи пересматривать на ходу. Например, первый хакатон у нас был в марте, а до него у нас была возможность прочитать только 6 лекций. Нам надо было дать первые направления, но этих направлений было настолько много, что некоторые лекции читались больше 3-х часов. А лекции и у нас начинались в 6 вечера
- #35 Сами лекции можно условно разделить на три темы, первая – это клиентская разработка. Здесь мы рассказывали про особенности вёрстки под мобильные и про адаптацию для людей с ограниченными возможностями, про react.js и redux, про препроцессоры и про браузерные спи
- #36 Другая часть лекция была посвящена серверной стороне, а именно углублению в node.js. Тут и про express, и про паттерны, и про REST и про производительность йоды
- #37 И ещё часть лекций была общего характера, т.е про работу с гитом, деплой, безопасность и тесты, но особенно мне приятно, что у нас была лекция от Вадима Макишвили – 36
- #38 Вадим приезжал на DUMP, местную it-конференцию, и я попросил его прочитать перед ребятами эту замечательную лекцию. Кстати, если вы её ещё не смотрели, то посмотрите обязательно, можете посмотреть тот вариант, что Вадим читал нашим студентам, во втором семестре мы все лекции записывали на видео
- #39 Круче лекции Вадима были только лекции про github. Видимо они были настолько хардкорными, что нам пришлось читать их трижды, т.к гитхаб – это основной инструмент работы на хакатонах, и с домашними
- #40 С домашними тоже вышла засада. Их стало меньше в два раза, и казалось бы должно стать проще, а на деле их и придумывать было сложнее – темы-то порой были совсем не связаны друг с другом. И проверять иногда было сложно, например, домашку про react корректно могли проверить, я думаю, человека три.
- #41 Но вернемся к хакатонам. Их было три. Мы разделили студентов на 5 команд, команды формировались так, чтобы суммарная оценка команды на ревью была примерно одинаковой (у нас получилось примерно 2.8). При этом в каждую команду мы старались взять двух сильных ребят, которых назвали «лидерами» и дали чуть больше полномочий чем другим. К каждой команде было приставлено по 3 ментора, которые помогали решать вопросы. На самом деле нам показалось, что уже ко второму хакатону число менторов в команде можно снизить до 1-2, т.к ребята большей частью уже погружены процесс, и менторская функция сводится к менеджменту, нежели к обучению и помощи.
- #43 В конце у студентов был экзамен. Для того чтобы допуститься до него нужно было получить 4 балла за задачи. Сам экзамен был в виде презентации проекта. Оценки каждому мы уже выставляли до этого сами, и калибровали, получив оценки своих одногруппников, причем калибровали только в большую сторону. Но при этом если группа получила на защите 4, то все члены группы получали в итоге не больше 4-х. У нас групп, получивших не 4 было две. Но у каждого участника группы была возможность повысить оценку, показав что они знаю свой проект и могут дописать небольшую функциональность в своём проекте (в нашем случае это был саджест). В итоге 10 человек пытались повысить оценки и у 8 получилось. Суммарно мы поставили 14 оценок отлично и столько же оценок хорошо. Одну оценку удовлетворительно и три неуда. Но там ребята просто сами отказались продолжать учиться.
- #44 На самом деле можно много ещё рассказывать про курсы и есть много тем, которые я не затронул, но к сожалению мне пора заканчивать. У нас получились хорошие курсы, я позволю вам показать лишь несколько
- #45 конечно к 3-4 паре мы более-менее начали справляться с нагрузкой. Появились новые менторы, да и студентов просто стало меньше. Анализируя первый семестр на ретроспективе мы пришли к нескольким выводам – почему же так произошло. И помимо понятной причины: быть первопроходцем сложно. Есть несколько выводов, которые можно взять на будущее
- #52 Мы вложили в наши курсы много усилий, и такие отзывы показывают, что результат того стоил
- #53 Нас, кто участвовал в этих курсах было много. Все мы вложились в эти курсы, чтобы оправдать результат. И я считаю, что у нас всё получилось. Наша команда стала больше, мы взяли 11 человек на летнюю стажировку по фронтенду. Ещё 5 человек пошли на стажировку в контур и 2 человек в JetStyle. По-моему это неплохой результат, неплохой задел на то, чтобы продолжать и в следующем году. И если вам захочется что-то подобное сделать, то вы можете воспользоваться нашим опытом, нашими наработками и нашими результатами
- #55 Оптимизация курсов, курсовые, лекция про гитхаб три раза