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

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

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

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

#frontend #typescript

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

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

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

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

#typescript #livecoding #interview

🖥 Что делает конструкция [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

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

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

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

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

#frontend #react #patterns

🖥 Гайд: 80% всего Git & GitHub для работы.

Многие начинающие разработчики сталкиваются с трудностями в изучении Git. Большинство видео на YouTube перегружают ненужными командами, что только отпугивает новичков.

В этом гайде я объясняю основную логику работы с Git, чтобы вы могли уверенно использовать 80% возможностей инструмента, которые действительно нужны для повседневной работы.

Кстати, в моем практическом видеокурсе React Новости я специально имитирую командную работу, чтобы вы могли почувствовать себя частью настоящей команды:
https://youtu.be/bD0UXb7kD_k?si=H0ojGCXvf_UxrfLi

📹 Контент план

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

Также я в процессе съемки двух видео: SOLID в React и ООП в React. Плюс готовлю видеогайд по деплою фронтенд приложений. Это будет сборка, которую я разработал методом проб и ошибок, и её можно легко адаптировать под разные проекты.

Есть планы начать новый плейлист по DOM API. На YouTube нет нормальных курсов на эту тему, поэтому я написал материал для учеников и думаю теперь записать серию видео.

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

Всем хороших выходных 🤝

Обзор менторства и отзывы:
@mentor_reactify

🖥 5 сложных концепций Функций в JavaScript для собеседований

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

Все концепции которые мы рассмотрим в этом видео спрашивают на собеседованиях

- Колбеки (Callbacks)
- Замыкания (Closures)
- Чистые функции (Pure Functions)
- this в функциях
- Асинхронные функции (async/await)

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

#frontend #javascript #функции

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

1. Реализуйте функцию throttle. throttle позволяет "ограничить" количество вызовов функции до одного раза в заданный период времени, даже если функция была вызвана множество раз.

2. Реализуйте функцию debounce. Дебаунсинг позволяет "задержать" выполнение функции до тех пор, пока не пройдет определенный период времени без ее вызова.

3. Реализуйте функцию sleep. Функция sleep позволяет задержать выполнение кода на определенное количество времени.

4. Реализуйте функцию memoize, которая принимает функцию fn в качестве аргумента и возвращает новую функцию. Новая функция должна кэшировать результаты вызовов fn для уникальных наборов аргументов.

Начальный код:

function memoize(fn) {
 
}

// Пример использования
function slowFunction(num) {
  // Симуляция тяжелых вычислений
  for (let i = 0; i < 1e9; i++) {}
  return num * 2;
}

const memoizedSlowFunction = memoize(slowFunction);

console.log(memoizedSlowFunction(5)); // Вычисляет и кэширует результат
console.log(memoizedSlowFunction(5)); // Возвращает закэшированный результат

#javascript #livecoding

🖥 Что будет в консоли?

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

var foo = 1; 
function bar() { 
    if (!foo) { 
        var foo = 10; 
    } 
    console.log(foo); 
} 
bar();

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

function foo() { 
    var x = 1; 
    if (x) { 
        (function () { 
            var x = 2; 
        }()); 
    } 
console.log(x)
}

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

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

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

user.g();

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

function greetWaitAndAgain() {
  console.log(`Hello, ${this.name}!`)
  setTimeout(() => {
    console.log(`Hello again, ${this.name}!`)
  })
}

const user = { name: 'Alex' }

user.greetWaitAndAgain = greetWaitAndAgain;
user.greetWaitAndAgain()

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

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

#this #javascript #замыкание #собеседование

🌐 Единая точка входа в IT!

Для тех, кто хочет освоить полный стек технологий, подготовиться к реальным собеседованиям и получить работу мечты? Мы собрали всё необходимое для твоего роста и развития в одном месте!

Выбирай направление и становись частью IT сообщества:

👩‍💻 React Frontend

👩‍💻 Ruby Backend

👩‍💻 iOS Mobile

👩‍💻 Android Mobile

🖥 PHP Backend

👩‍💻 Node.js Backend

👩‍💻 Rust Backend

👩‍💻 Java Backend

👣 Golang Backend

👩‍💻 Python Backend

👩‍💻 QA & Testing

🖥 Общее IT

👨‍💻 Вакансии IT

📅 Митапы IT

YeaHub помогает расти и достигать целей. ⚡

🎉 YeaHub растёт и развивается!

✔️Мы расширили базу направлений, навыков и вопросов.
✔️Теперь доступна публичная страница с вопросами.
✔️Активно работаем над новыми сервисами и навыками.

https://yeahub.ru/questions

💻 Сейчас мы исправляем баги и совершенствуем интерфейс, чтобы сделать платформу ещё удобнее.

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

@yeahub_community

8000 👍

Завтра новое видео - SOLID в React

Надеюсь к весне будет 10.000 на канале 📊

👩‍💻 Принципы SOLID в React

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

- Single Responsibility Principle (Принцип единственной ответственности)
- Open/Closed Principle (Принцип открытости/закрытости)
- Liskov Substitution Principle (Принцип Барбары Лисков)
- Interface Segregation Principle (Принцип разделения интерфейса)
- Dependency Inversion Principle (Принцип инверсии зависимостей)

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

🔗 Репозиторий

#react #solid #frontend

👩‍💻 Улучшайте свой код с полезными паттернами и принципами

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

📹 Принципы SOLID в React
https://youtu.be/8WsrMKw8w6I?si=Bj1Hkhaeod-PpnPA

📹 5 продвинутых паттернов в React
https://youtu.be/JVtWJ6BxKas?si=DxUTxxqf_fxOamSS

Потратьте выходные с пользой, улучшая свои навыки и применяя лучшие практики в React