Руслан Куянец | Reactify

📚 Кэширование без меры: когда оптимизация становится проблемой Кэширование и мемоизация звучат как бесплатная оптимизация. Мы думаем: «Раз вычисление можно не делать повторно, значит всегда лучше закэшировать». Но это опасное заблуждение. Если кэшировать без меры, приложение начинает засорять память и работать хуже, а не лучше. 🚨 Как мы засоряем память Представьте, что вы храните в памяти результаты всех вычислений. Старые данные не удаляются, новые постоянно добавляются. В итоге кэш разрастается до сотен мегабайт. На слабых устройствах это выливается во фризы или даже падение. Был реальный кейс: разработчик решил «оптимизировать» React-страницу и мемоизировал каждый UI-компонент. На странице их было сотни. В итоге выигрыш оказался мизерным, а память улетела в космос. Сам процесс мемоизации стал дороже, чем пересчёт. Правильнее было бы мемоизировать целую форму или контейнер, где решение о перерисовке действительно экономит ресурсы. ❌ Пример бессмысленной мемоизации

function add(a, b) {
  return a + b;
}

// кто-то решил мемоизировать даже это
function memoize(fn) {
  const cache = new Map();
  return function(...args) {
    const key = args.join(',');
    if (cache.has(key)) return cache.get(key);
    const result = fn(...args);
    cache.set(key, result);
    return result;
  };
}

const memoAdd = memoize(add);

console.log(memoAdd(2, 3)); // 5
console.log(memoAdd(2, 3)); // 5 из кэша (но толку?)

Сложение и так работает за наносекунды. Хранить результаты в памяти бессмысленно — найти их в Map будет дольше. ✅ Пример, где кэш оправдан Тяжёлые операции, например парсинг или генерация отчётов.

function heavyComputation(key) {
  // имитация дорогой операции
  for (let i = 0; i < 1e7; i++) {}
  return `Result for ${key}`;
}

Если вызывать её часто с одними и теми же данными, кэш реально ускоряет работу. Но нужен лимит. Самый популярный вариант — LRU Cache (Least Recently Used).

import LRU from 'lru-cache';

const cache = new LRU({ max: 100 }); // максимум 100 элементов

function getData(key) {
  if (cache.has(key)) {
    return cache.get(key);
  }
  const result = heavyComputation(key);
  cache.set(key, result);
  return result;
}

console.log(getData("a")); // долго
console.log(getData("a")); // быстро, из кэша

Теперь кэш не растёт бесконечно. Когда хранилище достигает 100 элементов, старые записи выбрасываются. 🔧 Пример из UI Вместо того чтобы мемоизировать каждый компонент по отдельности:

const MemoButton = React.memo(Button);
const MemoInput = React.memo(Input);
const MemoLabel = React.memo(Label);

Лучше мемоизировать контейнер, внутри которого они все живут:

const Form = ({ fields, onSubmit }) => {
  return (
    <form onSubmit={onSubmit}>
      {fields.map((f) => (
        <Input key={f.id} {...f} />
      ))}
      <button type="submit">Submit</button>
    </form>
  );
};

// мемоизируем целиком форму
export default React.memo(Form);

Так вы экономите не на «каждой кнопке», а на всей форме сразу. Это дешевле и эффективнее.

Кэш — это инструмент, а не магическая палочка. Он действительно помогает на тяжёлых вычислениях и часто используемых данных. Но хранить всё подряд — значит засорять память. Лёгкие операции всегда лучше пересчитать заново. А в UI выгоднее мемоизировать крупные контейнеры, а не каждую мелочь.

💡Правило простое: если сомневаешься — лучше пересчитай, чем закэшируй навсегда. #оптимизации #react #frontend #память #memo #кеширование

🎯 Менторство до трудоустройства (всё включено, оплата после оффера) Редко пишу про своё дело, хотя уверен — программа одна из лучших на рынке. Вот почему: 🔹 Авторская программа — все курсы, гайды и материалы написаны мной: от основ HTML до деплоя и архитектуры. 🔹 Реальная стажировка — участие в большом проекте с командой из 60 специалистов (QA, Backend, Analyst, Frontend, iOS, Android, дизайнеры). Работаем по всем процессам как в настоящей компании. 🔹 Максимальная вовлечённость ментора — экзамены, мок-собесы, групповые занятия, личные разборы. 🔹 Трудоустройство под ключ — подготовка резюме, тренировка собесов, сопровождение на этапе оффера и поддержка на испытательном сроке. 🔹 Сообщество 200+ выпускников и студентов — ребята, которые уже прошли этот путь, нашли работу и помогают друг другу. 🔹 Большая база знаний — 200+ записей лекций, собесов, гайдов и полезных материалов. Если ищешь качественное обучение до трудоустройства — пиши. Подробнее 👉 https://t.me/mentor_reactify/150

🖥 Замыкания и долгоживущие ссылки: как избежать утечек памяти Замыкания в JavaScript позволяют функциям «запоминать» переменные внешнего окружения. Но если в замыкании остаются большие объекты или DOM-элементы, сборщик мусора их не очистит — это приводит к утечкам памяти. 🔹 Проблема: долгоживущие ссылки Когда замыкание хранит объект, на который больше нет других ссылок, сборщик мусора не может его удалить, потому что замыкание всё ещё держит ссылку.

