lint-staged

Инструмент, позволяющий запускать линтеры только для файлов, которые попадут в коммит.

Полезность инструмента

В крупных проектах запуск одного линтера на сотни файлов затягивается на десятки секунд. Ситуация усугубляется, когда количество линтеров увеличивается. Стайллинт проверяет сотни CSS-файлов проекта, eslint проверяет сотни js-файлов, а мы в это время гадаем, будут ли ошибки или подсветка редактора кода была достаточной.

lint-staged позволяет запускать линтеры только для тех файлов, которые попадут в коммит, а по сути, нам нужно именно это. Проверять уже проверенные файлы нет смысла, ведь они не были изменены, а значит, ошибок там уже нет, так как они уже были исправлены.

В конфигурационный файл .lintstagedrc.json можно добавить запись в простом виде:

{
  "*.js": "eslint --fix"
}

Но работа для проекта остаётся непростой. Когда теперь будет коммит файлов (git commit), произойдёт следующее:
- Из всех файлов, которые попадут в коммит, отфильтруются все .js-файлы.
- Из-за указанного флага --fix произойдёт исправление для правил, которые можно автоисправить.
- Исправленные .js-файлы заново попадут в коммит.
Если во время работы eslint, даже с --fix, всё равно будут ошибки, то коммит не будет создан, а eslint как и всегда выведет ошибки в терминал.

npm-пакет: https://github.com/lint-staged/lint-staged

PS: lint-staged не отменяет полной проверки кода всех файлов. Её всё-таки нужно делать, но точно не во время активной разработки фичи.

Commitlint

Я продолжаю исследовать инструменты.

Commitlint — это инструмент, который проверяет сообщения коммитов в Git на соответствие определенным правилам.

Например, можно написать правило, чтобы заголовок коммита отвечал на вопрос "Что делает?".
У меня в команде принято писать в начале коммита номер задачи, для этого тоже можно написать правило.
Если сообщение коммита не удовлетворяет правилу, то коммит не создаётся, а в терминале происходит подсказка, что поправить, как в любых других линтерах.

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

Короткой строкой: что производительнее флексы или гриды?
Ответ: успокойтесь уже и используйте, что хотите =)

Но посмотреть на результаты рендеринга, где проверяют расчёт ширины и отступов, можно в статье https://benfrain.com/is-css-grid-really-slower-than-flexbox/

Среднее время рендеринга(меньше лучше)
Флексы хром: 54.84
Гриды хром: 52.75

Флексы сафари: 14.6
Гриды сафари: 18.25

Пришли очень важные новости

Разработчики браузеров срочно увеличивают размер опции в селекте.

Начиная с 129 хрома элемент <option> в раскрывающемся списке <select> будет иметь минимальные размеры 24x24, чтобы удовлетворять требования WCAG 2.5.8.

Хром: https://chromestatus.com/feature/5152633181700096
Обсуждение: https://github.com/openui/open-ui/issues/1026

В хроме добавили обработчик действий skipad (skip - пропустить, ad - реклама), который можно использовать для отображения кнопки «Пропустить рекламу» в окне "картинка-в-картинке", а разработчик в этот момент может отследить нажатие на эту кнопку.

Пример: https://googlechrome.github.io/samples/picture-in-picture/skip-ad.html
Хром: https://chromestatus.com/feature/4749278882824192
Обсуждение: https://github.com/WICG/mediasession/pull/203

Центрируй по вертикали без гридового или флексового контекста

Мало ли вы пропустили: align-content: center теперь работает без флексов и гридов

<div style="align-content: center; height: 100px;">
  <code>align-content</code> просто работает!
</div>

Плюсы:
- работает без дополнительных обёрток(html-тегов)
- не нужно указывать флексы или гриды, если вам просто нужно центрировать элемент по вертикали.

Статья: https://build-your-own.org/blog/20240813_css_vertical_center/

PS: не забывайте проверять браузерную совместимость перед использованием

PowerToys 0.84.0

Обновился мой любимый PowerToys. В нём появилась новая утилита "Workspaces"(рабочее место), которая позволяет одним щелчком мыши запускать набор приложений, например:
- можно запустить программы для работы: редактор кода, графический редактор, браузер
- набор для отладки: открыть firefox, chrome
- можно запустить терминал, а в нём уже запустить vs code с путём к проекту и с заданными параметрами, например чистый vs code, или нужный профиль

Программы можно запускать с параметрами, например с отключенными сертификатами или вообще какими угодно флагами. Программы можно запустить с нужными размерами, а также в нужном месте, например слева или сверху

Самое удобное это то, что для каждого набора программ можно создать ярлык на рабочем столе.

ECMAScript stage 2.7

На мой взгляд, в ECMAScript самый эффективный и наглядный процесс стандартизации среди всех браузерных технологий, особенно по сравнению с HTML и CSS.

Каждое новое предложение проходит этапы от 0 до 4:

Stage 0 (Strawman) — Идея находится на обсуждении, без чётких деталей.
Stage 1 (Proposal) — Формальное предложение с общей концепцией.
Stage 2 (Draft) — Конкретная спецификация и черновая реализация.
Stage 3 (Candidate) — Почти готово, тестируется для включения в стандарт.
Stage 4 (Finished) — Окончательное принятие, включено в стандарт.
При продвижении на новый этап крупные предложения часто сталкиваются с понижением с третьего на второй. Третий этап требует написания огромного количества тестов, и пока они не будут созданы, нет уверенности в работоспособности функции. Разработчики браузеров даже не начинают имплементацию функций без тестов.

TC39 решила, что этот этап слишком объёмный, и ввела стадию stage 2.7. Эта стадия указывает на то, что предложение практически завершено и проходит валидацию. Все ключевые элементы (синтаксис, API, семантика) описаны, и больше не вносятся изменения без обратной связи от тестирования или практического использования. На этом этапе разрабатываются тесты для проверки совместимости и корректности.

Число 2.7 выбрано специально для обозначения того, что функции не хватает тестов, но она почти готова к третьему этапу.

Статья: https://thenewstack.io/inside-ecmascript-javascript-standard-gets-an-extra-stage/

PS: stage 2.7 был добавлен в феврале 2023 года, а я только узнал =)

Браузерные новости

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

Safari 18.0
- Контроль отвлечения внимания. Теперь, с помощью браузера, можно выбрать любой элемент, например модальное окно или всплывающее окно про куки, и скрыть его. Есть функциональная возможность убрать скрытые элемент нажав "Показать скрытые элементы".
- Если на странице есть "заметный", видимо занимающий большую площадь, видеоэлемент, то его можно увеличить заполнив всё окно. Если переключить вкладку или видео другим окном, то видео перейдёт в режиме "картинка в картинке". Это всё работает в нативном теге <video>. Apple поощряет использование семантических тегов.
- Появилась возможность отлаживать сайты в веб-инспекторе вашего айфона. Условно вы подключаете телефон к ноутбуку. Отладка происходит на ноутбуке с инспектором, но отлаживаете вы сайта на телефоне. Всё это происходит через Safari.
- Добавили ещё больше возможностей веб-приложениям в macOS Sequoia:
- открытие ссылок непосредственно в веб-приложениях, без открытия в дефолтном Сафари;
- веб-расширения теперь будут работать в веб-приложениях. Всё что установлено в Safari, будет работать в веб-приложениях, например adblock
- Добавили API View Transitions
- Добавили выражения контейнера от стилей @container style(--background: black);
- currentcolor заработал в относительных цветах section { background: oklch(from currentcolor calc(L * 4) C H); }
- Акцентный цвета теперь могут быть прозрачными .form-control { accent-color: rgba(0,0,0,0.6); }
- Анимация отображения: @starting-style вместе с transition-behavior и display: none
- content-visibility для ускорения отрисовки страницы. Если элемент скрыт, то он не будет отрисован, пока не станет видимым.

