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

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

Это происходит из-за режима popLayout в AnimatePresence из motion/react, который обеспечивает более плавную и быструю анимацию при удалении элемента

430 views06:07

Chrome DevTools – это не только панель для отладки, но и полноценная среда для проектирования, тестирования и анализа веб-приложений. С его помощью можно глубоко изучать DOM, стили, JavaScript, сетевые запросы, оптимизировать производительность и управлять данными пользователя.

Хорошая статья. Читайте тут.

435 views16:07

0:57

Media is too big

Быстрый совет по JS: используйте Gamepad API, чтобы в реальном времени отслеживать статус подключения геймпада и состояние его кнопок.

Это позволяет легко интегрировать поддержку игровых контроллеров в веб-проекты.

453 views06:07

0:26

Свойство shape-outside

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

.column--left .shape {
  float: right;
  shape-outside: circle(100px at 100% 50%);
}

Подборка примеров использования этого свойства: тык

475 views16:07

0:35

Эта библиотека позволяет запускать полноценные 3D-физические симуляции прямо в браузере. JoltPhysics-js переносит высокопроизводительный C++ физический движок в JavaScript с помощью WebAssembly.

Проще говоря, теперь ваш сайт может симулировать гравитацию, столкновения, твёрдые тела и реалистичное движение. Полностью в браузере. Без нативных приложений. Без бэкенда. Только JS.

Что можно на нём сделать:

- Браузерные 3D-игры с настоящей физикой
- Интерактивные симуляции и демо
- Реалистичную анимацию и движение для проектов на Three.js и WebGL

Это не игрушечная физическая библиотека. Это продакшен-движок, который используется в играх и теперь работает прямо в вебе ✌️

https://github.com/jrouwe/JoltPhysics.js

Please open Telegram to view this post

VIEW IN TELEGRAM

518 views06:07

Оптимизация SVG, краткий гайд для начинающих

Часто на сайтах встречаются SVG-изображения, которые не оптимизированы как следует: они содержат лишние группы, ненужные атрибуты и числа с огромным количеством десятичных знаков

Лаура Калбаг из Penpot делится практическими советами, как сделать SVG-файлы меньше по размеру, но без видимой потери качества – от базовых приёмов до полезных автоматизированных инструментов

510 views16:07

0:28

Инструмент для веб-разработчиков, который позволяет мгновенно проверить, могут ли боты Google и AI-краулеры получить доступ к вашему сайту.

Просто введите адрес своего сайта, и сервис запустит несколько проверок, чтобы дать вам подробную информацию о сканируемости и доступности.

519 views06:07

0:13

Быстрый совет по CSS: при выравнивании иконок с текстом можно задать height: 1lh. Это значение равно line-height элемента, поэтому иконки выравниваются идеально.

499 views16:07

Джош Комо снова радует – на этот раз интерактивным туториалом про скролл-зависимые анимации в современном вебе. Это когда элементы двигаются, появляются или трансформируются прямо в такт прокрутке страницы, создавая более живой и управляемый интерфейс.

Поддержка около 85%, в Firefox пока за флагом

https://www.joshwcomeau.com/animation/scroll-driven-animations/

462 views06:07

Please open Telegram to view this post

VIEW IN TELEGRAM

391 views16:07

0:14

Можно закрепить скролл чата внизу через 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, чтобы предотвращать сдвиги лейаута

Если отключить overflow-anchor у дочерних элементов и заново включить его для 1px anchor-элемента в конце списка, скролл будет автоматически прилипать к новому контенту и следовать вниз сам по себе.

306 views07:07