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/

Вышла Node.js 22 / Хабр
https://habr.com/ru/news/810371/

Из мира фронтенда. Я тут вышел из комы, и оказывается, уже во всех основных браузерах работает popover API (https://developer.mozilla.org/en-US/docs/Web/API/Popover_API )

Его можно использовать для менюшек, всплывашек, тостов, диалогов и тд.

Поповеры всегда наверху, независимо от z-index

Клик вне поповера или esc его закрывает.

И тд.

Т.е. на голом html и css можно делать интересные вещи.

Вот примеры:

https://mdn.github.io/dom-examples/popover-api/

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

JSDoc как альтернативный синтаксис TypeScript: обширное руководство по типизации JavaScript-кода для тех, кто по каким-либо причинам не может полноценно использовать TypeScript для написания кода, но может использовать его для тайпчекинга JS-файлов → https://alexharri.com/blog/jsdoc-as-an-alternative-typescript-syntax