10 распространенных ошибок, которые совершают веб-разработчики

10 распространенных ошибок, которые совершают веб-разработчики

От автора: существует бесконечное количество способов решить одну и ту же задачу – разработать сайт, который будет отлично работать в сегодняшнем современном интернете. Разработчики стоят перед выбором веб-хостинга, на чем писать HTML, CSS и JavaScript, какой дизайн использовать, а также какие JavaScript библиотеки/фреймворки подключить. После того, как вы сузили круг используемого инструментария, в сети можно найти кучу статей, форумов и шаблонов, которые помогут улучшить ваш сайт. И в независимости от того, какой путь был выбран, все разработчики ошибаются. Некоторые проблемы весьма специфичны, а другие имеют общий характер для всех веб-разработчиков. Итак, с помощью исследований, полученного опыта и последних наблюдений я хочу поделиться своим списком десяти общих ошибок, которые допускают веб-разработчики – и как их избегать.

1. Использование устаревшего HTML

Ошибка: Раньше в интернете было намного меньше решений по разметке, чем сейчас. Тем не менее, до сих пор олдфаги со своими старыми привычками и многие другие все еще пишут на HTML 20-го века. Пример – использование table для разметки макета, использование span или div там, где подойдут более семантические элементы, или теги, которые вообще исключены из стандарта типа center или font. Распространенная ошибка применение   для добавления множественных отступов.

Последствия: HTML 10-ли летней давности может сильно усложнить разметку, и она будет вести себя противоречиво в разных браузерах. Это касается и последней версии браузера от Microsoft Edge и даже последних версий IE (11, 10, 9).

