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

⭐️ Что стоит знать про 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

🤨 Хорошая документация сегодня экономит время не только коллегам, но и 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

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