>_ DevTrendspl

Język

Strona główna

Języki

Sekcje

Frontend Backend Mobilne DevOps AI / ML GameDev Blockchain Systemy wbudowane Bezpieczeństwo
TypeScript

Jak śledzić wzrost projektów open source za pomocą Star History

Wybierając bibliotekę do nowego projektu lub porównując alternatywy, liczba gwiazdek na GitHubie może wprowadzać w błąd. Pięć tysięcy gwiazdek na projekcie pięcioletnim i pięć tysięcy gwiazdek na repozytorium, które wystartowało sześć miesięcy temu, opowiadają całkowicie różne historie. Pierwszy może mieć porzuconego opiekuna, podczas gdy drugi przeżywa gwałtowny wzrost z aktywnym napływem współpracowników.

Sam GitHub wyświetla tylko bieżącą liczbę gwiazdek. Platforma nie udostępnia danych historycznych trendów out of the box. Dlatego społeczność od dawna polega na Star History — narzędziu, które zamienia surowe liczby w wizualne wykresy popularności.

Nvidia GTC Star History

Co potrafi ta usługa

Projekt działa jako usługa internetowa pod adresem star-history.com, ale cały jego kod źródłowy jest otwarty na licencji MIT. Wpisujesz nazwę repozytorium i natychmiast widzisz krzywą gwiazdek nagromadzonych w czasie.

Oto główne zastosowania:

  • Wykresy w stylu komiksowym xkcd. Linie wyglądają lekko jak rysowane ręcznie i swobodnie, dzięki czemu wykresy są natychmiast rozpoznawalne w prezentacjach i artykułach.
  • Porównuj wiele repozytoriów na jednym ekranie. Możesz nakładać wykresy konkurencji (na przykład Vue vs. React i Svelte) i dokładnie zobaczyć, kiedy nastąpiło odwrócenie trendu.
  • Przełączaj tryby wyświetlania. Możesz przeglądać dane według dokładnych dat kalendarzowych lub wyrównać je do osi czasu od daty utworzenia każdego repozytorium.
  • Osadzalne aktywne wykresy SVG i badge'y do plików README.
Star History Demo

Jak osadzić wykres w swoim README

Wielu popularnych autorów bibliotek osadza wykres historii gwiazdek bezpośrednio w opisie projektu. Natychmiast pokazuje to odwiedzającym tempo wzrostu społeczności.

Odbywa się to poprzez wywołanie API usługi. Oto jak wygląda znacznik z obsługą ciemnych i jasnych motywów:

<a href="https://star-history.com/#your-username/your-repo&Date">
 <picture>
   <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/chart?repos=your-username/your-repo&type=Date&theme=dark" />
   <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/chart?repos=your-username/your-repo&type=Date" />
   <img alt="Star History Chart" src="https://api.star-history.com/chart?repos=your-username/your-repo&type=Date" />
 </picture>
</a>

Oprócz wykresów usługa generuje kompaktowe badge'y pokazujące globalną pozycję repozytorium.

Co pod maską

Kod projektu jest podzielony na frontend, rozszerzenie przeglądarki i backend.

Frontend jest napisany w TypeScript z użyciem Next.js i stylizowany za pomocą Tailwind CSS. Deweloperzy używają menedżera pakietów pnpm.

Aby uruchomić frontend lokalnie:

cd frontend
pnpm install
pnpm dev

Po tym interfejs internetowy będzie dostępny pod adresem http://localhost:3000.

W przypadku backendu, który generuje obrazy wykresów SVG w locie, używana jest oddzielna usługa:

cd backend
pnpm install
pnpm dev

Serwer API działa na porcie 8080.

Jeden interesujący szczegół: README wyraźnie stwierdza, że autorzy nie przyjmują zewnętrznych pull requestów (We do not accept external contribution). Projekt jest utrzymywany przez określony zespół, więc jeśli potrzebujesz niestandardowych modyfikacji, będziesz musiał sforkować repozytorium.

Rozszerzenie Chrome

Jeśli nie chcesz odwiedzać strony za każdym razem, projekt oferuje rozszerzenie do przeglądarki Chrome.

Star History Chrome Extension

Dodaje przycisk widoku historii bezpośrednio na stronie każdego repozytorium GitHub. Możesz zbudować je ze źródła jednym poleceniem w folderze frontend:

cd frontend
pnpm build:ext

Gotowa paczka będzie w folderze ./dist, skąd możesz załadować ją do przeglądarki w trybie dewelopera jako rozszerzenie bez paczki.

Praktyczne scenariusze

W codziennej pracy Star History przydaje się w czterech typowych sytuacjach:

  1. Ocena zdrowia zależności. Gwałtowny spadek tempa pozyskiwania gwiazdek często zbiega się z momentem, gdy autorzy porzucili projekt lub przestali odpowiadać na problemy.
  2. Przygotowywanie prezentacji i wystąpień. Wykres w stylu xkcd to świetny sposób na urozmaicenie suchych slajdów technicznych.
  3. Analiza marketingowa po wydaniu. Uruchomiłeś projekt na Hacker News lub Product Hunt i chcesz wizualnie zobaczyć reakcję odbiorców w kolejnych dniach.
  4. Wybór między podobnymi bibliotekami. Gdy musisz wybrać między dwoma narzędziami o podobnej funkcjonalności, wykres pomaga zrozumieć, które zyskuje momentum, a które powoli zanika.

Sponsorzy i ekosystem

Projekt jest aktywnie wspierany przez komercyjne firmy w przestrzeni open source, w tym Bytebase, Dify, SerpApi i pgplex.

Bytebase

Dify

SerpApi

pgplex

Star History rozwiązuje jeden konkretny problem bez zbędnej złożoności. Usługa działa szybko, pozwala eksportować obrazy w kilka kliknięć i łatwo integruje się z dokumentacją.

Jeśli zarządzasz otwartym repozytorium lub często analizujesz cudzy kod, dodaj stronę do zakładek lub zainstaluj rozszerzenie przeglądarki. Zaoszczędzi to czas podczas oceny bibliotek i pomoże śledzić tempo wzrostu własnych projektów.

Powiązane projekty