Как сделать ужасный для пользователя интерфейс. Коллекция HTML/CSS лайфхаков

Привет, Хабр! Я в течение нескольких лет рассказываю вам, как сделать интерфейс лучше для пользователя. Например, в прошлом месяце я поделился простыми HTML и CSS лайфхаками, которые помогают сделать интерфейс дружелюбнее к пользователю . А недавно я подумал: а вдруг есть фронтендеры, которые хотят сделать ужасный интерфейс? Ну не любят они пользователей. Или хотят сделать пакость работодателю, который их обидел. Где им взять советы? Надо помочь! Я собрал вредные HTML и CSS техники. Они супер простые, но очень действенные. Я уверен на сто процентов, что благодаря им интерфейс вашего проекта заставит пользователя вспомнить несколько «ласковых» слов. Давайте посмотрим, что я вам подготовил.

https://habr.com/ru/companies/ruvds/articles/912980/

#ruvds_статьи #css #вёрстка #вредные_советы

Как сделать ужасный для пользователя интерфейс. Коллекция HTML/CSS лайфхаков

Привет, Хабр! Я в течение нескольких лет рассказываю вам, как сделать интерфейс лучше для пользователя. Например, в прошлом месяце я поделился простыми HTML и CSS лайфхаками, которые помогают сделать...

Хабр

ChatGPT vs Гик. Сможет ли AI заменить опытного верстальщика?

Привет, Хабр. Моя подруга постоянно читает новости о том, что искусственный интеллект заменит какую-то профессию. Тестировщик, программист, дизайнер, писатель и т. д. А сможет ли он заменить опытного верстальщика? Мне стало интересно, сможет ли ChatGPT написать код, как я. Чтобы мог сказать: «Да, вот это мы допускаем в продакшен». Добиваться этой цели я буду на примере нескольких популярных паттернов. Я уверен, что фронтендеры постоянно верстают их из проекта в проект. Ещё я честно признаюсь, что у меня мало опыта работы с такими системами. Я новичок. Так что тоже учитывайте это при чтении. Давайте посмотрим, что в итоге получилось.

https://habr.com/ru/companies/ruvds/articles/908698/

#ruvds_статьи #chatgpt #вёрстка #нейросети #создание_сайтов

ChatGPT vs Гик. Сможет ли AI заменить опытного верстальщика?

Привет, Хабр. Моя подруга постоянно читает новости о том, что искусственный интеллект заменит какую-то профессию. Тестировщик, программист, дизайнер, писатель и т. д. А сможет ли он заменить опытного...

Хабр

HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 12

Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильей. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья — мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке. Сегодня мы рассмотрим следующие аспекты: что можно сделать лучше для пользователей с дислексией; как незаметно улучшить интерфейс для пользователей с травмой кистей рук; есть ли сложности с сокращениями для пользователей скринридера. Давайте начнём!

https://habr.com/ru/companies/ruvds/articles/905270/

#ruvds_статьи #accessibility #html #css #вёрстка #html_css_a11y_story_melnik909

HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 12

Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильей. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья — мой незрячий знакомый, который...

Хабр

Вы не знаете CSS. Мои вопросы о CSS с ответами. Часть 3

Хабр, привет! Я стабильно пишу здесь о CSS. Мне радостно, что моя работа вам полезна. Но хочется что-то нового. Вызывающего споры. В общем, я пришёл к формату статей в виде вопрос-ответ. Вопросы будут те, что я спрашиваю на интервью. Так что у вас будет повод сказать: «А зачем это надо?». При составлении вопросов я хотел проверить понимание базовых моментов, которые есть в вёрстке любого проекта. Ещё будут вопросы на знание более редких аспектов и «новинок» в CSS. В общем, я хочу вас завалить, чтобы казаться супер умным! (здесь ирония). Пожалуйста, не воспринимайте мои вопросы серьёзно. Давайте просто весело проведём время. Плюс попробуем узнать что-то новое. Ведь у каждого вопроса будет мой ответ. И вы тоже можете оставить свой в комментариях. Я обязательно буду их читать. Так, вы готовы? Давайте посмотрим, что я вам подготовил.

https://habr.com/ru/companies/ruvds/articles/900860/

#ruvds_статьи #css #вёрстка #фронтенд #собеседования #вопросы_и_ответы #sm909_questions

Вы не знаете CSS. Мои вопросы о CSS с ответами. Часть 3

Хабр, привет! Я стабильно пишу здесь о CSS. Мне радостно, что моя работа вам полезна. Но хочется что-то нового. Вызывающего споры. В общем, я пришёл к формату статей в виде вопрос-ответ. Вопросы будут...

