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

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

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

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

РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4
Download Telegram
Последние часы со скидкой!

Мы уже закрыли вебинар «ИИ-агенты: новая фаза развития AI», но запись всё ещё доступна.

А дальше остаётся только практика. На курсе «ИИ-агенты для DS-специалистов» ты научишься разрабатывать агентов, собирать RAG-системы и адаптировать LLM под бизнес.

Сегодня цена ещё 57.000 ₽ с промокодом datarascals.
Завтра — 69.000 ₽.

👉 Успеть оплатить до полуночи
👍4🥱1
💖 why-did-you-render: быстрый детектор утечек в React

Подозреваете рост памяти после навигации? Включите детектор «болтливых» ре-рендеров — часто именно они топят heap.

Решение:


npm i -D @welldone-software/why-did-you-render



// src/index.jsx
import React from 'react'
import wdyr from '@welldone-software/why-did-you-render'
wdyr(React, { trackAllPureComponents: true }) // dev only


(точечно: MyWidget.whyDidYouRender = true)

➡️ Что получите:

— Логи в консоли с причинами ре-рендера (diff пропсов/стейта),

— Быстрый поиск «шумных» компонентов: несмемоизированные пропсы, коллбеки без useCallback, эффекты без cleanup.

➡️ Дальше — фиксим: мемоизация, стабилизация пропсов, корректные useEffect cleanups.

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

#readme #react
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥1👏1
FrontendConf 2025 - крупнейшая в России профессиональная конференция фронтенд‑разработчиков пройдет 20–21 октября 2025, Москва, Кластер «Ломоносов».

Что будет на конференции:

• 1000+ представителей российского фронтенд‑сообщества;

• 2 дня насыщенной программы: 55 докладов в 8 ключевых секциях (AI во фронтенде, Архитектура, Производительность, Инженерный UX, Культура команд, FrontOps и др.);

• Практические форматы: 2 воркшопа, 4 круглых стола, 6 кейсов‑факапов;

• Ламповые дискуссии и дебаты - живой обмен мнениями;

• After‑party для неформального нетворкинга и обмена опытом.

Почему это выгодно вашей компании:

• Конкретные решения, которые можно внедрить за недели, а не месяцы;

• Меньше проблем в продакшне и быстрее релизы - экономия времени и денег;

• Приоритетные предложения, план внедрения и оценка эффекта;

• Повышение экспертизы команды и удержание ключевых специалистов.

Присоединяйтесь 20–21 октября - два дня концентрированного опыта, полезных контактов и конкретных инструментов для развития фронтенд‑команд.

Подготовьте короткую просьбу руководителю и Забронируйте билет - сайт конференции.

#реклама
О рекламодателе
👍32
Зачем фронтендеру знать Web Vitals

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

➡️ В карточках — три ключевых показателя: LCP, CLS и FID. Разберём, что они означают и как влияют на UX.

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

#career_merge #middle
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9🔥2🎉1
🤖 Курс «ИИ-агенты для DS-специалистов»

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

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

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

🔗 Записаться на курс и узнать подробности
🔥4
⭐️ Небольшая задачка на логику

Посмотрите на код (он в картинке 👆).

Какой ответ выведет консоль

Объясните, почему вывод именно такой. Почините код, чтобы выводилось корректное значение счётчика.

Подсказка: исправьте код без использования bind и дополнительных временных переменных.

Ответ в комментах скрывайте под спойлер 😉

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

#code_challenge #js
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🥱3
🔥 Проп-спрединг без фильтрации

На картинке 3 ситуации:

➡️ Передали ...props в корневой <div> → в DOM улетают лишние атрибуты

➡️ Поймали warning в консоли и начали гадать откуда он

➡️ Правильный вариант → деструктурируем нужные props и явно прокидываем

⌨️ Рекомендации:

— Никогда не спредьте всё подряд в корень

— Лишние атрибуты → лишние баги

— Чётко указывайте только то, что действительно нужно в DOM

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

#hotfix #react
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4👾2
🤖 Курс «ИИ-агенты для DS-специалистов»

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

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

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

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

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

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
4👍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
👍4🔥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
🔥21👍1