Как избегать: Прекратите использовать table для разметки контента и таблиц. Познакомьтесь, наконец, с передовыми тегами, как на whatwg.org. Используйте HTML для описания контента, а не для того, как это будет отображаться. Для отображения контента используйте CSS ( http://www.w3.org/Style/CSS/).

2. «В моем браузере все работает…»

Ошибка: Разработчик может любить какой-то конкретный браузер, а другой презирать, из-за чего тестирование страниц может быть предвзятым. Также могут использоваться готовые куски кода, в которых просто не учтены особенности отображения в конкретных браузерах. Кроме того, в некоторых браузерах значения по умолчанию для стилей отличаются.
Последствия: Сайт, написанный под один конкретный браузер, может ужасно отображаться в остальных.

Как избегать: Тестировать сайт во всех браузерах и версиях во время разработки не очень практично. Но можно установить временные промежутки для проверки сайта во всех браузерах. Сейчас существует множество бесплатных сервисов для проверки: бесплатный VMs, сканеры сайтов. Сайты типа http://browsershots.org/ или https://www.browserstack.com показывают скриншот того, как определенная страница отрисовывается в различных браузерах/версиях/платформах. Инструменты как Visual Studio могут эмулировать работу некоторых браузеров при отображении страниц. При проектировании в CSS нужно сбросить все стили как на meyerweb.com.

Если вы используете определенные свойства CSS не поддерживающиеся в отдельных браузерах, не забудьте про вендорные префиксы -webkit-, -moz-, или -ms-. В качестве рекомендаций можно изучить пару ссылок, думаю оно того стоит:

Ссылки выше объясняют, почему мы отходим от применения вендорных префиксов и то, почему они вредны. А этот сайт помогает понять, как продуктивно работать в интернете в наше время.

3. Неправильные формы

Ошибка: Создание подсказок для всех полей формы (особенно для текстовых) и предположение, что пользователь введет то, что вы ожидаете.

Последствия: Все может пойти (и, скорее всего, пойдет) наперекосяк, если через чур доверять пользователю. Страницы могут упасть, если передать неверный тип данных или передать пустое поле. Еще более серьезной проблемой является умышленный взлом баз данных, возможно, через инъекции (см OWASP: Топ 10 2013-А1-инъекций).

Как избегать: Первым делом, необходимо убедиться, что пользователю ясно, какой тип информации от него хотят получить. Сегодня адрес может быть не только домашним, рабочим, но и электронным! Кроме того, для полной достоверности можно воспользоваться методами проверки данных, как в этой статье. Неважно как проверяется информация на стороне клиента, убедитесь, что она также проверяется и на стороне сервера. Смотрите за тем, чтобы в полях не было никаких SQL-выражений, проверяйте каждое поле на тип данных.

4. Слишком долгое ожидание ответа от сервера

Ошибка: На странице полно графики в высоком разрешении, уменьшенной с помощью атрибутов width и height. Файлы CSS и JavaScript много весят. Исходный HTML код также излишне сложен и частично ненужнен.

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

Как избегать: Не думайте, что интернет становится все распространеннее и быстрее – позволяя не следить за размером кода. Вместо этого прогоните ваш сайт через различные тесты, чтобы оценить скорость загрузки. Основная причина долгой загрузки это изображения. Воспользуйтесь тремя советами, чтобы минимизировать время необходимое на загрузку изображений:

Спросите себя «Мне действительно нужны все изображения?». Если нет, удалите ненужные. Можно просканировать сайт, чтобы узнать, какие изображения можно сжать.

Минимизируйте размер изображений с помощью инструментов Shrink O’Matic или RIOT.

Предзагружайте изображения. Это не ускорит первоначальную загрузку, но поможет повысить производительность тех страниц, которые используют эти изображения. В статье есть пара советов.

Перед тем, как продолжить, хочу посоветовать вам, следить за новинками в HTML (см ошибку №1) и не забывайте про здравый смысл при использовании тегов style или script в верстке.

5. Написание кода, который «должен» работать

Ошибка: Будь то JavaScript код или серверный код, разработчик тестировал его на стадии разработки. Он проверил код и думает, что тот будет работать так же, после запуска сайта.

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

Как избегать: Человеку свойственно ошибаться, это нужно помнить и в программировании. Старайтесь с помощью JavaScript отлавливать ошибки. Хоть в статье и рассматривается JavaScript для приложений Windows, большинство тем также относятся и к веб-разработке, и тут много полезных советов! Еще один из способов создать надежный код, который можно будет легко модифицировать в будущем, это модульное тестирование.

Ошибки на стороне сервера должны отлавливаться так, чтобы пользователь даже не заподозрил этого. Показывайте пользователю только то, что ему нужно знать, а также не забывайте про такие вещи как страница 404.

6. Написание слишком обширного кода

Ошибка: Поддержка всех браузеров и версий благородное дело, разработчик пишет код, отвечающий всем возможным сценариям. Код превращается в свалку из выражений, разветвляясь во всех направлениях.

Последствия: По мере появления новых версий браузеров, обслуживание и управление файлами кода становится громоздким и неудобным. Как и с ошибкой №1, это больше не нужно.

Как избегать: Используйте функцию обнаружения (техника Feature detection) в коде, а не обнаружение браузера/версии. Эта техника не только поможет радикально сократить ваш код, его станет намного легче читать и обслуживать. Библиотека Modernizr не только помогает с функцией обнаружения, но также автоматически делает фоллбэк старых версий браузеров, которые не поддерживают HTML5 или CSS3.

7. Неадаптивный дизайн

Ошибка: Предполагать, что у пользователя такой же размер монитора, как у разработчика или дизайнера.

Последствия: Пользователю будет крайне неудобно просматривать ваш сайт на мобильных устройствах или очень больших экранах, он может упустить что-то важное или вообще не попасть на остальные страницы.

Как избегать: Мыслите адаптивно. Применяйте адаптивный дизайн для вашего сайта. Очень популярная библиотека, когда дело касается адаптивного дизайна Bootstrap.

8. Создание бессмысленных страниц

Ошибка: Создание страниц с контентом, который может быть очень полезен с абсолютным отсутствием данных для поисковых систем. Найти такие страницы просто невозможно.

Последствия: Страницы не видны поисковикам, а значит, имеют очень низкую посещаемость. Текст на странице может быть очень мелким для людей с ослабленным зрением.

Как избегать: Используйте SEO (search engine optimizations) и всевозможные инструменты в HTML для повышения доступности страницы. Не забудьте добавить ключевые слова и описание. Все это отлично пояснено на About Tech. Для еще большей доступности используйте атрибут alt=»описание изображения» для каждого тега img или area. Конечно, это не все, и еще много можно прочесть на About Tech. Также совместимость веб-страниц с Section 508 можно проверить на сайте Cynthia Says.

9. Создание неинтерактивных сайтов

Ошибка: Создание сайта, на котором каждое взаимодействие требует полного обновления страницы.

Последствия: Похожи с проблемой №4, страдает производительность страницы. У пользователя терпение не бесконечное, и с каждым обновлением страницы оно уменьшается.

Как избегать: Нужно проверить, действительно ли нужно напрягать сервер при каждом взаимодействии. Например, можно использовать скрипт на стороне клиента. Также можно воспользоваться AJAX или пойти еще дальше и использовать одностраничные сайты «SPA». Существуют JavaScript библиотеки/фреймворки, облегчающие работу с интерактивными элементами, как JQuery, KnockoutJS, и AngularJS.

10. Работать слишком много

Ошибка: Разработчик тратит слишком много времени на создание контента. Много времени уходит на повторяющиеся задачи или на набор кода.

Последствия: Время между запуском сайта и последующими обновлениями становится слишком длинным. Разработчик становится менее ценен, если появляется другой, выполняющий сравнимый объем работы за меньший срок и с меньшим количеством ошибок. При наборе текста могут возникать ошибки, а их поиск и устранение могут занимать еще больше времени.

Как избегать: Посмотрите, что вы можете сделать. Решите, может, стоит заменить ПО или сменить подход для каждого этапа разработки. К примеру, какой текстовый редактор вы используете по сравнению с Sublime Text или Visual Studio? В независимости от того, какой редактор вы используете, вы точно хорошо его изучили? Может, стоит потратить немного времени на штудирование документации, и вы найдете способ сэкономить пару часов. Например, как расширение к Visual Studio может увеличить производительность веб-разработчиков в этой статье.

Посмотрите в интернете, может быть есть другие инструменты, которые могут вам помочь! Например, поищите на сайте dev.modern.ie (по всем платформам и устройствам).

Автоматизация процессов также поможет снизить время на разработку и уменьшить количество ошибок. Примером может послужить Grunt, таск раннер, который может автоматизировать такие вещи, как минификация файлов (см ошибку №4). Другой пример — Bower, поможет управлять библиотеками/фреймворками (см ошибку №9).

А как насчет самого сервера? С помощью таких сервисов как Microsoft Azure Web Apps можно быстро создавать виртуальные сайты любым способом, что облегчит ваш бизнес!

Обобщение

Выявив типичные ошибки, веб-разработчики могут избежать множества проблем, с которыми столкнулись другие. Важно не только понять ошибку, но также и понять ее последствия и принять меры по ее устранению. Тогда мы сможем организовать разработку и уверенно идти к своей цели!

Автор: Michael Palermo

Источник: http://www.sitepoint.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree