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

👩‍💻 5 продвинутых паттернов в React

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

- Slot Pattern (Component Injection)
- Render Prop
- Proxy Component
- Function as a Child
- Compound Components

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

#frontend #react #patterns

😎 Годные видео на канале уже залетели!

Особенно видос про дженерики – это просто топчик. Если бы мне такое видео попалось в начале карьеры, я бы точно быстрее вырос как разработчик. Объяснил логику дженериков, как будто объясняю себе молодому, и добавил кучу примеров. Короче, обязательно к просмотру! 🔥

А в четверг выйдет бомбическое видео – 5 продвинутых паттернов в React.
Будет много примеров, и не абстрактных, а таких, что прям сразу можно брать и использовать в реальных проектах. 20 минут концентрированной годноты. Если бы я такое видео посмотрел на старте, то, наверное, сеньором стал бы лет на пять раньше. 😅

🖥 Что делает конструкция [K in Status]: \[${K}]``?

Вот код из видео, который вызывает вопросы:

type Status = 'success' | 'error' | 'loading';

type StatusWithBrackets = {
  [K in Status]: `[${K}]`
}[Status];

💡 Что здесь происходит?

1️⃣ **[K in Status]: \[${K}]`** Мы создаем объект на уровне типов. Для каждого значения из Status ('success' | 'error' | 'loading'`) генерируются ключи и их значения. Например:

{
  success: "[success]",
  error: "[error]",
  loading: "[loading]"
}

2️⃣ [Status]
Эта часть "вытаскивает" все значения, которые соответствуют ключам Status.
То есть:

"[success]" | "[error]" | "[loading]"

🛠️ Итог: StatusWithBrackets превращается в объединение строк:
"[success]" | "[error]" | "[loading]".

#typescript

🖥 Задачи с собеседований по TypeScript

➕ Напиши нативный Pick<>
➕ Напиши нативный Omit<>
➕ Напишите кастомный Partial<Type>
➕ Напишите кастомный Record<Keys, Type>

🔗 Сборник заданий по TypeScript

🔗 Платформа для решения задач

#typescript #livecoding #interview

🖥 5 типичных задач по TypeScript для Frontend собеседований

В этом видео мы разберем 5 типичных задач по TypeScript, которые могут встретиться на собеседовании на фронтенд-разработчика!

- Типизация функций
- Дженерики (Generics)
- Extends, keyof, typeof
- Утилитарные типы (Utility Types)
- Маппинг типов (Mapped Types)

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

#frontend #typescript

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

Мои цели на Новый год — и как я помогаю другим достигать своих

➕ В 2025 году я поставил перед собой амбициозные цели:
- 30 000 подписчиков на YouTube.
- 50 000 пользователей YeaHub.
- 100 трудоустроенных учеников.

➕ Я уже начал активную работу:
- Опубликовал два новых видео на YouTube (еще два выйдут на следующей неделе).
- Написал сценарии для будущих выпусков.
- Завершил важные курсы и материалы для своих учеников.
- Расширил YeaHub — добавлены каналы для разных IT-специальностей, которые уже активно ведутся.

Каждый шаг приближает меня к целям и помогает моим ученикам достигать своих.

➕ Реалии рынка труда в 2025 году

Сейчас ситуация на рынке такова, что даже самый талантливый новичок сталкивается с жесткими требованиями:
- Сложно найти работу джуном
- Джуновская зарплата — около 50 000 ₽.
- Возможность попасть на бесплатную стажировку — с перспективой 30 000–50 000 ₽ на старте.

Компании не заинтересованы в сотрудниках, которые приходят "учиться". Им нужны люди, готовые сразу работать.

Можно ли стать таким специалистом без опыта? Да, это возможно.

Ты можешь не быть "настоящим мидлом", но сможешь выполнять задачи, которые от тебя ждут.

➕ Для этого нужно:
- Умение писать код — понятный и качественный.
- Знание основного стека технологий.
- Навык ориентироваться в проекте и понимать, как он устроен.
- Знание командных процессов: работа с ветками, ревью кода, CI/CD.
- Способность писать такой код, к которому у других разработчиков не будет вопросов.

➕ Как я могу вам помочь

Если ваша цель на 2025 год — это:
- Трудоустройство.
- Смена профессии.
- Поиск более высокооплачиваемой работы.

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

За время менторства я создал сильное сообщество и крутую программу обучения, которая дает результат. Уверен, она понравится и вам.

Обзор программы и отзывы:
https://t.me/mentor_reactify

Цены и тарифы:
https://reactify.ru

Начав сейчас, вы уже в первой половине года сможете сменить работу, освоить необходимые навыки и выйти на новый уровень.

Для связи:
@ruslan_kuyanets

🖥 5 типичных задач по TypeScript на собеседованиях

Советую изучить дженерики в TypeScript перед просмотром моего нового видео с разбором задач. Дженерики — одна из самых частых тем на собеседованиях, поэтому важно их понимать. В видео "Логика дженериков в TypeScript: Generics, Extends и Conditional Types" я подробно разобрал эту сложную тему, объясняя, как дженерики работают, где и зачем их использовать. Это поможет вам не только в задачах, но и в реальных проектах.

