❔ Как вернуть удалённую ветку в Git

Иногда ветку удаляют по ошибке — локально или даже на удалённом репозитории. А потом всплывает, что там был нужный код или незавершённая работа. Поднимать заново неудобно, особенно если не помнишь последний коммит.

Решение:

git reflog
git checkout -b my-branch <commit_hash>

➡️ Что произойдёт:

— git reflog покажет историю всех действий, даже удалённых веток,
— можно найти нужный commit_hash,
— checkout -b создаст ветку заново с того же коммита.

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

#readme #git

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

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

#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, книги

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

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

🔥 Адаптив без медиазапросов

Медиазапросы хороши, но часто усложняют каскад. Современный CSS позволяет адаптировать сетку контекстно, без @media.

.card-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  transition: .3s;
}

.card-grid:has(.expanded) { grid-template-columns: 1fr; }

.card-grid:has(.card:hover) .card:not(:hover) {
  opacity: .4;
  transform: scale(.98);
  filter: blur(1px);
}

➡️ Что получите:

— Контейнер, «реагирующий» на состояние внутренних элементов,

— Адаптивные layout-переходы без JS и без медиазапросов,

— Гибкость, пригодную для UI-эффектов, collapsible-контента и интерактивных сеток.

➡️ Применимо для: карточек, галерей, layout-адаптации внутри компонентов, инлайн-редакторов.

⚙️ Поддержка: Chrome 105+, Safari 15.4+, Firefox 121+.

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

#readme #css

👀 Проверяем, является ли строка палиндромом

Палиндром — это слово или фраза, которые читаются одинаково в обе стороны:
level, madam, А роза упала на лапу Азора.

const isPalindrome = str =>
  (s = str.toLowerCase().replace(/[^a-zа-яё0-9]/gi, '')) === [...s].reverse().join('');

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

• toLowerCase() — приводит строку к одному регистру.

• replace(/[^a-zа-яё0-9]/gi, '') — убирает все символы, кроме букв и цифр.

• [...s].reverse().join('') — переворачивает строку.

• Сравниваем оригинал и перевёрнутую версию.

💡 Если важна производительность и память, используем цикл без создания копий строки:

function isPalindrome(str) {
  const s = str.toLowerCase().replace(/[^a-zа-яё0-9]/gi, '');
  for (let i = 0, j = s.length - 1; i < j; i++, j--) {
    if (s[i] !== s[j]) return false;
  }
  return true;
}

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

#readme #js

💳 Плавный ввод данных карты на Vue.js

Изящная форма с мягкими микровзаимодействиями и реалистичной анимацией переворота при вводе CVV.

♾ Автоматически форматирует номер, определяет тип карты (Visa, Mastercard, Amex) и проверяет корректность данных.

🎨 Отличный пример того, как детали делают UX «живым».

🔗 Ссылка на CodePen

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

#readme #css

🌪 Как отменить merge, не потеряв изменения

Иногда после git merge всё идёт не по плану — конфликты, сломанные файлы, а иногда и случайный merge не в ту ветку.
Но откатывать всё не хочется — ведь изменения нужны.

Решение:

git merge --abort

Если merge уже закоммичен:

git reset --merge ORIG_HEAD

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

— merge откатится,
— изменения в файлах сохранятся,
— можно спокойно поправить конфликты и попробовать снова.

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

#readme #git

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

Вместо @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