Хабр

[Перевод] Улучшаем тексты в вебе при помощи text-wrap: pretty

В новом Safari Technology Preview реализовано значение text-wrap: pretty , обеспечивающее беспрецедентный уровень чёткости типографики в вебе. Давайте рассмотрим возможности WebKit-версии pretty , а затем сравним её с balance и другими значениями text-wrap , чтобы лучше понять, когда какие следует выбирать. Идеи о том, что «хорошо» для типографики произрастают из эпохи, когда набор производился вручную при помощи металла, дерева и чернил. Наборщики тщательно выбирали, где должно находится слово: в конце строки, в начале другой или его нужно разбить дефисом. Их усилия повышали понятность текстов, снижали напряжение глаз и просто увеличивали удовольствие от чтения. Хотя восприятие красоты может быть субъективным, в мире существуют и глубоко укоренившиеся типографские традиции для разных языков и написаний. Эти традиции через века несут человеческую культуру от поколения к поколению. В цифровой типографике все слова располагает компьютер, а не человек. Веб-дизайнеры или разработчики часто создают шаблон, заполняемый различными версиями контента. Типографика в вебе не настраивается вручную, особенно в случае гибкой структуры текста, меняющейся в зависимости от формы и размеров экрана. Что же мы можем сделать, чтобы приблизиться к качеству традиционной типографики, сохранив при этом возможность механизации, привносимую современными компьютерами? Одним из решений может стать text-wrap:pretty . Оно предназначено для обеспечения нового уровня качества типографики в вебе благодаря использованию учитывающих абзацы алгоритмов.

https://habr.com/ru/articles/899194/

#вёрстка #свойства_css #safari #google_chrome #edge

Улучшаем тексты в вебе при помощи text-wrap: pretty

В новом Safari Technology Preview реализовано значение text-wrap: pretty ,  обеспечивающее беспрецедентный уровень чёткости типографики в вебе. Давайте рассмотрим возможности WebKit-версии pretty...

Хабр

Неизвестно полезный CSS. Часть 8

Привет, Хабр. Я продолжаю рассказывать про неизвестные широкому кругу разработчиков CSS фишки. Я отбираю их так, чтобы они были полезны в разного рода проектах. Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React приложение. Они поддерживаются большинством браузеров. Отдельно отмечу, что я не считаю IE11 современным браузером. По этой причине я не учитывал его. Сегодня мы рассмотрим: как можно избежать длинных значений для свойства transform ; можно ли побороть неоднозначность медиа-запросов; малоизвестное и полезное свойство при работе с «гридами»; какой нюанс вы можете не знать про свойство align-content ; древнейшее свойство, помогающее улучшить взаимодействие пользователя клавиатуры с интерфейсом. Больше не буду затягивать. Давайте посмотрим, что я вам подготовил.

https://habr.com/ru/companies/ruvds/articles/896174/

#ruvds_статьи #sm909_unknown_css #css #frontend #webразработка #вёрстка #лайфхаки

Неизвестно полезный CSS. Часть 8

Привет, Хабр. Я продолжаю рассказывать про неизвестные широкому кругу разработчиков CSS фишки. Я отбираю их так, чтобы они были полезны в разного рода проектах. Неважно, верстаете ли вы сайт для...

Хабр

Вы не знаете CSS. Мои вопросы о CSS с ответами. Часть 2

Хабр, привет! Я стабильно пишу здесь о CSS. Мне радостно, что моя работа вам полезна. Но хочется чего-то нового. Вызывающего споры. В общем, я к формату статей в виде вопрос-ответ. Вопросы будут те, что я спрашиваю на интервью. Так что у вас будет повод сказать: «А зачем это надо?». При составлении вопросов я хотел проверить понимание базовых моментов, которые есть в вёрстке любого проекта. Ещё будут вопросы на знание более редких аспектов и «новинок» в CSS. В общем, я хочу вас завалить, чтобы казаться супер умным! (здесь ирония). Пожалуйста, не воспринимайте мои вопросы серьёзно. Давайте просто весело проведём время. Плюс попробуем узнать что-то новое. Ведь у каждого вопроса будет мой ответ. И вы тоже можете оставить свой в комментариях. Я обязательно буду их читать. Так, вы готовы? Давайте посмотрим, что я вам подготовил.

https://habr.com/ru/companies/ruvds/articles/891912/

#ruvds_статьи #css #вёрстка #фронтенд #собеседования #вопросы_и_ответы #sm909_questions