Видео с разбором задач выйдет в понедельник. Не пропустите! 🎥

https://youtu.be/2oJAXXjFhnI?si=uIgzOSihpfGqwYK4

🖥 Практика This

Каким будет вывод этого фрагмента кода?

function f() {
    this.x = 5;
    console.log(this);
}
var o = new f();
console.log(o.x); 

Каким будет вывод этого фрагмента кода?

var o = {
    f: function() {
        return this;
    }
}
console.log(o.f())

Каким будет вывод этого фрагмента кода?

var o = {
    f: function() {
        return this;
    }
}
var o2 = {f: o.f};
console.log(o.f());
console.log(o2.f())

Каким будет вывод этого фрагмента кода?

function f() {
  console.log( this );
}

let user = {
  g: f.bind(null)
};

user.g();

Каким будет вывод этого фрагмента кода?

function sayHi() {
  alert( this.name );
}
sayHi.test = 5;

let bound = sayHi.bind({
  name: "Вася"
});

alert( bound.test );

#this #frontend #javascript

🖥 5 главных правил THIS для Frontend собеседований

В этом видео мы разберем 5 главных правил использования this в JavaScript, которые помогут вам не запутаться и успешно пройти собеседование на фронтенд-разработчика!

- Как работает this в стрелочных функциях.
- Почему важно, как вызывается функция, а не где она создается.
- Как this ведет себя в методах объектов.
- Как режим выполнения (strict или нестрогий) влияет на значение this.
- Как управлять this с помощью методов bind, call и apply.

🔗 СХЕМА-ШПАРГАЛКА ИЗ ВИДЕО

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

#this #frontend #javascript

Новый год — новые возможности! 🎉

Каждый январь я ставлю себе цели на год. И каждый раз я выполняю их почти полностью — на 90% и больше. Для меня это не просто традиция, а важный ритуал, который помогает идти вперёд.

2024 год был сложным. Были ошибки, трудности, но и много побед. Много хороших дел и помощи другим. В 2025 году предстоит ещё больше работы над собой.

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

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

«Красная таблетка» Андрея Курпатова,
«Хочу и буду» Михаила Лабковского,
«Квантовый воин» Джона Кехо.

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

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

Всё возможно. Главное — начать. 💡

🎉 Друзья, с Новым годом!

Пусть 2025 год принесет вам развитие, крутые проекты и достойные зарплаты! 🚀
Берегите здоровье, делайте перерывы от компьютера и находите время на себя. 💪
Желаю удачи в новых начинаниях, вдохновения и достижения целей!
Пусть удаленка будет комфортной, а работа приносит удовольствие.
И пусть вокруг будут интересные люди и полезные знакомства!

С новым годом и новым кодом! 🎄✨

🖥 Задания для закрепления Дженериков в TypeScript.

Посмотрите видео -> Выполните задания самостоятельно.

Задание 1
Создайте функцию createArray с использованием дженериков. Функция должна принимать два аргумента:
- Тип элемента T,
- Количество элементов length — число, указывающее количество элементов в массиве.

Функция должна возвращать массив из указанного числа элементов типа T. Все элементы массива должны быть равными null.

Напишите тесты для функции:
- Проверьте, что она корректно создаёт массивы для различных типов (`number`, string, `boolean`).
- Проверьте, что длина массива соответствует указанному числу length.

function createArray(length: any): any {
  // Реализуйте функцию
}

// Пример теста
const numberArray = createArray(3); // Ожидается: [null, null, null]
const stringArray = createArray(2); // Ожидается: [null, null]

Задание 2
Создайте дженерик Box<T> для упаковки значений. Функция должна принимать значение типа T и возвращать объект с этим значением в свойстве value.

Напишите функцию getBoxValue(box) для извлечения значения из упакованного объекта. Функция должна:
- Возвращать значение из объекта,
- Выбрасывать ошибку, если тип T не соответствует ожидаемому.

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

type Box = {
   // Реализуйте дженерик
};

function getBoxValue(box: any): any {
  // Реализуйте функцию
}

// Пример теста
const stringBox = { value: 'Hello' };
const extractedValue = getBoxValue(stringBox); // Ожидается: 'Hello'

Задание 3
Используйте дженерики для создания функции mergeArrays<T>(arr1, arr2), которая сливает два массива в один.

Функция должна принимать два массива типа T[] и возвращать новый массив, который содержит все элементы из обоих массивов.

Напишите тесты для функции:
- Проверьте, что она корректно сливает массивы для различных типов (`number`, `string`).
- Проверьте, что она сохраняет правильный тип массива.

function mergeArrays(arr1: any, arr2: any): any {
  // Реализуйте функцию
}

