🕹 npm install: хитрость фронтендера

Каждый сталкивался с дилеммой: проверять всё или просто вставить команду и надеяться, что заработает?

➕ Проверяем пакет перед установкой

➕ Копируем команду из StackOverflow и надеемся, что заработает

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

👍 — Осторожность
❤️ — Копипаст

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

#code_battle

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

#pixel_pause

✨ Контейнерные запросы — адаптивность нового уровня

Обычно мы пишем:

@media (min-width: 600px) {
  .card { flex-direction: row; }
}

Но что, если карточка живёт в разных местах — и в сайдбаре, и в сетке?
Глобальный @media ломает вёрстку.

💡 Решение — @container

@container (min-width: 400px) {
  .card { flex-direction: row; }
}

Теперь адаптация зависит от ширины контейнера, а не всего экрана. Каждый блок подстраивается под своё окружение — без медиазапросного ада.

⚙️ Работает в Chrome 105+, Safari 16+, Firefox 109+

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

#readme #css

📦 Почему [] == ![] возвращает true

Кажется нелогичным: пустой массив и его отрицание — но результат true. Разберём по шагам (по спецификации ECMAScript 262):

1️⃣ Оператор ![]

- [] приводится к true, потому что любой объект в JS — truthy.
- !true даёт false.

Итак, ![] → false.

2️⃣ Сравнение [] == false

- По правилам нестрогого сравнения (==), если один операнд — объект, он приводится к примитиву (ToPrimitive).
- [] → "" (пустая строка).

Теперь выражение выглядит так: "" == false.

3️⃣ Сравнение "" == false

- false → 0, "" → 0.
- 0 == 0 → true.

✅ Итог: [] == ![] возвращает true из-за цепочки приведений типов.

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

#career_merge

Каким будет результат ❓

Опрос ниже 🔜

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

#code_challenge

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

#pixel_pause

😱 Потерянный this в обработчике

Когда метод объекта передаётся как колбэк, он теряет контекст (см. фото). После клика в консоли будет undefined.

⏯ Почему так:

this зависит от способа вызова функции, а не от места, где она объявлена.

При передаче метода как ссылки (btn.handleClick) контекст теряется — this больше не указывает на объект.

✅ Как исправить:

1. Явно привязать контекст

button.addEventListener('click', btn.handleClick.bind(btn));

2. Использовать стрелочную функцию

button.addEventListener('click', () => btn.handleClick());

💡 Стрелочные функции не имеют собственного this, они берут его из внешнего контекста — поэтому работают как ожидается.

#hotfix #js