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

Интерактивная 3D-галерея клеточных структур на базе React + Three.js для обучения биологии и научно-популярной визуализации: https://github.com/cclank/cell-architecture-studio 3D-модели семи типов клеток, которые можно свободно вращать и просматривать: растительные клетки, лейкоциты, нейроны и другие. Растительные клетки и лейкоциты используют высокоточные GLB-модели, остальные реализованы через процедурную геометрию как fallback. По клику на органеллы отображается подробная информация, также доступно сравнение двух клеток бок о бок. Встроена AI-панель-тьютор, которая даёт обучающие подсказки. @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

Старый, но рабочий трюк: в тёмной теме толщину вариативного шрифта стоит делать немного меньше, потому что светлый текст на тёмном фоне визуально выглядит жирнее, чем тёмный текст на светлом фоне. CSS-Tricks — Dark Mode and Variable Fonts @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

Жди завершения всех промисов, даже упавших Promise.allSettled() дожидается завершения каждого промиса — успешного или с ошибкой. ⋅ Возвращает { status: 'fulfilled', value } или { status: 'rejected', reason } ⋅ Отлично подходит для пакетных операций Подробнее 👇 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled @WebDev_Plus

Совет на ближайшие годы — изучайте ВАЙБ-КОДИНГ ИИ уже пишет код, чинит баги, генерирует тесты, документацию и помогает запускать продукты быстрее, чем это делали классические команды разработки. И это уже не "будущее когда-нибудь", а реальность, которая меняет рынок уже сегодня И те, кто научится вайбкодить сейчас, будут увереннее конкурировать на рынке и зарабатывать больше тех, кто по-прежнему делает всё вручную. Стартовать с нуля поможет канал Вайб-кодинг. Там ребята круглосуточно мониторят более 320 российских и зарубежных источников и публикуют только главное: релизы, инструменты, гайды, курсы и практические кейсы. Подписывайтесь, нас уже 30 тысяч: @vibecoding_tg

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

Создание нового логотипа не должно занимать много времени. Я хотел инструмент быстрый, простой и бесплатный. Поэтому собрал Logo Lattice. Полностью бесплатный. Работает прямо в браузере. Полный контроль и владение созданными результатами. @WebDev_Plus

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

React Doctor v2 уже здесь Ваш агент пишет плохой React-код — этот инструмент это отлавливает. Работает с Next.js, Vite и React Native. Можно привести приложение в порядок за несколько минут. npx react-doctor@latest https://github.com/millionco/react-doctor @WebDev_Plus

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

Используй 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

Ускорение рендеринга с помощью свойства CSS content-visibility: auto Это CSS-свойство откладывает отрисовку контента вне видимой области до момента, когда он действительно понадобится, что даёт значительный прирост производительности на длинных страницах. Используется совместно с contain-intrinsic-size. Обеспечивает практически нулевую стоимость реализации ленивой отрисовки. https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility @WebDev_Plus

Улучшенная цепочка ошибок наконец появилась в JavaScript Error.cause позволяет прикрепить исходную ошибку при повторном выбрасывании исключения, сохраняя полный контекст без потери стека вызовов. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/cause @WebDev_Plus

Node.js v26.0.0 вышел 💚 «Temporal API» включён по умолчанию, https://nodejs.org/en/blog/release/v26.0.0 @WebDev_Plus

Реагирование на изменение размеров элемента, а не только окна «Наблюдатель изменения размеров» срабатывает при изменении габаритов любого элемента, подходит для адаптивных компонентов. ⋅ отслеживает padding box, content box или border box ⋅ работает при динамических изменениях DOM https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver @WebDev_Plus

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

Container scroll-state queries позволяют применять стили к элементам в зависимости от состояния скролла контейнера — зафиксирован, привязан к точке, прокручиваемый

.section-header {
  ...
  container-type: scroll-state;
  container-name: sticky-hd;
}

@container sticky-hd scroll-state(stuck: top) {
  ...
}

Поддерживаемые состояния: - stuck — элемент в состоянии position: sticky и «прилип» к краю - snapped — элемент зафиксирован через scroll snap - scrollable — контейнер имеет область прокрутки Это даёт возможность убирать обработчики скролла на стороне JavaScript и переносить логику в CSS, без лишних подписок на события и перерасчётов. @WebDev_Plus

Это потрясающее расширение для VS Code, которое за секунды превращает вашу структуру папок в правильно отформатированное текстовое представление Идеально подходит для создания чистой и структурированной документации без лишних усилий #ресурсы @WebDev_Plus

Переключаем режим редактирования для всего документа Когда мы изменяем HTML, обычно нужно дождаться обновления страницы, чтобы увидеть изменения. Вы можете сэкономить время, используя designMode, который позволяет мгновенно изменять страницу Чтобы переключить режим разработки, введите следующий код:

document.designMode="on"

#советы @WebDev_Plus