Следующие 6 недель моего обучения перешли на JavaScript. Мы перешагнули порог концепций, с которыми я чувствовал себя знакомым, и углубились в глубины TDD, OOP и FP. Кроме того, мы начали наш первый совместный проект!

Неделя 7

Пройденные уроки:

  • Введение в тестирование, TDD и отладку
  • Инструментарий цикла обратной связи

JavaScript. Последний рубеж. Не совсем, у меня еще много чего есть, что я хочу победить, но я нервничал по поводу этой части. Я чувствовал себя довольно комфортно с HTML и CSS, и хотя я особо не занимался SCSS, я был уверен, что смогу быстро его освоить. Мы начали отходить от тем, в которых я чувствовал себя комфортно, и перешли сразу к разработке через тестирование (TDD).

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

Я был в отпуске, чтобы провести несколько первых дискуссий по JavaScript. Я посещал наши встречи в Zoom и участвовал в этих дискуссиях, но по понятным причинам не делал много работы, пока меня не было дома. Когда я вернулся, я был совершенно ошеломлен, пытаясь наверстать всю пропущенную работу. Это также был прекрасный пример того, почему 1:1 стали для меня такими ценными. Я не мог выполнить ни одно из заданий самостоятельно. Запуск тестов был новым; запуск команды — watch для продолжения выполнения этих тестов был новым; блоки describe и it были новыми; выяснение концепции организовать, действовать, утверждать полностью вылетело у меня из головы. До сих пор удивляюсь, насколько терпеливы были со мной мои коллеги. Один из них потратил почти 40 минут, чтобы вывести меня из ничего (где я понятия не имел, как и что тестировать) к единственному проходному тесту, где я мог объяснить, почему и как он прошел! Он был очень понимающим, не просто дал мне ответы, и, в конце концов, мы добрались до цели! Слава богу, у меня было это личное время, потому что тогда я мог взять то, что мы сделали в том первом тесте, и применить это к остальной части моего кода.

Вот что я узнал: тестирование вашего кода должно подтверждать, что ваши функции работают правильно и так, как вы ожидаете. Допустим, вы написали функцию, которая добавляет 100 к любому числу, которое вы ей передаете. Ваш тест подтвердит, что возвращенный ответ этой функции на самом деле является вашим числом + 100. Я тестировал строки, я тестировал арифметику и теперь даже подтвердил, что ошибки возникают, если я передаю неверные данные своим функциям. Стало намного проще, когда я понял, что все еще просто пишу JavaScript, но в «тестовых» или «спецификационных» файлах. Для меня тесты гарантируют, что я пишу код, который делает то, что я действительно хочу (и что он не делает ничего, чего я не ожидаю).

На этой неделе мы также говорили о «петле обратной связи». Чем быстрее вы сможете получить обратную связь, тем быстрее вы сможете написать код. Честно говоря, я никогда раньше не слышал этой фразы, поэтому подумал, что мы говорим об отзывах людей, учитывая, что за неделю до этого у нас были обзоры учеников. Нет, мы говорили о получении обратной связи от нашего кода. 😑 Концепция была достаточно проста: используйте имеющиеся в вашем распоряжении инструменты для написания чистого и понятного кода. Я никогда не думал о «получении обратной связи» от кода, но что-то простое, как написать console.log внутри функции и увидеть, как она отображается в консоли браузера, как и ожидалось, — это то, что мы имели в виду. Написание тестов с использованием .only или .skip для более быстрого получения отзывов о том, что вы написали — это петля обратной связи. Используйте что-то вроде CodePen, чтобы сразу увидеть, как то, что вы написали, влияет на веб-страницу — все это были примеры того, как быстрее получить обратную связь по вашему коду, чтобы вы могли быстро двигаться и выполнять итерации соответственно.

Я был очень взволнован тем, что поучаствовал в парочке стендапов Sparkbox! Сначала мы получили быстрый 15-минутный обзор от технического руководителя. Они в основном объяснили, кто такой клиент, какова цель всего проекта и какие-то странные подробности. Мне довелось быть наблюдателем за проектом по переносу нескольких сайтов с Drupal 7 на Drupal 9. Я увидел еще один стенд, на котором мы обновляем дизайн-систему клиента. Я ценил возможность сидеть за доской Jira и слушать, как разработчики рассказывают о своей работе. Простое знакомство с языком помогает мне лучше понять, о чем они все говорят.

