Комментарии / Профиль monochromer / Хабр

Пользователь

ПрофильСтатьи1ПостыНовостиКомментарии170

Vanilla CSS — единственное, что вам нужно

Промежуток в 1ch между словами ощущается естественно, потому что это буквально ширина одного символа. Когда размер шрифта меняется, отступы пропорционально масштабируются.

Вместо того чтобы спрашивать «это планшет?», они спрашивают: «достаточно ли места для 100 символов текста?» Это семантично. Это основано на контенте.

Это работает хорошо, если загрузка шрифтов сделана надёжно. У каждого шрифта 1ch это своя величина. Может может быть очень сильный layout shift во время подгрузки. Шрифт не загрузился - десктоп, загрузился - планшет.

Как работает position: sticky и почему он часто не прилипает

monochromer 2 дек в 09:50

Со "срезами" как-то всё туманно.

height: 100vh; /* ← высота замкнута внутри среза */

Означает растянуть на всю высоту экрана, а не на высоту родительского элемента, что имеет больше смысла в контексте микрофронтов.

Первая в мире библиотека Web Components в духе shadcn. Серьёзно, я проверял

monochromer 1 дек в 18:47

Те же табы недоступны с клавиатуры

Этот CSS пора оставить в прошлом

monochromer 25 ноя в 18:06

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

.awesome-media-container {
  position: relative;
  padding-top: 100%;
}

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

Мои любимые CSS-трюки, которые вы могли упустить

monochromer 18 ноя в 10:30

Как легко понизить специфичность селектора при рефакторинге кода

Я для этого использую :where. Например, .selector:where(.selector) {}

Странные CSS-свойства, но, возможно, полезные

monochromer 1 окт в 06:34

Отображение со свойством empty-cells сильно зависит от border-collapse

С прошлого года у нас появилось ещё свойство text-align-last.

Странно, я это свойство в 2015-ом году использовал как улучшение.

Чистый код на TypeScript: практические советы

monochromer 19 сен в 08:47

А здесь нужен interface, если будут классы-имплементаторы.

Делать реализацию от типа тоже можно

103 Early Hints в NGINX: как выжать бесплатный прирост LCP без переписывания бэкенда

monochromer 29 авг в 07:20

А почему не хватает кэша для самих файлов, которые указываются в early hints?

103 Early Hints в NGINX: как выжать бесплатный прирост LCP без переписывания бэкенда

monochromer 27 авг в 06:18

Early hints как раз пришёл на смену http/2 push.

React Custom Hook: useStorage

monochromer 21 авг в 07:41

Не хватает учёта нескольких вкладок бразуера.

Как сделать ужасный для пользователя интерфейс. Коллекция HTML/CSS лайфхаков

monochromer 4 июн в 08:57

Никогда не пишите статьи в таком стиле. Есть налёт хамства и токсичности. Хуже воспринимается "инвертированная" информация, из-за чего она становится менее доступной.

Создание простого хука для работы с формами в React на основе `zod`

monochromer 26 мар в 05:50

Как отображать ошибки, отправленные бэкендом после валидации?. Например, для поля с телефоном прилетела ошибка, что номер добавлен в чёрный список.

Адаптивная flex-сетка на CSS: разбираем реализацию на атомы

monochromer 24 мар в 09:08

Размер генерируемого кода можно уменьшить, если вынести число колонок в CSS custom properties

tabs-broadcast — библиотека для синхронизации вкладок

monochromer 6 мар в 05:59

А каким алгоритмом пользуетесь для назначения главной и второстепенных вкладок?

Неизвестно полезный CSS. Часть 7

monochromer 3 мар в 18:10

Но мне хочется, чтобы выделился весь элемент вместе со скобками. Хорошо, что такая задача решается одной строкой в CSS. Просто надо использовать свойство user-select со значением all.

При таком подходе становится очень трудно выделить часть текста

Вы не знаете CSS. Мои вопросы о CSS с ответами

monochromer 27 фев в 07:38

Какое значение будет вычислено для свойства background-color у элемента <body>?

Можно дополнительно тогда спросить, почему рендерится так:

Next.js 15 в Hikasami: Глубокая оптимизация рендеринга, загрузки данных и производительности

monochromer 27 фев в 06:01

Переход на Next.js 15 позволил

Судя по статье, это не Next позволил, а разные решения типа кэширования в Redis, которые были вынуждены искать после перехода.

Большой гайд по ускорению и оптимизации сайта

monochromer 19 фев в 08:04

Насколько помню, `next/font` работает только со шрифтами из Google Fonts. Со своими локальными шрифтами он не умеет работать.

Сам же для таких задач пользуюсь Python Fonttools.

Большой гайд по ускорению и оптимизации сайта

monochromer 19 фев в 07:22

Оптимизация набора глифов

Какими инструментами пользуетесь для выполнения таких оптимизаций?

Кейс применения useMemo и useCallback в React для оптимизации рендеринга при изменении глобального состояния

monochromer 24 янв в 14:11

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

Важно уточнить, что компонент, в который будет передаваться такая функция, должен быть обёрнут в memo.

2 3 ...

8 9