Тег <details> уже давно позволяет делать раскрывающиеся блоки без единой строки JavaScript. Но у него была одна проблема: несколько таких блоков работали независимо — открытие одного никак не влияло на другие. Аккордеон, в котором открыт только один раздел, приходилось делать через JS. В 2024 году это изменилось: у <details> появился атрибут name.

Если дать нескольким элементам <details> одинаковый атрибут name, браузер объединит их в группу. Когда открывается один элемент — остальные из группы автоматически закрываются. Это поведение точно как у радиокнопок с одинаковым name.

<details name="faq">
  <summary>Вопрос первый</summary>
  <p>Ответ на первый вопрос.</p>
</details>

<details name="faq">
  <summary>Вопрос второй</summary>
  <p>Ответ на второй вопрос.</p>
</details>

<details name="faq">
  <summary>Вопрос третий</summary>
  <p>Ответ на третий вопрос.</p>
</details>

Это и есть эксклюзивный аккордеон. Ноль JavaScript, ноль дополнительных библиотек.

Когда вы запрашиваете данные через curl или читаете конфигурационный файл, JSON в терминале выглядит примерно так: одна длинная строка без переносов и отступов, которую невозможно читать. А если ответ весит несколько килобайт с вложенными объектами — найти нужное поле глазами нереально.

jq — инструмент командной строки для работы с JSON: форматирует, фильтрует, извлекает нужные поля и преобразует данные. Работает как конвейер: передаёте JSON на вход, получаете нужный кусок на выходе.

HEX-коды вроде #3b82f6 — привычный способ задавать цвета в CSS. Но у них есть большая проблема: они не интуитивны для человека. Как сделать цвет светлее на 10%? Добавить прозрачность? Подобрать гармоничный акцентный оттенок? С HEX и даже с HSL это превращается в угадайку. oklch() решает эту задачу.

Разработчики давно полюбили Sass и Less за вложенные правила. Вместо того чтобы писать длинные селекторы много раз, можно было аккуратно вложить дочерние стили внутрь родительских. В 2024 году это умение получил сам CSS — никаких препроцессоров больше не нужно.

Когда вы хотите попробовать какой-нибудь CLI-инструмент, обычный путь такой: установить глобально через npm install -g, попользоваться, а потом забыть удалить. Со временем в системе накапливаются десятки глобально установленных пакетов разных версий, которые начинают конфликтовать друг с другом.

npx решает эту проблему: он запускает пакет напрямую из реестра npm, не устанавливая его глобально. Запустили — и пакет не остался в системе.

Копирование объектов в JavaScript — одна из тех тем, которые поначалу кажутся простыми, а потом преподносят неожиданные сюрпризы.

Присвоить объект через = — не копирование. Это просто ещё одна ссылка на тот же объект. Измените копию — изменится оригинал:

const original = { name: 'Иван', scores: [10, 20, 30] };
const copy = original;

copy.name = 'Пётр';
console.log(original.name); // 'Пётр' — изменился оригинал!

Для поверхностного копирования используют Object.assign() или spread-оператор {...obj}. Но они копируют только первый уровень. Вложенные объекты и массивы по-прежнему остаются общими.

В 2022 году JavaScript получил structuredClone() — стандартный способ сделать полную глубокую копию.

Перенос слов в заголовках и текстовых блоках — деталь, на которую пользователи не обращают внимания, когда она хороша, и сразу замечают, когда что-то не так. Одиноко висящее слово в последней строке заголовка, или строки разной длины там, где хотелось симметрии — такое встречается часто. CSS text-wrap предлагает два умных режима для решения этой проблемы.

Открыть HTML-файл двойным кликом — плохая идея. Браузер откроет его по протоколу file://, и сразу начнутся проблемы: не загружаются шрифты, блокируются запросы к API из-за CORS, не работают относительные пути к модулям. Чтобы страница вела себя как в интернете, ей нужен настоящий HTTP-сервер.

http-server — минималистичный статический сервер, который запускается одной командой и не требует настройки.

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

Prettier решает проблему радикально: он берёт ваш код и переформатирует его по единым правилам. После этого весь код в проекте выглядит одинаково, вне зависимости от того, кто его написал.

Бывает такая ситуация: функциональность работала неделю назад, а сейчас — нет. За это время в репозитории накопилось сорок коммитов от разных людей. Просматривать каждый по очереди — долго и мучительно.

git bisect решает эту задачу умно: он делает бинарный поиск по истории коммитов. Вы говорите «вот этот коммит рабочий, а вот этот — нет», а Git сам переключает репозиторий на середину диапазона и спрашивает: «Здесь работает?» После нескольких ответов плохой коммит найден.

