Что я узнал, взглянув на открытый исходный код.

Это был обычный день в кафе Peet’s Coffee неподалеку от моего дома. Я был в состоянии идеи, что я могу построить, чтобы зажечь статус-кво технологий, какими мы их знаем? Возможно, более реалистично, какой проект я могу начать, который меня достаточно волнует, чтобы придерживаться его?

Типичный день в жизни этого разработчика состоит в том, чтобы увлечься созданием какого-нибудь не такого уж сумасшедшего приложения (кому-нибудь tinder для собак?), а затем провести над ним день или два, прежде чем его искра угаснет. Какими бы крутыми ни были некоторые из этих идей, в них просто нет той крутости, которая заставит меня просыпаться по утрам в предвкушении их реализации.

Получение практичности

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

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

Это был бы проект, который я мог бы построить, как бы мне ни хотелось, с любым стеком технологий, который я выберу. Я решил использовать React для интерфейса и Node для сервера, так как на данный момент это были мои любимые технологии. Однако пока я работал над ним, начинающий разработчик во мне понял, для чего существует Wordpress.

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

Какие средства массовой информации, которые я знаю, делают это довольно хорошо?

Среднее вдохновение

Хорошие художники копируют; великие художники воруют — Пабло Пикассо

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

Более того, я наткнулся на потрясающий пост Ника Сантоса из инженерной группы Medium о создании лучшего текстового редактора Почему ContentEditable ужасен.

В этом посте Ник подробно описывает требования к хорошей поверхности редактирования текста, математически доказывая, почему атрибут ContentEditable аксиоматически несовместим с текстовым редактором «Что видишь, то и получаешь».

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

Средняя структура статьи

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

Я узнал, что пост на Medium — это, по сути, просто список абзацев. Каждый абзац будет иметь либо строку текста, либо метаданные, например, URL-адрес, указывающий на загруженное пользователем изображение или Github Gist.

Если это просто строка текста, объект абзаца также содержит список разметок с полем типа, а также строковыми индексами, указывающими, когда начинать или заканчивать.

Предложение прямо над этим будет храниться так:

paragraph: {
  text: "If its just a string of text, the paragraph object also has a list of markups, with a type field as well as the string indices detailing when to start or stop.",
  markups: [{
    type: 1,
    start: 69,
    end: 76 
  }]
}

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

Я скопировал этот JSON со своего терминала, преобразовал его, а затем сохранил в Gist, который вы можете просмотреть здесь, если вам интересно. Кажется, слишком много данных для такого простого поста!

Что я выучил

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

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

Образование с открытым исходным кодом

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

Помимо того, что я узнал, что Redux — это всего лишь пара сотен строк кода (минус обработка ошибок и проверки работоспособности), я также изучил некоторые передовые методы написания хорошего JavaScript.

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

Еще одна вещь, которую я хочу сделать больше, — это модульное тестирование моих приложений React с помощью Jest. Поэтому, чтобы получить представление о том, как это сделать, я перехожу к проектам Facebook с открытым исходным кодом на Github и открываю один из них. Оттуда я могу изучить, как они структурировали свои тесты с помощью Jest, а затем подумать, почему они сделали это именно так.

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

Так что откройте открытый исходный код и извлеките из него уроки.

Кроме того, если вы хотите ознакомиться с моим блогом в его нынешнем виде, перейдите на страницу The Stoic Developer. Спасибо, что прочитали.