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
Please open Telegram to view this post
VIEW IN TELEGRAM
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 #замыкание #собеседование
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from YeaHub
Для тех, кто хочет освоить полный стек технологий, подготовиться к реальным собеседованиям и получить работу мечты? Мы собрали всё необходимое для твоего роста и развития в одном месте!
Выбирай направление и становись частью IT сообщества:
👨💻 Вакансии IT
📅 Митапы IT
YeaHub помогает расти и достигать целей.
Please open Telegram to view this post
VIEW IN TELEGRAM
🎉 YeaHub растёт и развивается!
✔️ Мы расширили базу направлений, навыков и вопросов.
✔️ Теперь доступна публичная страница с вопросами.
✔️ Активно работаем над новыми сервисами и навыками.
https://yeahub.ru/questions
💻 Сейчас мы исправляем баги и совершенствуем интерфейс, чтобы сделать платформу ещё удобнее.
Если заметите ошибку или у вас есть предложения, пишите нам — мы всегда рады обратной связи! 🚀
@yeahub_community
https://yeahub.ru/questions
💻 Сейчас мы исправляем баги и совершенствуем интерфейс, чтобы сделать платформу ещё удобнее.
Если заметите ошибку или у вас есть предложения, пишите нам — мы всегда рады обратной связи! 🚀
@yeahub_community
Please open Telegram to view this post
VIEW IN TELEGRAM
React Новости. Создаем интерфейс приложения. React приложение новостей. [1]
Для тех, кто не видел React Новости. Топовый плейлист охватывающий:
Технологии:
- React
- Redux Toolkit
- React Router
- RTK Query
- TypeScript
- FSD
Основные фичи:
- Запросы на сервер
- Кастомные хуки
- Пагинация и фильтрация
- Поиск
- Слайдер (Slider)
- Хук useDebounce
- Рефакторинг кода
- Скелетоны (Skeleton)
- Контекст и многое другое
https://youtu.be/bD0UXb7kD_k?si=ZM5emp9x-jIetFqs
Для тех, кто не видел React Новости. Топовый плейлист охватывающий:
Технологии:
- React
- Redux Toolkit
- React Router
- RTK Query
- TypeScript
- FSD
Основные фичи:
- Запросы на сервер
- Кастомные хуки
- Пагинация и фильтрация
- Поиск
- Слайдер (Slider)
- Хук useDebounce
- Рефакторинг кода
- Скелетоны (Skeleton)
- Контекст и многое другое
https://youtu.be/bD0UXb7kD_k?si=ZM5emp9x-jIetFqs
😱 Ехабу год
Год назад я начал формировать команду для создания проекта. Тогда я провел 50+ собеседований и отобрал 10 человек. Все участники ехаба это ребята с канала. Вот так вот
Кто помнит?
https://www.group-telegram.com/reactify_IT.com/649
Год назад я начал формировать команду для создания проекта. Тогда я провел 50+ собеседований и отобрал 10 человек. Все участники ехаба это ребята с канала. Вот так вот
Кто помнит?
https://www.group-telegram.com/reactify_IT.com/649
Telegram
Reactify | Frontend Разработка
Reactify Teams [Сбор заявок]
Начинаю сбор заявок до 18 января. Все желающие принять участие должны заполнить форму. Это будет боевая разработка. Участник должен уметь самостоятельно разрабатывать простые приложения с использованием фреймворка.
Пока, что…
Начинаю сбор заявок до 18 января. Все желающие принять участие должны заполнить форму. Это будет боевая разработка. Участник должен уметь самостоятельно разрабатывать простые приложения с использованием фреймворка.
Пока, что…
Please open Telegram to view this post
VIEW IN TELEGRAM
Принципы SOLID помогают строить приложения, которые проще развивать и поддерживать в долгосрочной перспективе. Они помогают выстроить архитектуру с учетом будущих расширений и изменений. Изучив эти принципы, вы научитесь думать на шаг вперед, проектируя гибкие и масштабируемые системы.
- Single Responsibility Principle (Принцип единственной ответственности)
- Open/Closed Principle (Принцип открытости/закрытости)
- Liskov Substitution Principle (Принцип Барбары Лисков)
- Interface Segregation Principle (Принцип разделения интерфейса)
- Dependency Inversion Principle (Принцип инверсии зависимостей)
Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.
#react #solid #frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
На моем канале есть видео, которые помогут вам лучше понять и применять SOLID принципы и продвинутые паттерны в React. Эти принципы и паттерны используются на проектах многих компаний, и их знание поможет вам стать более эффективным разработчиком.
https://youtu.be/8WsrMKw8w6I?si=Bj1Hkhaeod-PpnPA
https://youtu.be/JVtWJ6BxKas?si=DxUTxxqf_fxOamSS
Потратьте выходные с пользой, улучшая свои навыки и применяя лучшие практики в React
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from Менторство Reactify
Всего 129 вакансий для фронтенд-разработчиков без опыта.
Ужас. Как новичку вообще найти работу в таких условиях? 😡
Единственный вариант — где-то набраться опыта и дотянуться хотя бы до фильтра «от 1 до 3 лет». Но что указывать за опыт? Обучение? Пет-проекты? А это уже похоже на накрутку. Если «накручивать» год, то почему не три? С тремя годами опыта зарплаты больше, а сложность и задачи такие же.
Дилемма.
Ужас. Как новичку вообще найти работу в таких условиях? 😡
Единственный вариант — где-то набраться опыта и дотянуться хотя бы до фильтра «от 1 до 3 лет». Но что указывать за опыт? Обучение? Пет-проекты? А это уже похоже на накрутку. Если «накручивать» год, то почему не три? С тремя годами опыта зарплаты больше, а сложность и задачи такие же.
Дилемма.
В этом видео мы разберем 5 типичных задач по JavaScript, которые могут встретиться на собеседовании на фронтенд-разработчика!
- Задача на строки, методы и циклы
- Задача на строки, циклы и условия
- Задача на колбек, массивы, прототип и циклы
- Задача на объекты, массивы, графы и цепочки
- Задача на промисы, замыкания и асинхронность
Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.
#frontend #javascript #функции
Please open Telegram to view this post
VIEW IN TELEGRAM
Как и обещал в видео, предоставляю задачи с собеседований
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) {
//тут
}
#javascript #лайвкодинг
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from YeaHub
YeaHub – 1 год! 🎉
30 января 2024 года я собрал команду из сообщества Reactify, и вместе мы придумали название нашего проекта, заложив тем самым его первое упоминание.
За этот год мы сделали меньше, чем хотелось бы, но уже имеем работающую платформу и экосистему каналов по различным IT-направлениям. Планы у нас грандиозные — впереди множество полезных сервисов для IT-специалистов.
Проект прошел через четыре стадии распада, но выстоял, и мы все-таки запустили платформу в открытый доступ.
На данный момент:
🔹 2000 пользователей посещают платформу еженедельно
🔹 500 зарегистрированных пользователей
И это только начало! Активное продвижение YeaHub стартовало лишь в январе.
Пусть 2025 год станет прорывным для всех нас! 🚀
https://www.group-telegram.com/reactify_IT.com/693
30 января 2024 года я собрал команду из сообщества Reactify, и вместе мы придумали название нашего проекта, заложив тем самым его первое упоминание.
За этот год мы сделали меньше, чем хотелось бы, но уже имеем работающую платформу и экосистему каналов по различным IT-направлениям. Планы у нас грандиозные — впереди множество полезных сервисов для IT-специалистов.
Проект прошел через четыре стадии распада, но выстоял, и мы все-таки запустили платформу в открытый доступ.
На данный момент:
🔹 2000 пользователей посещают платформу еженедельно
🔹 500 зарегистрированных пользователей
И это только начало! Активное продвижение YeaHub стартовало лишь в январе.
Пусть 2025 год станет прорывным для всех нас! 🚀
https://www.group-telegram.com/reactify_IT.com/693
Telegram
Reactify | Frontend Разработка
YeaHub
Сегодня мы придумали название для нашей платформы YeaHub. Я уже купил домен💪
Yea: Это слово ассоциируется с утверждением, согласием и позитивом. Оно звучит энергично и оптимистично, что может привлечь внимание и создать позитивное первое впечатление.…
Сегодня мы придумали название для нашей платформы YeaHub. Я уже купил домен💪
Yea: Это слово ассоциируется с утверждением, согласием и позитивом. Оно звучит энергично и оптимистично, что может привлечь внимание и создать позитивное первое впечатление.…
Два этапа тех собесов с задачами и вопросами. Вопросы были разнообразные: 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
Please open Telegram to view this post
VIEW IN TELEGRAM
В этом видео мы подробно разберем выполнение кода в задачах по Event Loop шаг за шагом. Мы визуализируем процесс на схеме, чтобы показать, что происходит с кодом в момент его выполнения. Разберемся, как работает стек вызовов, что такое микротаски, макротаски и как они взаимодействуют в процессе обработки событий. Это видео поможет вам глубже понять внутреннюю работу Event Loop в JavaScript, что критически важно для собеседований и практических задач.
Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.
#frontend #javascript #eventloop
Please open Telegram to view this post
VIEW IN TELEGRAM
Задача №1
setTimeout(() => {
console.log('setTimeout')
})
const promise = new Promise((resolve, reject) => {
console.log(1);
setTimeout(() => {
console.log("timerStart");
resolve("success");
console.log("timerEnd");
}, 0);
Promise.resolve().then(() => {
console.log('resolve')
})
console.log(2);
});
promise.then((res) => {
console.log(res);
});
console.log(4);
Задача №2
setTimeout(function timeout() {
console.log('Таймаут 1');
}, 0);
let p = new Promise(function(resolve, reject) {
console.log('Создание промиса');
setTimeout(function timeout() {
console.log('Таймаут 2');
}, 0);
resolve();
});
p.then(function(){
console.log('Обработка промиса');
});
console.log('Конец скрипта');
Задача №3
const myPromise = (delay) => new Promise((res, rej) => { setTimeout(res, delay) })
setTimeout(() => console.log('in setTimeout1'), 1000);
myPromise(1000).then(res => console.log('in Promise 1'));
setTimeout(() => console.log('in setTimeout2'), 100);
myPromise(2000).then(res => console.log('in Promise 2'));
setTimeout(() => console.log('in setTimeout3'), 2000);
myPromise(1000).then(res => console.log('in Promise 3'));
setTimeout(() => console.log('in setTimeout4'), 1000);
myPromise(5000).then(res => console.log('in Promise '));
Задача №4
console.log(1);
setTimeout(() => console.log(2));
Promise.resolve().then(() => console.log(3));
Promise.resolve().then(() => setTimeout(() => console.log(4)));
Promise.resolve().then(() => console.log(5));
setTimeout(() => Promise.resolve().then(() => console.log(6)));
console.log(7);
Задача №5
console.log('start');
const promise1 = Promise.resolve().then(() => {
console.log('promise1');
const timer1 = setTimeout(() => {
console.log('timer1')
const promise2 = Promise.resolve().then(() => {
console.log('promise2');
const timer2 = setTimeout(() => {
console.log('timer2')
}, 0)
})
}, 0);
});
const timer3 = setTimeout(() => {
console.log('timer3');
const promise3 = new Promise(resolve => {
setTimeout(() => {
console.log('promise3');
resolve();
}, 0);
}).then(() => {
console.log('promise3 then');
})
}, 0);
async function asyncFunction() {
console.log('async start');
await new Promise(resolve => setTimeout(resolve, 0));
console.log('async middle');
await Promise.resolve().then(() => console.log('async promise'));
console.log('async end');
}
asyncFunction();
console.log('end');
Please open Telegram to view this post
VIEW IN TELEGRAM
😅 Псс... Прокачаться не надо?
Спасибо всем, кто поддерживает! Записывая новое видео, всегда переживаю, что мог где-то ошибиться, что-то не так сказать или неправильно употребить слово.
Съемка видео, написание сценария и монтаж — это непростая задача. На 20-минутное видео уходит три дня работы. А ведь у меня еще YeaHub, блог, менторство и социальные проекты.
Лучшая поддержка - это просмотр видео. Спасибо!
https://www.youtube.com/@reactify-it
Спасибо всем, кто поддерживает! Записывая новое видео, всегда переживаю, что мог где-то ошибиться, что-то не так сказать или неправильно употребить слово.
Съемка видео, написание сценария и монтаж — это непростая задача. На 20-минутное видео уходит три дня работы. А ведь у меня еще YeaHub, блог, менторство и социальные проекты.
Лучшая поддержка - это просмотр видео. Спасибо!
https://www.youtube.com/@reactify-it
🎉 Ровно год в менторстве!
Год назад, 8 февраля, я выложил пост у себя на канале о том, что начинаю обучать новичков. И с тех пор у меня было около 100 учеников, более 70 из которых пришли в разработку почти с нуля.
Больше всего учеников пришло осенью: сентябрь, октябрь, ноябрь. Почти все, кто начал обучение раньше, уже нашли работу. А сейчас многие заканчивают обучение и выходят на рынок. Каждый ученик — уникален, со своими сильными сторонами и трудностями, но всех нас объединила разработка.
За этот год было много вызовов, но еще больше радости — когда удавалось преодолеть сложности, освоить технологии и получить долгожданный оффер. Конечно, были и те, кто по разным причинам прекращал обучение: кто-то не справился, кто-то понял, что фронтенд — не его, кому-то просто не зашло. Такие моменты всегда немного расстраивают, ведь хочется, чтобы каждый доходил до своей цели.
Менторство — это не волшебная таблетка и не кнопка "Бабло", которая без усилий приведет к успеху. Ментор не может выучиться за вас или пройти за вас на работу — многое зависит от вас самих.
Я постоянно стараюсь делать обучение лучше. Вот, например, сейчас — суббота, 22:55, а я пишу практический курс для учеников по Docker и CI/CD. 😅
Мне хочется формировать не просто сообщество разработчиков, а сильное комьюнити людей, которые не просто найдут работу, а станут реально крутыми специалистами. Надеюсь, у меня это получается!
Так что с праздником меня — с первой годовщиной в менторстве! 🥳😎
📹 Во вторник новое видео - Принципы ООП в React
👇Тот самый пост
https://www.group-telegram.com/reactify_IT.com/709
Год назад, 8 февраля, я выложил пост у себя на канале о том, что начинаю обучать новичков. И с тех пор у меня было около 100 учеников, более 70 из которых пришли в разработку почти с нуля.
Больше всего учеников пришло осенью: сентябрь, октябрь, ноябрь. Почти все, кто начал обучение раньше, уже нашли работу. А сейчас многие заканчивают обучение и выходят на рынок. Каждый ученик — уникален, со своими сильными сторонами и трудностями, но всех нас объединила разработка.
За этот год было много вызовов, но еще больше радости — когда удавалось преодолеть сложности, освоить технологии и получить долгожданный оффер. Конечно, были и те, кто по разным причинам прекращал обучение: кто-то не справился, кто-то понял, что фронтенд — не его, кому-то просто не зашло. Такие моменты всегда немного расстраивают, ведь хочется, чтобы каждый доходил до своей цели.
Менторство — это не волшебная таблетка и не кнопка "Бабло", которая без усилий приведет к успеху. Ментор не может выучиться за вас или пройти за вас на работу — многое зависит от вас самих.
Я постоянно стараюсь делать обучение лучше. Вот, например, сейчас — суббота, 22:55, а я пишу практический курс для учеников по Docker и CI/CD. 😅
Мне хочется формировать не просто сообщество разработчиков, а сильное комьюнити людей, которые не просто найдут работу, а станут реально крутыми специалистами. Надеюсь, у меня это получается!
Так что с праздником меня — с первой годовщиной в менторстве! 🥳😎
👇Тот самый пост
https://www.group-telegram.com/reactify_IT.com/709
Please open Telegram to view this post
VIEW IN TELEGRAM
Telegram
Reactify | Frontend Разработка
Менторство
Я пытаюсь улучшить сообщество, помочь новичкам в обучении. Я снимаю видеоуроки, делаю бесплатные курсы, веду телеграмм канал, стараюсь отвечать каждому в личных сообщениях. И даже наш проект YeaHub направлен на то, чтобы принести пользу IT сообществу.…
Я пытаюсь улучшить сообщество, помочь новичкам в обучении. Я снимаю видеоуроки, делаю бесплатные курсы, веду телеграмм канал, стараюсь отвечать каждому в личных сообщениях. И даже наш проект YeaHub направлен на то, чтобы принести пользу IT сообществу.…
В этом видео разберем основные принципы ООП — инкапсуляцию, наследование, полиморфизм и абстракцию — и покажем, как они работают в React. Узнаем, что такое Render Props, Component Injection, композиция и декомпозиция, и применим их в функциональных компонентах, Custom Hooks и HOCs.
Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.
#frontend #react #ооп
Please open Telegram to view this post
VIEW IN TELEGRAM