Считайте это БОГО постов Here Codes Nothing.

Этот пост первоначально появился на HereCodesNothing.com.

Я знаю, что вы все очень расстроены тем, что на прошлой неделе я не опубликовал пост о третьей неделе, но поверьте мне, у меня есть очень веская причина…

Я ТОЛЬКО ЗАВЕРШИЛ СВОЮ ПЕРВУЮ ПРОЕКТНУЮ НЕДЕЛЮ!

Да, Project Week надрал мне задницу, но прежде чем я углублюсь в это, позвольте мне кратко рассказать вам о неделе 3:

Неделя 3 была посвящена использованию сложной логики ветвления, локального хранилища и параметров поиска по URL для создания игры в стиле «Выбери свое собственное приключение». Понедельник мы потратили на изучение различных способов доступа к свойствам объекта, а затем со вторника по пятницу провели полную игру CYOA — дважды.

Вот что мы узнали на той неделе:

  • Больше работы с DOM и локальным хранилищем
  • Доступ к глубоко вложенным свойствам объекта
  • Много логической работы, условных операторов и циклов
  • Работа над большим, многодневным, многостраничным проектом в группе.

Было несколько сложно понять, как хранить и получать доступ к информации, необходимой для результата каждого квеста, но я создал диаграмму (см. ниже), которая помогла нам визуализировать все логические ветви, с которыми мы работали, и позволила нам работать в обратном направлении от свойство объекта, к которому мы пытались получить доступ. Конечно, это была тяжелая неделя, но мне было очень весело, особенно потому, что целый день я посвятил написанию фанфика по «Бургерам Боба». Это также очень помогло нам подготовиться к Неделе проектов.

Говоря о…

На 4 неделе!

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

Если быть на 100% честным, я нашел концепцию Project Week одновременно невероятно ценной и совершенно нереалистичной. Проработав много лет на руководящих должностях в сфере технологий, я знаю из первых рук, что (почти) никогда не бывает случая, когда небольшую группу разработчиков просят сыграть все роли в процессе создания приложения, от производителя до UX, от дизайнера до dev в dev-ops. При этом я думаю, что то, что мы вынуждены играть все эти роли в небольшом проекте с жесткими временными рамками, действительно подчеркнуло, насколько много требуется для создания клиентского или общедоступного приложения. Это также заставило всех задуматься об управлении временем, расстановке приоритетов функций и внешнем виде конечного продукта.

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

Я знаю, что вы все жаждете увидеть, что мы создали, так что давайте не будем больше терять время и посмотрим на конечный продукт!

Код в действии

Моя команда создала детективную игру в стиле нуар в стиле CYOA, которая включала в себя головоломки и финальную «перестрелку» со злодеем в конце. Если бы я занимался Project Week один, я бы, наверное, не выбрал что-то настолько мрачное как в повествовательном, так и в визуальном плане. Тем не мение! Мне очень понравилось делать это приложение и выталкивать себя из зоны эстетического комфорта.

Вот что мы построили:

Перед концом недели Интерактивный детектив
GitHub Repo Here | Активный сайт здесь (лучше всего смотреть в Chrome)

  • Что это такое: ванильное веб-приложение на JavaScript, которое представляет собой отчасти шутер, отчасти головоломку и отчасти приключение в стиле «выбери себе», действие которого разворачивается в захватывающем повествовании в стиле нуар.
  • Что это демонстрирует: все, чему мы научились в Boot Camp 1 (и еще немного): доступ к DOM и манипулирование им, прослушиватели событий, установка и получение объектов из локального хранилища, параметры поиска по URL и все, что вы можете придумать. делать с ними, TDD, функции импорта/экспорта, анимацию setInterval, анимацию CSS и ключевые кадры, использование изображений, видео и аудио, CSS, Flexbox и CSS Grid.
  • Самая сложная часть: стилизация приложения, особенно в групповой обстановке, и особенно использование методов стилизации (Flexbox и Grid), которые я раньше не использовал.
  • Самая простая часть: Написание базовой логики для отдельных мини-игр оказалось намного проще, чем я ожидал.

