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

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

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

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

РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4
加入频道
⭐️ TypeScript: сложные типы — польза и пределы

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

Теперь расскажем в карточках о продвинутых техниках и гранях выразительности:

➡️ Использование брендированных типов для создания уникальных и безопасных идентификаторов

➡️ Применение шаблонных литералов и ключевого слова infer для построения динамических типов на основе строк

➡️ Создание рекурсивных типов для описания сложных вложенных структур и параметров URL

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

💡 Главное — не усложнять ради сложности, а повышать надёжность и поддержку.

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

🐸 Библиотека фронтендера
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
😔 Сертификаты в IT: плюс в карму при поиске работы или успокоительное для HR

Вы прошли онлайн-курс: 15 часов теории, 2 проекта, тестик в конце — и вот он, сертификат. Но помогает ли он реально устроиться на работу?

Что говорят сторонники курсов:

➡️ Завершить обучение и получить сертификат способен не каждый — это фильтр для мотивированных.

➡️ У джуна без опыта каждая бумажка имеет вес. Часто именно курс даёт первый проект в портфолио.

➡️ Структура, наставничество, код-ревью и обратная связь помогают тем, кто не умеет или не хочет учиться в одиночку.

Что говорят скептики:

➡️ Эти сертификаты есть у тысяч, если не миллионов. Реального веса они не несут.

➡️ Можно прослушать лекции на фоне, сдать тест «наугад» — и получить сертификат. Где в этом компетентность?

➡️ Многие курсы — это бизнес, а не образование. Их цель — продать, а не подготовить специалиста.

И главный вопрос:

Сертификаты от курсов — реальный шаг в профессию или просто визуальный фетиш для резюме, чтобы понравиться HR?

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

#междусобойчик
Please open Telegram to view this post
VIEW IN TELEGRAM
⭐️ React под капотом

В этой подборке — статьи для тех, кто хочет разобраться, как React работает изнутри: хуки, согласование, Fiber и архитектурные решения.

1️⃣ Как работает use внутри React: подробный разбор механизма работы хука use, включая его взаимодействие с другими хуками и внутренними структурами React.

2️⃣ Внутренние механизмы React: объяснение, как React использует виртуальный DOM, какие процессы происходят при обновлении компонентов и как работает метод render().

3️⃣ Алгоритм согласования (Reconciliation): понимание алгоритма согласования помогает оптимизировать производительность приложений, объясняя, как React определяет необходимость обновления компонентов.

4️⃣ Принципы проектирования React: официальный документ, описывающий философию и принципы, которыми руководствуется команда React при разработке библиотеки.

5️⃣ Понимание React Fiber: как он улучшает производительность рендеринга — обзор инкрементального рендеринга, приоритезации обновлений и конкурентного режима.

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

#свежак
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🙃 Топ-вакансий для фронтендеров за неделю

Frontend разработчик Vue.js — офис (Санкт-Петербург)

Team lead frontend developer — от 230 000 ₽, удаленно (Москва)

Frontend-разработчик (React / Next.js) — до 300 000 ₽, офис (Москва/Зеленоград/Казань)

Senior Frontend Developer (React) — от 200 000 до 250 000 ₽, удаленно (Москва)

Frontend-разработчик (TypeScript, React) — удаленно (Москва)

➡️ Еще больше топовых вакансий — в нашем канале Javascript jobs

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

#свежак
Please open Telegram to view this post
VIEW IN TELEGRAM
📌 Дайджест событий

Май выдался насыщенным: громкие релизы, масштабные конференции и хакатоны. Мы собрали 5 самых значимых инфоповодов:

1️⃣ React 19 RC

Кандидат в релизы с долгожданными фичами: встроенная поддержка async rendering, Server Components по умолчанию, hooks нового поколения (use API).

➤ Что это значит: архитектурный сдвиг для крупных SPA и SSR-приложений.

2️⃣ Google I/O 2025

Chrome 125 с WebGPU-ready, новый DevTools с AI-помощником, Project IDX как альтернатива VS Code.

➤ Тренд: AI-интеграции теперь не только в продукты, но и в инструменты разработчика.

3️⃣ Bun v1.2.14

➤ Что нового: поддержка catalog: для централизованного управления зависимостями в workspace, быстрый старт React-проектов с bun init --react и многое другое.

4️⃣ Hackathon: Vite Plugin Week

Комьюнити-событие для создания плагинов в экосистему Vite. Лучшие работы уже попали в официальный showcase.

➤ Зачем участвовать: возможность заявить о себе и прокачать open source-профиль.

5️⃣ Astro 5.8

Astro 5.8 официально прекращает поддержку устаревших версий Node.js и требует минимум 18.20.8, с переходом на Node.js 22.

➤ Что важно: проверьте .nvmrc и CI/CD окружения, обновите Node до 22 и Astro до последней версии.

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

#свежак
Please open Telegram to view this post
VIEW IN TELEGRAM
⚙️ Инструмент недели: как мгновенно проверить верстку на десятках экранов

Responsively App — это десктоп-приложение с открытым исходным кодом, которое позволяет тестировать адаптивность сайта сразу на нескольких экранах.

Зачем нужен:

➡️ Одновременный просмотр нескольких разрешений: от мобильных до 4K — в одном окне, без переключения между эмуляторами и вкладками.

➡️ Изменения в коде или инспекторе применяются сразу ко всем превью — мгновенная обратная связь.

➡️ Поддержка DevTools и автообновления страниц — удобно для отладки и правки на лету.

➡️ Повышает скорость фронтенд-разработки и гарантирует корректное поведение UI на любых экранах.

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

1️⃣ Скачиваем с официального сайта (доступно под macOS, Windows, Linux)

2️⃣ Открываем приложение и вводим URL проекта

3️⃣ Настраиваем нужные экраны (можно добавлять свои пресеты)

4️⃣ Изменяем стили, инспектируем DOM и отслеживаем адаптивность в реальном времени

💡 А если хочется как профи:

— Тестируйте дизайн-системы и компоненты под любые брейкпоинты

— Проводите демо для заказчиков: показывайте интерфейс сразу на всех устройствах

Полезные материалы:

Подробный гайд с описанием ключевых возможностей и сценариев применения
Исходный код на GitHub

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

#буст
Please open Telegram to view this post
VIEW IN TELEGRAM
🤯 Почему на собеседованиях в топовые компании проваливаются даже опытные разработчики

Проблема большинства программистов: вы отлично пишете код, знаете фреймворки и можете разобраться в любом проекте. Но когда интервьюер просит найти кратчайший путь в графе или отсортировать массив за O(n log n) — ступор.

Чтобы не теряться на базовых вопросах, приходите на курс «Алгоритмы и структуры данных».

Тем более, что мы дарим на него промокод PROGLIBAI на 10 000 ₽ в честь запуска другого курса — «AI-агенты для DS-специалистов».

🧐 Что будет на курсе по алгоритмам:
— Изучение производительности алгоритмов и O-нотации
— Числовые алгоритмы: от алгоритма Эвклида до решета Эратосфена
— Работа с массивами: от линейного поиска до оптимизации операций вставки/удаления
— Бинарный поиск и его применение в реальных задачах
— Практические задачи на каждую тему + обратная связь от преподавателей

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

👉 Успейте использовать промокод до 1 июня: https://clc.to/590e_g
⭐️ Как мы избавлялись от мертвого кода и улучшали проект

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

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

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

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

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

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

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

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

🐸 Библиотека фронтендера
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