JavaScript-совет:

Используй new Notification() для отправки нативных уведомлений в браузере (без отдельного приложения).

@WebDev_Plus

Реагирование на изменение размеров элемента, а не только окна

«Наблюдатель изменения размеров» срабатывает при изменении габаритов любого элемента, подходит для адаптивных компонентов.

⋅ отслеживает padding box, content box или border box
⋅ работает при динамических изменениях DOM

https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver

@WebDev_Plus

Node.js v26.0.0 вышел 💚

«Temporal API» включён по умолчанию,

https://nodejs.org/en/blog/release/v26.0.0

@WebDev_Plus

Улучшенная цепочка ошибок наконец появилась в JavaScript

Error.cause позволяет прикрепить исходную ошибку при повторном выбрасывании исключения, сохраняя полный контекст без потери стека вызовов.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/cause

@WebDev_Plus

Ускорение рендеринга с помощью свойства CSS content-visibility: auto

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

Используется совместно с contain-intrinsic-size.

Обеспечивает практически нулевую стоимость реализации ленивой отрисовки.

https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility

@WebDev_Plus

Используй view-transitions и clip-path, чтобы анимировать переключение темы вместо простого переключения с transition

document.documentElement.animate(
  { clipPath: ["inset(0 0 100% 0)", "inset(0)"] },
  { pseudoElement: "::view-transition-new(root)", duration: 600 },
)

::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

Здесь clip-path задаёт раскрытие анимации сверху вниз.

@WebDev_Plus

Infinity в JavaScript используется нечасто.

Но array.flat(Infinity) неожиданно полезен при работе с глубоко вложенными массивами

#JavaScript

React Doctor v2 уже здесь

Ваш агент пишет плохой React-код — этот инструмент это отлавливает.

Работает с Next.js, Vite и React Native. Можно привести приложение в порядок за несколько минут.

npx react-doctor@latest

https://github.com/millionco/react-doctor

@WebDev_Plus

Атрибут tabindex в HTML управляет тем, может ли элемент получать фокус с клавиатуры и в каком порядке происходит навигация по элементам через клавишу Tab.

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

Основные моменты:

▪️ tabindex="0" — добавляет элемент в естественный порядок фокуса
▪️ tabindex="-1" — фокус возможен только программно через JS, но не через Tab
▪️ положительные значения (1, 2 и т.д.) — задают кастомный порядок обхода
▪️ работает как для интерактивных, так и для неинтерактивных элементов

@WebDev_Plus

Создание нового логотипа не должно занимать много времени.

Я хотел инструмент быстрый, простой и бесплатный.

Поэтому собрал Logo Lattice.

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

@WebDev_Plus

HTML совет 💡

Можно использовать атрибут translate, чтобы указать, должен ли контент элемента переводиться встроенными средствами браузера.

@WebDev_Plus

Жди завершения всех промисов, даже упавших

Promise.allSettled() дожидается завершения каждого промиса — успешного или с ошибкой.
⋅ Возвращает { status: 'fulfilled', value } или { status: 'rejected', reason }
⋅ Отлично подходит для пакетных операций

Подробнее 👇
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled

@WebDev_Plus

Используй CSS @property, чтобы открыть доступ к таким вещам, как:

Анимированные конические градиенты
Вращающиеся рамки и лоадеры
Hover-переходы для точек градиента

Обычная переменная --angle не работает для анимации точек градиента, потому что CSS не понимает, как интерполировать такое значение.

@property решает это через типы вроде <angle>, <color> и другие.

@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.card {
  --angle: 0deg;

  background: linear-gradient(
    var(--angle),
    #38bdf8,
    #0ea5e9,
    #2563eb,
    #1e40af
  );

  transition: --angle 0.8s ease;
}

.card:hover {
  --angle: 45deg;
}

За счёт initial-value не нужно каждый раз вручную задавать стартовое значение.

@WebDev_Plus

Старый, но рабочий трюк: в тёмной теме толщину вариативного шрифта стоит делать немного меньше, потому что светлый текст на тёмном фоне визуально выглядит жирнее, чем тёмный текст на светлом фоне.

CSS-Tricks — Dark Mode and Variable Fonts

@WebDev_Plus

Можно закрепить скролл чата внизу через CSS-свойство overflow-anchor, без MutationObserver и без вызовов scrollTo().

<div id="scroller">
  ...
  ...
  <div id="anchor"></div>
</div>
#scroller * {
  overflow-anchor: none;
}

#anchor {
  overflow-anchor: auto;
  height: 1px;
}

В браузерах по умолчанию включён scroll anchoring, чтобы уменьшать визуальные сдвиги при изменении DOM.
Если отключить его у дочерних элементов и оставить включённым только на маленьком (1px) якоре внизу, скролл автоматически удерживается на новых элементах и «едет» вниз вместе с добавляемым контентом.

@WebDev_Plus

Интерактивная 3D-галерея клеточных структур на базе React + Three.js для обучения биологии и научно-популярной визуализации: https://github.com/cclank/cell-architecture-studio

3D-модели семи типов клеток, которые можно свободно вращать и просматривать: растительные клетки, лейкоциты, нейроны и другие. Растительные клетки и лейкоциты используют высокоточные GLB-модели, остальные реализованы через процедурную геометрию как fallback. По клику на органеллы отображается подробная информация, также доступно сравнение двух клеток бок о бок. Встроена AI-панель-тьютор, которая даёт обучающие подсказки.

@WebDev_Plus

Ремаппинг mapped types в TypeScript для автоматической генерации feature-флагов!
#TypeScript

@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

Совет по JavaScript:

Можно использовать метод console.table(), чтобы вывести табличные данные в виде таблицы в консоли.

Ты, скорее всего, каждый день пользуешься console.log().
Но знаешь ли ты, что у объекта console есть и другие полезные методы — например, console.table() и console.error()?

Подробнее — в статье

Ещё больше трюков по JavaScript можно найти здесь

@WebDev_Plus

⚡️ В TypeScript можно использовать labeled tuples, чтобы на этапе компиляции жёстко задавать точную длину массива.

#TypeScript

@WebDev_Plus