​​👤«Подождите, не успеваю записывать код …». Я слушал это пару лет и в итоге написал раздатчик изменений кода для студентов

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

Читать...

​​👤Почему PASETO лучше для аутентификации, чем JWT

В этой статье мы рассмотрим PASETO — токен, который был разработан для замены JWT.

Читать...

2023 JavaScript Rising Stars

Есть такой проект, в котором уже восьмой раз собираются тренды из мира JavaScript по анализу звёздочек на GitHub за последние 12 месяцев. И в этом году снова интересные результаты.

- Среди всех проектов победил shadcn/ui — библиотека React-компонентов со стилизацией на Tailwind CSS.
- На втором месте Bun — тулкит для всего, который в сентябре прошлого года был залайкан неприличное количество раз. В 2022 году он был вообще на первом месте.
- На 3 и 4 месте утилиты для рисования и вайтбординга в браузере Excalidraw и tldraw.
- Среди фронтенд-фреймворков выделяется htmx — программирование на html-атрибутах. Пока только второе место, но React догоняет уверенно.
- В бэкенде всё ещё впереди всех Next.js, несмотря на все интриги и критику сообщества.
- В мобильной разработке лидирует Expo. Про него не слышал, но он смог совсем чуть-чуть, но всё же обогнать React Native по звёздочкам. В 2022 году он был далеко на втором месте.
- Для стилизации самое большое количество звёздочек у Tailwind CSS.
- Для тестирования большинство людей выбирают Playwright.
- Появилась отдельная категория для AI-библиотек.
- Пропала категория GraphQL, уже не в тренде.

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

https://risingstars.js.org/2023/en

Подсветка кода на странице при помощи Custom Highlight API

Если вы встраивали показ кода на страницы своих сервисов, то скорее всего приходилось прикручивать и подсветку этого кода, чтобы были красивые цвета у разных наборов токенов, как в любимом IDE. Для этого есть много готовых библиотек, так что сложности особой нет. Но все эти библиотеки сейчас создают большое количество span с набором классов для стилизации.

Брамус показывает, как можно применять современный Custom Highlight API, чтобы не создавать span для стилизации в принципе. Это такая апишка, которая уже работает в Chrome 105 и Safari 17.2. И она позволяет при помощи JavaScript разбивать текстовые узлы на набор параметризированных токенов. Как это делать в JS, лучше смотреть в самой статье. Но зато в CSS всё становится сильно приятнее:

::highlight(important) {
    color: red;
    font-weight: bold;
}

::highlight(attr) {
    color: violet;
}

Имена хайлайтов как раз задаются в JS.

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

https://www.bram.us/2024/02/18/custom-highlight-api-for-syntax-highlighting/

Интерактивный гайд по :has()

Ахмад Шадид в очередной раз выдал супер-подробный гайд. На этот раз про то, как работает родительский селектор :has(), с полезными примерами.

Что можно подсмотреть:
- Как правильно делать boolean-логику на основе has().
- Как радикально менять разметку на основе количества вложенных элементов (например, когда мало карточек — растягивать их на всю ширину, а когда много — рисовать плотно и колонками).
- Как делать фолбеки, если какого-то элемента нет (например, когда картинка товара есть — рисуем картинку, а когда нет — заранее подготовленный placeholder).
- Как изменять размеры контейнера на основе его содержимого (для маленьких виджетов резервировать поменьше места на сам контейнер в раскладке, для больших — побольше).
- Как сделать всплывашки и попапы, которые не перекрывают друг друга (очень хороший пример про GDPR-баннер и иконку чата с поддержкой, которые на большом количестве сайтов друг другу мешают).
- Как научить панель управления с кнопками визуально реагировать на наличие особенных кнопок внутри.
- Как сделать зависимые друг от друга инпуты (например, если значение select требует уточнения, рисуем инпут для этого уточнения).
- И многое другое.

Примеры из списка сразу хочется сделать на каком-нибудь React: затащить на клиент логику показа компонента в зависимости от пропсов, перерендерить при необходимости. Но в этом и огромное преимущество :has() — ему не нужны фреймворки. При помощи этого селектора и дисциплины в именовании классов можно творить самые настоящие «умные» компоненты без единой строчки JavaScript. А это и меньший клиентский бандл, и меньшее количество ререндерингов.

Напоминаю, что не стоит забывать про старые браузеры, которые в :has() пока не умеют. Но если ваш проект работает с вечнозелёными браузерами, то уже можно внедрять: https://caniuse.com/css-has.

https://ishadeed.com/article/css-has-guide/

Ретро-гейминг на Pico Pi: создаём свою Dendy / Хабр
https://habr.com/ru/articles/796987/

На собесе – соловей, на работе – бармалей. Почему на собеседовании кандидат один, а на деле – другой? / Хабр
https://habr.com/ru/articles/797699/

React, Vite and TypeScript: Get started in under 2 minutes

https://blog.nrwl.io/react-vite-and-typescript-get-started-in-under-2-minutes-3bd5cd836175

Collections are coo

https://nerdy.dev/collections-are-coo

Draw SVG rope using JavaScript

https://muffinman.io/blog/draw-svg-rope-using-javascript/

Лучшие практики по написанию тестов с React Testing Library

Правильно написанные тесты не только предотвращают ошибки в коде, но и в случае React Testing Library улучшают доступность компонента. В своем блоге Алекс Хоменко собрал лучшие практики по написанию тестов с React Testing Library, кратко о них:

- Использовать *ByRole селекторы. Они наиболее надежны и работают для многих элементов. Использование *ByRole селекторов приучают к написанию доступных компонентов. Пример:

it("should submit correct form data", async () => {
  /** --snip-- */

  await user.type(screen.getByRole("textbox", { name: "Name" }), "Test");
  await user.click(screen.getByRole("button", { name: "Sign up" }));

  /** --snip-- */
});

- Использовать userEvent вместо fireEvent для симуляции событий. Хотя fireEvent работает во многих случаях, это легкая обертка над dispatchEvent. Также, в новых версиях React Testing Library рекомендуется инициализировать userEvent перед использованием:

it("should save correct data on submit", async () => {
  /** --snip-- */
  const user = userEvent.setup();
 
  await user.type(screen.getByRole("textbox", { name: "Name" }), "Test");
  /** --snip-- */
});

- Использовать findBy* вместо waitFor. Бывают случаи, когда элемент, который пытаемся использовать, недоступен при первоначальном рендеринге и появится после получения данных из API. Для таких сценариев можно использовать асинхронный селектор findBy*, который внутри себя использует waitFor. Пример:

it("renders without breaking", async () => {
  render(<ListPage />);
  expect(
    await screen.findByRole("heading", { name: "List of items" }),
  ).toBeInTheDocument();
});

- Исправление ошибки Fixing the "not wrapped in act(...)" warnings. Одной из причин ошибки может быть использование getBy* вместо findBy*, поскольку рассматриваемый элемент или компонент обновляется после асинхронного действия.
Еще одна из причин данной ошибки может быть неправильная работа с таймерами. Если компонент использует таймеры, то используйте моки для таймеров (useFakeTimers).

https://claritydev.net/blog/improving-react-testing-library-tests

Продуктовый подход к pet-проекту или как я разработал музыкальное веб-приложение / Хабр
https://habr.com/ru/articles/803673/

Бэкапы для самых маленьких и матерых / Хабр
https://habr.com/ru/companies/selectel/articles/804183/

Состоялся релиз Bun 1.1 — среды выполнения JavaScript и TypeScript / Хабр
https://habr.com/ru/news/804665/

Мгновенная валидация форм

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

https://doka.guide/recipes/validation/

От «здравствуйте» до こんにちは: языки программирования не на английском языке / Хабр
https://habr.com/ru/companies/sberbank/articles/806051/

ESLint Config Inspector, добавленный в ESLint 9.0.0 визуальный инспектор правил из вашего конфига, призванный упростить исследование конфигураций с большим количеством оверрайдов и плагинов → https://eslint.org/blog/2024/04/eslint-config-inspector/