This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.
() translation by (you can also view the original English article)
Может показаться, что существует несметное количество способов, как добиться выполнения определённой задачи - создать веб-сайт, который будет хорошо работать в современном интернете. Веб-разработчики должны определиться какой хостинг и какое место для хранения данных использовать, какие инструменты использовать при написании HTML, CSS и JavaScript, как будет реализован дизайн и к помощи каких JavaScript библиотек/фреймворков стоит прибегать.
После того как вы более-менее определитесь с выбором, в сети полно статей, форумов и различных примеров, которые познакомят вас с всевозможными хитростями для создания приятной среды для взаимодействия вашим пользователям. Не важно какой метод вы выбрали, все разработчики совершают ошибки. Естественно что большинство ошибок требуют специфичного решения, однако некоторые испытания с которыми вам придется столкнуться, давно известны большинству веб-разработчиков.
Итак, на основе моих исследований, опыта и последних наблюдений, я хочу поделиться составленным мной списком десяти распространённых ошибок, которые как мне кажется многие веб-разработчики совершают, а также как их избежать.
Список ниже не подразумевает определённого порядка:
1. Написание устаревшего HTML
Ошибка: во времена становления интернета у нас не было широкого набора опций, как размечать наши страницы, в отличии от того, что мы имеем теперь. Однако старые привычки довольно сложно подавить и большинство людей всё также пишут свой HTML, как это было в двадцатом веке. К примеру использование элемента <table> для создания лейаута, <span> или <div>, вместо семантически корректных элементов, использование тегов, которые считаются устаревшими в текущем стандарте HTML, например <center> или <font>, а также разделение элементов на странице огромным количеством .
Последствия: написание HTML из прошлого десятилетия влечёт за собой создание сложной, непонятной разметки, которая будет вести себя по разному в зависимости от браузера. И это не будет работать в последних версиях современных браузеров, к примеру Microsoft Edge и даже в предыдущих версиях Internet Explorer (11, 10, 9).
Как избежать этого: перестаньте пользоваться элементами <table> для создания лейаута вашего контента, используйте его только для данных, которые предназначены для таблиц. Ознакомьтесь с доступными опциями разметки в текущем стандарте, найти это можно на whatwg.org. Используйте HTML для описания, что представляет из себя контент, а не как он должен выглядеть. Для необходимого отображения используйте CSS.
2. "Всё прекрасно работает в моём браузере..."
Ошибка: разработчик может найти для себя, единственный браузер на который он будет полагаться, просматривать там страницы, и возможно презирать остальные. Также есть вероятность, что пример кода, который был найден в сети, написан безответственно и не проверялись в различных браузерах. Иногда некоторые браузеры обладают отличающимися значениями стилей по умолчанию.
Последствия: ориентируясь на один лишь браузер при написании кода, в результате приводит к печальным последствиям при просмотре веб-сайта в других браузерах.
Как избежать этого: конечно это не совсем практично тестировать веб-сайт в каждом браузере и каждой версии во время разработки. Однако вам следует иметь определённый интервал, по прошествии которого стоит проверить как сайт выглядит в разных браузерах, это будет правильный подход. На сегодняшний день, существуют бесплатные инструменты призванные вам помочь в этом, вне зависимости от платформы на которой вы работаете: бесплатные виртуальные машины или site scanners. Такие сайты как Browserhots или BrowserStack показывают снимки, как страница отображается в разнообразных браузерах/версия/платформах. Visual Studio также может продемонстрировать страницу над которой вы работаете в разных браузерах. При написании CSS, советую "сбросить" все стили по умолчанию, meyerweb.com.
Если ваш сайт использует свойства CSS специфичные для определённого браузера, не забывайте правильно указать вендорные префиксы -webkit-, -moz- или -ms-. Чтобы быть в курсе последних трендов в индустрии, не плохой идей будет ознакомиться с ссылками ниже:
- Блог разработчиков Microsoft Edge: Забудьте о прошлом, часть 2: до свидания ActiveX, VBScript, attachEvent...
- QuirksMode.org: Вредные вендорные CSS префиксы
- Bruce Lawson: О том как Internet Explorer поддерживает префиксы -webkit-
Несмотря на то что ссылки выше говорят нам о том что вендорные префиксы останутся в прошлом, этот сайт предоставляет практическую информацию, как работать с ними на данный момент.
3. Некачественные формы
Ошибка: побуждать пользователя предоставить любую информацию о себе (особенно вводить её в текстовое поле) и думать, что данные будут переданы, как это и было задумано.
Последствия: большинство вещей могут (и скорее всего так оно и есть) пойти не так как задумывалось, когда вы ожидаете получать данные от пользователя. Страницы с данными в какой-то момент могут не отвечать или данные не соответствуют, задуманной схеме данных. Гораздо серьёзнее намеренное вторжение в базу данных сайта, возможно с помощью внедрения вредоносного SQL-кода (OWASP: Топ 10 2013-A1-SQL внедрений).
Как избежать этого: Первый совет, убедитесь, что вы предоставляете пользователю необходимую информацию о том какой тип данных вы хотите получить от него. Сегодня просьба предоставить адрес, может означать, что в результате вы получите адрес компании, домашний адрес или даже емейл адрес! В добавок к этому стоит воспользоваться новыми способами валидации данных HTML, подробнее в этой статье. Не важно как данные валидируются в браузере, убедитесь, что у вас также настроена валидация на стороне сервера. Никогда не используйте T-SQL, если не уверены, что данные предоставленные пользователем могут оказаться подходящего типа.
4. Сервер отдаёт перегруженные страницы
Ошибка: Страница переполнена различной графикой и/или изображениями высокого качества, при этом их фактический размер уменьшен, посредством атрибутов height и width элемента <img>. Файлы CSS и JavaScript связанные с этой страницей очень большие. Исходники HTML разметки могут также быть чрезвычайно переполненными и сложными в своём содержании.
Последствия: некоторым пользователям приходится долго ждать, прежде чем страница отрендерится, многим это может не понравиться и они покинут веб-сайт. Иногда могут появиться ошибки, если время загрузки страницы занимает больше времени, чем необходимо.
Как избежать этого: не думайте, что доступ к интернету с каждым днём становиться всё быстрее и быстрее, в следствии чего позволительно отправлять перегруженные страницы. Вместо этого представьте, что все ресурсы, которые передаются от сервера к браузеру стоят денег. Изображения пожалуй одна из главных причин влекущих к перегруженным страницам. Чтобы уменьшить вероятность того, что изображения будут препятствовать быстрой загрузке странице, можно воспользоваться этими тремя хитростями:
- Задайте себе вопрос: "Неужели все графические элементы, так необходимы?" Если нет, уберите ненужные изображения. Вы можете проверить сайт здесь, чтобы определиться какие изображения стоит сжать.
- С помощью инструментов Shrink O'Matic или RIOT можно уменьшить размер изображения.
- Настройте предзагрузку изображений. Это не увеличит начальную скорость загрузки, но позволит другим страницам на сайте использовать уже загруженные до этого изображения, гораздо быстрее. Чтобы понять как это работает ознакомьтесь с данной статьёй.
Другой способ улучшить скорость загрузки - минифицировать CSS и JavaScript файлы. В этом вам может помочь широкий выбор различных инструментов, к примеру Minify CSS и Minfy JS.
До того как мы перейдём к следующей теме, напомню, чтобы вы старались писать современную HTML разметку (смотрите ошибку 1) и хорошо подумайте прежде чем использовать инлайн <style> или <script> теги в HTML.
5. Написание кода, который якобы будет работать
Ошибка: будь то JavaScript или код, который запускается на сервере, разработчик считает, что всё отлично работает, даже после переноса сайта на хостинг. Код выполняется без ошибок, так как разработчик его проверял.
Последствия: сайт, который не проверялся на наличие ошибок, в результате будет работать неправильно, не так как задумывалось, для конечного пользователя. Это ведёт к тому, что не только у пользователя сложатся негативные впечатления, но даже сообщения об ошибках, могут предоставить информацию хакерам для взлома сайта.
Как избежать этого: человеку свойственно ошибаться, всегда помните это когда пишете код. Используя JavaScript, убедитесь, что у вас организован способ по обнаружению и отладке ошибок. Не смотря на то что данная статья посвящена написанию JavaScript кода для приложений под Windows, основные темы будут также полезны веб-разработчикам, там вы сможете найти множество хороших советов! Другим способом создания надёжного кода, который будет работать в будущем, является unit тестирование.
Детали ошибок на сервере не должны быть видны обычному пользователю. Показывайте только то, что необходимо и убедитесь, что вы сделали привлекательные страницы для отображения основных ошибок, к примеру HTTP 404.
6. Создание кода с большим количеством условий
Ошибка: желание сделать приложение доступным для всех браузеров и версий, разработчик пишет код, который будет работать при любом сценарии. В результате код выглядит, как большой набор if условий на все случаи жизни.
Последствия: как только выходят новые версии браузеров, такой код становится невероятно проблематично поддерживать. И как я упоминал в #1, такой подход не оправдывает себя.
Как избежать этого: реализуйте выявление особенностей (feature detection), вместо определения браузера/версии. Выявление особенностей браузера, уменьшает количество кода, его проще читать и поддерживать. Подумайте о применении такой библиотеки, как Modernizr, которая не только поможет выявить определённые особенности и поддерживаемые функции барузера, но также автоматически предоставит вам поддержку старых браузеров, которые не работают с HTML5 или CSS3.
7. Игнорирование адаптивного дизайна
Ошибка: разработчик/дизайнер думает, что сайт будет открываться на мониторе таких же размеров, как и его собственный.
Последствия: в том случае если сайт просматривается на мобильном устройстве или больших экранах, пользователь испытывает проблемы, важные части страницы не отображаются как надо или, что ещё хуже навигация не работает, как предполагается.
Как избежать этого: думайте адаптивно. Используйте адаптивный дизайн (статьи на Wikipedia или A List Apart) на вашем сайте. Вот некоторые туториалы с практической информацией касательно данного предмета, включая создание адаптивных изображений. Также в этом вам поможет популярная библиотека Bootstrap.
8. Создание несемантичных страниц
Ошибка: создание страниц с действительно полезным контентом, но не предоставляющий никакой информации поисковикам. Доступность (accessibility) не реализована.
Последствия: страницы будут не найдены поисковиком, в результате небольшое количество пользователей посетит их. Содержание страницы непонятно пользователям с плохим зрением.
Как избежать этого: оптимизируйте страницы для поисковиков и добавьте поддержку доступности в ваш HTML. Касательно оптимизации для поисковиков, убедитесь, что вы добавили <meta> теги с осмысленным описанием и ключевыми словами. Хорошая статья об этом на About Tech. Для того, чтобы улучшить доступность, не поленитесь добавить атрибуты alt="описание вашего изображения", каждому <img> или <area> тегу. Конечно ещё много что нужно сделать, больше информации об этом можно найти на About Tech. Также проверьте страницу на Cynthia Says, тем самым вы убедитесь, что она соответствует Section 508.
9. Частое обновление страниц
Ошибка: создание сайта, который требует обновления страницы после каждого действия.
Последствия: подобно перегруженным страницам (смотрите ошибку #4), это влияет на производительность и время загрузки сайта. У пользователя остаются плохие впечатления и это может вести к кратковременному (или долгому) зависанию страницы.
Как избежать этого: следует убедиться действительно-ли запрос к серверу в данном случае необходим. К примеру, скрипт на стороне клиента может быть использован для получения необходимого результата, в том случае если ресурсы сервера не требуются. Также можно использовать AJAX (Wikipedia) или пойти ещё дальше и создать одностраничное приложение "SPA" (Wikipedia). Популярные JavaScript библиотеки/фреймворки, jQuery, KnockoutJS и AngularJS помогут вам в этом.
10. Работаете слишком долго
Ошибка: разработчик проводит много времени создавая веб-контент. Время может быть потрачено на выполнение повторяющихся задач.
Последствия: слишком много времени уходит на первый запуск сайта или добавления последующих обновлений. Ценность разработчика уменьшается при появлении новых разработчиков, которые делают подобную работу быстрее, без лишних усилий. Когда вы делаете всё вручную, это ведет к появлению ошибок и на отладку уходит время.
Как избежать этого: найдите другие варианты. Подумайте о том, чтобы использовать новые инструменты и подходы на каждой стадии процесса разработки. К примеру, чем лучше ваш текущий тестовый редактор Sublime Text или Visual Studio? Не смотря на то какой редактор вы используете, изучили-ли вы все его доступные функции? Возможно потратив немного времени на чтение документации, может открыть для вас новый способ сделать что-то быстрее, что может в будущем сохранить драгоценные часы вашего времени. К примеру почитайте, как дополнение к Visual Studio, увеличит продуктивность веб-разработчика, в этой статье.
Не упускайте из виду инструменты, которые могут вам помочь! К примеру, обратите внимание на инструмент dev.modern.ie для тестирования (на различных платформах и устройствах) и отладки.
Вы также можете ускорить процесс разработки и уменьшить количество ошибок, автоматизируя те или иные задачи. На помощь, в этом, вам придёт такой инструмент, как Grunt, способный автоматизировать такие процессы, как минификация файлов (смотрите ошибку #4). Другой пример - Bower, поможет организовать установку и обновление библиотек/фреймворков (смотрите ошибку #9).
Что же насчёт веб-сервера? С помощью сервиса Microsoft Azure Web Apps, вы можете быстро разместить свой сайт на сервере и масштабировать его, в случае если ваш бизнес будет расширяться!
Подытожим
Выявив самые распространённые ошибки веб-разработчиков вам удастся избежать того разочарования с которым сталкиваются другие. Важно не только знать, но также осознавать влияние, которое оказывает та или иная ошибка, чтобы в дальнейшем предотвратить её, в результате мы сможем добиться организации продуктивного рабочего процесса!
Больше информации о JavaScript
Эта статья является частью серии от представителей Microsft, о веб-разработке, обучению JavaScript, проектах с открытым исходным кодом, уроков по изучению передовых практик включая Microsoft Edge и EdgeHTML -движок отображения страниц.
Мы предлагаем вам протестировать сайт на различных браузерах и устройствах, включая Microsoft Edge—браузер по умолчанию для Windows 10, с помощью бесплатного инструмента dev.modern.IE:
- Проверьте ваш веб-сайт на наличие устаревших библиотек, проблем с лейаутом и доступностью.
- Используйте виртуальную машину на Mac, Linux и Windows.
- Удалённое тестирование Microsoft Edge на вашем устройстве
- Coding Lab на GitHub: тестирование в различных браузерах и лучшие подходы
Подробное изучение Microsoft Edge и веб-платформы от наших представителей и инженеров:
- Microsoft Edge Web Summit 2015 (серия о том что следует ожидать от новых браузеров, новые особенности веб-платформ и приглашённые спикеры от нашего сообщества)
- Ух ты! я могу тестировать Edge и IE на Mac и Linux! (автор - Rey Bango)
- Продвинутый JavaScript не нанося вред вебу (недавние заметки Christian Heilmann's)
- Движок отображения страниц Edge, который делает работу с веб-сайтами приятнее (автор - Jacob Rossi)
- 3D рендеринг с WebGL (автор - David Catuhe, включая проекты Vorlon.JS и BabylonJS)
- Хостинг веб-приложений и новинки веб-платформы (авторы - Kevin Hill и Kiril Seksenov, включая проект ManifoldJS)
Больше бесплатных инструментов для любой операционной системы и ресурсов с информацией посвящённой веб-платформе:
