Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
22.9K subscribers
2.26K photos
132 videos
38 files
4.69K links
Все самое полезное для фронтенда в одном канале.

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

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

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

РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4
加入频道
⭐️ Как мы избавлялись от мертвого кода и улучшали проект

В начале провели детальный аудит и выявили «мертвые» участки — код и зависимости, которые лишь загромождали проект и замедляли работу.

В карточках расскажем о ключевых шагах и решениях, которые помогли:

➡️ Анализировать сборки и выявлять узкие места с помощью инструментов диагностики

➡️ Оптимизировать зависимости через дедупликацию и строгие правила статического анализа

➡️ Внедрять автоматические проверки для своевременного обнаружения неиспользуемого кода

➡️ Оценивать реальные результаты — уменьшение размера проекта и ускорение сборки

💡 Главное — не только убрать лишнее, но и внедрить процессы, которые сохранят чистоту кода в будущем.

🔗 Полная версия статьи от компании Контур

🐸 Библиотека фронтендера
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🧩 Как упростить большой React-компонент

Со временем компоненты обрастают логикой и теряют читаемость. Этот промпт помогает структурировать код и выделить переиспользуемые части.

Промпт:

Refactor this React component into smaller, reusable components. Provide a file structure and explain the reasoning behind each extraction.

Что делает этот промпт:

➡️ Делит код на логичные блоки — UI, логику, хуки

➡️ Предлагает структуру файлов

➡️ Объясняет, почему та или иная часть должна быть вынесена

➡️ Помогает перейти от «всё в одном файле» к чистой архитектуре

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

#буст
Please open Telegram to view this post
VIEW IN TELEGRAM
😱 Вся правда об увольнениях в IT в 2025-м

Пока все молчат о том, что происходит на рынке, мы решили выяснить реальную картину. Без прикрас и корпоративного пиара.

Но для этого нам нужна ваша помощь! Мы собираем данные от разработчиков, тестировщиков, менеджеров и всех, кто работает в ИТ, чтобы создать честное исследование о:

— реальных причинах массовых увольнений
— судьбе тех, кто остался за бортом IT-рынка
— том, сколько времени сейчас нужно на поиск работы

Почему это важно? Потому что сила в правде. Зная реальную ситуацию, вы сможете лучше понимать тренды рынка и планировать карьеру.

⚡️Пройдите опрос и помогите всему сообществу: https://clc.to/yJ5krg
🔧 Как настроить Lazy Loading для изображений и компонентов

Lazy Loading — отложенная загрузка ресурсов, которая ускоряет стартовую загрузку страницы и экономит трафик, особенно на медленных сетях.

Почему важно:

📍 Быстрая загрузка видимого контента
📍 Меньшая нагрузка на сеть и сервер
📍 Плавная подгрузка контента при прокрутке

Как внедрить:

1. Используем атрибут loading="lazy" для изображений:


<img src="image.jpg" loading="lazy" alt="Описание" />


2. Применяем Intersection Observer для кастомных элементов:


const observer = new IntersectionObserver((entries, obs) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const el = entry.target;
el.src = el.dataset.src;
obs.unobserve(el);
}
});
});

document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));


3. Используем динамический импорт компонентов:

React:


const LazyComp = React.lazy(() => import('./Component'));
<Suspense fallback="Загрузка..."><LazyComp /></Suspense>


Vue:


const LazyComp = defineAsyncComponent(() => import('./Component.vue'));


4. Предварительная загружаем критичные изображения:

Используйте <link rel="preload"> для важных ресурсов.

5. Тестируем производительность:

Chrome DevTools и Lighthouse помогут оценить эффект.

💡 Правильный Lazy Loading повышает скорость и комфорт работы сайта.

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

#буст
Please open Telegram to view this post
VIEW IN TELEGRAM
👾 AI-агенты — настоящее, о котором все говорят

На днях мы анонсировали наш новый курс AI-агенты для DS-специалистов 🎉

