В этой статье вы найдете несколько небольших заметок о фронтенде. Иногда они будут короткими потому, что тема полностью раскрывается в паре предложений, а иногда от того, что автору не хватает опыта и знаний, чтобы раскрыть их более полно. Если вам понравится, то буду писать больше и полнее, со ссылочками и ресерчем.
Идея написать статью возникла при перечитывании переписки с другом-тимлидом-фронтендером (Лёха, привет!), который всегда щедро делится со мной своими знаниями, идеями и проблемами.
Все, что написано личное мнение небольшой группы людей и на истинность почти не претендует. Начнем.
Старайтесь не использовать 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;}
Основные, на мой взгляд, отличия и удобства этого свойства в том, что:
- Нам не нужен контейнер
- Если задана ширина ИЛИ высота, то вторая величина будет рассчитываться исходя из значения aspect-ratio
- Если задана ширина И высота, то свойство игнорируется
Поддержка у 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 одновременно.
На этом все. Комментарии, пожелания, резкая критика все это я буду рад прочитать и сделать выводы.
