Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

⭐️ Как 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

<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

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

npx browserslist

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

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

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

Есть ИИ-проект? Превратите его в шанс выиграть 1 500 000 рублей Росэлторг.Университет запустил конкурс технологических проектов RLT.Startup для стартапов и команд разработчиков. Задача — создать прототип B2B-маркетплейса, где ИИ-агенты автоматизируют взаимодействие продавцов и покупателей. Пять лучших команд представят проекты инвесторам и экспертам ИТ-отрасли на финальной защите в Москве 19 ноября. 💎 Главный приз — 1 500 000 рублей 🔜 Заявки до 1 сентября 🎟 Регистрация

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

📐 Делаем 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

💬 Закрепляем скролл чата внизу без 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

🎯 Interest Invoker API — тултипы без единой строчки JS Раньше, чтобы показать поповер по ховеру, нужен был JavaScript. Теперь — достаточно HTML. ➡️ Как работает: interesttarget связывает элемент-триггер и поповер. Браузер сам обрабатывает hover, focus или long-press и показывает подсказку. Можно совмещать с Popover API и Anchor Positioning для точного позиционирования. ⚠️ Поддержка: Пока экспериментальная — работает в Chromium-браузерах (Chrome 135+, Edge 135+). В Firefox и Safari API ещё не реализован, поэтому стоит использовать фолбэк или JS-вариант для совместимости. 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #readme #html

⚡ 35 млн точек в браузере — и около 72 FPS ChartGPU — библиотека для визуализации больших датасетов через WebGPU вместо Canvas2D или WebGL. ⬇️Поддерживает стриминг данных, ⬇️несколько графиковна одном ⬇️GPUDevice, GPU-decimation и ⬇️даже 3D-серии. Авторы ⬇️показывают бенчмарк с 35 ⬇️млн точек примерно при 72 ⬇️FPS. Особенно интересно для дашбордов, мониторинга, финтеха и observability-интерфейсов, где обычный Canvas уже становится узким местом. ❗️ Но есть важное ограничение: fallback на Canvas/WebGL нет, поэтому поддержку WebGPU нужно проверять отдельно. 🔗 Ссылка на GitHub 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #stack

🤔 Вопрос с собеседования Что произойдёт с состоянием компонента, если изменить его key?

<UserForm key={userId} userId={userId} />

Допустим, userId меняется с 42 на 43. ❤️ — состояние сохранится, изменятся только props 🔥 — React пересоздаст компонент, и state сбросится 👍 — state сбросится только при использовании React.memo 👇 Правильный ответ (нажми, чтобы прочитать): React связывает состояние с позицией компонента в дереве. key позволяет дополнительно указать его идентичность. Когда key меняется, React воспринимает элемент как другой компонент и создаёт его заново — поэтому локальный state сбрасывается. И да: key нужен не только для списков. Его можно намеренно использовать, например, чтобы очистить форму при переключении на другого пользователя. 💼 Щелкаешь такие задачи как орешки? Найди проект с достойной зарплатой тут 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #career_merge

📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #pixel_pause

😧 Совет по HTML: как разом отключить сразу несколько полей формы Достаточно добавить атрибут disabled к тегу `<fieldset>` — и все элементы формы внутри него станут неактивными автоматически, без необходимости прописывать это для каждого по отдельности. 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #readme

📖 Под капотом браузера: баги гидрации SR и гидрация обещают быстрый рендер, но на деле фронтендеры часто сталкиваются с расхождениями между сервером и клиентом. ➡️ В карточках — разберём, как работает процесс, где появляются баги и как их избежать. 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #under_hood

🔑 Cортировка по нескольким ключам Когда нужно отсортировать массив объектов сразу по нескольким полям — вместо вложенных if можно сделать так:

const sortBy = (arr, keys) => [...arr].sort((a, b) =>
  keys.reduce((res, k) => res || (a[k] > b[k] ? 1 : a[k] < b[k] ? -1 : 0), 0)
);

Где пригодится: — Сортировка таблиц и списков в UI; — Подготовка данных из API; — Фильтры («сначала по категории, потом по цене»).

reduce + sort = компактный способ заменить кучу if-else и делать гибкую сортировку по любым ключам.

🐸📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #readme #js

🤔 У большинства разработчиков уже есть подписки на IDE, GitHub Copilot, Claude, ChatGPT или облачные сервисы.

Логично, что обучение тоже постепенно приходит к той же модели: не покупать отдельный курс под каждую новую тему, а иметь доступ ко всей библиотеке и выбирать, что актуально именно сейчас.

Такой формат недавно появился и в Proglib Academy. Вместо одного курса — доступ сразу ко всей библиотеке и новым материалам, которые появляются в подписке 😎 🔗 Подробнее 🏃‍♀️ Proglib Academy

Кажется, у онлайн-обучения появился формат, которого давно не хватало 👇

🔊 936 звуков для интерфейсов в одной библиотеке Open-source-библиотека собрала звуковые эффекты для кнопок, уведомлений, загрузки, ошибок, успешных действий, переключателей и других состояний интерфейса.

Все звуки распределены по 12 стилям — среди них Minimal, Glass, Sci-Fi, Mechanical, Zen и Retro. Это помогает выдержать единый звуковой стиль во всём продукте.

⚡️ Звуки можно подключать вручную или использовать готовый промпт, чтобы AI-агент сам подобрал подходящий эффект. Полезная находка для SaaS, игр и интерактивных интерфейсов. А разобраться, как внедрять такие решения в реальные проекты с помощью AI-инструментов, можно на курсе «ИИ для разработчиков» 👋 🔗 Ссылка 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #stack #ux_review