Badge: Pochwal się przed światem, że ci działa!Około 6 minut

Wiemy, dawno nie pisaliśmy. Dopadły nas studia. Tymczasem licznik polubień na Facebooku powolutku, acz stale się inktrementował. Postanowiliśmy – tak nie może być! Trzeba dokończyć te wszystkie rozpoczęte szkice. A w międzyczasie postanowiliśmy podrzucić wam ciekawostkę, która wzbogaci wasze publiczne repozytoria. Dobrej zabawy!


Na pewno kiedyś je widzieliście. Znajdują się w README w każdym profesjonalnym repozytorium. Stanowią gwarancję jego profesjonalizmu i wskazują na jakość znajdującego się tam kodu. Abyście nie musieli domyślać się, o co chodzi, oto i one:

badge vue.js

Tak wygląda fragment README repozytorium Vue.js. Znajdują się na nim tak zwane badge, z których możemy odczytać między innymi, że:

  • projekt działa: build passing pokazuje pozytywny stan najnowszego buildu. Stan ten pobierany jest z narzędzia do CI/CD. Po najechaniu na badge widzimy, że twórcy Vue używają CircleCI
  • kod jest naprawdę dobrze pokryty testami: 99% funkcjonalności jest przetestowane. Również możemy sprawdzić użyte do tego narzędzie: codecov.io
  • Vue jest popularny: 2 miliony pobrań w miesiącu. Łał. Serio, łał.
  • jest na bieżąco aktualizowany w repozytorium NPM-a
  • jest tworzony na licencji MIT
  • w razie problemów i pytań możemy pogadać na specjalnym tematycznym Discordzie
  • testy cross-browser przechodzą – status z Sauce Labs świeci się na zielono

No fajnie, mogę sobie pokazać, że mój build przechodzi, ale chce mi się za każdym razem zmieniać takiego obrazka.

No, nie.

Badge są powiązane z konkretną usługą i zmieniają swój wygląd automatycznie. Przykładowo: badge pokazujący, czy dana strona jest online, czy nie, ma status:

  • dla BC (musi mieć, skoro to czytasz): Website
  • dla mojego starego, nieistniejącego już bloga femdev.pl: Website

No dobrze, super, że wielcy świata kodu mają takie znaczki, ale jak to się ma do moich projektów? Nie współtworzę Open Source, moje repozytoria są malutkie. Nie potrzebuję chwalić się swoim kodem.

Też nie.

Wysoki code coverage oraz znajomość CI/CD to umiejętności niezbędne w pracy programisty. Podobnie znajomość licencji. Badge stanowią potwierdzenie twojej znajomości dobrych praktyk. Kod tylko dla siebie? Też tak myślałam, dopóki nie zaczęłam dostawać gwiazdek na Githubie od kompletnie obcych ludzi.

To skoro wątpliwości mamy z głowy, możemy przejść do sedna.

Jak mogę umieścić badge w swoim repo?

Wiele usług, na przykład CircleCI, udostępnia kod badge do ściągnięcia. Dla przykładu, badge ukazujący najnowszy stan mojego projektu dragomon:

CircleCI

[![CircleCI](https://circleci.com/gh/Vakme/dragomon.svg?style=svg)](https://circleci.com/gh/Vakme/dragomon)

Jednakże, najpopularniejszymi badżami używanymi w sieci są te ze Shields.io. Znajdziemy tam do dyspozycji setki przykładów w wielu stylach. Poniżej kod na kilka z nich:

  • Znacznik stanu buildu na CircleCI (to samo, co wyżej, tylko w wersji Shields.io): CircleCI (all branches)
    ![CircleCI (all branches)](https://img.shields.io/circleci/project/:platforma:/:użytkownik:/:repozytorium:.svg)
  • Podziękuj mi (wymaga konta na saythanks): saythanks
    [![saythanks](https://img.shields.io/badge/say-thanks-ff69b4.svg)](https://saythanks.io/to/:użytkownik:)
  • Typ licencji (Github): GitHub
    ![GitHub](https://img.shields.io/github/license/:użytkownik:/:repozytorium:.svg)


  • Ilość zamkniętych pull requestów: GitHub closed pull requests
    ![GitHub closed pull requests](https://img.shields.io/github/issues-pr-closed/:użytkownik:/:repozytorium:.svg)


Jak widzicie, format jest prosty do zastosowania. Czasem tylko wymagana jest integracja z odpowiednią usługą. Takich badży jest mnóstwo i osobiście zachęcam do eksploracji Shields.io. Najpopularniejsze możecie też znaleźć tutaj i tutaj.

Możecie również przedstawić historyczny stan waszej aplikacji, chociaż już bardziej w formie widgetu niż badge, dzięki usłudze BuildStats.info. Przykładowo status z CircleCI dla dragomona:

enter image description here

https://buildstats.info/:platforma:/chart/:użytkownik:/:repozytorium:

Istnieją również epickie badge z ForTheBadge.com (dostępne również jako styl na Shields.io). Przykładowe:

Build with <3

Uses cat gifs

Uses badges

Made with Vue

You didn't ask for this

I z dedykacją dla Dominiki:

Compatibility Club Penguin

Czy mogę stworzyć własny badge?

Tak, na przykład poprzez Shields.io. Zarówno statyczny, jak i dynamiczny. Wzór na badge statyczne jest stosunkowo prosty:

https://img.shields.io/badge/<SUBJECT>-<STATUS>-<COLOR>.svg

Przykładowe badge BC(do dowolnego użytku!):

Created by BC Approved by BC Rejected by BC

Oprócz tego, możecie zmieniać parametry istniejących już badży, dodając w query stringu (po ? i oddzielone &) do adresu obrazka odpowiednie wartości:

  • styl: style=[plastic|flat|flat-square|for-the-badge|popout|popout-square|social]
  • tekst: label=healthinesses (spacje i znaki specjalne wymagają kodowania procentowego)
  • dodanie logo: logo=github
  • zmiana koloru: colorA=ff0000, colorB=ffff00

Na dziś tyle z mojej strony. Jeszcze raz zachęcam was do szperania po Shields.io. Mam nadzieję, że będziecie się bawić przy tym równie dobrze jak ja. Jeśli chcecie poznać możliwości CircleCI i dowiedzieć się więcej o CI/CD, dajcie znać w komentarzach.

Zostawiam was z epickim badgem w stylu ForTheBadge i do następnego!

Poprzedni artykułMicrosoft przejmuje GitHub – jest się czego obawiać?
Avatar
Tak naprawdę nazywam się Aleksandra Bielak i obecnie jestem świeżo upieczonym inżynierem. Pracuję jako korpo szczur FullStack Developer - Java + JavaScript. Lubię CSS, staram się zrozumieć asynchroniczność, moim ulubionym frameworkiem jest Vue.js. Prywatnie jestem nerdem - gram w gry (ostatnio odkrywam piękno Skyrim), czytam komiksy i marzę o tym, żeby mieć w przyszłości w na łóżku poduszki CTRL-ALT-DEL, a na ścianie wieszaki-shruikeny.
PODZIEL SIĘ