cherkalexander

🚀 Мама, я тимлид (и это не про книгу)

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

У нас в компании происходят большие изменения, и пару месяцев назад я стал тимлидом .

Команда такая:
- тимлид (это я 🎉)
- продакт 👩‍💼
- 2 разработчика 👨‍💻👨‍💻
- 2 manual QA 🧪🧪
- 1 automation QA 🤖

И если я примерно понимаю, как руководить разработчиками, то с тестировщиками всё сложнее — я только погружаюсь в их процессы и стараюсь разобраться, как планировать их нагрузку. Такие перемены меня одновременно радуют, мотивируют и пугают 😅, но я думаю — справлюсь.

По счастливой случайности мне очень вовремя сделали предложение, от которого я не смог отказаться. Мне предложили бесплатно пройти курс «Команда. Инструменты управления» от Стратоплана. Я же, в свою очередь, буду писать честные отзывы после каждого блока обучения — примерно раз в месяц.

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


🎓 Немного о том, как проходит поступление на курс:

- Сначала ты получаешь доступ в личный кабинет.
- Там нужно выполнить домашнее задание — оно состоит из двух частей.
- В первой части ты описываешь свой запрос: чего именно хочешь от обучения, какие у тебя цели. Тренер оценил мой длинный список с текущими проблемами и ожиданиями от курса 😅
- Вторая часть — это кейс. Представь, что ты — руководитель руководителей проектов, и на одном из проектов случился форс-мажор. Нужно принять решение, как действовать в этой ситуации. Тут я, честно говоря, залип на пару часов — много неизвестных, куча нюансов, и в итоге приходится подключать фантазию. Но фишка в том, что правильных ответов там нет — важно, как ты рассуждаешь, как принимаешь решения.
- После этого назначается созвон с тренером. Можно задать все интересующие вопросы по обучению и обсудить свой кейс. Тут я понял, что с кейсом более-менее справился, но напридумывал себе коррупционных схем в организации, которые занесли меня немного не туда 🤣.


На самом деле, интересно снова почувствовать себя немного студентом. После смены роли у меня очень много вопросов:
- как планировать спринт
- как управлять людьми и мотивировать их
- как получать фидбек и правильно критиковать

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


Обучение займёт 6 месяцев: раз в месяц, 3 дня подряд: в пятницу, субботу и воскресенье. Хорошо, что первое пятничное занятие выпадает на мой отпуск.

В общем, пожелайте мне удачи 🙏 и расскажите:
- Что бы вы посоветовали начинающему тимлиду?
- Что бы вы посоветовали самому себе, когда стали тимлидом?
- Каким вам хочется видеть своего тимлида?

#стратоплан

📝 Meeting Notes

1️⃣ Ситуация
Вы созвонились с продактом, дизайнером, коллегой по команде — о чём-то договорились. Через какое-то время он вас спрашивает:

«А почему реализовано вот так?»
Вы отвечаете:
«Мы с тобой об этом договорились».
А он в ответ:
«Такого не было, я такого не говорил».

2️⃣ Другая ситуация
Вы созвонились, о чём-то договорились, не записали, задачу отложили на пару дней — и уже не помните, о чём договорились. Приходится снова созваниваться и вспоминать, о чём же всё-таки говорили.

Знакомо?

✅ Решение: Чтобы не было подобных ситуаций, можно вести протоколы встреч, а затем отправляем тем, кто участвовал в обсуждении.

❓ Зачем вести протоколы?

- Чтобы не забыть. По исследованиям:
через 20 минут мы забываем 40%,
через час — 60%,
через день — 70%.

- Не исказить информацию с течением времени — ведь наш мозг безбожно врёт 😅
- Чтобы обратиться к заметкам в будущем и решить разногласия. Протокол встречи в какой-то степени имеет статус юридического документа.
- Чтобы сохранить информацию для отсутствующих на совещании, например, если коллега был на больничном.
- Передать информацию присутствующим — особенно актуально, если вы работаете в англоязычной компании, где у всех разный уровень английского.
- Люди будут ответственнее относиться, например, к срокам, которые они называют (но это не точно 😄)