Работает бинарный поиск: сорок коммитов — шесть вопросов, восемьсот коммитов — десять вопросов.

Опечатка в имени переменной, использование == вместо ===, вызов функции до её объявления — всё это браузер обнаружит только в момент выполнения кода. В лучшем случае вы увидите ошибку сразу, в худшем — она всплывёт у пользователя в продакшене.

ESLint проверяет код до запуска. Он читает файл, анализирует структуру и сообщает о проблемах прямо в редакторе или в терминале. Это называется статическим анализом, или линтингом.

Grid Layout решил много задач с раскладкой, но одна проблема долго оставалась без решения. Представьте три карточки в сетке. У каждой — заголовок, описание и кнопка. Высота заголовков разная: в одной карточке текст длиннее, в другой короче. В итоге кнопки стоят на разной высоте, и сетка выглядит неаккуратно.

Раньше это решали через JavaScript: вычисляли высоту заголовков и выставляли min-height. Или просто мирились с несовершенством.

Subgrid позволяет дочернему элементу участвовать в сетке родителя. Карточка занимает несколько строк родительской сетки — и все её внутренние блоки выравниваются по общим линиям.

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

Представьте карточку товара. На широком экране она выглядит горизонтально: слева фото, справа текст. На узком — вертикально: фото сверху, текст снизу. Казалось бы, медиавыражение справится. Но что если эту же карточку нужно показать в узкой боковой колонке на широком экране? Медиавыражение видит только ширину окна — она большая, а значит, карточка будет горизонтальной, хотя места у неё нет.

Container queries решают именно эту задачу: элемент адаптируется под размер своего контейнера, а не под размер окна.

Если вы когда-нибудь подключали стороннюю библиотеку стилей и потом пытались её переопределить — вы знаете эту боль. Пишете правило, оно не работает. Добавляете класс поконкретнее — всё равно не работает. В итоге пишете !important и расстраиваетесь, потому что теперь нужно всё время учитывать это в дальнейшей работе.

Это называют войной специфичности. Возникает она потому, что CSS решает конфликты через длину и конкретность селекторов, а не через то, кто написал правило позже и кто важнее по смыслу.

В 2022 году в браузерах появился @layer — способ самим расставить приоритеты между группами стилей.

Запрограммировать модальное окно — одна из самых частых задач во фронтенде. Раньше для этого брали готовую библиотеку, писали десятки строк JavaScript, вручную блокировали прокрутку страницы, управляли фокусом и добавляли затемнение через отдельный div. Всё это работало, но требовало много кода и было легко сломать.

В HTML уже давно есть специальный элемент для этого — тег <dialog>. Долго его поддержка была неполной, но с 2022 года он работает во всех современных браузерах, и теперь им можно пользоваться без оговорок.

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

Можно писать arr[arr.length - 1] — работает, но громоздко. Можно использовать arr.slice(-1)[0] — ещё хуже. Оба варианта требуют знать длину массива или создавать промежуточный массив ради одного элемента.

В 2022 году в JavaScript появился метод .at(), который решает это элегантно.

Бывает такая ситуация: нужно задать один стиль для нескольких разных элементов в разных контекстах. Например, сделать красными все ссылки внутри статьи, боковой панели и подвала. Без специальных псевдоклассов получается громоздко:

article a,
aside a,
footer a {
  color: red;
}

Три строки ради одного правила. Если таких правил много — CSS превращается в простыню. :is() и :where() решают это элегантно.

Нейросеть умеет писать код быстрее вас. Это факт. Но скорость — не единственное, что важно в работе разработчика. Есть задачи, где нужно замедлиться, столкнуться с трудностью лицом к лицу и разобраться самому. Именно в таких задачах рождается настоящее понимание разработки, а не вот это всё.

Вы открываете проект утром, копируете в нейронку задачу, получаете красивый компонент — и начинаете его переделывать. Меняете названия переменных, добавляете проверку данных с сервера, убираете стили, которые конфликтуют с общей темой. Знакомо?

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

Эта статья о том, как правильно описывать задачу, чтобы получить рабочий код с первого раза. Разберём три главных направления: компоненты, стили и тесты. А ещё поговорим о том, как давать нейросети контекст — описание данных с сервера и правила дизайн-системы.

Представьте ситуацию: компания N ищет разработчика. Пришло двести откликов. И у каждого кандидата — пять лет опыта. Но вы уже знаете, что у части из них этот опыт нарисован. Как понять, у каких именно?

Именно из этого тупика и выросло понятие цифрового профессионального следа (ЦПС). Суть простая: любое внешнее свидетельство вашей работы, которое существует независимо от вас и которое вы не можете подправить задним числом.