📕 Библиотека UI-компонентов

Коллекция из 4000+ готовых элементов интерфейса: кнопки, карточки, инпуты, чекбоксы, лоадеры. Всё на чистом CSS или Tailwind.

🎥 Каждый элемент сделан сообществом, открыт по MIT-лицензии. Копируете код в один клик, вставляете в проект.

🔗 Ссылка

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

#readme #ui

😓 Роутинг в SPA — боль

Классика: слушаем click, ставим preventDefault(), делаем history.pushState(), потом ловим popstate и рендерим контент.
Работает, но это куча бойлерплейта и расхождений между состоянием, URL и историей.

❔ Почему так:

History API не создавался под SPA. Он не умеет централизованно управлять всеми типами навигации и не даёт понять, когда переход «завершён», чтобы безопасно менять UI и скролл.

🔤 Нормальное решение — Navigation API (эксперимент, Chrome 102+):

• navigate — единое событие для всех переходов
• event.intercept() — перехват и свой обработчик (загрузили данные, отрисовали, проверили доступ)
• event.scroll() — нативный скролл
• { committed, finished } — когда менять URL и когда переход реально завершён
• entries() и currentEntry — история как нормальные объекты со state

✅ Fallback:

Если window.navigation нет, остаёмся на старом pushState.

if ('navigation' in window) {
  navigation.addEventListener('navigate', (event) => {
    if (shouldNotIntercept(event)) return;
    const url = new URL(event.destination.url);

    event.intercept({
      async handler() {
        renderSkeleton();
        const html = await fetchPage(url.pathname);
        render(html);
        event.scroll();
      },
    });
  });

  const { committed, finished } = navigation.navigate('/profile');
  committed.then(() => showLoading());
  finished.finally(() => hideLoading());
}

📦 Поддержка:

Chromium 102+, Safari (новые версии), Firefox — пока нет.
API экспериментальный, используйте feature-detect.

📎 Официальная спецификация

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

#hotfix #js