Почему создание этого крошечного предварительного просмотра ссылки в Википедии заняло много времени

Вчера моя команда завершила запуск «предварительного просмотра страниц» - функция, которая теперь развернута в сотнях языковых выпусков Википедии. Мы видим до полумиллиона обращений к нашей API каждую минуту, чтобы обслуживать те карты, которые отображаются, когда вы наводите указатель мыши на любую ссылку.

Карты предварительного просмотра теперь отображаются, когда вы наводите курсор мыши на ссылку, ооооооооо (и да, я использую мобильный скин Википедии для просмотра на рабочем столе). Текст из статей Википедии о айсбергах и воде, CC BY-SA 3.0. Изображения слева направо, сверху вниз: # 1 Ким Хансен, CC BY-SA 3.0; № 2 Андреаса Вейта, CC BY-SA 4.0; # 3 через Национальную библиотеку Новой Зеландии, CC0.

На первый взгляд это выглядит довольно просто. Это то, что уже есть на многих сайтах. Он имеет изображение и текст и показывает, когда вы наводите курсор мыши на ссылку. Вряд ли новаторские вещи ... или так может показаться.

Первоначальная идея была задумана четыре года назад и основана на идее волонтера / редактора за много лет до этого.

Таким образом, нам потребовалось несколько лет, чтобы донести это до всех. Это может показаться странным, но как айсберг, когда вы начинаете смотреть под ним, все это имеет смысл.

Пришлось выбирать миниатюру

У нас есть несколько миллионов страниц, все они хранятся в виде сырого вики-текста. Мы не могли ожидать, что каждая статья будет отредактирована для обозначения миниатюры.

Еще в 2012 году Макс Семеник, инженер-программист в нашей команде Tech Tech, создал расширение, которое алгоритмически создавало бы наиболее подходящее изображение для статьи.

Как и во всех алгоритмах, он не был идеальным, и, поскольку он не был разработан для использования при предварительном просмотре страниц, он также требовал настройки.

Нам пришлось вносить обновления, чтобы ограничить изображение первым разделом статьи. Работать с алгоритмами сложно, но для этого необходимо.

Мы должны были сгенерировать резюме

У нас есть несколько миллионов страниц, все они хранятся в виде сырого вики-текста. Как подытожить это, не прося наших редакторов входить и кропотливо делать это для каждой статьи?

Занятый Макс Семеник, который помогал нам с миниатюрами, также написал расширение для генерации выдержек из статей. Первоначально он был написан в основном для простого текста. Наши первоначальные версии предварительного просмотра страниц использовали это, но мы поняли, что это не совсем подходит для того, что мы пытались сделать.

Поэтому мы перестали использовать это.

Мы поняли, что HTML очень важен. Например, в статьях по химии были представлены химические формулы, которым нужен индекс, который требует HTML.

Подумайте, как HTML необходим для создания сводок для контента, где важен нижний индекс, такой как химическая формула воды, показанная здесь. Текст из английской статьи Википедии о воде, CC BY-SA 3.0; изображение Ким Хансен, CC BY-SA 3.0.

Многие из наших статей начинаются с информации о местоположении и произношении. Большая часть этого контента не была включена в наши резюме, а для другого контента было менее понятно, что принадлежало. Резюме содержали большой вклад в дизайн, и мы определили, какой контент не должен отображаться внутри предварительного просмотра. Мы написали спецификацию, фиксирующую требуемое поведение.

Информация о местоположении в начале многих статей оказалась проблематичной для обобщения статей в Википедии…... как и информация о произношении. Текст через английскую статью в Википедии об озере Инле, CC BY-SA 3.0.

В итоге мы решили использовать API, изначально созданный для наших собственных приложений для Android и iOS. Мы создали новый API специально для этой цели.

Теперь мы генерируем резюме из всей статьи HTML. Мы разбираем его так же, как браузер, и по спецификации определяем первый «непустой» начальный абзац каждой статьи

Одной из больших проблем здесь было решение убрать контент в скобках. Поскольку мы поддерживаем более 300 языков, их нужно было локализовать (не все используют один и тот же набор символов!).

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

Иногда содержание в скобках важно, как показывает этот пример. Определить, когда они важны, сложно. Текст из английской статьи Википедии о периодической таблице, CC BY-SA 3.0; изображение от Offnfopt, общественное достояние.