Где я боролся

  • Выяснение логики отслеживания очков. Отслеживание мест, которые посещал игрок, и результатов этих посещений было важно для истории, которую мы пытались рассказать. Написать код для каждого из этих различных элементов было не так уж сложно, но сначала понять их взаимозависимости было непросто.
  • TDD и *правильный* способ написания тестов: моя команда начала писать наш первый тест в понедельник, и в самом начале был момент, когда я очень расстроился, потому что не понимал, почему мы делали это так, как мы. По сути, мы написали тест («если число бросков костей равно или меньше 6, вернуть true»), а затем написали функцию, содержащую только возврат true. Я не понимал, почему мы в основном писали функцию, проверяющую «истинно ли это?», и был разочарован и немного конфликтовал с моими товарищами по команде. Когда они заставили нас перейти к следующему тесту, я увидел, как настройка этого начального теста помогла нам написать логику функции для прохождения следующего теста, и все это, наконец, щелкнуло для меня. Я понял, почему тот оригинальный тест был необходим и полезен. Большое спасибо моим товарищам по команде за их терпение!
  • Стили (впервые с использованием Flexbox и CSS Grid):стилизовать сложно, а стилизовать как группу еще сложнее, а стилизовать как группу, когда вас еще не учили, как это делать это явно еще сложнее. Мы попытались собрать CSS в среду, но это закончилось кошмаром, поэтому мы делегировали разные страницы разным людям и собрались в четверг, чтобы сравнить нашу работу и собрать все воедино.
  • Не сталкивать людей бульдозерами. У меня твердое мнение, и я часто думаю, что эти мнения являются правильными мнениями, поэтому эта неделя определенно была упражнением в том, чтобы слушать и принимать точки зрения других людей. Когда я начал избавляться от своего эго и осознал, что проект — это групповой проект, — я смог отпустить часть чувства ответственности за каждый аспект финального проекта и на самом деле немного успокоился. немного.
  • Здоровое питание и физические упражнения. В последнее время я замечаю в себе тенденцию: когда я чувствую стресс или переутомление, я использую это как предлог, чтобы поесть дерьмо и не заниматься спортом. Это неприятно осознавать, но я рад, что хотя бы сейчас могу признать это и приложить усилия, чтобы измениться. Я не ожидаю, что этот курс станет легче, и использование стресса в качестве предлога для того, чтобы не заботиться о себе, является плохой привычкой, независимо от моей учебы или работы.

Где я преуспел

  • Используя свой прошлый опыт продюсера, чтобы помочь нам управлять нашим временем и задачами: я смог быстро записать шаги, которые нам нужно было предпринять, чтобы завершить наш проект, и график, которого мы должны придерживаться, чтобы выполнить наш дедлайн в пятницу. В конце недели мы немного отклонились от этого графика, но в целом, я думаю, я значительно помог нашей команде уложиться в график и сосредоточиться на наших главных приоритетах.
  • Изучение CSS-анимации и ключевых кадров. Часть требований проекта заключалась в том, чтобы создать страницу «О нас», и, поскольку наш проект был вдохновлен нуарным фильмом, я сразу же захотел, чтобы наша страница была прокручиваемой страницей в стиле финальных титров. . Это означало необходимость изучения CSS-анимации и ключевых кадров. Я нашел это увлекательным и относительно простым, как только понял основную концепцию. Я с нетерпением жду возможности использовать его для других эффектов перехода и забавных анимаций в будущих проектах.
  • Создание довольно интересной и информативной презентации. Мы закончили наш конечный продукт вовремя, чтобы собрать то, что я считал довольно интересной презентацией. Я написал сценарий для нашей групповой демонстрации продукта, который был отчасти рекламным роликом, отчасти презентацией фильма, и мои товарищи по команде прекрасно справились с этим. Мы также провели отдельные технические доклады о различных частях приложения, и я думаю, что все они затрагивали интересные вещи и хорошо перетекали друг в друга.

Заключительные мысли

В этом посте я много писал о своей работе над проектом и о приложении, которое мы с моей командой смогли создать, но не менее впечатляющими и вдохновляющими были приложения, созданные другими группами. От простой, но захватывающей игры в крестики-нолики до создания друзей в стиле тамагочи и сверхпрофессионального приложения для бега по пересеченной местности — команды этого класса смогли воплотить все в жизнь. Я не могу дождаться, чтобы поработать с ними над классными вещами в будущем.

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

До следующей недели здесь ничего не кодируется!