Библиотека фронтендера - JS React

😧 Как ловить «висящие» запросы SPA иногда «залипает» — индикатор крутится, ответа нет. Причина часто в pending-запросах. 1️⃣ Как искать: — DevTools → Network → сортировка по Status — Pending-запросы = кандидаты — Вкладка Initiator покажет, что их вызвало — Waterfall помогает увидеть длинные цепочки 2️⃣ Фиксы: — Ставьтете таймауты (axios/fetch): fetch(url, { signal: controller.signal }) — Отменяйте запросы в cleanup useEffect — Избегайте дубликатов при повторных монтированиях 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #readme

🖥 Что нового в Chrome 151 В стабильной версии Chrome появился новый элемент . Он позволяет запускать работу с камерой и микрофоном через браузерный контрол, без отдельного вызова getUserMedia(). Ещё несколько заметных изменений: — shadowrootslotassignment у позволяет настраивать ручное распределение слотов в Declarative Shadow DOM прямо из HTML; — новые метрики soft-navigation и interaction-contentful-paint помогают измерять производительность SPA после переходов и пользовательских действий; — метод textStream() появился у Request, Response и Blob; — событие wheel получило свойство momentum, чтобы отличать физический скролл от инерционного; — XML-парсер для ряда сценариев переписали на Rust ради защиты от ошибок памяти. Также Chrome 151 больше не поддерживает macOS 12: для обновлений понадобится macOS 13 или новее. 🔗 Источник 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #release_notes #chrome #browser

🫧 Генератор необычных SVG-фигур за пару кликов Blobmaker помогает быстро создавать случайные органические формы для лендингов, иллюстраций и декоративных элементов. Можно настроить количество точек и контраст между ними, подобрать подходящую «кляксу», а затем скачать её в SVG или сразу скопировать код. 🔗 Ссылка 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #stack

С вас ❤️, если жизненно! 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #pixel_pause

😎 Антипаттерны фронтенда Если хочется понять не только «как правильно», но и «как делать не стоит» — вот подборка материалов про антипаттерны. Полезно и джунам, и мидлам, чтобы узнавать знакомые грабли: 1️⃣ ТОП 7 антипаттернов React ➡️ Видео с наглядными примерами ошибок, которые превращают проект в хаос: от пропс-дриллинга до гигантских компонентов. 2️⃣ Организация потоков данных во фронтенд-приложениях ➡️ Хотя статья не полностью «антипаттерны», есть разбор того, как плохая организация потоков данных может породить антипаттерны. Полезно понять, как избежать каша в данных. 3️⃣ Паттерны и антипаттерны написания условий в JS ➡️ Разбор типичных if-else и тернарных адов. Показывает, как простые привычки могут убить читаемость. 4️⃣ Избегайте 5 антипаттернов с коллекциями в JS ➡️ Как неправильно работать с массивами и коллбэками, и какие практики реально спасают от багов. 5️⃣ Антипаттерны в разработке: что с ними делать ➡️ Теория и практика: откуда берутся антипаттерны, как их распознавать и как чинить, если уже всё плохо. 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #read_watch

💡 Почему inline-пропсы отключают React.memo React.memo пропускает повторный рендер только тогда, когда пропсы не изменились. Объекты и функции React сравнивает по ссылке через Object.is. 🔵 Поэтому такой код создаёт новые ссылки при каждом рендере родителя: addToCart(id)} /> Даже если содержимое не изменилось, React.memo видит новые пропсы и снова рендерит ProductRow. 🔵 Статический объект лучше вынести за компонент: const ROW_STYLE = { padding: 16 }; 🔵 А колбэк, который передаётся в memoизированного потомка, стабилизировать через useCallback: const handleAddToCart = useCallback((id) => { addToCart(id); }, []); Но делать это для всех объектов и функций не нужно. Оптимизация имеет смысл, когда родитель часто обновляется, дочерний компонент достаточно тяжёлый и лишние рендеры подтверждены в React DevTools Profiler. 🔗 Ссылка на статью 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #under_hood

😧 Как определить системную тему в JavaScript prefers-color-scheme показывает, какую тему пользователь выбрал в системе: светлую или тёмную. 🔜 Через matchMedia() это можно проверить из JavaScript: console.log(theme.matches ? 'dark' : 'light’); 🔜 И подписаться на изменение темы без перезагрузки страницы: theme.addEventListener('change', ({ matches }) => { document.documentElement.dataset.theme = matches ? 'dark' : 'light'; }); Полезно для интерфейсов, которые автоматически подстраиваются под настройки ОС. 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #readme

Куда на самом деле уходят токены во время агентного кодинга? 🔥

😱 Знакомо? Лимит уже закончился, а задача всё ещё не готова. Часть токенов могла уйти на повторное чтение файлов, лишний контекст и неудачные попытки. ⚡️ Этому посвящён отдельный блок курса «ИИ для разработчиков». Вы разберёте расходы на собственных проектах, сравните подходы и найдёте места, где агент выполняет лишнюю работу. В итоге станет понятнее, сколько ресурсов выделять на запуск, когда его останавливать и в какой момент лучше изменить подход 🔍 До 31 июля курс можно купить со скидкой, а все материалы останутся в бессрочном доступе. 🔗 Узнать подробности о курсе 🏃♀️ Proglib Academy