Понимание SVG путей

В своем блоге Нанда Шахрасяд опубликовала гайд по использованию атрибута d в SVG путях.

Атрибут d может выглядеть как магическое заклинание, но на самом деле он представляет из себя серию команд, которая говорит браузеру как должен быть отрисован путь.

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

Во всех темах есть интерактивные примеры и самостоятельные задания на практику.

https://www.nan.fyi/noscript-paths

Галерея D3.js графиков на React

React Graph Gallery – примеры графиков с использованием D3.js и React. Каждый пример разобран по шагам и сопровождается объяснением использования API. Для анимаций в некоторых примерах используется react-spring.

Хорошая подборка наиболее популярных типов графиков, которые можно самостоятельно кастомизировать, используя D3.js.

https://www.react-graph-gallery.com/

Демистификация RSC с NextJS 13 App Router

Туториал, объясняющий как работает React Server Components в NextJS. Туториал рассчитан на последовательное прочтение глав, начиная от базовых вещей и заканчивая более продвинутым материалом. В туториале объясняется что такое RSC, как он интегрируется с клиентскими компонентами, почему может возникнуть ошибка гидратации и т.д.

Сам сайт туториал сделан упрощенно специально. Автор предлагает склонировать репозиторий с туториалом и проходить его локально, изучая RSC на практике.

https://demystifying-rsc.vercel.app/

MDX Editor – редактор markdown разметки

Автор библиотеки react-virtuoso, Петьо Иванов, представил библиотеку MDX Editor – редактор markdown разметки. Особенность этого markdown редактора в том, что он поддерживает WYSIWYG режим. Кроме этого редактор поддерживает:

- Блоки кода с предварительным просмотром с помощью Sandpack.
- Поддержка таблиц, изображений, кастомизации тулбара.
- Возможность отображения diff изменений.

https://mdxeditor.dev/

React Query и React Context

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

Доминик Дорфмайстер в своем блоге разобрал пример использования React Query вместе с React Context. Например, есть компонент <ProductTable>, который использует хук useCurrentUserQuery для получения информации о пользователе. Внутри есть компонент UserNameDisplay, который отображает имя пользователя и рендерится, только если пользователь существует. Если не использовать проп-дриллинг, а только React Query, то в компоненте UserNameDisplay переменная data из хука useCurrentUserQuery со стороны TypeScript будет обозначаться как потенциальная undefined. Но мы знаем, что она не undefined и хотим использовать ее без ненулевого оператора утверждения.

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

const CurrentUserContext = React.CreateContext<User | null>(null)

export const useCurrentUserContext = () => {
  const currentUser = React.useContext(CurrentUserContext)
  if (!currentUser) {
    throw new Error('CurrentUserContext: No value provided')
  }

  return currentUser
}

export const CurrentUserContextProvider = ({
  children,
}) => {
  const currentUserQuery = useCurrentUserQuery()
  // --snip--
  return (
    <CurrentUserContext.Provider value={currentUserQuery.data}>
      {children}
    </CurrentUserContext.Provider>
  )
}

https://tkdodo.eu/blog/react-query-and-react-context

React95 – UI библиотека вдохновленная Windows 95

React95 – это полноценная UI библиотека в стилистике Windows 95. В ней есть все основные UI элементы, а что самое главное – она не заброшена, а развивается, судя по репозиторию в Github.

Помимо UI библиотеки есть отдельные проекты с React95, например тема для Gatsby в стиле Windows 95.

https://github.com/React95/React95
https://react95.github.io/React95/?path=/story/all--all

Кастомный хук для переходов без мерцаний

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

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

export function useDataTransition<T>(
  real: T,
  inTransition: boolean,
  timeout: number
) {
  const [timeExpired, setTimeExpired] = useState(false)
  const cache = useRef(real)

  useEffect(() => {
    if (!inTransition) cache.current = real
  }, [inTransition, real])

  useEffect(() => {
    let id: number
    if (inTransition) {
      id = setTimeout(() => setTimeExpired(true), timeout)
    } else {
      setTimeExpired(false)
    }
    return () => clearTimeout(id)
  }, [inTransition, timeout])

  if (inTransition && !timeExpired) return cache.current
  else return real
}

https://www.jameskerr.blog/posts/use-data-transition/

Vaul – базовый drawer компонент

Под капотом компонент использует примитив Dialog от UI библиотеки Radix. На странице в github есть несколько примеров использования.

import { Drawer } from 'vaul';

function MyComponent() {
  return (
    <Drawer.Root>
      <Drawer.Trigger>Open</Drawer.Trigger>
      <Drawer.Portal>
        <Drawer.Content>
          <p>Content</p>
        </Drawer.Content>
        <Drawer.Overlay />
      </Drawer.Portal>
    </Drawer.Root>
  );
}

https://vaul.emilkowal.ski/

“Помогите, я Джун!”

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

Давайте вместе разбираться в том:
- как войти и остаться в IT,
- как не перегореть,
- как достигать своих профессиональных и карьерных целей,
- как стать и оставаться востребованным и крутым айтишником.

