⭐️ CSS: sibling-index() — stagger-анимации без JS

css.card {
  transition: opacity .3s ease;
  transition-delay: calc(sibling-index() * 100ms);

  @starting-style {
    opacity: 0;
  }
}

Каждый элемент знает свою позицию среди соседей → автоматический stagger.

🔜 Когда использовать:

— появление списков карточек
— меню, таймлайны
— простые sequence-анимации

🔜 Когда не подходит:

— старые браузеры
— сложная логика (условия, пересчёты)

⚠️ Experimental / syntax может измениться
Chrome 130+, Safari 18+
Firefox — в планах

📍 Навигация: [Вакансии]

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

#readme #css

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

#code_challenge #js

😎 undefined trезвости

Как ваш первый рабочий день?

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

#pixel_pause

🔥 Class Components → Hooks

В новом React коде классы считаются легаси-подходом. Они не запрещены, но в новых компонентах и при плановом рефакторинге рекомендуется использовать функциональные компоненты с хуками.

🔴 Почему это имеет смысл:

— меньше шаблонного кода (constructor, bind)

— проще читать и поддерживать

— корректно работает с современными фичами React

📍 Навигация: [Вакансии]

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

#hot_fix

📎 Шпаргалка по Set в JavaScript

union, intersection, difference, isSubsetOf и другие методы уже давно в языке, но до сих пор используются редко. Чаще по привычке — массивы, фильтры и ручная логика.

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

Если работаете с наборами данных — Set должен быть базовым инструментом.

📍 Навигация: [Вакансии]

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

#readme

👁 Что нового в Chrome DevTools 144

В 144-й версии DevTools без революций, но с точечными улучшениями, которые реально упрощают отладку:

🟣 Request Conditions
Network request blocking переименовали и прокачали — теперь можно троттлить отдельные запросы, а не весь Network целиком. Удобно для edge-кейсов и нестабильных API.

🟣 DevTools MCP server 0.12.1
Появился auto connection: можно подключиться к уже открытому браузерному сеансу и продолжить отладку с того же места. Меньше ресетов — быстрее дебаг.

🟣 Шрифты
@font-face и @font-feature-values теперь редактируются прямо в Styles. Без прыжков между панелями.

🟣 Adopted stylesheets
В Elements теперь видно adopted stylesheets под shadow roots и document root. Полезно, если стили «не применяются и непонятно почему».

🔗 Источник

📍 Навигация: [Вакансии]

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

#release_digest

⚠️ sort() ломает state (тихий баг)

const sorted = data.sort(byDate);

На вид — нормально.

На деле:

• sort() мутирует data
• ссылка на массив не меняется
• React / Zustand / Redux не видят изменений
• UI начинает вести себя случайно

ℹ️ Почему это происходит:

sort() — in-place операция. Она меняет существующий массив, а не создаёт новый.

Как делать безопасно:

🟣 Современный способ (ES2023)

const sorted = data.toSorted(byDate);

🟣 toSorted() поддерживается:

Chrome 110+, Safari 16+, Firefox 115+

🟣 Для старых браузеров работает везде:

const sorted = [...data].sort(byDate);

🟣 Если нужен deep copy

const sorted = structuredClone(data).sort(byDate);

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

#hotfix #js

🎼 Что нового в WebGPU

Chrome 144 продолжает аккуратно прокачивать WebGPU: меньше костылей, больше прямого контроля над GPU.

🈶 WGSL: subgroup_id и num_subgroups

Появился доступ к ID сабгруппы и их количеству внутри workgroup.
Раньше это приходилось восстанавливать через атомики — теперь есть нативные built-in. Основа для более эффективных compute-шейдеров и тонкой работы с памятью.

🈶 WGSL: uniform_buffer_standard_layout

Uniform-буферы больше не требуют 16-байтных паддингов.
Можно шарить одинаковые структуры между uniform и storage buffers без лишних полей и @align.

🈶 WebGPU на Linux

Начался постепенный rollout: сначала Intel Gen12+, дальше планируют AMD и NVIDIA.
Под капотом — WebGPU через Vulkan, Chromium остаётся на OpenGL.

🈶 Быстрее writeBuffer() и writeTexture()

Оптимизации дали до 2× прироста производительности при копировании данных. Важно для стриминга и real-time графики.

🈶 Dawn / Android

Вышла alpha Kotlin-биндингов WebGPU через Jetpack (androidx.webgpu).
Современный GPU-API без боли OpenGL и сложности Vulkan.

