​Как работает 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.

Исторические кадры: джун устраивается на работу и показывает свои проекты

👉 @frontendInterview

​Какие популярные подходы и инструменты существуют для работы с Redux?

Для упрощения работы с Redux и повышения эффективности разработки вокруг него возникло несколько популярных подходов и инструментов. Эти подходы помогают решать типичные проблемы, связанные с бойлерплейтом, управлением асинхронными операциями и повторным использованием логики. Рассмотрим некоторые из них:

Redux Toolkit (RTK)
Это официальный инструмент, предназначенный для упрощения работы с Redux. Он предоставляет набор утилит, которые помогают сократить количество бойлерплейта при инициализации хранилища, создании редюсеров и действий. Он включает в себя такие функции, как configureStore, createReducer, createAction, и createSlice, которые значительно упрощают процесс работы с состоянием.

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

Redux Thunk
Это промежуточное программное обеспечение (middleware) для Redux, позволяющее диспетчеризации функций вместо действий. Это позволяет откладывать выполнение действия или диспетчеризировать только при выполнении определённых условий. Thunk часто используется для работы с асинхронными запросами.

Reselect
Это библиотека для создания "мемоизированных" селекторов. Селекторы позволяют вычислять производные данные, основываясь на состоянии Redux, и эффективно пересчитывать результаты только при изменении соответствующих частей состояния. Это улучшает производительность, особенно в сложных приложениях.

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

Immutable.js
Предоставляет коллекции неизменяемых данных, которые помогают эффективно работать со сложными структурами данных. Неизменяемость данных упрощает отслеживание изменений, повышает производительность приложения и упрощает разработку.

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

👉 @frontendInterview

You don't know JS - Замыкания и объекты

Каким бы опытом программирования на JavaScript вы ни обладали, скорее всего, вы не понимаете язык в полной мере. Это лаконичное, но при этом глубоко продуманное руководство познакомит вас с областями видимости, замыканиями, ключевым словом this и объектами – концепциями, которые необходимо знать для более эффективного и производительного программирования на JS. Вы узнаете, как и почему они работают, и как замыкания могут стать эффективной частью вашего инструментария разработки.
Как и в других книгах серии «Вы не знаете JS», здесь рассматриваются нетривиальные аспекты языка, от которых программисты JavaScript предпочитают держаться подальше. Вооружившись этими знаниями, вы достигнете истинного мастерства JavaScript.

👉 @frontendInterview

List Filtering

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

Пример

filter_list([1,2,'a','b']) == [1,2]
filter_list([1,'a','b',0,15]) == [1,0,15]
filter_list([1,2,'aasf','1','123',123]) == [1,2,123]

👉 @frontendInterview