Кнопки взаимодействия

После публикации предыдущей записи внимательные читатели подсказали, что видят в Твиттере другой интерфейс. Выяснилось, что если просто оказаться на сайте, то мы увидим ту старую версию, на основании которой я писал предыдущую заметку. Но если залогиниться в системе, то перед нами уже предстаёт новый интерфейс.

Что ж, давайте его проверим. Как обстоят дела с дёрганием подсказки?

Нервный тик интерфейса

Порой на сайтах у интерактивных элементов есть неприятные «заколдованные» места. Когда наводишь туда курсор, то попадаешь в некий «цикл дёрганий». Связано это со сменой состояний, когда срабатывает действие на hover, что-то происходит, под курсором оказывается другая логическая область, это что-то исчезает, и ты вновь оказываешься на начальной точке, вызывая первоначальное действие.

Покажу пример. Вот есть Твиттер, посмотрим на основной компононет — твит.

Сделай хоть что-нибудь

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

Что толку от голосования в ТСЖ?

Зачем ходить на выборы мэра, мой голос ничего не решает.

Я не могу повлиять на чистоту и благоустройство своего района.

Разве я могу взять и спасти экологию? Помочь обездоленным?

Список репозиториев

Не так давно на Гитхабе у репозиториев появилась кнопка Used by со счётчиком, который показывает количество зависимых репозиториев. По клику мы попадаем на страницу со списком.

Выглядит несколько неряшливо. Немного приблизим и добавим направляющую, чтобы яснее увидеть неприятные места.

Как сверстать кнопку

— А что там сложного? Ставишь тег button и стилизуешь его.

— Как бы да, но нет. Множество компаний совершают одни и те же ошибки. Смотри, какое сообщение я получил на сайте гуглопочты:

— Ох, как же так получилось?

Распростра­нён­ные ошибки в русском языке

Расскажу не про типичные (но не теряющие актуальности) «тся/ться», «в течение» и пр., которые в мало-мальски подготовленных текстах и в переписке с хоть сколько-нибудь грамотными людьми встретишь нечасто, а про такие ошибки, которые ежедневно можно наблюдать у дикторов, различных ведущих, в аудио- и видеорекламе, статьях, плакатах и т. д.

Склонение числительных

Длинные числа порой пытаются начать склонять, но уже на втором-третьем слове скатываются в именительный падеж, а иногда и всё число выдают в именительном падеже, сделав перед ним некую паузу, что звучит нелепо. Например, «от 5263» произносят как «от пяти тысяч двести шестьдесят три» или «от... пять тысяч двести шестьдесят три» вместо «от пяти тысяч двухсот шестидесяти трёх».

Отдельную проблему составляет склонение таких простых чисел, таких как 300, 400 и т. д. В родительном падеже вместо окончания -сот зачем-то используют -ста: «более пятиста» вместо «более пятисот», «до шестиста» вместо «до шестисот».

CSS-анимации

На собеседованиях я часто спрашивал, какие CSS-свойства можно анимировать. Почему-то многих он ставил в тупик, кто-то вспоминал отдельные свойства, но сформулировать общее правило не получалось. А ведь всё довольно просто. Что вообще такое «анимация»? Это некое изменение внешнего вида, имеющее промежуточные положения, благодаря чему изменение происходит плавно, а не дискретно. У чего бывают промежуточные состояния? У всего, что можно измерить числами. Это может быть ширина объекта, его отступ, да даже цвет: будь то hex, rgba и пр., это всё числа. И нельзя анимировать display, имеющий определённый набор свойств.

Следующим был вопрос о стоимости анимации, какие же свойства можно использовать со спокойной душой, а с какими надо быть осторожными. Здесь достаточно запомнить три свойства: transform, opacity и filter (c которым не всё так просто).

Если у нас есть некий элемент, который мы хотим подвигать туда-сюда, то почему же его двигать лучше при помощи transform, а не left, margin или чего-то ещё?

Выставление рейтинга

Несколько лет назад я реализовывал подобный элемент — выставление рейтинга пользователем. И вот вновь столкнулся с подобной задачей. Но вариант копирования решения со старого проекта не рассматривался, ведь там просто сборище дивов и куча jQuery (а по-другому я и не умел). Поэтому, начал рассуждать, как сделать лучше.

Интерактивная карта в одном SVG

Сделал интерактивную карту Канады, состоящей из 10 провинций и 3 территорий. Небольшой блок с информацией появляется при наведении на административную единицу.
Никаких скриптов и дополнительных тегов, всё в одном встроенном SVG.

Alberta Capital:Land area:Population:GDP: Edmonton640,081 km²4,306,039$314.944 billion British Columbia Capital:Land area:Population:GDP: Victoria925,186 km²4,841,078$263.706 billion Manitoba Capital:Land area:Population:GDP: Winnipeg548,360 km²1,343,371$67.863 billion New Brunswick Capital:Land area:Population:GDP: Fredericton71,450 km²760,868$34.224 billion Newfoundland and Labrador Capital:Land area:Population:GDP: St. John's373,872 km²528,817$31.112 billion Nova Scotia Capital:Land area:Population:GDP: Halifax52,942 km²957,600$41.726 billion Northwest Territories Capital:Land area:Population:GDP: Yellowknife1,183,085 km²44,718$4.739 billion Nunavut Capital:Land area:Population:GDP: Iqaluit1,877,787 km²38,243$2.443 billion Ontario Capital:Land area:Population:GDP: Toronto917,741 km²14,279,196$794.835 billion Prince Edward Island Capital:Land area:Population:GDP: Charlottetown5,660 km²152,784$6.321 billion Quebec Capital:Land area:Population:GDP: Quebec City1,365,128 km²8,356,851$394.819 billion Saskatchewan Capital:Land area:Population:GDP: Regina591,670 km²1,168,057$75,261 billion Yukon Capital:Land area:Population:GDP: Whitehorse474,391 km²38,669$2.800 billion

Небольшой трюк с SVG

Рассмотрим ситуацию, когда на странице есть одинаковые графические элементы с точки зрения формы, но разного размера и цвета. Конечно же хочется использовать одно изображение. Поскольку графика векторная, то разный размер не является проблемой. А вот что с цветом? Первым делом на ум приходит инлайновая вставка и использование fill="currentColor" или аналогичной записи через CSS.

Но что, если хочется использовать тег <img> для контенного изображения, дабы оно и кешировалось, и индексировалось? Или наоборот, не хочется почём зря инлайнить совсем уж декоративное изображение, засоряя разметку, ведь для этого есть background-image. Нам помогут <symbol> и <use>.