Как веб-разработчик, я большой поклонник того, чтобы на моих сайтах использовался правильный HTML. К сожалению, в наши дни на это часто не обращают внимания; Я встречал свою долю разработчиков, которые сосредоточены исключительно на реализации удобных пользовательских интерфейсов. Не поймите меня неправильно; Мне нравится красивый интерфейс, но соблюдение стандартов W3C дает ряд преимуществ, в том числе:

  • Совместимость с новыми браузерами и пользовательскими агентами
  • Более прочная основа для улучшения доступности (например, атрибут alt в элементах изображения).
  • DOM, который потенциально более эффективен для синтаксического анализа, поскольку совместимая структура, возможно, более предсказуема.
  • Восприятие профессионализма в сообществе разработчиков программного обеспечения

Я только что выпустил интерфейс командной строки, разработанный на Node.js, под названием Valimate. Он полностью настраивается и позволяет разработчикам автоматизировать проверку документов с помощью Nu HTML Checker. Помимо проверки удаленных веб-сайтов, Valimate также может тестировать локальные экземпляры HTTP-сервера Node.js. Этот подход дополняет сценарии непрерывной интеграции и регрессионного тестирования.

Начиная

Чтобы использовать Valimate, на вашем компьютере должен быть запущен Node.js v4 или более поздней версии. Установите глобальный интерфейс командной строки в свой терминал.

npm i -g valimate

После его установки создайте и войдите в каталог под названием «my-website». Гипотетически здесь будет размещаться база кода нашего проекта, но, чтобы опробовать инструмент, мы собираемся запустить Valimate на некоторых существующих веб-сайтах. Позже мы напишем простой сервер и запустим его из этого каталога, чтобы продемонстрировать возможности тестирования локальных приложений Valimate.

Оказавшись в каталоге, создайте файл с именем valimate.json. Он считывается CLI, чтобы определить, какие URL-адреса тестировать, и содержит некоторые другие параметры конфигурации. Вставьте в файл следующий JSON и сохраните его:

{
    "urls": [ 
        "http://jamesswright.co.uk/",
        "https://github.com"
    ]
}

Это скажет Valimate получить разметку для каждого из этих URL-адресов и отправить их валидатору. Запустите Valimate в терминале:

valimate

Вы должны увидеть результаты, как показано на скриншоте ниже:

Интересно, что при проверке GitHub (не имея в виду никого здесь таргетировать, это просто пример, который пришел в голову!), Мы видим, что есть 16 ошибок достоверности, выделенных светло-красным цветом. У нас также есть информация о процессе синтаксического анализа, выделенная голубым цветом. Valimate также отображает предупреждения желтым цветом.

Мы можем легко проверить разметку, обслуживаемую удаленными веб-сайтами, но как насчет проверки локальных?

Проверка локальных HTTP-серверов Node.js

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

«Но подождите!» - восклицаете вы. «Как Valimate может узнать, что мое приложение завершило инициализацию и готово к использованию HTML, прежде чем проверять мою разметку ?! Мое приложение выполняет некоторые асинхронные операции перед прослушиванием соединений! »

Я опубликовал бесплатный модуль Node под названием Valimate Notifier, который позволяет вам уведомлять Valimate, когда ваш сервер приложений запущен и работает. Давайте напишем очень простой HTTP-сервер и настроим Valimate для запуска и проверки его разметки.

Прежде всего, в каталоге my-website мы должны создать файл package.json, в котором мы можем хранить наши зависимости. У npm есть команда для этого:

npm init

Вы можете ответить утвердительно на все варианты. После создания файла установите Valimate Notifier:

npm i --save valimate-notifier

Затем сохраните приведенный ниже код JavaScript в файл с именем app.js.

'use strict';
const http = require('http');
const notifyValimate = require('valimate-notifier');
const PORT = 8081;
const HTML = `
    <!DOCTYPE html>
    <html>
        <head>
            <title>My Website</title>
        </head> 
        <body>
            <section role="main">
                <h1>Valimate Test Server</h1>
                <li>This is some invalid, dummy HTML</li>
            </section>
        </body>
    </html>
`;
http.createServer((req, res) => res.end(HTML, 'utf-8'))
    .listen(PORT, () => notifyValimate(true));

К вашему сведению: если ваш сервер приложений не запущен Valimate, notifyValimate по-прежнему может быть вызван, но ничего не делает; не беспокойтесь о том, что будет в производстве!

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

{
    "localAppServer": {
        "entryPoint": "app.js"
    },
    "urls": [
        "http://localhost:8081"
    ]
}

Таким образом Valimate запускает app.js как дочерний процесс, а затем проверяет его разметку после запуска. Давайте снова запустим Valimate:

Вы должны получить следующий результат:

Как видите, Valimate ожидает, пока наш сервер приложений отправит уведомление о готовности, прежде чем проверять нашу разметку. Однако вы заметите ошибку достоверности; элемент списка не является допустимым дочерним элементом элемента раздела! Давайте вместо этого сделаем это абзацем:

<section role="main">
    <h1>Valimate Test Server</h1>
    
    <p>This is some valid, dummy HTML</p>
</section>

Запустив интерфейс командной строки после внесения этого изменения, вы увидите, что наше приложение теперь поддерживает действительный HTML!

Последние мысли

Большое спасибо за чтение этой статьи и за то, что вы попробовали Valimate. Проект основан на аналогичном решении, которое я реализовал для своего проекта на работе, поэтому я надеюсь, что другие разработчики сочтут его полезным.

Считаю ли я, что неверный HTML - это грех? Более менее; если на веб-сайте есть несколько ошибок, их исправление может не быть такой важной задачей. Меня беспокоят веб-сайты, на которых много ошибок, особенно тех, которые подрывают доступность.

Valimate - молодой проект, поэтому, пожалуйста, дайте мне знать, если у вас возникнут проблемы. Кроме того, я более чем счастлив принимать запросы на включение на GitHub!