Мы вместе с гостями хотим делиться с вами нашим опытом и накопленными знаниями. И будем рады вашим вопросам, предложениям и замечаниям)

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

https://news.1rj.ru/str/+SJQPyQhe-ZVkNDQy

Истоки JSX и почему он существует

JSX  – это JavaScript с синтаксическими приемами, облегчающими представление HTML. Это похоже на Sass, который транспилируется в CSS.

Чтобы написать простой HTML код с помощью JS, потребуется много кода. Чтобы упростить написание HTML кода на JavaScript, появилась библиотека HyperScript:

const h = require("hypernoscript");
document.body.appendChild(
 h("div", { id: "content" },
  h("div", { id: "child" },
   h("p", null, "text")
  )
 )
);

Но такой код сложно читать и понимать. Для решения данной проблемы появился JSX. Он позволяет писать код похожий на HTML и транспилируется в JS. Например:

const el = (
 <div id="content">
  <div id="child">
   <p>text</p>
  </div>
 </div>
);

// Транспилируется в следующий код:

const el = (React.createElement("div", { id: "content" },
 React.createElement("div", { id: "child" },
  React.createElement("p", null, "text"))));

Код похож на HyperScript, вместо h используется React.createElement. В TypeScript это можно изменить. Есть параметр jsxFactory, с помощью которого можно изменить JS функцию создания элемента. Например, можно использовать h из preact вместо React.createElement по умолчанию.

https://dodov.dev/blog/origins-of-jsx-and-why-it-exists

Все что я хотел бы знать перед миграцией на RSC

В блоге Mux вышла статья с фидбеком по миграции проекта на RSC. В ней автор рассказывает с чем столкнулись во время миграции и дает советы по использованию RSC.
Основные проблемы, которые отмечены в статье:
- Отсутствие поддержки CSS-in-JS.
- Не работает React Context в серверных компонентах.
- Дополнительная сложность в разработке при использовании RSC.

Миграция была проведена поэтапно. Сначала добавьте директиву "use client" в корне приложения. Потом переместите директиву "use client" как можно ниже по дереву. Если возникают проблемы с производительностью, то используйте Suspense и старайтесь большие библиотеки использовать на сервере.

https://www.mux.com/blog/what-are-react-server-components

Частично контролируемые компоненты

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

В React есть контролируемые и неконтролируемые компоненты:

- неконтролируемые компоненты управляют изменениями внутри себя.
- контролируемые компоненты управляются снаружи, извне.

В реальных проектах встречаются компоненты, которые могут управляться внутри себя, если не передано управление извне. Например tanstack-table:

const table = useReactTable({
  data,
  columns,
  state: {
    columnVisibility, // видимость
    columnOrder, // порядок
  },
  onColumnVisibilityChange: setColumnVisibility, // установка видимости
  onColumnOrderChange: setColumnOrder, // установка порядка
});

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

https://www.jameskerr.blog/posts/partially-controlled-react-components/

Использование SVG спрайта в React

В своем блоге Джейкоб Пэрис объясняет, как использовать SVG спрайт с иконками в React приложении. Каждая иконка спрайта хранится как <symbol> внутри noscript файла. Мы можем отображать иконку, используя тег <use>.

Чтобы создать SVG спрайт, нужно добавить SVG иконки. Чтобы добавить отдельные SVG иконки из библиотек, можно использовать утилиту sly-cli:

npx @sly-cli/sly add @radix-ui/icons camera card-stack

Эта команда скачает и добавит иконки camera и card-stack из библиотеки @radix-ui/icons.

Для создания SVG спрайта из отдельных иконок и генерации типов Джейкоб Пэрис поделился примером скрипта. Пример компонента иконки:

import { type SVGProps } from "react"
import spriteHref from "~/app/components/icons/sprite.noscript"
import { type IconName } from "~/app/components/icons/names.ts"

export function Icon({
  name,
  ...props
}: SVGProps<SVGSVGElement> & {
  name: IconName
}) {
  return (
    <noscript {...props}>
      <use href={`${spriteHref}#${name}`} />
    </noscript>
  )
}

https://www.jacobparis.com/content/noscript-icons

Опыт перехода пакетов на ESM

Марк Эриксон, один из разработчиков Redux, делится своим опытом перехода пакетов на ESM. По его словам в интернете нет единого авторитарного гайда по переходу пакетов на ESM. Свою статью он не делает гайдом, а рассказывает в ней, с какими трудностями и испытаниями пришлось столкнуться при переходе пакетов на ESM.

Также автор поделился инструментами, которые использует в разработке:
- release-it: автоматизация публикации пакетов в NPM.
- yalc: позволяет локально проверить работу пакетов, установить их без npm link.
- publint.dev: проверяет правильно ли собран пакет для работы с популярными бандлерами.
- arethetypeswrong.github.io: анализирует экспорт пакета для проверки совпадения TS типов и JS файлов.
- tsup: бандлер TS библиотек.