function createCache() {
    const cache = { largeData: new Array(1000000).fill('*') };

    return function getCache() {
        return cache;
    };
}

const getCache = createCache();
// cache занимает память, пока существует getCache

Здесь cache будет жить в памяти пока существует функция getCache, даже если мы больше не используем её данные. 🔹 Решение 1: функция очистки Можно добавить метод для обнуления ссылок, чтобы GC мог очистить объект:

function createCache() {
    let cache = { largeData: new Array(1000000).fill('*') };

    function getCache() {
        return cache;
    }

    getCache.cleanup = function () {
        cache = null; // память освобождается
    };

    return getCache;
}

const getCache = createCache();
getCache.cleanup(); // теперь память под cache может быть освобождена

🔹 Решение 2: WeakMap для временных данных Если нужно хранить состояние объектов, но не держать их в памяти навсегда, используйте WeakMap. Сборщик мусора автоматически очистит объект, когда на него не останется ссылок.

const objectData = new WeakMap();

function attachData(obj) {
    objectData.set(obj, { temp: 'data' });
}

let obj = {};
attachData(obj);

obj = null; // объект и данные в WeakMap будут автоматически удалены

🔹 Резюме: как безопасно использовать замыкания - Не храните в замыканиях лишние объекты. - Для больших структур или временных данных используйте WeakMap/WeakSet. - Добавляйте функции очистки (cleanup) для объектов и стейта, которые больше не нужны. - Проверяйте память через DevTools, чтобы убедиться, что объекты удаляются.

💡 Совет для разработчиков: Любой state или кеш, который вы храните в замыкании, должен иметь «точку выхода» — иначе ваше приложение постепенно «накопит» память, которая больше не используется.

#оптимизации #react #frontend #память #замыкания

🧠 Оптимизация памяти во фронтенде Когда говорят про оптимизацию фронтенда, чаще всего думают о скорости загрузки или анимациях. Но есть ещё одна важная область — память. - утечки замедляют приложение со временем - на мобильных устройствах это может приводить к крашам - стабильность UX напрямую зависит от того, как мы управляем памятью Теперь давайте поговорим об основных источниках проблем 1️⃣Замыкания и долгоживущие ссылки Частая ошибка — сохранять в замыкании большие объекты или DOM-элементы, которые уже не нужны. В итоге GC (сборщик мусора) не может их очистить. Решение: не тащить в замыкания лишнее, по возможности использовать WeakMap/WeakSet для хранения. 2️⃣Неудалённые обработчики событий Навесили addEventListener, но забыли removeEventListener. Опасно при работе с компонентами: удалённый компонент может остаться в памяти из-за висящего обработчика. Решение: всегда отписываемся.

useEffect(() => {
  const handler = () => console.log("scroll");
  window.addEventListener("scroll", handler);

  return () => {
    window.removeEventListener("scroll", handler);
  };
}, []);

3️⃣Таймеры и интервалы Забытые setInterval или setTimeout продолжают жить, даже если компонент уже размонтирован. Решение: чистим вручную.

const id = setInterval(() => doWork(), 1000);
// позже
clearInterval(id);

4️⃣Кэширование «без меры» Иногда мы храним результаты в памяти (memoization, cache, global store), но не думаем про «старые» данные. В итоге кэш растёт бесконечно. Решение: использовать LRU cache или ограничивать размер хранения. 5️⃣Глобальные ссылки и синглтоны Всё, что записано в глобальную область (window, global store), живёт всё время жизни приложения. Если туда положить тяжёлый объект, GC его никогда не удалит. Решение: хранить только действительно нужное, очищать ссылки вручную, если объект больше не нужен. 6️⃣DOM-ссылки и оторванные узлы Если держать ссылку на DOM-элемент, удалённый из документа, он остаётся в памяти. Особенно актуально при ручной работе с document.createElement. Решение: обнулять ссылки после удаления узлов. #оптимизации #react #frontend #память

🧠 Оптимизация памяти во фронтенде Когда говорят про оптимизацию фронтенда, чаще всего думают о скорости загрузки или анимациях. Но есть ещё одна важная область — память. - утечки замедляют приложение со временем - на мобильных устройствах это может приводить к крашам - стабильность UX напрямую зависит от того, как мы управляем памятью Теперь давайте поговорим об основных источниках проблем 1️⃣Замыкания и долгоживущие ссылки Частая ошибка — сохранять в замыкании большие объекты или DOM-элементы, которые уже не нужны. В итоге GC (сборщик мусора) не может их очистить. Решение: не тащить в замыкания лишнее, по возможности использовать WeakMap/WeakSet для хранения. 2️⃣Неудалённые обработчики событий Навесили addEventListener, но забыли removeEventListener. Особенно опасно при работе с компонентами: удалённый компонент может остаться в памяти из-за висящего обработчика. Решение: всегда отписываемся. ``` useEffect(() => { const handler = () => console.log("scroll"); window.addEventListener("scroll", handler); return () => { window.removeEventListener("scroll", handler); }; }, []); ``` 3️⃣Таймеры и интервалы Забытые setInterval или setTimeout продолжают жить, даже если компонент уже размонтирован. Решение: чистим вручную.

