Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
Ir al canal en Telegram
Все самое полезное для фронтенда в одном канале. Наши курсы: https://clc.to/WV2U4g По рекламе: @proglib_adv Для обратной связи: @proglibrary_feeedback_bot РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4
Mostrar más
Red:📈 Análisis del canal de Telegram Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
El canal Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js (@frontendproglib) en el segmento lingüístico de Ruso es un actor destacado. Actualmente la comunidad reúne a 21 033 suscriptores, ocupando la posición 6 155 en la categoría Tecnologías y Aplicaciones y el puesto 31 296 en la región Rusia.
📊 Métricas de audiencia y dinámica
Desde su creación el невідомо, el proyecto ha mostrado un crecimiento acelerado, reuniendo a 21 033 suscriptores.
Según los últimos datos del 26 agosto, 2026, el canal mantiene una actividad estable. En los últimos 30 días la variación de miembros fue de -109, y en las últimas 24 horas de -6, conservando un alto alcance.
- Estado de verificación: No verificado
- Tasa de interacción (ER): El promedio de interacción de la audiencia es 8.03%. Durante las primeras 24 horas tras publicar, el contenido suele obtener 4.18% de reacciones respecto al total de suscriptores.
- Alcance de las publicaciones: Cada publicación recibe en promedio 1 689 visualizaciones. En el primer día suele acumular 879 visualizaciones.
- Reacciones e interacción: La audiencia responde de forma activa: el promedio de reacciones por publicación es 12.
- Intereses temáticos: El contenido se centra en temas clave como фронтендера, навигация, css, javascript, api.
📝 Descripción y política de contenido
El autor describe el recurso como un espacio para expresar opiniones subjetivas:
“Все самое полезное для фронтенда в одном канале.
Наши курсы: https://clc.to/WV2U4g
По рекламе: @proglib_adv
Для обратной связи: @proglibrary_feeedback_bot
РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4”
Gracias a la alta frecuencia de actualizaciones (últimos datos recibidos el 27 agosto, 2026), el canal mantiene la vigencia y un amplio alcance. La analítica demuestra que la audiencia interactúa activamente con el contenido, lo que lo convierte en un punto de referencia dentro de la categoría Tecnologías y Aplicaciones.
21 033
Suscriptores
-624 horas
-367 días
-10930 días
Archivo de publicaciones
+6
⭐️ Как 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>⚡️ Контроль целевых браузеров сборки
Если приложение «работает у вас», это не показатель. Важно понимать, под какие версии браузеров фактически собирается билд.
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);
}
💬 Закрепляем скролл чата внизу без JavaScript
С помощью overflow-anchor можно обойтись без MutationObserver и scrollTo():
<div id="scroller">
...
<div id="anchor"></div>
</div>
#scroller * { overflow-anchor: none; }
#anchor { overflow-anchor: auto; height: 1px; }
🎯 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} />
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
#pixel_pause
😧 Совет по HTML: как разом отключить сразу несколько полей формы
Достаточно добавить атрибут
disabled к тегу `<fieldset>` — и все элементы формы внутри него станут неактивными автоматически, без необходимости прописывать это для каждого по отдельности.
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
#readme
+4
📖 Под капотом браузера: баги гидрации
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)
);reduce + sort = компактный способ заменить кучу if-else и делать гибкую сортировку по любым ключам.🐸📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #readme #js
Repost from Proglib.academy | IT-курсы
🤔 У большинства разработчиков уже есть подписки на 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
