This media is not supported in your browser
VIEW IN TELEGRAM
Эта библиотека позволяет запускать полноценные 3D-физические симуляции прямо в браузере. JoltPhysics-js переносит высокопроизводительный C++ физический движок в JavaScript с помощью WebAssembly.
Проще говоря, теперь ваш сайт может симулировать гравитацию, столкновения, твёрдые тела и реалистичное движение. Полностью в браузере. Без нативных приложений. Без бэкенда. Только JS.
Что можно на нём сделать:
- Браузерные 3D-игры с настоящей физикой
- Интерактивные симуляции и демо
- Реалистичную анимацию и движение для проектов на Three.js и WebGL
Это не игрушечная физическая библиотека. Это продакшен-движок, который используется в играх и теперь работает прямо в вебе✌️
https://github.com/jrouwe/JoltPhysics.js
Проще говоря, теперь ваш сайт может симулировать гравитацию, столкновения, твёрдые тела и реалистичное движение. Полностью в браузере. Без нативных приложений. Без бэкенда. Только JS.
Что можно на нём сделать:
- Браузерные 3D-игры с настоящей физикой
- Интерактивные симуляции и демо
- Реалистичную анимацию и движение для проектов на Three.js и WebGL
Это не игрушечная физическая библиотека. Это продакшен-движок, который используется в играх и теперь работает прямо в вебе
https://github.com/jrouwe/JoltPhysics.js
Please open Telegram to view this post
VIEW IN TELEGRAM
Оптимизация SVG, краткий гайд для начинающих
Часто на сайтах встречаются SVG-изображения, которые не оптимизированы как следует: они содержат лишние группы, ненужные атрибуты и числа с огромным количеством десятичных знаков
Лаура Калбаг из Penpot делится практическими советами, как сделать SVG-файлы меньше по размеру, но без видимой потери качества – от базовых приёмов до полезных автоматизированных инструментов
Часто на сайтах встречаются SVG-изображения, которые не оптимизированы как следует: они содержат лишние группы, ненужные атрибуты и числа с огромным количеством десятичных знаков
Лаура Калбаг из Penpot делится практическими советами, как сделать SVG-файлы меньше по размеру, но без видимой потери качества – от базовых приёмов до полезных автоматизированных инструментов
This media is not supported in your browser
VIEW IN TELEGRAM
Инструмент для веб-разработчиков, который позволяет мгновенно проверить, могут ли боты Google и AI-краулеры получить доступ к вашему сайту.
Просто введите адрес своего сайта, и сервис запустит несколько проверок, чтобы дать вам подробную информацию о сканируемости и доступности.
Просто введите адрес своего сайта, и сервис запустит несколько проверок, чтобы дать вам подробную информацию о сканируемости и доступности.
This media is not supported in your browser
VIEW IN TELEGRAM
Быстрый совет по CSS: при выравнивании иконок с текстом можно задать
height: 1lh. Это значение равно line-height элемента, поэтому иконки выравниваются идеально.Джош Комо снова радует – на этот раз интерактивным туториалом про скролл-зависимые анимации в современном вебе. Это когда элементы двигаются, появляются или трансформируются прямо в такт прокрутке страницы, создавая более живой и управляемый интерфейс.
Поддержка около 85%, в Firefox пока за флагом
https://www.joshwcomeau.com/animation/scroll-driven-animations/
Поддержка около 85%, в Firefox пока за флагом
https://www.joshwcomeau.com/animation/scroll-driven-animations/
This media is not supported in your browser
VIEW IN TELEGRAM
Можно закрепить скролл чата внизу через CSS
Браузеры по умолчанию используют scroll anchoring, чтобы предотвращать сдвиги лейаута
Если отключить
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-элемента в конце списка, скролл будет автоматически прилипать к новому контенту и следовать вниз сам по себе.Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Новая статья: прокачиваем fluid sizing с помощью round()
Автор написал о том, как CSS-функция
http://ishadeed.com/article/css-round
Автор написал о том, как CSS-функция
round() улучшает значения, получаемые через clamp(), при работе с размерами, типографикой и отступами. Почему это важно и как это использоватьhttp://ishadeed.com/article/css-round
Дождались! Ребята сделали крутейший канал про IT новой эпохи
Нейросети, ИИ-агенты, вайбкодинг, вайбхакинг и новые инструменты уже меняют привычный мир технологий.
Там разбирают эти изменения и другие интересные IT-темы на простых картинках и понятном языке, а еще делятся полезными ресурсами и свежими новостями
Подписывайтесь: @IT_Portal
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Познакомьтесь с Datatype – шрифтом, который превращает текст в графики. Доступен в Google Fonts и в Workspace.
Простой синтаксис вроде
Datatype на Google Fonts
Простой синтаксис вроде
{b:10,25,7,95} автоматически преобразуется в спарклайны, круговые диаграммы и бар-чарты, которые отлично смотрятся в ваших документах, презентациях и таблицахDatatype на Google Fonts
Media is too big
VIEW IN TELEGRAM
Blossom — это опенсорс система каруселей с огромным количеством красивых паттернов и готовых примеров. Также в комплекте идут навыки для AI-агентов, а ещё есть поддержка React, Vue, Svelte и Web Components.
github.com/jespervos/blossom-carousel
github.com/jespervos/blossom-carousel