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

➡️ Миграция бекенда и масштабный рефакторинг Одним из ключевых этапов моей работы в LS.Graphics стала миграция бекенда с Firebase Firestore на MongoDB. Это был мой первый такой опыт работы с бекендом и базами данных. Эти улучшения значительно улучшили производительность и масштабируемость сервиса. Что было сделано: - Переписал ядро сервиса, оптимизировал запросы и обновил архитектуру. - Вместе с командой продумали новую схему хранения сущностей, связи между ними и механизмы взаимодействия. - Добавил кеширование частых запросов и систему ревалидации, что снизило нагрузку на базу и ускорило отклик сервиса. 🖥 Разработка веб-приложения с графическим редактором Этот проект стал для меня важной вехой - создание проекта с нуля. На разработку от начального проектирования до выпуска в продакшен ушло около 7 месяцев. Впервые в своей практике я полностью самостоятельно: - Проектировал архитектуру приложения - Выбирал технологический стек - Составлял техническую документацию - Осуществлял полный цикл разработки Для проекта я выбрал Next.js, нам критически был необходим СЕО. Пришлось знатно перелопатить базу данных, для добавления слагов и упрощения структуры данных. Я реализовал сложный поиск продуктов, внедрил расширенный редактор мокапов. Добился отличных показателей СЕО, а так же неплохую скорость. Большая часть страниц отдавалась с сервера моментально. А так же добавили CDN + внедрили общие практики оптимизации изображений. 💎 Разработка графического SVG-редактора Главным и наиболее сложным проектом в моей карьере стал графический редактор для работы с SVG - аналог Figma, который я разрабатывал в течение года. Это было полноценное standalone-решение, интегрированное с нашей платформой мокапов. Основные возможности редактора: - Бесконечный холст с поддержкой множества элементов - Полный набор трансформаций: перемещение, масштабирование, вращение - Многоуровневая система слоев с возможностью изменения структуры - Комплексный SVG-парсер, создающий оптимизированную структуру с правильным именованием элементов и свойств Система управления состояниями: - Реализация Undo/Redo через IndexedDB - Поддержка более 300 состояний холста - Оптимизированный механизм хранения (сжатие данных) - Минимизация перерисовок для плавной работы - Работа с растровыми изображениями: Кадрирование, Обрезка, Трансформации. - Система горячих клавиш: Более 50 комбинаций, Настраиваемые сочетания - Экспорт результатов: Поддержка множества форматов - Модуль предпросмотра перед сохранением Результатом стал профессиональный инструмент, сочетающий богатый функционал с высокой производительностью и удобным интерфейсом. ➕ Дополнительные проекты и опыт В рамках работы в LS.Graphics я также реализовал несколько других значимых проектов: 1. Десктопная версия плагина (Electron.js) 2. Единый UI Kit для всех проектов 3. Реализовал 2 AI-сервиса 4. Работал над добавлением новых фич в CRM платформу Было интересно работать с разными технологиями и продуктами. 📌 На картинках — 3 продукта над которыми я работал В следующем посте я расскажу о своих проектах и о том, как научился создавать приложения полного цикла: фронтенд, бэкенд, администрирование, настройка и деплой.

