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

👍 Дорогие коллеги, желаю всем отличных выходных! Предлагаю провести время с пользой и посмотреть видео по архитектуре фронтенд-приложений. Это поможет вам прокачать свои навыки и понять, в каком направлении двигаться дальше. В ходе просмотра мы с учениками разбираем проекты и готовимся к собеседованиям. Часто интервьюеры спрашивают о проектах, над которыми вы работали, о процессе деплоя, настройке сборки, а также о CI/CD. Эти знания необходимы для мидлов, и именно поэтому я выступал с этой темой на митапе и позже записал видео на YouTube.

Также в планах снять видео о процессах в компаниях. Это даст понимание, как создаются приложения и как происходит взаимодействие в команде. Я уже проводил митап на эту тему, и он получил положительный отклик. Планирую выпустить видео в YouTube.

Кроме того, я разрабатываю уникальный курс по React, который вы не найдете нигде. Мы охватим всю экосистему и продвинутые темы, научимся с нуля создавать приложения, настраивать их, тестировать, дебажить и деплоить. Все аспекты архитектуры фронтенда будут включены в курс.

Проект будет разрабатываться по GitFlow, основываясь на реальном макете и дизайн-системе, а также с использованием разработанного бэкенда с более чем 80 эндпоинтами. Это будет аналогично продвинутому курсу Ульби, но с менторской поддержкой и ежедневной обратной связью. Большая часть этого курса будет в открытом доступе в YouTube

YouTube канал:
https://youtube.com/@reactify-it

🗓 Длительность обучения

Долгое обучение имеет свои преимущества. Как правило, те, кто учился долго и с перерывами, успели встретить больше кейсов и изучить больше тем. Но есть нюанс — не все темы нужны на начальном этапе. Часто студенты тратят время на вещи, которые можно изучить позже, например, классы, каррирование, прототипы, ООП, анимации и тд. Это все хорошо, но лучше сфокусироваться сначала на необходимых навыках, а затем расширять кругозор.

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

✔️ Сначала лучше научиться писать код и создавать небольшие проекты, чтобы видеть результаты своей работы. Затем, по мере погружения, можно расширять свои знания. Такой подход делает обучение более интересным, так как вы будете понимать, зачем изучаете те или иные темы. После работы с DOM и fetch запросами вам станет любопытно узнать, что стоит "под капотом" у сетевых технологий и браузера, и тогда их изучение пройдет легче.

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

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

Важно определить цель обучения: учитесь ради процесса или для поиска работы. Ключевой навык — это адаптация и умение находить нужную информацию. Никто не знает весь JavaScript, и я не исключение. Но если появится задача реализовать видеочат, я смогу найти решение с помощью WebRTC. Не нужно изучать всё заранее, так как многие знания могут оказаться ненужными.

🌧 Был проведен эксперимент: взяли идеальное резюме олимпиадника с опытом стажировок в Яндексе и начали откликаться на вакансии. В итоге лишь 5% приглашений. Это показывает, что даже самый гениальный технический специалист не нужен, если у него нет практических навыков и опыта. Работодателям нужны не заучки, а специалисты, способные выполнять задачи

#frontend #work

⁉️ Как думаете нормальный сценарий?

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

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

С ментором я бы справился быстрее, где-то за 4-5 месяцев. И знания, думаю, были бы лучше. Есть ребята, которые вообще очень быстро всё схватывают. Я, к сожалению, не из таких 🥲

🆕 Что РЕАЛЬНО надо знать Frontend Разработчику для трудоустройства

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

Меня поражает, когда из 800 откликов на вакансию, более 600 — это резюме с минимальными навыками вроде HTML, CSS и базового JavaScript. Это не серьезный подход. Лучше потратить еще немного времени на изучение необходимых технологий и откликаться, когда вы действительно готовы. Идеально, если перед этим вы поработаете пару месяцев с полным стеком: React, Redux Toolkit, RTK Query, TypeScript. Напишите многостраничное приложение, выполняющее запросы к API.

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

Полезно также читать статьи, обсуждать технологии с коллегами и смотреть конференции. Это развивает вашу насмотренность, расширяет кругозор и помогает показать интерес к профессии на собеседованиях. Часто вижу, как кандидаты с минимальным опытом производят отличное впечатление благодаря глубоким знаниям и заинтересованности.

На освоение всего пути с нуля уходит от 5 до 8 месяцев, в зависимости от вашего свободного времени и скорости обучения. Вот примерный план:

1️⃣ месяц на верстку,
2️⃣ месяца на изучение JavaScript,
1️⃣ месяц на React,
Затем 2 месяца практики: работа с React, Redux, TypeScript и JavaScript. Пишем приложения, углубляемся в теорию, закрываем пробелы в знаниях и активно готовимся к собеседованиям.

Это рассчитано на среднего человека с нормальными навыками обучения и возможностью уделять 2-3 часа в день плюс немного больше в выходные. Без фанатизма, но с регулярностью. За 5-6 месяцев можно научиться разрабатывать полноценные приложения с полным стеком. Далее идет подготовка к собеседованиям (примерно 1 месяц) и 1-2 месяца поиска работы параллельно с продолжением практики.

Это реальный сценарий. Главное — иметь четкий план обучения, список заданий и тем, которые нужно освоить. Плюс, желательно, ментор или сообщество для вопросов и поддержки.

📌 Итак, ключевые моменты:

✔️ Ты знаешь технологии, которые требуются для вакансии: React, TypeScript, Redux Toolkit, RTK Query.
✔️ Ты можешь самостоятельно разработать проект по ТЗ, используя эти технологии (с гуглением, но без копирования чужого кода).
✔️ Ты интересуешься продвинутыми темами: браузер под капотом, архитектура приложений, сборщики, тестирование и т.д.
✔️ Ты уверенно решаешь базовые задачи по лайвкодингу и знаешь теорию.
✔️ Ты грамотно составил резюме и подготовил самопрезентацию.

#frontend #work #interview

👩‍💻 Архитектура Frontend с Нуля до Продакшена. Docker, Webpack, CI/CD, React, Deploy

В этом видео мы подробно рассмотрим архитектуру Frontend-приложений, начиная с технологий и инструментов, заканчивая настройками и деплоем. Это будет комплексный обзор всех ключевых компонентов архитектуры: React, Redux, Storybook, Webpack, Docker, Nginx, CI/CD и других технологий.

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

📌 Схема

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

#frontend #react #docker #cicd #deploy

🚀 Архитектура Frontend с Нуля до Продакшена

Завтра выходит первое видео из курса «Архитектура Frontend с Нуля до Продакшена». За 40 минут я расскажу о ключевых технологиях и инструментах, которые используются во Frontend, начиная с базовых настроек и заканчивая деплоем на сервер. В дальнейшем на YouTube выйдут миникурсы по таким темам, как Docker, Webpack, CI/CD, тестирование, мониторинг, локализация и многое другое.

Все примеры будем разбирать на реальном проекте, а не на Кошечках и Собачках. Вместе начнем создавать полноценное приложение, чтобы на практике изучить весь процесс.

🏆 Получение оффера

Представьте, как меняется жизнь: с зарплаты в 20 тысяч ты вырастаешь до 230 тысяч. Это не просто скачок — это кардинальная трансформация возможностей и перспектив. И самое главное, человек не просто достиг своей цели, а теперь работает там, где ему действительно нравится. Один из моих учеников совсем недавно получил оффер в крупную IT-компанию, а еще ждёт результаты финалов от двух других и готовится к последнему этапу в четвёртую.

Удалёнка, 230 тысяч на руки, бонусы, ДМС, лучшая техника — звучит как мечта, но для него это уже реальность. Я искренне горжусь своими учениками, и рад видеть их успехи.

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

📌 Разбор Резюме

Друзья, привет!

Как вам идея провести стрим, где я разберу ваши резюме? В прямом эфире сможем вместе разобрать ошибки, обсудить способы улучшения и подкорректировать ваши CV! Плюс, будет возможность пообщаться, посмотреть резюме друг друга и поделиться полезными советами.

Если будет много желающих, обязательно проведем такой эфир! Кому интересно — пишите, не стесняйтесь

Точно будет полезно и продуктивно!

Паттерн Адаптер в React. Продвинутый Frontend на реальных примерах

В этом видео мы рассмотрим Паттерн Адаптер (Adapter) в контексте React и Frontend разработки.

Для проекта Маркет используем Vite, FSD, TypeScript.

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

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

#frontend #patterns #adapter

👑 Платформа YeaHub

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

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

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

После такой подготовки мои ученики получают положительные отзывы на собеседованиях. Вот реальный фидбэк от крупной компании:

Хорошо рассказываешь с деталями про предыдущие проекты - не нужно вытягивать силой / задавать наводящие вопросы. Видно, что те проекты, которые делал - делал действительно сам. Подойдешь в команду, где будут рады инициативным, заряженным мидлам, которые готовы расти, потому что мотивации у тебя очень много.

❓ Что такое YeaHub?

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

Мы стремимся улучшить IT-сообщество, объединить специалистов и предоставить им возможности для развития и карьерного роста.

На скрине мой профиль на платформе

#yeahub

🖥 Нужен ли Docker новичку?

Docker — это мощный инструмент для быстрого развертывания приложений. С его помощью можно одной командой запускать множество сервисов: бэкенд, несколько фронтенд-приложений, базы данных, хранилища и многое другое. Также он позволяет легко настраивать Nginx и выпускать SSL-сертификаты.

В YeaHub мы используем Docker для всех наших приложений и сервисов, которые собираются и запускаются одной командой. Это невероятно удобно, особенно когда требуется настроить CI/CD.

За время работы я разработал свой собственный шаблон — универсальную стартовую сборку для Docker, которую постоянно совершенствую. Представьте, как за одну команду запускаются четыре фронтенд-приложения, один бэкенд, база данных, Nginx, SSL-сертификаты, миграции и PGAdmin на любом сервере. Сейчас, если я арендую новый сервер, мне требуется меньше 5 минут, чтобы развернуть всё это.

