user10424664

user10424664

Проводник в мир интерфейсов — https://t.me/+4GQxgbrdPhliOTdi
Пикабушник
99 рейтинг 0 подписчиков 1 подписка 5 постов 0 в горячем

Новый дизайн Интернетометра мне нравится больше, чем Speedtest

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

А вам как новый дизайн Интернетометра?

Посмотреть новый дизайн — https://yandex.ru/internet/

Больше интересных наблюдений в моем канале — https://t.me/+4GQxgbrdPhliOTdi

Показать полностью 4
3

Как переносить «висячие» слова на новую строку с помощью JavaScript

изображение сгенерировано в ChatGPT

изображение сгенерировано в ChatGPT

В типографике существует понятие “висячих слов” — это короткие слова (предлоги, союзы, местоимения), которые остаются в конце строки при переносе текста. Такие переносы нарушают удобочитаемость и эстетику текста. В русской типографике принято избегать переносов после коротких слов длиной 1-2 символа.

Решение проблемы с помощью JavaScript

Для автоматического предотвращения переносов после коротких слов можно использовать JavaScript, который заменяет обычные пробелы на неразрывные пробелы ( ) после определённых слов.

// Перенос висячих слов

document.addEventListener('DOMContentLoaded', function () {

// 1. Находим все текстовые элементы, которые нужно обработать

const textElements = document.querySelectorAll('p, span, h1, h2, h3, h4, h5, h6, li, dt, dd');

// 2. Список предлогов и союзов, которые нельзя переносить

const prepositions = ['в', 'без', 'до', 'из', 'к', 'на', 'по', 'о', 'от', 'перед', 'при', 'через', 'для', 'с', 'у', 'и', 'а', 'но', 'да', 'или', 'либо', 'что', 'чтобы', 'как', 'когда', 'если', 'вы'];

// 3. Функция для обработки каждого элемента

textElements.forEach(element => {

// Получаем все текстовые узлы внутри элемента

const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);

const textNodes = [];

while (walker.nextNode()) {

textNodes.push(walker.currentNode);

}

// Обрабатываем каждый текстовый узел

textNodes.forEach(textNode => {

let text = textNode.nodeValue;

// Заменяем пробелы после коротких слов на неразрывные пробелы

text = text.replace(/(^|\s)([а-яё]{1,2})\s/gi, (match, prefix, word) => {

// Проверяем, есть ли слово в списке предлогов

if (prepositions.includes(word.toLowerCase())) {

return prefix + word + '\u00A0'; // \u00A0 - это неразрывный пробел

}

return match;

});

// Обновляем содержимое текстового узла

textNode.nodeValue = text;

});

});

});


Разбор кода по частям


1. Инициализация скрипта

