🎯 Почему важно использовать web.dev/baseline

Разработка для веба — это всегда компромисс: хочется использовать новейшие фичи, но нужно поддерживать старые браузеры. Раньше приходилось гуглить поддержку каждой API вручную. Теперь есть Baseline.

🧩 Что такое Baseline?
Это инициатива от Google, которая помогает понять: какие фичи HTML, CSS и JS можно использовать без страха, потому что они стабильно работают в большинстве актуальных браузеров.

💡 Преимущества использования Baseline:

🔍 Чёткие метки в MDN и caniuse: теперь ты увидишь, входит ли API в "Baseline" прямо на странице документации.

📅 Упрощение поддержки: можно целиться в "Baseline 2022" или "2024" — это значит, что фичи стабильно поддерживаются браузерами, обновлёнными после соответствующего года.

🔧 Осознанный выбор технологий: ты не просто вслепую добавляешь :has() или View Transitions API, а знаешь, что они реально работают у большинства пользователей.

🛠 Пример:
Если ты хочешь использовать :has() в CSS — проверь, входит ли она в Baseline текущего года. Если нет — подожди или добавь graceful degradation.

📌 Итог:
Используй web.dev/baseline, чтобы меньше гадать и больше создавать. Это инструмент для уверенных решений и стабильных интерфейсов.

P.s вот ссылка которая должна вам помочь подготовить окружение.

🧹 Lintинг в фронтенде: что использовать для JS, TS, HTML и CSS?

Чистый код — это не только про стиль, но и про производительность и поддержку. Вот актуальные линтеры, которые стоит использовать:

📦 JavaScript и TypeScript
🔧 ESLint — стандарт индустрии.
Поддерживает как JS, так и TS (через @typescript-eslint/parser и @typescript-eslint/eslint-plugin).
Сотни готовых правил + возможность писать свои.

🧱 HTML
🔧 html-eslint
Обёртка над ESLint, которая позволяет линтить HTML как будто это JS-абстракция.
Поддерживает правила вроде обязательного alt, запрета inline styles и т.д.

🎨 CSS
🔧 stylelint
Долгое время был основным инструментом для линтинга CSS, SCSS, Less и даже встроенных стилей.

❗️НО! ESLint недавно добавил официальную поддержку CSS через eslint-plugin-css (aka css-eslint).

Это значит, что можно использовать единый инструмент (ESLint) для всего фронтенда: JS, TS, HTML, CSS.

➡️ Уже стоит рассматривать css-eslint как замену stylelint — особенно для новых проектов.

📌 Итог:
Один ESLint способен покрыть весь ваш стек.Это упрощает конфигурацию, снижает количество зависимостей и улучшает DX.

🚀 Cloudflare Pages — хостинг + CDN для фронтенд-проектов

Если ты делаешь сайты на Astro, Next.js, SvelteKit, React или просто на HTML+JS, то Cloudflare Pages — это мощный инструмент, который стоит освоить.

🔍 Что это вообще такое?
Cloudflare Pages — это Jamstack-хостинг от Cloudflare. Он работает по принципу:

• ты пушишь код в GitHub →
• Cloudflare сам собирает проект (CI/CD) →
• заливает результат в свой глобальный CDN →
• твой сайт мгновенно доступен по всему миру.

💡 Почему это круто:
✅ Бесплатно, даже с автосборкой при каждом пуше
🌍 CDN от Cloudflare — твой сайт кэшируется в сотнях точек по всему миру
⚡️ Молниеносная загрузка — минимальная задержка, даже в Азии и США
🔐 Автоматический HTTPS, без ручной возни с сертификатами
🧩 Edge Functions — можно писать serverless-обработчики прямо на краю (например, проверку форм или авторизацию)
🌐 Custom domains — подключаешь свой домен за пару минут
📁 Бесконечный трафик — нет лимитов по посещениям или отдаче

🎖Проекты заливаются автоматически после пуша в main, а страницы открываются за ~50ms. Идеально для лендингов, блогов и документации.

📌 Альтернатива Netlify, Vercel, GitHub Pages — только без ограничений по трафику и с мощной CDN от Cloudflare.

Хочешь подробный гайд по настройке или сравнение с другими платформами? Пиши в комменты👇

🚀 Анонс: UI-kit для Astro

Начинаю разработку UI-кита, заточенного исключительно под Astro — без React, без Vue, без избыточных зависимостей. Только чистые Astro-компоненты с фокусом на максимальную производительность и удобство интеграции.

💡 Что будет в основе:
— Astro-компоненты — легко подключать, просто использовать
— Темизация через CSS-импорты — хочешь светлую тему? Подключи один файл. Хочешь тёмную — другой.
— Версия с JavaScript и без — где можно, компоненты будут работать вообще без JS. Где нужен интерактив — предусмотрю лёгкие версии с минимальным скриптом.
— Поддержка дизайн-токенов — цвета, отступы, размеры будут легко настраиваемыми через переменные
— Никакого рантайма, никакой магии — всё предсказуемо, ясно и просто
— Минимальный бандл — не тянем UI-библиотеки или фреймворки, всё максимально "чистое"

🧩 Что войдёт в первую версию:
Кнопки, инпуты, модалки, табы

Tooltip’ы, уведомления

Компоненты навигации (меню, сайдбар и пр.)

Карточки, контейнеры и layout-блоки

🌐 Документация:
Сделаю полноценный сайт-документацию на Astro, где всё будет:
— с примерами кода
— с живыми демо
— с упором на мгновенную загрузку
Размещу это на Cloudflare Pages, чтобы всё открывалось моментально даже на слабом интернете.

Проект будет открытым — планирую выложить на GitHub и развивать дальше с фокусом на производительность, простоту и эстетичную реализацию UI без излишеств.

Если тебе близка философия:
"Меньше — лучше. Быстрее — важнее. UI — не должен тормозить.",
то оставайся на связи — скоро будет первый пруф-концепт.