Новые функции CSS (mod, round) или как сделать анимированные Sprite Sheet без JS

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

Ссылка

#css

await vs yield на примере Effection 3.0 и React

18 декабря 2023 года вышел релиз Effection 3.0 - типизированная альтернативна async/await на генераторах (Structured Concurrency and Effects for JavaScript).

В статье сравним подходы на генераторах и async/await и расскажу как использовать Effection в React для решения типичных проблем с асинхронным кодом:

- Race condition

- AbortController

- Clean up

- Debounce

Ссылка

#статьи

Оптимизация приложений на React важна для улучшения производительности и пользовательского опыта. Вот несколько ключевых принципов и техник оптимизации в React:

1. Использование React.memo
React.memo используется для предотвращения ненужных повторных рендеров функциональных компонентов, если их пропсы не изменились.

const MyComponent = React.memo(function MyComponent(props) {
  // Component logic
});

2. Правильное использование useMemo и useCallback
Эти хуки помогают предотвратить выполнение тяжелых вычислений или создание функций при каждом рендере.

useMemo мемоизирует значение:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useCallback мемоизирует функцию:

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

3. Разделение кода (Code Splitting)
Разделение кода позволяет загружать только необходимые части приложения. Это можно сделать с помощью React.lazy и Suspense.

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <OtherComponent />
    </Suspense>
  );
}

4. Динамическая загрузка (Dynamic Import)
Позволяет загружать модули по мере необходимости, что уменьшает начальный размер бандла.

import(/* webpackChunkName: "moduleA" */ './moduleA').then(module => {
  // Использование модуля
});

5. Избегание анонимных функций и стрелочных функций в пропсах
Создание новых функций при каждом рендере может приводить к ненужным рендерингам потомков.

// Вместо этого:
<MyComponent onClick={() => doSomething()} />

// Используйте:
const handleClick = useCallback(() => doSomething(), []);
<MyComponent onClick={handleClick} />

6. Оптимизация рендеров с помощью shouldComponentUpdate и PureComponent
Для классовых компонентов можно переопределить shouldComponentUpdate или использовать PureComponent, который автоматически выполняет поверхностное сравнение пропсов и состояния.

class MyComponent extends React.PureComponent {
  render() {
    return <div>{this.props.value}</div>;
  }
}

7. Избегание большого количества состояний и контекста
Старайтесь не создавать много состояний на уровне компонентов. Вместо этого объединяйте связанные состояния в одно, чтобы уменьшить количество рендеров.

const [state, setState] = useState({
  name: '',
  age: 0,
  address: ''
});

// Изменение состояния:
setState(prevState => ({ ...prevState, name: 'John' }));

8. Профилирование и анализ производительности
Используйте инструменты, такие как React Profiler, для анализа производительности вашего приложения и выявления узких мест.

9. Оптимизация загрузки изображений
Загружайте изображения асинхронно и используйте техники, такие как lazy loading для изображений, чтобы не блокировать рендеринг.

10. Использование производительных библиотек и инструментов
Используйте проверенные и оптимизированные библиотеки, такие как react-window или react-virtualized для рендеринга больших списков.

Эти принципы и техники помогут вам создать более производительные и отзывчивые приложения на React.

Решение задач Front End с интервью. Throttle

Задача на реализацию Throttling часто дается на интервью по front end разработке.

Давайте реализуем функцию throttle, которая принимает функцию callback и время ожидания. Вызов throttle() должен возвращать новую функцию, которая будет вызывать внутри себя callback функцию.

Ссылка

#js

Решение задач Front End с интервью. Promise Pool

Разбираем задачу Promise Pool (Leetcode 2636)

Дан массив асинхронных функций functions и максимальный размер пула n. Необходимо написать асинхронную функцию promisePool. Она должна возвращать Promise, который разрешается, когда разрешаются все входные функции function.

Ссылка

#js

JavaScript: структуры данных и алгоритмы. Часть 1

В этой серии статей мы будем разбирать структуры данных и алгоритмы, представленные в этом замечательном репозитории.


Сегодня мы будем говорить о самых простых и популярных структурах данных: односвязном и двусвязном списках, стеке и очереди.


Код, представленный в этой и других статьях серии, можно найти в этом репозитории.

Ссылка

#js

Как узнать количество перерисовок? React Custom Hook: useRenderCount

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

