Интерактивный гайд по :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/

Создание и использование защищенного SSH ключа

https://zencod.ru/articles/ssh-keygen/

Выкиньте свой husky / Хабр
https://habr.com/ru/articles/807763/

Локальный веб-сервер для разработки с помощью Docker / Хабр
https://habr.com/ru/companies/usetech/articles/808025/

Announcing AnalogJS 1.0 🚀 - DEV Community
https://dev.to/analogjs/announcing-analogjs-10-19an

Frontend внутри Bitrix. Использование и написание экстеншенов + SPA приложение на Vue или React / Хабр
https://habr.com/ru/articles/810581/