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

// Type-safe state transitions

type IdleState = {
  status: "idle";
  connect: () => ConnectedState;
};

type ConnectedState = {
  status: "connected";
  send: (data: string) => ConnectedState;
  disconnect: () => IdleState;
};

function createApi(): IdleState {
  return {
    status: "idle",
    connect() {
      const id = `${Date.now()}`;
      // establish connection
      return {
        status: "connected",
        send(data) {
          // send data
          console.log(`${data} (${id})`);
          return this;
        },
        disconnect() {
          // close connection
          return createApi();
        },
      };
    },
  };
}

// Usage
const api = createApi();

api.connect().send("Hello world!").disconnect();
// ✅ Works!

api.send("Send without connect");
// ❌ TypeScript Error: Property 'send' does not exist

@WebDev_Plus

«Есть ли тип для настройки промежуточного ПО/прокси в Next.js?»

Да

@WebDev_Plus

Классный браузерный ASCII-арт редактор

Позволяет рисовать и генерировать ASCII-арт прямо в браузере. По сути, это для кастомных баннеров в README, шапок для терминала, вывода CLI или хакерских визуалок для твоих проектов :)

https://files.littlebird.com.au/ascii-sketch.html

@WebDev_Plus

Этот анализатор сайтов дает тебе прям рентген-зрение для любого веба: кидаешь URL и за секунды видишь, что там происходит под капотом.

Это полностью опенсорсный тул, который собирает в одном месте техданные, инфру и базовую инфу по безопасности :)

@WebDev_Plus

Быстрое напоминание про React: useId() недооценивают.

Можно совместить useId(…) + атрибут form={…}, и тогда форма будет сабмититься кнопкой, которая находится вообще вне тега <form>.

И не нужно городить всю эту жонглёрку с useEffect() или useRef(), которую обычно приходится делать.

@WebDev_Plus

Архитектура кодовой базы карт по URL-адресу GitHub

https://github.com/braedonsaunders/codeflow

@WebDev_Plus

Если ты работаешь с React и Next.js, тебе нужен этот репозиторий!

10 лет знаний про оптимизации и best practices упакованы в скилл для AI-агентов.

40+ правил, отсортированных по влиянию
Срезать bundle, избегать waterfalls, избегать лишних rerender’ов...

https://github.com/vercel-labs/agent-skills/tree/main/skills/react-best-practices

@WebDev_Plus

Chrome DevTools теперь поддерживает троттлинг отдельных сетевых запросов!

Люди просили это годами. Теперь DevTools позволяет симулировать медленную сеть для конкретных запросов, а не для всей страницы целиком.

Это помогает тестировать, как веб-приложение ведёт себя и переживает проблемы, когда конкретные ресурсы (например, картинки, скрипты или API-вызовы) грузятся медленно.

@WebDev_Plus

Справочник бесплатных публичных API для разработчиков

Совместимы с любыми языками программирования.

Доступно 1500 → http://publicapis.io

@WebDev_Plus

Эта система grid-layout для React: Она позволяет собирать перетаскиваемые, ресайзабельные и адаптивные сетки в React. Типа дашбордов, админок, аналитических страниц или page builder’ов, где пользователь сам двигает и меняет размер блоков.

Ты один раз описываешь сетку, а дальше библиотека сама разруливает drag, resize и брейкпоинты. Идеально, когда хочется интерактивный лэйаут без написания всей этой логики руками :)

Попробовать

@WebDev_Plus

Впечатляющие анимации, которые можно создать с помощью библиотеки GSAP всего за несколько строк кода:

@WebDev_Plus

Представили Auto Layout в Anime.js v4.3

* Анимация display: flex / grid / none и т.д.
* Enter / Leave анимации
* Анимация изменения позиции DOM-элементов
* Прерываемые (interruptible) анимации
* Stagger-анимации для дочерних элементов
* Поддержка любых easing-функций
* Максимально простой API

Документация: https://animejs.com/documentation/layout
Примечания к выпуску: https://github.com/juliangarnier/anime/releases/tag/v4.3.0
CodePen Примеры: https://codepen.io/collection/yykPaw

@WebDev_Plus

Преобразования строк на уровне типов

type Feature = "user" | "payment" | "order";

type SuccessEvent<T extends string> = `${Uppercase<T>}_SUCCESS`;

type events = SuccessEvent<Feature>;
// "USER_SUCCESS" | "PAYMENT_SUCCESS" | "ORDER_SUCCESS"

type EventHandler<T extends string> = `on${Capitalize<T>}Success`;

type event_handler = EventHandler<Feature>;
// "onUserSuccess" | "onPaymentSuccess" | "onOrderSuccess"

@WebDev_Plus

Совет React: как избежать водопадов извлечения данных в серверных компонентах ↓

Принёс находку: sshx. Всего одна команда, и у вас в браузере открывается реплика локального терминала: можно звать коллег по ссылке, видеть курсоры друг друга и даже чатиться

Идеально для дебага, обучения или просто совместной работы. Cайт здесь, GitHub тут

@WebDev_Plus

❌ Не используй barrel imports в React
✅ Импортируй компоненты напрямую

Barrel imports (реэкспорт через index.js) тянут весь модуль, даже если тебе нужен один компонент.

В итоге в бандл попадает лишний, неиспользуемый код ↓

Интерактивная библиотека визуализации данных — ECharts

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

- Предоставляет более 20 типов диаграмм
- Переключение между рендерингом Canvas и SVG
- Автоматически генерируемые описания диаграмм
- Написана на чистом JavaScript

Забираем тут

@WebDev_Plus