Biblioteca Frontend - JS React

С вас ❤️, если жизненно! 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #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

⭐️ Что стоит знать про WebGL WebGL — это не только 3D в браузере, а доступ к возможностям GPU из JavaScript для игр, симуляций, карт и визуализаций. Что разобрано в карточках: ➡️ Что такое WebGL и как он работает в браузере ➡️ Зачем он нужен и где применяется ➡️ Какие библиотеки упрощают работу с WebGL ➡️ Минимальный пример инициализации контекста 📌 Для профи рекомендуем книгу OpenGL ES 2.0 Programming Guide — это база, на которой построен WebGL, и лучший способ понять, как всё работает под капотом. 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #career_merge

🧩 UX Components — энциклопедия элементов интерфейса Сервис помогает понять, какой UI-компонент выбрать и как его использовать. Для аккордеонов, поиска, таблиц, чатов и других паттернов есть: — сценарии использования и состояния; — названия в разных дизайн-системах; — иконки из 12 библиотек; — рекомендации W3C ARIA; — промпты для AI-инструментов. Также можно изучить 210 дизайн-систем, сравнить компоненты и подключить базу через MCP. 🔗 Ссылка 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #stack

📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #pixel_pause