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

Познакомьтесь с Datatype – шрифтом, который превращает текст в графики. Доступен в Google Fonts и в Workspace. Простой синтаксис вроде {b:10,25,7,95} автоматически преобразуется в спарклайны, круговые диаграммы и бар-чарты, которые отлично смотрятся в ваших документах, презентациях и таблицах Datatype на Google Fonts

💬👨‍💻🐍💩🤖🤖🐧👩‍💻🧑‍💻👋🦀 Дождались! Ребята сделали крутейший канал про IT новой эпохи Нейросети, ИИ-агенты, вайбкодинг, вайбхакинг и новые инструменты уже меняют привычный мир технологий. Там разбирают эти изменения и другие интересные IT-темы на простых картинках и понятном языке, а еще делятся полезными ресурсами и свежими новостями Подписывайтесь: @IT_Portal

Новая статья: прокачиваем fluid sizing с помощью round() Автор написал о том, как CSS-функция round() улучшает значения, получаемые через clamp(), при работе с размерами, типографикой и отступами. Почему это важно и как это использовать http://ishadeed.com/article/css-round

Только олды вспомнят 😏

Можно закрепить скролл чата внизу через 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-элемента в конце списка, скролл будет автоматически прилипать к новому контенту и следовать вниз сам по себе.

Джош Комо снова радует – на этот раз интерактивным туториалом про скролл-зависимые анимации в современном вебе. Это когда элементы двигаются, появляются или трансформируются прямо в такт прокрутке страницы, создавая более живой и управляемый интерфейс. Поддержка около 85%, в Firefox пока за флагом https://www.joshwcomeau.com/animation/scroll-driven-animations/

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

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

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

Эта библиотека позволяет запускать полноценные 3D-физические симуляции прямо в браузере. JoltPhysics-js переносит высокопроизводительный C++ физический движок в JavaScript с помощью WebAssembly. Проще говоря, теперь ваш сайт может симулировать гравитацию, столкновения, твёрдые тела и реалистичное движение. Полностью в браузере. Без нативных приложений. Без бэкенда. Только JS. Что можно на нём сделать: - Браузерные 3D-игры с настоящей физикой - Интерактивные симуляции и демо - Реалистичную анимацию и движение для проектов на Three.js и WebGL Это не игрушечная физическая библиотека. Это продакшен-движок, который используется в играх и теперь работает прямо в вебе ✌️ https://github.com/jrouwe/JoltPhysics.js

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

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

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

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

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

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

Принёс находку: sshx. Всего одна команда, и у вас в браузере открывается реплика локального терминала: можно звать коллег по ссылке, видеть курсоры друг друга и даже чатиться Идеально для дебага, обучения или просто совместной работы. Cайт здесь, GitHub тут

Огромная коллекцию из 1500+ отобранных API для ваших проектов, от погоды и карт до генераторов картинок и NLP-сервисов Забираем с сайта или с GitHub

Набор полезных пользовательских CSS-функций, который работает на новой нативной директиве @function. Никакой сборки, просто копируете код и используете. Может работать по принципу reset.css Проект ещё в разработке, но уже насчитывает ~43 функции разных категорий, их список тут. Демка тоже есть

Как работают очереди в контексте HTTP-запросов Разбираются основные стратегии очередей: FIFO, LIFO, приоритетные, плюс активное управление очередями. Всё это интерактивно: можно тыкать и смотреть, как это всё работает в реальном времени Ловите ссылку: https://encore.dev/blog/queueing

Разработчики Next.js: добавьте эти 4 строки в ваш .vscode/settings.json, чтобы сразу прокачать удобство разработки

{
  "workbench.editor.customLabels.patterns": {
    "**/app/**/{page,layout,index}.{ts,tsx}": "(${dirname})/${filename}.${extname}",
    "**/index.{ts,tsx}": "${dirname}/index.${extname}"
  },
}