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

2015-11-18 0 ∞

Все разработчики склонны к ошибкам. И хотя некоторые ошибки связаны с конкретными подходами, существуют проблемы, общие для всех веб-разработчиков.

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

Написание кода HTML «по старинке»

1. Написание кода HTML «по старинке»

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

Влияние: написание кода HTML по стандартам прошлого десятилетия может привести к чрезмерно сложной разметке, которая будет вести себя непредсказуемо в разных браузерах. И речь идет не только о более современных браузерах, таких как Microsoft Edge, но и о последних версиях Internet Explorer (11, 10, 9).

Как избежать: не применяйте для разметки элемент <table> и ограничьте его использование для отображения табличных данных. Познакомьтесь с доступными на сегодняшний день возможностями разметки, например, на сайте whatwg.org. Используйте HTML лишь для описания контента. Для представления вашего контента применяйте CSS.

2. «Это работает в моем браузере...»

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

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

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

Инструменты, среди которых Visual Studio, могут также использовать несколько браузеров, чтобы показать страницу, над которой вы работаете. При разработке с помощью CSS предусмотрите сброс всех значений по умолчанию.

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

3. Неудачная форма

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

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

Как избежать: в первую очередь нужно убедиться, что пользователю понятно, какой тип данных вы ожидаете от него. В дополнение к конкретике, воспользуйтесь методами валидации данных, доступных в современном HTML. Независимо от того, как данные валидируются на стороне клиента, убедитесь, что проверка осуществляется также и на серверной стороне. Никогда не позволяйте запросам T-SQL использовать данные из пользовательского ввода без подтверждения, что каждое поле является тем типом данных, которым и должно быть.

4. Чрезмерно большие ответы

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

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

Как избежать: изображения – один из основных виновников «раздутия» страниц. Чтобы свести к минимуму время загрузки страницы, воспользуйтесь этими советами:

Спросите себя: «Действительно ли вся моя графика абсолютно необходима?». Если нет, удалите ненужные изображения. Вы можете просканировать свой сайт для определения того, какие изображения можно сжать;
Минимизируйте размер файлов ваших изображений с помощью таких инструментов, как Shrink O'Matic или RIOT;
Предварительная загрузка изображений. Это не уменьшит затраты на начальную загрузку, но поможет сделать загрузку других страниц сайта, которые используют эти же изображения, гораздо быстрее.

Также минимизируйте количество и объемы связанных файлов CSS и JavaScript. Есть множество инструментов, которые помогут вам в этом начинании, например, Minify CSS и Minify JS.

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

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

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

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

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

6. Написание разветвленного кода

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

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

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

Реализуйте использование библиотеки, например, Modernizr, которая помогает не только с обнаружением возможностей, но и автоматически обеспечивает поддержку резервирования для более старых браузеров, ничего «не знающих» о существовании HTML5 или CSS3.

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

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

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

Как избежать: используйте адаптивный дизайн (смотрите статью на Википедии) для своих сайтов. Популярной библиотекой в этой области является Bootstrap.

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

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

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

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

Чтобы предоставить больше специальных возможностей, используйте в каждом из ваших тегов <img> или <area> атрибут alt="Описание вашего изображения".

9. Создание сайтов со слишком частым обновлением страниц

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

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

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

Вы можете также воспользоваться техниками AJAX (статья в Википедии) или пойти еще дальше и применить SPA (статья в Википедии). Для этого можно использовать JQuery, KnockoutJS и AngularJS.

10. Чрезмерная работа

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

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

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

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

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

Заключение

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