const id = setInterval(() => doWork(), 1000);
// позже
clearInterval(id);

4️⃣Кэширование «без меры» Иногда мы храним результаты в памяти (memoization, cache, global store), но не думаем про «старые» данные. В итоге кэш растёт бесконечно. Решение: использовать LRU cache или ограничивать размер хранения. 5️⃣Глобальные ссылки и синглтоны Всё, что записано в глобальную область (window, global store), живёт всё время жизни приложения. Если туда положить тяжёлый объект, GC его никогда не удалит. Решение: хранить только действительно нужное, очищать ссылки вручную, если объект больше не нужен. 6️⃣DOM-ссылки и оторванные узлы Если держать ссылку на DOM-элемент, удалённый из документа, он остаётся в памяти. Особенно актуально при ручной работе с document.createElement. Решение: обнулять ссылки после удаления узлов. #оптимизации #react #frontend #память

🔧 Как оптимизировать фронтенд? Во-первых, знание способов оптимизации фронтенд-приложений полезно абсолютно всем разработчикам: это помогает писать более качественный, эффективный и поддерживаемый код. Во-вторых, тема оптимизаций регулярно всплывает на собеседованиях. Когда вас спрашивают, важно не просто перечислить техники, а уметь рассуждать, приводить примеры и объяснять, почему именно этот подход работает. Нужно чувствовать себя в этом вопросе как рыба в воде. Чтобы в этом разобраться, мы будем делить оптимизации на разные категории. Это позволит системно подойти к теме, а не сваливать все приёмы в одну кучу: 📌 1. По направлению оптимизации (Что именно оптимизируем?) → Загрузка (быстрее доставить код и ассеты пользователю) → Выполнение (ускорить работу JS, рендера, анимаций) → Рендеринг (уменьшить количество перерисовок, оптимизировать DOM и Virtual DOM) → Сеть (сократить количество запросов, уменьшить вес ресурсов) → Память (контролировать утечки и тяжелые структуры данных) → Пользовательский опыт (UX perf) (перфоманс как часть удобства: LCP, FID, CLS) 📌 2. По подходу (активные / пассивные) → Активные — мы прямо пишем код с учетом оптимизаций (мемоизация, lazy-loading, code splitting). → Пассивные — мы просто правильно настраиваем окружение и используем инструменты (CDN, HTTP/2, gzip/brotli, кеширование). 📌 3. По уровню применения → Фреймворк-специфичные (React: memo, useCallback, Suspense; Vue: computed, watchEffect, и т.д.) → Языковые/ванильные (JS: Event delegation, Web Workers; CSS: will-change, contain; HTML: loading="lazy") → Инфраструктурные (CDN, кеши, SSR/SSG, bundlers: webpack/vite/rollup) → Браузерные и DevTools (Performance tab, Lighthouse, Coverage, профилировщики) → Архитектурные и паттерны (Декомпозиция, DRY, SOLID и тд.) 📌 4. По типу эффекта → Скорость загрузки (Load performance) — как быстро сайт открывается. → Интерактивность (Runtime performance) — как быстро реагирует на действия. → Гладкость (Smoothness) — FPS, плавность анимаций, отсутствие "лагов". → Устойчивость (Stability) — CLS, предсказуемость интерфейса. 📌 5. По времени применения → До разработки — проектирование архитектуры, выбор стека. → Во время разработки — правильные паттерны, линтеры, code splitting. → После разработки — профилирование, мониторинг перфоманса, оптимизация по данным реальных пользователей (RUM). Я запускаю цикл постов, в котором на конкретных примерах разберём каждую категорию. Посмотрим, какие инструменты и практики можно применять, обсудим их плюсы и минусы, а также то, как они работают в реальных проектах. Цель — собрать большую базу знаний из 50+ способов оптимизации фронтенда (а может, получится и больше). В итоге выйдет не просто серия постов, а полноценная карта оптимизаций, которая станет шпаргалкой для собесов и практической помощью в работе. #оптимизации #react #frontend

🖥 Middle Frontend разработчик в компанию Ай-Теко Техническое собеседование. ЗП: от 200к. Май 2025. Проект: Сбер. Опыт: 4 года. Задачи: Отсортировать список нечетных чисел, валидность скобок. Вопросы: - Перечислите основные методы массивов - Какие есть способы создания объектов и в чем их отличия? - Что такое Promise? - Расскажите про все методы Promise? - Расскажите про this и контекст? Все 14 вопросов можно посмотреть на нашей платформе #собес

