React. Сборник рецептов. Практические приемы работы с фреймворком React

Книга посвящена практическому применению фреймворка React. Описано создание простых приложений и приложений со сложным интерфейсом, рассмотрены вопросы маршрутизации в приложениях и управление их состоянием. Даны примеры реализации интерактивного взаимодействия с пользователем, подключения к различным службам бэкенда, таким как REST и GraphQL, описана работа с библиотеками компонентов. Подробно рассматривается безопасность приложений, процесс их тестирования, даны советы по обеспечению доступности. Приводятся практические рекомендации по повышению производительности и созданию прогрессивных веб-приложений.

👉 @frontendInterview

​Рост численности населения

В небольшом городе население в начале года составляет p0 = 1000 человек. Население регулярно увеличивается на 2 процента в год, и кроме того, в город приезжает 50 новых жителей в год. Сколько лет нужно городу, чтобы его население стало больше или равно p = 1200 жителей?

At the end of the first year there will be: 
1000 + 1000 * 0.02 + 50 => 1070 inhabitants

At the end of the 2nd year there will be: 
1070 + 1070 * 0.02 + 50 => 1141 inhabitants (** number of inhabitants is an integer **)

At the end of the 3rd year there will be:
1141 + 1141 * 0.02 + 50 => 1213

It will need 3 entire years.

Более общие заданные параметры:

p0, percent, aug (inhabitants coming or leaving each year), p (population to equal or surpass)

Функция nb_year должна возвращать n количество полных лет, необходимых для получения численности населения, большей или равной p.

aug - целое число, percent - положительное или нулевое плавающее число, p0 и p - положительные целые числа (> 0)

Примеры:
nb_year(1500, 5, 100, 5000) -> 15
nb_year(1500000, 2.5, 10000, 2000000) -> 10

👉 @frontendInterview

​Как уничтожить объект web worker?

В JavaScript, чтобы уничтожить объект Web Worker, необходимо использовать метод terminate(). Этот метод останавливает выполнение worker'а, освобождает связанные с ним ресурсы и завершает его работу. После вызова terminate() объект worker больше не может быть использован.

Зачем уничтожать Web Worker?
Web Worker позволяет выполнять тяжелые операции в фоновом потоке, не блокируя основной поток (UI-поток). Однако, если worker больше не нужен, он продолжает существовать и занимает ресурсы (память, процессорное время). Чтобы избежать утечек памяти и оптимизировать работу приложения, важно уничтожать worker, когда он больше не используется.

Как использовать `terminate()`?
Вы вызываете метод terminate() на экземпляре объекта worker. Это мгновенно останавливает выполнение фонового скрипта.

// Создаем worker
const myWorker = new Worker('worker.js');

// Выполняем какие-то операции через worker
myWorker.postMessage('Hello, worker!');

// Завершаем работу worker, когда он больше не нужен
myWorker.terminate();

Важно помнить
- После вызова terminate() worker полностью уничтожается и больше не может отправлять или получать сообщения.
- Если есть обработчики событий, привязанные к worker (например, onmessage), они автоматически удаляются.
- Доступ к worker после вызова terminate() не приведет к ошибке, но никакие операции через него больше работать не будут.

const worker = new Worker('worker.js');

// Отправляем сообщение
worker.postMessage('Start working');

// Завершаем работу worker
worker.terminate();

// Попытка отправить сообщение после уничтожения worker
worker.postMessage('Will this work?'); // Ничего не произойдет, worker уже завершен

Когда еще уничтожается worker?
Если вы перезагружаете страницу или закрываете вкладку, все web worker автоматически уничтожаются браузером. Однако в рамках текущей сессии ответственность за уничтожение лежит на разработчике.

👉 @frontendInterview

👉 @frontendInterview

​Как работает CSS will-change?

Свойство will-change позволяет заранее сообщить браузеру об изменениях (анимация, перемещение и т.д), которые могут произойти с элементом. Так браузер успеет оптимизировать выполнение этих изменений до того, как они произойдут. Это повышает скорость работы сайта.

will-change необходимо включить до изменения состояния элемента. Если применить это свойство в процессе изменения состояния, оно не успеет сработать и не даст никакого эффекта.

Такой код не сработает:

/* Изменение элемента происхожит при наведении курсора */
.element:hover {
  /* нужно подготовиться к изменению, которое уже происходит, код не сработает */
  will-change: transform;
  transition: transform 2s;
  transform: rotate(30deg) scale(1.5);
}

Если изменение элемента происходит при клике на него, will-change можно включать при наведении курсора на элемент. Это даёт браузеру время подготовиться до того, как произойдёт изменение .

.element {
  /* правила */
  transition: transform 1s ease-out;
}

.element:hover {
  /* браузер начинает готовиться к изменению состояния */
  will-change: transform;
}

.element:active {
  /* происходит изменение состояния */
  transform: rotateY(180deg);
}

Если изменение происходит при наведении курсора на элемент, то можно включать will-change при наведении на родительский элемент:

.element {
  transition: opacity 0.3s linear;
}

/* включаем will-change для элемента, когда мышка наводится на его родительский элемент */
.parent:hover .element {
  will-change: opacity;
}

/* применение изменения, когда мышка наведена на элемент */
.element:hover {
  opacity: 0.5;
}

🛠 Рекомендуется отключать will-change сразу после того, как закончится изменение элемента. Поэтому лучше назначать это свойство через JavaScript. Если назначить его через CSS, его невозможно будет убрать после выполнения изменения и оно будет продолжать расходовать ресурсы.

Иногда will-change допускается назначать через CSS. Это относится к часто используемым элементам (например, анимация кнопки или сайдбара) и к изменениям, которые происходят на странице постоянно (например, анимация, которая происходит при движении курсора мышки).

👉 @frontendInterview

Что делать, если устал быть фрилансером, а в найм не берут?

«Я мечтал быть свободным, а стал уставшим неврастеником» — такую фразу мне сказал Сергей на консультации. За его плечами — 4 года успешного фриланса в digital-сфере. В его кейсах — известные бренды, хорошие деньги и полная свобода. А ещё — отсутствие выходных, тревога, скачки дохода и выгорание. Он захотел «назад в офис», но получал вежливые отказы или полный игнор.

К сожалению, это довольно частая история. Фриланс — крутая ступень развития, но далеко не всегда конечная точка. Многие рано или поздно хотят вернуться в найм, и сталкиваются с рядом проблем. Давайте разберёмся, почему так происходит, и что с этим делать.

Почему люди вообще устают от фриланса? Причин на то несколько.

👉 @frontendInterview

Обычный еженедельный созвон

👉 @frontendInterview

​Можно ли перезапустить остановленный promise?

Нет, Promise в JavaScript нельзя перезапустить. Промисы являются одноразовыми: после того как они переходят в одно из состояний — выполнен (resolved) или отклонён (rejected) — их состояние больше не может измениться. Это одно из ключевых свойств промисов.

Почему нельзя перезапустить Promise?
- Промис, как только выполняется, становится иммутабельным. После выполнения (resolve) или отклонения (reject), он остаётся в этом состоянии навсегда.
- Промисы предназначены для представления единственного результата асинхронной операции. Их дизайн не предполагает повторного запуска той же самой асинхронной логики.

const myPromise = new Promise((resolve, reject) => {
  resolve('Done!');
});

myPromise.then((result) => console.log(result)); // "Done!"

// Даже если вы попытаетесь вызвать resolve или reject снова, ничего не произойдет
myPromise.then((result) => console.log(result)); // "Done!" (результат уже закеширован)

Что делать, если нужно "перезапустить" асинхронную операцию?
Если вы хотите выполнить операцию заново, вместо "перезапуска" Promise нужно создать новый Promise или использовать функцию, которая возвращает новый Promise каждый раз.

function createPromise() {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve('Я новый промис!'), 1000);
  });
}

// Первый вызов
createPromise().then((result) => console.log(result)); // "Я новый промис!"

// "Перезапуск"
createPromise().then((result) => console.log(result)); // "Я новый промис!" (новый промис создан)

Как это сделать с использованием `async/await`?
Это синтаксический сахар над промисами. Если вам нужно "перезапустить" асинхронную операцию, просто вызовите асинхронную функцию ещё раз.

async function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => resolve('Данные загружены!'), 1000);
  });
}

async function main() {
  const data1 = await fetchData();
  console.log(data1); // "Данные загружены!"

  const data2 = await fetchData(); // "Перезапуск" fetchData
  console.log(data2); // "Данные загружены!"
}

