🎯 CSS Селекторы: nth-child

Восемь способов выбрать нужный элемент без лишних классов. От базовых :first-child и :last-child до продвинутых формул с :nth-child(3n+1). Один селектор вместо десятка классов.

➕ Простая математика для точного контроля над версткой.

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

#readme #css

💳 Официальное руководство по Scrum

Гайд от Кена Швабера и Джеффа Сазерленда — 17 страниц, которые задают единственный корректный способ понимать Scrum.

🔤 Если вы работаете в продуктовой команде, строите процессы или хотите лучше понимать, как организуются современные фронтенд-команды, — это must-have.

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

#readme #scrum

💡 Новое в CSS: автоматическая подгонка текста под контейнер

В Chrome Canary 145 появились свойства, которые позволяют нативно растягивать или ужимать текст под ширину блока — без JS.

h1 {
  text-grow: per-line scale;
}

ℹ️ Что добавили:

• text-grow — растягивает короткие строки
• text-shrink — ужимает длинные

ℹ️ Методы подгонки:

scale, scale-inline, font-size, letter-spacing

По сути, это нативный FitText.js, только одной строкой CSS.

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

#release_digest #readme #css

🔥 Deep Clone — глубокое копирование объектов

Когда копируете объект через {...obj}, вложенные структуры остаются по ссылке. Меняете копию → меняется оригинал.

🔤 Два способа глубокого копирования:

Ограниченный, но быстрый для простых структур

const clone = (obj) => JSON.parse(JSON.stringify(obj));

Современный универсальный API (Chrome 98+, Firefox 94+, Node 17+, Safari 15+)

const clone = (obj) => structuredClone(obj);

🔤 Пример в React:

const addItem = (newItem) => {
  const clonedState = structuredClone(state);
  clonedState.items.push(newItem);
  setState(clonedState);
};

⚠️ Глубокое копирование — дорогая операция. В React его используют точечно, а не для всего состояния. В крупных приложениях лучше использовать immer или нормализованные структуры данных.

🔤 Когда deep clone действительно нужен:

— Копирование вложенных объектов и графов
— Redux / Zustand, когда нельзя мутировать state
— Снимки данных перед трансформациями
— Копирование конфигураций, где нет функций и методов

🔹 Курс «Алгоритмы и структуры данных»
🔹 Получить консультацию менеджера
🔹 Сайт Академии 🔹 Сайт Proglib

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

#readme #js #react

📌 npm explain — кто притащил эту зависимость

Команда (алиас npm why с npm 7+) показывает полную цепочку зависимостей — кто, через что и зачем тянет пакет.

🔢 Раздутый бандл

Нужно узнать, откуда lodash в зависимостях:

npm explain lodash

Получаете цепочку: проект → axios → follow-redirects → lodash.
Сразу видно, что обновлять или менять.

🔢 Конфликт версий

Подозрение на несколько React одновременно:

npm ls react

Команда покажет каждую версию и её источник.

🔢 Security audit

Нашлась уязвимая транзитивная зависимость:

npm explain vulnerable-package

Понимаете, через какой пакет она попала — обновляете или заменяете.

🔢 Чистка проекта перед продом

Проверить только прямые зависимости:

npm ls --depth=0

Быстро находит забытый мусор в package.json.

🧶 Yarn альтернатива

yarn why package-name

Работает так же, с более подробным выводом.

🔹 Курс «Алгоритмы и структуры данных»
🔹 Получить консультацию менеджера
🔹 Сайт Академии 🔹 Сайт Proglib

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

#readme #npm