12 niesamowitych funkcji GitHuba

Nie przychodzi mi do głowy żadne intro, więc...

#1 Edycja kodu na GitHub.com

Zacznę od tego, co chyba każdy już wie (chociaż ja osobiście nie miałem o tym pojęcia tydzień temu). Przeglądając dowolny plik tekstowy w GitHub, w dowolnym repozytorium, w prawym górnym rogu możesz zobaczyć mały ołówek. Klikając na niego, możesz edytować ten plik. Po zakończeniu kliknij Zaproponuj zmianę pliku, a GitHub utworzy rozwidlenie i żądanie ściągnięcia. Niesamowite, prawda? Sam tworzy widelec! Nie ma potrzeby tworzenia rozwidlenia i przesyłania kodu do siebie, wprowadzania zmian lokalnie i wysyłania go z powrotem do GitHub za pomocą żądania ściągnięcia. Bardzo wygodne, jeśli chcesz wprowadzić minimalne zmiany. nie do końca prawdziwe żądanie ściągnięcia

#2 Wstawianie obrazów

Opisy problemów nie ograniczają się do komentarzy tekstowych. Czy wiesz, że możesz wklejać obrazy bezpośrednio ze schowka? Po wklejeniu zobaczysz, że został przesłany (bez wątpienia do chmury) i zamieniony w znaczniki umożliwiające wyświetlenie obrazu. Wdzięczny!

#3 Formatowanie kodu