Удаление скобочных элементов из сгенерированного пользователем HTML также оказалось довольно сложным. В то время как для этого в простом тексте требуется простое регулярное выражение, все становится сложнее, если вы рассматриваете вложенный HTML.

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

Благодарим нашу команду по инфраструктуре за помощь в создании этого API.

Мы работаем с нашим сообществом

Наше сообщество редакторов очень заботится о нашем продукте. Вот почему они пишут статьи для вас в свободное время без каких-либо денежных выгод.

Мы включаем их в каждую часть процесса, неустанно работая с ними, чтобы исправить каждый крайний случай (будь то искаженные резюме или неуместные изображения) и чтобы убедить их в том, что мы знаем, что делаем, влияние того, что мы делаем и почему мы продолжаем это делать.

Наша первоначальная версия была недостаточно хороша. Наше сообщество попросило нас не продолжать это. Мы ответили, слушая их и делая это лучше.

Спасибо сообществу и представителям нашего сообщества, которые помогли облегчить эти разговоры!

Дизайн дизайн дизайн

Мы многое сделали. Наш дизайнер, Нирзар, написал отличную статью, поэтому я больше не буду рассказывать здесь, но дизайн был на каждом этапе процесса, будь то первоначальные прототипы (спасибо Prateek Saxena!); обсудить эффективность функции с нашей командой производительности; совершенствование эскизов и резюме; или разговаривать с нашим сообществом.

Спасибо команде разработчиков!

Мы должны были инструмент это

Это было большое изменение в том, как люди взаимодействуют с нашим контентом. Мы очень заботимся о конфиденциальности в Викимедиа. Мы, вероятно, являемся одним из немногих (только ?!) крупных веб-сайтов, которые не устанавливают сторонние скрипты для отслеживания вас.

Наша политика конфиденциальности запрещает нам предоставлять данные о вас.

Мы не используем поставщиков для A / B-тестирования или анализа поведения нашего пользователя.

Тем не менее, несмотря на все это, мы не срезаем углы.

Мы не хотим делать глупые рискованные изменения.

Каждый раз, когда мы строим что-то важное, мы должны создавать инфраструктуру, чтобы оценить это. Мы строим гипотезы и тесты, чтобы проверить эти гипотезы. Мы строим это. Мы проверяем это. Мы слушаем данные. Мы адаптируемся. Мы проверяем снова.

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

Наш последний А / Б тест Тилмана Байера дал нам много ответов. Это отличное чтение!

Учитывая результаты этого A / B-теста, мы также решили начать измерять «просмотры предварительного просмотра страницы» как дополнительную метрику для просмотров страницы. Эта метрика запускает 1000 событий в секунду, и наша аналитическая команда отлично справляется с такими масштабами.

Спасибо аналитикам, спасибо аналитической команде!

Нам пришлось масштабировать наш API, чтобы поддержать вас

Мы видим 0,5 миллиона обращений к нашему API в минуту.

Мы видим 0,5 миллиона обращений к нашему API в минуту.

Я говорю это дважды, потому что это большой объем трафика.

Наши традиционные API были изначально созданы для ботов, чтобы помочь очистить ваши правки. Они не были предназначены для читателей.

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

Спасибо сервисной команде !!

Спасибо Спасибо спасибо

Доставка что-то всегда чувствует себя хорошо. Я надеюсь, что «простой» предварительный просмотр моей команды с помощью многих команд из Фонда Викимедиа обогатил ваш опыт.

Многие из нас, очевидно, были вовлечены, и мы гордимся тем, что мы выпустили.

Мы не закончили. Программное обеспечение никогда не делается.

У нас есть код для очистки и новые идеи о том, как вырастить эту маленькую маленькую функцию.

Некоторые могут сказать, что мы видим только верхушку айсберга.

Фонд Викимедиа является некоммерческим и полагается на пожертвования таких людей, как вы, чтобы поддерживать и поддерживать работу сайта таким образом, чтобы он соответствовал нашим ценностям. Чтобы помочь нам продолжать создавать подобные функции, рассмотрите возможность пожертвования нам.

Джон Робсон, старший инженер-программист, настольная и мобильная сеть
Фонд Викимедиа

Вы также можете прочитать этот пост в нашем блоге WordPress. Обе записи были отредактированы, чтобы исправить опечатку - наш API получает полмиллиона обращений в минуту, а не пять тысяч.

Хотите узнать больше? Смотрите наше оригинальное объявление.