document.addEventListener('DOMContentLoaded', function () {

Код выполняется после полной загрузки DOM-дерева страницы. Это гарантирует, что все элементы будут доступны для обработки.


2. Поиск текстовых элементов

const textElements = document.querySelectorAll('p, span, h1, h2, h3, h4, h5, h6, li, dt, dd');

Скрипт находит все основные текстовые элементы на странице: параграфы, заголовки, элементы списков и другие. Вы можете расширить этот список, добавив другие селекторы.


3. Список коротких слов

const prepositions = ['в', 'без', 'до', 'из', 'к', 'на', 'по', 'о', 'от', 'перед', 'при', 'через', 'для', 'с', 'у', 'и', 'а', 'но', 'да', 'или', 'либо', 'что', 'чтобы', 'как', 'когда', 'если', 'вы'];

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


4. Обход текстовых узлов

const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);

TreeWalker позволяет пройти по всем текстовым узлам внутри элемента, включая вложенные теги. Это важно, так как текст может содержать форматирование (, и т.д.).


5. Регулярное выражение для замены

text = text.replace(/(^|\s)([а-яё]{1,2})\s/gi, (match, prefix, word) => {

Регулярное выражение ищет:
· (^|\s) — начало строки или пробел (группа 1);
· ([а-яё]{1,2}) — слово из 1-2 русских букв (группа 2);
· \s — пробел после слова;
· Флаги gi означают глобальный поиск без учёта регистра.


6. Условная замена

if (prepositions.includes(word.toLowerCase())) {

return prefix + word + '\u00A0'; // \u00A0 - это неразрывный пробел

}

Если найденное короткое слово есть в списке предлогов, обычный пробел заменяется на неразрывный пробел (\u00A0). Это предотвращает разрыв строки между предлогом и следующим словом.


Результат работы

После выполнения скрипта текст “Я иду в магазин” не будет разорван на строки как “Я иду в” и “магазин”. Предлог “в” всегда останется на одной строке со следующим словом благодаря неразрывному пробелу.

Настройка скрипта

Вы можете легко адаптировать скрипт под свои нужды:
· Добавить новые селекторы в querySelectorAll() для обработки других элементов;
· Расширить список слов в массиве prepositions;
· Изменить длину слов в регулярном выражении с {1,2} на другое значение;
· Добавить обработку других языков, изменив диапазон символов в регулярном выражении.

Этот простой скрипт значительно улучшает типографику русскоязычных веб-страниц, делая текст более читаемым и профессионально оформленным.

P.S.: это JS решение иногда не во всех случаях срабатывает + бывают сложности с адаптивностью: на смартфонах может переносить совсем не так, как хотелось бы, текст может «уехать» за пределы контейнера, нужно будет «фиксить» эти моменты в CSS.


Разработчики, а как вы решаете вопрос переноса «висячих» слов?

Подписывайся на мой телеграм-канал, чтобы узнать ещё больше полезных фишек верстки и веб-дизайна.

Показать полностью 1
3

Реакция на комменты и отклики аудитории в соц. сетях

Изображение сгенерировано в «ChatGPT»

Изображение сгенерировано в «ChatGPT»

Не спеша составляю контент-план по развитию телеграм-канала + ютуб, инста, ВК. Наткнулся
на пост Славы: «Вот почему тебя и твой бренд ненавидят в интернете» — https://t.me/ruminblog/448.

Написал коммент к посту. Продублирую его сюда. Он показывает мое виденье/подход работы с откликами на статьи/посты в соц. сетях.

Текст коммента:

Считаю, что важно различать такие понятия как: «негатив, претензия, критика, троллинг, хамство, зависть, нытье». Иногда может показаться, что все
эти понятия об одном и том же, но это не так. Я отношусь серьезно и реагирую только на те мнения, которые имеют отношение
к понятиям «критика» и «претензия».


Если «критика» и «претензия» ничем
не подкрепляются (факты, исследования, опыт, конструктив, конкретика, экспертиза, вдумчивость, глубина, понимание контекста),
то эти понятия автоматический переходят
в «троллинг, нытье, хамство, зависть и т д"».
На это не нужно реагировать

А как вы реагируете на реакции и комменты в соц. сетях?

«Проводник в мир интерфейсов» — t.me/maxtimshin

Показать полностью 1

Сегодня еще раз убедился, что дизайн интерфейса следует обновлять как минимум раз в 3-4 года

Я не о составляющих пользовательского опыта, иерархии и структуры, а именно о стилистике: цветах, фонах, типографике, скруглениях и других элементах интерфейса.

Почему это важно? Я много лет «сижу» на Android, и мой текущий смартфон — Google Pixel 6. В интерфейсе Android давно не происходило значительных изменений. Я являюсь ранним тестером системы и недавно получил обновление до новой версии (16 QPR1).

Скрины взяты с <!--noindex--><a href="https://pikabu.ru/story/segodnya_eshche_raz_ubedilsya_chto_dizayn_interfeysa_sleduet_obnovlyat_kak_minimum_raz_v_34_goda_12757195?u=http%3A%2F%2Frozetked.me&t=rozetked.me&h=c3e1ef0cbc89dbd82e28c9d49d7fd536754d0fe3" title="http://rozetked.me" target="_blank" rel="nofollow noopener">rozetked.me</a><!--/noindex-->

Скрины взяты с rozetked.me

Скрины взяты с <!--noindex--><a href="https://pikabu.ru/story/segodnya_eshche_raz_ubedilsya_chto_dizayn_interfeysa_sleduet_obnovlyat_kak_minimum_raz_v_34_goda_12757195?u=http%3A%2F%2Frozetked.me&t=rozetked.me&h=c3e1ef0cbc89dbd82e28c9d49d7fd536754d0fe3" title="http://rozetked.me" target="_blank" rel="nofollow noopener">rozetked.me</a><!--/noindex-->

Скрины взяты с rozetked.me

Скрины взяты с <!--noindex--><a href="https://pikabu.ru/story/segodnya_eshche_raz_ubedilsya_chto_dizayn_interfeysa_sleduet_obnovlyat_kak_minimum_raz_v_34_goda_12757195?u=http%3A%2F%2Frozetked.me&t=rozetked.me&h=c3e1ef0cbc89dbd82e28c9d49d7fd536754d0fe3" title="http://rozetked.me" target="_blank" rel="nofollow noopener">rozetked.me</a><!--/noindex-->

Скрины взяты с rozetked.me

Скрины взяты с <!--noindex--><a href="https://pikabu.ru/story/segodnya_eshche_raz_ubedilsya_chto_dizayn_interfeysa_sleduet_obnovlyat_kak_minimum_raz_v_34_goda_12757195?u=http%3A%2F%2Frozetked.me&t=rozetked.me&h=c3e1ef0cbc89dbd82e28c9d49d7fd536754d0fe3" title="http://rozetked.me" target="_blank" rel="nofollow noopener">rozetked.me</a><!--/noindex-->

Скрины взяты с rozetked.me

На скринах видно, как изменился интерфейс: изменения затронули плашки, цвета, фоны, типографику, пиктограммы и расстояния между элементами.

Утром я «накатил» обновление, и из-за значительных изменений у меня возникло ощущение, будто я купил новый смартфон. Понимаете суть? Визуальные изменения интерфейса создают чувство новизны.То же самое касается и веб-приложений/сервисов: после обновления стилистики пользователям приятно взаимодействовать с, казалось бы, привычным сервисом.

Многие «топят», что, мол, UX и юзабилити всегда на первом месте, но пример с обновлением Android показывает, что качественный и обновленный UI может «подарить» ощущение новизны даже в знакомом интерфейсе.

«Проводник в мир интерфейсов» — t.me/maxtimshin

Показать полностью 4
Отличная работа, все прочитано!

Темы

Политика

Теги

Популярные авторы

Сообщества

18+

Теги

Популярные авторы

Сообщества

Игры

Теги

Популярные авторы

Сообщества

Юмор

Теги

Популярные авторы

Сообщества

Отношения

Теги

Популярные авторы

Сообщества

Здоровье

Теги

Популярные авторы

Сообщества

Путешествия

Теги

Популярные авторы

Сообщества

Спорт

Теги

Популярные авторы

Сообщества

Хобби

Теги

Популярные авторы

Сообщества

Сервис

Теги

Популярные авторы

Сообщества

Природа

Теги

Популярные авторы

Сообщества

Бизнес

Теги

Популярные авторы

Сообщества

Транспорт

Теги

Популярные авторы

Сообщества

Общение

Теги

Популярные авторы

Сообщества

Юриспруденция

Теги

Популярные авторы

Сообщества

Наука

Теги

Популярные авторы

Сообщества

IT

Теги

Популярные авторы

Сообщества

Животные

Теги

Популярные авторы

Сообщества

Кино и сериалы

Теги

Популярные авторы

Сообщества

Экономика

Теги

Популярные авторы

Сообщества

Кулинария

Теги

Популярные авторы

Сообщества

История

Теги

Популярные авторы

Сообщества