Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
22K subscribers
2.6K photos
172 videos
39 files
4.98K links
Все самое полезное для фронтенда в одном канале.

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

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

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

РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4
Download Telegram
🤖 Курс «ИИ-агенты для DS-специалистов»

Последняя возможность в этом году освоить ИИ-агентов с Proglib— старт живых вебинаров на курсе уже 3 октября!

Уже 24 студента изучают 5 лонгридов подготовительного модуля, чтобы сформировать базу к старту живых вебинаров с Никитой Зелинским.

📚 Бонус: при оплате до 30 сентября вы получите дополнительный лонгрид для подготовки к курсу. Это отличный способ подойти к занятиям уже с базой.

🔥 А ещё после прохождения курса у вас будет достаточно знаний, чтобы участвовать в хакатоне с призовым фондом 1 125 000 ₽.

🔗 Записаться на курс и узнать подробности
😁2
💳 Подборка свежих статей

1️⃣ $220K в месяц на рендеринге JavaScript

История Prerender — как простой сервис для индексации JS-сайтов вырос в SaaS с органическим ростом и стабильной выручкой.

2️⃣ «Фулстек JavaScript: Секреты для миддлов»

Обзор книги Милесии МакГрегор: переход от middle к senior, работа с legacy, архитектурные решения в NestJS и React, DevOps-подходы и важность soft-skills.

3️⃣ SolidJS под капотом: для React-разработчиков

Перевод статьи о том, как работает реактивная библиотека без виртуального DOM: сигналы, эффекты, прокси-хранилища и ловушки вроде деструктуризации пропсов.

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

#read_watch #js #react
Please open Telegram to view this post
VIEW IN TELEGRAM
5👍3
🔑 Ограничение частоты вызова (throttle)

Когда обработчик срабатывает слишком часто (scroll, resize, mousemove) — он грузит браузер и рендер.

➡️ Решение: ограничиваем вызовы по времени с помощью throttle.

➡️ Где пригодится:

— Индикатор прогресса при скролле;
— Drag&drop;
— Частые API-запросы (real-time).

⚡️ Экономит ресурсы и делает UI отзывчивее. Компактная реализация без lodash.

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

#readme #js
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥1
🌸 Разбор задачи на this: почему счётчик выводит NaN

Раннее мы выкладывали задачу 📎

Правильный ответ: NaN

➡️ Почему так:

— В setTimeout обычная функция → её this указывает на window (или undefined в strict).

— У глобального объекта нет count.

— undefined++ → NaN.

Фикс без bind и переменных:


function Counter() {
this.count = 0;

this.start = function() {
setTimeout(() => {
this.count++;
console.log(this.count);
}, 1000);
}
}


📌 Стрелочные функции берут this из окружения, а не создают свой.

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

#code_challenge #js
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3🔥32
🐈‍⬛️ Redux vs Zustand: управление состоянием фронтенда

➡️ Redux

— Строгая архитектура и предсказуемость
— Огромное комьюнити и тулзинг
— Подходит для enterprise-приложений

➡️ Zustand

— Минимализм и простота
— Меньше кода, легче читать
— Подходит для небольших и средних проектов

Голосуем реакциями:

👍 — Redux
❤️ — Zustand

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

#code_battle
Please open Telegram to view this post
VIEW IN TELEGRAM
49👍24
⭐️ Типовая ловушка с :focus-within и :not() в формах

Многие используют эти псевдоклассы для управления состояниями форм и элементов, но есть ловушки:

➡️ Почему так:

1. :focus-within реагирует только на фокус внутри самого элемента, не на внешние события.

2. :not() может «съесть» вложенные селекторы неправильно — порядок и специфичность важны.

3. Если элемент содержит другие интерактивные элементы (кнопки, ссылки), браузер может вести себя по-разному.

➡️ Как исправить:

— Использовать более точные селекторы и отдельные правила для состояния фокуса.

— Проверять вложенные элементы: :focus-within смотрит любые потомки, не только input.

— Не смешивать :not() с сложными вложенными селекторами — часто проще добавить класс через JS.

Проверяйте конкретный DOM и порядок CSS-правил.

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

#hotfix #css
Please open Telegram to view this post
VIEW IN TELEGRAM
3👍1
⚛️ React 19.2 — что нового

Свежий релиз уже на npm.

Главные фишки:

<Activity /> — новый способ управлять частями приложения (видимые/скрытые активности, предзагрузка скрытых страниц).

useEffectEvent — решение для «ивентов» внутри эффектов без лишних перезапусков.

cacheSignal — для React Server Components, помогает правильно завершать кэшированные запросы.

Performance Tracks — новые треки в Chrome DevTools для анализа производительности.

Partial Pre-rendering — частичный пререндеринг: статику можно отдать с CDN, а динамику дорисовать позже.


📌 Плюс: обновлён eslint-plugin-react-hooks v6, поддержка Web Streams в SSR и мелкие багфиксы.

🔗 Подробности — в блоге React

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

#stack #react
Please open Telegram to view this post
VIEW IN TELEGRAM
6🔥2
👾 AI-агенты — настоящее, о котором все говорят!

Уже 3 октября стартует второй поток нашего нового курса «AI-агенты для DS-специалистов».

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

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

🎓 В рамках курса вы научитесь:

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

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

🗓️ Завтра первый вебинар, успевайте залететь в ряды ИИ-первопроходцев 👈🏻
2
Как вернуть удалённую ветку в Git

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

Решение:


git reflog
git checkout -b my-branch <commit_hash>


➡️ Что произойдёт:

— git reflog покажет историю всех действий, даже удалённых веток,
— можно найти нужный commit_hash,
— checkout -b создаст ветку заново с того же коммита.

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

#readme #git
Please open Telegram to view this post
VIEW IN TELEGRAM
👍193🔥1
📌 Разбор интерфейсов: Spotify

Сегодня смотрим, за счёт чего Spotify ощущается живым и динамичным.

➡️ Разберём адаптивную сетку карточек, hover-эффекты, lazy-loading с skeleton’ами и плавные переходы между экранами. Плюс — UX-мелочи, которые делают сервис привычным и удобным.

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

#ux_review
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6👏1🥱1
👍 Главные новости недели

➡️ Нативные API вместо фреймворков

Браузеры становятся самостоятельной платформой: роутинг, state и компоненты всё чаще делают без React/Vue.

➡️ Платформенная инженерия для фронтенда

Команды начинают выстраивать общие библиотеки, стандарты и инструменты. Результат — меньше техдолга и ускорение разработки.

➡️ Что нового в Svelte / SvelteKit

В свежем апдейте появились улучшения remote functions (батчинг, lazy discovery) и экспериментальная async SSR в конфигурации experimental.async.

➡️ Протокол для взаимодействия backend-агентов с фронтом

Компания CopilotKit представила AG-UI — открытый протокол + UI-слой, который стандартизирует взаимодействие агентов (AI / backend) с фронтенд-частями, делая обмен состоянием, событиями и интерфейсом «из коробки».

➡️ Новинки Vue + TresJS v5

В выпуске упоминается релиз TresJS v5 — обёртка над Three.js / WebGL, интегрированная с Vue, с улучшениями DevEx и новыми возможностями 3D-визуализаций внутри Vue приложений.

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

#release_digest
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥21