В бета-релизе TypeScript 6.0 появились новые типы для Temporal!

Долгожданное предложение Temporal дошло до стадии 3 и, как ожидается, в ближайшем будущем будет добавлено в JavaScript. В TypeScript 6.0 теперь есть встроенные типы для Temporal API, так что ты можешь начать использовать его в своём TypeScript-коде уже сегодня через --target esnext или "lib": ["esnext"] (или более точечно через temporal.esnext).

let yesterday = Temporal.Now.instant().subtract({
  hours: 24,
});

let tomorrow = Temporal.Now.instant().add({
  hours: 24,
});

console.log(`Yesterday: ${yesterday}`);
console.log(`Tomorrow: ${tomorrow}`);

Temporal уже можно использовать в нескольких рантаймах, так что ты сможешь скоро начать с ним экспериментировать. Документация по Temporal API доступна на MDN, хотя она всё ещё может быть неполной.

@WebDev_Plus

Нашел UI-библиотеку, которая меня прям дико, дико, дико выбесила.

Выбесила тем, что почему так не устроено вообще все.

Oat:

* 6KB CSS + 2.2KB JS
* ноль зависимостей
* без фреймворка
* без сборки
* только семантический HTML

Пишешь <button> и он выглядит нормально.
Пишешь <dialog> и он выглядит нормально.
Пишешь <input> и он выглядит нормально.

Никакого className="px-4 py-2 rounded-md bg-blue-500".

Никаких <Button variant="primary" size="md">.

Просто HTML.

Доступность на месте. Навигация с клавиатуры есть. Темная тема уже включена.

Сделал Kailash Nadh (CTO в Zerodha).

https://github.com/knadh/oat

@WebDev_Plus

Видел эти мелкие “мертвые зоны” между плотно стоящими элементами списка? Я тоже стал замечать их чаще.

Лечится просто: добавь каждому элементу CSS-псевдоэлемент ::before, чтобы расширить кликабельную область:

.item {
  position: relative;
}

.item::before {
  content: "";
  position: absolute;
  inset: -10px 0; /* расширяем область по вертикали на 10px */
}

Нюанс: чтобы не перекрыть клики, если внутри есть ссылки/кнопки, можно добавить pointer-events: none на ::before, а клики обрабатывать на самом .item (или наоборот, в зависимости от разметки).

@WebDev_Plus

Идеальный boilerplate, чтобы быстро собирать SaaS-проекты

Сделан на Next.js и уже из коробки настроен: аутентификация, подписки Stripe, база данных, авторизация, Tailwind и современные UI-компоненты.

Больше не нужно убивать дни на склейку auth и оплат. Просто клонируешь, настраиваешь и начинаешь пилить реальный продукт :)

Источник: http://github.com/webdevcody/ppai-next-starter

@WebDev_Plus

Совет по HTML/JavaScript:

Если использовать у кнопки атрибут commandfor, можно прямо указать на интерактивный элемент (например, <dialog> или popover) и задать, что именно с ним сделать.

@WebDev_Plus

Этот ресурс просто бомба. Если вы ищете SVG-файл любого логотипа, то здесь он точно есть. Здесь доступно 581 файл.

Оптимизированы и готовы к использованию в React, Vue, Angular и SVG:

→ https://svgl.app

@WebDev_Plus

JavaScript-совет

К элементам массива можно обращаться с "отрицательными" индексами через метод at().

@WebDev_Plus

Условно обязательные поля в TypeScript через mapped types

@WebDev_Plus

Вышла лучшая библиотека React 2026 года

Она называется Sileo и представляет собой компонент уведомлений.

✓ Красивый по умолчанию, не требует настройки
✓ Несколько состояний и положений
✓ Анимация с помощью SVG

→ npm install sileo

@WebDev_Plus

Функция calc() в CSS

Она позволяет делать математические вычисления прямо в CSS, чтобы верстка была гибкой и лучше адаптировалась под разные экраны.

Поддерживает сложение, вычитание, умножение и деление
Можно смешивать разные единицы: %, px, rem, vw
Вокруг операторов + и - нужны пробелы

Часто используют в адаптивной верстке: динамическая ширина, отступы, “плавающие” размеры шрифта.

@WebDev_Plus

Преобразование значений объектов в строгие типы объединения в TypeScript

@WebDev_Plus

Вышла тулза React Doctor, которая проверяет ваш React-код на наличие анти-паттернов:

- Лишние useEffect
- Проблемы с доступностью
- Prop drilling вместо context / композиции

Запускается как CLI или как агент-скилл. Повторяйте запуск, пока всё не пройдет проверки. Полностью опенсорс

Запустите в терминале, чтобы попробовать:

npx -y react-doctor@latest

@WebDev_Plus

CSS в 2026:

То, что ты видишь, сделано вообще без единой строчки JavaScript...
И при этом около 80% поддержки в браузерах.

@WebDev_Plus

Stremio это типа open-source Netflix.

✓ Веб и UI на React
✓ Движок написан на Rust
✓ Расширения, чтобы добавлять источники контента

Вся разработка открыта на GitHub:
→ http://github.com/Stremio/stremio-web

@WebDev_Plus

Очень важный скилл: это понимать, когда юзер закончил скроллить

Событие scrollend срабатывает, когда прокрутка завершилась: жест закончился и позиция скролла перестала обновляться. Удобно для lazy loading, аналитики или чтобы “дожать” финальные обновления UI без дерганий.

Как это работает - https://developer.mozilla.org/en-US/docs/Web/API/Document/scrollend_event

@WebDev_Plus