Вот моя система отслеживания прогресса в качестве разработчика

Отслеживаете ли вы свой прогресс в качестве разработчика? Это не является обязательным требованием (по крайней мере, в большинстве мест), но я обнаружил, что это очень полезно. Особенно когда я пытаюсь преодолеть синдром самозванца и вспомнить, как далеко я продвинулся.

Также полезно отслеживать свой прогресс, потому что я хочу получить повышение. Уверен, вы бы тоже хотели! Представьте себе, если бы вы могли составить список целей вместе со своим руководителем, а затем прийти к нему с количественно измеримым списком выполненных вами действий и задач, связанных с этими целями? Разве это не было бы несомненным повышением в должности и прибавкой к зарплате?

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

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

Как это работает

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

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

Хотите попробовать и использовать его для себя? Продолжайте читать, чтобы узнать, как я его создал. (И комментируйте здесь, если у вас возникнут вопросы, пока вы пытаетесь построить!)

Что вам нужно для начала работы

• Лист Google (я сделал этот шаблон, но вы можете создать свой собственный)
• Бесплатная учетная запись PixieBrix
• Инструмент для отслеживания задач (я предпочитаю Trello, но каждому свое).

Шаг 1: Установите цели

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

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

Затем заполните столбец G тем, что я люблю называть тангибилизированными пунктами действий. То есть, что бы ни было в предыдущей колонке, создайте конкретную, выполнимую цель, связанную с этим.

Например, если вы хотите изучить Vue, поставьте цель создать одностраничное приложение с помощью Vue. Если вы хотите лучше разбираться в коде, поставьте цель проводить по 2 разбора кода каждую неделю.

Шаг 2: Настройте приборную панель

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

Но перейдите на третью вкладку, которая называется Dashboard. Здесь вам нужно переименовать элементы в столбце A в короткие названия целей, которые вы только что создали.

Это нужно для того, чтобы иметь возможность отслеживать каждую цель и количество задач, связанных с этой целью. Если вы не внесете никаких изменений, формулы в ячейках рядом с этими названиями будут подсчитывать, сколько элементов на вкладке Relevant Tasks относятся к каждой цели.

Вот формула, если вам интересно:

=COUNTIF('Relevant Tasks'!B:B,A4)

Сейчас не так важно, как вы назовете эти короткие названия, но будет важно убедиться, что вы используете точно такое же короткое название в выпадающем поле на форме PixieBrix. Но не волнуйтесь — мы к этому еще вернемся!

Шаг 3: Создайте форму для регистрации прогресса и способ просмотра статистики с любой вкладки

Итак, у вас есть журнал, теперь вы готовы открыть PixieBrix и создать форму и боковую панель!

Если вы никогда раньше не пользовались PixieBrix, вам нужно будет создать учетную запись и добавить расширение для Chrome.

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

Как только вы все настроите, вы будете готовы приступить к созданию.

Предпочитаете смотреть? Вот видео.

Хотите читать шаги во время просмотра? Продолжайте!

Откройте редактор страниц

Находясь в любом месте Chrome, щелкните правой кнопкой мыши на странице и нажмите «Inspect», чтобы открыть инспектор. Обратите внимание, что у вас появится новая вкладка PixieBrix!

Выберите ее, чтобы начать создание расширения.

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

Нажмите «добавить» и боковую панель

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

Добавьте кирпич в раздел «Документ рендеринга

Перейдите к кирпичу «Render document» и посмотрите на предварительный просмотр с правой стороны. Выберите три точки в элементе, который содержит текст, а затем выберите «Brick». Вот так!

Добавьте iframe к кирпичу

Теперь вы видите слева что-то, что говорит brick прямо под элементом Render Document. Нажмите на кнопку + чуть ниже brick и найдите iframe. Нажмите Add и этот кирпичик теперь вставлен в ваш рендерер.

Просто настройте iframe со ссылкой для встраивания вашего Google Sheet. (Вот как создать ссылку для встраивания в документ Google, если вам интересно).

После того как вы закончите, он должен выглядеть примерно так, и вы сможете увидеть его в браузере, когда нажмете Render Panel в вашем расширении.

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

Это способ показать последнюю зарегистрированную задачу. Если вы не беспокоитесь о том, чтобы увидеть это, можете пропустить эту часть!

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

Далее, вам просто нужно будет создать кирпич под названием Get data from PixieBrix database и найти ключ, который вы определите в кирпиче вашей формы. (Я назвал свой mostRecent.) Вам также нужно будет создать базу данных, если вы этого еще не сделали. Я назвал свою Achievements. Не имеет значения, как вы их назовете, но вы захотите запомнить это имя для следующего расширения, где мы будем вставлять данные при отправке формы.