Неделя 8

Пройденные уроки:

  • Основы программирования
  • Методы и шаблоны рефакторинга

К этому моменту мы прочитали весь Отзывчивый веб-дизайн и большую часть Прагматичного программиста. Поскольку мы готовились к новому проекту рефакторинга, мы также запустили Рефакторинг: улучшение дизайна существующего кода. Это было интенсивное чтение для меня. Он казался таким плотным. Я уверен, что логика имела смысл, но мне было трудно визуализировать, как данные и переменные перемещались по примерам. Мне потребовалось, наверное, 3 часа, чтобы пройти только первую главу. Единственная причина, по которой нам нужно было помнить о рефакторинге, заключалась в том, что мы начали наше первое исполнение ката Позолоченная роза.

Я никогда не слышал о позолоченной розе, но кажется, что это что-то вроде легенды. Идея в том, что у вас есть воображаемый магазин, и вы продаете что угодно. У вас есть инвентарь случайных предметов, таких как сыр, билеты на концерты и волшебные вещи. Каждую ночь в конце дня вы обновляете свой инвентарь. Вы должны обновить качество вещей, которые вы продаете, а также даты, к которым вы должны их продать. Хитрость вот в чем: почти у каждого элемента есть свой особый набор правил, которым нужно следовать при обновлении. Моя работа заключалась в том, чтобы зафиксировать все эти специальные правила в одной функции без всех неприятных вложенных условий. Мы использовали CodeClimate для отслеживания нашего прогресса, поскольку мы уменьшали когнитивную сложность, удаляли одинаковые блоки кода и избегали похожих блоков кода. Этот рефакторинг также представлял идею DRY (не повторяйтесь), поэтому было сделано много извлечений, чтобы удалить повторение.

На этой неделе состоялся еще один раунд демонстраций для учеников. У нас было всего 5 минут на презентацию, так что в целом довольно быстро, но нервы все равно подвели. Некоторые другие ученики начали работу над своими побочными проектами, так что я увидел некоторые из их работ! Моя демонстрация снова была в моей карточке события, но на этот раз она была сосредоточена на рефакторинге всего в SCSS. Я позаботился о том, чтобы использовать своего наставника и нескольких других людей в качестве доски для резонирования, выполняя тренировочные прогоны, так как с этой демонстрацией мне казалось, что у меня меньше работы. Я как бы хотел поговорить о тестировании, но у меня просто не было достаточного понимания концепций, поэтому я не мог сформулировать то, что я узнал.

Неделя 9

Пройденные уроки:

  • Расширенные методы работы с Git
  • Создайте собственное веб-приложение

Теперь, когда прошло несколько месяцев, мы снова обратились к Git. В Sparkbox есть небольшой репозиторий, чтобы мы могли попрактиковаться в некоторых более продвинутых методах. Этот репозиторий Git был разработан для того, чтобы мы работали с выбором вишен, изменением порядка, выяснением разницы между squash и fixup и переформулировкой коммитов. Некоторые из этих команд показались мне немного знакомыми, потому что я намеренно пытался попасть в странные ситуации, чтобы улучшить свои навыки работы с Git. Я использовал графический интерфейс в VSCode при перебазировании. Это действительно полезный визуал. Vim также является альтернативой для подобных вещей, но меня это очень пугает!

Один из наших ведущих учеников разработал новый проект, в котором мы создали собственное веб-приложение, и наша группа была первой, кто прошел через него. В команде 4 ученика должны были разделить карты Jira между собой, и каждый из нас внес свой вклад в создание «Sparkhero!» Для нас это был отличный способ понять, как управлять командой без каких-либо «настоящих» последствий. Перед нами стояла задача создать простое приложение для отображения супергероев и злодеев и сортировки их по множеству характеристик (и, конечно же, написать тесты для всей этой новой работы). Я специально хотел брать карты, где я понятия не имел, как я собираюсь их завершить. Если я хотел стать лучше в JavaScript, я должен был проглотить свою гордость, более открыто говорить о том, чего я не умею, и браться за эти вещи, чтобы учиться.