🚀 YeaHub растёт — вместе с вами Сегодня YeaHub — это платформа, которая помогает айтишникам готовиться к собеседованиям, развивать навыки и уверенно расти в профессии. Но это только начало. Мы создаём единую точку входа в IT — пространство, где можно не только учиться, но и общаться, развиваться, строить карьеру и создавать. 📺 Медиа-экосистема YeaHub Мы активно развиваем наши медиа-платформы, чтобы вдохновлять, делиться опытом и рассказывать истории IT: ✈️ Telegram-экосистема каналов 📹 YouTube-канал (скоро будет много полезного контента!) 🎵 TikTok с быстрыми и полезными форматами 📷 Аккаунт в Нельзяграме Также мы будем публиковать статьи на внешних площадках от лица YeaHub, чтобы наш голос был услышан шире. 👥 YeaHub — это сообщество Мы строим не просто платформу, а живое комьюнити. Планируем проводить: - регулярные голосования, - обсуждения улучшений, - активности для участников. Каждый участник — важная часть YeaHub. Мы хотим, чтобы вы не только пользовались платформой, но и влияли на её развитие. 👨‍💻 YeaHub — это проект, который делают айтишники Наша платформа создаётся айтишниками для айти — вместе с опытными экспертами и участием стажёров. Для новичков это: - реальный опыт командной разработки, - работа по Scrum, - взаимодействие с разными ролями, - практика на большом, живом проекте. А ещё наш код полностью открыт — специально для тех, кто хочет учиться на реальных проектах. Это отличная возможность погрузиться в живую кодовую базу https://github.com/YeaHubTeam 🦸‍♂️ Кто стоит за разработкой: @ruslan_kuyanets @denispereloma @the_real_daniil — менторы по Frontend, разрабатывают веб-версию YeaHub вместе со своими учениками @kishmyak — ментор по Android, вместе с новичками работает над Android-приложением @isakovios — ментор по iOS, вместе с учениками развивает iOS-версию @edzi_qa — ментор по QA, помогает минимизировать баги и прокачивает будущих тестировщиков @turimik — ментор по системной аналитике, его команда пишет требования и описания задач для всех участников Также в проекте участвуют дизайнеры, backend-разработчики и другие специалисты, которые двигают YeaHub вперёд. Мы растём, и вместе с нами растут участникы команды — получая бесценный опыт. 🤝 YeaHub объединяет Мы развиваем систему Guru (Экспертов) чтобы контент и качество платформы было на высоком уровне. Сейчас в нашей команде экспертов есть: 👩‍💻 Guru Frontend | РУСЛАН КУЯНЕЦ 🖥 Guru Android | АНТОН ГУЛЯЕВ 🍏 Guru iOS | РОМАН ИСАКОВ 👾 Guru Golang | МАКСИМ ЛУКЬЯНОВ 👩‍💻 Guru QA | ЗИЯЕВ ЭД 🚀 Вперёд — к новым вершинам Впереди много вызовов и амбициозных планов. Спасибо, что вы с нами. Мы делаем это вместе 💜 👉 Обучайтесь, общайтесь, растите вместе с https://yeahub.ru

🖥 Ты не сможешь решить эти Event loop задачки На собеседованиях часто просят определить порядок вывода в консоль — это типичные задачи на понимание работы Event Loop в JavaScript. Их нужно не просто уметь решать, но и грамотно объяснять, почему вывод именно такой. Многие новички теряются на таких заданиях, потому что не понимают, как работает механизм очередей и стеков исполнения. На самом деле, всё становится гораздо проще, когда ты разберёшься в логике работы Event Loop. После этого ты сможешь решать практически любую подобную задачу. Кстати, у меня есть видео, где я подробно разбираю 5 разных задач, показывая на схеме каждый шаг: — что куда попадает — в какую очередь отправляется — в какой момент выполняется Рекомендую посмотреть, особенно если хочешь уверенно чувствовать себя на техническом собеседовании. 📹 Разбор задач по Event Loop с собеседований

console.log('Start');

Promise.resolve()
  .then(() => {
    console.log('Promise 1');
    Promise.resolve()
      .then(() => console.log('Nested Promise'));
  })
  .then(() => console.log('Promise 2'));

console.log('End');

console.log('Start');

setTimeout(() => console.log('Timeout 1'), 0);

Promise.resolve()
  .then(() => {
    console.log('Promise 1');
    setTimeout(() => {
      console.log('Timeout 2');
      Promise.resolve().then(() => console.log('Promise inside Timeout'));
    }, 0);
  });

setTimeout(() => console.log('Timeout 3'), 0);

console.log('End');

Promise.resolve('Data')
  .then(res => { throw new Error('Problem'); })
  .catch(err => {
    console.log('Caught:', err.message);
    return 'Recovered';
  })
  .finally(() => console.log('Cleanup'))
  .then(res => console.log('Final:', res));

За чем следить айтишнику 😅 Ваши ставки? Ждём снижение ставки?

Не люблю разводить срачи, но на мой канал запущен таргетинг от одного "ментора". За ним стоит большая команда продюсеров и крупный рекламный бюджет. Сам он занятий не проводит — всё на кураторах. А реклама — повсюду: Яндекс, ВК, Телеграм и т.д. Совсем недавно у него была схема 10k предоплата + 100% постоплата после трудоустройства. Сейчас — только полная предоплата 180k+. Почему так? Видимо, экономика не сходится: нужно платить кураторам, покупать рекламу, греть новых клиентов. А вот с трудоустройством у учеников не всё гладко — до оффера довести получается далеко не всегда. Поэтому и убрали постоплату: деньги нужно забрать сразу, а будет ли результат — неважно. Интересный момент: сам "ментор" начал путь с нуля всего год назад, с помощью другого наставника. Более того, материалы своего ментора он просто украл, за что был исключён из сообщества ОМ. Мораль проста: прежде чем идти на курс или менторство — изучайте, кто стоит за проектом. Репутация, реальный опыт, результаты учеников — всё это важно. Не ведитесь на агрессивную рекламу.

