Как я создал таблицу лидеров с лучшими историями Medium всех времен. И как оно чуть не погибло.

1656641656 kak ya sozdal tabliczu liderov s luchshimi istoriyami medium vseh

В прошлом году я создал Top Medium Stories – веб-сайт, демонстрирующий лучшие истории Medium всех времен. Это рассказ о том, как одинокий разработчик перебрал тысячи историй и наткнулся на, казалось бы, роковые блокпосты.

Спойлер: жизнь обретает путь. Вы можете просмотреть ежедневно обновляемую таблицу лидеров на сайте TopMediumStories.com.

Почему я сделал это?

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

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

Кульминацией моей цели стала публикация моего списка лучших средних историй по годам.

Я собирал истории вручную, что было изнурительной задачей. В течение недели я посетил все страницы с главными новостями, начиная с 10 сентября 2014 года (когда дебютировала функция главных новостей). Чтобы найти еще более ранние истории, я рылся в архивах публикаций с помощью Wayback Machine, чтобы получить древние копии страниц Medium.

Я создал большую электронную таблицу каждой найденной истории. Это была масса потрясающей работы, но я гордился результатом.

1*Ctml_IoHbj0xWy78KyJhuw
Маленький раздел колоссальной электронной таблицы?

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

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

Автоматизация сбора данных

Чтобы автоматизировать ручные действия, описанные выше, я написал веб-скребок с помощью Python Scrapy.

Начиная с 10 сентября 2014 года, скребок сканирует каждую страницу самых популярных новостей и опрокидывает любую историю, которую видит в словарь Python. Затем словарь сортируется по количеству ударов, полученных каждой историей, и записывается в файл JSON. (Аплодисменты в Medium являются эквивалентом «нравится» или «голосу за», и читатели могут поставить историю до 50 ребят.)

Вот фрагмент файла JSON:

[  “We fired our top talent. Best decision we ever made.”,   {    “recommends”: 79000.0,     “pub_url”: “     “author”: “Jonathan Sol\u00f3rzano-Hamilton”,     “image”: “     “year”: “2017”,     “story_url”: “     “pub”: “freeCodeCamp”,     “author_url”: “  }],...

Перед созданием скребка я проверил файл robots.txt Medium, чтобы убедиться, что я не нарушаю никаких правил. Я также установил очень медленную скорость сканирования (2 секунды между каждым запросом), чтобы скребок не забивал серверы Medium.

Преобразование данных в HTML

Следующим шагом было преобразование файла JSON в HTML для отображения историй на веб-странице.

Для этого я установил BeautifulSoup. Сначала я создал шаблон HTML с пустыми таблицами и строчками. Затем я написал сценарий, который использует BeautifulSoup для заполнения шаблона из JSON файла.

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

1*3XTqVVycq5riBcjR3h5ZgA

Создание великолепного веб-сайта

Планируя сайт, я ставил перед собой три цели:

1. Минимальный и элегантный дизайн

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

Я также добавил «компактный» режим просмотра, который скрывает основные изображения с веб-сайта. Это позволяет читателям легко просматривать список.

1*EqIyKAmHT-FrzN4qm7b9mQ
«компактный» режим

2. Быстро

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

Чтобы решить эту проблему, я использовал «ленивую загрузку». При попадании на веб-сайт загружаются только первые 50 историй в разделе «Все». Если вы хотите увидеть больше историй, нужно нажать «Загрузить больше». Этот шаблон дизайна значительно сокращает первоначальное время загрузки.

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

1*nU4Novi6IXdTY7CqBZPzgA
Чуткая навигация и отложенная загрузка в действии

3. Легкий

Чтобы сделать сайт легким, я решил отказаться от большинства популярных интерфейсных библиотек. Я не использовал Bootstrap и свел использование JavaScript/jQuery к минимуму.

Взглянув на хранилище проекта, можно увидеть очень минимальную настройку. Несколько файлов HTML, файл CSS, несколько сценариев и несколько файлов данных.

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

Тестирование и запуск

Я поделился прототипом с парой друзей и попросил разорвать его на части. Используя их отзывы, дважды повторил дизайн. Затем я запустил Product Hunt.

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

