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

🔍 Как я искал первую работу в 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

Фронтенд в картинках — просто, наглядно и понятно. Новые знания в компактном формате каждый день. Присоединяйтесь: @FrontendPortal

🎤 Задание с лайвкодинга в Авито Проанализируйте код и определите, что будет выведено в консоли.

(function () {
    function modifyItemData(price, platform) {
        price.rub = 5000;
        platform = 'iOS';
        isModified = true;

        function printItemData() {
             console.log(price); // ?
             console.log(platform); // ?
             console.log(isModified); // ?
        }

        return printItemData;
    }

    let price = { rub: 3500 };
    let platform = 'Android';
    let isModified = false;

    const printItemData = modifyItemData(price, platform, isModified);

    console.log(price); // ?
    console.log(platform); // ?
    console.log(isModified); // ?

    price = { usd: 100 };
    platform = 'Web';
    isModified = null;

    printItemData();
})();

Вопросы:

1. Почему price изменяется, а platform — нет? 2. Как работает область видимости переменной `isModified`?

#собеседование #лайвкодинг

Приглашаем на Frontend Mix — бесплатный митап ЮMoney для всех, кто интересуется фронтенд-разработкой 🔥 🕓 24 апреля, в четверг, в 19:00 (мск) приходите на митап в Санкт-Петербурге или подключайтесь онлайн. Спикеры из ЮMoney и Сбера расскажут, как работают над задачами и улучшают процессы в команде. Темы докладов: 🟣 Рефакторинг за 10 секунд. Как с помощью консольной утилиты производить автоматизированный рефакторинг крупных приложений за считанные секунды. 🟣 Подходы и практики тестирования во фронтенде. Зачем нужно тестирование во фронтенде, какие стандарты и подходы существуют и как мы применяем их в своей работе. 🟣 Уязвимости фронтенда в финтехе. Топ-3 атаки, или как построить защиту по всем фронтам — от планирования до релиза. 🟣 Анимация до кончиков пальцев. Поговорим про анимацию в целом и на вебе. Рассмотрим все способы сделать анимацию. Узнаем про композитные слои и как их посмотреть в Dev Tools — на примере одинаковых анимаций, но с использованием разных подходов. Чтобы попасть на митап, нужна регистрация. Все подробности — на сайте Frontend Mix ❤️