🖥 Практика в Open-Source: как начать и зачем это нужно Участие в open-source проектах — один из лучших способов прокачать навыки, получить реальный опыт и сделать вклад в IT-сообщество. Как начать? → Выберите проект – найдите проект на GitHub/GitLab, который вам интересен (например, связанный с вашим стеком технологий). → Изучите документацию – перед внесением правок разберитесь в структуре кода и правилах контрибуции (часто есть файл CONTRIBUTING.md). → Начните с малого – исправьте опечатки, улучшите документацию или возьмите задачу с меткой good first issue. → Делайте пул-реквесты (PR) – предлагайте свои изменения, следуя стандартам проекта. → Получайте фидбек – ревью от опытных разработчиков поможет вам расти. Зачем это нужно? ✅ Реальный опыт – работаете с живым кодом, а не учебными примерами. ✅ Портфолио – ваши контрибуции видны в профиле GitHub и могут заинтересовать работодателей. ✅ Нетворкинг – знакомитесь с разработчиками и получаете рекомендации. ✅ Помощь сообществу – ваш вклад может упростить жизнь другим программистам. Где искать задачи? →GitHub Explore (github.com/explore) →Good First Issues (goodfirstissues.com) →Open Source Friday (opensourcefriday.com) Совет: Не бойтесь ошибаться – даже небольшие правки ценны. Главное – начать! YeaHub тоже поддерживает open-source инициативу. Мы начали проработку гайдов, задач и issues, чтобы начинающие разработчики могли практиковаться. А пока можете предлагать улучшения😊 https://github.com/YeaHubTeam/yeahub-platform

🚀 YeaHub в цифрах Аудитория: → 3 500 зарегистрированных пользователей → 10 000 подписчиков в экосистеме YeaHub (Telegram) → 2 000 подписчиков в Instagram → 1 000 подписчиков на YouTube → 1 200 подписчиков в TikTok → 100 000+ посетителей с ноября 2024 года Команда и развитие: → Более 100 IT-специалистов работали над платформой (разработчики, дизайнеры, тестировщики) → Инкубировали 60+ молодых специалистов, успешно трудоустроившихся после стажировки → 4 стажёра на Go разрабатывают новый сервис для YeaHub В планах – привлечение начинающих тестировщиков для работы с реальным проектом. Хотите на бесплатную стажировку? Пишите: @yeahub_support Развитие платформы: → Расширяем партнёрство с экспертами для создания качественного контента → Разрабатываем новые сервисы для IT-развития → Постоянно улучшаем функционал платформы YeaHub растёт, обучает и создаёт новые возможности для IT-сообщества. 🚀 Подписывайтесь на каналы Экосистемы YeaHub Проект YeaHub: 🚀 YeaHub | 🖥 GitHub | ✈️ Telegram 🎵 TikTok | 📹 YouTube | 👥 Чат

🚗💨 Мой первый отпуск — путешествие по Центральной России Уже 4 года в IT я как белка в колесе: очень много работаю, почти без выходных. Весь этот путь я не останавливаюсь на достигнутом и постоянно стремлюсь на новый уровень. Но, наслушавшись разных нарезок про миллиардеров, я понял: чтобы открывать новое и генерировать идеи, нельзя круглосуточно сидеть в комнате, не видя белого света. Без путешествий, вдохновения и новых знакомств прорыв становится почти нереальным. И вот я с семьёй отправляюсь в месячное турне на машине по городам Центральной России. Цель: отдохнуть, расширить кругозор и встретиться в разных городах с учениками и коллегами. Уже 19 июля в Москве запланирована встреча с учениками — будем целый день гулять по городу и общаться. Очень жду этих встреч! С кем-то знаком больше года, кто-то ещё учится, у кого-то уже 6-10 месяцев опыта, хотя недавно только закончили обучение — как же быстро летит время! 🤯 Ну и, конечно, куда же без нетворкинга и развития? А лучший способ прокачать это — IT-мероприятия. Не устану повторять: ходите на митапы и айтишные тусовки! Стесняетесь? Боитесь? А как вы будете тогда проходить собеседования? Трудоустройство в IT — это комплексный подход. Нужно быть сильным не только технически, но и в софт-скиллах: навыки общения и уверенность в себе решают очень многое. Кстати, на менторстве мы работаем по всем фронтам — прокачиваем и хард, и софт. На мероприятиях можно познакомиться с крутыми людьми, и кто знает — возможно, именно они помогут вам с трудоустройством, зарефералят или поделятся ценным опытом. В общем, активность в IT-сообществе — это ключевое. Сидя дома и ни с кем не общаясь, карьеру не построишь. Поэтому во время поездки я планирую заглянуть на пару ивентов в городах маршрута. Чтобы не тратить время на поиски, пользуюсь каналом «IT-мероприятия России / ITMeeting / IT events» — там всё структурированно: митапы, вебинары, конференции в одном месте. Это лучший источник анонсов, и я всегда советую его ученикам, которые хотят прокачать нетворкинг. Подписывайтесь — вдруг найдете работу именно там😅 🔗 Ссылка на канал событий в IT Ну а если кто-то из вас живёт в городах моего маршрута (см. картинку 1) — предлагайте интересные места! А может, даже увидимся, и вы проведёте для меня мини-экскурсию? 😎 #work #meetups #conf #events

