Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
21.8K subscribers
2.78K photos
191 videos
42 files
5.11K links
Все самое полезное для фронтенда в одном канале.

По рекламе: @proglib_adv

Учиться у нас: https://proglib.io/w/77178ed4

Для обратной связи: @proglibrary_feeedback_bot

РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4
Download Telegram
🚀 Storybook 10 — меньше кода, больше типобезопасности

Вышел крупнейший релиз года для тех, кто работает с UI-компонентами.

Три ключевых изменения:

1. ESM-only — код стал на 29% легче и теперь не минифицирован (дебажить проще)

2. CSF Factories — новый формат историй для TypeScript: меньше бойлерплейта, больше автокомплита

3. Новый sb.mock — простой и надёжный автомокинг модулей (совместно с Vitest)

⚠️ Требует Node 20.16+ / 22.19+ / 24+

Детали — в карточках выше

🔗 Ссылка на релиз

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

#career_merge
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍72🤩2
Frontend VK Hub — как работают наши интерфейсы?

Что делает интерфейсы VK быстрыми, удобными и устойчивыми под нагрузкой миллионов пользователей?
Frontend VK Hub — это сообщество инженеров, которые создают и развивают пользовательские интерфейсы для ВКонтакте, VK Play, VK WorkSpace и других сервисов экосистемы. Мы делимся практическим опытом, рассказываем о подходах к производительности, внедрении современных фреймворков и всему, что связано с улучшением Developer Experience.

Здесь можно найти инсайты от ведущих фронтенд-разработчиков, разборы реальных задач, новости индустрии и приглашения на мероприятия VK. И конечно, вакансии!

Подписывайся!
🥰5👍1
🔥 Props через 5 уровней — рефакторим через children

➡️ Проблема (1 картинка):

Передаём user через Dashboard и Sidebar, хотя они его не используют. Компоненты становятся «курьерами» для чужих данных.

➡️ Решение (2 картинка):

Используйте композицию через children — передавай данные напрямую туда, где они нужны.

Что это даёт:

🟡 Без prop drilling — данные идут напрямую к UserProfile
🟡 Dashboard и Sidebar становятся переиспользуемыми
🟡 Меньше связности, проще тестировать и поддерживать

Когда что использовать:

Композиция — данные нужны только конечному компоненту
Context API — данные нужны многим компонентам на разных уровнях (theme, auth, locale)

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

#hotfix #react
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥10👍32👏1
⭐️ Замыкания: когда теория не помогает

Все знают, что такое closure. Но почему тогда обработчики событий выводят не то, а React работает с устаревшим state?

➡️ Разбираем классические баги с замыканиями — от циклов с var до утечек памяти.

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

#under_hood #js
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🥰5👏3
🛒 Black Friday от Proglib.academy!

Только до 30 ноября — скидка 40% на ВСЕ курсы.

Пора добавить в корзину не носки, а новые скиллы: Python, математика для Data Science, AI, алгоритмы и структуры данных, ML.

🎓 Выбирай курс, который реально двинет тебя в карьере, и учись со скидкой.

👉 Учиться со скидкой
🥰5
This media is not supported in your browser
VIEW IN TELEGRAM
🙃 2025 год, а тултипы всё ещё живут своей жизнью

Сделал подсказку для кнопки — работает идеально, пока не появится футер, скролл или resize. И вот тултип уже уехал за экран.

Нашли статью, где сравнивают три подхода:

🈂️ от «сделать быстро» до «сделать правильно»
🈂️ с готовыми примерами, live demo
🈂️ и CSS Anchor Positioning — пока экспериментальное API (только Chromium)

🔗 Ссылка на статью

💬 А вы как решаете позиционирование тултипов?

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

#read_watch
Please open Telegram to view this post
VIEW IN TELEGRAM
4🥰3🤔2
This media is not supported in your browser
VIEW IN TELEGRAM
🕺 AnimatiSS — коллекция CSS-анимаций

Библиотека готовых keyframe-анимаций: bounce, fade, shake, blur, jello и другие эффекты.

Можно посмотреть демо на странице и скопировать код нужной анимации. Всё на чистом CSS, легковесно.

📎 Ссылка

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

#readme #css
Please open Telegram to view this post
VIEW IN TELEGRAM
8🤩2👍1
🧩 Как исправить любой баг — когда даже ИИ сдался

Классическая история: всё работает, пока не добавишь один невинный fetch().

Claude несколько раз уверенно объявлял: «готово, всё исправил» — но баг оставался. Так родилась статья о настоящем процессе отладки:

📍 Как находить минимальный репро,
📍 Когда стоит менять подход,
📍 И почему без «well-founded recursion» в отладке можно застрять навсегда.

Карточки выше — краткий конспект, а оригинал обязательно стоит прочитать 📎

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

#blueprint
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤‍🔥53🥱2🔥1