💬 Закрепляем скролл чата внизу без JavaScript

С помощью overflow-anchor можно обойтись без MutationObserver и scrollTo():

<div id="scroller">
  ...
  <div id="anchor"></div>
</div>

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

Отключаем scroll anchoring для содержимого и оставляем его только на элементе в конце списка. Браузер использует его как якорь и удерживает скролл у нового контента.

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#readme

📐 Делаем fluid-значения в CSS предсказуемыми

clamp() отлично подходит для адаптивных размеров, но результат может быть вроде 19.7px или 143.2px.

Функция round() позволяет привязать вычисленное значение к нужному шагу:

.title {
  --size: clamp(1rem, 1rem + 2cqw, 2rem);
  font-size: round(down, var(--size), 4px);
}

Теперь размер будет двигаться по шагам: 16px → 20px → 24px → 28px → 32px. Можно использовать up, down, nearest или to-zero.

Особенно полезно для типографики, spacing и привязки элементов к layout grid.

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#readme #css

🦊 Firefox 154: новые возможности CSS

🈶 sibling-index() и sibling-count() — позволяют получить позицию элемента среди соседей и их общее количество. Удобно, например, для динамических эффектов и декоративных раскладок.

🈶 text-box — сокращённый способ управления вертикальными отступами текста через text-box-trim и text-box-edge. Особенно полезно для точного выравнивания текста.

Теперь обе возможности доступны во всех основных браузерах.

А в экспериментальном режиме Firefox 154 также получил progress() — ещё один интересный шаг в сторону более гибной fluid-типографики.

🔗 Источник

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#release_digest

🔥 — 1 2 3
❤️ — undefined undefined undefined
🥰 — 3 3 3
🤔 — 0 1 2

🐸 Библиотека фронтендера

#code_challenge #js

🛠 Управляйте localhost-портами без лишнего lsof

Port-Whisperer — CLI для тех случаев, когда на 3000, 5173 или другом порту внезапно уже что-то запущено.

🤩 показывает занятые порты
🤩 определяет процессы и приложения
🤩 помогает завершать ненужные процессы
🤩 умеет мониторить порты в реальном времени

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

👩‍💻 GitHub

🐸 Библиотека фронтендера

#stack

✏️ OTP-инпут, который вы усложняли зря

Разделённые поля, кастомные маски, десятки строк JS и ещё одна зависимость в бандле — всё это часто делают ради обычного одноразового кода.

ℹ️ Этот гайд показывает корректный, доступный и удобный OTP-инпут можно сделать на одном <input> — по стандартам, с автозаполнением и без фреймворков.

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#read_watch

⚡️ Контроль целевых браузеров сборки

Если приложение «работает у вас», это не показатель. Важно понимать, под какие версии браузеров фактически собирается билд.

npx browserslist

Команда выводит реальный список целевых браузеров на основе .browserslistrc или package.json.

⏺ Это напрямую влияет на:

— транспиляцию через @babel/preset-env
— CSS-префиксы (Autoprefixer)
— подключение polyfills
— размер bundle

Без проверки вы либо раздуваете сборку, либо теряете совместимость. Browserslist — инструмент контроля, а не просто CLI-утилита.

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#readme

🫧 Gooey-эффекты для React без мыла на тексте

liquid-gooey превращает обычные React-компоненты в «жидкие» интерфейсы: элементы могут сливаться, тянуться друг за другом и плавно менять форму.

🤩 Morph — объединяет элементы в gooey-массу
🤩 Move — создаёт жидкий след за движущимся элементом
🤩 Dissolve — позволяет изображениям «растворяться» при контакте

Эффект применяется к отдельному SVG-слою, а настоящий DOM остаётся сверху. Поэтому текст, иконки, фокус и интерактивность не страдают от blur-фильтров.

npm install liquid-gooey

<Liquid blur={6} contrast={18}>
  <Liquid.Item x={open ? -54 : 0} y={open ? -34 : 0}>
    <button>Menu</button>
  </Liquid.Item>
</Liquid>

Есть поддержка Safari, prefers-reduced-motion, CSS-темизации и MIT-лицензия.

🔗 Полезно, если делаете нестандартные UI, интерактивные меню, табы или микровзаимодействия.

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#stack

📚 Читаете ли вы техническую литературу, чтобы прокачать свои навыки?

❤️ — да, постоянно читаю
👍 — иногда читаю
👾 — почти не обращаюсь к книгам, получаю знания из других источников

Посоветуйте в комментариях книги, которые показались вам наиболее полезными.

Больше полезных книг — у нас в канале @progbook 📍

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#career_merge

🚀 В новой версии браузера сразу несколько полезных изменений для веб-интерфейсов:

🔵 autocorrect теперь можно контролировать прямо через HTML — для input, textarea и contenteditable.

🔵OpaqueRange позволяет работать с выделенными участками текста внутри input и textarea. Например, для подсветки текста, inline-подсказок и popover.

🔵Reference Target улучшает работу ARIA-ссылок с Shadow DOM — label, aria-labelledby и другие ID-ссылки теперь могут обращаться к элементам внутри компонента.

🔵CPU Performance API позволяет определить производительный класс устройства и адаптировать интерфейс под его возможности.

🔵Connection Allowlists дают возможность ограничивать внешние endpoint’ы, к которым страница может обращаться через Fetch и другие Web API.

🔵WebGPU получил управление размером subgroup в compute shader — особенно интересно для тяжёлых вычислений и AI-задач.

И ещё несколько изменений для PWA, WebGPU, медиа и безопасности.

🔗 Источник

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#release_digest

🔥 — 1 2 5 3 4
❤️ — 1 2 3 5 4
🥰 — 1 2 5 4 3
🤔 — 1 5 2 3 4

🐸 Библиотека фронтендера

#code_challenge #js

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#pixel_pause

😮 Visual Types: типизация через картинки

Вместо чтения про "Union type позволяет переменной быть одним из нескольких типов" — видишь схему, и всё сразу понятно.

Что покрывает:

🔤 Примитивы, объекты, массивы, Union/Intersection типы, дженерики — все базовые концепции. Полезно для начинающих в TypeScript или тех, кто запутался в терминологии.

🔗 Ссылка на гид

🐸 Библиотека фронтендера

#readme #ts