Руслан Куянец | Reactify – Telegram
Руслан Куянец | Reactify
5.84K subscribers
704 photos
52 videos
39 files
287 links
Я IT-специалист, ментор и основатель проекта YeaHub и сообщества Reactify. Здесь рассказываю про Frontend и IT.

Менторство:
https://reactify.ru

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

YeaHub:
https://yeahub.ru/

Связь:
@ruslan_kuyanets
Download Telegram
Собеседование на 100к: нам нужно построить новую версию байконура, по срокам 2 дня

Собеседование на 300к: расскажи какие знаешь типы данных в js

😅😅😅
🔥23😁19👍6😢2
🤫 Квантовый воин

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

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

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

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

Это лишь простой пример, но он показателен. Все знаки судьбы, которые сопровождали мой рост и изменения, — результат фокусировки на истинной цели и желания следовать за такими знаками. Аффирмации действительно работают, но только если вы действуете.

Поэтому, начав свой путь, не сомневайтесь в нем

📌 Прикрепил фото трехлетней давности из трамвая с той самой книгой.

#frontend #work
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍116🔥1😁1
🔝 Задача из Альфа Банк: Сортировка и группировка операций по дате

Позиция: Мидл/Мидл+/Сеньор

Вилка: 250к-350к

Опыт в резюме: 4 года

У вас есть массив объектов operations, представляющих операции с датами и суммами. Необходимо:

1. Отсортировать массив операций по датам.
2. Сгруппировать операции по году.
3. Представить результат в виде объекта, где ключи — это годы, а значения — массивы строк с датами в формате MM-DD, отсортированные по возрастанию.

Пример ожидаемого результата:

const result = {
"2017": [
"01-31",
"03-31",
"05-31",
"07-31",
"08-22",
"09-30",
"12-31"
],
"2018": [
"02-28",
"03-31",
"04-14",
"07-31",
"11-30"
]
};


Стартовый код:

const operations = [
{ "date": "2017-07-31", "amount": "5422" },
{ "date": "2017-03-31", "amount": "5220" },
{ "date": "2017-05-31", "amount": "5365" },
{ "date": "2017-08-22", "amount": "5451" },
{ "date": "2017-09-30", "amount": "5303" },
{ "date": "2017-01-31", "amount": "5545" },
{ "date": "2018-07-31", "amount": "5589" },
{ "date": "2018-11-30", "amount": "5567" },
{ "date": "2017-12-31", "amount": "5597" },
{ "date": "2018-03-31", "amount": "5359" },
{ "date": "2018-02-28", "amount": "5082" },
{ "date": "2018-04-14", "amount": "2567" }
];

function sortOperations(operations) {
// Ваша реализация здесь
}


#frontend #interview
Please open Telegram to view this post
VIEW IN TELEGRAM
👍14🔥32🤝2
Друзья, поздравляю вас с Днем Программиста! 🎉

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

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

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

С наилучшими пожеланиями,
Reactify 👩‍💻

👍 Менторство
Please open Telegram to view this post
VIEW IN TELEGRAM
29👍9🔥9
Чем отличаются циклы for...in и for...of в JavaScript

for...in
Цикл for...in используется для перебора свойств объекта (ключей), а также всех индексов массива, если он используется с массивом. Это важно: for...in перебирает ключи (индексы массива), а не значения.

Пример с объектом:

const car = {
make: 'Toyota',
model: 'Corolla',
year: 2020
};

for (const key in car) {
console.log(key, car[key]);
}

// make Toyota
// model Corolla
// year 2020


Пример с массивом:

const fruits = ['apple', 'banana', 'cherry'];

for (const index in fruits) {
console.log(index, fruits[index]);
}

// 0 apple
// 1 banana
// 2 cherry



for...of
Цикл for...of используется для перебора значений итерируемых объектов, таких как массивы, строки, Map, Set и т.д. Он перебирает значения.

Пример с массивом:

const fruits = ['apple', 'banana', 'cherry'];

for (const fruit of fruits) {
console.log(fruit);
}
// apple
// banana
// cherry


Пример со строкой:

const name = 'Alice';

for (const char of name) {
console.log(char);
}
// A
// l
// i
// c
// e


Как запомнить
for...in – для индексов и свойств объекта.
for...of – для объектов итерируемых, значений.

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

#frontend #javanoscript
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥26👍113🤝1
Media is too big
VIEW IN TELEGRAM
✉️ Для тех, кто учится и пополняет портфолио

👩‍💻 Наткнулась на репозиторий
«50 проектов на 50 дней»

В нем 50 мини-проектов на HTML, CSS и JS от легких к более сложным. Внутри можно найти описание и ссылки на демонстрации.

Потом решила поискать в тг и нашла открытый канал с короткими видосиками по реализации каждого проекта - здесь

Похоже слитый, потому что на оф сайте платный курс

Как можно его использовать?

📌 Пошаговое обучение: один проект - один день. Поможет вам систематизировать обучение и не выгореть.
📌 Изучение концепций: каждый проект фокусируется на определённой теме: работа с событиями, манипуляция DOM, создание анимаций и другое.
📌 Пополнение портфолио: будет, что скинуть hr, когда начнете искать работу.
📌 Развитие мышления: учитесь добавлять свои фичи или изменять существующий функционал.

#html #css #js
Please open Telegram to view this post
VIEW IN TELEGRAM
👍93🔥2
Смешно же😅

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

Прикольные активности😁
😁7👍2🔥1
Курс по TypeScript 49к просмотров🤪👩‍💻

Легендарное видео?

https://www.youtube.com/watch?v=PYWaUwjofJo
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥32👍3😢1💯1
👍 Тесты в ботах

В последнее время всё чаще компании просят пройти тестирование в ботах Telegram перед встречей. Это позволяет им предварительно оценить ваши знания и навыки. Вот примеры вопросов, которые могут встретиться в таких тестах:

Для того, чтобы совместить две части функционала, которые не планировали совмещать ранее, придётся реализовать паттерн?
- Decorator
- Adapter
- Facade
- Abstract Factory
- Executor

Как можно определить, что при загрузке страницы DOM построен?
- DOMContentLoaded
- DomLoaded
- onLoad
- onDomLoad

Можно ли передать query параметры в POST запросе?
- Да
- Нет
- Да, если не переданы в body
- Нет, если не переданы body

Имеет ли стрелочная функция свой контекст?
- Нет
- Да
- Да, если класс
- Нет, если класс

Произойдёт ли ошибка при использовании функции до (Function Declaration) её объявления?
- Нет
- Да
- Да, если класс
- Нет, если класс

Какой из данных паттернов относится к порождающим?
- Factory
- Mediator
- Command
- Adapter

Ваше мнение по поводу таких тестов?

#interview #frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
👍93🔥1💯1
Снова в деле😎

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

После долгого перерыва в YouTube снова буду радовать вас техническим контентом👍
Please open Telegram to view this post
VIEW IN TELEGRAM
👍18🔥105
Выступал для учеников с митапом по архитектуре Frontend приложений.

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

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

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

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

👍 Менторство | 🔝 Сообщество
Please open Telegram to view this post
VIEW IN TELEGRAM
10🔥6👍2
Трудоустройство: Финал.

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

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

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

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

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

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

#frontend #interview

👍 Менторство
Please open Telegram to view this post
VIEW IN TELEGRAM
👍64🔥4
Мотивация перед сном.

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

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


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

Видео "Цитаты из фильмов над которыми стоит задуматься":
https://youtu.be/qZeTiQ4QJ4k?si=XyoGJFrU0BcZ7hsU
🔥25👍4💯4😁1
Вопросы с собеседования в Авито

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

Вопросы:

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
👍13🔥64💯2
This media is not supported in your browser
VIEW IN TELEGRAM
🔥4👍3😁1🤔1
🚀Снял 2 видео:

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

На следующей неделе они выйдут. Плюс на выходных сниму еще 1-2 видео. Топовые видео получились для прокачки💪
🔥34👍5💯3
Снял видео о паттерне Наблюдатель в React! 😱

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

Как думаете, стоит ли переходить с Redux на Reactify? 😆
👍114🔥1
🖥 Нужен ли Docker новичку?

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

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

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

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

#frontend #docker
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥26👍53
👑 Платформа YeaHub

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

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

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

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


Что такое YeaHub?

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

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

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

#yeahub
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥31
Паттерн Адаптер в React. Продвинутый Frontend на реальных примерах

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

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

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

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

#frontend #patterns #adapter
👍123🔥3