В итоге я сосредоточился на функциональности сортировки, которую мы реализовали. На этой неделе я получил 2 тикета Jira. Во-первых, мне очень помогли написать функцию, которая возвращала бы всех супергероев и суперзлодеев, перечисленных в API, который мы использовали. Изначально у нас были жестко запрограммированные карты персонажей, но мы провели рефакторинг, чтобы можно было динамически генерировать их. Моя функция будет генерировать все данные, необходимые для отображения каждого персонажа на их собственной карте. Во-вторых, мне пришлось написать HTML для выпадающего меню (красиво и просто: select и option элементов). Мы будем использовать их позже для сортировки наших персонажей.

Неделя 10

Пройденные уроки:

  • Создайте собственное веб-приложение (продолжение)
  • Sparkbox Отступление!

Для Sparkhero на этой неделе у наших персонажей комиксов была куча характеристик мощности с перечисленными значениями, поэтому я впервые поработал с .sort. Моя функция сортировки будет принимать значения этих параметров раскрывающегося списка и сортировать символы в порядке убывания. Этот бросил мне вызов. Долгое время я не мог понять, как использовать точечную или квадратную нотацию для доступа к свойствам объекта внутри объекта. Приходите, чтобы узнать - я просто делал скобки не на той части! 🤦‍♀️

a[powerstats].powerstat 🚫

a.powerstats[powerstat] ✅

Это была также неделя нашего ретрита! Я так благодарна, что меня даже пригласили. Накануне у нас было дополнительное вечернее мероприятие, так что мне удалось встретиться с некоторыми людьми, с которыми я работал в реальной жизни. Наш первый рабочий день был посвящен идеям доверия и мужества. Как вы строите доверие между собой? Как вы можете быть уязвимым, когда люди говорят то, что вы имеете в виду, особенно если это будет неудобно? Как вы справляетесь с конфликтами более здоровыми способами? Мне на самом деле очень понравилась работа! По сравнению с моим образовательным профессиональным развитием, было приятно мыслить немного более абстрактно.

Неделя 11

Пройденные уроки:

  • Функциональное программирование (урок + продолжение)
  • Объектно-ориентированное программирование
  • Создайте собственное веб-приложение (продолжение)

Наши обсуждения на этой неделе были посвящены различным философиям кодирования: функциональному программированию (ФП) и объектно-ориентированному программированию (ООП). У меня не было хорошего понимания ни того, ни другого, и наши чтения были плотными. Я не планировал читать 4 часа статей о ФП и ООП за один день! 🤯😳😵‍💫🥲 Мы пересмотрели ката «Позолоченная роза», но теперь нам пришлось реорганизовать ее, сделав ее более функциональной. По сей день у меня это еще не закончено. Но в итоге мне помогли с проектом ООП, который заключался в создании некоторых классов, расширяющих суперкласс. Я обратился за помощью к одному из бывших учеников, и как только он провел меня через свой мыслительный процесс для одного примера, я смог сделать другой пример самостоятельно!

Чтобы завершить наш проект Sparkhero, нам было поручено добавить фильтрацию и сортировку. У нас было 3 элемента:

  • издатель (DC или Marvel)
  • роль (был ли персонаж героем или злодеем)
  • и некоторые дополнительные параметры сортировки (по имени, по интеллекту, силе или бою)

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

Я подумал, может быть, я мог бы использовать работу других учеников в качестве своего трамплина, но всем им приходилось писать функции фильтров, которые возвращали массивы. Моя функция сортировки отличалась тем, что мне просто нужно было вернуть значение, привязанное к выбранному option. В этот момент моя карта Sparkhero перешла в наш следующий спринт. Подробнее об этом позже…

Неделя 12

Пройденные уроки:

  • Основы работы с сетью и асинхронный код
  • Sparkhero-Group Последующие действия по кодированию
  • Введение в MySQL и реляционные базы данных

