Всі розробники схильні до помилок. І хоча деякі помилки, пов’язані з конкретними підходами, існують проблеми, загальні для всіх веб-розробників.

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

1. Написання коду HTML «по старинці»

Помилка: у минулі часи Інтернету існувало набагато менше можливостей для розмітки, ніж є у нас зараз. Однак від старих звичок важко позбутися, і багато пишуть код HTML, ніби ми все ще живемо в 20 столітті. Прикладом може служити використання для розмітки елементів

застосування елементів або
там, де інші семантичні теги були б більш доречні; використання тегів, які не підтримуються сучасним стандартом HTML, таких як і , або розміщення елементів на сторінці з допомогою великої кількості .

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

Як уникнути: не застосовуйте для розмітки елемент

і обмежте його використання для відображення табличних даних. Познайомтеся з доступними на сьогоднішній день можливостями розмітки, наприклад, на сайті whatwg.org. Використовуйте HTML лише для опису вмісту. Для подання вашого контенту застосовуйте CSS.

2. «Це працює в моєму браузері…»

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

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

Як уникнути: нераціонально тестувати веб-сторінки в процесі розробки в кожному браузері і для кожної версії. Але перевірка того, як ваш сайт буде відображатися в різних браузерах, є правильним підходом. Сьогодні доступні безкоштовні інструменти, які можуть допомогти вам в цьому, незалежно від бажаної платформи: безкоштовні віртуальні машини та сканери сайтів.

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

Якщо ваш сайт використовує які-небудь функції CSS, створені спеціально для браузера, будьте уважні, коли дійдете до вендорних префіксів, таких як -webkit-, -moz- або -ms-.

3. Невдала форма

Помилка: підказки для користувача при введенні інформації (особливо у текстове поле) і припущення, що дані будуть отримані, як передбачається.

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

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

4. Надмірно великі відповіді

Помилка: сторінка заповнена великою кількістю графіки чи зображень високої якості, розмір яких зменшено з допомогою атрибутів довжини і ширини елемента . Файли, на які посилається сторінка, наприклад, CSS і JavaScript, досить великі. Вихідний код розмітки HTML також може бути невиправдано складним і об’ємним.

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

Як уникнути: зображення – один з основних винуватців «роздуття» сторінок. Щоб звести до мінімуму час завантаження сторінки, скористайтеся цими порадами:

  • Запитайте себе: «чи Дійсно вся моя графіка абсолютно необхідна?». Якщо ні, видаліть непотрібні зображення. Ви можете просканувати свій сайт для визначення того, які саме зображення можна стиснути;
  • Мінімізуйте розмір ваших зображень з допомогою таких інструментів, як Shrink O Matic або RIOT;
  • Попереднє завантаження зображень. Це не зменшить витрати на початкову завантаження, але допоможе зробити завантаження інших сторінок сайту, які використовують ці ж зображення, що набагато швидше.
  • Також мінімізуйте кількість і обсяги пов’язаних файлів CSS і JavaScript. Є безліч інструментів, які допоможуть вам в цьому починанні, наприклад, Minify CSS і Minify JS.

    5. Створення коду, який «повинен спрацювати»

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

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

    Як уникнути: при використанні JavaScript використовувати надійні методи для запобігання помилок, а також для їх відловлювання. Ще один підхід, що допомагає створювати надійний код, це модульне тестування.

    Збої в роботі коду на стороні сервера повинні бути перехоплені так, щоб користувач не бачив подробиць. Показуйте тільки те, що необхідно, і не забудьте передбачити дружні сторінки помилок для таких випадків, як помилка 404.

    6. Написання коду розгалуженого

    Помилка: розробник створює код, який відповідав би будь-якого можливого сценарію. Код перетворюється в купу з if виразів, «розгалужуються» за всіма напрямками.

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

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

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

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

    Помилка: розробка сайту передбачає перегляд на моніторі того ж розміру, що у розробника або дизайнера.

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

    Як уникнути: використовуйте адаптивний дизайн (дивіться статтю на Вікіпедії) для своїх сайтів. Популярною бібліотекою в цій області є Bootstrap.

    8. Створення непотрібних сторінок

    Помилка: створення загальнодоступних сторінок з корисним контентом, який не видно для пошукових систем. Спеціальні можливості не реалізовані.

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

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

    Щоб надати більше спеціальних можливостей, використовуйте в кожному з ваших тегів 10 найпоширеніших помилок веб-розробників або атрибут alt=»Опис зображення».

    9. Створення сайтів з дуже частим оновленням сторінок

    Помилка: створення сайту, який вимагає повного оновлення сторінки при кожному взаємодію з користувачем.

    Вплив: збільшується час завантаження сторінки. При цьому кожна дія користувача на сайті може викликати короткочасну (або тривалу) перезавантаження сторінки.

    Як уникнути: швидкий спосіб не допустити подібного – це визначити, чи є запит до сервера дійсно необхідним. Наприклад, на стороні клієнта може бути використаний скрипт для отримання даних, коли немає залежності від серверних ресурсів.

    Ви можете також скористатися техніками AJAX (стаття в Вікіпедії) або піти ще далі і застосувати SPA (стаття в Вікіпедії). Для цього можна використовувати JQuery, KnockoutJS і AngularJS.

    10. Надмірна робота

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

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

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

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

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

    Висновок

    Визначивши типові помилки, веб-розробники можуть уникнути багатьох невдач, яких зазнали інші. Якщо ми розуміємо ступінь важливості помилки та вживаємо заходів для її запобігання, ми зможемо створити процес розробки, який буде задовольняти всім нашим запитам!

    Переклад статті «10 Common Web Developer Mistakes» був підготовлений дружною командою проекту Сайтостроение від А до Я.