https://blog.isquaredsoftware.com/2023/08/esm-modernization-lessons/

Создание UI библиотеки с помощью веб-компонентов React

С помощью React можно создать универсальную UI библиотеку, которую можно использовать в любом фреймворке и веб приложении с помощью веб компонентов. Основная концепция заключается в написании обычного компонента на React и компиляции его в веб-компонент с помощью обертки в сочетании с Preact Custom Element.

В случае с UI библиотекой Preact может заменить React, и у него есть преимущество в размере: он меньше React и в нем нет ничего лишнего.

По заявлению автора статьи, чтобы использовать события компонента и добавить стили, простое использование Preact Custom Element не подходит и нужна доработка. Поэтому авторы создали кастомизированную версию preact-custom-element, которая позволяет добавить события и стили.

https://www.voorhoede.nl/en/blog/building-design-system-react-web-components/

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

Дэйв Руперт в своем блоге поделился мнением, почему веб-компоненты не популярны и ими мало кто пользуется:

- Слишком низкоуровневый, рассчитан на авторов фреймворков. Однако переход на Shadow DOM и инкапсуляция стилей нарушают соглашения, принятые в фреймворках.
- Проблемы с маркетингом.
- Трудно инвестировать во что-то неизвестное. Не хватает материалов и кейсов использования веб-компонентов, из-за чего сложно сделать выбор в его пользу.
- Полная поддержка веб-компонентов в браузере появилась не так давно.
- Веб-компоненты медленно развиваются. Если вы ждете какую-то фичу, то полной поддержки во всех браузерах порой придется ждать два года.

https://daverupert.com/2023/07/why-not-webcomponents/

Функция createStateContext, чтобы поделиться хуком useState

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

const [CheckboxContext, useCheckboxContext] =
  createStateContext<string[]>()

// опционально для отладки ошибок
CheckboxContext.displayName = "CheckboxContext"

function CheckboxGroup({ children }) {
  const state = useState<string[]>([])
  return (
    <CheckboxContext.Provider value={state}>
      {children}
    </CheckboxContext.Provider>
  )
}

https://www.jacobparis.com/content/use-state-context

Оптимизация Next.js приложения

На Хабре вышла статья с советами по уменьшению размера бандла и оптимизации загрузки сайта для существующего проекта на Next.js. Какие стоит предпринять шаги:

- Удалите код, который не используется. Для поиска такого кода можно использовать TS-Prune.
- Удалите неиспользуемые npm пакеты используя Depcheck.
- Удалите дублирующие npm пакеты с разными версиями. Бывают случаи, когда помогает обновление версии по единой.
- Используйте next/image и современные форматы изображений avif и webp.
- Используйте стандартный механизм разбиения кода на чанки в Next.js.

https://habr.com/ru/articles/754684/

React Suspense в трех разных архитектурах

Изначально Suspense использовался как способ отобразить спиннер во время ленивой загрузки компонента. С релизом React 18 появились новые способы использования Suspense. Причем в разной архитектуре Suspense играет разную роль:

- Рендеринг на стороне клиента: показ заглушки во время ленивой загрузки компонента; декларативная обработка загрузки/ошибки во время получения данных в дочерних компонентах, например через react-query.

- Рендеринг на стороне сервера: все что выше + компоненты отрендеренные на сервере и обернутые в Suspense, выборочно гидратируются на клиенте.

- Серверные компоненты: все что выше + асинхронные серверные компоненты, обернутые в Suspense, передаются клиенту поэтапно: сначала заглушка, потом содержимое.

https://elanmed.dev/blog/suspense-in-different-architectures

Передозировка useMemo

Разработчики склонны злоупотреблять useMemo и даже не могут адекватно объяснить, почему они это делают. В своем блоге Эдвин Антонов поделился мнением по поводу того, когда стоит использовать useMemo. Если кратко:

- Сначала профилируйте, потом оптимизируйте. Профилируйте сначала производительность, чтобы выявить узкие места, а потом оптимизируйте компонент.

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

- Следите за тем, чтобы зависимости useMemo были точными.

https://edvins.io/usememo-overdose

Релиз Astro 3.0

Вышел релиз Astro 3.0. Вот основные изменения:

- Поддержка нативного View Transition. Это браузерное API для создания плавных переходов между страницами, как в SPA. В Astro можно добавить плавные переходы на сайт всего лишь двумя строчками кода. Для поддержки старых браузеров, Astro добавляет небольшой фолбек скрипт.

- Более быстрый рендер. Astro стал рендерить на 30% быстрее для большинства компонентов.

- Оптимизация изображений. При использовании встроенного компонента <Image>, Astro будет оптимизировать переданное в src изображение: переводит изображение в формат WebP и устанавливает ширину/высоту для предотвращения смещения макета (CLS).

- Улучшение в SSR для Serverless.

- Улучшение в HMR для JSX.

- Оптимизация сборки: автоматическая минификация HTML, ID компонентов в data атрибутах, встраивание небольших блоков стилей в HTML для более быстрой загрузки.

https://astro.build/blog/astro-3/