Это была последняя неделя этапа программирования ученичества! У нас было два официальных обсуждения асинхронного кода и промисов, а также очень краткое введение в MySQL. Это заняло у меня немного времени, но я начал понимать, как хотя бы читать таблицы и соединять точки, когда речь идет о реляционных базах данных. Я вообще ничего не делал с базами данных, поэтому короткое введение было всем, что я мог сделать. Я также не писал много асинхронного кода и имею только поверхностное представление о промисах, поэтому обсуждение асинхронности и сети также помогло мне снова разобраться в этих концепциях.

Я все еще работал над последней картой Sparkhero. Мне было так плохо, что я ничего не мог понять!! У меня была функция, которая захватывала значение выбранного параметра. Он работал правильно и возвращал то, что я ожидал. Однако, пока я еще работал, второй запрос на включение функции фильтрации был одобрен и объединен. 🥳 У нас было выполнено 2 элемента из 3-х, и теперь моя карта была последней вещью, которая нуждалась в одобрении. Я знал, что мне нужно перебазировать, так как наша основная ветка была обновлена, поэтому я начал с этого. Я сказал себе: «Я могу это сделать».

Знаменитые последние слова!

При перебазировании я понял, что наше новейшее слияние случайно перезаписало и удалило первый код функции фильтрации. Я запаниковал, потому что видел всю эту работу не в последней версии main, поэтому я пошел дальше и принял все изменения. На тот момент у меня был проект со всевозможными конфликтами, и ничего не работало так, как до перебазирования. Я начал пытаться понять, как все исправить самостоятельно, и делал все хуже и хуже. Буквально потребовалось 3 или 4 штатных разработчика, чтобы работать со мной и согласовать все за несколько дней. Пока я все еще распутывал код, мы также полностью переработали наш вызов API, поэтому мы провели дальнейший рефакторинг, чтобы сделать один сетевой запрос вместо многих. Излишне говорить, что теперь я лучше перебазирую! Наконец, почти через две недели после того, как я начал эту последнюю карту, у нас было работающее приложение Sparkhero! Я очень горжусь этим!

Я (эгоистично) очень счастлив, что именно на меня легла основная тяжесть всей этой работы. Это был отличный опыт обучения, особенно для человека, у которого не было поддержки в команде. Это научило меня лучше читать карты Jira, справляться со стрессом от поломки ВСЕХ, и я обнаружил, что мне нужно делать более мелкие, более целенаправленные коммиты, поскольку я пытаюсь выяснить ошибки. Это было много работы, и я думаю, что самое главное, чему научилась вся наша команда учеников, это то, что нам нужно лучше сообщать о том, что мы делаем. Сейчас мы все работаем над одними и теми же проектами, поэтому нам нужно лучше понимать, кто где работает и как все наши части сочетаются друг с другом. Общение - король!

У нас также была еще одна обучающая демонстрация, и я выбрал учебник Tic Tac Toe! После декомпозиции моего стороннего проекта с моим техническим директором и некоторыми другими разработчиками, мы решили, что мне будет очень полезно изучить React и применить его к своему стороннему проекту. Однако мне пришлось начать с малого, поэтому я нашел рекомендуемое Учебное пособие по крестикам-ноликам в документации React. Я впервые столкнулся с состоянием и компонентами. Я рад, что продемонстрировал что-то совершенно новое и смог продемонстрировать крошечный проект React (даже несмотря на то, что у меня было пошаговое руководство 😊).

Мне предстоит пройти долгий путь, прежде чем я смогу писать код самостоятельно. Это открыло мне глаза, и мне действительно трудно смириться с демонстрацией своих неспособностей. Мне трудно сравнивать себя с другими учениками, и я должен перестать делать это с собой. У меня высокие, нереалистичные ожидания, потому что я хочу показать всем, что я могу это сделать, даже если я самоучка. Я понимаю, что мне нужно распространить на себя то же понимание, которое другие дают мне в процессе обучения. По мере того, как мы переходим к нашему последнему завершающему проекту, который сосредоточен на использовании Next.js и специальных возможностей, я готовлюсь к подъему в гору. Я очень напуган, но я не могу допустить, чтобы это мешало мне браться за вещи, которых я не понимаю. В конце концов, вся эта неразбериха, которую я сейчас испытываю, того стоит!