Далее, вы добавите кирпич Render markdown, чтобы отформатировать данные в более читабельном виде.

Вот что вам нужно скопировать и вставить в этот кирпичик, если вы настроили все так, как я показал в видео. Примечание — если что-то не работает, пройдите по следу и проверьте, правильно ли названы ваши выходы!

{{@transformed5.data.name}}, _completed on_ {{@transformed5.data.date}}

Должно выглядеть вот так, в зависимости от того, как вы назовете свои поля в форме, которую мы создадим в следующем расширении.

Здесь не будет показано никаких данных, потому что мы еще ничего не отправили в эту базу данных. Если у вас возникли проблемы, возможно, вам нужно изменить Missing Behavior на blank вместо error.

Создайте еще одно расширение, нажав «добавить», затем выберите опцию Quick Bar

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

Вы можете настроить этот кирпичик Quick Bar как угодно — это просто именование и стиль.

Далее добавьте кирпичик под названием Show sidebar. Он указывает PixieBrix на открытие боковой панели при выполнении этого действия. Я установил panelHeading в Log, чтобы создать собственную боковую панель с формой.

Время создать форму

Теперь добавьте еще один кирпичик под названием Показать модальную или боковую форму. Это кирпичик, с помощью которого вы просто настраиваете форму так, как вы хотите, чтобы она выглядела. Если вы используете ее в паре с вышеприведенной электронной таблицей, я рекомендую добавить следующие поля (и типы полей):

• название/имя задачи (текст в одну строку)
• цель, с которой она была связана (выпадающий список)
• примечания (текст в виде абзаца)

Еще одна важная вещь, которую необходимо настроить, — это поле Location, расположенное чуть ниже полей формы. Убедитесь, что вы установили его в sidebar вместо modal.

Получите временную метку, затем отправьте в Google Sheets и PixieBrix

Теперь вам просто нужно сослаться на форму ввода, получить временную метку и отправить эту информацию!

Начните с добавления кирпича Parse Date, который даст вам вывод, который вы можете использовать для ссылки на временную метку. Просто введите now в поле Date, и это все, что вам нужно.

Теперь добавьте кирпичик Add Google Sheet row, подключите свою электронную таблицу и выберите вкладку «Relevant Tasks (Don’t Edit)». (Если вы никогда раньше не использовали Google Sheets с PixieBrix, вам, возможно, придется войти в Google Sheets и авторизовать PixieBrix).

Вы увидите, что он подтягивает заголовки, и теперь вам нужно только сопоставить данные. Вот как я это сделал.

Покажите конфетти и отобразите панель панели достижений.

Теперь добавьте кирпичик под названием Show Confetti, который не требует настройки и просто распыляет цифровое конфетти по экрану! Вот это праздник! 🎉

Наконец, добавьте кирпич Show Sidebar и установите panelHeading в качестве названия боковой панели Achievements, которую вы только что сделали в предыдущем расширении. Вы можете увидеть, как она называется, перейдя к первому кирпичику в расширении Achievements Panel и посмотрев на значение Heading.

Advanced — отправка данных «последнего обновления» в PixieBrix.

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

Добавьте еще один кирпичик под названием Put data in PixieBrix database, чтобы отправить данные в PixieBrix data и переписать элемент mostRecent. Таким образом, в нем всегда будет храниться только последнее значение. Вам нужно выбрать ту же базу данных и ключ, которые вы использовали в предыдущем расширении, а затем установить значение replace для Merge Strategy.

Наконец, просто добавьте два свойства для отправки ему. Помните сообщение «Последняя задача»? Мы показали имя и дату. Так что просто ссылайтесь на эти две вещи, вот так!

Хотите создать таблицу предстоящих задач? Вот как это настроить. Единственное отличие заключается в том, что вам нужно будет использовать фильтр jq для отображения карточек в списке с именем Elastic (предполагается, что именно так настроена ваша доска Trello).

Вот синтаксис для этого:

.list as $list | .input|.cards|=(del(.[][]|select(.idList==$list|not)) | del(.[]|select(.==[])))

Теперь идите и делайте!

Нужна помощь? Комментируйте здесь или в моем видео, и я отвечу так быстро, как только смогу! Сообщество PixieBrix также очень отзывчиво и с радостью поможет, если у вас есть идея для создания чего-то, но вы застряли. Так что если вам нравится эта идея, но у вас есть некоторые модификации, дайте мне знать, и мы можем попробовать их!