Библиотека фронтендера | 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
加入频道
⭐️ 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
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM