🤚 То, что не проходит модерацию в ТГ…

Уходит на Х 😎

Загляните в профиль и найдёте:

🖥 полезные штуки
🤡 мемы
🔥 хитрые лайфхаки

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

#read_watch

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

1️⃣ $220K в месяц на рендеринге JavaScript

История Prerender — как простой сервис для индексации JS-сайтов вырос в SaaS с органическим ростом и стабильной выручкой.

2️⃣ «Фулстек JavaScript: Секреты для миддлов»

Обзор книги Милесии МакГрегор: переход от middle к senior, работа с legacy, архитектурные решения в NestJS и React, DevOps-подходы и важность soft-skills.

3️⃣ SolidJS под капотом: для React-разработчиков

Перевод статьи о том, как работает реактивная библиотека без виртуального DOM: сигналы, эффекты, прокси-хранилища и ловушки вроде деструктуризации пропсов.

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

#read_watch #js #react

📢 Навигация по каналу

Чтобы не теряться в потоке постов, мы собрали удобную навигацию по тегам. Всё нужное — в пару кликов:

#readme — код-сниппеты, CSS-трюки, JS one-liners, команды Git/CLI

#hotfix — реальные баги и проблемы с объяснением, как их исправить

#blueprint — high-level концепции и паттерны

#under_hood — разбираем, что происходит внутри фреймворков и браузера

#stack — обзоры библиотек, плагинов, инструментов

#release_digest — все важное за неделю/месяц в одном месте: новые версии фреймворков, релизы библиотек, ссылки и краткие описания

#code_challenge — интерактивные задачи с разбором на следующий день

#code_battle — столкновение технологий или подходов

#pixel_pause— мемы, юмор и забавные истории из фронтенд-жизни

#career_merge — советы по резюме, soft skills, вопросы с собеседований, обсуждение зарплат

#ux_review — изучаем интерфейсы и UX известных сайтов и приложений

#read_watch — подборки полезных материалов: статьи, конференции, GitHub, книги

🔈 Включайте уведомления, используйте теги для быстрого поиска и оставайтесь в курсе всего: от практических фич до мемов и свежих трендов.

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

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

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