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

Нашел 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

В бета-релизе 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

Если тебе кажется, что используемые градиенты выглядят тусклыми или "грязными", попробуй вместо этого использовать цвета в пространстве OKLCH

В OKLCH оттенок задаётся как угол, а значит цвета, через которые проходит градиент, отличаются от тех, что получаются в sRGB

Можно подробнее почитать об этом здесь

@WebDev_Plus

Минималистичное опенсорсное приложение для заметок на macOS: http://github.com/erictli/scratch

Основано на Markdown, offline-first, и хранит все как обычные .md файлы, которые реально принадлежат тебе. Никакого облака, аккаунтов и вообще интернет не нужен.

Что кайфового:

➡️WYSIWYG-редактор, но сохраняет в Markdown
➡️Можно править заметки через Claude Code CLI
➡️Подхватывает внешние изменения (например, если другие AI-агенты поменяли файлы)
➡️Keyboard-first: шорткаты + command palette
➡️Кастомные темы и типографика
➡️Опциональная интеграция с Git для контроля версий
➡️Легкое и быстрое

@WebDev_Plus

Самый популярный элемент HTML

@WebDev_Plus

Нужно простое OTP (одноразовые пароли) для приложения?

Есть легковесная либa, которая позволяет без лишнего веса генерить TOTP/HOTP коды в JavaScript. Норм вариант для 2FA, флоу верификации или безопасного логина, когда не хочется тащить тяжёлые зависимости :)

http://github.com/hectorm/otpauth

@WebDev_Plus

Знакомьтесь: json-render × React Native

Еще один шаг к UGI (User-Generated Interfaces), на базе Generative UI.

Динамические, персонализированные интерфейсы под каждого пользователя без потери надежности.

Заранее заданные компоненты и экшены дают безопасный, предсказуемый результат.

@WebDev_Plus

Аннотация типа (type annotation) vs satisfies + as const в TypeScript

@WebDev_Plus

Это прям топ, если хочешь реально глубоко врубиться в TypeScript

Это красиво сделанный интерактивный ресурс, который объясняет концепты TypeScript визуально, а не только текстом и код-блоками.

Можно прямо “пощупать” как работают типы через живые визуализации, из-за чего сложные штуки доходят заметно быстрее.

И ещё кайф: есть опциональные клавиатурные хоткеи, так что можно плавно переключаться между примерами и концентрироваться на обучении, а не на бесконечном скролле :)

Источник : http://types.kitlangton.com

@WebDev_Plus

Современный способ смотреть npm-пакеты, и он реально молниеносный

NPMX это новый браузер для npm registry, который делает упор на скорость и удобство для разработчиков.

Никакого мусора. Никаких тормозных страниц. Просто мгновенная инфа по пакету, когда она нужна :)

Источник : [http://npmx.dev]

@WebDev_Plus

Фильтрация свойств объекта по типу в TypeScript

@WebDev_Plus

Имба тулза для проверки веб-производительности.

Сканирует весь сайт и выставляет оценку каждой странице.

По сути, это Lighthouse, но с обзором всего сайта целиком.

Запускается так: npx unlighthouse --site <твой-сайт>

@WebDev_Plus

Утилита минимальной фильтрации объектов в JavaScript

@WebDev_Plus

Один паренек написал блог-пост: Building Bulletproof React Components.

В нём подробно разбираю, как создавать компоненты в React, которые надёжны, легко тестируются и безопасны для использования в больших проектах.

@WebDev_Plus

Полезный совет по DevTools для доступности

Хром умеет эмулировать дальтонизм и размытие зрения. Быстрый способ проверить, насколько ваш UI дружелюбен к тем, кто видит мир иначе

DevTools → Rendering → Emulate vision deficiencies

@WebDev_Plus

Предпросмотр и редактирование SVG прямо в VS Code

Это расширение для VS Code позволяет видеть SVG уже отрендеренными прямо в редакторе и быстро править их без переключения в сторонние дизайн-инструменты.

Если часто работаешь с иконками, иллюстрациями или UI-графикой, экономит кучу времени на лишние переходы

Посмотреть можно здесь

@WebDev_Plus

Условные типы TypeScript применяют различные правила в зависимости от типа

@WebDev_Plus

❌Избегайте просверливания компонентов для их расширения.

✅Вместо этого используйте композицию.

@WebDev_Plus

ilamy Calendar

Мощная, полнофункциональная библиотека календарных компонентов для React, написанная на TypeScript, Tailwind CSS и с использованием современных React-паттернов. Поддерживает несколько режимов отображения календаря, drag-and-drop, повторяющиеся события и продвинутую интернационализацию

GitHub тут

@WebDev_Plus

Интерактивная статья: как анимировать курсоры других игроков в мультиплеере.

Плавный рендер курсоров почти всегда требует интерполяции, потому что сеть никогда не бывает идеальной. Вот рабочий подход. Автор писал это пару лет назад, но техники все еще актуальны

Ссылка ↓

@WebDev_Plus