✍️ Как писать протокол

- Должен быть кратким — меньше времени на написание, меньше времени на чтение.
- При этом важно не терять контекст — вы должны взглянуть на него со стороны и понять, о чём речь, через пару недель.
- Важно указывать, от кого поступила информация.
- Если было принято какое-то решение, нужно описать контекст — почему оно было принято и кем.


🗂 Мой формат

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

- Agenda
- Зачем встречаемся
- Список вопросов, которые нужно обсудить

- Notes
- Важная информация, которую следует зафиксировать

- Action Items
- Задачи, которые нужно сделать мне или другим членам команды


🛠 Инструменты

Мы мигрировали на стек Microsoft — Teams, OneNote и т.д.
Поэтому я просто веду заметки на одной странице в OneNote, к которой имеет доступ команда.
Если это встреча 1:1, я использую Obsidian, а затем отправляю свои заметки собеседнику.

---

🔗 Подробнее

- 📹 Видео — Meeting notes как средство коммуникации в проектной команде
- 📄 Текстовая расшифровка

А вы ведёте meeting notes? Поделитесь, как вы это делаете и какими инструментами пользуетесь

#process #management

🤖 Онбординг ИИ

Что происходит, когда в команде появляется новый сотрудник? Правильно — он адаптируется и старается писать код в соответствии с гайдлайнами, принятыми в команде. А помогают ему в этом документация, линтеры и ревью коллег.

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

Многие ИИ-агенты поддерживают формат "правила/инструкции", где можно описать стандарты и архитектуру проекта. Это, по сути, обычный Markdown-файл, который будет добавляться к системному промпту при каждом запросе.

- В Cline — это custom instructions
- В Cursor — rules
- В Copilot — instructions
- В Windsurf — rules


Названия немного отличаются — но суть одна.

Примеры

1️⃣ У меня Copilot упорно пытался использовать pnpm, пока я явно не указал использовать npm.

2️⃣ На работе мы используем BEM и префиксы для всех имён классов, чтобы избежать коллизий. Cline, конечно, этого не понял, пока я явно не задал это в инструкциях.

3️⃣ На выходных решил набросать MVP пет-проекта из бэклога. Сначала написал ТЗ с помощью ИИ, положил его в .github/instructions/requirements-instruction.md и попросил Copilot написать проект по ТЗ. Он справился, потребовались лишь небольшие правки. Теперь при любых изменениях он уже знает требования.

4️⃣ Можно попросить ИИ использовать conventional commits при генерации сообщений к коммитам.

Некоторые примеры — на скринах.

#ai #frontend

У меня есть проблема 😐

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

Когда я ничего не делаю, я чувствую тихий голосок внутри. Он шепчет, что я теряю время, а мог бы:
- 📖 прочитать книгу
- 🎓 пройти курс
- 🛠️ начать ремонт
- 🏋️‍♂️ сходить лишний раз в зал
- и т.д.
Он не дает полностью расслабиться и насладиться выходными в полную силу.

Но при этом, если я займусь чем-то, то удовольствия тоже не получу, я только сильнее устану. Получается такой замкнутый круг, в котором я постоянно должен что-то делать, чтобы ощутить мимолетное удовольствие от достижения, а затем снова окунуться в работу с головой. Ещё ситуацию усугубляет "культ успешности", все рассказывают о своих достижениях, и кажется, что на их фоне ты какой-то лузер.

Как-то я не заметил, что в какой-то момент пропало то самое ощущение беззаботности. И кажется, что произошло это когда-то давно. Но ладно, с этим я более-менее научился справляться несколько лет назад.

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

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

Так вот, если вы чувствуете что-то такое — знайте, вы не одиноки 👋😄. И если не получилось отдохнуть в этот раз, то обязательно отдохните на следующей неделе. 😉

#about_me

🗿 Подводные камни при переходе с ES5 на ES6

Недавно мы с командой, наконец-то перешли с ES5 на ES6.

Всё прошло достаточно плавно, нам пришлось исправить всего несколько ошибок в рантайме. Почти все ошибки были в очень старых файлах, где были отключены проверки typescript с помощью @ts-nocheck.

Ошибка 1️⃣ — Action is not a constructor

Ошибка возникла в нескольких местах, где мы использовали стрелочную функцию в качестве конструктора. Раньше она не возникала, потому что стрелочная функция компилировалась в обычную function.


const Action = () => {}; // ES6
const action = new Action(); // Action is not a constructor

var Action = function () {} // ES5
var action = new Action(); // Всё ОК


Ошибка 2️⃣ — Функции, объявленные через let, больше не попадают в window


let openAction = function () {}
window.openAction() // window.openAction is not a function

// Раньше let заменялся на var и всё работало
var openAction = function () {}
window.openAction() // всё ок


Дело в том, что когда переменная объявляется глобально через var, она автоматически становится свойством глобального объекта window. Подробнее тут.

Ошибка 3️⃣ — Cannot access variable before initialization

Одна из ошибок случалась, когда мы пытались получить доступ к переменной promise до её инициализации.


class Queue {
executing;

run(thenable) {
const promise = new Promise(async (resolve, reject) => {
// пытаемся получить значние promise
while (this.executing != promise) {
// ...
}
// ...
});
}
}

// Cannot access 'promise' before initialization
new Queue().run(Promise.resolve())


Раньше, const превращался в var и ошибки не было. Это связано с понятием временной мертвой зоны TDZ, которая не возникает у переменных, объявленных через var.

Были и другие ошибки, но они по сути вариации или комбинации тех ошибок, что я привел выше.

👉 Кстатии, размер бандлов уменьшился процентов на 20.

#TypeScript #JavaScript

ИИ для прототипирования интерфейсов

До недавнего времени я использовал ChatGPT исключительно как помощника для генерации кода — вбросить запрос, получить сниппет, внести правки. Но все вокруг только и говорят об AI-агентах, курсоре, v0 и так я наткнулся на сервисы для онлайн генерации прототипов на основе ИИ.

Вот несколько подобных сервисов:
- BoltNew
- v0 by Vercel
- lovable

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

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

А теперь немного про мой опыт 👇.

1️⃣ Первый опыт

Первый раз, когда я наткнулся на v0, я попросил его сгенерировать интерфейс Айфона по скриншоту (тут демка). Когда я увидел результат, то в восторге побежал показывать жене. А потом понял, что шутки про замену фронтендеров на ИИ перестали быть шутками 😅.

2️⃣ Опыт использования в работе

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

У библиотеки, есть большой набор демок, но то, что требовалось мне — отсутствовало. И тут я вспомнил про v0 и решил сам сгенерировать маленькие прототипы на каждую новую фичу.

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

P.S. итоговую оценку всё же стоило умножить на 2 😅.

3️⃣ Ещё пример

Также мы рассматривали вариант, сменить GoJS на @xyflow/react и тут мне снова помог V0. Примеры для @xyflow/react v0 генерировал намного лучше. За пару дней я набросал небольшой прототип, который точно писал бы неделю. Я сделал скриншот дизайна в фигме, и попросил v0 сгенерировать его с использованием библиотеки.

🛑 Минусы

Тут конечно, важно сказать, что часто эти сервисы:
- генерируют нерабочий код
- генерируют не совсем то, что вам нужно
- могут сломать весь проект после очередных изменений
- имеют ограниченное количество бесплатных запросов в день

Расскажите, пользуетесь ли вы подобными сервисами и какое у вас впечатление?

#Frontend #Ai