Frontend Library - JS React

🤨 Хорошая документация сегодня экономит время не только коллегам, но и AI. Почему она стала важнее, чем кажется, — в посте ниже 👇

😳 Documentation Driven Development звучит как ещё один модный термин. Пока не попробуешь объяснить свой проект AI. Агент работает только с тем контекстом, который ему дали. Если документация неполная или устарела, он начинает додумывать — отсюда появляется неверный код. 🔘 На курсе «ИИ для разработчиков» эту тему разбирает Арсений Харланов. Он покажет, как подготовить документацию и контекст, чтобы агент понимал архитектуру проекта, ограничения и связи между компонентами. Также разберём, как выбирать модель под задачу: Claude, DeepSeek, Qwen и другие ✏️ Впереди 7 недель работы со своим репозиторием. Вебинары проходят вживую и остаются в записи. Стартуем 31 августа. До конца июля можно присоединиться по ранней цене, а доступ к материалам останется бессрочным 😀 🔗 Посмотреть, что будет на курсе 🏃♀️ Proglib Academy

🦊 Firefox 153: что нового Mozilla выпустила Firefox 153. Собрали изменения, которые действительно пригодятся в работе. 🅰️ Picture-in-Picture API теперь поддерживается на десктопе — сайты могут программно переключать видео в режим «картинка в картинке». 🅰️ HTML стал гибче: браузер теперь корректно парсит вложенные элементы, что открывает путь к кастомизируемым селектам. 🅰️ Импорт текста как модуля — появилась поддержка import ... with { type: "text" }. 🅰️ Intl.Locale получил новые методы (getCalendars(), getTimeZones(), getWeekInfo() и другие) для работы с локалями. 🅰️ IndexedDB — поддержаны IDBObjectStore.getAllRecords() и IDBIndex.getAllRecords(). 🅰️ WebAssembly JS Promise Integration — WASM теперь может напрямую взаимодействовать с асинхронными JavaScript API через Promise. 🅰️ DevTools — Accessibility Inspector теперь показывает уровень заголовков (h1–h6), а не только сам факт, что элемент является заголовком. 🅰️ CSS — @supports selector(::-webkit-scrollbar) теперь возвращает true для совместимости, хотя полноценной поддержки стилизации этих псевдоэлементов по-прежнему нет. 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #release_notes #firefox

⚽ Заглянули под капот турнирной сетки FIFA На оригинальном сайте левая и правая части каждого этапа вынесены в отдельные элементы — HTML фактически повторяет расположение блоков на экране. 🔤 В карточках покажем более чистый вариант: как собрать такую же сетку через CSS Grid и Subgrid, сохранить логичную структуру DOM и адаптировать интерфейс без переписывания разметки. 🔗 Источник 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #ux_review

📌 useCallback: мемоизация функций в React useCallback(fn, deps) сохраняет одну и ту же ссылку на функцию между рендерами, пока не изменились зависимости. Почему важно: В React функции создаются заново при каждом рендере. Если их передавать в React.memo-компоненты или использовать в useEffect зависимостями — это вызовет лишние рендеры/эффекты. const handleClick = useCallback(() => { doSomething(); }, []); 💡 Антипример: Без useCallback дочерний React.memo-компонент будет рендериться каждый раз, потому что функция — новый объект. 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #readme

👀 Скорость разработки растёт, но вместе с ней появляется новая проблема — кодовая база быстро теряет единый стиль. Ниже — бесплатный вебинар о том, как этого избежать 💡

🤢 Чем больше разработчиков в команде начинают пользоваться Claude Code, тем заметнее одна проблема: кодовая база перестаёт выглядеть как работа одной команды. Где-то есть тесты, где-то их забыли. Где-то агент следует архитектуре проекта, где-то предлагает решение, которое с ней не сочетается. ⚠️ И это не проблема Claude Code. Он просто следует тому контексту, который получает от каждого разработчика. Завтра покажем, как передать AI инженерный контекст команды и не превратить его внедрение в ещё один источник хаоса. 🗓 23 июля, 19:00 МСК Бесплатно. 60 минут доклада + 30 минут вопросов. 🔗 Занять место на вебинаре и разобраться, почему так происходит 🏃♀️ Proglib Academy

🌈 Анимированные 3D-градиенты без Three.js Neat — визуальный редактор для создания анимированных WebGL-градиентов. Выбираете цвета и эффекты, смотрите результат в реальном времени и переносите готовую конфигурацию в проект. В новой версии движок переписали на чистый WebGL: размер сборки сократился примерно с 133 до 17 КБ gzip, а внешних зависимостей больше нет. 🔤 Есть готовые пресеты, React-пример, разные 3D-формы, зернистость, свечение и параллакс при скролле. Использовать можно бесплатно, но для удаления водяного знака нужна лицензия за €12 на домен 📍 🔗 Попробовать редактор 🔗 GitHub 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #stack

🤔 Что важнее для производительности длинного списка? ❤️ — обернуть каждый элемент в React.memo 🔥 — показывать только видимые элементы через виртуализацию 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #code_challenge