// Пример теста
const mergedNumbers = mergeArrays([1, 2], [3, 4]); // Ожидается: [1, 2, 3, 4]
const mergedStrings = mergeArrays(['a', 'b'], ['c', 'd']); // Ожидается: ['a', 'b', 'c', 'd']

#typescript #frontend #generics #дженерики

🖥 Логика Дженериков в TypeScript: Generics, Extends и Conditional Types

В этом видео рассмотрена одна из ключевых тем в TypeScript — Дженерики (Generics). Вы узнаете, как использовать дженерики для создания универсального и переиспользуемого кода.

Мы подробно разберем:
- Примеры работы с дженериками на функциях, классах, интерфейсах, типах, компонентах и хуках.
- Условные типы (conditional types) и ограничения через extends.
- Логику использования дженериков, чтобы вы могли применять их эффективно и уверенно.

Дженерики — это основа современного программирования в TypeScript, позволяющая писать чистый, безопасный и гибкий код. Умение работать с дженериками помогает создавать сложные и масштабируемые проекты.

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

Этот курс подходит для всех, кто хочет углубить свои знания в TypeScript и научиться писать действительно крутой код.

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

#typescript #frontend #generics #дженерики

Компания: Промсвязьбанк

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

Вилка: 250к-300к

Задачи:
1. На вход дается массив чисел и число-сумма. Нужно вернуть true/false в зависимости от того, есть ли в массиве два числа, которые в сумме дают это число. Нужно решить со сложностью O(n)

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

3. В каком порядке выведутся консоль логи. Измениться ли порядок, если мы вызовем клик по кнопке с помощью button.click()

const container = document.querySelector('#grayContainerOne')
const button = document.querySelector('#buttonOne')

button.addEventListener('click', () => {
    Promise.resolve()
        .then(() => console.log('STEP 1'))

    console.log('STEP 2')
})

container.addEventListener('click', () => {
    console.log('STEP 3')
})

Собес двухнедельной давности. Вопросы были стандартные, а вот такие были задачи на лайвкодинге

#interview

🛡 Разновидности атак на веб-приложения: XSS, CSRF, Man-in-the-Middle и другие

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

1. XSS (Cross-Site Scripting)

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

Представьте форму комментариев на сайте. Если введённый текст отображается без проверки, злоумышленник может вставить скрипт:

<script>alert('Ваши данные украдены!');</script>

Этот скрипт выполнится у других пользователей, открывших страницу.

В 2020 году атака XSS была использована для фишинговых атак через популярные SaaS-сервисы.

Как защититься:
- Используйте экранирование данных (escaping) перед их выводом.
- Включите Content Security Policy (CSP).
- Проверяйте и очищайте вводимые данные (включая HTML).
- Ограничивайте использование опасных функций, таких как innerHTML.

2. CSRF (Cross-Site Request Forgery)

CSRF-атака заставляет пользователя выполнить нежелательное действие на сайте, на котором он авторизован. Это может быть перевод денег или изменение настроек.

Если пользователь авторизован на банковском сайте, злоумышленник может подставить ссылку:

<img src="https://bank.com/transfer?amount=1000&to=attacker" />

Когда пользователь откроет эту ссылку, запрос выполнится от его имени.

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

Как защититься:
- Используйте CSRF-токены в формах и запросах.
- Применяйте заголовок SameSite для cookies.
- Проверяйте источник запросов, например, с помощью заголовка Referer.

3. Man-in-the-Middle (MitM)

MitM-атака позволяет злоумышленнику перехватывать и модифицировать данные, передаваемые между пользователем и сервером.

Если пользователь подключён к общественному Wi-Fi без шифрования, злоумышленник может перехватить данные формы входа на сайт.

В 2015 году хакеры атаковали публичные Wi-Fi сети в аэропортах, перехватывая логины и пароли пользователей.

Как защититься:
- Всегда используйте HTTPS.
- Применяйте HSTS (HTTP Strict Transport Security).
- Проверяйте сертификаты серверов.
- Избегайте использования открытых Wi-Fi сетей без VPN.

4. SQL Injection

SQL-инъекция позволяет злоумышленнику вмешиваться в базу данных приложения, выполняя произвольные SQL-запросы.

На сайте с формой авторизации вводится:

' OR '1'='1

Это может обойти проверку логина и пароля.

В 2017 году через SQL-инъекцию была взломана база данных компании Equifax, что привело к утечке данных 143 миллионов человек.

Как защититься:
- Используйте подготовленные запросы (prepared statements).
- Проверяйте входные данные.
- Избегайте прямого динамического формирования SQL-запросов.

5. DDoS (Distributed Denial of Service)

DDoS-атака перегружает сервер, делая его недоступным для пользователей.

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

В 2016 году произошла крупнейшая DDoS-атака на провайдера Dyn, что вызвало сбои в работе сайтов Amazon, Twitter и Reddit.

Как защититься:
- Используйте CDN с защитой от DDoS (например, Cloudflare).
- Настройте ограничения на количество запросов (rate limiting).
- Мониторьте и фильтруйте подозрительный трафик.

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

#security #web