🌐 Работа в международной компании Когда я во второй раз выходил на рынок труда, у меня уже было около 9 месяцев опыта. Я помню, как обновлял резюме и буквально в первые же дни получил множество приглашений на собеседования. Поиск работы тогда занял всего несколько недель. После собеседований у меня было несколько предложений, но я выбрал вариант с возможностью удалённой работы и, что важнее, действительно интересным проектом. Так я оказался в компании LS.Graphics (https://www.ls.graphics/) на позиции Junior+ с зарплатой 60 тысяч рублей. Для 2022 года, особенно после моей первой работы в аутсорсе (где я получал 25 тысяч), это было круто. ❓ Почему LS.Graphics? Эта компания создаёт продукты для дизайнеров: графические элементы, мокапы, плагины и целые сервисы, которые помогают в работе. Но самое крутое — масштаб её влияния. Около 90% клиентов — это европейские и американские компании, включая таких гигантов, как Apple, Microsoft, Nike, IBM и Adobe. Если говорить о России, то среди пользователей продуктов LS.Graphics — Сбер, Яндекс, Авито, Т-Банк и другие крупные компании. А теперь самое интересное: если вы когда-либо видели мокап iPhone в рекламе или на сайте компаний — с вероятностью 80% он был сделан в LS.Graphics. Да, именно их мокапы Apple использует для презентации своих смартфонов. 🎮 Разработка топового Figma-плагина Мне посчастливилось работать над плагином для Figma, который входит в топ-6 самых популярных с 1,2 млн пользователей. Figma - основной инструмент 90% дизайнеров мира, и плагин неизменно входил во все авторитетные подборки "Топ-10 лучших плагинов Figma". Ежемесячно через наш плагин создавались десятки тысяч дизайн-проектов. Когда я присоединился к проекту, передо мной стояла амбициозная задача: - Провести полный рефакторинг кода - Внедрить TypeScript и новую архитектуру - Оптимизировать графический движок (Canvas + Three.js) Особую сложность представляла работа с графическим движком на базе Canvas (Fabric.js) и 3D-визуализацией (Three.js), которые были основной функциональностью плагина. За 6 месяцев не осталось ни одного файла, который я бы не изменил. Плагин действительно стал работать быстрее, количество багов уменьшилось, а кодовая база сократилась на 70%. Вообще, плагин я рефакторил в 3 этапа за 2 года. Каждый раз находилось что-то, что можно было улучшить, потому что я развивался. 🔼 Развитие плагина и новые вызовы Со временем плагин претерпел ещё более масштабные изменения — мы полностью переработали редактор, добавили новые функции и серьёзно улучшили производительность. Мне удалось глубоко погрузиться в работу с Canvas и Three.js, решая нестандартные задачи. Одной из ключевых проблем была производительность при работе с большими документами. Я провёл серию оптимизаций: - Устранил подвисания — переработал алгоритмы обхода дерева элементов, что особенно критично для сложных проектов. - Ускорил поиск нод — внедрил кеширование, что сократило время обработки запросов. - Оптимизировал вставку дизайна — раньше на это уходило 3-4 секунды, после доработок время сократилось до 1 секунды. ⚙️ Разработка модуля командной подписки Помимо работы над самим плагином, я занимался разработкой системы подписки для команд: - Спроектировал архитектуру — продумал сущности в БД, API и бизнес-логику. - Реализовал бекенд и фронтенд — от обработки платежей до интерфейса управления подписками. - Интегрировал платёжную систему — обеспечил безопасное проведение транзакций и автоматическое продление подписок. Это был полноценный цикл разработки — от идеи и проектирования до релиза и поддержки. Особенно приятно было, когда этой функцией начали активно пользоваться. В итоге за 7 месяцев купили более 100 командных подписок, а общее количество пользователей в командах достигло около 700. Со временем эта функция стала приносить ещё больше дохода, и всё больше компаний переходили на такой тип подписки. 📌 На картинках — рейтинг плагинов в Figma, а также сам плагин. В следующих постах я расскажу вам о других проектах, над которыми работал. Будет интересно!

⚙️ Мой первый серьезный проект: как я, джун, работал за мидла в британском финтехе После четырех месяцев испытательного срока меня наконец отправили на первый настоящий проект — в британскую финтех-компанию Trastra (https://trastra.com). Это был совершенно новый уровень. Мне предстояло разрабатывать основное веб-приложение компании и писать код для мобильного приложения на React Native. При этом я никогда раньше не работал с React Native! По легенде я был мидлом с 4-летним опытом разработки на React + React Native. Да-да, именно в своей первой компании я впервые столкнулся с накруткой опыта. Меня, джуна без коммерческого опыта, компания продала клиенту как мидла с 4 годами опыта! Клиент платил за меня 3500€ в месяц. Я получал... всего 25 000 рублей 🕯 Первое знакомство с "взрослым" Scrum Trastra была крупной платформой с большой кодовой базой. Впервые в жизни я увидел, как работает настоящая agile-команда: - 18 специалистов разного профиля - Полный набор ролей: скрам-мастер, тимлид, 3 фронтендера, 6 бекендеров, 3 QA, 2 аналитика, дизайнер - Все ритуалы: ежедневные стендапы, планирование спринтов, ретроспективы 🗓 Первые недели адаптации Первое время было страшно и сложно. Я терялся в таком большом проекте. Но мне помогал мой тимлид из аутстаф-компании: - Каждый мой коммит и пул-реквест сначала проходил через него - Он правил мой код: "Смотри, мидл бы здесь сделал иначе..." Тимлид со стороны Trastra искренне считал, что имеет дело с опытным разработчиком Уже через месяц работы: - 90% задач закрывал самостоятельно - Научился работать напрямую с командой заказчика - Мои задачи попадали в продакшен — я гордился этим! 💡 Переломный момент Но когда после нескольких месяцев успешной работы я попросил повышение до 40 тысяч, мне отказали. Этот момент перевернул мое сознание. Я вдруг осознал несправедливость ситуации: вокруг сидели такие же ребята, которые уже 1-2 года работали за 60-100 тысяч, выполняя задачи мидлов и даже сеньоров, но боялись уйти. В тот же день я обновил резюме. Оказалось, мой реальный опыт уже стоил гораздо больше... 📌 На видео мой первый проект. Радуюсь, что сделал валидацию. Кстати, на сайте Trastra показан интерфейс приложения, а на нём то, что я делал. Как раз таки я разрабатывал функциональность SEPA-переводов, историю переводов, создание платежа с вводом реквизитов. Это всё делал я! Ну и ещё коллаж из фото, рабочий вайб. Как же я был счастлив тогда. "Мама, я — айтишник!" Кстати, только сейчас заметил, что мокап (это картинка айфона) — это продукт моей будущей компании. Ничего себе отсылка! 🤯😁

🔍 Как я искал первую работу в 2021 году Если сравнить рынок труда тогда и сейчас — это небо и земля. - В 2021 году по всей России было 8000+ вакансий (и много предложений для джунов). - Сейчас их в 3,5 раза меньше — всего около 2300. Я вышел на рынок с сырым резюме, но меня завалили тестовыми и звали на скрининги. Результат? 2 недели поиска — и я уже в офисе, слушаю наставления тимлида. Но обо всём по порядку. 🤡 "А вдруг я не джун?" — синдром самозванца и страх выхода Я выучил весь необходимый стек (и даже больше). В то время можно было устроиться, зная только React, а я разобрался во всей экосистеме. Но вместо поиска работы я: - Долго готовился (учил лишнее, делал пет-проекты, решал задачи). - Боялся откликаться — синдром самозванца сжирал изнутри. (Сейчас новички с накрученным опытом выходят мидлами… а я тогда боялся на джуна откикнутся!) Однажды я 3 часа сидел с открытым HeadHunter, курсор над кнопкой "Опубликовать резюме"… но так и не решался нажать. 😄 В итоге пересилил себя — и поиск начался. 📊 Как прошли мои 2 недели поиска За две недели поисков я успел: Сделать 2 тестовых, Пообщаться с 2-3 эйчарами, Пройти 2 техсобеса. И в итоге — получил оффер! Как я и говорил, я реально хорошо подготовился, тянул с выходом на рынок. На собесах я отвечал на все вопросы, причем развернуто и подробно рассказывал про свои пет-проекты, во всех деталях. 🥇 И вот я устроился в аутсорс/аутстаф компанию на стажера. Как же я был счастлив тогда! Хотя условия были, мягко говоря, не сахар: - Первый месяц — вообще без оплаты (чисто за опыт) - Потом три месяца испытательного срока с зарплатой 10/15/25 тысяч — это же копейки! - Работа в офисе, куда каждый день приходилось тратить по 2 часа на дорогу (час туда, час обратно) Но мне было всё равно — я же наконец-то работал разработчиком! За 3-4 месяца я успел: - Поработать над внутренними проектами — делал сервис отчётов для команд и CRM для управления персоналом - Мой ментор-тимлид, увидев, что я быстро схватываю, начал подкидывать мне бекенд-задачи - Так, параллельно с основной работой, я за эти месяцы ещё и неплохо освоил бекенд с базами данных (Этот момент был особенно важен — я чувствовал, как расту профессионально, и был готов горы свернуть!) 🌧 Но был один кошмар — Git и работа в команде. Помню, как меня чуть не уволили в первый же месяц. Проблема была в том, что я не понимал, что от меня хочет Тимлид. Я жестко путался с ветками и делал полнейший бред. Тимлид подумал, что я его не слушаю, хотя я просто не понимал его. Вместо того чтобы переспросить или сказать "Помогите!", молча делал какую-то фигню Меня вызвали в кабинет и вынесли ультиматум: "Даём тебе неделю. Если не изменишься — прощаемся." Это был удар ниже пояса. Но именно он заставил меня взбодриться и в итоге — выжить на первой работе. 📹 КСТАТИ, Я СНЯЛ ОБ ЭТОМ ВИДЕО НА ЮТУБ — КАК МЕНЯ ЧУТЬ НЕ УВОЛИЛИ И КАК ЭТОГО ИЗБЕЖАТЬ НОВИЧКАМ! 📌 На картинке мое общение с HR 4 года назад. Мне отправили тестового задания (оно до сих пор доступно) https://gist.github.com/vmosyaykin/cd3ef13106c4ac16f8e47a13114f39fd Про мой первый проект в этой компании я расскажу в следующем посте

💻 Как я изучал программирование Мой путь в IT начался с Python. Я прошел бесплатный курс от Яндекс.Практикума, где в игровой форме изучал синтаксис: писал условия, циклы, функции, будто бы программируя голосового помощника. Но мне было непонятно, чем на самом деле занимаются разработчики. Неужели их работа сводится только к решению задач из учебников? Я продолжал учиться: смотрел лекции Тимофея Хирьянова, конспектировал, но через три месяца осознал, что топчусь на месте. Не понимал, зачем мне эти знания и куда двигаться дальше. После небольшого перерыва я наткнулся на курс CS50 и впервые узнал о разделении на фронтенд и бэкенд. Это помогло мне определиться: я выбрал фронтенд. 👩‍💻 Фронтенд: первые шаги в верстке Сначала я прошел два курса по верстке на Stepik, смотрел ролики на YouTube, но информация казалась хаотичной. Я пытался запоминать теги без практики, и прогресс шел медленно. Переломным моментом стала HTML Academy. Их тренажеры по верстке оказались идеальными для меня: я купил подписку и за три месяца глубоко изучил HTML и CSS. Однако я долго не решался перейти к реальным проектам — не мог себя заставить, было страшно. Я поставил себе дедлайн: за неделю посмотреть четыре видео с версткой макетов, а затем начать самому. И я сделал это. Наконец-то сел верстать. Оказалось, все было намного проще, чем я думал. 100% нужно было сделать это раньше. 🖥 JavaScript: борьба и прорыв С JavaScript было сложнее. Даже после курсов на Stepik, HTML Academy и чтения Learn JS я не понимал логику языка. Алгоритмы, DOM-взаимодействия, циклы — все давалось с трудом. Особенно запомнился один вечер. Я снова пытался написать код для модального окна - всего 4 строчки, блин! Я же делал это уже раз пять по видео, но стоило попробовать самому - и ничего. Пустота. Тогда я закрыл ноутбук и просто лег. В голове крутилось: "Ну как так? Я же уже столько времени потратил...". Вспомнил про "Красную таблетку", и подумал: "Ладно, я пока просто не дорос. Даю себе неделю. Я обязательно пойму это."

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

После этого все пошло по-другому. Я будто получил второе дыхание. Я больше не просто повторял за кем-то — я создавал. Пусть криво, пусть с костылями, но это были мои решения. И каждый такой проект давал новую уверенность: "Я могу". Мои первые проекты (Делал сам): Курс акций | Киноафиша | Погода | ToDo Помню, как приходил после работы в семь вечера — голодный, замёрзший — и садился делать проект до полуночи. Вот насколько сильной была мотивация. Я показывал свои проекты друзьям, родным. Очень гордился ими. 👩‍💻 Освоение React Изучение React далось мне легче, чем JavaScript. Я прошел полный курс "React-Самурай" от Димыча — все 100 уроков — и сразу после этого сделал свое первое приложение полностью самостоятельно: сам нашел API, выбрал макет, реализовал функционал без подсказок. Дальше я углубился в изучение экосистемы: Redux, React Router и TypeScript. На это ушел еще 1 месяц. Всего на изучение фронтенда я потратил 7–8 месяцев. Единственное, что я не изучил для работы - Git, это сыграло со мной злую шутку, но об этом в следующем посте. Советую всем сразу загружать проекты в GitHub, а не как я - только для портфолио после выхода на рынок. 📹 МОЕ ПЕРВОЕ ВИДЕО, В КОТОРОМ Я РАССКАЗЫВАЮ ПРО СВОЙ ПУТЬ 📌 На видео презентую другу свой сайт. А на скриншоте прошу друга-разраба провести код ревью

👷‍♂️ Мой путь в IT. От монтажника до Frontend Разработчика Привет! Меня зовут Руслан. Я — фронтенд-разработчик, ментор и просто человек, который верит, что упорство меняет жизнь. У меня есть любящая семья: жена и маленькая дочка, которой недавно исполнился годик. Мы живём в Краснодаре, но моя история началась далеко отсюда… 👶 Кем я был раньше Я родился в Сибири, а в 16 лет переехал в Краснодар. Здесь я окончил школу и университет — по специальности агрономия и защита растений. Да, я не технарь по образованию, и моя дорога в IT была непростой. До программирования я работал монтажником окон — таскал тяжелые рамы, лазил по высоткам, дышал пылью на стройках. В 2019 году я уехал на север, чтобы заработать денег, работая на стройке. Тогда моя жизнь была тяжёлой: - Работа — физический труд, иногда по 12 часов. - Быт — холодные общежития, еда на скорую руку. - Ощущение — «Это не та жизнь, которую я хочу». Пока мои друзья в Краснодаре ездили на море, путешествовали в горы, праздновали дни рождения, я работал. И именно тогда я понял: пора что-то менять. 🤬 Переломный момент Тот период на севере стал для меня решающим. Я устал от физического труда, который не приносил развития и забирает у меня доровье Тогда у меня была затяжная депрессия — около двух лет. Меня не устраивала моя жизнь, но я не знал, чем заняться. Передо мной было два варианта: - Смириться, перестать мечтать о большем — и тогда неудовлетворённость жизнью пройдёт; - Менять жизнь, делать что-то, чтобы улучшить своё положение. Я выбрал второй вариант. 😎 Как я начал меняться Первым делом я бросил курить и пить (тогда я пил почти каждый день, а без сигарет не представлял жизни — курил каждые 30 минут, вероятно, из-за депрессии); Снова начал заниматься спортом - купил абонемент в тренажёрный зал. Каждый день совершал длительные прогулки в одиночестве, размышляя о жизни Начал читать книги. Самые важные для меня: - «Красная таблетка» Андрея Курпатова (кстати, она помогла мне и с JS — я внушал себе, что смогу его освоить, и в итоге так и произошло); - «Квантовый воин» Джона Кехо — книга о психологии, самовнушении и вере в себя. Я всегда хотел создавать что-то новое. IT привлекало возможностями. Когда я видел разработчиков с их макбуками и кофе, то понимал - хочу так же. А потом смотрел на свои рабочие руки в пыли и бетоне... Это мотивировало меня двигаться вперед. Ну и, конечно же, я начал изучать программирование. Но об этом — в следующем посте. 📌 На картинках я на работе, устанавливаю балконные рамы. А также на подработке, загружаю арбузы в газели. Также фото с трамвая, я начал читать книгу "Квантовый воин".

Я запускаю цикл из 6+ постов для знакомства. В них я расскажу: - Как учился, - Как искал работу, - Как работал в британской компании, - Как работал в международной компании, продуктами и сервисами которой пользуются Apple, IBM, Microsoft, Nike и другие крупные корпорации. - Также поделюсь историями о своих сложных проектах и расскажу, чем занимаюсь сейчас. Надеюсь, вам будет интересно! Я писал эти посты две недели: искал архивные фото (ещё с 2020 года), материалы о проектах, над которыми работал, и другие детали.😁

🤯 Подборка сложных вопросов с собеседований 1. Какая разница в tree-shaking у CJS и ESM? ESM (ECMAScript Modules): - Статический анализ на этапе сборки → можно точно определить неиспользуемый код. - Импорты (import/export) фиксированы, что позволяет оптимизировать бандл. CJS (CommonJS): - Динамические require() → сборщик не может заранее знать, какие части модуля будут использоваться. - Загружает модуль целиком, что мешает tree-shaking. 2. Какую часть спецификации ES нельзя реализовать через полифиллы и транспиляцию? Proxy – требует нативной поддержки браузера, так как работает на низком уровне (перехват операций с объектами). Vue 2 для старых браузеров использовал Object.defineProperty вместо Proxy. 3. Для чего используется <picture>, кроме выбора формата изображения? Адаптивные изображения: - Разные версии картинки под разные размеры экрана (media-атрибуты). - Оптимизация под ретину (srcset). - Fallback для старых браузеров (<img> внутри). - Разгрузка мобильных сетей (легкие версии). 4. Зачем нужен тег <base>? Задает базовый URL для всех относительных ссылок на странице.

<base href="https://example.com/assets/">
<img src="logo.png"> <!-- Загрузится https://example.com/assets/logo.png -->

5. Как в runtime проверить поддержку CSS-свойства? ``` if (CSS.supports('display', 'grid')) { console.log('Grid поддерживается!'); } ``` Альтернатива: @supports в CSS. 6. Как называется реактивность в React? Не настоящая реактивность (как в Svelte/Solid/Vue). React использует "pull-based" модель (перерисовка по изменению состояния). Гранулярная реактивность (сигналы, Proxy) – когда обновляются только зависимые части. 7. Как определить системную тему (dark/light)? В JS:

const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;  

// Следить за изменением темы  
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {  
  console.log(e.matches ? 'Тёмная тема' : 'Светлая тема');  
});  

В CSS:

@media (prefers-color-scheme: dark) {  
  body { background: #000; color: #fff; }  
}  

8. Что такое CSS Container Query? Аналог @media, но зависящий от размера контейнера, а не viewport. Позволяет адаптировать стили для компонентов (например, карточка меняет layout в узком контейнере).

.container { container-type: inline-size; }  

@container (max-width: 500px) {  
  .card { flex-direction: column; }  
}  

9. Что будет с padding: 1,5px? Непредсказуемо! Это синтаксическая ошибка (запятая вместо точки), но браузер попытается "починить". Может интерпретироваться как 1px, 15px или проигнорироваться. Вывод: так писать нельзя, только padding: 1.5px. 10. Как из массива [1, 2, 3] получить тип 1 | 2 | 3? ``` const arr = [1, 2, 3] as const; // Делаем кортеж type T = typeof arr[number]; // 1 | 2 | 3 Без as const тип будет number[]. ``` 11. Разница между import { ReactNode } и import { type ReactNode }? Обычный импорт:

import { ReactNode } from 'react';  // Может попасть в бандл.  

Импорт типа (TypeScript 4.5+):

import { type ReactNode } from 'react';  // Удаляется при компиляции.  

Полезно для оптимизации бандла (импорты только для типов не включаются в JS-код). #собеседования #react #javascript #typescript

[Версия 1.0.14] - Обновление платформы 🔥 Главное нововведение – публичные коллекции вопросов! Теперь вы можете свободно изучать подборки вопросов по разным компаниям и темам без регистрации. А чтобы начать тренировки, достаточно быстро зарегистрироваться. Готовьтесь к собеседованиям эффективнее! Каждую неделю мы добавляем новые коллекции вопросов. Исправлено: - Мелкие баги Добавлено: - Публичные Коллекции вопросов. Это подборки вопросов по определенным темам, или компаниям. Теперь можно готовиться к собеседованиям в нужную вам компанию - Новый лендинг – стал удобнее, информативнее и современнее Спасибо, что остаетесь с нами — мы продолжаем прокачивать продукт 💪 Пробуйте, тестируйте, делитесь обратной связью! 👍 Обучайтесь, общайтесь, растите вместе с https://yeahub.ru #release #news #update #yeahub

Странно, что это видео набирает так мало просмотров. Подходы, которые в нём разбираются, действительно помогают моим ученикам трудоустраиваться. При этом там не просто шаблонные советы вроде «Так не говори, а так говори». Мы детально разбираем каждый вопрос, объясняем, как к нему подготовиться. Лучшего гайда по усилению опыта для фронтенд-разработчика просто не найти. Советую всё-таки посмотреть — решил выпустить годный контент для ребят, потому что знаю ситуацию на рынке: компании сейчас очень избирательны и выбирают кандидатов именно по опыту. 00:00 - Разбор ключевых вопросов с собеседований и примеры ответов. 00:58 - Как презентовать свой опыт, особенно из стартапов и маленьких компаний. 01:45 - Важность командных процессов (канбан, ретро) и проверка знаний на собеседовании. 02:41 - Как добавить в резюме технологии, даже если не использовал их в проекте. 04:49 - Почему важно разбираться в инфраструктуре и как изучить базовые практики. 08:21 - Настройка CI/CD 09:51 - Пример слабого ответа. Почему ответ "тимлид делал, я не вникал" — провал. 10:51 - Пример сильного ответа. Как описать CI/CD, Docker, Git Flow и решение проблем с кэшированием. 14:19 - Ergostol 15:39 - Вопрос о сложной задаче. Три метода усилить простую задачу (масштаб, заимствование, гибрид). 19:43 - Плохой ответ о сложной задаче. Почему модальное окно — слабый пример. 20:56 - Идеальный ответ о сложной задаче. Пример: разработка конструктора отчетов с оптимизацией и интеграцией. 23:39 - Профессиональные фишки. Как упоминание метрик и бизнес-ценности усиливает ответ. 24:19 - Работа в команде. Зачем знать методологии (Scrum, Kanban) и инструменты (Jira, Figma). 28:59 - Плохой ответ о процессах. Хаотичная работа без документации — красный флаг. 30:16 - Хороший ответ о процессах. Пример работы по Scrum с Jira и Confluence. 32:46 - Взаимодействие с командой. Как общаться с тестировщиками, дизайнерами и бэкендерами. 37:03 - Пример хорошего взаимодействия. Совместные сессии, чек-листы и решение багов. 41:45 - Структура задач и баги. Как описывать баги и пользовательские сценарии в Jira. 43:56 - Важность командного подхода. Почему бизнес оценивает кандидатов по проектам, а не личным навыкам. 44:54 - Масштабирование проектов. Как превратить интернет-магазин в "экосистему для 50+ точек". 50:30 - Полноценный стек технологий. Зачем добавлять в описание TypeScript и state-менеджеры, даже если не использовал. 54:44 - Плохой ответ о проекте. Почему "магазин мебели на React" — слабая история. 55:51 - Идеальный ответ о проекте. Пример: платформа для цифровизации ритейла с AI и микрофронтендами. 59:33 - Развитие специалистов. Как прокачивать навыки вне работы и расти в карьере. https://youtu.be/WemHjWFjh3o?si=sXpG5h8HSqn2hZ9w

🔼 Как УСИЛИТЬ слабый опыт | Проекты, Процессы, Задачи и Достижения В этом видео разберем: Как превратить даже скромный опыт в мощный кейс, который впечатлит работодателя. Вы узнаете, как правильно отвечать на 5 ключевых вопросов о ваших проектах, процессах и задачах — так, чтобы получить оффер, а не отказ. Что вас ждет: ✔ Как презентовать любой проект — даже если это был «просто интернет-магазин» ✔ Какие процессы важно упомянуть (SCRUM, CI/CD, тестирование), даже если их не было ✔ Как описывать задачи, чтобы звучало как senior-уровень ✔ Что говорить про инфраструктуру и деплой, если делал всё на коленке ✔ Фразы-убийцы, которые заставят HR поверить в ваш опыт Кому будет полезно: ▪ Джунам и миддлам, которые хотят прыгнуть выше текущего уровня ▪ Фрилансерам, чей опыт не берут в расчет ▪ Тем, кто долго ищет работу из-за «недостаточно сильного» бэкграунда Это первое мое полноценное видео про трудоустройство. Советую посмотреть Видео уже на канале! Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение. #собеседования #резюме

👩‍💻 SOON: ВЕСЬ React.js в одном собеседовании. 200 вопросов + 70 задач за 2 часа

JavaScript: Основы и теория 00:00:00 – Введение: теория и практика JavaScript. 00:00:49 – Способы создания переменных: let, var, const. 00:02:13 – Hoisting (поднятие) и типы данных. 00:03:20 – Примитивные типы данных и NaN. 00:05:40 – Подготовка к собеседованиям с платформой ehab. Операторы и преобразование типов 00:07:33 – Унарные и бинарные операторы. 00:09:50 – Тернарные операторы и преобразование типов. 00:11:57 – Операторы сравнения и строгое равенство (===). 00:13:43 – Оператор switch как альтернатива if-else. Функции и замыкания 00:23:06 – Типы функций в JavaScript. 00:26:58 – Стрелочные функции vs обычные функции. 00:27:58 – Замыкания и их применение. Работа с числами и строками 00:30:11 – Округление чисел (round, floor, ceil). 00:32:57 – Методы строк (toLowerCase, slice, substring). 00:34:32 – Проверка подстроки (includes, регулярные выражения). Массивы и объекты 00:44:46 – Объекты: хранение и ссылки. 00:46:36 – Клонирование объектов (поверхностное и глубокое). 00:55:05 – Методы массивов (push, pop, map, filter). Асинхронность и промисы 01:45:12 – Промисы и их состояния (pending, resolved, rejected). 01:48:02 – Методы промисов (all, race, resolve). 01:50:51 – Работа с fetch и запросами. ООП и прототипы 01:59:20 – Классы и наследование. 02:00:44 – Ключевое слово super и защищенные свойства. 02:02:00 – Создание функции-конструктора Animal. DOM и события 02:04:24 – Поиск элементов в DOM. 02:07:59 – Фазы событий (захват, цель, всплытие). 02:09:17 – Пользовательские события. Хранилища и прокси 02:10:28 – localStorage, sessionStorage, cookies. 02:13:03 – MutationObserver для отслеживания изменений DOM. https://youtu.be/A2P3Gn2_gSY?si=iednvaJ0O502SI-H

Мурыч написал под последним видео на YouTube. Кому интересно — зайдите в комментарии, он привёл 3 ответа по спецификации JS

🖥 ВЕСЬ JavaScript в одном собеседовании. 200 вопросов + 70 задач за 2 часа Это видео представляет собой структурированный разбор ключевых тем JavaScript, необходимых для успешного прохождения технического собеседования. Формат сочетает теоретические вопросы с практическим решением задач. Тут собраны все темы по JavaScript: - Основы языка: переменные, типы данных, операторы - Функции: объявление, hoisting, замыкания - Работа с объектами и массивами - Контекст выполнения и this - Асинхронность: колбэки, промисы, async/await - ООП в JavaScript - Современные возможности ES6+ - Классы и прототипы - Работа с DOM и событиями Практическая часть включает разбор 70 задач разного уровня сложности, включая: - Алгоритмические задачи - Задачи на понимание работы JS - Реальные кейсы из собеседований Включай это видео в поездке на работу, учебу, во время утренней пробежки, или занятия спортом.

ПС: Очень грамотные ответы на вопросы и поставленная речь. Глубокие и полные ответы Дениса, отличные рассуждения. Советую посмотреть видео и учиться отвечать так же

Видео уже на канале! Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение. #javascript #собеседование

🔒 Архив записей менторской программы Все групповые занятия, лекции и сессии лайвкодинга доступны в нашем закрытом чате-архиве. Здесь собрано 120+ записей, за исключением: - Персональных мок-собеседований - Индивидуальных разборов опыта ("прожарок") - Реальных собеседований учеников ❗️ Эти материалы доступны только в чате с учениками так, как носят личный характер. В закрытом чате-архиве много записей групповых занятий. Можно готовиться к лайвкодингу, к собеседованиям и изучать сложные темы. Преимущества архивного чата: - Доступ по подписке (500 руб./месяц) - Возможность оценить качество и формат занятий - Полезно для тех, кто рассматривает менторство Примеры доступных материалов: - Лекция по FSD на менторстве - Групповой лайвкодинг по JavaScript - Групповой лайвкодинг (Новички) - Гайд: 80% всего Git & GitHub для работы. - Гайд по процессам. Отвечаю на вопросы про опыт, по YeaHub - Лайвкодинг методы массивов - Лекция по основам JavaScript - Митап по теме This - Групповое собеседование ✔️ Хотите понять, подходит ли вам наш формат? Получите бесплатный доступ к закрытому чату на 3 дня 🌐 ПОЛУЧИТЬ ДОСТУП

👩‍💻 Разработка UI Kit: создание компонента Button UI Kit представляет собой систематизированную коллекцию интерфейсных компонентов, которая служит фундаментом для разработки приложений. В современных проектах наличие продуманного UI Kit перешло из категории рекомендаций в обязательное требование по нескольким ключевым причинам. 1️⃣ Во-первых, UI Kit обеспечивает визуальную и функциональную согласованность интерфейса. Когда десятки или сотни экранов используют одни и те же компоненты 2️⃣ Во-вторых, разработка ускоряется в разы — вместо создания элементов с нуля, команда использует готовые решения. 3️⃣ В-третьих, значительно упрощается поддержка и масштабирование: изменения в дизайн-системе вносятся в одном месте, а применяются во всём проекте. [Картинка 1: Пример Storybook] UI Kit — это не просто коллекция кнопок и полей ввода. Это комплексная система, включающая: - Базовые компоненты интерфейса (кнопки, формы, переключатели) - Типографику и иерархию текста - Цветовую палитру с семантическим значением цветов - Систему отступов и размеров - Состояния элементов (активное, неактивное, hover, focus) [Картинка 2 и 3: Дизайн в Figma] 🛡 Основные принципы разработки компонентов UI Kit При создании компонентов для UI Kit необходимо придерживаться нескольких фундаментальных принципов 1. Семантическая корректность Каждый компонент должен максимально точно отражать свою суть на уровне HTML-разметки. Кнопка — это <button> или <input type="button">, ссылка — <a>, поле ввода — <input> или <textarea>. Это важно не только для доступности (accessibility), но и для правильной работы в различных контекстах (например, в формах или при навигации). 2. Полнота свойств Компонент должен поддерживать все стандартные HTML-атрибуты соответствующего элемента. Для кнопки это включает type (button, submit, reset), disabled, autofocus и другие. 3. Управляемость извне Компонент не должен содержать внутреннюю логику состояния (где это возможно). Все состояния (активное, неактивное, загружающееся) должны управляться через пропсы. Это делает компонент предсказуемым и легко интегрируемым в любую архитектуру. 4. Принцип открытости/закрытости Компонент должен быть закрыт для модификаций (его базовое поведение нельзя изменить), но открыт для расширения. На практике это означает: - Возможность добавления классов через className - Возможность передачи произвольных атрибутов - Гибкость в контенте через children 5. Единый источник правды Изменение компонента в UI Kit должно автоматически отражаться во всех местах его использования. Это требует тщательного проектирования API компонента на этапе создания, чтобы избежать необходимости "ветвления" логики в будущем. 🔒 Архитектура UI Kit в проекте Оптимальная структура для UI Kit в проекте выглядит следующим образом:

src/
  ui/
    Button/
      Button.tsx            # React-компонент
      Button.stories.tsx    # Документация в Storybook
      Button.test.tsx       # Тесты компонента
      Button.module.css     # Стили компонента
    Input/                 # Аналогичная структура для других компонентов
    ...
  styles/
    variables.css          # CSS-переменные (цвета, отступы, шрифты)
    typography.css         # Типографика
    animations.css         # Анимации
    global.css             # Глобальные стили

🖥 Реализация компонента Button для UI Kit Перед разработкой тщательно изучаем макеты и выделяем все варианты кнопок: Варианты по стилю, Размеры, Состояния, Дополнительные требования (иконки, текст). [Картинка 4: Компонент Button] При стилизации используем CSS-переменные из дизайн-системы, Для каждого варианта прописываем цвета для всех состояний. [Картинка 5: CSS-переменные] Создаем подробные TypeScript-интерфейсы: Объединение с нативными атрибутами button и a, Поддержка всех стандартных HTML-атрибутов, Четкое разделение кастомных и стандартных пропсов [Картинка 6: Типизация кнопки] Далее создаем сторисы для всех вариантов: Основной вид, Все состояния, Примеры с иконками, Вариант как ссылки #ui #storybook #button #react

💭 Кто такой мидл во фронтенде? Наверное, каждый из нас слышал, что первые 2-3 месяца на реальной работе бустят новичка на 300-400%. То есть, со временем эффективность обучения снижается. Условно: если учишься 6 месяцев и 1 год, по логике год обучения должен делать тебя в 2 раза круче. Но не всё так однозначно. Тут вступает принцип Парето — 20% усилий дают 80% результата. Первые полгода ты поглощаешь знания, как голодный, а дальше — упорство уже не даёт такого же мощного прироста. Можно, конечно, выжимать соки из каждого месяца: строить чёткий план, качать насмотренность, разбирать архитектуру, пилить проекты. Но без реальной работы прогресс будет медленнее. Зато как только попадаешь в продакшн — бац! — и тебя накрывает жесткий буст. Ты начинаешь по-новому смотреть на код, у тебя формируется логика работы. Это неизбежный этап — он был у меня, будет и у тебя. 👩‍💻 Как учиться после освоения стека? Когда база (HTML, CSS, JS, фреймворк) уже есть, важно не застрять в вечном ученичестве. Вот что реально прокачает тебя дальше: 1. Жёсткая практика Повторяешь за авторами — берёшь проекты с YouTube, но не просто копируешь, а вдумчиво смотришь: как человек дробит компоненты, как выстраивает логику, как думает. Делаешь своё — без копирования, с нуля: дизайн, API, свои фичи. Чередуешь: один проект по видео → один свой. Большой пет-проджект — как только чувствуешь, что можешь писать код без постоянных гуглений, запускаешь монстра: куча страниц, запросов, сложные состояния. 2. Архитектура и продакшн-сетап Когда компоненты даются легко, пора качать уровень проекта: - Сборка (Webpack/Vite) — настроить самому, а не на create-react-app. - UI Kit — завести Storybook, сделать переиспользуемые компоненты. - Деплой и CI/CD — выложить на Vercel/Netlify, или настроить VPS, настроить автотесты. - Тесты — хотя бы пару, чтобы понимать, как они работают.

На собесах спрашивают: "Был ли у вас UI Kit?" "Как настраивали деплой?" "Писали ли тесты?"

Мидл должен шарить за проект, на котором работал. 3. Конференции и реальные кейсы Чтобы не быть "зелёным", надо расширять кругозор: - Смотришь доклады из Яндекса, Тинькоффа, Ozon — как они решают реальные проблемы. - Узнаёшь, как мигрируют между фреймворками, как оптимизируют загрузку, как выстраивают процессы. Даже 2-3 конференции дадут темы для собеса и покажут, что ты в теме. Сколько времени займёт? - Базовый стек — ~5 месяцев. - 3-4 проекта по видео и своих — 1 месяц. - Сборка, Storybook, CI/CD — 2-3 недели. - Свой большой проект — 1 месяц. - Конференции — 1 неделя. Итог: ты будешь ориентироваться в рабочем проекте, сможешь писать код уверенно и не потеряешься в продакшне. ❗️ Главное — не засиживаться Можно стать сильнее мидла с 4 годами опыта, если он все эти годы просто штамповал код и не развивался. Учись осознанно, качай продакшн-скиллы, смотри в сторону реальных задач — и тогда буст не заставит себя ждать.

🎂 Мой год перемен В 27 лет я был в найме, только пробовал себя в менторстве, YeaHub существовал на уровне "в свободное время что-то пилим, одну страницу делаем месяц". На YouTube было 4000 подписчиков, в Telegram — 3000. Только родилась дочь, работы — море, пахал 24/7 без выходных. Год спустя, в 28, всё иначе. Я ушел из найма и полностью погрузился в свой проект. Сейчас в нём — 2000 зарегистрированных пользователей, 40 000 посещений за 5 месяцев, ежедневно платформу посещают 500–800 человек. Сеть каналов YeaHub выросла до 6000+ подписчиков. YouTube приближается к 10 000, Telegram — 5200. За год для учеников я создал полноценный курс-роадмап: от основ HTML/CSS до продвинутых тем вроде Docker и CI/CD. Записал 150+ уроков, собрал базу гайдов и материалов. В мае выйдет бесплатный курс по JS DOM API на YouTube – я продолжаю делиться знаниями бесплатно. Но главное — люди. За этот год я обучил (и продолжаю обучать) больше 150 человек. Сообщество учеников и выпускников — уже 130+ человек. Помог трудоустроиться более 30 ребятам. Познакомился с крутыми ребятами — блогерами, менторами, экспертами. Вступил в сильные IT-сообщества. Прочувствовал мощь нетворкинга и силу окружения. Стал лучше, пересмотрел взгляды, прокачал мышление. А ещё — это самый тёплый день рождения в моей жизни. Утро началось с 40+ поздравлений от учеников. Жена с дочкой встретили меня с тортиком — не сдержался, прослезился 🥹. Писали коллеги, друзья, знакомые — столько тёплых слов, благодарностей и пожеланий. Когда тебя так искренне поздравляют, когда благодарят за помощь, вдохновение и поддержку — понимаешь: я на правильном пути. Я бесконечно благодарен миру за эти возможности, людям — за доверие и помощь, IT — за крутое комьюнити и бесконечный рост. И знаю: впереди — ещё больше свершений. 💪

👩‍💻 Проектирование таблицы в React: SOLID, IoC и Render Props В админке типового приложения таблицы встречаются на каждом шагу: пользователи, товары, заказы, подписки. Дизайн у них обычно единообразный — различаются только данные, заголовки и возможные действия в ячейках. Проблема: Если делать отдельный компонент под каждую сущность (UsersTable, ProductsTable), получим дублирование кода. Если запихать всю логику в один компонент — он превратится в монстра с кучей if-else. Решение: Делаем единную таблицу, но гибкую. Вместо хардкода данных и столбцов, выносим рендеринг наружу. Какие техники применяем? ✔️ Render Props – Передаём renderRow и renderHeader как пропсы. Внутри Table только разметка, логика рендеринга — снаружи. ✔️ Принцип открытости/закрытости – Если для товаров нужна иконка валюты, а для пользователей — аватарка, не лезем внутрь Table, а просто рисуем нужное в переданной функции. ✔️ Dependency Injection – Зависимости (рендер-функции) приходят через пропсы. Можно подставить любую логику без изменений самого компонента. ✔️ Инверсия управления (IoC) – Table не знает, что в нём будет. Управление содержимым — у родителя. ✔️ Паттерн "Стратегия" – renderRow и renderHeader — это стратегии отображения. Подменяем их под задачу. Итог: Одна таблица на все случаи, без дублирования, с возможностью кастомизации под любую сущность.

Если тема интересна, сделаю серию постов про другие типовые компоненты: модалки, фильтры, карточки. Как вам идея?

#react #solid #patterns