Дружим с контентом пользователя

План

1. WYSIWYG-редакторы.
2. Легковесные языки разметки.
3. Транформация контента.

WYSIWYG-редакторы

Редактор за 5 минут

<div contentEditable="true">
    Привет, мир!
</div>

Оформление меняется через document.execCommand()

Применяйте к редактору стили контента

Всем больно

Боль разработчика

• вместо <p> получаем <br><br>;
• вместо <h3> — <p><strong><span style="font-size: 20px">;
• пользователи игнорируют типографские знаки (тире, кавычки и т.п.);
• нельзя использовать классы и обёртки;
• нельзя вставить отзывчивые картинки.

Легковесные языки разметки

Легковесные языки разметки

Программисты придумали обычный текст конвертировать в HTML.

• Markdown;
• BBCode;
• Wiki markup;
• и многие другие.

Викторина

Кто пользуется Markdown?

Кто знает как вставить картинку?

![alt text](image.jpg)

С какого раза ваши пользователи это запомнят?

Трансформация контента

Трансформация контента

Трансформация контента

• разбираем строку на дерево элементов с помощью парсера HTML;
• применяем правила трансформации к дереву элементов;
• сериализуем дерево обратно в строку.

Что можно делать?

Что можно делать?

• добавлять классы;

        <h1>
          Red Hot Chili Peppers — «The Getaway»
        </h1>
        <p>
          Для того, чтобы грациозно стареть, нужна немалая
          <strong>
            физическая подготовка
          </strong>
          и железная воля.</p>
    

        <h1 class="markup-h1">
          Red Hot Chili Peppers — «The Getaway»
        </h1>
        <p class="markup-p">
          Для того, чтобы грациозно стареть, нужна немалая
          <strong class="markup-strong">
            физическая подготовка
          </strong>
          и железная воля.</p>
    

        <h1 class="review__markup-h1 markup-h1">
          Red Hot Chili Peppers — «The Getaway»
        </h1>
        <p class="review__markup-p markup-p">
          Для того, чтобы грациозно стареть, нужна немалая
          <strong class="review__markup-strong markup-strong">
            физическая подготовка
          </strong>
          и железная воля.</p>
    

Что можно делать?

• добавлять классы;
• удалять атрибут style и другие нежелательные атрибуты;
• делать обёртки для сохранения пропорций объектов;

        <iframe width="560" height="315"
          src="https://www.youtube.com/embed/o_1aF54DO60"
          frameborder="0" allowfullscreen></iframe>
    

        <div class="box">
          <iframe class="box__child" src="…"></iframe>
        </div>
    

        /* aspect ratio = 16:9 */
        .box { pos: rel; pad-b: 56.25%; }
        .box__child { pos: abs; w: 100%; h: 100%; }
    

Что можно делать?

• добавлять классы;
• удалять атрибут style и другие нежелательные атрибуты;
• делать обёртки для сохранения пропорций объектов;
• расставлять типографские знаки;
• отзывчивые картинки;

Отзывчивые картинки

        <img alt="Обложка альбома «The Getaway»"
          src="photo.jpg">
    

Отзывчивые картинки

        <img alt="Обложка альбома «The Getaway»"
          src="photo.jpg?w=300&h=300"
          srcset="photo.jpg?w=300&h=300 1x,
                  photo.jpg?w=600&h=600 2x">
    

Что можно делать?

• добавлять классы;
• удалять атрибут style и другие нежелательные атрибуты;
• делать обёртки для сохранения пропорций объектов;
• расставлять типографские знаки;
• отзывчивые картинки;
• заменять <br><br> на <p>;

Параграфы

        Для того, чтобы грациозно стареть, нужна немалая
        физическая подготовка и железная воля.<br>
        <br>
        Теперь в составе по большей части 50-летние мужчины,
        которые пережили увлечение панком, фанком и блюз-роком,
        и теперь записывают красивую и сложно устроенную музыку.
    

Параграфы

        <p>Для того, чтобы грациозно стареть, нужна немалая
          физическая подготовка и железная воля.
        </p>
        <p>Теперь в составе по большей части 50-летние мужчины,
          которые пережили увлечение панком, фанком и блюз-роком,
          и теперь записывают красивую и сложно устроенную  музыку.
        </p>
    

Что можно делать?

• добавлять классы;
• удалять атрибут style и другие нежелательные атрибуты;
• делать обёртки для сохранения пропорций объектов;
• расставлять типографские знаки;
• отзывчивые картинки;
• заменять <br><br> на <p>;
• удалять пустые элементы и пробелы.

Пустые элементы и пробелы

        Жанр: Rock, Funk
        <div></div>
        <div>&nbsp;<div>
        Год: 2016
    

Пустые элементы и пробелы

        Жанр: Rock, Funk
        <br>
        <br><br>
        Год: 2016
    

Другие очень сложные вещи

Подписи к иллюстрациям

        <p>
          <img alt="Обложка альбома «The Getaway»" src="photo.jpg">
        </p>
        <p><em>Red Hot Chili Peppers записали альбом
          под названием «The Getaway»</em></p>
    

Подписи к иллюстрациям

        <figure>
          <img alt="Обложка альбома «The Getaway»" src="photo.jpg">
          <figcaption>Red Hot Chili Peppers записали альбом
            под названием «The Getaway»</figcaption>
        </figure>
    

Три в ряд

Комбинация трансформаций

        <figure class="markup-figure">
          <img src="photo.jpg?w=300&h=300"
            srcset="photo.jpg?w=300&h=300 1x,
                    photo.jpg?w=600&h=600 2x"
            class="markup-img"
            alt="Обложка альбома «The Getaway»">
          <figcaption class="markup-figcaption">…</figcaption>
        </figure>
    

Одно простое действие за раз

PostHTML

github.com/posthtml/posthtml

• работает на Node.js;
• можно запускать из CLI;
• легко интегрируется в webpack, Gulp и Grunt;
• можно использовать внутри веб-серверов Express, Koa, Hapi;
• для него уже написаны десятки плагинов.

Напишите своё

Задача для бэкендера

Очень много тестовых сценариев

Кэширование!

Заключение

1. Клиент счастлив.
2. Страница выглядит опрятно.
3. Повторно применяем трансформации в других проектах.

Владимир Кузнецов

@mistakster (English)
@mista_k (больше про жизнь)

noteskeeper.ru

Слайды презентации: mistakster.github.io/pal-up-with-ugc