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

⏱️ CSS-совет: используйте табличные цифры для таймеров Когда цифры в таймере или счётчике меняются, текст может «прыгать» — всё из-за разной ширины символов. Исправить это можно одной строкой: .stopwatch { font-variant-numeric: tabular-nums; } tabular-nums включает OpenType-функцию табличных цифр: все числа занимают одинаковую ширину, поэтому таймеры, счётчики, цены и другие числовые значения остаются ровными и не вызывают сдвигов интерфейса. 💡 Работает только если выбранный шрифт поддерживает табличные цифры (например, Inter, Roboto, IBM Plex Sans и многие современные OpenType-шрифты). 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #readme

😋 Продуктивность для фронтенд-разработчиков Фреймворки и библиотеки — это основа, но в работе часто решают именно инструменты, которые экономят время и делают проекты удобнее. Собрали подборку сервисов и тулз, которые стоит попробовать: ➡️ Windsurf — новый IDE с встроенным ИИ для автодополнений, рефакторинга и генерации тестов. ➡️ ESLint + Biome — линтеры и форматтеры нового поколения для единых кодстайлов и быстрой проверки ошибок. ➡️ Bundlephobia — моментально показывает размер npm-пакета и помогает выбрать оптимальную библиотеку. ➡️ React Developer Tools — официальный инспектор компонентов и профайлер для React/Next.js. ➡️ Fig / Warp — современные терминалы с автодополнением, скриптами и интеграциями для фронтендеров. 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #stack

🤔 После обновления CSS пользователь всё ещё видит старые стили. Что вероятнее? ❤️ — браузер использует кэш 🔥 — CSS не успел примениться 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #code_challenge

🫡 Один и тот же запрос к AI можно выполнить двумя способами — и получить совершенно разный результат. 1️⃣ способ — просто попросить написать код. Модель может сгенерировать рабочее решение, но именно на этапе проверки часто всплывают пропущенные edge case’ы, ошибки обработки или проблемы с тестами. 2️⃣ способ — дать агенту цикл Think → Act → Observe. Он не останавливается после первой попытки: планирует действия, проверяет результат и, если находит ошибку, исправляет её и пробует снова. Самое интересное, что разница здесь не столько в модели ❕ Claude, GPT или другая LLM могут быть одинаковыми. Разницу создаёт инженерная система вокруг них. 📅 Именно это разберём 23 июля в 19:00 (МСК) на бесплатном вебинаре с Алексеем Жиряковым (Executive Director в Сбере, GenAI Data Platform, ex-CTO Stream и KION). На живом демо покажем, как один и тот же запрос работает без агентной системы и с ней 🔥 🔗 Регистрация 🏃♀️ Proglib Academy

💡 Большая шпаргалка по современному стеку Неважно, давно вы пишете на React или только готовитесь к собеседованию — некоторые вещи всё равно приходится периодически освежать в памяти. 🟡 Внутри: — Hooks и жизненный цикл компонентов; — Props, State, Context API; — формы, списки и роутинг; — оптимизацию производительности; — популярные паттерны; — Next.js, React Query, Zustand, Tailwind CSS и другие инструменты экосистемы; — вопросы с собеседований и roadmap React-разработчика. 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #readme

🔥 Новый способ делать fluid typography в CSS Вместо готовых формул через clamp() автор предлагает использовать progress(). Такой подход позволяет плавно менять размер текста без конфликта с пользовательскими настройками масштаба шрифта. Что дает: 🔴 брейкпоинты остаются в px, а размеры — в rem; 🔴 типографика корректно учитывает настройки доступности; 🔴 вычисления выполняются прямо в CSS. Минус один: Firefox пока не поддерживает progress(), поэтому нужен fallback. 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #hotfix

🌗 Как сайт узнаёт, что у вас включена тёмная тема Для этого существует медиавыражение prefers-color-scheme, которое сообщает, какую тему оформления использует пользователь в операционной системе. @media (prefers-color-scheme: dark) { body { background: #111; color: #fff; } } 🔤 Если нужно определить тему или реагировать на её смену в JavaScript, используйте window.matchMedia(): const media = window.matchMedia("(prefers-color-scheme: dark)"); function applyTheme(isDark) { document.documentElement.dataset.theme = isDark ? "dark" : "light"; } applyTheme(media.matches); media.addEventListener("change", (event) => { applyTheme(event.matches); }); Так можно автоматически переключать тему приложения без перезагрузки страницы и синхронизировать её с настройками системы. 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #readme

🧩 Почему полифиллы до сих пор нужны вебу Полифиллы часто критикуют за то, что они занимают имена будущих API и могут ограничивать разработчиков стандартов. 🔴 Но отказ от них проблему не решает: разработчики всё равно будут писать собственные fallback-реализации — только менее переносимые и сложнее поддерживаемые. Главная польза полифиллов в другом: ♾ позволяют использовать новые возможности до полной поддержки браузерами; ♾ переключаются на нативную реализацию, когда она появляется; ♾ дают стандартам обратную связь от реальных проектов; ♾ не позволяют одному отстающему браузеру тормозить развитие всей платформы. Проблемы возникают когда востребованная возможность слишком долго не получает стабильного стандарта и нативных реализаций. 🔗 Читать подробнее 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #blueprint #web_platform

📌 Интересный эксперимент с Reddit: разработчик написал Markdown-редактор на чистом React и показал, как обойтись без тяжелых редакторных фреймворков. Разбираем главные идеи, которые помогли добиться высокой производительности 💡 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #under_hood