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

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

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

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

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

Влияние: написание кода 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 также может быть неоправданно сложным и объемным.

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

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

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

Также минимизируйте число и объемы связанных файлов 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 , вы можете быстро создать веб-сайт любой сложности, который сможет без труда масштабироваться вместе с бизнесом!

Заключение

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

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

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