📌 Дайджест обновлений

➡️ Tailwind CSS v4.1.17

Исправили баги с @variant и падения на Windows — релиз полностью про стабильность.

➡️ Node.js v25.2.0

Добавили расширенные возможности util.deprecate(), улучшили обработку localStorage, стабилизировали type-stripping и обновили движок V8.

➡️ Dependency Cruiser 17.3

Добавили поддержку импорта через process.getBuiltinModule() и поправили работу API c tsconfig.

➡️ Ink 6.5

Появился новый параметр incrementalRendering для постепенного рендеринга.

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

#release_digest

🎯 CSS научился считать

В Chrome 142 появилась мощная фича — range syntax для container style queries и функции if(). Теперь CSS может сравнивать числа и принимать решения на лету.

Что это значит на практике:

Раньше мы могли проверять только конкретные значения. Теперь — сравнивать: больше, меньше, равно.

ℹ️ Умная тема

Контейнер с кастомной яркостью. CSS сам решает, какой цвет текста использовать:

#container {
  --lightness: 10%;
  
  color: if(
    style(--lightness < 50%): white;
    style(--lightness >= 50%): black
  );
}

Если фон темный (< 50%) — текст белый. Светлый — чёрный. Автоматически!

ℹ️ Умный бейдж уведомлений (см. на картинке)

ℹ️ Адаптивная типографика

CSS проверяет размер шрифта и подбирает оптимальную жирность:

font-weight: if(
  style(1em < 32px): 100;
  style(1em > 32px): 900
);

Маленький текст — тонкий шрифт. Большой — жирный. Для читаемости.

Главное:

✅ Работает с custom properties
✅ Работает с attr() из HTML
✅ Сравнивает разные единицы (px, em, 😵
✅ Поддерживает все числовые типы CSS

Поддержка: Chrome 142+

📎 Читать подробнее

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

#read_watch

📎 Шпаргалка по фронтенду

Этот документ объединяет ключевые темы, техники и механизмы, которые лежат в основе современной фронтенд-разработки.

➡️ В нём собраны объяснения, примеры и практические заметки, помогающие быстро освежить знания, разобраться в устройстве веб-технологий и подготовиться к выполнению задач или прохождению собеседований.

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

#readme

🤝🤝

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

#pixel_pause

🔥 View Transitions API — морфинг без тяжёлых JS-библиотек

Раньше для плавной анимации между состояниями приходилось городить свои анимации и тащить JS-утилиты. Теперь достаточно одного вызова API + немного CSS.

⏺ Как работает:

document.startViewTransition(() => { /* обновляем DOM */ }) делает снимок DOM «до» и «после», а браузер сам строит плавный переход между ними.

Элементы с одинаковым view-transition-name анимируются как связанные: старое состояние плавно превращается в новое.

✨ Идеально для:

- переходов между страницами
- раскрытия карточек
- галерей и модальных окон
- лёгких SPA без фреймворков

⚠️ Поддержка:

Same-document переходы (SPA):
- Chrome 111+, Edge 111+
- Safari 18+
- Firefox 144+

Cross-document переходы (MPA):
- Chrome 126+, Edge 126+
- Safari 18.2+
- Firefox — пока не поддерживается

Используйте как прогрессивное улучшение: в старых браузерах будет обычная навигация.

📎 Демо

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

#readme #js #css

Опрос ниже ⬇️

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

#code_challenge

🔥 Каверзный вопрос с собеса

Метод .map() передаёт в колбэк три аргумента: текущий элемент, индекс и исходный массив. Функция parseInt принимает: строку и radix — основание системы счисления. Поэтому индекс массива попадает в radix.

🔍 Что происходит на самом деле:

parseInt('1', 0)

➕ radix = 0 означает автоопределение системы счисления:

• если строка начинается с '0x' или '0X' → основание = 16
• во всех остальных случаях → используется основание = 10

Поэтому '1' интерпретируется как десятичная.

parseInt('7', 1)

➕ системы счисления с основанием 1 не существует => Nan

parseInt('11', 2)

➕ '11' в двоичной системе — это 3₁₀ => 3

❇️ parseInt('11', 2) парсит всю строку как двоичную, потому что она корректна полностью.
Распространённый миф — будто бы берётся только первый символ; это неверно.

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

['1', '7', '11'].map(str => parseInt(str))

Или проще:

['1', '7', '11'].map(Number)

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

#career_merge #middle

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

#pixel_pause