🔗 Подборка свежих статей

1⃣ Создаем иммерсивную трехмерную визуализацию погоды

Пошаговое руководство по симуляции солнца, дождя, снега и грозы в интерактивном трехмерном приложении для прогноза погоды.

2⃣ Почему @starting-style не заменит keyframes

Автор показывает, что за красивым синтаксисом скрываются подводные камни специфичности и неожиданные баги, из-за которых старые добрые keyframes по-прежнему оказываются надёжнее.

3⃣ Почему исходный код TypeScript усеян var-ами

🐸 Библиотека фронтендера

#read_watch #react #js #ts

🔗 Подборка свежих статей

⚪️ Обзор Cursor 1.7: Пишем to-do приложение с ИИ-агентом

⚪️ Стоит ли пользоваться функцией If() в CSS

⚪️ CCXT + CoinGecko: гибкий сбор рыночных данных для собственного криптотрекера

🐸 Библиотека фронтендера

#read_watch

🛎 Жесткое собеседование на позицию с зарплатой 320К

В видео разбираются сложные вопросы и задачи собеседования: ООП, SOLID, алгоритмы, рефакторинг, Docker и Kubernetes.

ℹ️ Узнайте, какие знания и навыки требуются для успешного прохождения.

🐸 Библиотека фронтендера

#read_watch

🔗 Что почитать

⏺ Rust вместо React: как я написал Telegram WebApp SDK

Эксперимент разработчика, который переписал фронт для Telegram-ботов на Rust и разобрался, где язык реально выигрывает у JS.

⏺ Frontend Security: The Most Ignored Skill Every Developer Needs in 2025

Medium-разбор, почему XSS, CSP и supply-chain атаки всё ещё ломают SPA, и как встроить безопасность в CI/CD.

⏺ Почему Google Переводчик «ломает» React (и другие веб-приложения)

Автор показывает реальные кейсы, обходные пути и поднимает важный вопрос: имеет ли фреймворк право на полный контроль над DOM?

🐸 Библиотека фронтендера

#read_watch #react #js #ts

📱 Chrome теперь сам переводит интерфейсы

Google тихо вкатил в Chrome 143 локальные AI-возможности: теперь браузер умеет распознавать язык и переводить текст прямо на устройстве, без внешних сервисов.

🔤 Всё — на Next.js 16 + React 19, без единого запроса к серверу.

🔥 Как это работает:

— LanguageDetector мгновенно определяет язык текста локально.

— Translator создаёт пару “source → target” и переводит прямо в браузере.

— При первом запуске модель (1–2 ГБ) скачивается один раз и кешируется.

— Весь процесс — полностью приватный и офлайн.

📎 Читать подробнее

🐸 Библиотека фронтендера

#read_watch

👨‍🦳 Почему <div role="button"> — это не кнопка

Частая картина в коде:

<div class="btn" role="button">Нажми меня</div>

Кажется, что role="button" превращает <div> в кнопку. Но это не так.

🔤 Ключевой инсайт:

role="button" только сообщает скринридерам «это кнопка», но НЕ добавляет поведение кнопки.

У такого "div-button" по-прежнему нет:

- Фокуса с клавиатуры (Tab)
- Активации по Space/Enter
- Состояния disabled
- Доступного имени

Всё это нужно программировать вручную через JS.

⏺ Есть способ проще:

button {
  all: unset;
}

Одна строка CSS сбрасывает стили браузера — и можно стилизовать <button> как угодно, сохраняя всю встроенную доступность.

Семантический HTML — это не только про «правильность». Это способ избежать лишней работы.

📎 Читать подробнее

🐸 Библиотека фронтендера

#read_watch

🙃 2025 год, а тултипы всё ещё живут своей жизнью

Сделал подсказку для кнопки — работает идеально, пока не появится футер, скролл или resize. И вот тултип уже уехал за экран.

Нашли статью, где сравнивают три подхода:

🈂️ от «сделать быстро» до «сделать правильно»
🈂️ с готовыми примерами, live demo
🈂️ и CSS Anchor Positioning — пока экспериментальное API (только Chromium)

🔗 Ссылка на статью

💬 А вы как решаете позиционирование тултипов?

🐸 Библиотека фронтендера

#read_watch

🎯 CSS научился считать

В Chrome 142 появилась мощная фича — range syntax для container style queries и функции if(). Теперь CSS может сравнивать числа и принимать решения на лету.

Что это значит на практике:

Раньше мы могли проверять только конкретные значения. Теперь — сравнивать: больше, меньше, равно.

ℹ️ Умная тема

Контейнер с кастомной яркостью. CSS сам решает, какой цвет текста использовать:

#container {
  --lightness: 10%;
  
  color: if(
    style(--lightness < 50%): white;
    style(--lightness >= 50%): black
  );
}

Если фон темный (< 50%) — текст белый. Светлый — чёрный. Автоматически!

ℹ️ Умный бейдж уведомлений (см. на картинке)

ℹ️ Адаптивная типографика

CSS проверяет размер шрифта и подбирает оптимальную жирность:

font-weight: if(
  style(1em < 32px): 100;
  style(1em > 32px): 900
);

Маленький текст — тонкий шрифт. Большой — жирный. Для читаемости.

Главное:

✅ Работает с custom properties
✅ Работает с attr() из HTML
✅ Сравнивает разные единицы (px, em, 😵
✅ Поддерживает все числовые типы CSS

Поддержка: Chrome 142+

📎 Читать подробнее

🐸 Библиотека фронтендера

#read_watch

🔗 Что почитать

🎥 Список уровней производительности веб-анимаций

Какие веб-анимации быстрые, какие тормозят браузер, и почему безопаснее всего анимировать transform и opacity. Помогает быстро выбирать плавные анимации без лишней нагрузки.

🎥 Не используйте useTransition повсюду

Когда useTransition реально улучшает плавность интерфейса, а когда только усложняет код.

🎥 Что произошло за последнии пару лет с GC в V8

Какие идеи позволили сделать сборку мусора быстрее и менее заметной для пользователя.

🐸 Библиотека фронтендера

#read_watch

🤔 Нужен ли CSS псевдо-класс, которого не существует

У нас есть :open для элементов вроде <details> в открытом состоянии. Логично, что должен быть и :closed для закрытого, правда?
Но вот незадача: можно же просто написать :not(:open). Зачем плодить сущности?

С другой стороны — что проще прочитать: :closed или :not(:open)? Думаете в отрицаниях — это нормально?
CSS Working Group три года спорила об этом вопросе, и финал вас удивит.

😮 Спойлер: консенсус развалился, и :closed отправили в небытие... пока что.

История о том, как простое решение может стать философской дилеммой. Читайте, если хотите узнать, почему иногда меньше — это действительно больше 🔜

🔗 Ссылка на статью

🐸 Библиотека фронтендера

#read_watch

👨‍💻 Где читаете про новые фичи и лучшие практики

Официальные доки — это хорошо. Но давайте честно: половину знаний мы получаем из случайных статей, чьих-то каналов и обсуждений в комментариях.

Интересно узнать:

📌 Какие телеграм-каналы или блоги вы читаете регулярно?
📌 Есть ли YouTube-каналы, которые реально помогли разобраться в сложных темах?
📌 В каких комьюнити задаёте вопросы, когда застряли?
📌 Кто из авторов объясняет так, что всё сразу становится понятно?

🎈 Может быть, вы сами ведёте блог или делитесь опытом — расскажите об этом тоже, пришло ваше время!

Соберём список реально полезных мест для фронтендеров. Пишите в комментариях ⬇️

🐸 Библиотека фронтендера

#read_watch