[Перевод] Исправление странной ошибки и стратегии отладки, проверенные временем

Скрипты и советы | 8 сентября 2020

Уроки CSS на Хабрахабре, habrahabr.ru, Блог компании RUVDS.com, Разработка веб-сайтов, CSS, HTML, SVG, разработка,






Помните, когда вам в последний раз доводилось сталкиваться с ошибкой, связанной с пользовательским интерфейсом, на исправление которой у вас уходили многие часы? Возможно, эта ошибка происходила периодически, без каких-то видимых причин. Может быть, она появлялась при определённых условиях (это могло зависеть от устройства, операционной системы, браузера или от действий пользователя) или была скрыта где-то в недрах одной из множества фронтенд-технологий, являющихся частью клиентской части веб-проекта?

Недавно мне пришлось вспомнить о том, какими запутанными могут быть причины возникновения ошибок пользовательских интерфейсов. А именно, речь идёт об исправлении интересной ошибки, влияющей на вывод SVG-изображений в браузере Safari. Эта ошибка возникала без какой-то определённой системы и без каких-то очевидных причин. Я, столкнувшись с проблемой, попытался найти похожие случаи, надеясь на то, что описания таких случаев дадут мне намёк на то, что происходит. Но мне не удалось отыскать ничего полезного. Правда, несмотря на все стоящие передо мной препятствия, я смог с этой ошибкой справиться.

Я проанализировал проблему, используя некоторые стратегии отладки, о которых я собираюсь рассказать в этой статье. После того, как от ошибки я избавился, я вспомнил совет, который Крис Койер дал читателям своего Твиттера несколько лет назад. Этот совет звучит так: «Напишите статью, которую вы хотели бы найти, когда обращались к поисковику». Собственно говоря, так я и поступил.
Читать дальше →
Ошибки web-дизайна

Новый рейтинг ошибок веб-дизайна от мирового авторитета в области юзабилити, руководителя «Nielsen Norman Group» Якоба...

Подробнее
[Перевод] Использование CSS-grid при проектировании пользовательских интерфейсов

CSS-grid — это отличный инструмент для создания макетов страниц контентно-ориентированных сайтов, включающих в себя...

Подробнее
[recovery mode] Ошибки системных и прикладных программистов, попавших во фронтенд

В одной моей социальной компании роль фронтенд-разработчиков сравнивают с бас-гитаристами в музыкальных группах:...

Подробнее
[Перевод] Выравнивание логотипов средствами CSS

Если вы занимаетесь фронтенд-разработкой, то вам, возможно, приходится создавать разделы сайтов, содержащие логотипы...

Подробнее
[Перевод] Использование Grid для макетов страниц, а Flexbox — для макетов компонентов

Мой брат недавно отучился на компьютерщика и сейчас завершает стажировку в области фронтенд-разработки. Он узнал и о...

Подробнее
[Из песочницы] 15 ошибок или советов HTML и CSS

Ошибки и советы я написал по-своему опыту. Если найдутся ошибки типа «вредных советов», то буду рад услышать...

Подробнее

💬 Комментарии

В связи с новыми требованиями законодательства РФ (ФЗ-152, ФЗ «О рекламе») и ужесточением контроля со стороны РКН, мы отключили систему комментариев на сайте.

🔒 Важно Теперь мы не собираем и не храним ваши персональные данные — даже если очень захотим.

💡 Хотите обсудить материал?

Присоединяйтесь к нашему Telegram-каналу:

https://t.me/tcsecms/

Нажмите кнопку ниже — и вы сразу попадёте в чат с комментариями