🔗 Источник

📍 Навигация: [Вакансии]

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

#release_digest

✏️ Почему я сознательно ушёл от Next.js

За последние месяцы я целенаправленно выносил код из Next.js. Не потому что он плохой — а потому что его сложность перестала оправдываться.

🔴 Где Next.js реально хорош

Next.js даёт быстрый старт и мощные возможности из коробки. Он отлично подходит для сложных fullstack-сценариев и больших систем. Но дальше начинается проблема.

🔴 Mental model слишком тяжёлый

App Router, магия файлов, директивы, экспериментальные флаги.

Трудно понять:

• где заканчивается React и начинается Next.js
• по какому пути реально идёт код
• почему поведение меняется после «невинного» экспорта

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

😂 Отладка превращается в квест

Кэш, кэш, ещё один кэш. Поведение меняется — причины неочевидны. Стек-трейсы плохо отражают реальность, а абстракций больше, чем точек контроля.

😳 Dev-сервер — отдельная боль

Долгие сборки, медленные перезагрузки, ощущение «тяжёлого» окружения. После этого возвращаться к Vite — как снять рюкзак с камнями.

Что оказалось проще и честнее:

TanStack + Vite дали ровно то, что я ожидал от современного фронтенд-стека:

• понятный флоу данных и роутинга
• минимум магии
• typesafe-роутинг и работа с данными «в лоб»
• быстрый dev-сервер
• отладка без шаманства

Ты видишь, что происходит, и можешь это контролировать.

🔤 Next.js — мощный инструмент, но не универсальный дефолт. Для большинства фронтенд-команд он добавляет больше когнитивной нагрузки, чем пользы.

Для моих задач и команды TanStack + Vite оказались просто спокойнее и быстрее в разработке.

Если Next.js работает у вас — отлично. Для меня — нет.

📍 Навигация: [Вакансии]

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

#code_battle

🎨 CSS Relative Colour (Часть 1): палитра как система

Большинство дизайн-систем ломаются в одном месте — при смене базового цвета. Есть foundation, есть тени, светлые версии, акценты. Меняете один цвет — пересчитываете всё руками.

CSS Relative Colour в пространстве OKLCH решает эту проблему.

🔴 В чем идея:

Цвет — это не список значений, а формула.

oklch(from <color> <L> <C> <H>)

Берём базовый цвет и вычисляем все остальные относительно него.

Базовые правила:

 • Lightness — двигаем (add / subtract)
 • Chroma — масштабируем (multiply)
 • Hue — вращаем (градусы)

🔤 Что это даёт:

— одна точка управления цветом
— автоматический пересчёт всей палитры
— устойчивые темы и состояния UI
— смена настроения без пересборки

Палитра перестаёт быть набором оттенков и становится системой.

🔗 Читать статью

📍 Навигация: [Вакансии]

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

#read_watch

🖍 Публичный URL для localhost за минуту

Нужно показать фронт с localhost — без деплоя и с HTTPS? Делается одной командой:

brew install cloudflared
cloudflared tunnel --url http://localhost:3000

Что получаете:

— публичный HTTPS-адрес
— работает для OAuth, cookies и mobile-тестов
— без регистрации и бесплатно

Удобная альтернатива ngrok для демо и локальной разработки фронта 💃

📍 Навигация: [Вакансии]

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

#stack

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

#pixel_pause

🔍 Узнам, кто занял порт

lsof -i :3000

Показывает какой процесс держит порт 3000: команду и PID.

🔤 Типичный кейс:

— dev-сервер не стартует
— ошибка EADDRINUSE
— порт «занят», но непонятно кем

🔴 Пример вывода:

node 48231 user TCP *:3000 (LISTEN)

node — процесс
48231 — PID
LISTEN — порт реально используется

🔢 Если процесс лишний:

kill 48231

📍 Навигация: [Вакансии]

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

#readme

🧩 Как собрать портфолио в виде 2D-игры

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

ℹ️ Как это работает:

— Персонаж перемещается по комнатам
— Подходит к объектам (компьютер, книжная полка, постеры)
— При взаимодействии появляется информация: навыки, описание проектов, ссылки на GitHub

Используется стек: JavaScript, Kaboom.js, Vite, HTML/CSS. Автор разбирает: настройку проекта, карту, коллизии, анимации, диалоги.

📎 Ссылка на GitHub

📍 Навигация: [Вакансии]

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

#read_watch