⚛️ State is tied to a position in the render tree

Помнится в одном из своих пет проектов у меня был баг — при переходе между страницами у меня не пересоздавался zustand стор из-за чего компонент PersonalStatistic использовал стор компонента CodeReviewCharts 👇

children: [
  {
    path: '/charts',
    element: (
      <ChartsStoreProvider createStore={createPersonalPageStore}>
        <CodeReviewCharts />
      </ChartsStoreProvider>
    ),
  },
  {
    path: '/personal',
    element: (
      <ChartsStoreProvider createStore={createCommonChartsStore}>
        <PersonalStatistic />
      </ChartsStoreProvider>
    ),
  },
]

Дело было в том, что контекст был одним и тем же компонентом ChartsStoreProvider. Тогда я просто добавил key для сторов и проблема ушла.

children: [
  {
    path: '/charts',
    element: (
      <ChartsStoreProvider key="charts" /*👈*/ createStore={createPersonalPageStore}>
        <CodeReviewCharts />
      </ChartsStoreProvider>
    ),
  },
  {
    path: '/personal',
    element: (
      <ChartsStoreProvider key="personal" /*👈*/ createStore={createCommonChartsStore}>
        <PersonalStatistic />
      </ChartsStoreProvider>
    ),
  },
]

Не помню было ли это в старой документации реакта, но в новой явно сказано:

State is tied to a position in the render tree

Состояние привязано к определённой позиции в дереве рендера.

То, есть проблема была в том, что при переходе на страницу /personal, ChartsStoreProvider оставался на той же позиции в дереве и поэтому использовался "неподходящий" стейт предыдущего провайдера.

Раньше я думал, что стейт живет "внутри компонента" — то, есть связан с инстансом конкретного компонента, как свойста в классе. Но документация явно говорит:

When you give a component state, you might think the state “lives” inside the component. But the state is actually held inside React. React associates each piece of state it’s holding with the correct component by where that component sits in the render tree.

Когда вы добавляете состояние (state) компоненту, может показаться, что это состояние «находится» внутри самого компонента. Однако на самом деле состояние хранится внутри React. React сопоставляет каждую единицу состояния с нужным компонентом, исходя из того, где этот компонент находится в дереве рендера.

Вот тут в демке это наглядно видно.

А ещё key можно использовать чтобы явно перерендерить компонент, если у него есть какой-то внутренний стейт.

#react

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

Недавно, также появилась подборка МЕГАFront. Если хотите получить список самых лучших вакансий — напишите напрямую Саше.

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

Расскажите, как сейчас лучше искать работу? hh.ru? LinkedIn? Сетка? Телеграм-каналы с подборками?

Особенности событий порталов в React ⚛️

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

createPortal

Метод createPortal позволяет рендерить компонент вне текущей DOM-иерархии, но при этом он остаётся частью React-дерева.

Теперь читаем документацию

События из порталов распространяются в соответствии с деревом React, а не деревом DOM. Например, если вы нажмёте внутри портала, и портал обёрнут в `<div onClick>`, сработает этот обработчик `onClick`. Если это вызывает проблемы, либо остановите распространение события (stopPropogation()) внутри портала, либо переместите сам портал выше в дереве React.

Что у нас случилось❓

В проекте мы недавно переписали тулбокс — панель, из которой можно перетаскивать элементы при создании workflow.

Из-за ограничений мы отказались от нативного drag-and-drop и использовали старый кастомный хук на обычных mousedown`/`mousemove.

Что фиксили? 🪲

В общем, всё работал, но пользователь мог начать перестаскивать элемент нажав на всплывающую подсказку (описание на картинке).

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

Причина в том, что React-ивенты всплывают по React-дереву, а не DOM. Всё как в доке. А пофиксили это простым добавлением stopPropogation() в onMouseDown компонента подсказки.

#react

🗿 Подводные камни при переходе с 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

🕸️ Я в Сетке

Я давно уже думаю, как диверсифицировать телеграмм и вести канал где-то ещё (а то вдруг с Дуровым что случится ...).

Я пробовал вести каналы:
- В Дзен — трафик нулевой, ни показов, ни просмотров
- На Хабре — тут получше, но нет удобного способа делать репосты из телеги
- На Пикабу — и просмотры есть и бот для репостов, но на пикабу я не сижу от слова совсем

Теперь решил попробовать Сетку, завел канал и пока вроде всё идет хорошо. Правда с форматирование кода — грусть грустная, надеюсь поправят. Если что Сетка — это рабочая соцсеть от hh.ru, что-то вроде LinkedIn.

В Сетке есть отдельный формат постов "Вопросы", а ещё лента, к которой мы так привыкли. И в результате, можно получить ответы от самых разных людей.

Вот некоторые из моих вопросов:
- Как изменилась работа в финтехе с появлением ИИ?
- Есть ли в России отечественные no-code или low-code платформы?
- Как получать зарплату от зарубежных компаний, если все Российские банки под санкциями?


В общем, если у вас есть сетка — добавляйтесь. А я пойду получу галочку)

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

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

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

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

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

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

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

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

#about_me

📝 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

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

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

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

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

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

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

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


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

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


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

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


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

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

#стратоплан

📈 Анимации по скролу — Scroll Progress Timelines

У меня вообще не очень дела с CSS анимациями, но я наконец-то дочитал статью An Introduction To CSS Scroll-Driven Animations и решил рассказать, что такое Scroll Progress Timelines, и показать свою небольшую демку.

Обязательно откройте статью — там крутые примеры! Только посмотрите на эту шикарную демку с сардинами с шпротами сардинами 🐟.


Если вы писали простейшие анимации, вы знаете, что обычно нужно прописать длительность цикла анимации:

