Изграждане на най-големия списък с полезни библиотеки с отворен код
TL;DR
Всеки ден виждаме „страхотни“ списъци на GitHub. Те са страхотни.
Основният проблем е, че понякога трябва да се актуализира.
Поддържащите се нуждаят от повече време или напускат компанията.
Също така трябва да отразява полезността.
Реших да съставя списък, който ще направи две неща
- Помогнете на новите библиотеки да получат известно сцепление.
- Нека хората гласуват за любимата си библиотека.
Преди да започнем
Много се радвам да ви кажа как го създавам.
Но първо, ако имате хранилище на GitHub, моля, добавете го към нашия уебсайт тук.
По-късно можете да го намерите тук:
https://github.com/github-20k/awesome-opensource
Исках да спестя пари 🤑 💰
Имам необходимото техническо ниво да създам своя собствена CMS и да я хоствам на AWS — като се грижа за мащабирането и CI/CD. Но ще ми отнеме много време, а също и пари.
Така че купих $2 месечен WordPress хост от DreamHost.
Не падайте от стола си - да, бавен е и да, няма да може да оцелее при значителен трафик. Така че го използвах + кеширах почти всеки възможен резултат на уебсайта (включително търсенето).
Хубавото на WordPress е, че можете да използвате техния API веднага с GET — /wp-json/wp/v2/posts; освен това добавянето на усъвършенстван плъгин за персонализирано поле се отразява автоматично върху резултатите.
Ограничение 🙅🏻♂️
- Бавен; всичко трябва да се кешира.
- Невъзможно извършване на „търсене“.
- Дълги времена за изграждане (всичко се кешира).
- Няма актуализации в реално време.
- Почти невъзможно е да се приложи безкрайно превъртане (трябва да се базира на пагинация)
NextJS идва на помощ
Избрах „NextJS“. Имат страхотен SSG механизъм за кеширане на всички страници. Не използвах новия подход за рутер за приложения, не го намирам за добър, но направих „урок за това“.
Кеширах всичко 🤣
Имаме седем маршрута
- Списък с тенденции (/страница/1)
- Нов списък (/нов/1)
- Списък с категории (/производителност/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.
Супабаза
Направих гениални неща — все още се гордея със себе си.
Създадох нова таблица в Supabase, наречена „гласове“ и добавих датата, на която гласуването е преброено.
Добавих също допълнителни подпори в NextJS getStaticProps, наречени дата — и задайте там текущата дата.
Така че всеки път, когато имам нова компилация на кеша, страницата получава новата дата. Но аз просто използвам старата дата, ако няма ново изграждане.
Всичко, което остана да направя, беше да помоля Supabase — да ми даде всички гласове след тази дата.
Тогава просто показвам кеширани гласове + гласове в Supabase.
И когато има нова компилация, вероятно ще получа от Supabase, че има 0 скорошни гласа.
Получавайте туитове!
Напоследък видях много технологични влиятели да правят списъци с десетте най-добри библиотеки; Мислех, че мога да помогна на инфлуенсъри и собственици на библиотеки, като им позволя да съставят списъци на уебсайта и да ги туитват.
Изграждането на HTML от дясната страна беше лесно; проблемът, пред който се изправих, беше как да направя снимка в крайна сметка.
Разглеждах „Remotion“, но проблемът е, че „не работи добре“ с Vercel.
Реших да спестя малко изчислителна мощност, като използвам html2canvas и оставям на потребителя да визуализира изображенията.
Работата е там, че ако визуализирате изображения и те са в различен домейн, ще получите проблем с CORS, така че направих лек пренапис за всички снимки:
Това е! Надявам се да ви е било полезно!
можеш ли да ми помогнеш
Поставете звезда на хранилището на GitHub, така че повече хора да могат да видят отличните нови инструменти 😎
Повече съдържание в PlainEnglish.io.
Регистрирайте се за нашия безплатен седмичен бюлетин. Следвайте ни в Twitter, LinkedIn, YouTube и Discord .
