👩‍💻 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 #javanoscript #функции

🖥 Задачи с собеседований по 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)); // Возвращает закэшированный результат

#javanoscript #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 #javanoscript #замыкание #собеседование

🌐 Единая точка входа в 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

💸 Сколько просить денег на собеседовании?

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

📊 Сколько просить?

Я встречал ребят с 3 годами опыта, которые пишут в резюме 60–100 тыс. рублей. Это вызывает вопросы:
– Возможно, человек «накрутил» опыт и боится просить больше?
– Или он просто не знает свою цену?
– Думает, что чем меньше попросит, тем больше предложений будет

С другой стороны, есть люди с таким же опытом, которые без страха называют 150–200 тыс. рублей, и им дают эту сумму.

Но вот интересное наблюдение: иногда человек проходит несколько собеседований подряд. На первом он просит 200 тыс., получает оффер и думает: «Хорошо, значит, столько я и стою». Но тут он идет на следующее собеседование и, ради интереса, решает попросить 250 тыс., думая: «А вдруг?» И что происходит? Ему соглашаются заплатить эту сумму!

Это простая истина:
👉 Сколько попросишь, столько и дадут

✔️ Почему важно оценивать себя правильно?

Вы наверняка видели, как человек с 6 годами опыта просит 250 тыс. рублей, в то время как другие с 3 годами просят ту же сумму.
Что здесь происходит? Люди с большим опытом могут:
– Переоценивать рынок, считая, что их достижения менее ценны.
– Не уверены в своей способности торговаться.

👉 Пока ты волнуешься о своей компетентности, тебя будут обходить менее компетентные люди

🛍 Как правильно торговаться?

Часто мои ученики получают оффер, например, на 200 тыс. рублей и готовы сразу согласиться. Но я всегда советую торговаться. Почему?
90% попыток заканчиваются успехом:
– С 200 поднимают до 230–250 тыс.
– С 250 до 280 тыс.

👉 Компании заранее закладывают бюджет на переговоры. Если вы соглашаетесь сразу, вы оставляете деньги на столе. Это рынок, какой дурак сразу же предложит максимальную цену?

💡 Вывод

На собеседовании важно помнить: вы — не просто кандидат, вы — решение проблемы компании. Если вы понимаете свою ценность, то озвучьте её. А если предложат меньше, торгуйтесь!

Как вы оцениваете свою зарплату? Делитесь в комментариях! 👇

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

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

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

- Задача на строки, методы и циклы
- Задача на строки, циклы и условия
- Задача на колбек, массивы, прототип и циклы
- Задача на объекты, массивы, графы и цепочки
- Задача на промисы, замыкания и асинхронность

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

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

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

Как и обещал в видео, предоставляю задачи с собеседований

1. Реализуйте полифил myFilter точно копирующий filter метод

Array.prototype.myFilter = function(callback) {

};

const arr = [1, 2, 3, 4, 5];

const filteredArr = arr.myFilter(x => x > 2);
console.log(filteredArr); // [3, 4, 5]

2. Найти все индексы начала вхождения анаграмм подстроки в строке

function searchAllAnagramsInString(str, substr) {

}

// Пример использования:
console.log(searchAllAnagramsInString("cbaebabacd", "abc")); // [0, 6]

3. Найти самый загруженный день в отеле

function findMaxDayWithClients(bookings) {
  // Реализуйте логику поиска самого загруженного дня
}

findMaxDayWithClients([[1, 5], [2, 4], [3, 6]]); // 3
// В день 3 отель был максимально загружен (3 клиента)

4. Представим, что у нас нет встроенных промис-комбинаторов, как можно реплицировать функциональность Promise.all?

function customPromiseAll(promises) {
  
}

// Пример использования
const promise1 = Promise.resolve(3);
const promise2 = Promise.resolve(42);
const promise3 = new Promise((resolve) => setTimeout(resolve, 100, 'foo'));

customPromiseAll([promise1, promise2, promise3])
  .then(results => console.log(results)) // [3, 42, 'foo']
  .catch(error => console.error(error));

5. Необходимо сгруппировать транзакции по userID.

const transactions = [
  { userID: "user1", amount: 200, date: "2023-01-01" },
  { userID: "user2", amount: 500, date: "2023-01-02" },
  { userID: "user1", amount: 300, date: "2023-01-03" },
  { userID: "user3", amount: 400, date: "2023-01-01" },
  { userID: "user2", amount: 150, date: "2023-01-04" },
  { userID: "user3", amount: 250, date: "2023-01-02" },
  { userID: "user4", amount: 100, date: "2023-01-01" }
];

function topThreeUsersByTotalAmount(transactions) {
 //тут
}

#javanoscript #лайвкодинг

🎙 Собеседование в OZON Tech на позицию Middle Frontend Разработчик

Два этапа тех собесов с задачами и вопросами. Вопросы были разнообразные: http, cors, browser и тд.

1. Переписать функцию с помощью async/await

getJson('json/1')
  .then(json => {
    if(json.key) {
      return getJson('json/2')
    }
    throw new Error('No key')
  })
  .then(json => {
    return json.key2
  })
  .catch(e => {
    console.log(e)
  })

2. Написать обертку вокруг нативного fetch, которая будет в случае ошибки пробовать еще retriesCount раз, и только потом упадет с ошибкой

function fetchWithRetries(retriesCount, ...fetchArgs) {
    /* */
}

3. Типизировать функцию reduce чтобы она принимала дженерики:

function reduce(array, callback, initial) {
    let acc = initial
    
    for(let i = 0; i < array.length; i++) {
        acc = callback(acc, array[i], i)
    }
    
    return acc
}

4. Написать функцию которая сворачивает диапазоны:

compress([1, 4, 3, 2]) // '1-4'

compress([1, 4]) //'1, 4'

5. Реализовать паттерн наблюдатель:

class Store {
    /*  */
}
  
  const store = new Store()
  
  const firstSubscriber = (data) => console.log('first', data)
  const secondSubscriber = (data) => console.log('second', data)
  
  store.subscribe(firstSubscriber)
  store.subscribe(secondSubscriber)
  
  store.data = {newKey: 'newString'}
  
  /** CONSOLE
   * first {newKey: 'newString'}
   * second {newKey: 'newString'}
   */
  
  store.unsubsribe(firstSubscriber)
  
    /** CONSOLE
   * second {newKey: 'newString'}
   */
}

#interview #frontend

🖥 Разбор задач по Event Loop с собеседований

В этом видео мы подробно разберем выполнение кода в задачах по Event Loop шаг за шагом. Мы визуализируем процесс на схеме, чтобы показать, что происходит с кодом в момент его выполнения. Разберемся, как работает стек вызовов, что такое микротаски, макротаски и как они взаимодействуют в процессе обработки событий. Это видео поможет вам глубже понять внутреннюю работу Event Loop в JavaScript, что критически важно для собеседований и практических задач.

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

🔗 СХЕМА

#frontend #javanoscript #eventloop