Jeśli musisz napisać blok kodu, zacznij od trzech powtórzeń, a GitHub spróbuje odgadnąć, w jakim języku programowania piszesz. Jeśli jednak publikujesz fragment kodu w języku programowania, takim jak Vue, Typescript lub JSX, możesz jawnie określić język, aby podświetlanie składni było poprawne. Zwróć uwagę na ```jsx w pierwszym wierszu: ...zapewnienie poprawnego wyświetlenia fragmentu kodu: (Nawiasem mówiąc, dotyczy to również Gist. Jeśli określisz rozszerzenie .jsf dla istoty, składnia JSF zostanie podświetlona). Oto lista wszystkich obsługiwanych składni .

#4 Zamykanie problemów za pomocą „magicznych słów” w żądaniach ściągnięcia

Załóżmy, że tworzysz żądanie ściągnięcia, które rozwiązuje problem nr 234. Możesz wstawić tekst „rozwiązuje problem nr 234” w opisie żądania (lub w dowolnym miejscu komentarza do żądania zmiany). Następnie połączenie żądania ściągnięcia „automatycznie” zamknie problem. Fajnie, prawda? Więcej informacji na ten temat można znaleźć w dokumentacji .

#5 Link do komentarzy

Czy kiedykolwiek musiałeś utworzyć link do konkretnego komentarza i nie wiedziałeś jak? Te czasy już dawno minęły, bo zdradzę Wam sekret: aby utworzyć link do komentarza, wystarczy kliknąć datę/godzinę obok tytułu. Spójrz, Gaearon ma teraz zdjęcie!

#6 Link do kodu

Chcesz więc utworzyć łącze do określonej linii kodu. W takim przypadku spróbuj tego: Kliknij numer linii obok żądanego kodu w otwartym pliku. Wow, widzisz? Adres URL się zmienił, numer linii jest teraz w nim widoczny! Jeśli przytrzymasz klawisz SHIFT i klikniesz inny numer linii, to voila! – Adres URL zmieni się ponownie, a zakres wierszy zostanie podświetlony. Ten adres URL będzie teraz wskazywał ten plik i ten zakres linii. Ale czekaj, wskazuje na bieżący wątek. Co się stanie, jeśli plik się zmieni? Prawdopodobnie będziesz potrzebować w tym przypadku stałego linku do pliku w jego obecnym stanie. Jestem bardzo leniwy, więc zrobiłem jeden zrzut ekranu wszystkich powyższych: Swoją drogą, jeśli chodzi o adresy URL...

#7 Używanie adresu URL GitHub jako wiersza poleceń

Nawigacja po GitHubie za pomocą interfejsu użytkownika jest zorganizowana bardzo wygodnie. Czasami jednak, aby dostać się do określonej lokalizacji, wystarczy wpisać ją w adresie URL. Na przykład, jeśli chcę przejść do gałęzi, nad którą pracuję i zobaczyć, jak wypada w porównaniu z gałęzią główną, mogę po prostu wpisać /compare/nazwaoddziału po nazwie repozytorium. Spowoduje to przejście do strony różnicowej dla tej gałęzi: Są to jednak różnice w stosunku do gałęzi master, ale jeśli wcześniej pracowałem z gałęzią integracji, mogę wpisać /compare/integration-branch...my-branch w adresie URL Dla miłośników skrótów klawiszowych: CTRL+L lub CMD+L przenosi kursor na pasek adresu URL (przynajmniej w przeglądarkach Chrome i Firefox). To, w połączeniu z autouzupełnianiem przeglądarki, znacznie ułatwia nawigację pomiędzy gałęziami. Wskazówka dla profesjonalistów: użyj strzałek, aby poruszać się po sugestiach autouzupełniania przeglądarki Chrome, a następnie naciśnij SHIFT+DELETE, aby usunąć elementy z historii (na przykład po połączeniu gałęzi). (Nie wiem, czy łatwiej byłoby odczytać te klawisze skrótu, gdybym umieścił w nich spację, na przykład SHIFT + DELETE. Ale technicznie rzecz biorąc, „+” nie jest ich częścią, więc nie podoba mi się ta opcja. To przez takie rzeczy nie śpię w nocy, Rhonda.)

#8 Twórz listy problemów

Czy chcesz mieć pole wyboru w opisie problemu? A czy chcesz, aby podczas przeglądania problemu z listy pojawiał się fajny pasek, taki jak „2 z 5”? Bez problemu! Możesz tworzyć interaktywne pola wyboru, korzystając z następującej składni:

• [ ] Szerokość ekranu (całkowita)
• [x] Wsparcie pracownika serwisu
• [x] Pobierz wsparcie
• [ ] Obsługa flexboxa CSS
• [ ] Elementy niestandardowe

Składnia: spacja, łącznik, spacja, nawias kwadratowy otwierający, spacja (lub x), nawias kwadratowy zamykający, spacja i niektóre słowa. Następnie możesz zaznaczyć/odznaczyć te przyciski! Z jakiegoś powodu wydaje mi się to jakimś rodzajem magii technicznej. Możesz zaznaczyć pola! A jednocześnie zmienia się tekst oryginalny! Aż strach pomyśleć, co wymyślą dalej. Aha, a jeśli ten problem występuje w panelu projektu, to tam też będzie wyświetlany postęp: Jeśli nie rozumiesz, co mam na myśli pod pojęciem „panel projektowy” – przeczytaj poniżej. Tylko kilka centymetrów niżej na tej stronie.

#9 Panele projektowe w GitHubie

Do dużych projektów zawsze korzystałem z Jira. Do moich osobistych projektów zawsze korzystałem z Trello. Bardzo podobają mi się oba te narzędzia. Kiedy kilka tygodni temu dowiedziałem się, że GitHub oferuje własną opcję bezpośrednio w zakładce Projekty w repozytorium, pomyślałem, że warto powielić zestaw zadań, z którymi już pracuję w Trello. Nie ma tu nic śmiesznego.A teraz to samo w projekcie GitHub: Stopniowo Twoje oczy przyzwyczają się do obrazu o niskim kontraście Ze względu na szybkość dodałem wszystkie powyższe uwagi jako uwagi, co oznacza, że ​​nie są to „prawdziwe” problemy z GitHubem. Jednak siła zarządzania problemami w GitHubie polega na integracji z resztą repozytorium - dlatego prawdopodobnie lepiej będzie dodać istniejące zgłoszenia z repozytorium do dashboardu. Kliknij Dodaj karty w prawym górnym rogu i znajdź to, co chcesz dodać. Tutaj przydaje się specjalna składnia wyszukiwania : na przykład wpisz is:pr is:open i możesz przeciągnąć dowolne otwarte żądanie ściągnięcia na panel lub label:bug , jeśli chcesz naprawić jakieś błędy. Możesz także przekształcić istniejące notatki w wydania. I na koniec z istniejącego formularza problemu dodaj go do projektu w prawym panelu. Zostanie on umieszczony na liście sortowania tego panelu projektu, dzięki czemu będziesz mógł wybrać, w której kolumnie go umieścić Gdy opis „zadania” znajduje się w tym samym repozytorium, co kod realizujący to zadanie, jest to bardzo (bardzo) wygodne. Oznacza to, że za wiele lat będziesz mógł uruchomić git Believe na wierszu kodu i odkryć cały problem, który doprowadził do tego wiersza, bez konieczności śledzenia tego wszystkiego w Jira/Trello/gdzie indziej.

Wady

Przez ostatnie trzy tygodnie eksperymentowałem z robieniem wszystkiego w GitHubie zamiast w Jirze (w małym projekcie, w stylu Kanban) i bardzo mi się to podobało. Ale nie mogę sobie tego wyobrazić w przypadku projektu Scrum, w którym należy odpowiednio ocenić i obliczyć szybkość rozwoju i tym podobne. Dobra wiadomość jest taka, że ​​projekty GitHub mają tak mało „specjalnych funkcji”, że przejście na inny system nie zajmie dużo czasu. Więc spróbuj i zobacz, jak bardzo Ci się spodoba. Nie wiem, jakie to ważne, ale o ZenHubie usłyszałem i po raz pierwszy otworzyłem go 10 minut temu. Zasadniczo jest to rozszerzenie GitHuba, w którym możesz oceniać problemy oraz tworzyć „epopei” i zależności. Istnieją wykresy szybkości rozwoju i wypalenia zawodowego; Wygląda na to, że to po prostu niesamowita rzecz. Dalsza lektura: Dokumentacja GitHub dotycząca projektów.

#10 Gwiki

W przypadku nieustrukturyzowanego zestawu stron — takiego jak Wikipedia — GitHub Wiki (którą odtąd będę nazywać po prostu Gwiki) jest świetna. W przypadku uporządkowanego zestawu stron – na przykład takiej jak dokumentacja – nie za bardzo. Nie ma sposobu, aby wskazać, że „ta strona jest dzieckiem tamtej”, nie ma tak wygodnych rzeczy jak przyciski „Następna sekcja” i „Poprzednia sekcja”. Jaś i Małgosia na pewno by się tu zgubili, bo i tu nie ma „bułki tartej” (specjalnych operatorów debugujących – ok. przeł.). (Nota autora: Czytałeś tę historię? To po prostu nieludzkie. Dwóch młodych bandytów zabija biedną, głodną starszą panią, spalając ją żywcem w jej własnym piekarniku . I oczywiście zostawiając po sobie kompletny bałagan, którego nikt nie może zrozumieć. Myślę, że dlatego dzisiejsi młodzi ludzie są cholernie wrażliwi – historie czytane dzieciom przed snem nie są obecnie wystarczająco okrutne!) Idziemy dalej – aby naprawdę wypróbować Gwiki, wpisałem kilka stron z NodeJS jako strony wiki, a następnie utworzyłem niestandardową pasek boczny symulujący rzeczywistą strukturę witryny. Ten pasek boczny jest zawsze obecny, chociaż bieżąca strona nie jest podświetlona. Linki będą musiały być utrzymywane ręcznie, ale ogólnie wszystko działa dobrze. Jeśli chcesz, możesz rzucić okiem : Trudno to konkurować z czymś takim jak GitBook (który jest używany w dokumentacji Redux ) lub szytą na miarę stroną internetową. Ale to już dobre 80% i wszystko jest w porządku w twoim repozytorium. Jestem po prostu fanem tego. Sugeruję, że jeśli przerósł Cię pojedynczy plik README.md i potrzebujesz kilku różnych stron na instrukcje obsługi lub bardziej szczegółową dokumentację, warto pozostać przy Gwiki. Jeśli przeszkadza Ci brak struktury/nawigacji, przejdź do czegoś innego.

#11 Strony GitHuba

Być może już wiesz, że stron GitHub można używać do hostowania statycznej witryny internetowej. A jeśli nie wiedziałeś, to teraz już wiesz. Jednak ta sekcja jest poświęcona bardziej szczegółowemu tematowi: używaniu Jekylla do tworzenia strony internetowej. W najprostszej formie GitHub Pages + Jekyll może renderować plik README.md przy użyciu ładnie wyglądającego motywu. Na przykład spójrz na moją stronę Readme z about-github : Jeśli klikniesz kartę ustawień tej witryny GitHub, włącz GitHub Pages i wybierz motyw Jekyll... Następnie otrzymamy stronę w stylu motywu Jekyll : Następnie możesz utworzyć całą statyczną witrynę opartą głównie na łatwych do edycji plikach znaczników, zasadniczo zmieniając GitHub w CMS. Chociaż właściwie tego nie używałem, strony internetowe są budowane w ten sposób przy użyciu frameworku Bootstrap i React, więc nie ma w tym nic strasznego. Zaznaczam, że Ruby musi działać na lokalnej maszynie (tutaj użytkownicy Windowsa wymienią wyrozumiałe spojrzenia i pójdą w drugą stronę, użytkownicy macOS powiedzą: „W czym problem, dokąd idziesz? Ruby to platforma uniwersalna! Jest też GEMS) system zarządzania pakietami!”) (Warto również zauważyć, że „agresywne lub groźne treści lub zachowania” nie są dozwolone na stronach GitHub, więc nie będziesz mógł opublikować tam swojej wersji historii Jasia i Małgosi).

Moja opinia

Im więcej przyglądałem się kombinacji GitHub Pages + Jekyll (na potrzeby tego artykułu), tym bardziej wydawało mi się, że cały pomysł pachnie dziwnie. Pomysł „stworzenia własnej strony internetowej przy minimalnym wysiłku” jest świetny. Ale aby nad tym pracować, nadal potrzebujesz aktualnej wersji na komputerze lokalnym. A w przypadku czegoś tak „prostego” jest zbyt wiele poleceń wiersza poleceń. Przejrzałem siedem stron sekcji Pierwsze kroki i poczułem, że jedyną prostą rzeczą w tym wszystkim jestem ja . I nawet nie wymyśliłem prostej składni strony głównej ani podstaw prostego „mechanizmu szablonów opartego na języku Liquid”. Wolałbym sam napisać stronę internetową! Szczerze mówiąc, jestem trochę zaskoczony, że Facebook używa tego do dokumentacji Reacta, podczas gdy prawdopodobnie mógłby codziennie budować swoje strony systemu pomocy przy użyciu Reacta i wstępnie renderować jako statyczne pliki HTML . Wszystko, co muszą zrobić, to znaleźć sposób na otrzymanie istniejących plików znaczników tak, jakby pochodziły z CMS. Co jeśli...

#12 Używanie GitHuba jako CMS-a

Załóżmy, że mamy witrynę internetową zawierającą tekst, ale nie chcemy przechowywać tego tekstu jako znaczników HTML. Zamiast tego chcielibyśmy przechowywać fragmenty tekstu w miejscu, które użytkownicy niebędący programistami mogliby łatwo edytować. Najlepiej z jakąś opcją wersjonowania. Być może nawet po jakimś procesie wzajemnej oceny. Oto, co sugeruję: użyj plików znaczników przechowywanych w repozytorium do przechowywania tekstu. I użyj komponentu po stronie klienta, który pobierze te fragmenty tekstu i wyświetli je na stronie. Jestem fanem React, więc oto przykład odpowiedniego komponentu <Markdown>, który po podaniu ścieżki do pliku przeceny wyodrębni go, przeanalizuje i wyrenderuje jako HTML.

class Markdown extends React.Component {
    constructor(props) {
      super(props);

      // Конечно, вам нужно заменить это на свой URL
      this.baseUrl = 'https://raw.githubusercontent.com/davidgilbertson/about-github/master/text-snippets';

      this.state = {
        markdown: '',
      };
    }

    componentDidMount() {
      fetch(`${this.baseUrl}/${this.props.url}`)
        .then(response => response.text())
        .then((markdown) => {
          this.setState({markdown});
        });
    }

    render() {
      return (
        <div dangerouslySetInnerHTML={{__html: marked(this.state.markdown)}} />
      );
    }
}

(Używam tutaj pakietu oznaczonego npm do analizowania znaczników w formacie HTML) Adres URL wskazuje na moje przykładowe repozytorium, które zawiera pliki znaczników w katalogu /text-snippets . (Możesz także użyć interfejsu API GitHub do pobrania treści , ale wątpię, czy będzie to potrzebne.) Możesz użyć takiego komponentu, jak ten:

const Page = () => (
  <div className="page">
    <div className="about-us">
      <Markdown url="about-us.md" />
    </div>

    <div className="disclaimer">
      <p>A very important disclaimer:</p>

      <Markdown url="disclaimers/home-page-disclaimer.md" />
    </div>
  </div>
);

Zatem teraz GitHub działa w pewnym sensie jako Twój CMS dla tych fragmentów tekstu, które chcesz hostować. Powyższy przykład pobiera znaczniki dopiero po załadowaniu komponentu do przeglądarki. Jeśli potrzebujesz strony statycznej, będziesz musiał ją wyrenderować na serwerze. Dobre wieści! Nic nie stoi na przeszkodzie, aby pobrać wszystkie pliki znaczników na serwerze (przy użyciu dowolnej strategii buforowania). Jeśli zdecydujesz się pójść tą drogą, warto skorzystać z interfejsu API GitHub, aby uzyskać listę wszystkich plików znaczników w katalogu. Bonus — narzędzia GitHub! Od dłuższego czasu korzystam z rozszerzenia Octotree do Chrome i polecam je Wam. Nie bez zastrzeżeń, ale i tak polecam. Wyświetla panel po lewej stronie z widokiem drzewa repozytorium, które przeglądasz. Z tego filmu dowiedziałem się o octoboksie , który również wydaje mi się jak dotąd bardzo dobrym narzędziem. To jest skrzynka odbiorcza dla Twoich problemów z GitHubem. To wszystko, co musisz o nim wiedzieć. A skoro już o kolorach mowa, to wszystkie powyższe zrzuty ekranu wykonałem w jasnym motywie, żeby Was nie przestraszyć. Ale jeśli we wszystkim innym wolę ciemne kolory, to po co tolerować śmiertelnie blady GitHub? Tutaj użyłem kombinacji rozszerzenia Stylish dla przeglądarki Chrome (które może zastosować motywy do dowolnej witryny) i stylu GitHub Dark . Na początek narzędzia deweloperskie GitHub – ciemny motyw (wbudowany, wystarczy go włączyć) i motyw Atom One Dark dla przeglądarki Chrome.

Bitbucketa

Ściśle mówiąc, nie jest to tutaj do końca na miejscu, ale nie mogę nie wspomnieć o Bitbuckecie. Dwa lata temu rozpocząłem projekt i spędziłem pół dnia na wyborze najlepszego hostingu git. Tak więc Bitbucket wygrał ze znaczną przewagą. Ich sposób przeglądu kodu znacznie wyprzedza konkurencję (było to na długo przed tym, zanim GitHub miał w ogóle koncepcję recenzenta). Od tego czasu GitHub zdobywa również recenzje. Niestety przez ostatni rok nie miałem okazji korzystać z Bitbucketa - być może znów ruszyli w czymś do przodu. Dlatego polecam osobom odpowiedzialnym za wybór usługi hostingowej git również zwrócić uwagę na Bitbucket.

Wniosek

To wszystko! Mam nadzieję, że udało mi się powiedzieć Wam choć trzy rzeczy, o których wcześniej nie mieliście pojęcia. Mam też nadzieję, że dobrze się bawiłeś czytając mój artykuł.