🔥 — 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