WebDev+ | Веб-разработка

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

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

Представили 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

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

Пихать use client в каждый файл React? Не надо. ✅Вместо этого прокидывай Server Components как children. Интерактивная кнопка не должна делать всю страницу клиентской. @WebDev_Plus

👩‍💻 В сеть вывалилась гигантская куча курсов и книг Держи сотни гигабайт свежих уроков, и каждую неделю мы подкидываем ещё! • 1612 ГБ — DevOps • 1402 ГБ — Python • 1300 ГБ — C, C++ • 1815 ГБ — Frontend • 1515 ГБ — Backend • 898 ГБ — ИБ, Хакинг • 996 ГБ — Kotlin, Swift • 212 ГБ — JavaScript • 315 ГБ — Flutter • 820 ГБ — Go, PHP • 419 ГБ — Java, Rust • 648 ГБ — GameDev • 517 ГБ — Windows, Linux • 998 ГБ — Дизайн (UX/UI) • 617 ГБ — Нейросети (ML/RL) • 546 ГБ — БД (SQL & NoSQL) • 687 ГБ — Аналитика данных • 115 ГБ — QA-тестирование Подписывайся и не плати за то, что можно получить бесплатно

Кстати, нашёл для вас суперкрутой API Этот API погоды бесплатный, без регистрации и без API-ключа. Можно получать прогнозы, температуру, данные по ветру и прочее - обычным запросом. Сохраняем для своих пет-проектов 100% исходный код 🎩

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

Справочник бесплатных публичных API для разработчиков Совместимы с любыми языками программирования. Доступно 1500 → http://publicapis.io @WebDev_Plus

Chrome DevTools теперь поддерживает троттлинг отдельных сетевых запросов! Люди просили это годами. Теперь DevTools позволяет симулировать медленную сеть для конкретных запросов, а не для всей страницы целиком. Это помогает тестировать, как веб-приложение ведёт себя и переживает проблемы, когда конкретные ресурсы (например, картинки, скрипты или API-вызовы) грузятся медленно. @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

Архитектура кодовой базы карт по URL-адресу GitHub https://github.com/braedonsaunders/codeflow @WebDev_Plus

Вертикальные вкладки доступны за флагом в Chrome 145 (текущая бета) 1. Перейдите на chrome://flags/#vertical-tabs 2. Включите флаг (установите Enabled) 3. Перезапустите Chrome 4. Кликните правой кнопкой по панели вкладок и выберите “Move Tabs To The Side” (переместить вкладки вбок) @WebDev_Plus

Быстрое напоминание про React: useId() недооценивают. Можно совместить useId(…) + атрибут form={…}, и тогда форма будет сабмититься кнопкой, которая находится вообще вне тега <form>. И не нужно городить всю эту жонглёрку с useEffect() или useRef(), которую обычно приходится делать. @WebDev_Plus

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

Классный браузерный ASCII-арт редактор Позволяет рисовать и генерировать ASCII-арт прямо в браузере. По сути, это для кастомных баннеров в README, шапок для терминала, вывода CLI или хакерских визуалок для твоих проектов :) https://files.littlebird.com.au/ascii-sketch.html @WebDev_Plus

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

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

// 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

Забавный факт про JavaScript: если передать строку с числом в конструктор Date, получится вполне безумный результат

new Date("0") дает Jan 1, 2000
new Date("1") дает Jan 1, 2001 (+1 год, ок...)
new Date("2") дает Feb 1, 2001 (+1 месяц, ??????)

@WebDev_Plus

Почему новички выбирают React вместо Angular? @WebDev_Plus

Вам сложно создавать дизайны для ваших веб-сайтов или приложений? Google запустил Stitch, который генерирует пользовательский интерфейс с помощью искусственного интеллекта. Он бесплатный, а результат впечатляет @WebDev_Plus