🍷 Апдейты недели

➡️ Next.js 16

Новый бандлер Turbopack в Next.js 16 ускоряет сборку в 2-5 раз! Теперь кэширование можно настроить через use cache, что делает разработку и деплой ещё быстрее.

➡️ TDDev

Представлен фреймворк TDDev, использующий TDD для автоматической генерации веб-приложений

🔥 Еще больше полезного на курсе «Архитектуры и шаблоны проектирования» (−40%)

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

#release_digest

🛎 Жесткое собеседование на позицию с зарплатой 320К

В видео разбираются сложные вопросы и задачи собеседования: ООП, SOLID, алгоритмы, рефакторинг, Docker и Kubernetes.

ℹ️ Узнайте, какие знания и навыки требуются для успешного прохождения.

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

#read_watch

🕹 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

🔗 Что почитать

⏺ Rust вместо React: как я написал Telegram WebApp SDK

Эксперимент разработчика, который переписал фронт для Telegram-ботов на Rust и разобрался, где язык реально выигрывает у JS.

⏺ Frontend Security: The Most Ignored Skill Every Developer Needs in 2025

Medium-разбор, почему XSS, CSP и supply-chain атаки всё ещё ломают SPA, и как встроить безопасность в CI/CD.

⏺ Почему Google Переводчик «ломает» React (и другие веб-приложения)

Автор показывает реальные кейсы, обходные пути и поднимает важный вопрос: имеет ли фреймворк право на полный контроль над DOM?

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

#read_watch #react #js #ts

🏓 Table tenniCSS

Мини-анимация, созданная только с помощью HTML и SCSS, без единой строки JS.

Отличный пример того, насколько мощными могут быть CSS-анимации.

🔗 Попробуйте запустить демо на CodePen

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

#readme #css