Вы не знаете CSS. Мои вопросы о CSS с ответами. Часть 2

Хабр, привет! Я стабильно пишу здесь о CSS. Мне радостно, что моя работа вам полезна. Но хочется чего-то нового. Вызывающего споры. В общем, я к формату статей в виде вопрос-ответ. Вопросы будут те,...

Хабр

Как дизайнеру с помощью макетов оптимизировать процессы и сэкономить время

Привет! Я Влад — старший дизайнер в Альфа-Банке, занимаюсь фичами в «Платежах и переводах». Неровно дышу к улучшению внутренних процессов в компании, поэтому часто выступаю с различными инициативами, одна из которых — разработка стандарта оформления макетов для мобильного банка. Этот набор правил и блоков для оформления я назвал Хелперами, опубликовал в качестве библиотеки и начал экспансию. Использование было добровольным, но благодаря «сарафанному радио» они стали популярными, и за пару лет десятки дизайнеров начали с ними работать. Хелперы прошли три мажорные версии, а в этом году легли в основу общебанковских требований к оформлению сценариев. В статье покажу, как Хэлперы эволюционировали до текущего вида, как помогают сотне дизайнеров не путаться в своих и чужих макетах, и поделюсь другими полезными сторонами стандартов для команды.

https://habr.com/ru/companies/alfa/articles/892022/

#дизайн #дизайн_интерфейсов #макеты #ux_design #оформление #вёрстка #макет_интерфейса

Как дизайнеру с помощью макетов оптимизировать процессы и сэкономить время

Привет! Я Влад — старший дизайнер в Альфа-Банке, занимаюсь фичами в «Платежах и переводах». Я неровно дышу к улучшению внутренних процессов в компании, поэтому часто выступаю с различными...

Хабр

Магия CSS на практике: советы по вёрстке от гика. Часть 6

Хабр, привет! Я снова пришёл к вам со статьёй, где показываю мои любимые техники вёрстки. Моя цель — поделиться опытом с вами. Я использую не только трюки известных экспертов, есть лично мои придумки. Но, пожалуйста, относитесь к этому контенту как просто к альтернативному мнению. Мои техники не являются единственными правильными решениями. Сегодня мы рассмотрим: мой подход к написанию стилей для динамической сетки без использования БЭМ-модификаторов; как я перестал писать свойство text-decoration со значением none для элемента <button> ; способ для вычисления значения свойства width в зависимости от контента элемента; почему вам стоит удалить все стили с использованием псевдо-класса :focus . Давайте посмотрим, что я вам подготовил.

https://habr.com/ru/companies/ruvds/articles/887542/

#ruvds_статьи #css #sm909_css_tricks #вёрстка #лайфхаки

Магия CSS на практике: советы по вёрстке от гика. Часть 6

Хабр, привет! Я снова пришёл к вам со статьёй, где показываю мои любимые техники вёрстки. Моя цель — поделиться опытом с вами. Я использую не только трюки известных экспертов, есть лично мои придумки....

Хабр

Вы не знаете CSS. Мои вопросы о CSS с ответами

Хабр, привет! Я стабильно пишу здесь о CSS. Мне радостно, что моя работа вам полезна. Но хочется чего-то нового. Вызывающего споры. В общем я возвращаюсь к формату статей в виде вопрос-ответ. Вопросы будут те, которые я спрашиваю на интервью. Так что у вас будет повод сказать: «А зачем это надо?». При составлении вопросов я хотел проверить понимание базовых моментов, которые есть в вёрстке любого проекта. Ещё будут вопросы на знание более редких аспектов и «новинок» в CSS. В общем я хочу вас завалить, чтобы казаться супер умным! (здесь ирония). Пожалуйста, не воспринимайте мои вопросы серьёзно. Давайте просто весело проведём время. Плюс попробуем узнать что-то новое. Ведь у каждого вопроса будет мой ответ. И вы тоже можете оставить свой в комментариях. Я обязательно буду их читать. Так, вы готовы? Давайте посмотрим, что я вам подготовил.

https://habr.com/ru/companies/ruvds/articles/883284/

#ruvds_статьи #css #вёрстка #фронтенд #собеседования #вопросы_и_ответы

Вы не знаете CSS. Мои вопросы о CSS с ответами

Хабр, привет! Я стабильно пишу здесь о CSS. Мне радостно, что моя работа вам полезна. Но хочется чего-то нового. Вызывающего споры. В общем я возвращаюсь к формату статей в виде вопрос-ответ. Вопросы...

Хабр