Я — плохой руководитель! Знаете, в IT очень много разговоров про work & life balance. Мол, работать много — плохо, и что нужно после работы отдыхать от компьютера. Насколько это верный тейк? Я всю свою сознательную жизнь отдыхаю от работы как в меме, где разработчик закрывает рабочий ноутбук и открываем рядом "домашний" ноутбук. И это в 80% случаев приводит к тому что в перерыве между матчами в CS:GO ты что делаешь? Правильно! Читаешь рабочие чаты, смотришь задачи, задаешь вопросы, пишешь код по каким-то задачкам и так далее. И всё бы ничего, но, кажется, я лет 5 назад, случайно, сам того не понимая, заразил этой "проактивной болезнью" нескольких разработчиков, которые сейчас трудятся вместе со мной в команде PREMIER.ONE. У меня есть разработчик. Имя не буду раскрывать, чтобы никто не догадался о ком я. Завуалирую его под какой-нибудь популярный город. Пусть будет Стамбул. Так вот. Стамбул приезжает в офис к 9-10 утра и уходит из офиса одним из самых последних. И нет, он не играет в CS:GO вечерами, просто чтобы жена дома не ругалась. Он работает, потому что... Да вот знал бы я. Последние 3 года я ругаюсь на него (иногда матом), пытаюсь мотивировать его семьёй, отдыхом, прогулками, да и вообще, пытаюсь применять любые доступные мне дистанционно способы воздействия с одним единственным посылом:

Хватит работать, блять! Иди домой и отдыхай! Работа не волк! Работа - ворк, а волк это гулять!

Но знаете что я получаю в ответ?

Да, Дим, сейчас тут одну штуку доделаю и ну вот СРАЗУ домой!