Ссылка

#react

Что такое атрибут key? Для чего он нужен?

Key помогает React определять, какие элементы были изменены, добавлены или удалены. Key нужен для лучшего определения порядка элементов в списке.

Key всегда должен присваивается на верхнем уровне:

Правильно:

const howUseKey = () => {
  const array = [1, 2, 3];
  return (
    <div>
      {array.map((item) => (
        <div key={item}>{item}</div>
      ))}
    </div>
  );
};

Неправильно (Приглядитесь к its a trap):

const howNotUseKey = () => { 
 const array = [1, 2, 3];
  return (
    <div>
      {array.map((item) => (
        <div className="its a trap">
          <div key={item}>{item}</div>
        </div>
      ))}
    </div>
  );
};

Если использовать индекс массива или другие значения которые могут меняться, то мы можем получить неприятные баги. Лучше всего использовать уникальный id объекта.

Более подробно про key можете прочитать здесь

Кэширование кода в веб-приложениях

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

Ссылка

#статьи

Отличия Function components от class components?

Основные отличия это:

1) Классовые компоненты медленнее, из-за большого количества встроенных методов
2) Классовые компоненты имеют больше методов жизненного цикла
3) Множество синтаксических различий

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

Получается можно забыть про классовые компоненты?

Да, в реальном коде почти нет ситуаций когда классовый компонент будет лучше функционального, можно вспомнить про error boundary, который для своей реализации требует метод из классового компонента, но в противовес есть сторонние библиотеки, реализующие нужное поведение под капотом, или можно зайти на официальный сайт React и скопировать классовый компонет error boundary, и немного его поправить под себя, какой то специфичной логики там нет.
Вот ссылка на Error boundary, если интересно https://ru.react.js.org/docs/error-boundaries.html

🔧 CSS Grid — создание сложных макетов с минимальными усилиями

🎨 CSS Grid — мощный инструмент для создания сложных макетов, который значительно упрощает работу с версткой.

💡 Основные концепции:

- Grid Container — контейнер, в котором работает - сетка.
- Grid Items — элементы, расположенные внутри контейнера.
- Grid Lines — линии, определяющие структуру сетки.

🌐 Пример простого макета с Grid:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.item {
  background-color: #f4f4f4;
  padding: 20px;
  text-align: center;
}

⏩ Результат: Макет с тремя равными колонками, разделенными отступами. CSS Grid упрощает создание адаптивных макетов без сложных вычислений.

📘 Полезные ресурсы:

CSS Grid Garden — Интерактивная игра для изучения CSS Grid. Отличный способ закрепить теорию на практике в игровой форме.

MDN Web Docs: CSS Grid Layout — Документация от Mozilla. Включает описание всех свойств, связанных с CSS Grid, с примерами и детальными объяснениями.

⚛️ Продвинутые концепции React: Хуки, Контекст и Оптимизация производительности


Конечно! Вот пост для более продвинутых разработчиков, посвященный углубленным темам и современным подходам в React.

⚛️ Продвинутые концепции React: Хуки, Контекст и Оптимизация производительности

🔥 Если вы уже знакомы с основами React, пришло время углубиться в более сложные концепции, которые помогут создавать более гибкие и производительные приложения.

🔄 React Hooks: Революция в управлении состоянием и побочными эффектами
Hooks, представленные в React 16.8, позволили отказаться от классовых компонентов в пользу функциональных, сохраняя при этом все возможности управления состоянием и жизненным циклом компонента.

- useState: Позволяет добавлять состояние в функциональные компоненты.
- useEffect: Управляет побочными эффектами, такими как подписки, API-запросы и манипуляции с DOM.
- useMemo и useCallback: Оптимизируют производительность, предотвращая ненужные рендеры и создания функций.

const MyComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

  const increment = useCallback(() => setCount(count + 1), [count]);

  return <button onClick={increment}>Click me</button>;
};

🌐 React Context: Управление глобальным состоянием

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

Создание контекста: const MyContext = React.createContext(defaultValue);
Использование в компонентах: const value = useContext(MyContext);
Контекст полезен, когда нужно избежать "prop drilling", но важно помнить, что его чрезмерное использование может усложнить отладку и понимание кода.

⚡️ Оптимизация производительности: Мемоизация, разделение кода и Concurrent Mode

