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

О сообществе

Ребята, 1 июля я открываю двери в сообщество. Это будет максимально полезное место. Идея, которую я реализую за июль, уникальна — такого нет нигде. Это сообщество с большим количеством возможностей для каждого участника.

Сейчас я формирую страницу сообщества, всё готово на 80 процентов. Прилагаю ссылку на одну из страниц для ознакомления.

Читать о пользе

Задача с собеседования №2

Есть массив массивов, где каждый внутренний массив представляет собой диапазон дней (включительно) в виде [начало, конец]. Нужно найти день, в который было наибольшее количество клиентов.

Пример:
Для массива [[1, 5], [2, 10], [1, 2]], выход должен быть 2, так как день 2 содержится в трех диапазонах.

Жду решения в комментариях 👍
Позже выложу как я решил эту задачу

Паттерн Стратегия в JavaScript. Продвинутый Frontend на реальных примерах

В этом видео мы рассмотрим Паттерн Стратегия (Strategy) в контексте JavaScript и Frontend разработки.

Для проекта Рецептов используем Webpack, JavaScript.

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

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

Задача с собеседования №1

Напишите функцию, которая принимает две строки str и substr и возвращает массив всех индексов, с которых начинаются анаграммы строки substr в строке str.

Кстати, условие задачи было неправильным, так как 0 и 5 не могут быть индексами начала анаграмм 🤔

Решение задачи на картинке ✔️

Экосистема сообщества Reactify & YeaHub🤩

Знаете, о чем я еще подумал? У меня никогда не было агрессивной рекламы менторства. Когда у меня появляется возможность взять учеников, я просто делаю пару нейтральных постов, и ко мне сразу приходят ребята. Пока все довольны. 😊 Так что если вдруг нужна помощь в обучении, обращайтесь. 🤝 Даже пару месяцев с ментором — огромный буст! А цены ниже некуда👌

https://react-mentor.notion.site/Frontend-a92c7b7d0d664e7297e2fa3d6acb2c26

Вообще, к собеседованиям помогает готовиться этот канал @frontend_questions. Его ведут ребята с YeaHub, я тоже периодически накидываю темы. Так что можете смело подписываться, канал из экосистемы Reactify & YeaHub 💪

Задача с собеседования №1

Напишите функцию, которая принимает две строки str и substr и возвращает массив всех индексов, с которых начинаются анаграммы строки substr в строке str.

// Входные данные:
let str = "cbacbebabacd";
let substr = "abc";

// Выходные данные:
[0, 5]

Жду решения в комментариях 👍
Позже выложу как я решил эту задачу

Сообщество.

Люди по своей природе стремятся к объединению и принадлежности к группам. Это основа человеческой психологии и социальной динамики. Сообщества играют ключевую роль в удовлетворении этой потребности, предлагая платформу для взаимодействия и поддержки.

Сообщества — это группы людей, объединенных общими интересами, целями или ценностями. Такие объединения позволяют людям делиться опытом и развиваться вместе.

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

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

"Люди объединяются в сообщества, чтобы преодолевать трудности и достигать успеха." — Джон Ф. Кеннеди

Всем привет, недавно был на собеседовании😅

Вот такие вопросы были:
1. Расскажи про Event Loop. Макро- и Микротаски. К чему относятся eventListeners?
2. Что такое Promise? Какие есть методы? Async await.
3. setTimeut 3 секунды в Promise. Отработает ли? Через сколько?
4. Расскажи про мемоизацию. Про оптимизацию React приложений. Запросы на сервер. Рассуждаем по React.Memo. Debouncing. useCallback и useMemo. Ленивая загрузка + и -.
5. Ситуация: у тебя много данных, ты отрисовываешь компонент, но он подлагивает. Твое действия для разрешения ситуации.
6. Виртуализация. Расскажи как реализовать, для чего нужна?
7. Стейт менеджеры. Зачем такой зоопарк? Какие использовал? Redux vs MobX vs Signals. Рассуждаем по Стейт менеджерам.

Дальше лайвкодинг:
- Две алгозадачи с Leet Code
- Одна задача на реализацию React приложения.

Если интересно, выложу задачи на днях.

Собеседование прошло хорошо. Не готовился к самопрезентации и растерялся. Долго рассказывал и не по делу. По вопросам ответил все. Задачи решил все. Собеседование шло 2.5 часа😱

Атмосфера была топовая, очень приятно пообщались с собеседующим Алексеем. Много рассуждали, обсудили проблемы Redux. Собеседование не было душным, за это и спасибо🤝

Мотивация.

