Кажется, существует бесконечный выбор относительно того, как выполнить ту же задачу: разработать веб-сайт, который работает в современной современной сети. Веб-разработчики должны выбрать платформу веб-хостинга и основное хранилище данных, какие инструменты для написания HTML, CSS и JavaScript, как будет реализован дизайн и какие библиотеки / фреймворки JavaScript будут включены.
Как только выбор сужается, мир онлайн наполняется статьями, форумами и примерами, которые дают советы по улучшению работы в Интернете. Тем не менее, независимо от того, какой путь выбран, все разработчики подвержены ошибкам. Хотя некоторые ошибки будут связаны с конкретным подходом, есть проблемы, которые разделяют все веб-разработчики.
Таким образом, благодаря исследованиям, опыту и недавним наблюдениям, я решил поделиться списком, который я составил, из десяти распространенных ошибок, которые, как я вижу, делают веб-разработчики, и о том, как их избежать.
Следующий список не в определенном порядке.
1. Написание старой школы HTML
Ошибка : в первые дни Интернета предлагалось гораздо меньше вариантов разметки, чем у нас сегодня. Однако старые привычки сильно умирают , и многие люди пишут свой HTML, как если бы мы были еще в 20-м веке. Примеры здесь используют элементы <table> для макета, элементы <span> или <div> когда другие семантические теги будут более подходящими, или используют теги, которые не поддерживаются в текущем стандарте HTML, такие как <center> или <font> или интервалы между элементами на странице с большим количеством юридические лица.
Воздействие . Написание HTML-кода последнего десятилетия может привести к чрезмерно сложной разметке, которая будет работать непоследовательно во многих браузерах. И это не нужно в более современных современных браузерах, таких как Microsoft Edge и даже в прошлых версиях Internet Explorer (11, 10, 9).
Как избежать : Прекратите использовать элемент <table> для разметки контента и ограничьте его использование для отображения табличных данных. Ознакомьтесь с текущими доступными вариантами разметки, такими как те, которые можно увидеть на whatwg.org . Используйте HTML, чтобы описать содержание, а не то, как оно будет отображаться. Чтобы правильно отобразить ваш контент, используйте CSS .
2. «Это работает в моем браузере…»
Ошибка : разработчик может любить определенный браузер или действительно презирать его, и может в первую очередь тестировать веб-страницы с учетом этого смещения. Также возможно, что примеры кода, найденные в сети, могут быть написаны без учета того, как они будут отображаться в других браузерах. Кроме того, некоторые браузеры имеют разные значения по умолчанию для стилей.
Воздействие . Написание сайта, ориентированного на браузер, может привести к очень низкому качеству при отображении в других браузерах.
Как избежать : во время разработки было бы непрактично тестировать веб-страницы в каждом браузере и версии. Тем не менее, наличие регулярного интервала проверки того, как ваш сайт будет выглядеть в нескольких браузерах, является хорошим подходом. В настоящее время бесплатные инструменты, которые могут вам помочь, доступны независимо от предпочитаемой вами платформы: бесплатные виртуальные машины или сканеры сайтов . Такие сайты, как Browsershots или BrowserStack, показывают моментальные снимки того, как данная страница будет отображаться в нескольких браузерах / версиях / платформах. Такие инструменты, как Visual Studio, также могут вызывать несколько браузеров для отображения одной страницы, над которой вы работаете. При разработке с использованием CSS рассмотрите возможность «сброса» всех значений по умолчанию, как показано на meyerweb.com .
Если на вашем сайте используются какие-либо функции CSS, созданные специально для браузера, будьте осторожны с тем, как вы будете подходить к префиксам поставщиков, таким как -webkit- , -moz- или -ms- . Для ознакомления с отраслевыми тенденциями в этом отношении стоит потратить время на изучение следующих ссылок:
- Блог Microsoft Edge Dev: перерыв в прошлом, часть 2: прощание с ActiveX, VBScript, attachEvent…
- QuirksMode.org: префиксы вендоров CSS считаются вредными
- Брюс Лоусон: В Internet Explorer поддерживаются префиксы -webkit- vendor
Хотя приведенные выше ссылки объясняют отход от префиксов поставщиков и почему, этот сайт предоставляет практические советы о том, как работать с этим сегодня.
3. Плохая форма
Ошибка : побуждение пользователя предоставить любую информацию (особенно при вводе в текстовое поле) и допущение, что данные будут получены, как предполагалось.
Воздействие . Многие вещи могут (и, скорее всего, будут) работать неправильно, если вход пользователя является доверенным. Страницы могут не работать, если требуемые данные не предоставлены или полученные данные несовместимы с базовой схемой данных. Еще более серьезным является преднамеренное нарушение базы данных сайта, возможно, с помощью инъекционных атак (см. OWASP: Топ-10 2013-A1-инъекций).
Как избежать : Первый совет здесь — убедиться, что пользователю ясно, какой тип данных вы ищете. В наши дни, запрос адреса может привести к бизнесу, дому или даже к адресу электронной почты! В дополнение к конкретности, используйте методы проверки данных, доступные в сегодняшнем HTML, как показано в этой статье . Независимо от того, как данные проверяются на стороне браузера, убедитесь, что они всегда проверяются на стороне сервера. Никогда не позволяйте объединенному оператору T-SQL использовать данные из пользовательской записи без подтверждения того, что каждое поле соответствует типу данных, которым оно должно быть.
4. раздутые ответы
Ошибка : страница заполнена множеством высококачественных графических изображений и / или изображений, уменьшенных с использованием атрибутов высоты и ширины элемента <img> . Файлы, связанные со страницей, такие как CSS и JavaScript, имеют большой размер. Разметка исходного кода HTML также может быть излишне сложной и обширной.
Воздействие . Время полного отображения страницы становится достаточным для того, чтобы некоторые пользователи отказались или даже с нетерпением повторно запросили всю страницу. В некоторых случаях могут возникнуть ошибки, если обработка страницы занимает слишком много времени.
Как избежать : не придерживайтесь мнения, что доступ к Интернету становится все быстрее и быстрее, что позволяет использовать раздутые сценарии. Вместо этого рассматривайте все, что происходит от браузера до вашего сайта, как затраты. Изображения являются основным нарушителем в раздутии страницы. Чтобы минимизировать стоимость изображений, которые замедляют загрузку страниц, попробуйте следующие три совета:
- Спросите себя: «Все ли мои графики абсолютно необходимы?» Если нет, удалите ненужные изображения. Вы можете отсканировать свой сайт здесь для предложений, какие изображения для сжатия.
- Минимизируйте размер файла ваших изображений с помощью таких инструментов, как Shrink O’Matic или RIOT .
- Предварительная загрузка изображений. Это не улучшит стоимость первоначальной загрузки, но может заставить другие страницы на сайте, которые используют изображения, загружаться намного быстрее. Советы по этому вопросу см. В этой статье .
Еще один способ снизить стоимость — минимизировать связанные файлы CSS и JavaScript. Есть много инструментов, чтобы помочь в этом начинании, таких как Minify CSS и Minify JS ,
Прежде чем покинуть эту тему, постарайтесь быть в курсе HTML ( см. Ошибку # 1 ) и используйте здравый смысл при использовании тегов <style> или <script> в HTML.
5. Создание кода, который должен работать
Ошибка : будь то JavaScript или код, работающий на сервере, разработчик проверил и подтвердил, что он работает, тем самым заключив, что он должен работать после развертывания. Код выполняется без перехвата ошибок, потому что он работал, когда он был протестирован разработчиком.
Воздействие . Сайты, не прошедшие надлежащую проверку на наличие ошибок, могут ужасно выявить ошибки для конечных пользователей. Мало того, что пользовательский опыт может быть значительно затронут, но также и тип сообщения об ошибке мог дать подсказки хакеру относительно того, как проникнуть на сайт.
Как избежать : Ошибаться — это человек, поэтому доведите эту философию до кодирования. С JavaScript обязательно используйте хорошие методы для предотвращения ошибок, а также для их обнаружения. Хотя в этой статье рассматривается кодирование JavaScript для приложений Windows, большинство тем также относится к веб-разработке и содержит множество полезных советов! Еще один способ помочь создать надежный код, который может выдержать будущие изменения в коде, — это модульное тестирование .
Сбои в коде на стороне сервера должны быть обнаружены, чтобы пользователь не увидел никаких подробностей. Покажите только то, что необходимо, и обязательно настройте дружественные страницы ошибок для таких вещей, как HTTP 404 .
6. Написание кода Форкинг
Ошибка : С благородным представлением о поддержке всех браузеров и версий разработчик создает код, отвечающий каждому возможному сценарию. Код становится кучей операторов if , разветвляясь во всех направлениях.
Воздействие . По мере обновления новых версий браузеров управление файлами кода становится громоздким и сложным в управлении. И, как упоминалось в № 1, это становится все более ненужным .
Как избежать : Реализовать функцию обнаружения кода в сравнении с браузером / обнаружением версии. Методы обнаружения функций значительно сокращают объем кода, и их гораздо проще читать и управлять ими. Подумайте об использовании библиотеки, такой как Modernizr, которая не только помогает с обнаружением функций, но и автоматически помогает обеспечить запасную поддержку для более старых браузеров, которые не работают с HTML5 или CSS3.
7. Проектирование без ответа
Ошибка : Разработка сайта предполагает просмотр на мониторе того же размера, что и разработчик / дизайнер.
Воздействие . При просмотре сайта на мобильных устройствах или на очень больших экранах пользователь страдает тем, что не может видеть важные аспекты страницы или даже мешает переходу на другие страницы.
Как избежать : думайте ответственно. Используйте адаптивный дизайн (см. Википедию или статью A List Apart ) на своих сайтах. Вот несколько практических уроков по этой теме, включая адаптивные изображения . Очень популярная библиотека, готовая служить в этой области, является Bootstrap .
8. Создание бессмысленных страниц
Ошибка : создание общедоступных страниц с содержанием, которое может быть очень полезным, но не дает никаких подсказок для поисковых систем. Специальные возможности не реализованы.
Воздействие . Страницы не так открыты через поисковые системы, и поэтому могут посещать мало или вообще не посещаться. Содержание страницы может быть очень загадочным для пользователей с нарушениями зрения.
Как избежать : использовать SEO (поисковая оптимизация) и поддерживать доступность в HTML. Что касается SEO, обязательно добавьте теги <meta> чтобы придать смысл странице с ключевыми словами и описанием. Хорошая статья об этом находится в About Tech . Чтобы повысить удобство доступа, alt="your image description" атрибут alt="your image description" в каждом из ваших тегов <img> или <area> . Конечно, это еще не все, и дальнейшие предложения можно изучить в About Tech . Вы также можете проверить общедоступную веб-страницу в Cynthia Says, чтобы убедиться, что она соответствует требованиям раздела 508 .
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 , вы можете быстро создать сайт практически для любого сценария разработки, который может легко масштабироваться вместе с вашим бизнесом!
Резюме
Выявив распространенные ошибки, веб-разработчики могут устранить большое разочарование, которое уже пережили другие. Мало того, что важно признать, но когда мы понимаем влияние ошибки и принимаем меры, чтобы ее избежать, мы можем создать процесс развития, отвечающий нашим предпочтениям, и делать это с уверенностью!
Больше практического опыта с JavaScript
Эта статья является частью серии веб-разработок от технических евангелистов Microsoft по практическому изучению 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 (что ожидать от нового браузера, новых поддерживаемых стандартов веб-платформ и приглашенных докладчиков из сообщества JavaScript)
- Вау, я могу протестировать Edge & IE на Mac и Linux! (от Рей Банго)
- Продвижение JavaScript без взлома Интернета (от Кристиана Хайльмана)
- Механизм рендеринга краев, который заставляет веб работать просто (от Джейкоба Росси)
- Откройте 3D-рендеринг с помощью WebGL (от Дэвида Катухе, включая проекты Vorlon.JS и BabylonJS )
- Размещенные веб-приложения и инновации веб-платформ (от Кевина Хилла и Кирилла Сексенова, включая проект ManifoldJS )
Больше бесплатных кроссплатформенных инструментов и ресурсов для веб-платформы: