Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

😧 Как определить системную тему в 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

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

Впереди 7 недель работы со своим репозиторием. Вебинары проходят вживую и остаются в записи.

Стартуем 31 августа. До конца июля можно присоединиться по ранней цене, а доступ к материалам останется бессрочным 😀 🔗 Посмотреть, что будет на курсе 🏃‍♀️ Proglib Academy

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

🦊 Firefox 153: что нового Mozilla выпустила Firefox 153. Собрали изменения, которые действительно пригодятся в работе.

🅰️ Picture-in-Picture API теперь поддерживается на десктопе — сайты могут программно переключать видео в режим «картинка в картинке».

🅰️ HTML <select> стал гибче: браузер теперь корректно парсит вложенные элементы, что открывает путь к кастомизируемым селектам.

🅰️ Импорт текста как модуля — появилась поддержка 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 выглядит сложно. Но проблема не в CSS, а в подходе к разметке. На оригинальном сайте левая и правая части каждого этапа вынесены в отдельные элементы — 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

🌗 Тёмная тема только через prefers-color-scheme — не лучший вариант Системную тему стоит использовать как настройку по умолчанию, но пользователю полезно оставить выбор для конкретного сайта. В <head> добавляем:

<meta name="color-scheme" content="light dark">

А переключатель меняет значение на:

meta.content = "light";      // светлая
meta.content = "dark";       // тёмная
meta.content = "light dark"; // как в системе

🔤 Выбор можно сохранить в localStorage. color-scheme влияет не только на собственные стили, но и на системные цвета, скроллбары и стандартные элементы формы. При этом prefers-color-scheme по-прежнему отражает тему ОС, а не выбранную тему сайта — это важно учитывать. 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #readme #css

😸 Каждый разработчик подходит к задаче со своим опытом: помнит прошлые решения, знает ограничения проекта и понимает, какой код команда пропустит на ревью. Для человека это естественная часть работы. У Claude Code этого контекста по умолчанию нет — только задача и инструкции, которые ему дали.

Поэтому в большой команде недостаточно просто выбрать хорошую модель. ❗️ Нужно ещё объяснить ей, как у вас устроена разработка: какие подходы приняты, что обязательно проверять и по каким правилам принимать решения.

🗓 23 июля в 19:00 МСК поговорим об этом на бесплатном вебинаре с Алексеем Жиряковым — он Executive Director в Сбере, руководит GenAI Data Platform, и с этой проблемой сталкивался не раз 🔥 Покажет живое демо, разберём, как встроить AI в процесс разработки так, чтобы он реально помогал, а не добавлял ещё один повод для споров на ревью. 🔗 Занять место на вебинаре 🏃‍♀️ Proglib Academy

✏️ Если вы уже работаете с Claude Code, Cursor или Copilot, этот вебинар будет особенно полезен. Разберут, как превратить AI из инструмента для отдельных задач в часть инженерного процесса ⬇️

🏗 Разбираем Layout Shift Когда страница загружается, а кнопки и текст смещаются — это не просто раздражает, а напрямую влияет на UX и рейтинг сайта. В карточках: — что такое CLS и как его измеряют, — как находить источник смещения, — и какие практики помогают сделать интерфейс статичным и предсказуемым. 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #career_merge

🧑‍💻 Учиться агентной разработке — у тех, кто уже внедряет её в бигтехе Курс «ИИ для разработчиков» ведут практики из ведущих российских IT-компаний 🔥 🔵 Они прошли путь от первых экспериментов с AI до рабочих процессов, в которых агенты помогают команде писать код, готовить PR и быстрее доводить задачи до продакшена. В ближайшее время познакомим вас с каждым преподавателем. Программа курса — по ссылке 🎹 🏃‍♀️ Proglib Academy