Comments / Profile of monochromer / Habr

How to become an author

User

ProfileArticles1PostsNewsComments160

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

monochromer Jun 4 at 08:57

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

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

monochromer Mar 26 at 05:50

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

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

monochromer Mar 24 at 09:08

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

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

monochromer Mar 6 at 05:59

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

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

monochromer Mar 3 at 18:10

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

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

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

monochromer Feb 27 at 07:38

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

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

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

monochromer Feb 27 at 06:01

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

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

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

monochromer Feb 19 at 08:04

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

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

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

monochromer Feb 19 at 07:22

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

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

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

monochromer Jan 24 at 14:11

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

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

Переводим 50 приложений на Module Federation и ничего не ломаем

monochromer Jan 20 at 12:26

Вставляйте код текстом, пожалуйста.

Почему текстовые форматы не идеальны в разработке: пример на JSON

monochromer Jan 12 at 10:06

Для экономии места и ускорения передачи больших JSON-ответов по HTTP в продакшене практически всегда включают gzip или brotli-сжатие
app.use(compression()); // Включаем сжатие

Только сжатие лучше перенести на уровень proxy-сервера, например, Nginx или Caddy.

Представлен хак, как на 100% CSS (без JavaScript) получить IP‑адрес пользователя на :root

monochromer Dec 28 2024 at 09:47

Сам IP вычисляется на PHP, а не на CSS.

React useCallback() — полное руководство

monochromer Dec 27 2024 at 11:05

C AST может работать транспилятор из jsx в js (например, Babel или TypeScript), но не сам React. React Compiler, добавляющий оптимизации, поставляется как плагин к транспилятору.

Интернационализация (i18n) бэкенда в Express с использованием Intlayer

monochromer Dec 19 2024 at 07:51

Заходишь на сайт с документацией, а тебе пишут

Открываешь "документацию":

JavaScript. Как сделать невероятно быстрый многопоточный Data Grid на 1 000 000 строк. Часть 1/2: нюансы работы с DOM

monochromer Nov 29 2024 at 08:36

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

Пишем одностраничное приложение с помощью htmx

monochromer Oct 15 2024 at 08:05

он отлично подходит и для больших проектов, сложных больших приложений.

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

Проблема в htmx в том, что он не заморачивается с сохранением визуального состояния (например, фокус на чекбоксе), так как меняет всё через innerHTML.

DRY-фреймворк: продолжение

monochromer Oct 2 2024 at 11:10

нет, вложенность тут не главное. Конкатенация селекторов по типу `&__title` это зло.

DRY-фреймворк: продолжение

monochromer Oct 2 2024 at 09:25

Скоро будет работать во всех браузерах:

<section id="some-id">
  <style>
    @scope {
      :scope {
        border: 2px solid;
        padding: 1rem;

        & > header {
          font-weight: 600;
        }

        & > p {
          font-style: italic;
        }
      }      
    }
  </style>

  Some Text
  <header>Section Title</header>
  <p>Section Text</p>
</section>

Гораздо читабельнее.

monochromer Aug 27 2024 at 12:19

Принцип подстановки Барбары Лисков на примере React компонента:

А где тут React?

1

2 3 ...