Для повышения производительности приложений на React важно учитывать несколько ключевых аспектов:

Мемоизация с React.memo, useMemo, useCallback — предотвращает повторные рендеры, если пропсы или состояние не изменились.

Code Splitting с помощью React.lazy и Suspense — позволяет загружать компоненты по мере необходимости, снижая начальный вес приложения.

Concurrent Mode — новый подход к рендерингу, позволяющий React выполнять задачи без блокировки пользовательского интерфейса.

🛠 Типичные ошибки в React и как их избежать

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

Неправильное использование состояния
❌ Изменение состояния напрямую (например, this.state.value = newValue).
✅ Всегда используйте setState или useState для обновления состояния.

Отсутствие ключей в списках
❌ Не использовать key или использовать индексы массива в качестве ключей.
✅ Применяйте уникальные идентификаторы для key, чтобы React мог эффективно управлять DOM.

Неоптимизированные рендеры
❌ Рендеринг больших списков без оптимизации.
✅ Используйте React.memo, useMemo или виртуализацию списков (например, с react-window).

Неправильное использование useEffect
❌ Оставление зависимости пустой при необходимости.
✅ Всегда указывайте зависимости в массиве, чтобы избежать нежелательных побочных эффектов.

💡 Избегая этих ошибок, вы сможете сделать свои React-приложения более надежными и производительными!

🎨 Тренды в дизайне UI/UX 2024

🚀 UI/UX дизайн постоянно развивается, и важно быть в курсе актуальных трендов, чтобы создавать современные и удобные интерфейсы. Вот что будет популярно в 2024 году:

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

Морфизм в интерфейсах
🧊 Neumorphism и Glassmorphism возвращаются, придавая интерфейсам мягкие тени и полупрозрачные слои.

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

Суперадаптивные интерфейсы
📱 Гибкость на всех устройствах — от больших мониторов до маленьких экранов умных часов. Дизайн должен быть адаптивным и настраиваемым.

Zero UI
🗣 Интерфейсы без экрана, например, голосовые ассистенты или интерфейсы, управляемые жестами.

👨‍🎨 Следуя этим трендам, вы сможете создавать интерфейсы, которые будут не только стильными, но и удобными для пользователей.

🔍 Дебаггинг в React — лучшие практики

🛠 Дебаггинг в React может быть сложной задачей, особенно когда приложение становится большим и сложным. Вот несколько лучших практик, которые помогут вам быстрее находить и устранять баги:

React Developer Tools
🔧 Используйте официальное расширение для браузера, чтобы исследовать дерево компонентов, следить за состоянием и пропсами.

Логгирование состояния и пропсов
📝 Используйте console.log, чтобы отслеживать состояние и пропсы. Можно подключить более продвинутые инструменты, такие как redux-logger.

Использование Error Boundaries
🚧 Создайте компоненты Error Boundary, чтобы отлавливать ошибки на уровне компонентов и предотвращать падение всего приложения.

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

Storybook
📚 Storybook помогает изолировать и тестировать компоненты вне контекста приложения. Отличный способ проверить логику и дизайн отдельных компонентов.

⚠️ Совет: Всегда разбивайте большой компонент на более мелкие части. Это не только упрощает поддержку, но и облегчает дебаггинг!

🎨 Дизайн для доступности: основные принципы и инструменты

♿️ Доступность (Accessibility) — важный аспект веб-дизайна, обеспечивающий удобный доступ к вашему контенту для людей с ограниченными возможностями. Вот основные принципы и инструменты для улучшения доступности:

🔑 Основные принципы:

Семантическая разметка
Используйте правильные HTML-теги (<header>, <nav>, <main>, <footer>) для лучшего восприятия вашего контента скрин-ридерами.

Контраст и читаемость
Убедитесь, что текст хорошо читаем на фоне (достаточный контраст) и используйте большие шрифты.

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

Навигация с клавиатуры
Убедитесь, что все элементы интерфейса можно навигировать и активировать с помощью клавиатуры.

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

🔧 Полезные инструменты:
WAVE — онлайн-инструмент для проверки доступности веб-страниц.
axe — расширение для браузеров, которое помогает находить и исправлять проблемы с доступностью.
Color Contrast Checker — инструмент для проверки контраста текста и фона.

🛠 Интеграция принципов доступности в ваши проекты сделает их более инклюзивными и удобными для всех пользователей.