Бывают случаи, когда после таких слов я через пару часов звоню ему по facetime и что я вижу? Правильно. Офис на заднем фоне. Руководитель другой вертикали начал записывать мне кружочки в тг, когда уходит домой, где показывает что Стамбул сидит в пустом офисе и яростно что-то кодит. В такие моменты у меня смешанные чувства. С одном стороны — наверное я крутой руководитель, раз мои ребята настолько вовлечены в процесс, что не хотят уходить домой не доделав таску. С другой — я, видимо, плохой руководитель, если за 3 года не смог научить своих сотрудников соблюдать work & life balance. А как бы вы решили такой кейс? Отрубить интернет не поможет(( раздаст ведь, зараза, с телефона. Путь к СЕО (18+). Подписаться Другие соц.сети: 📷 Instagram 🎞 YouTube

👩‍💻 React Fiber React Fiber — это новый алгоритм согласования (reconciliation), представленный в React 16. Он заменил старый механизм обновления Virtual DOM 🗓 Что было до Fiber? До React 16 использовался стековый алгоритм рендеринга. Его ограничения: → Синхронный рендеринг – React выполнял обновление за один проход, блокируя основной поток. Если дерево компонентов было большим, это вызывало лаги. → Невозможность приоритизации – Все обновления обрабатывались в порядке очереди, даже если некоторые (например, анимации или пользовательский ввод) требовали более быстрой реакции. → Отсутствие прерываний – Процесс нельзя было разбить на части или отложить, что усложняло реализацию плавного интерфейса. 🔼 Почему Fiber — это улучшение? Fiber решает эти проблемы, вводя: → Инкрементальный рендеринг – Работа разбивается на небольшие части, которые выполняются в несколько кадров, избегая блокировки потока. → Приоритезацию задач – Критичные обновления (например, клики) обрабатываются раньше фоновых (рендер тяжёлых списков). → Возможность паузы и возобновления – React может прервать рендеринг для выполнения более важной задачи, а затем продолжить. → Поддержку рендеринга вне основного потока – Это основа для Concurrent React, позволяющего выполнять вычисления параллельно. Fiber не изменил принцип работы Virtual DOM, но сделал его обновление более умным и адаптивным. #react #fiber

📈 Сложности старта в 2025: где брать первый опыт Сейчас ситуация на рынке такова, что без опыта пробиться крайне сложно. Вариантов, по сути, четыре: → Крутить года 3-4 опыта, чтобы ваше резюме заметили → Превратить учебный опыт в коммерческий, например, 1 год на курсах превращаем в аутсорсинг → Пытаться устроиться через стажировки, джун-позиции или стартапы → Пойти во фриланс (хотя лично я считаю этот путь даже более тернистым, чем поиск постоянной работы. Помимо собственно разработки, здесь нужно уметь продавать свои услуги и постоянно искать клиентов) 🙂 "Готов работать за еду" — новая реальность? Помню, как сам когда-то был готов работать за еду. При этом рынок был другим — вакансий для джуниоров хватало, а советы "поработай год за опыт" все равно звучали из каждого утюга. Но сегодня эта фраза приобрела новый смысл. Она отражает жесткую реальность. 🥸 Где брать первый опыт? Сейчас лучшее время для создания своих проектов. Возможностей много: нейросети помогают быстрее разбираться в технологиях, появляются гранты и программы поддержки, а технологии становятся доступнее. Если хочется не просто учиться, а сразу погружаться в реальные проекты, то стартапы — один из немногих вариантов для новичка. Правда в том, что стартапы бывают разные: → Серьёзные проекты с инвестициями — там обычно ищут уже опытных разработчиков, новичкам там делать нечего. → Небольшие команды с ограниченным бюджетом — могут взять джуна или джун+, работать придется, как мидл, но платить будут немного (условные 100к). → Команды на энтузиазме — это когда фаундеры сами пишут код и ищут таких же голодных до опыта ребят. Часто без зарплаты или за символические деньги. Именно в третьем варианте больше всего шансов попасть в проект. Но нужно понимать: никто не будет вас учить. Задачи будут сложные, поддержки — минимум, а конкуренция даже за бесплатные места высокая. Стоит ли игра свеч? Можно попробовать: поработать 3–5 месяцев за опыт, а потом указать это в резюме как коммерческий стаж. Формально у вас будет "1.5 года опыта" (обучение 1 год + стартап).

Вот в чем парадокс: даже 1.5 года "настоящего" опыта сейчас не гарантируют легкого трудоустройства. А если ваш опыт — это стартап, то это равносильно отсутствию опыта. Эйчар не будет рисковать и тратить время на такого кандидата, когда есть сотни канидатов из Сберов.

🔔 Реальность для начинающих разработчиков сегодня Раньше джуниором считали новичка, которого долго обучали азам. Сегодня на эту позицию претендуют кандидаты с 1-2 годами опыта, а "абсолютных новичков" берут крайне редко. Но учиться стало значительно проще. Благодаря обилию материалов и нейросетям вроде ChatGPT, освоение новых технологий теперь занимает дни вместо недель. Помню, как сам когда-то неделями разбирался с React Cropper - сейчас нейросеть сократит время на прочтение документации и подскажет, как адаптировать под ваш кейс. Когда я разбирался с Linux, Docker и Nginx. ChatGPT экономил часы поиска - предлагал команды, объяснял логику, давал направления. Да, решения не всегда работали "из коробки" - нейросеть не видела мое окружение. Но даже ошибочные ответы помогали понять суть проблемы и быстрее разобраться. 📊 Реальность современного джуниора Сегодня наивно рассчитывать, что вас возьмут джуниором и будут "водить за руку". Таких условий на рынке уже давно нет. От начинающего разработчика ожидают: → Понимания всего цикла разработки: сборки, деплоя, CI/CD → Рабочего знакомства с Docker, Nginx и другими production-инструментами → Способности самостоятельно решать задачи

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

Где искать стартапы? Можно найти молодые проекты и писать им на почту, предлагать помощь, или найти чаты, где есть основатели стартапов. Там фаундеры ищут помощников. Таких чатов много — главное начать. @Startech_networking @Startupchat https://t.me/startup_polyana

А разве заманчивая рассрочка в 500к не превращается в ежемесячные платежи по 40к? Ведь это по сути чья-то ипотека или кредит... Зачем платить рассрочку, пока учишься, если есть риск не дойти до конца? Логичнее внести 30к предоплаты, а остальное — после результата, по постоплате. Если брать постоплату, первые 6 месяцев ты учишься бесплатно :) И только потом начинаешь платить по 40к. Да и вообще, постоплата в 100% от 200к — это 200к, а не 500к, как на этих курсах. 💡 Кстати, готовлю пост про стартапы. У меня есть база чатов, где собираются стартаперы. Есть возможность найти первую работу для практики и опыта.

❗️ С чего начать? → Всё самое важное здесь Привет, меня зовут Руслан! 👋 Я IT-специалист, ментор и основатель проекта YeaHub. Вот ключевые факты обо мне: • Founder & Tech Lead at YeaHub — Open Source платформа для IT-специалистов • Основатель Frontend-сообщества Reactify, веду YouTube и Telegram каналы • За 4 года в IT прошел путь от Junior до Senior и создал с нуля проект в роли Tech Lead • Активный участник IT-сообщества: выступаю на митапах и делюсь опытом • Экспертиза: Frontend, Backend, DevOps и управление командами IT для меня — это драйв, постоянное развитие и крутое комьюнити. Когда ты по-настоящему увлечён, работа становится не рутиной, а источником вдохновения. 🛣 Мой путь в IT и чего достиг: → Мой путь в IT. От монтажника до Frontend Разработчика → Как я изучал программирование → Как я искал первую работу в 2021 году → Мой первый серьезный проект: как я, джун, работал за мидла в британском финтехе → Работа в международной компании → Миграция бекенда и масштабный рефакторинг → Мой первый стартап — сервис онлайн-записи App-Salute → Уникальный опыт, который переоценить невозможно → Мой полный стек технологий А так же, я ментор по Frontend — помогаю новичкам прокачаться и устроиться в IT. Моё менторство — не про "вот ссылка на курс, учись, если будут вопросы - пиши". Это целая экосистема: мои курсы → проверка знаний → практика на реальном проекте → мок собесы → трудоустройство. Учу работать, а не просто готовлю к собесам. 👨‍💻 План обучения (Как проходит менторство) Это не "Фронтенд за 4 месяца". Это 160+ единомышленников, ежедневное общение, помощь и поддержка. С ментором — легче, но это не волшебная таблетка. Придётся работать, зато я буду рядом на каждом этапе: объясню, направлю и помогу избежать подводных камней. 📘 Гайд по изучению Frontend: → HTML, CSS, Git → JavaScript → React, Router, TypeScript, Redux → Практика и Архитектура → Трудоустройство Главное качество, которое я ценю в людях (и в себе) — это воодушевлённость. Мне нравятся активные люди, разделяющие мои взгляды и идеи. Я убеждён: если ты по-настоящему увлечён делом, то обязательно добьёшься в нём успеха. Мои социальные сети: ✈️ Telegram | 📹 YouTube Проект YeaHub: 🚀 YeaHub | 🖥 GitHub | ✈️ Telegram

👨‍💻 План развития Frontend Разработчика (Часть 5) Раньше, чтобы устроиться разработчиком, хватало умения писать код. Сейчас всё сложнее. Даже если ты уверенно работаешь с React или TypeScript, этого мало. Тебе придётся освоить целый пласт навыков, никак не связанных с программированием: - Как составить резюме, которое заметят? - Как пройти скрининг и собеседование? - Где искать вакансии, которые не публикуют на HeadHunter? - Как общаться с HR и не провалить службу безопасности? Каждая мелочь — это +1% к твоим шансам. А в нынешней конкуренции даже один процент может решить всё. Справедливо ли, что вместо углубления в технологии приходится месяц учить «правила игры»? Нет. Но так работает естественный отбор. Многие не выдерживают этого давления и сходят с дистанции. 💡 Какие у тебя варианты? 1. Стажировки и джун-позиции Подаваться на все стажировки, проходить собеседования, конкурировать с тысячами таких же новичков. Компании часто хотят, чтобы джун за 40к работал как мидл. Если получится — отлично. Но шансы невелики. 2. Фриланс Можно искать заказы, брать простые проекты, получать первые деньги. Но тут свои сложности: - Проекты чаще всего типовые, без роста скиллов. - Заказы могут пропадать на месяцы. - Первого клиента найти крайне сложно. 3. Стартап за печеньки Сейчас активно развивается множество новых проектов, и многим начинающим стартаперам нужны недорогие разработчики для их реализации. Это ситуация Win-Win: вы получаете хоть какие-то деньги, а стартап — разработчиков. Отличный старт для начала карьеры! Вам сразу дадут серьёзные задачи, а не стажёрскую рутину. 4. Приукрашивание опыта Если ты серьезно подходил к обучению и делал пет-проекты, почему бы не подать их как коммерческий опыт? Делал приложение с рецептами? Можно сказать, что разрабатывал систему для кондитерской сети. Писал бота для друзей? Заявишь, что делал MVP для стартапа. Главное — не перегибать и быть готовым к вопросам. 5. Накрутка опыта (хардкор-вариант) Звучит страшно, но давай начистоту: даже мидлы с 3–4 годами опыта сейчас не всегда проходят скрининг. Что уж говорить о новичках? Накрутка — это сложно. Ты должен: - Продумать историю «прошлых проектов» до мелочей. - Разбираться в архитектуре, инфраструктуре, процессах. - Быть готовым к боевым задачам. Это риск, но для некоторых — единственный шанс пройти отбор. Выбор всегда за тобой, но помни: в условиях жесткой конкуренции иногда приходится действовать по неочевидным правилам. Однако важно держать уровень: если не умеешь разрабатывать, а лишь поверхностно крутишь опыт — это плохо. То же самое, если не разбираешься в рабочих процессах. После прохождения курсов удели пару месяцев на проекты — большие, с API, множеством страниц, фичами и библиотеками. Углубляйся в архитектуру и инфраструктуру, осваивай настройку сборщиков и других инструментов. Научись писать тесты и деплоить приложения. Подойди к этому серьезно. Просто крутить код — слабый вариант, нужно еще и соответствовать. Какой бы путь вы ни выбрали — стажировки, фриланс или коммерческий опыт — важно понимать, как устроена работа в IT: → ВНУТРЯНКА АЙТИ: Как здесь все халтурят на самом деле https://youtu.be/zCamBnDSbxs?si=OlJnsSeKkpIFW883 → Что такое Git flow и когда использовать? https://youtu.be/umiT0yIsSrc?si=TCIyckvOeDQMWO2N → Как улучшить резюме: Проекты, Процессы и Достижения https://youtu.be/WemHjWFjh3o?si=yL5oNFeS_lYTHpl1 🔍 В моём закрытом чате есть много записей митапов для учеников. Попробуй 3 дня бесплатно или подпишись за 500₽/мес: → Типы компаний https://t.me/c/2189438448/3/3765 → Процессы Канбан и Скрам https://t.me/c/2189438448/3/4146 → Деплой, Процессы, Скрам, Docker, CI/CD на примере YeaHub https://t.me/c/2189438448/3/4535 → Рабочие процессы. Workflow, Gitflow. Взаимодействие внутри команды разработки https://t.me/c/2189438448/3/4174 #frontend #работа #трудоустройство