На следующее утро я поднялся с кровати и открыл компьютер. Я не мог поверить своим глазам! Top Medium Stories были в верхней части домашней страницы Product Hunt. В конце дня он был признан продуктом №2 дня.

1*4XuWJfp8NxmYqJjul8qVRg
Страница Product Hunt для Top Medium Stories

Внезапная смерть Medium Top Stories

Запуск Product Hunt превзошел мои самые смелые ожидания, и я долго находился в облаке девять. Но я знал, что не кончил, пока не поделился своим проектом на Medium. Я начал эту публикацию полгода назад и, наконец, закончил ее несколько недель назад. Я был очень взволнован, чтобы опубликовать это.

Перед отправкой я решил еще раз запустить сценарий сбора данных, чтобы обновить веб-сайт.

Сценарий катастрофически провалился.

«Ничего страшного. Либо у Medium сбой, либо мой интернет не работает», — подумал я. Но я очень ошибся. Когда я понял, что действительно произошло, я упал на стул и разочарованно провел пальцами по лицу.

Я не шучу, за два дня до того Medium удалил страницу главных новостей со своего веб-сайта. Они затопили ту же страницу, от которой зависело функционирование моего скребка!

Я немедленно направил электронное письмо Medium, попросив их рассмотреть возможность возвращения страницы главных новостей. Я не получил ответа, который искал.

1*h6hNC0_A-gXqzce1xzDliA

Но я не винил их. Мой сайт официально не поддерживался – они не были обязаны ничего делать. Даже если бы они не произвели это конкретное изменение, в конце концов одно из их обновлений сломало бы мой веб-сайт. Это было неизбежно.

Я чувствовал себя безнадежным. Поскольку веб-сайт больше нельзя было обновлять, это был не более чем статический список, который вскоре должен был устареть. По моему мнению, Top Medium Stories был мертв по прибытии.

Ростки новой жизни

Некоторое время работал над другими вещами и вообще не смотрел на Top Medium Stories. Но я не мог не думать о незавершенной истории сайта. Я хотел опубликовать посмертную запись — даже если она не имела счастливого конца. Казалось бы, это был хороший способ закрыть проект.

Я закрыл статью словами:

«Итак, я надеюсь, вам понравилось читать о Top Medium Stories. Это был удивительный опыт, и я горжусь тем, что сделал, мне жаль, что все так закончилось. Всегда будут вещи, которые вы не сможете предусмотреть или контролировать, и они могут мгновенно уничтожить вашу работу. Это жизнь.»

Глядя на свой готовый проект, я кое-что понял. Ненавижу грустные конечности.

Вдруг мой взгляд остановился на той же капле JSON, о которой я упоминал раньше.

[  “We fired our top talent. Best decision we ever made.”,   {    “recommends”: 79000.0,     “pub_url”: “     “author”: “Jonathan Sol\u00f3rzano-Hamilton”,     “image”: “     “year”: “2017”,     “story_url”: “     “pub”: “freeCodeCamp”,     “author_url”: “  }],...

И у меня было открытие. Мне не нужна была страница главных новостей для обновления веб-сайта. Вместо этого я мог бы посетить каждый URL в файле JSON и получить данные непосредственно с веб-страницы истории.

Чтобы получить новые истории, я мог бы получить новую страницу «Популярное на среднем», которая бы давала мне самые популярные истории, опубликованные недавно.

Переработав свой код, я кое-что понял: вполне возможно, что не каждая отдельная популярная новая история в конечном итоге будет представлена ​​на странице Popular on Medium. Итак, если вы случайно прочитали историю, которая, по вашему мнению, должна быть на Top Medium Stories, но не такова, пожалуйста, дайте мне знать. Просто отправьте URL истории на адрес michaeldeng18@gmail.com, и я сразу добавлю его. Вместе мы можем обеспечить наиболее полную таблицу лидеров.

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

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

Если до этого момента вы еще не видели Top Medium Stories, посмотрите! Я был бы очень рад, если бы сайт помог вам найти чрезвычайные истории, которых вы бы иначе никогда не попали.

Спасибо за чтение!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *