10 найпоширеніших помилок, які роблять веб-розробники

31

Від автора: існує безліч способів вирішити одну і ту ж задачу – розробити сайт, який буде відмінно працювати в сьогоднішньому сучасному інтернеті. Розробники стоять перед вибором веб-хостингу, на чому писати HTML, CSS і JavaScript, який дизайн використовувати, а також які JavaScript бібліотеки/фреймворки підключити. Після того, як ви звузили коло використовуваного інструментарію, в мережі можна знайти купу статей, форумів і шаблонів, які допоможуть поліпшити ваш сайт. І в незалежності від того, який шлях був обраний, всі розробники помиляються. Деякі проблеми досить специфічні, а інші мають загальний характер для всіх веб-розробників. Отже, з допомогою досліджень, отриманого досвіду й останніх спостережень я хочу поділитися своїм списком десяти загальних помилок, які допускають веб-розробники – та як їх уникати.

1. Використання застарілого HTML

Помилка: Раніше в інтернеті було набагато менше рішень по розмітці, ніж зараз. Тим не менш, до цих пір олдфаги зі своїми старими звичками і багато інші все ще пишуть на HTML 20-го століття. Приклад – використання table для розмітки макета, використання span чи div там, де підійдуть більш семантичні елементи, або теги, які взагалі виключені з стандарту типу center або font. Поширена помилка застосування для додавання множинних відступів.

Наслідки: HTML 10-річної давності може сильно ускладнити розмітку, і вона буде вести себе суперечливо в різних браузерах. Це стосується і останньої версії браузера від Microsoft Edge і навіть останніх версій IE (11, 10, 9).

Як уникати: Припиніть використовувати table для розмітки вмісту таблиць. Познайомтеся, нарешті, з передовими тегами, як на whatwg.org. Використовуйте HTML для опису вмісту, а не для того, як це буде відображатися. Для відображення контенту використовуйте CSS ( http://www.w3.org/Style/CSS/).

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

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

Як уникати: Тестувати сайт у всіх браузерах і версіях під час розробки не дуже практично. Але можна встановити часові проміжки для перевірки сайту у всіх браузерах. Зараз існує безліч безкоштовних сервісів для перевірки: безкоштовний VMs, сканери сайтів. Сайти типу http://browsershots.org/ або https://www.browserstack.com показують скріншот того, як визначена сторінка отрісовиваємих в різних браузерах/версіях/платформах. Інструменти як Visual Studio можуть емулювати роботу деяких браузерів при відображенні сторінок. При проектуванні в CSS потрібно скинути всі стилі, як на meyerweb.com.

Якщо ви використовуєте певні властивості CSS не підтримуються в окремих браузерах, не забудьте про вендорные префікси -webkit-, -moz-, або -ms-. В якості рекомендацій можна вивчити пару посилань, думаю воно того варте:

Блозі розробників Microsoft Edge: Спалюємо мости, частина 2: Скажи прощай ActiveX, VBScript, attachEvent

QuirksMode.org: Вендорные префікси CSS вважаються шкідливими

Bruce Lawson: Про підтримку IE вендорного префікса –webkit-

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

3. Неправильні форми

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

Наслідки: Все може піти (і, швидше за все, піде) шкереберть, якщо через чур довіряти користувачеві. Сторінки можуть впасти, якщо передати невірний тип даних або передати порожнє поле. Ще більш серйозною проблемою є умисний злом баз даних, можливо, через ін’єкції (см OWASP: Топ 10 2013-А1-ін’єкцій).

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

4. Занадто довге очікування відповіді від сервера

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

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

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

Запитайте себе «Мені дійсно потрібні всі зображення?». Якщо ні, видаліть непотрібні. Можна просканувати сайт, щоб дізнатися, які саме зображення можна стиснути.

Мінімізуйте розмір зображень за допомогою інструментів Shrink O Matic або RIOT.

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

Перед тим, як продовжити, хочу порадити вам, стежити за новинками в HTML (див помилку №1) і не забувайте про здоровий глузд при використанні тегів style або script у верстці.

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

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

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

Як уникати: Людині властиво помилятися, це потрібно пам’ятати і в програмуванні. Намагайтеся за допомогою JavaScript відловлювати помилки. Хоч у статті розглядається JavaScript для додатків Windows, більшість тем також відносяться і до веб-розробки, і тут багато корисних порад! Ще один із способів створити надійний код, який можна буде легко модифікувати в майбутньому, це модульне тестування.

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

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

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

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

Як уникати: Використовуйте функцію виявлення (техніка Feature detection) в коді, а не виявлення браузера/версії. Ця техніка не тільки допоможе радикально скоротити ваш код, його стане набагато легше читати і обслуговувати. Бібліотека Modernizr не тільки допомагає з функцією виявлення, але також автоматично робить фоллбэк старих версій браузерів, які не підтримують HTML5 або CSS3.

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

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

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

Як уникати: Мислите адаптивно. Застосовуйте адаптивний дизайн для вашого сайту. Дуже популярна бібліотека, коли справа стосується адаптивного дизайну Bootstrap.

8. Створення безглуздих сторінок

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

Наслідки: Сторінки не видно пошуковикам, а значить, мають дуже низьку відвідуваність. Текст на сторінці може бути дуже дрібним для людей з ослабленим зором.

Як уникати: Використовуйте SEO (search engine optimizations) і всілякі інструменти в HTML для підвищення доступності сторінки. Не забудьте додати ключові слова і опис. Все це відмінно пояснено на About Tech. Для ще більшої доступності використовуйте атрибут alt=»опис зображення» для кожного тега img або area. Звичайно, це не все, і ще багато можна прочитати на About Tech. Також сумісність веб-сторінок з Section 508 можна перевірити на сайті Cynthia Says.

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 можна швидко створювати віртуальні сайти будь-яким способом, що полегшить ваш бізнес!

Узагальнення

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