Хоть я последнее время и залипаю в Node.js, но трушным фронтендом тоже занимаюсь.

Вот, например, на днях впервые использовала фичу container queries в CSS.

Сценарий: у нас в интерфейсе есть блок, который пользователь может растягивать по ширине — прямо мышкой, за ползунок. А в этом блоке лежит таблица, и в ней хочется скрывать некоторые колонки, если блок слишком узкий.

Обычно мы пишем media-выражения, завязываясь на ширину всего экрана, но тут нужна ширина конкретного компонента. Хвала богам CSS, мы живем в 2025 году, и в наше время есть такая фича, как container queries в CSS.

Как это работает (если вы ещё не успели попробовать)

1. Определяем контейнер (родительский элемент):

.container {
  container-type: inline-size;/* Отслеживает ширину */
  container-name: my-container;/* Опционально: имя для обращения */
}
    

2. Пишем запрос (@container):

@container my-container (max-width: 600px) {
  .child-element {
    font-size: 14px;
  }
}
    

3. Вы восхитительны!

Самое крутое, что у этой фичи хорошая браузерная поддержка. Значит, можно брать — и делать.

Может, я и не открыла Америку, но как человек, который до сих пор пребывает в лёгком шоке от того, что IE11 умел в grid-ы, я каждый раз радуюсь, когда новые возможности CSS можно использовать на проде. Так что, может и вы порадуетесь сегодня вместе со мной:)

За последние несколько месяцев в этом канале заметно прибавилось подписчиков (чему я не могу нарадоваться!). Также я экспериментировала с разными форматами — длинные статьи, короткие заметки, даже рассуждения на тему.

Пришло время для небольшого опроса, чтобы откалибровать ваши ожидания от этого канала и мои предпочтения по контенту. Буду признательна, если ответите на следующий вопрос 💫

Вы когда-нибудь задумывались, как работает npx? И что это вообще за инструмент такой?

У меня npx появился в жизни внезапно — я сразу начала его использоваться, а вот что это за покемон и как он работает под капотом, изучить не успела. Знала только, что устанавливать ничего не надо — npx идёт в комплекте с Node.js и npm.
Давайте попробуем немного разобраться сейчас.

Как было раньше
Раньше, чтобы запускать CLI-пакеты (например, create-react-app) из любого места, их нужно было ставить глобально:

npm i -g create-react-app

Это добавляло бинарники пакета в системный PATH, но тянуло за собой потенциальные проблемы — например, конфликт версий, если в разных проектах нужна своя версия CLI.

Npx решает эту боль. Он может:
- использовать локально установленный пакет,
- или (если такого нет) скачать временно нужный и сразу запустить.
Без глобальной установки и без добавления в PATH. Плюс, можно запускать конкретные версии одного и того же пакета под разные проекты, не ловя конфликты.

Окей, а что тогда за команда у Vite такая?

npm create vite@latest my-vue-app -- --template vue

Смотрим информацию о команде:

npm create --help
Create a package.json file

Usage:
npm init <package-spec> (same as `npx create-<package-spec>`)
npm init <@scope> (same as `npx <@scope>/create`)

По факту, npm create — это синтаксический сахар над npx create-<name>, а под капотом — тот же npx.

И важный момент напоследок
Пакет, который хочется запускать через npx, должен иметь секцию bin в своём package.json. Пример из vite:

"bin": {
  "create-vite": "index.js",
  "cva": "index.js"
}

Это как раз то, что позволяет вызывать его как CLI-команду.

Новый цикл статей уже на подходе!)

Мостик между Node.js и браузерным JavaScript — это движок V8. Я попробую разобрать его по кусочкам и заглянуть внутрь: как работает, какие механизмы использует и почему он такой быстрый.

Погружение в V8. Часть 1. История.

Пока цикл ещё не завершён, можно повлиять на его содержание — пишите в комментариях, какие аспекты V8 особенно интересны, и я постараюсь включить их в следующие части 💫

Продолжаем разбирать V8 — на этот раз по слоям.

Если первая часть была больше про историю, то теперь спускаемся вглубь: как именно движок исполняет JavaScript, какие компиляторы внутри него живут и зачем их так много.

Ignition, TurboFan, Sparkplug, Maglev — всё это может звучать пугающе, но на самом деле это слоистая архитектура V8, которую я постаралась разложить по полочкам.

Погружение в V8. Часть 2. Из чего состоит движок.

Вышла третья часть моего цикла про V8!

На этот раз про то, как V8 разбирает код и что происходит ещё до первого его выполнения. Посмотрим на AST, preparser, сканер, скоупы и байткод.

Погружение в v8. Часть 3. Парсинг, AST и анализ кода.

Я уже немного писала про Garbage Collection ранее в канале, но цикл про V8 будет неполный без отдельной статьи на эту тему, так что вот:

Погружение в v8. Часть 4. Управление памятью и сборка мусора.

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