Погружение в некоторые странные аспекты платформы Medium

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

Я пишу свои блоги в markdown, затем размещаю их на своем личном сайте, а затем импортирую на Medium. Я стараюсь быть как можно более ленивым, поэтому я работал над способами упростить процесс; особенно импорт в Medium. Отсюда я обнаружил интересную кроличью нору: API Medium и кнопки импорта будут отображать один и тот же HTML по-разному. Если я что-то импортирую с помощью кнопки Import, он не будет отображаться так, как если бы я загружал его с помощью Medium API.

Фон

Если вы нажмете кнопку Import, Medium будет неплохо справляться с блогами, за некоторыми исключениями:

  • списки
  • блоки кода
  • блочные цитаты
  • изображений

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

Меня больше всего раздражали изображения. Цитаты и списки я использую редко. Блоки кода я использую время от времени. Однако изображениями я использую все время.

Отображение изображений

Поскольку я пишу в разметке (в частности, Jekyll), добавлять подписи к изображениям немного сложно. Когда я начинал, я использовал предложение, чтобы разместить свои изображения в таблицах. В файле это выглядит примерно так:

| ![An example of an online game](/assets/images/blogs/multithreading_image.jpeg "An online game") |
|:--:|
| *Even if you lose connection, you should still be able to fish* |

А на сайте это выглядит так:

Вы можете заметить, что это не самый популярный ответ на вопрос StackOverflow, ссылка на который приведена выше 🤷 В то время это казалось простым, но в конце концов я бы пожалел об этом. При нажатии кнопки Import в Medium эти изображения обычно вообще не отображаются. Это раздражает, так как это означает, что мне нужно повторно импортировать каждое изображение.

Посмотрите, как на Medium отображаются изображения

Если вы inspect element на изображении в сообщении Medium, вы заметите, что изображение заключено в <figure>, который является непонятным элементом HTML, с которым я не был знаком. По сути, вы можете обернуть им <img>, и есть встроенный элемент <figcaption>, который вы можете использовать для подписи. Посмотри, я уже узнал кое-что новое!

В мой блог можно добавить элемент <figure>. Мне просто нужно изменить некоторые файлы, а затем я могу написать что-то вроде этого:

<figure class="image">
  <img src="/assets/images/blogs/multithreading_image.jpeg" alt="Even if you lose connection, you should still be able to fish">
  <figcaption>Even if you lose connection, you should still be able to fish</figcaption>
</figure>

Изображение выглядит так:

Я думаю, что таблица выглядела лучше, но я, вероятно, мог бы исправить это с помощью некоторого CSS.

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

Пробуем API

Я уже немного повозился с Medium API. Итак, из любопытства я решил попробовать загрузить через API. API не является интуитивно понятным для пользователя, хорошо документированным или постоянно поддерживаемым, но он очень прост! За ним легко следить, потому что у него очень мало вариантов использования. Однако вы можете использовать его для загрузки нового сообщения в свою учетную запись (хотя это немного обидчиво). После некоторого тестирования я придумал эту мягкую мерзость на Ruby. По сути, он очищает заданный URL, а затем отправляет все в теге <article> на Medium. И вуаля, на Medium появилась подпись!

Однако это означает, что API и кнопка Import получают один и тот же HTML-код и возвращают разные результаты!

При идиосинкразии мы доверяем

Софтверные компании оказываются в странных местах. Интересно, что Medium использует сторонний сервис для своей Import кнопки. Но используют ли они сторонний сервис для своего API? Думаю, нет, но я не уверен.

Я всегда нахожу такие вещи очень интересными. У крупной прибыльной технологической компании есть две функции, которые делают почти одинаково, но реализованы по-разному! Я думаю, это просто показывает, насколько в мире царит хаос. В некотором смысле это вселяет во меня оптимизм.

PS, если вам нужно нанять инженера fullstack, которому нравятся и большие, и маленькие вещи, дайте мне трубку. Это касается и тебя, Медиум.

Первоначально опубликовано на https://elliott-king.github.io 21 октября 2020 г.