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

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

https://github.com/knadh/oat

@WebDev_Plus

Границы выглядят не такими чёткими, как в Figma?

Figma рендерит внешний stroke иначе, чем браузеры — тонкие границы выглядят более чёткими и более светлыми (или тёмными).

Чтобы добиться такого же эффекта, используйте shadow вместо border.

@WebDev_Plus

Пишите более чистый CSS с помощью nesting.

Теперь в CSS можно вкладывать селекторы напрямую.
Это улучшает читаемость, делает стили более модульными и уменьшает количество повторений.

Никакой препроцессор не нужен.

Подробнее : https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Nesting

@WebDev_Plus

Только что узнал про background-clip, который решает именно эту проблему. Если установить значение padding-box, фон элемента не будет рисоваться под границей (border).

Однако, если нужно точно совпасть с макетом из Figma, всё равно придётся использовать тени (shadow).

@WebDev_Plus

Быстрый совет по React: не подписывайтесь на данные, которые вы не рендерите — это вызывает лишние ререндеры. Если данные используются только в обработчиках событий, читайте их там.

AI-агенты для кодинга часто делают это неправильно.

@WebDev_Plus

Большинство примеров работы с API заканчиваются простым вызовом fetch().

Но в реальных приложениях нужно учитывать медленные сети, сбои, ретраи и многое другое.

В этом гайде показывает, как построить production-ready networking на JavaScript.

@WebDev_Plus

Cпособ переключить сайт в тёмный режим

С нативной и настраиваемой анимацией.

Всего 2 строки JavaScript и немного CSS:
→ http://theme-toggle.rdsx.dev

@WebDev_Plus

hyphenate-character широко доступен с 2023 года

Позволяет управлять символом, который показывается в конце строки при переносе слова. По умолчанию используется auto (‐), но это можно настроить.

Полезно для креативной типографики и многоязычных сайтов.

https://developer.mozilla.org/en-US/docs/Web/CSS/hyphenate-character

@WebDev_Plus

В следующей версии Bun

Встроенный клиент WebSocket в Bun теперь поддерживает Unix domain sockets.

// Plain
const ws = new WebSocket("ws+unix:///tmp/app.sock");

// With a request path (split on first ':', same as the npm `ws` package)
const ws = new WebSocket("ws+unix:///tmp/app.sock:/api/stream?x=1");

// TLS over a unix socket
const ws = new WebSocket("wss+unix:///tmp/app.sock", {
  tls: { rejectUnauthorized: false },
});

Ранее Unix domain sockets поддерживались только в WebSocket-сервере. Теперь поддержка есть и в клиенте, и в сервере.

@WebDev_Plus

:only-child теперь матчится даже на элементы без родителя!

Селектор :only-child обновили — теперь он может матчить элементы, у которых вообще нет родителя, а не только те, которые являются единственным ребёнком.

Небольшое, но полезное выравнивание спецификации во всех основных браузерах.

Узнать больше : https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:only-child

@WebDev_Plus

Нужно отслеживать, когда элементы попадают в область видимости? 👀

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

⋅ Ленивая загрузка изображений
⋅ Отслеживание видимости рекламы
⋅ Триггер анимаций при скролле

Подробнее - https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver

@WebDev_Plus

Хорошие новости для веб-типографики: text-indent с ключевыми словами each-line и hanging теперь входит в Baseline Widely Available → https://goo.gle/4c7tO9j

Теперь можно делать более сложные, типографские лейауты в духе печатных изданий с помощью CSS, и это стабильно работает во всех основных движках.

@WebDev_Plus

Оставляйте видео видимым даже при переключении вкладок → https://goo.gle/3O03kNA

Автоматический режим «картинка в картинке» убирает необходимость ручного переключения и решает проблему потери вовлечённости при уходе со страниц с медиа-контентом. Теперь браузер сам обрабатывает этот переход.

@WebDev_Plus

Container Queries в CSS позволяют компонентам самим определять свои стили

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

Подробнее : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries

@WebDev_Plus

Прокачай TypeScript с помощью ключевых утилитных типов

Сохрани, чтобы не потерять

#TypeScript

@WebDev_Plus

Очень немногие знают про этот HTML-тег, а он может сделать веб-страницу заметно быстрее по ощущениям.

Он называется Speculation Rules и позволяет заранее рендерить страницы ещё до клика пользователя.

Браузер отслеживает намерение перехода, например при наведении на ссылку, и начинает готовить следующую страницу в фоне.

В момент клика переход ощущается почти мгновенным.

@WebDev_Plus

Вывод типов по вложенным путям объектов в TypeScript — чисто и типобезопасно

#TypeScript

@WebDev_Plus