Мое сознание не видит, что я могу проиграть. Конечно, у всех есть сомнения, но именно они помогают достигать новых высот. Когда ты думаешь, что недостаточно хорош, не стоит сдаваться. Нужно работать над собой, чтобы стать лучше. Это касается всего. Сомнения удерживают тебя в зале, заставляют делать дополнительные упражнения. Они побуждают перечитать конспект еще раз, хотя ты уже собирался ложиться спать.

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

Кстати, ребята! Со следующей недели можно начать путь в новую жизнь. Если вам нравится разработка и вы хотите стать Frontend-разработчиком, грамотно пройти путь обучения, много практиковаться и готовиться к собеседованиям, то у меня есть для вас отличное предложение.

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

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

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

@ruslan_kuyanets

Подробности о менторстве

Всем привет, может кто сталкивался с рабством в IT? Поделитесь историями и как выходили из него?

Ситуация: человек заключил договор с галерой, уволиться не может, придется заплатить 500к штраф.

Как такие ситуации решаются?

Делюсь с вами достижениями.

Вот сколько у нас уже различных мероприятий было/будет в этом месяце 🤩

Скоро обо всём расскажу.

Если вы хотели бы выступить и у вас есть, о чём рассказать, или может быть вы хотите научиться выступать на публике, то напишите мне, устроим 😎

Реализуйте функцию curry.

Каррирование (currying) — это процесс преобразования функции с множеством аргументов в последовательность функций, каждая из которых принимает один аргумент.

Вот такие задачки тоже на собесах бывают

function curry(func) {
  return function curried(...args) {
    if (args.length >= func.length) {
      return func.apply(this, args);
    } else {
      return function(...args2) {
        return curried.apply(this, args.concat(args2));
      }
    }
  };
}

function sum(a, b, c) {
  return a + b + c;
}

const curriedSum = curry(sum);

console.log(curriedSum(1, 2)(3)); // Также выведет 6
console.log(curriedSum(1)(2, 3)); // И это тоже выведет 6

Задача с собеседования в Сбер. Вилка от 200к

console.log('start')

const fn = () => (new Promise((resolve, reject) => {
  console.log(1);
  resolve('success')
}))

console.log('middle')

fn().then(res => {
  console.log(res)
})

console.log('end')

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

Выходным результатом будет start , middle, 1 , end и success.

Оптимизация приложений: Тришейкинг

Тришейкинг (Tree Shaking) – это процесс удаления неиспользуемого кода из вашего конечного бандла. В контексте JavaScript и фронтенд разработки, это означает, что сборщики модулей, такие как Webpack или Rollup, анализируют ваш код на предмет экспортов, которые нигде не используются, и не включают их в итоговый файл. Это позволяет существенно уменьшить размер бандла, что положительно сказывается на времени загрузки приложения. Например, если вы импортировали библиотеку, но использовали только одну функцию из нее, тришейкинг позволит исключить из бандла все остальные неиспользуемые функции.

Как работает тришейкинг:

1. Вы объявляете импорты и экспорты в каждом модуле.
2. Сборщик (Webpack, Rollup или другой) во время сборки анализирует дерево зависимостей.
3. Неиспользуемый код исключается из итогового бандла.

Порядок настройки (на примере Webpack):

1. Убедитесь, что используете версию Webpack, поддерживающую тришейкинг (обычно это версия 2 и выше).
2. В вашем webpack.config.js установите mode в значение production. Это автоматически включит тришейкинг.
3. Используйте ES6 модули (`import` и `export`), так как тришейкинг работает только с ними.

Бывают спрашивают вопрос на собеседовании. Вообще вопросы по оптимизации частенько задаю. Думаю расскажу вам о них в постах.

Каррирование (currying)

Достаточно популярный вопрос для лайвкодинга. Реализуйте функцию curry.

Каррирование (currying) — это процесс преобразования функции с множеством аргументов в последовательность функций, каждая из которых принимает один аргумент.

#currying #javascript

Что такое Proxy?

Proxy в JavaScript — это специальный объект, который позволяет создать обёртку вокруг другого объекта и перехватывать или переопределять операции, выполняемые с этим объектом, такие как чтение/запись свойств, вызов функций и т.д. Proxy может быть использован для различных целей, включая реализацию реактивности, валидацию, логирование и многое другое.

Proxy создаётся с двумя аргументами: целевым объектом (`target`), вокруг которого строится обёртка, и объектом обработчика (`handler`), который содержит функции-ловушки (такие как get и set в примере выше).

Функции-ловушки в handler позволяют перехватывать и переопределять стандартное поведение операций над объектом

В будущем хочу записать видео с Proxy на реальном проекте, как JavaScript Паттерны💪

#proxy #javascript

Паттерн Стратегия в React. Продвинутый Frontend на реальных примерах

В этом видео мы рассмотрим Паттерн Стратегия (Strategy) в контексте React и Frontend разработки.

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

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

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