Блог Кирилла Беляева  

Пишу о подаче информации, интерфейсах и жизненной среде. Дизайнер в компании «Тунель‑технологии». Работал в Лаборатории данных и Бюро, соосновал дизайн-группу «Кипо».

История о детском доме и банкирах

Наш район — тихий и зеленый с частной застройкой в 1-3 этажа и редким вкраплением многоквартирных домов вроде нашего. С одной стороны, это окраина города, с другой — район считается благополучным, а до центра 25 минут по прямой ветке трамвая.

На соседней улице стоит заведение, во дворе которого порой гуляют дети. Когда переехали, думал, что это детский сад или начальная школа. Оказалось — детский дом. Сам этот факт уже приятно удивляет. Как часто в благополучных районах встречаются детские дома?

А в пятницу на очередной пробежке наблюдал особенно непривычное для себя мероприятие. Байкеры на крутых мотоциклах катали детей из этого детского дома вокруг квартала. Это было организованное действие. Мотоцикл заезжали на территорию, прокатившийся ребёнок слезал, передавал следующему шлем. Воспитатели помогали. Ехали мотоциклы небыстро, но шумно газовали.

Ребята постарше держались водителей руками за талию, оставляя зазор. Малыши обнимали водителей будто обхватывали огромное дерево, прижимаясь всем телом. Судя по толпе в зоне посадки, детям было классно.

Вроде же ничего сложного, но вживую впервые видел.

24 сентября   дети   история

Подсказка основных почтовых доменов

Когда даю сайту почту в первый раз, автозаполнения ещё нет, а вводить адрес целиком лень. Очевидная польза — подсказать основные почтовые домены. Предполагаю, что 4-5 часть пользователей вводит домен одной из основных почтовых служб.

Пока реализацию встретил только у Али-экспресса. Отдельно отмечу, что классно знать о локально популярных доменах, как это делает Али:

Выравнивание подписей с длинами сторон прямоугольника

Заметка о вёрстке специфичного блока в вебе. Большинству такое не пригодится. Пишу, потому что надеюсь показать пользу от применения свойств по назначению.

Верстали блочок с габаритами основания. Будь текст статичен, хватило бы СВГ. Но в английской версии мы помним об американцах и дублируем размеры в футах (и отбиваем дробную часть точкой):

В СВГ всё задаётся строго по координатам, хорошо масштабируется, но не умеет «адаптироваться» под содержание. Поэтому c СВГ не обойтись без двух шаблонов и надежды, что они выдержат подписи любой длины. Можно усилить СВГ скриптом, но для меня это выглядело суперлишним. Казалось, что справятся ХТМЛ с ЦССом.

Исходный ХТМЛ простейший:

<div>
    <span>22 м</span>
    <div></div>
    <span>14 м</span>
</div>

Первое, что решал: как выравнивать подписи по центру стороны. Понятно, что для верхней подписи нужен «text-align: center», но как ограничить длину подписи, чтобы она равнялась длине прямоугольника, а не всего родительского дива? Можно дублировать width для прямоугольника и подписи, но это не DRY и неудобно в поддержке. Выручило свойство box-sizing, которое говорит, как считать ширину и высоту элемента. Добавил родительскому диву «box-sizing: content-box» — указанные размеры элементы не будут включать падинги и обводки.

.rectangle {
    position: relative;
    box-sizing: content-box;
    padding-top: отступ, подходящий под высоту подписи; 
}

Теперь можно наследовать длину родителя и позиционировать подписи вне его:

.rectangle-width, .rectangle-height {
    display: inline-block;
    position: absolute;
    white-space: nowrap;
}

.rectangle-width {
    width: inherit;
    top: 0;
    text-align: center;
}

Если текст длиннее отведённой длины, то он начинается от левого края и благодаря «white-space: nowrap» не переносится.

.rectangle-height {
    left: calc(100% + отступ от фигуры);
    top: 60%;
    transform: translateY(-40%);
}

Transform и top и выравнивают подпись и фигуру по горизонтали. Если родитель без падинга, сработает «top: 50%; transform: translateY(-50%)». В моём случае разницу в 20% нашёл на глаз.

В конце разбираюсь с прямоугольником. Ширину и высоту он наследует у родителя, а ровно поместиться в отведённые границы помогает свойство «box-sizing: border-box», которое, наоборот, включает падинги и обводку.

.rectangle-figure {
    display: inline-block;
    box-sizing: border-box;
    width: inherit;
    height: inherit;
    border: 1px solid цвет;
}

Итоговый ХТМЛ английской версии (без оформления футов):

<div class="rectangle" style="width: длина; height: высота">
    <span class="rectangle-width">22 m 72.2 ft</span>
    <div class="rectangle-figure"></div>
    <span class="rectangle-height">14 m<br>45.9 ft</span>
</div>

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

10 сентября   вёрстка   СВГ   ХТМЛ   ЦСС

Сочетание листалки и кнопки «Ещё»

Встретил удобное соседство элементов управления. Если кликом в кнопку «Ещё» добавлять товары на страницу, кроме загрузки, ещё будут листаться страницы. Это позволяет всегда сориентироваться где находишься:

Если перейти на страницу, то останутся товары, «приписанные» только к ней. Теперь «Ещё» будет добавлять товары к текущим, а листание страниц продолжится как ни в чём не бывало:

В мобильной версии поведение не меняется, а пользоваться ещё удобнее:

Хаб ереси

Чтобы бегать дольше, сначала слушал сессию Хедспейса для бега, но быстро заездил, а потом её и вовсе заменили на коллаборацию с Найком. Я потерпел супернавязчивого коуча Беннетта две пробежки и пошёл искать подкасты. Кто-то из РСС-ленты упомянул «Хаб ереси». И вот я выслушал все выпуски за две недели.

Автор — Жанна Пояркова (под псевдонимом «Мор») — рассказывает о фантастике и не только, фокусируясь на идеях, которые щекочут ум и атакуют мировоззрение. Мнение автора — яркое, но не всегда популярное. Местами мне не хватало глубины и источников с другими мнениями. Но это я, у вас будет по-другому.

Выпуски, которые отметил звёздочкой:

P. S. Пока не вышел новый выпуск, слушаю «Ложную слепоту», о которой Жанна упоминает не раз. Кстати, именно эту книгу «экранизирует» Данил Криворучко:

30 августа   бег   подкаст   фантастика
Ранее Ctrl + ↓