Часть фишек пока что заработает только в Apple-устройствах, например предложение по написанию текста: <textarea writingsuggestions="true"> или свитчер <input type=checkbox switch>

Остальное можно почитать и посмотреть в статье: https://webkit.org/blog/15865/webkit-features-in-safari-18-0/


Chrome 129
- добавили CSS interpolate-size и функция calc-size(). Свойство CSS interpolate-size позволяет странице использовать анимацию и переходы между ключевыми словами CSS для определения размера, такими как auto, min-content и fit-content, в тех случаях, когда эти ключевые слова могут быть анимированы.
- Переименовали inset-area в positioned-area.
- Обновили работу backdrop-filter. Демо
- Теперь WebGPU поддерживает HDR

И многое другое https://developer.chrome.com/release-notes/129

Firefox 130
- Атрибут name элемента <details> теперь позволяет группировать элементы <details>, причем одновременно может быть открыт только один элемент внутри группы.
- В dir и lang глобальных атрибутах теперь улучшено наследование
- Свойство CSS hyphens теперь правильно поддерживается для чешского и словацкого языков.

И много другое https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/130

Мы становимся свидетелями странного и прекрасного момента в истории CSS.

Уже точно решено, что будут ломать линии в гридах, чтобы иметь возможность построить masonry-раскладку, но пока не решили как именно это делать. Есть несколько вариантов:
- Грид-интегрированный вариант, который предполагает добавление новых значений для свойств grid-template-columns и grid-template-rows:

display: grid;
grid-template-columns: 1fr 2fr 3fr;
grid-template-rows: masonry;

- Грид-независимый вариант, который предполагает добавление нового display и свойств masonry-tracks и masonry-direction, которые практически повторяют
grid-template-*:

display: masonry;
masonry-tracks: 1fr 2fr 3fr;
masonry-direction: column;

- есть другие варианты, но пока всем кажется, что пора остановиться на первых двух

Всё это долго и упорно обсуждается в ишью на гитхабе, а буквально вчера выпустили CSS Grid Layout Level 3 в статусе First Public Working Draft, в котором как раз рассматриваются эти два варианта использования.

В этом году новых версий основных браузеров уже не ждём, поэтому я подвёл небольшие итоги по CSS-свойствам в браузерах за 2024 год.

https://shabalin.online/blog/css/outcomes-2024/

Делитесь комментариями, что знали, а что вообще впервые увидели?

React 19

Так как по работе приходится иметь дело с React слежу и за такими новостями. 5 декабря вышел 19 версия React. RC(релиз кандидат) вышел в апреле.
Предыдущая, 18 версия, вышла в марте 2022 года. Я на работе пишу на 16 версии, кстати, но это уже совсем другая история.

Добавили новые хуки. Надо конечно же в них разобраться.
Добавили "Actions", функции использующие асинхронные переходы. Вокруг этих экшенов добавили кучу логики, в том числе новых хуков. Надо конечно же в них разобраться.
use API, которое ждёт когда зарезолвится промис. Почитаем и поймём что это.
Новый API для взаимодействия с DOM, очень хорошо работающий на платформе node.js: prerender и prerenderToNodeStream.
React Server Components, который позволяет рендерить компонент заранее.

API из предыдущих версий стало лучше. Например ref, можно использовать как props. <Context> можно использовать в качестве провайдера вместо <Context.Provider>.

И многое-многое другое. Можно почитать в статье https://react.dev/blog/2024/12/05/react-19#whats-new-in-react-19

Если вы используете React 18 и у вас есть возможность перейти на React 19, то используйте руководство по обновлению.

require(esm)

В node.js v22.12.0(LTS) включили по умолчанию require(esm). Функция всё ещё экспериментальная, но больше не скрывается за флагом --experimental-require-module. Функция позволяет загружать ESModules через require.

// до node.js 22
const square = require('./math-utils.cjs'); // commonjs
import square from './math-utils.mjs'; // esm

// после node.js 22.12.0
const square = require('./math-utils.mjs'); //esm in require

Автор функции кратко объяснил зачем это нужно:

Это поможет ускорить внедрением ESM, поскольку авторы поставляющие пакеты с ESM принесут меньше поломок для пользователей использующих CJS.

Гуглеры подвели итоги года:

https://chrome.dev/css-wrapped-2024/

Не добавляйте плагины для прокрутки

Пожалуй соглашусь с автором сайта https://dontfuckwithscroll.com/
Попробуйте поскролить сайт, хоть на мобилке, хоть на компе. Это тихий ужас.

Можно отключить эффект плавной прокрутки с помощью "Disable effect". Вот тогда вы точно ощутите, что эффект не плавный, а глупый и никому не нужный.

Сайт в 10 пунктах объяснять почему не нужно издеваться над прокруткой сайта.

css-properties

Хороший пет-проект — это тот, которым сам автор активно пользуется. Значит, у меня отличный пет-проект (по крайней мере, для меня 😅).

Мне всегда очень лениво возвращаться к моему проекту, который собирает все возможные CSS-штуки и сортирует их по дате внедрения в браузеры. Но иногда находит вдохновение.

Итак, вышла третья версия css-properties Количество CSS-пунктов значительно увеличилось: с 669 до 2231 на текущую дату. Увеличение произошло за счёт добавления значений. Раньше в проекте были только CSS-свойства, типы, at-rule и селекторы.

Идея добавить значения пришла ко мне, когда я пытался найти информацию о том, когда появился oklch, но не смог, так как это значение.

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

css-properties 3.1

Короткой строкой: теперь надписи вида viewport_percentage_units_large имеют нормальные значения dvb, dvh, dvi, dvmax, dvmin, dvw units

С новым годом, друзья 🎉

Желаю всем в новом году найти любимое дело. Проведите каникулы с родственниками и друзьями🎄

Всем спасибо, что провели этот год рядом со мной, хоть и в цифровом мире 😘

Сегодня буду на PiterJS. Если тоже придёте давайте знакомиться :)

✨ PiterJS #74 уже на следующей неделе - традиционно в четверг!

👨‍💻 В январе мы проведем митап в гостях у самого айтишного вуза!
😍 Рассказываем и показываем красивое.

⏰ Когда: 23 января 19:00 (будем ждать вас с 18:30)
📍 Где: Главный корпус ИТМО, м. Горьковская, Кронверкский проспект, 49

📰 Программа:
🗣 19:10 Евгений Дорошкевич с докладом про Gsap
🗣 20:10 Артик Мангасарян расскажет про CSS: Эволюция цвета
🗣 21:10 Александр Мальцев поделится опытом в докладе Эффективный рендеринг SVG-стрелок: оптимизация для графов с сотнями объектов

🎫 Регистрируясь вы получаете индивидуальный пропуск.

🔥Важно: зарегистрироваться можно до 22 января 19.00!

оказывается работать на двух работах это очень сложно, но к новостям

W3C начала работу по стандартизации стилизации контролов элементов форм https://www.w3.org/TR/2025/WD-css-forms-1-20250325/
это не слёзы, это дощь

Появится новое значение у appearance - base, способ явно активировать базовое оформление формы, которое будет одинаковым во всех браузерах и легко переопределяется.

Появится куча псевдоэлементов для управления контролами:
- ::picker-icon – иконка открытия селектора.
- ::file-selector-button – кнопка выбора файла.
- ::checkmark – кастомизация галочек.
- ::thumb, ::track, ::fill – части слайдеров.
- ::clear-icon, ::placeholder – поля ввода.
- ::step-up, ::step-down – инкременты числовых полей.
- ::color-swatch – предпросмотр цвета.

Также появится CSS-функция control-value(), которая позволяет получить текущее значение элемента формы.

Из коробки будет учтён WCAG 2.2 AA