Заметка о хуке useSyncExternalStore

Еще один вариант хука useMediaQuery:

import { useCallback, useSyncExternalStore } from "react";

function useMediaQuery(query) {
  const subscribe = useCallback(
    (callback) => {
      const matchMedia = window.matchMedia(query);

      matchMedia.addEventListener("change", callback);
      return () => {
        matchMedia.removeEventListener("change", callback);
      };
    },
    [query]
  );

  const getSnapshot = () => {
    return window.matchMedia(query).matches;
  };

  const getServerSnapshot = () => {
    throw Error("useMediaQuery is a client-only hook");
  };

  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
}

export default useMediaQuery;

Примеры использования:

const isSm = useMediaQuery("(max-width : 768px)");
const isMd = useMediaQuery(
  "(min-width : 769px) and (max-width : 992px)"
);
const isLg = useMediaQuery(
  "(min-width : 993px) and (max-width : 1200px)"
);
const isXl = useMediaQuery(
  "(min-width : 1201px)"
);

Полное руководство по Remix. Часть 2

Спасибо, поправил.

Хранение токена доступа в сервис-воркере

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

Прокачиваем навыки CSS с помощью селектора :has()

Один из вариантов: https://www.npmjs.com/package/css-has-pseudo

Модальное окно на чистом CSS и JS

Простейшая модалка:

<dialog style="padding: 0">
  <div id="modal-box" style="padding: 1rem">
    <div>Modal content</div>
    <button id="close-modal-btn">Close</button>
  </div>
</dialog>
<button id="show-modal-btn">Show modal</button>

const modal = document.querySelector('dialog')
const modalBox = document.getElementById('modal-box')
const showModalBtn = document.getElementById('show-modal-btn')
const closeModalBtn = document.getElementById('close-modal-btn')

let isModalOpen = false

showModalBtn.addEventListener('click', (e) => {
  modal.showModal()
  isModalOpen = true
  e.stopPropagation()
})

closeModalBtn.addEventListener('click', () => {
  modal.close()
  isModalOpen = false
})

document.addEventListener('click', (e) => {
  if (isModalOpen && !modalBox.contains(e.target)) {
    modal.close()
  }
})

Разработка клиент-серверного приложения с помощью Next.js и TypeScript. Часть 1. Разработка сервера

Вы правы, спасибо, пофиксил + добавил уникальные сочетания полей для моделей Post и Like.

JavaScript: замена фона видео и реализация интересных эффектов на основе координат лица в реальном времени

Хм, надо будет попробовать, но кажется, что идея хорошая.

React: решение интересной практической задачи

Действительно, спасибо.

TypeScript: разбираем исходный код Radash

В чем преимущества?

TypeScript: разбираем исходный код Radash

"Распределение не униформное..." - покажите реализацию на TypeScript?
"Результат обрезан до int32..." - это я погорячился, в библиотеке вместо ~~ используется Math.floor(), поправил.

React: разрабатываем HOC и хук для наблюдения за элементами

Согласен, поправил. Спасибо за замечание

Заметка о полезных возможностях современного CSS

Действительно, поправил. Спасибо, друг.

Разрабатываем чат с помощью Nest, React и Postgres

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

Разрабатываем чат с помощью Nest, React и Postgres

Спасибо, друг.

Использование шаблонов проектирования группы GoF в React

"К недостаткам можно случай, если при размонтировании компонента не удалить события, на которые вы были подписаны, React может продолжать отслеживать изменения, что приведет к утечке памяти и потере производительности."

useEffect(() => {
   // это
    window.addEventListener("online", () => setOnline(true));  
    window.addEventListener("offline", () => setOnline(false));
    return () => {
      // и это - разные обработчики
      // зарегистрированные обработчики удалены не будут
      // получаем утечку памяти при каждом использовании наблюдателя
      window.removeEventListener("online", () => setOnline(true)); 
      window.removeEventListener("offline", () => setOnline(false));
    };
  }, []);

Фронтенд-новости №15. CSS становится сложнее, VITE 3.0, самый высокий сайт в мире

спасибо за подборку

Фронтенд-новости №14. Bun: новая среда выполнения JavaScript, руководство по созданию форм, «Дней без ошибок в коде: 0»

спасибо за подборку

Приложение для чата в реальном времени с помощью Nestjs и PostgreSQL

Кое-что упущено:
1. Для того, чтобы иметь возможность использовать useStaticAssets и другие методы для обработки статики, приложение Nest необходимо создать следующим образом:
import { NestExpressApplication } from '@nestjs/platform-express'
const app = await NestFactory.create<NestExpressApplication>(AppModule)
2. Для того, чтобы рендерить статику с помощью EJS, требуется установить соответствующий пакет: npm i ejs
3. Для того, чтобы открыть сокет на порту 3002, приложение Nest должно быть запущено на этом порту:
await app.listen(3002)
4. Директории views и static должны находиться в корне приложения, а не в директории src.
5. Файл app.js должен находиться в директории static.

JavaScript: заметка о побитовых операторах и числах с плавающей точкой

Побитовые операторы манипулируют 32-битными целыми числами от -2_147_483_647 до 2_147_483_647 включительно. С большими/меньшими значениями (например, 3_000_000_000) они работают некорректно. По поводу TS согласен.

Разрабатываем REST API с помощью TypeScript, NestJS, Prisma, AdminJS и Swagger

Для создания, обновления и удаления нескольких записей в одной транзакции Prisma предоставляет такие методы, как createMany, updateMany и deleteMany, соответственно. Особенность этих методов (транзакции) состоит в том, что если хотя бы один объект в массиве окажется невалидным, операция провалится (ни один объект не будет записан etc.). Но если позаботиться о валидации заранее, то все получится) Совсем не программисту я бы не советовал начинать с NestJS, Prisma и TypeScript. Простой REST API, пожалуй, легче всего реализовать с помощью Express + Mongoose (для демонстрации хватит кластера в MongoDB Atlas).