Отслеживаете ли вы свой прогресс в качестве разработчика? Это не является обязательным требованием (по крайней мере, в большинстве мест), но я обнаружил, что это очень полезно. Особенно когда я пытаюсь преодолеть синдром самозванца и вспомнить, как далеко я продвинулся.
Также полезно отслеживать свой прогресс, потому что я хочу получить повышение. Уверен, вы бы тоже хотели! Представьте себе, если бы вы могли составить список целей вместе со своим руководителем, а затем прийти к нему с количественно измеримым списком выполненных вами действий и задач, связанных с этими целями? Разве это не было бы несомненным повышением в должности и прибавкой к зарплате?
Поэтому я создал эту систему, которая помогает мне создавать осязаемые, достижимые цели и регистрировать прогресс в их достижении, чтобы собрать статистику в приборной панели.
Я сделал ее максимально простой и доступной из любого места, потому что знал, что если мне придется открывать еще одно приложение или инструмент, я никогда этого не сделаю.
- Как это работает
- Что вам нужно для начала работы
- Шаг 1: Установите цели
- Шаг 2: Настройте приборную панель
- Шаг 3: Создайте форму для регистрации прогресса и способ просмотра статистики с любой вкладки
- Откройте редактор страниц
- Нажмите «добавить» и боковую панель
- Добавьте кирпич в раздел «Документ рендеринга
- Добавьте iframe к кирпичу
- Создайте еще одно расширение, нажав «добавить», затем выберите опцию Quick Bar
- Время создать форму
- Получите временную метку, затем отправьте в Google Sheets и PixieBrix
- Покажите конфетти и отобразите панель панели достижений.
- Advanced — отправка данных «последнего обновления» в PixieBrix.
- Теперь идите и делайте!
Как это работает
Находясь в любом месте, я просто использую сочетание клавиш, чтобы открыть в браузере боковую панель с формой. Я заполняю все подробности о выполненной задаче и выбираю, к какой цели она относится. Когда я отправляю форму, задание отправляется в 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 также очень отзывчиво и с радостью поможет, если у вас есть идея для создания чего-то, но вы застряли. Так что если вам нравится эта идея, но у вас есть некоторые модификации, дайте мне знать, и мы можем попробовать их!