Разработка веб-интерфейса обычно ассоциируется с совместным использованием HTML, CSS и JS для создания веб-приложений.
Эта ассоциация подчеркивает «как», но не «почему». .
На самом деле фронтенд-разработка заключается в создании веб-приложений, позволяющих пользователям выполнять задачу онлайн: составить план питания, заказать поездку или победить своих друзей в викторине.
Этих пользователей не волнует, являются ли теги img
самозакрывающимися, основан ли макет на grid
или flex
и на каком управлении состоянием используется приложение.
Они действительно заботятся о легкости.
Вот почему я забочусь о простом дизайне, последовательном интерфейсе, интуитивно понятном интерфейсе, удобочитаемости, доступности и т. Д. Потому что я считаю, что максимально упростить им выполнение своей задачи - это часть моей должностной инструкции.
Показательный пример: профилактика бесхозных слов
Слово считается сиротой, если оно является последним словом письменного сообщения и не помещается в той же строке, что и предшествующее ему слово.
Чтение такого сообщения требует немного больше когнитивных усилий. Обычно это также менее эстетично. Так что я бы предпочел переместить и предыдущее слово на новую строку.
Возможные решения
Можно было бы ожидать, что это будет решено с помощью стилизации, и действительно существует свойство для управления сиротскими линиями, к сожалению, я не знаю ничего подобного на уровне слов.
Поэтому единственный выбор - «склеить» два последних слова вместе, заменив пробел между ними неразрывным. Затем браузер рассматривает их как одно слово.
Переход к файлу ресурсов (или свойствам, json, независимо от формата в вашем проекте) и выполнение этого вручную, очевидно, подвержено ошибкам. Более того, если веб-приложение подвергается процессу локализации, есть большая вероятность, что эти неразрывные пробелы буквально потеряются при переводе.
Поскольку у меня уже есть функция для получения сообщения по ключу, мой подход состоит в том, чтобы просто добавить к нему автоматическую замену. Если вы используете Angular, это может быть pipe.
getMessage = (key, language) => { let msg = resources[language][key] if (msg.split(' ').length > 3) { msg = msg.replace(/ (?!.* )/, '\xA0') } return msg }
Примечание: я знаю о потенциальных затратах, скрытых в split
& replace
. Поскольку в моем случае самое длинное сообщение короче 200 символов, это не проблема.
TL;DR
Немного улучшите свое веб-приложение, предотвратив появление лишних слов с помощью приведенного выше кода.
¹ «легкость»? это правильное слово 😊