Это продвинутая программа для тех, кто хочет получить прикладной опыт с LLM и решать сложные задачи!

На обучении вы соберете полноценные LLM-системы с учётом особенностей доменных областей, получите hands-on навыки RAG, Crew-AI / Autogen / LangGraph и агентов.

🎓 В рамках курса вы научитесь:
— адаптировать LLM под разные предметные области и данные
— собирать свою RAG-систему: от ретривера и реранкера до генератора и оценки качества
— строить AI-агентов с нуля — на основе сценариев, функций и взаимодействия с внешней средой

Разберете реальные кейсы и научитесь применять похожие подходы в разных доменных областях, получите фундамент для уверенного прохождения NLP system design интервью и перехода на следующий грейд.

Старт 5 июля, а при оплате до 1 июня действует дополнительная скидка и бонус — эксклюзивный лонгрид по API и ML от Proglib.

Начните осваивать тему уже сейчас 👉 https://clc.to/Cttu7A
Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js pinned «👾 AI-агенты — настоящее, о котором все говорят На днях мы анонсировали наш новый курс AI-агенты для DS-специалистов 🎉 Это продвинутая программа для тех, кто хочет получить прикладной опыт с LLM и решать сложные задачи! На обучении вы соберете полноценные…»
⭐️ Фишка инструмента: Tree Shaking в Webpack

Tree Shaking — технология удаления неиспользуемого кода из итогового бандла. Webpack с ES6-модулями автоматически «отрезает» неиспользуемые функции и переменные, снижая вес файлов и ускоряя загрузку приложения.

Как использовать:

➡️ Пишите код с import/export (ES6 модули), а не с CommonJS (require).

➡️ Включайте mode: 'production' в настройках Webpack — это активирует минификацию и оптимизации, необходимые для Tree Shaking.

➡️ Используйте библиотеки с поддержкой ES6 модулей, иначе весь код библиотеки попадёт в сборку.

➡️ Проверяйте результат с помощью инструментов анализа бандла (например, webpack-bundle-analyzer).

💡 Зачем это нужно:

Меньший бандл — быстрее загрузка, меньше трафика, лучше производительность и отзывчивость.

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

#буст
Please open Telegram to view this post
VIEW IN TELEGRAM
⭐️ Как Angular менялся, пока вы не замечали: первые шаги к современному UI Kit

Часто именно мелкие улучшения задают тон для всего будущего развития.

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

➡️ Почему строгий режим TypeScript стал точкой невозврата

➡️ Как переход на Ivy ускорил сборку и упростил код

➡️ В чём были сложности первых попыток реализовать горячую замену модулей

➡️ Зачем пришлось распрощаться с Internet Explorer

➡️ Чем standalone компоненты изменили подход к архитектуре

👉 В следующей части расскажем, как появились революционные сигналы, хост-директивы и многое другое.

🔗 Полная версия статьи по ссылке

🐸 Библиотека фронтендера
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Последние 2 дня скидки на курс «AI-агенты для DS-специалистов»

Пока большинство дата-сайентистов строят модели и делают аналитику, рынок уже требует специалистов, которые создают автономные системы на базе ИИ-агентов.

Для этого мы подготовили специальный курс и собрали кучу дополнительного контента, который поможет погрузиться в тему еще глубже. Но чтобы получить все плюшки, успевайте до 1 июня.

🎁 Что вы получите при оплате курса до 1 июня:
— Промокод PROGLIBAIна 10 000 ₽ на курс, чтобы изучать AI-агентов еще выгоднее
— Эксклюзивный лонгрид по API и ML от Proglib

💡Что разберем на курсе «AI-агенты для DS-специалистов»:
— Реализацию памяти в цепочках langchain
— Полный пайплайн RAG-системы с оценкой качества
— Основы мультиагентных систем (MAS)
— Протокол MCP и фреймворк FastMCP

Промокод также действует на курсы «Математика для Data Science» и «Алгоритмы и структуры данных».

👉 Успейте до 1 июня: https://clc.to/Cttu7A