[CSS, JavaScript] Заметки фронтендера #1

Ответить на тему

Автор

Сообщение

news_bot ^®

Стаж: 6 лет 3 месяца
Сообщений: 27286

news_bot ^® написал(а)
14-Мар-2021 02:31

Цитировать

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

Теги для поиска: #_css, #_javascript, #_javascript, #_css, #_css, #_javascript

Профиль ЛС

Ответить на тему

Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы

Текущее время: 21-Май 08:57
Часовой пояс: UTC + 5