Библиотека фронтендера - JS React

🚀 В новой версии браузера сразу несколько полезных изменений для веб-интерфейсов: 🔵 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

📚 Читаете ли вы техническую литературу, чтобы прокачать свои навыки? ❤️ — да, постоянно читаю 👍 — иногда читаю 👾 — почти не обращаюсь к книгам, получаю знания из других источников Посоветуйте в комментариях книги, которые показались вам наиболее полезными. Больше полезных книг — у нас в канале @progbook 📍 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #career_merge

⭐️ Как JavaScript исполняется под капотом V8 Вы пишите let x = 1 + 2, а под капотом V8 уже строит синтаксическое дерево, генерирует байт-код и думает, стоит ли компилировать это в машинный код. Что в карточках: — Как V8 парсит и интерпретирует код — Что делает TurboFan и зачем нужен байт-код — Как работает сборка мусора — И почему порядок добавления свойств в объект — это не мелочь Если хотите писать реально быстрый JS, нужно понимать, как его читает движок. 🔗 Читать статью 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #under_hood

🫧 Gooey-эффекты для React без мыла на тексте liquid-gooey превращает обычные React-компоненты в «жидкие» интерфейсы: элементы могут сливаться, тянуться друг за другом и плавно менять форму. 🤩 Morph — объединяет элементы в gooey-массу 🤩 Move — создаёт жидкий след за движущимся элементом 🤩 Dissolve — позволяет изображениям «растворяться» при контакте Эффект применяется к отдельному SVG-слою, а настоящий DOM остаётся сверху. Поэтому текст, иконки, фокус и интерактивность не страдают от blur-фильтров. npm install liquid-gooey • • Menu Есть поддержка Safari, prefers-reduced-motion, CSS-темизации и MIT-лицензия. 🔗 Полезно, если делаете нестандартные UI, интерактивные меню, табы или микровзаимодействия. 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #stack

⚡️ Контроль целевых браузеров сборки Если приложение «работает у вас», это не показатель. Важно понимать, под какие версии браузеров фактически собирается билд. npx browserslist Команда выводит реальный список целевых браузеров на основе .browserslistrc или package.json. ⏺ Это напрямую влияет на: — транспиляцию через @babel/preset-env — CSS-префиксы (Autoprefixer) — подключение polyfills — размер bundle Без проверки вы либо раздуваете сборку, либо теряете совместимость. Browserslist — инструмент контроля, а не просто CLI-утилита. 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #readme

✏️ OTP-инпут, который вы усложняли зря Разделённые поля, кастомные маски, десятки строк JS и ещё одна зависимость в бандле — всё это часто делают ради обычного одноразового кода. ℹ️ Этот гайд показывает корректный, доступный и удобный OTP-инпут можно сделать на одном — по стандартам, с автозаполнением и без фреймворков. 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #read_watch

🛠 Управляйте localhost-портами без лишнего lsof Port-Whisperer — CLI для тех случаев, когда на 3000, 5173 или другом порту внезапно уже что-то запущено. 🤩 показывает занятые порты 🤩 определяет процессы и приложения 🤩 помогает завершать ненужные процессы 🤩 умеет мониторить порты в реальном времени Полезная утилита для локальной разработки, особенно когда одновременно работают несколько проектов. 👩💻 GitHub 🐸 Библиотека фронтендера #stack

🔥 — 1 2 3 ❤️ — undefined undefined undefined 🥰 — 3 3 3 🤔 — 0 1 2 🐸 Библиотека фронтендера #code_challenge #js

🦊 Firefox 154: новые возможности CSS 🈶 sibling-index() и sibling-count() — позволяют получить позицию элемента среди соседей и их общее количество. Удобно, например, для динамических эффектов и декоративных раскладок. 🈶 text-box — сокращённый способ управления вертикальными отступами текста через text-box-trim и text-box-edge. Особенно полезно для точного выравнивания текста. Теперь обе возможности доступны во всех основных браузерах. А в экспериментальном режиме Firefox 154 также получил progress() — ещё один интересный шаг в сторону более гибной fluid-типографики. 🔗 Источник 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #release_digest