🏗️ Plugin Architecture во фронтенде

Обычно приложения растут вширь — и рано или поздно перестают помещаться в одну кодовую базу.

Плагинная архитектура решает эту проблему иначе: ядро остаётся стабильным, всё остальное — расширения.

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

Есть core — минимальная часть с бизнес-правилами, безопасностью, логированием и общими утилитами.

А вокруг — плагины, которые подключаются через публичный API или события. Ядро не знает о них ничего — только о контракте.

⏬ Зачем это нужно:

— модульность и независимые релизы
— возможность кастомизации под клиента или регион
— развитие без трогания основного кода

🔆 VS Code, Figma, Obsidian, Grafana — все построены на этой идее.

⏯ Когда не подойдёт:

— если нет строгого API
— если плагины тесно зависят от общей логики
— если команда одна и продукт небольшой

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

#blueprint

🧠 React больше не библиотека

Когда-то он был “про view”. Теперь — серверные компоненты, Suspense, компилятор, серверные экшены. Это уже не инструмент, а целая среда. React стал фреймворком.

Только делает вид, что нет.

💬 А вы всё ещё называете его библиотекой?

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

#code_battle

🔑 Ключ, который ломал всё

Иногда одна мелочь рушит весь интерфейс. Компонент внезапно сбрасывает состояние и анимации — а виноват всего один key. Раньше использовался Math.random(), и React каждый раз считал, что элементы новые.

В итоге он пересоздавал их с нуля — с потерей состояния и лагами.

Как решить проблему:

➖ Дать каждому элементу стабильный и уникальный ключ — например, item.id. Теперь React спокойно обновляет только то, что реально изменилось.

💡 Меньше перерендеров, плавнее UI и спокойная жизнь фронтендера.

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

#hotfix #react

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

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

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

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

🔗 Ссылка на CodePen

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

#readme #css

А премия за это еще будет? 👀

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

#pixel_pause

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

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

Решение:

git merge --abort

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

git reset --merge ORIG_HEAD

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

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

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

#readme #git

😳 Главные новости недели

🔛 React Foundation объявлена

7 октября Linux Foundation запустила React Foundation — в неё вошли React, React Native и связанные проекты. Цель — независимое управление, стабильность и долгосрочная поддержка экосистемы.

🔛 View Transitions API

Chrome v139 добавил baseline-поддержку и улучшенный DevTools-инспектор для ::view-transition-*. Поддержка в React Canary и скоро — в Firefox 144.

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

#release_digest

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

⚪️ Обзор Cursor 1.7: Пишем to-do приложение с ИИ-агентом

⚪️ Стоит ли пользоваться функцией If() в CSS

⚪️ CCXT + CoinGecko: гибкий сбор рыночных данных для собственного криптотрекера

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

#read_watch

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

#pixel_pause

🦾 ESLint vs Biome: что выберете вы

Два инструмента, одна цель — чистый и красивый код. Но подходы — кардинально разные 👇

ℹ️ ESLint

— Проверенный временем стандарт
— Тысячи плагинов и правил
— Гибкая конфигурация на JS/TS
— Работает в любой экосистеме

ℹ️ Biome

— Новый формат линтинга и форматирования «в одном»
— Написан на Rust — летает даже в монорепах
— Умное кеширование и мгновенный запуск
— Простая миграция с ESLint + Prettier

Голосуем реакциями:

👍 — ESLint
❤️ — Biome

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

#code_battle

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

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