Разработка веб-интерфейса обычно ассоциируется с совместным использованием 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

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

¹ «легкость»? это правильное слово 😊