main();

Повторная попытка выполнения промиса (ретрай)
Если вам нужно повторно попытаться выполнить операцию (например, в случае неудачи), можно реализовать "ретрай". Это особенно полезно для операций вроде сетевых запросов.

function fetchDataWithRetry(retries) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() > 0.7) { // 70% шансов на ошибку
        resolve('Данные успешно загружены!');
      } else {
        reject('Ошибка загрузки данных');
      }
    }, 1000);
  }).catch((error) => {
    if (retries > 0) {
      console.log(`Повторная попытка... Осталось: ${retries}`);
      return fetchDataWithRetry(retries - 1); // Рекурсивный вызов
    } else {
      throw error; // Если попытки исчерпаны, выбрасываем ошибку
    }
  });
}

fetchDataWithRetry(3)
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

👉 @frontendInterview

Не заставляйте меня думать. Веб-юзабилити и здравый смысл

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

👉 @frontendInterview

Проверка объединенных строк

На собеседовании вам предстоит написать алгоритм, проверяющий, может ли строка(s), быть сформирована из двух других строк, part1 и part2.

Ограничение состоит в том, что символы в part1 и part2 должны располагаться в том же порядке, что и в s.

Пример:

'xcyc', 'xc', 'yc' —> // true
'xcyc', 'yc', 'xc' —> // true
'codewars', 'code', 'wars' —> // true
'codewars', 'cdwr', 'oeas' —> // true
'codewars', 'code', 'code' —> // false

👉 @frontendInterview

​Что такое z-index?

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

Ключевые аспекты:
1. Работает только для элементов, у которых свойство position установлено как relative, absolute, fixed, или sticky. Для элементов с position: static (значение по умолчанию) z-index не применяется.

2. z-index может принимать целые числа (включая отрицательные), где элементы с более высоким значением будут находиться выше элементов с более низким значением.

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

4. Значение по умолчанию для него — auto. Это означает, что элемент наследует порядок наложения своего родителя и не создаёт новый контекст наложения.

.background {
  position: absolute;
  z-index: 1; /* Задний фон /
}

.foreground {
  position: absolute;
  z-index: 2; / Передний план */
}

В этом примере элемент с классом .foreground будет отображаться поверх элемента с классом .background из-за более высокого значения z-index.

Важно помнить:
- Элементы с более высоким z-index иногда могут блокировать доступ к элементам с более низким z-index, например, при попытке взаимодействия с формой или кнопками.
- Безумное использование высоких значений z-index (например, z-index: 99999) может привести к сложностям с поддержкой и отладкой кода. Лучше использовать умеренные значения и хорошо продуманную структуру наложения.
- Порядок элементов в HTML также влияет на их наложение. По умолчанию, элементы, которые идут позже в коде, будут располагаться поверх элементов, расположенных ранее, если их z-index не изменён.

👉 @frontendInterview

Меню для отзывчивого интерфейса без скриптов

Простое и понятное меню навигации — важнейшая часть удобного интерфейса. Отзывчивость меню тоже критична, ведь сейчас более половины всего интернет-трафика приходится на мобильные устройства.
В подходе mobile-first разработка начинается с самого маленького экрана — мобильного, и по мере увеличения ширины добавляются новые стили и элементы. В итоге страница автоматически подстраивается под размер окна браузера.
Хотя адаптивное меню — ключевой элемент хорошего UX, для его реализации не обязательно использовать JavaScript. В этом руководстве мы покажем, как сделать отзывчивое mobile-first меню только с помощью HTML и CSS.

👉 @frontendInterview

Автовыведение типов в TypeScript: мощь дженериков и функций

Я уже более 7 лет активно использую TypeScript, применяя его в самых разных сценариях — от простых типизированных переменных до сложных условных типов и интерполяции. Однако TypeScript продолжает удивлять: сегодня я открыл для себя ещё один элегантный сценарий использования автовыведения типов в дженериках и функциях.

В этой статье разберём, как TypeScript автоматически выводит типы в дженериках на примере функции fetchFile из моего кода.

👉 @frontendInterview

Формошлёп — сотни хаков для фронтендеров в одном месте

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

👉 Подписывайся на @frontbox — стань тем, кто знает, как решить проблему, пока остальные ищут ответ на Stack Overflow.