Библиотека фронтендера | 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
加入频道
💻 Как обновить страницу без перезагрузки с Vite + HMR

Когда вы вносите правку, а браузер не мигает, не сбрасывает форму, не роняет состояние — это магия, имя которой Hot Module Replacement (HMR).

1️⃣ Используем Vite


npm create vite@latest my-app --template react
cd my-app
npm install
npm run dev


➡️ Из коробки вы получаете мгновенное обновление компонентов React (или Vue/Svelte), без перезагрузки всей страницы.

Что реально происходит:

Изменения в коде детектятся

Только изменённый модуль перезагружается

Состояние сохраняется (например, открытая вкладка или введённый текст)

Как можно кастомизировать:


// vite.config.js
export default defineConfig({
server: {
hmr: {
overlay: true, // показывает ошибки прямо в браузере
},
},
})


➡️ Можно отключить overlay или переопределить WebSocket-порт, если используете Docker или WSL.

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

#буст
Please open Telegram to view this post
VIEW IN TELEGRAM
⭐️ TypeScript: как использовать типы осознанно, а не формально

TypeScript дает огромные возможности — но где проходит грань между продуманной типизацией и избыточной сложностью?

Рассказываем в карточках, как типы превращаются в инструмент архитектуры.

➡️ Как типы помогают выразить бизнес-логику

➡️ Почему «невозможные состояния» — главный союзник надёжности

➡️ Чем брендирование типов спасает от неожиданных багов

➡️ Когда стоит остановиться и не усложнять дальше

👉 Скоро расскажем о техниках, которые делают систему типов полноценным языком проектирования.

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

🐸 Библиотека фронтендера
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
⚙️ Инструмент недели: CSS Peeper — стили сайта одним кликом

CSS Peeper — это минималистичное расширение для Chrome, которое позволяет мгновенно просматривать основные CSS-стили страницы: цвета, типографику и размеры элементов — удобно и наглядно.

Зачем нужен:

➡️ Быстро показывает ключевые параметры интерфейса — шрифты, цвета, отступы — без лишнего шума. Подходит для анализа чужих решений и поиска вдохновения.

➡️ Автоматически собирает используемые оттенки и отображает их в виде палитры.

➡️ Не перегружен данными, в отличие от DevTools: отображает только важную визуальную информацию.

➡️ Позволяет загружать ассеты (иконки, изображения) напрямую из интерфейса.

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

1⃣ Устанавливаем расширение

2⃣ Заходим на любой сайт, кликаем по иконке CSS Peeper в панели расширений

3⃣ Получаем чистый, аккуратный отчёт: цвета, шрифты, размеры и ассеты

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

📍 Используйте для декомпозиции чужих UI-решений и построения своих дизайн-систем

📍 Быстро собирайте визуальные референсы и палитры для проектов

📍 Анализируйте лендинги без копания в DOM и стилях вручную

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

Сайт CSS Peeper: подробное описание возможностей, тарифов и последних обновлений.

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

#буст
Please open Telegram to view this post
VIEW IN TELEGRAM
🥵 Устали от статей, где эйчары рассказывают, как на самом деле выглядит рынок труда в ИТ?

Мы тоже! Поэтому решили узнать правду и представить ее всем айтишникам — но нам нужен ваш голос. Опрос займет 3 минуты, а пользы — вагон для всего сообщества.

Результаты этого исследования помогут понять, как специалистам искать работу в 2025-м (а компаниям — специалистов).

👉 Если вы готовы сделать свой вклад в исследование — велком: https://clc.to/VGgyNA
😋 Никаких новых фреймворков — только React

Theo рассуждает, действительно ли React — финальная точка эволюции фронтенда. Почему экосистема вокруг него стала важнее самого фреймворка, и что могут противопоставить Svelte, Solid или Qwik?

3 причины посмотреть:

➡️ Чёткий обзор фронтенд-ландшафта 2025

➡️ Аргументированный разбор, почему React может удержаться на вершине

➡️ Мнения без хайпа — только по делу

🔗 Смотреть видео

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

#буст
Please open Telegram to view this post
VIEW IN TELEGRAM
📌 Команда дня: aspect-ratio

CSS-свойство aspect-ratio кардинально меняет подход к фиксированию пропорций блоков.


.element {
aspect-ratio: 16 / 9;
width: 100%;
}


💡 Что происходит: элемент автоматически сохраняет заданное соотношение сторон, независимо от ширины или высоты.

Для чего это:

➡️ Упрощает верстку адаптивных видео/картинок/контейнеров и позволяет отказаться от хитрых трюков с padding и позиционированием.

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

#буст
Please open Telegram to view this post
VIEW IN TELEGRAM
⭐️ 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