Создание самого большого списка полезных библиотек с открытым исходным кодом
TL;DR
Каждый день мы видим «крутые» списки GitHub. Они великолепны.
Основная проблема в том, что иногда их нужно обновлять.
Сопровождающим нужно больше времени, иначе они уходят из компании.
Это также должно отражать полезность.
Я решил составить список, который будет делать две вещи.
- Помогите новым библиотекам набрать обороты.
- Пусть люди голосуют за свою любимую библиотеку.
Прежде чем мы начнем
Я очень рад рассказать вам, как я его создаю.
Но сначала, если у вас есть репозиторий GitHub, пожалуйста, добавьте его на наш сайт здесь.
Позже вы сможете найти его здесь:
https://github.com/github-20k/awesome-opensource
Хотел сэкономить 🤑 💰
У меня есть технический уровень создания собственной CMS и размещения ее на AWS — я позабочусь о масштабировании и CI/CD. Но это займет у меня массу времени, а также денег.
Поэтому я купил хостинг WordPress за 2 доллара в месяц у DreamHost.
Не упадите со стула — да, он медленный, и да, он не выдержит значительного трафика. Поэтому я использовал его + кэшировал почти все возможные результаты на сайте (включая поиск).
Преимущество WordPress в том, что вы можете использовать их API из коробки с помощью GET — /wp-json/wp/v2/posts; Кроме того, добавление расширенного подключаемого модуля настраиваемого поля автоматически отражается на результатах.
Ограничение 🙅🏻♂️
- Медленный; все должно кэшироваться.
- Невозможно выполнить «поиск».
- Долгое время сборки (все кешируется).
- Нет обновлений в реальном времени.
- Почти невозможно реализовать бесконечную прокрутку (должна быть основана на нумерации страниц)
NextJS спешит на помощь
Я выбрал NextJS. У них отличный механизм SSG для кэширования всех страниц. Я не использовал новый подход к маршрутизатору приложений, я не считаю, что он хорошо работает, но я сделал учебник о нем.
Я все закэшировал 🤣
У нас семь маршрутов
- Список трендов (/page/1)
- Новый список (/новый/1)
- Список категорий (/productivity/1)
- Список языков (/language/javascript/1)
- Список категорий + языков (/language/javascript/category/productivity/1)
- Информация о сайте
- Общий поиск (объясню, как реализовал)
- И генерировать твиты (мы поговорим об этом позже)
Вы, наверное, можете себе представить, что список «Категории + Языки» самый большой, и это правда; если бы я добавил еще один такой фильтр, у меня были бы тысячи страниц.
Бесплатный план Vercel, играйте спокойно, когда не занимаетесь фоновой обработкой.
Но если вам нужны фоновые процессы, у вас возникнут проблемы с API.
Бессерверная функция — в бесплатной версии ограничение 10 секунд, в версии Pro 60 секунд.
Зачем мне API, если все кешируется
Спасибо, Нево, за вопрос.
Я хотел, чтобы люди добавляли свои собственные библиотеки.
Для этого мне нужно сделать несколько вещей:
- Используйте GitHub GraphQL для получения информации о репозитории — аватар, владелец и URL-адрес домашней страницы.
- Используйте ChatGPT 😉 в файле README.md, чтобы обобщить его.
- Вставьте все в WordPress.
Вы, наверное, догадываетесь, что использование ChatGPT для длинных текстов требует времени.
Поэтому я решил сделать две вещи:
- Выполните первое задание (GitHub GraphQL) синхронизации с одним из путей /API. (около 10 секунд)
- Используйте Serverlessq, чтобы поместить всю информацию в очередь, выполняющую другой маршрут API. В случае сбоя он повторит попытку три раза (около 40 секунд).
Механизм голосования 👆🏻 ⬆️
Я сохраняю количество голосов за WordPress; это простой запрос API, который добавляет +1 к записи.
Я знаю — это атомарное действие, очереди нет, и это может привести к взаимоблокировке. Когда я добираюсь до времени, на сайт приходит огромный трафик. Я поставлю его в очередь.
А пока меня беспокоит более серьезное дело.
Как показать новое количество голосов без повторного рендеринга страницы?
Я начал пробовать сложные вещи с кэшированием и API. Но тут меня осенило — Супабаза.
Супабаза
Я делал гениальные вещи — до сих пор горжусь собой.
Я создал новую таблицу в Supabase под названием «голоса» и добавил дату подсчета голосов.
Я также добавил дополнительный реквизит в NextJS getStaticProps, называемый датой — и установите там текущую дату.
Поэтому каждый раз, когда у меня создается новая сборка кеша, страница получает новую дату. Но я просто использую старую дату, если нет новой сборки.
Оставалось только попросить Supabase — отдать мне все голоса после этой даты.
Затем я просто показываю Кэшированные голоса + Голоса Supabase.
И когда будет новая сборка, я, вероятно, получу от Supabase, что последних голосов 0.
Получить твит!
В последнее время я видел, как многие технические авторитеты составляли списки десяти лучших библиотек; Я подумал, что смогу помочь лидерам мнений и владельцам библиотек, позволив влиятельным лицам создавать списки на веб-сайте и публиковать их в Твиттере.
Построить HTML с правой стороны было легко; проблема, с которой я столкнулся, заключалась в том, как сделать картинку в конце.
Я искал Remotion, но проблема в том, что он плохо работает с Vercel.
Я решил сэкономить вычислительную мощность, используя html2canvas и позволив пользователю отображать изображения.
Дело в том, что если вы рендерите изображения, и они находятся в другом домене, вы получите проблему CORS, поэтому я немного переписал все фотографии:
Вот и все! Я надеюсь, что это было полезно для вас!
Можете ли вы мне помочь?
Отметьте репозиторий GitHub, чтобы больше людей могли ознакомиться с превосходными новыми инструментами 😎
Дополнительные материалы на PlainEnglish.io.
Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .
