Заметки фронтендера #1

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

Идея написать статью возникла при перечитывании переписки с другом-тимлидом-фронтендером (Лёха, привет!), который всегда щедро делится со мной своими знаниями, идеями и проблемами.

Все, что написано — личное мнение небольшой группы людей и на истинность почти не претендует. Начнем.

Старайтесь не использовать transition: all

Многие знают это, но я недавно встретил еще одну причину, почему надо крайне осторожно использовать значение all со свойством transition.

Представим, что у нас есть контейнер со свойством transition:

.content{
  color: red;
  transition: 1s;
}

При наведении цвет меняется:

.content:hover {
  color: blue;
}

Если мы обернем в этот контейнер, например, svg, свойство fill которого будет равно currentColor, то при наведении, свет изображения будет меняться. Но что если мы где-нибудь указали такое вот свойство для всех svg?

svg {
  transition: 1s;
  fill: currentColor;
}

При наведении fill будет меняться не 1 секунду, а примерно 2, потому что сначала transition будет применяться для изменения color, и, как я понимаю, на каждое изменения color внешнего, будет запускаться изменение внутреннего, но если у кого-то есть более точное объяснение, то буду рад его прочитать.

Решение: явно указываем transition: fill у svg (если указать color, то ситуация не изменится, от этого и вывод выше).

svg {
  transition: fill 1.5s;
  fill: currentColor;
}

Сохранение пропорций блоков

Я всегда думал, что все, сколько-нибудь опытные фронтендеры знают про древний хак, который позволяет сохранять пропорции блока, оказалось, что далеко не все.

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

.image-container {
  height: 0;
  position: relative;
  /* лучше подобные значения выносить в переменные */
  padding-top: calc(100% * 9 / 16 );
}

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

.img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
}

aspect-ratio

Не так давно было добавлено свойство aspect-ratio, которое позволяет сделать все то, что вы видите сверху, одной строкой.

.image {
  aspect-ratio: 16 / 9;
}

Основные, на мой взгляд, отличия и удобства этого свойства в том, что:

1. Нам не нужен контейнер
2. Если задана ширина ИЛИ высота, то вторая величина будет рассчитываться исходя из значения aspect-ratio
3. Если задана ширина И высота, то свойство игнорируется

Поддержка у aspect-ratio пока далека от заветных 95%, поэтому используйте с осторожностью

Не откладывайте пагинацию на потом

Звучит, конечно, странно, но как человек, который с нуля делал фронт нескольких продуктов, скажу, что всегда есть соблазн «забить» на пагинацию списков, опций в селекторах, таблиц и т.д. Я для себя решил, что никогда не буду откладывать это в долгий ящик, потому что как только пользователи начинают генерировать данные, страницы начинают тормозить, поиск причин тормозов, конечно, не слишком сложный, но когда доходит до поиска, то ситуация требует немедленного решения, а это нервы, говнокод и потеря авторитета у отдела разработки.

Управление внешним видом компонентов через css переменные

Переменные в css уже многими любимы и уважаемы, но опыт собеседований показал, что ими мало кто пользуется, а еще меньше людей знает про истинную мощь наследования. Большая часть осталась на той части документации, где говорят про :root (а это просто псевдокласс — алиас для корня дерева, чаще всего для html).

Так вот, представьте, что у нас есть компонент кнопки со scoped стилями (в примере использую Vue.js), который имеет такие стили:

.button {
  color: var(--text-color, #000);
  background-color: var(--bg-color, #444)
}

А потом мы можем просто в родительском компоненте определить класс .dark:

.dark {
    --text-color: #fff;
    --bg-color: #333
}

И прокинуть этот класс компоненту кнопки:

<my-button class="dark"/>

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

Забавные и мучительные баги

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

Вставка изображений в wysiwyg редактор

В текстовых редакторах в браузере (мы используем quill) есть возможность с помощью ctrl + v вставить изображение с другого сайта. Мы об этом не задумывались, что все пользуются реализованным механизмом вставки изображений, но юзеры такие юзеры. Один особо чувствительный к заимствованию изображений сайт определял, откуда идет запрос, и если домен не его, отдавал рекламный баннер собственного продукта, что справедливо, конечно же, но для нас стало сюрпризом. Поэтому если вы разрабатываете/используйте wysiwyg, следите за тем, что и куда вставляют =)

Vue SSR + Cloudflare = <3

Проблема, о которой мне рассказал упоминавшийся ранее товарищ.

Только проде при переходе на страницу которая генерировалась и отдавалась SSR'ом и последующих SPA навигациях все запросы в API дублировались. Долго не могли понять в чем дело. После тщательных изысканий выяснилось, что в футере есть стандартное поле с email компании, но cloudflare обфусцирует email (для защиты от скраперов). Когда Vue на сервере собирает дерево в js, потом получает на клиенте другое дерево (с несовпадающей почтой), регидрация Vue ломалась и падала, создавая новый vue инстанс, но не убивая старый недособранный. В итоге при определенных обстоятельствах на странице работало 2 инстанса Vue одновременно.

На этом все. Комментарии, пожелания, резкая критика — все это я буду рад прочитать и сделать выводы.