🌗 Автоматическая темная тема без медиазапросов

Вместо @media (prefers-color-scheme) можно использовать color-scheme:

:root {
  color-scheme: light dark;
  background: light-dark(#fff, #111);
  color: light-dark(#111, #fff);
}

➰ Что это дает:

— Автоматическое переключение темы по системным настройкам
— Скроллбары, инпуты и формы тоже меняют стиль
— Меньше кода и больше нативности

⚙️ Поддержка: Chrome 120+, Safari 17+, Firefox 120+

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

#readme #css

🌪 Как очистить объект от мусора

Иногда после API-запроса или сборки данных в объекте куча undefined — их не видно, но они мешают при сериализации, сравнении и логах.

const clean = obj => Object.fromEntries(
  Object.entries(obj).filter(([_, v]) => v !== undefined)
);

🔤 Что делает:

— пробегается по всем парам [ключ, значение],
— выкидывает те, где значение undefined,
— возвращает новый “чистый” объект.

🔴 Пример:

clean({ name: 'Alex', age: undefined, city: 'Berlin' });
// => { name: 'Alex', city: 'Berlin' }

🔤 Полезно:

— перед отправкой данных на сервер,
— при сборке форм,
— при логировании чистых JSON.

🔤 Для более «умной» версии (чистит и вложенные объекты):

const clean = obj =>
  Object.fromEntries(
    Object.entries(obj)
      .filter(([_, v]) => v !== undefined)
      .map(([k, v]) => [k, v && typeof v === 'object' && !Array.isArray(v) ? clean(v) : v])
  );

🔴 Эта версия:

— рекурсивно чистит вложенные объекты,
— не трогает массивы,
— остаётся компактной и читаемой.

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

#readme #js

🚀 Шпаргалка по HTML

Всё от базовой структуры до таблиц, форм, списков и современных тегов разметки.

➕ Отличный инструмент для быстрой проверки кода и обучения.

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

#readme #html

🧩 Как вернуть случайно удалённую ветку

Удалили локальную ветку — и поняли, что в ней были нужные коммиты? Не спешим паниковать — если она ещё жива в origin, всё можно вернуть одной командой:

git fetch origin refs/heads/feature-branch:refs/heads/feature-branch

🔤 Что произойдёт:

— Git скачает ветку с origin
— Восстановит её локально с тем же именем
— Вся история коммитов сохранится

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

#readme #git

✨ Вариативные отступы через clamp()

Делаем отступы адаптивными без медиазапросов — пусть дизайн сам подстраивается под ширину экрана:

.section {
  padding: clamp(1rem, 5vw, 3rem);
}

Что это дает:

— Минимальный отступ — 1rem, максимум — 3rem

— В промежутке — плавное масштабирование по ширине вьюпорта

— Один рядок кода вместо трёх @media

💡 Работает не только с padding, но и с font-size, margin, gap и даже border-radius

🔤 Поддержка: Chrome 79+, Safari 16+, Firefox 75+

Сейчас на курсы Proglib действует −40%🥰

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

#readme #css

🔍 Валидация форм без раздражения

Вместо :invalid, который срабатывает сразу, используйте :user-invalid.

Что это дает:

— Валидация срабатывает только после взаимодействия с полем

— Не показываем ошибки в пустой форме при загрузке

— Лучший UX без дополнительного JS

⚙️ Поддержка: Chrome 119+, Safari 16.5+, Firefox 88+

Сейчас на курсы Proglib действует −40%🥰

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

#readme #css