Представляем response.explore-tech.org

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

TL;DR

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

Https://react.explore-tech.org /

"Исходный код"

Введение

Две недели назад я выпустил github-actions.explore-tech.org, веб-сайт, разработанный, чтобы помочь людям найти Действия GitHub. Пока я разрабатывал веб-сайт и получал отзывы, я хотел извлечь уроки и создать платформу, чтобы помочь людям учиться, поэтому я создал новый проект React.

Задача была проста: Создать визуальный веб-сайт, чтобы помочь разработчикам изучить React.

Итак, история начинается ...

Мотивация

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

Несколько месяцев назад я познакомился с GitHub Actions. После прослушивания подкаста о действиях GitHub я поставил себе задачу создать что-то, что поможет людям находить действия GitHub, пока они изучают их и узнают о них все.

Через неделю я выпустил github-actions.explore-tech.org. Казалось, что проект идет хорошо, и люди вносят свой вклад, что было отличным чувством 👍.

Затем мне было интересно посмотреть, смогу ли я использовать эти знания для создания чего-то для сообщества React.

Так родился react.explore-tech.org.

Цель: создать что-то наглядное, чтобы помочь людям изучить и изучить React.

Сборка приложения

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

Сначала я хотел начать с некоторых основных требований:

  1. Веб-сайт, на котором перечислены материалы React
  2. Должен быть наглядным
  3. То, во что люди могут легко внести свой вклад

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

Моей первой задачей было понять, какой материал я хочу получить как MVP (минимально жизнеспособный продукт). Я остановился на проектах GitHub, так как они могут привести к крутым идеям / проектам и веб-сайтам.

Стек технологий

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

Итак, с определенными инструментами я начал.

Автоматизация

Первое доказательство концепции было прямым: у меня был файл уценки с передним листом, в котором перечислены некоторые данные, которые я ввел вручную с GitHub. С данными в разметке я использовал Gatsby для чтения и рендеринга страниц. Все было собрано довольно быстро, и концепция была проверена. Счастливые дни 👍

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

Итак, я создал сценарий, чтобы сделать несколько вещей:

  1. Используйте GitHub API, чтобы запросить у данного проекта всю необходимую информацию. (Информация о проекте, данные readme, данные о выпуске и т. Д.)
  2. Отформатируйте JSON в markdown и frontmatter для Gatsby
  3. Затем используйте кукольник, чтобы сделать снимок экрана (домашней страницы или страницы GitHub).
  4. Затем зафиксируйте изменение в.

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

Вот пример команды: npm run add:component {GITHUB_URL}.

Эта команда создаст новый ресурсный материал в категории компонентов, получит данные из GitHub, проанализирует их, сделает снимок экрана и зафиксирует.

После того, как сценарий был настроен и готов к работе, остальное было работой пользовательского интерфейса.

Создание пользовательского интерфейса

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

Затем я поделился POC в Twitter.

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

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

Перечисление того, что есть, а что нет, помогло сосредоточить внимание на проекте.

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

Последние штрихи

Поэтому, как и в большинстве проектов с открытым исходным кодом, я хотел убедиться, что в нем есть несколько вещей:

  • Дополнительные тесты
  • Покрытие кода
  • Интеграция CI
  • Дополнительные документы
  • Документы ReadME

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

Заключение и участие

До сих пор это был отличный проект для работы, я лично много узнал о Gatsby, GraphQL и Netlify. (Все это потрясающие инструменты !!).

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

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

Большое спасибо за чтение 🙏👍

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

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

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

⭐ Я ищу способы повысить ценность окружающих меня людей и помочь людям достичь того, чего они хотят. Так что я хотел бы дать вам эту книгу БЕСПЛАТНО. ⭐

⭐ Если вас заинтересовала книга, перейдите по ссылке ниже и отметьте поле, которым вы хотите поделиться своим адресом электронной почты. (Важно, чтобы вы указали свой адрес электронной почты! Я могу отправить вам книгу бесплатно.) ⭐

Https://leanpub.com/steps-to-software-engineer

Спасибо!