Бекендеры в нашем сообществе есть?

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

Пишите в личку
@ruslan_kuyanets

Публичное собеседование

Провели групповое собеседование. Отвечали на вопросы по очереди.

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

Вроде всем понравилось, будем раз в неделю проводить💪😎

https://youtu.be/gT_khIQ5rwE?si=TQcZDsXJJdOJbDt6

Сегодня выйдет новое видео по паттернам
Пока можете посмотреть прошлое, кто не смотрел. Ссылочку оставлю🤝

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

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

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

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

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

На следующей неделе 2 новых мероприятия на менторстве.

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

После таких разговоров, любой мидл позавидует моим Менти😄💪

А какой Сурикат вы?🤔

С Сурикатом монтируем видео на понедельник.
Паттерн стратегия🚀
Всем хороших выходных💪🏻

Строитель в JS
https://youtu.be/LiLJLNxPRZs?si=zpBpLEXdhuCqSkTr

Фабричный метод в JS
https://youtu.be/gT_khIQ5rwE?si=YCWWXZJgiE7sbQoj

Проведите 30 минут выходных с пользой🚀

Дал себе передышку на день. Уехал за город без ноутбука. Учусь красиво говорить для выступлений в сообществе😄
Руки чешутся делать дела😬 уже кучу замёток в телефоне настрочил😅

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

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

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

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

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

Что такое Proxy?

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

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

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

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

#proxy #javanoscript

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

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

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

#currying #javanoscript

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

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

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

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

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

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

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

Задача с собеседования в Сбер. Вилка от 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.

Реализуйте функцию 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

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

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

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

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