Docker — это действительно очень удобный инструмент. Однажды я сниму курс по нему, основанный на собственном опыте. Это будет не типичное видео с YouTube, где часто отсутствуют реальные практические советы. Все знания, которые я получил, — результат часов, проведённых в терминале сервера, настройках Docker и запуске проектов. Этот курс будет практическим, чтобы вы смогли легко и быстро запускать свои приложения. Видео будет частью курса по архитектуре фронтенда. На следующей неделе мы познакомимся с основами и рассмотрим, что из себя представляет фронтенд.

#frontend #docker

Снял видео о паттерне Наблюдатель в React! 😱

Добавил еще один стейт-менеджер в зоопарк — назвал его Reactify! 🐘 Конечно, это все на минималках и пока что только для примера, но в следующих видео мы его улучшим, сделаем более универсальным и разместим в npm пакет. 💪

Как думаете, стоит ли переходить с Redux на Reactify? 😆

🚀Снял 2 видео:

1. Паттерн Адаптер в React
2. Архитектура Frontend приложений с Нуля до Продакшен

На следующей неделе они выйдут. Плюс на выходных сниму еще 1-2 видео. Топовые видео получились для прокачки💪

Вопросы с собеседования в Авито

Позиция: Мидл/Мидл+

Вопросы:

1. Типы данных в js перечислить.
2. В чём отличие объекта от массива?
3. Как проверить, что объект является массивом?
4. В чём отличие var, let, const?
5. Как с помощью нативного js сделать выполнение кода при клике на кнопку?
6. Какие ещё способы назначить обработчик, кроме addEventListener?
7. Фазы жизненного цикла события.
8. Что такое Ивент таргет и каррент таргет?
9. Кнопка, внутри спан, навесили листенер на кнопку, кликнули на спан. Что будет таргет, а что каррент таргет?
10. Как отменить всплытие события?
11. Как найти все элементы на странице? И что передать в селектор?
12. Как отцентртровать блочный элемент в CSS?
13. Какие CSS свойства влияют на размеры блочного элемента?
14. Что такое Корс? Зачем он нужен? Где Корс передаётся на фронт?
15. Как браузер понимает, что можно выполнять запрос или нет? По каким атрибутам запроса понимает?
16. Что такое куки? Где хранятся? Можем ли мы куки добавить через фронт? Можем ли создать куку на клиенте?

Вроде ничего сверхсложного. Кто бы смог ответить на всё это? Попасть на собеседование реально, достаточно иметь три года опыта в резюме.

А вас часто приглашают на собеседования?

#interview #work #frontend

Мотивация перед сном.

Листаю ленту в YouTube и попалось видео "Цитаты из фильмов над которыми стоит задуматься". Я увидел комментарий (на скрине). Автор говорит, что стал программистом, хотя все вокруг говорили, что у него не получится. Мне тоже нравится цитата из фильма Пазманский дьявол:

— Все хотят, чтобы ты сдался. Говорят: «Не всё так просто».
— И в чём же правда?
— Всё просто. Если говорят, что ты чего-то не можешь, сделай это и всё, и ты поймёшь, что всё очень просто. И так было всегда.

Все просто. Если ты веришь в это и делаешь усилия. Если ты решил добиться цели, то ничего не может тебе помешать. Если ты не сидишь на месте, что-то делаешь, то тебя непременно ждет успех. Нужно просто решиться. Весь мир перед нами.

Видео "Цитаты из фильмов над которыми стоит задуматься":
https://youtu.be/qZeTiQ4QJ4k?si=XyoGJFrU0BcZ7hsU

Трудоустройство: Финал.

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

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

Чтобы улучшить свои ответы на собеседованиях, ученики после прохождения скринингов присылают записи в наш менторский чат. Мы вместе оцениваем их ответы, корректируем и делаем разбор. Так отрабатываются вопросы по любым компаниям: Сбер, МТС, Газпром, Яндекс, Вайлдберис. Всё проходит гладко, если в вашем опыте действительно были те процессы, о которых вы говорите.

За 2-3 месяца обучения ученики проходят большой путь: учатся решать задачи самостоятельно и знакомятся с процессами разработки. Это долго, но зато они становятся специалистами, которые могут конкурировать даже с мидлами. Такой опыт позволяет претендовать на зарплату от 200к+.

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

В комментариях будут вопросы с финала моего ученика

#frontend #interview

👍 Менторство

Выступал для учеников с митапом по архитектуре Frontend приложений.

Делал запись, но звук не записался😅

Решил перезаписать уже в формате видео для YouTube. Очень полезное видео. Разберем весь стэк и инструменты, с чего начинается разработка приложений.

Так же в закрытом чате у меня есть записи митапов: Типы компаний, Процессы в компаниях Скрам/Канбан, Workflow в команде и роли, System Design и тд

Тоже на понятных схемах, примерах. Так что если интересно залетайте в закрытый чат

👍 Менторство | 🔝 Сообщество

Снова в деле😎

Снял видео по паттерну Адаптер

После долгого перерыва в YouTube снова буду радовать вас техническим контентом👍