.element { 
 animation-duration: 2s; 
}

Scroll Progress Timelines позволяют вместо времени использовать позицию скроллбара элемента. То есть, вы скроллите страницу вниз — анимация воспроизводится вперёд, скроллите вверх — прокручивается назад 🔁

Самый очевидный пример — прогресс чтения статьи, который растёт, пока вы пролистываете страницу.

Для этого достаточно указать:

animation-timeline: scroll(<scroller> <axis>);

У функции scroll есть два необязательных параметра:
- scroller — указывает контейнер прокрутки: nearest, root или self
- если этих значений недостаточно, смотрите в сторону scroll-timeline-name и timeline-scope — они позволяют привязать анимацию к скроллбару любого элемента.
- axis — направление прокрутки:
- block — по оси y (вертикально)
- inline — по оси x (горизонтально)

Ещё с помощью animation-range можно управлять, в какой момент начинается и заканчивается анимация.

Возвращаясь к примеру с прогрессбаром чтения — мы явно хотим, чтобы анимация закончилась у секции с футером высотой в 500px:

animation-range: 0% calc(100% - 500px);

👉 Моя демка

Я решил накидать свою демку и попробовал реализовать анимацию прокрутки к историям в Телеграме. Если кратко:
- анимация работает только на первых 100px прокрутки
- тут помог animation-range: 0 100px
- список сообщений смещается вниз на 100px по мере прокрутки, чтобы не мешать показу историй

@keyframes scrollAnimation {
 from {
  margin-top: 0;
 }

 to {
  margin-top: var(--stories-height);
 }
}

.contacts-list { 
 /* ... */
    animation: scrollAnimation linear;
 animation-timeline: scroll();
 animation-range: 0 var(--stories-height);
 animation-fill-mode: both;
}

- Чтобы анимация не застывала на промежуточном этапе, используется scroll-snap-type: y proximity. Так как секция с историями position: sticky, а список сообщений перемещается по анимации, то их использовать не получится. Но Claude подсказал мне, что можно использовать псевдо-элементы со свойстов scroll-snap-align: start, где они абсолютно позиционированы
- первый — top: 0
- второй — top: 100px
- Всё написано на CSS, кроме одного: позиция скролла устанавливается через JS, чтобы истории были свернуты — как в самом Телеграме. Если знаете как это сделать через CSS — расскажите 🙏.

🚨 В общем переходите и поиграйтесь тут


Ещё про анимации на сайте доки:
- scroll-snap-type
- keyframes
- animation

И вот ещё одна демка с тенями прокрутки

Расскажите, вам часто приходится применять что-то подобное на реальных проектах? Я вот пока ни разу не применял, но знаю, где это могло бы мне помочь лет 6 назад 😅.

#css #animations

🚧 Почему виртуальный скролл ломается на больших данных

Сегодня хочу рассказать вам вот об этой статье How to Implement Virtual Scrolling Beyond the Browser's Limit.

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

Обычно он реализуется так:
- есть элемент, назовём его viewport,
- внутри — контейнер content, в котором находится список всех элементов,
- этому контейнеру задаётся высота по формуле: высота одного элемента × общее количество элементов,
- при этом рендерятся только те элементы, которые попадают во viewport, а их позиция задаётся через transform: translateY(...).

Но знаете ли вы, что у стандартного virtual scrolling, который использует нативный скроллбар, есть ограничения?

Когда мы задаём общую высоту контента, она может оказаться больше, чем максимально поддерживаемое значение в браузере. Я измерил локально и получил такие значения:
- Safari: 33,554,428px
- Chrome: 16,777,200px
- Firefox: после определённого значения значение сбрасывается в 0

Ограничения можете проверить сами.
👉 Здесь накидал небольшую демку.

Из-за этого нельзя доскроллить до самого конца списка — высота просто "обрезается".

Примеры:

<!-- Safari: высота обрежется до 33,554,428px -->
<div style="height: 9999999999999px;"></div>

<!-- Даже без прямого указания общей высоты -->
<!-- В сумме 40,000,000px, но всё равно обрежется -->
<div>
  <div style="height: 20000000px"></div>
  <div style="height: 20000000px"></div>
</div>

На работе мне нужно было реализовать JsonViewer, который умеет отображать огромные JSON-файлы.

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

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

Выглядит это примерно так:

const ITEM_HEIGHT = 30;

// Генерируем список из 3 миллионов элементов
const items = Array.from({ length: 3000000 }, (_, i) => `Item ${i}`);

// 3,000,000 × 30px = 90,000,000px (> лимита браузера)
const totalHeight = ITEM_HEIGHT * items.length;
const viewportSize = 300;

export default function App() {
  return (
    <ScrollPane contentSize={totalHeight} viewportSize={viewportSize}>
      {(scrollPosition) => {
        // Вычисляем, какие элементы нужно отрендерить
        const startIndex = Math.floor(scrollPosition / ITEM_HEIGHT);
        const endIndex = Math.min(
          Math.ceil((scrollPosition + viewportSize) / ITEM_HEIGHT) + 1,
          items.length
        );
        const visibleItems = items.slice(startIndex, endIndex);

        // Смещение первого видимого элемента
        const startPosition = startIndex * ITEM_HEIGHT;

        return (
          <div
            style={{
              position: 'absolute',
              top: startPosition - scrollPosition,
            }}
          >
            {visibleItems.map((item) => (
              <div key={item} style={{ height: ITEM_HEIGHT }}>
                {item}
              </div>
            ))}
          </div>
        );
      }}
    </ScrollPane>
  );
}

Демку, где рендерятся 3 миллиона элементов, можно посмотреть здесь.
Подробнее это всё разбирается в статье.

#JavaScript #Performance #Browser