12 erstaunliche Funktionen von GitHub

Mir fällt beim besten Willen kein Intro ein, also...

#1 Code auf GitHub.com bearbeiten

Ich beginne mit dem, was meiner Meinung nach jeder bereits weiß (obwohl ich persönlich vor einer Woche noch keine Ahnung davon hatte). Wenn Sie eine Textdatei auf GitHub in einem beliebigen Repository anzeigen, sehen Sie oben rechts einen kleinen Bleistift. Wenn Sie darauf klicken, können Sie diese Datei bearbeiten. Wenn Sie fertig sind, klicken Sie auf Dateiänderung vorschlagen und GitHub erstellt einen Fork und eine Pull-Anfrage. Erstaunlich, nicht wahr? Er stellt die Gabel selbst her! Es ist nicht erforderlich, den Code zu forken und auf sich selbst hochzuladen, Änderungen lokal vorzunehmen und ihn mit einem Pull Request an GitHub zurückzusenden. Sehr praktisch, wenn Sie nur minimale Änderungen vornehmen müssen. nicht ganz eine echte Pull-Anfrage

#2 Bilder einfügen

Problembeschreibungen beschränken sich nicht nur auf Textkommentare. Wussten Sie, dass Sie Bilder direkt aus der Zwischenablage einfügen können? Nach dem Einfügen wird es hochgeladen (zweifellos in die Cloud) und in Markup umgewandelt, um das Bild anzuzeigen. Anmutig!

#3 Codeformatierung

Wenn Sie einen Codeblock schreiben müssen, beginnen Sie mit drei Backticks und GitHub versucht zu erraten, in welcher Programmiersprache Sie schreiben. Wenn Sie jedoch einen Code in einer Programmiersprache wie Vue, Typescript oder JSX veröffentlichen, können Sie die Sprache explizit angeben, damit die Syntaxhervorhebung korrekt ist. Beachten Sie das „jsx“ in der ersten Zeile: ...sicherstellen, dass das Code-Snippet korrekt angezeigt wird: (Dies gilt übrigens auch für Gist. Wenn Sie die Erweiterung .jsf für einen Gist angeben, wird die JSF-Syntax hervorgehoben.) Hier ist eine Liste aller unterstützten Syntaxen .

#4 Probleme mit „Zauberwörtern“ in Pull Requests lösen

Nehmen wir an, Sie erstellen eine Pull-Anfrage, die Problem Nr. 234 behebt. Sie können den Text „behebt Problem Nr. 234“ in Ihre Anfragebeschreibung (oder an einer beliebigen Stelle in einem Änderungsanfragekommentar) einfügen. Danach wird das Problem durch das Zusammenführen der Pull-Anforderung „automatisch“ behoben. Cool, nicht wahr? Weitere Informationen hierzu finden Sie in der Dokumentation .

#5 Link zu Kommentaren

Mussten Sie schon einmal einen Link zu einem bestimmten Kommentar erstellen und wussten nicht wie? Diese Zeiten sind lange vorbei, denn ich verrate Ihnen ein Geheimnis: Um einen Link zu einem Kommentar zu erstellen, klicken Sie einfach auf das Datum/die Uhrzeit neben dem Titel. Schau, Gaearon hat jetzt ein Foto!

#6 Code-Link

Sie möchten also einen Link zu einer bestimmten Codezeile erstellen. Versuchen Sie in diesem Fall Folgendes: Klicken Sie in der geöffneten Datei auf die Zeilennummer neben dem gewünschten Code. Wow, sehen Sie? Die URL hat sich geändert, die Zeilennummer ist nun darin sichtbar! Wenn Sie die UMSCHALTTASTE gedrückt halten und auf eine andere Zeilennummer klicken, dann voilà! – Die URL ändert sich erneut und der Zeilenbereich wird hervorgehoben. Diese URL verweist nun auf diese Datei und diesen Zeilenbereich. Aber warten Sie, es verweist auf den aktuellen Thread. Was passiert, wenn sich die Datei ändert? In diesem Fall benötigen Sie wahrscheinlich einen dauerhaften Link zur Datei in ihrem aktuellen Zustand. Da ich sehr faul bin, habe ich einen Screenshot von allem gemacht: Übrigens, was URLs angeht...

#7 GitHub-URL als Befehlszeile verwenden

Die Navigation durch GitHub über die Benutzeroberfläche ist sehr komfortabel organisiert. Um zu einem bestimmten Ort zu gelangen, ist es manchmal jedoch schneller, ihn einfach in die URL einzugeben. Wenn ich beispielsweise zu einem Zweig, an dem ich arbeite, gehen und sehen möchte, wie er im Vergleich zum Master abschneidet, kann ich einfach /compare/branchname nach dem Repository-Namen eingeben. Dadurch komme ich zur Diff-Seite für diesen Zweig: Das sind aber Unterschiede zum Master-Branch, aber wenn ich vorher mit dem Integration-Branch gearbeitet habe, kann ich in der URL /compare/integration-branch...my-branch eingeben Für Hotkey-Liebhaber: STRG+L oder CMD+L bewegt den Cursor zur URL-Leiste (zumindest in den Browsern Chrome und Firefox). In Kombination mit der automatischen Vervollständigung des Browsers erleichtert dies die Navigation zwischen Zweigen erheblich. Profi-Tipp: Navigieren Sie mit den Pfeilen durch die Vorschläge zur automatischen Vervollständigung von Chrome und drücken Sie UMSCHALT+ENTF, um Elemente aus dem Verlauf zu entfernen (z. B. nach dem Zusammenführen eines Zweigs). (Ich weiß nicht, ob es einfacher wäre, diese Tastenkombinationen zu lesen, wenn ich darin ein Leerzeichen einfüge, wie z. B. UMSCHALT + ENTF. Aber technisch gesehen gehört „+“ nicht dazu, daher gefällt mir diese Option nicht. Sie ist es Wegen solchen Dingen schlafe ich nachts nicht, Rhonda.)

#8 Erstellen Sie Listen für Probleme

Möchten Sie ein Kontrollkästchen in Ihrer Problembeschreibung? Und möchten Sie, dass eine praktische Leiste wie „2 von 5“ angezeigt wird, wenn Sie ein Problem aus der Liste anzeigen? Kein Problem! Sie können interaktive Kontrollkästchen mit der folgenden Syntax erstellen:

• [ ] Bildschirmbreite (Ganzzahl)
• [x] Unterstützung durch Servicemitarbeiter
• [x] Unterstützung abrufen
• [ ] CSS-Flexbox-Unterstützung
• [ ] Benutzerdefinierte Elemente

Syntax: Leerzeichen, Bindestrich, Leerzeichen, öffnende eckige Klammer, Leerzeichen (oder x), schließende eckige Klammer, Leerzeichen und einige Wörter. Danach können Sie diese Schaltflächen tatsächlich aktivieren/deaktivieren! Aus irgendeinem Grund kommt mir das wie eine Art technische Magie vor. Sie können die Kästchen ankreuzen! Und gleichzeitig ändert sich der Originaltext! Es ist beängstigend, darüber nachzudenken, was ihnen als nächstes einfallen wird. Oh, und wenn dieses Problem im Projektfenster auftritt, wird der Fortschritt dort auch angezeigt: Wenn Sie nicht verstehen, was ich mit „Projektpanel“ meine, lesen Sie weiter unten. Nur ein paar Zentimeter tiefer auf dieser Seite.

#9 Projektpanels in GitHub

Für große Projekte habe ich immer Jira verwendet. Und für meine persönlichen Projekte habe ich immer Trello verwendet. Mir gefallen beide Tools sehr gut. Als ich vor ein paar Wochen erfuhr, dass GitHub direkt auf der Registerkarte „Projekte“ des Repositorys eine eigene Option anbietet , dachte ich, es wäre sinnvoll, die Aufgaben, mit denen ich bereits arbeite, in Trello zu duplizieren. Hier ist nichts Lustiges. Und jetzt das Gleiche im GitHub-Projekt: Nach und nach gewöhnen sich Ihre Augen an das kontrastarme Bild Aus Gründen der Geschwindigkeit habe ich alle oben genannten Punkte als Notizen hinzugefügt, was bedeutet, dass es sich nicht um „echte“ GitHub-Probleme handelt. Aber die Stärke des Issue-Managements in GitHub liegt in seiner Integration mit dem Rest des Repositorys – daher ist es wahrscheinlich besser, vorhandene Issues aus dem Repository zum Dashboard hinzuzufügen. Klicken Sie oben rechts auf „Karten hinzufügen“ und finden Sie heraus, was Sie hinzufügen möchten. Hier kommt die spezielle Suchsyntax zum Einsatz : Geben Sie beispielsweise is:pr is:open ein und Sie können jede offene Pull-Anfrage auf das Panel ziehen, oder label:bug , wenn Sie einige Fehler beheben müssen. Sie können auch bestehende Notizen in Issues umwandeln. Und schließlich fügen Sie das vorhandene Problemformular im rechten Bereich zum Projekt hinzu. Es wird in die Triage-Liste dieses Projektfensters aufgenommen, sodass Sie auswählen können, in welche Spalte Sie es einfügen möchten Wenn sich die Beschreibung einer „Aufgabe“ im selben Repository befindet wie der Code, der diese Aufgabe implementiert, ist das sehr (sehr) praktisch. Das bedeutet, dass Sie in vielen Jahren in der Lage sein werden, Git Blame auf einer Codezeile auszuführen und das gesamte Problem herauszufinden, das zu dieser Zeile geführt hat, ohne alles in Jira/Trello oder anderswo aufspüren zu müssen.

Mängel

In den letzten drei Wochen habe ich damit experimentiert, alles in GitHub statt in Jira zu erledigen (an einem kleinen Projekt, eine Art Kanban-Stil) und es gefällt mir. Aber ich kann mir das nicht für ein Scrum-Projekt vorstellen, bei dem Entwicklungsgeschwindigkeit und dergleichen richtig bewertet und berechnet werden müssen. Die gute Nachricht ist, dass GitHub-Projekte so wenige „Besonderheiten“ haben, dass der Wechsel auf ein anderes System nicht viel Zeit in Anspruch nehmen wird. Probieren Sie es also aus und sehen Sie, wie sehr es Ihnen gefällt. Ich weiß nicht, wie wichtig das ist, aber ich habe von ZenHub gehört und es vor 10 Minuten zum ersten Mal geöffnet. Es handelt sich im Wesentlichen um eine Erweiterung von GitHub, mit der Sie Probleme bewerten und „Epics“ und Abhängigkeiten erstellen können. Es gibt Diagramme zur Entwicklungsgeschwindigkeit und zum Burnout; Es sieht so aus, als wäre es einfach eine erstaunliche Sache. Weiterführende Literatur: GitHub-Dokumentation zu Projekten.

#10 Gwiki

Für eine unstrukturierte Gruppe von Seiten – wie Wikipedia – ist das GitHub-Wiki (das ich im Folgenden nur noch Gwiki nennen werde) großartig. Für einen strukturierten Satz von Seiten – zum Beispiel wie Ihre Dokumentation – nicht so sehr. Es gibt keine Möglichkeit anzugeben, dass „diese Seite ein untergeordnetes Element dieser Seite ist“; es gibt keine so praktischen Dinge wie die Schaltflächen „Nächster Abschnitt“ und „Vorheriger Abschnitt“. Hänsel und Gretel würden sich hier definitiv verirren, denn auch hier gibt es keine „Breadcrumbs“ (spezielle Debugging-Operatoren – ca. trans.). (Anmerkung des Autors: Haben Sie diese Geschichte gelesen ? Sie ist einfach unmenschlich. Zwei junge Schläger töten eine arme, hungrige alte Dame und verbrennen sie bei lebendigem Leibe in ihrem eigenen Ofen . Und hinterlassen natürlich ein völliges Durcheinander, das niemand verstehen kann. Ich denke, das ist der Grund Heutzutage sind junge Leute so sensibel – Geschichten, die Kindern heutzutage vor dem Schlafengehen vorgelesen werden, sind nicht grausam genug!) Und weiter – um Gwiki wirklich auszuprobieren, habe ich ein paar Seiten von NodeJS als Wiki-Seiten eingegeben und dann eine benutzerdefinierte erstellt Seitenleiste, um die tatsächliche Struktur der Site zu simulieren. Diese Seitenleiste ist immer vorhanden, auch wenn die aktuelle Seite nicht hervorgehoben ist. Die Links müssen manuell gepflegt werden, aber insgesamt funktioniert alles einwandfrei. Wenn Sie möchten, können Sie einen Blick darauf werfen : Dies kann kaum mit etwas wie GitBook (das in der Redux- Dokumentation verwendet wird ) oder einer maßgeschneiderten Website konkurrieren. Aber das sind schon gut 80 % und in Ihrem Repository ist alles richtig. Ich bin einfach ein Fan davon. Ich schlage vor, dass es sinnvoll ist, bei Gwiki zu bleiben, wenn Ihnen die einzelne README.md-Datei entwachsen ist und Sie mehrere verschiedene Seiten für Benutzerhandbücher oder eine detailliertere Dokumentation benötigen. Wenn Sie der Mangel an Struktur/Navigation stört, gehen Sie zu etwas anderem über.

#11 GitHub-Seiten

Möglicherweise wissen Sie bereits, dass GitHub Pages zum Hosten einer statischen Website verwendet werden kann. Und wenn Sie es nicht wussten, dann wissen Sie es jetzt. Dieser Abschnitt ist jedoch einem spezifischeren Thema gewidmet: der Verwendung von Jekyll zum Erstellen einer Website. In seiner einfachsten Form kann GitHub Pages + Jekyll die Datei README.md mit einem gut aussehenden Theme rendern. Schauen Sie sich zum Beispiel meine Readme-Seite von about-github an : Wenn Sie auf die Registerkarte „Einstellungen“ für diese GitHub-Site klicken, aktivieren Sie GitHub-Seiten und wählen Sie das Jekyll-Design aus ... Dann erhalten wir eine Seite im Stil des Jekyll-Themas : Anschließend können Sie eine vollständige statische Site erstellen, die hauptsächlich auf leicht bearbeitbaren Markup-Dateien basiert und GitHub im Wesentlichen in ein CMS verwandelt. Obwohl ich das noch nicht wirklich verwendet habe, werden Websites auf diese Weise mit dem Bootstrap-Framework und React erstellt, also ist daran nichts auszusetzen. Ich stelle fest, dass Ruby auf dem lokalen Rechner laufen muss (Windows-Benutzer werden hier verständnisvolle Blicke austauschen und in die andere Richtung gehen, macOS-Benutzer werden sagen: „Was ist das Problem, wohin gehst du? Ruby ist eine universelle Plattform! Es gibt auch ein GEMS Paketverwaltungssystem!“) (Es ist auch erwähnenswert, dass „Aggressive oder bedrohliche Inhalte oder Verhaltensweisen“ auf GitHub-Seiten nicht erlaubt sind, sodass Sie Ihre Version der Hänsel-und-Gretel-Geschichte dort nicht veröffentlichen können.)

Meiner Meinung

Je mehr ich mich mit der Kombination aus GitHub Pages + Jekyll (für diesen Artikel) befasste, desto seltsamer kam mir die ganze Idee vor. Die Idee, „mit minimalem Aufwand eine eigene Website zu erstellen“, ist großartig. Um daran arbeiten zu können, benötigen Sie jedoch weiterhin die aktuelle Version auf dem lokalen Computer. Und für etwas so „Einfaches“ gibt es zu viele Befehlszeilenbefehle. Ich überflog die sieben Seiten im Abschnitt „Erste Schritte“ und hatte das Gefühl, dass das Einzige, was daran einfach war, ich selbst war . Und ich habe noch nicht einmal die einfache Syntax für die Hauptseite oder die Grundlagen eines einfachen „Templating-Mechanismus basierend auf der Liquid-Sprache“ herausgefunden. Ich schreibe lieber selbst eine Website! Ehrlich gesagt bin ich ein wenig überrascht, dass Facebook dies für die React-Dokumentation verwendet, obwohl sie ihre Hilfesystemseiten wahrscheinlich jeden Tag mit React erstellen und als statische HTML-Dateien vorrendern könnten . Sie müssen lediglich einen Weg finden, vorhandene Markup-Dateien so zu empfangen, als kämen sie vom CMS. Was ist, wenn...

#12 GitHub als CMS verwenden

Nehmen wir an, wir haben eine Website mit Text, möchten diesen Text jedoch nicht als HTML-Markup speichern. Stattdessen möchten wir Textblöcke an einem Ort speichern, der von Nicht-Entwicklern problemlos bearbeitet werden kann. Vorzugsweise mit einer Versionierungsoption. Vielleicht sogar mit einer Art Peer-Review-Verfahren. Ich schlage Folgendes vor: Verwenden Sie die im Repository gespeicherten Markup-Dateien, um den Text zu speichern. Und verwenden Sie auf der Clientseite eine Komponente, die diese Textteile abruft und auf der Seite anzeigt. Ich bin ein Fan von React, daher ist hier ein Beispiel einer richtigen <Markdown>-Komponente, die bei gegebenem Pfad zu einer Markdown-Datei diese extrahiert, analysiert und als HTML rendert.

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)}} />
      );
    }
}

(Ich verwende hier das mit npm markierte Paket , um Markup in HTML zu analysieren.) Die URL verweist auf mein Beispiel-Repository, das Markup-Dateien im Verzeichnis /text-snippets enthält . (Sie können zum Abrufen von Inhalten auch die GitHub-API verwenden , aber ich bezweifle, dass Sie das benötigen.) Sie könnten eine solche Komponente wie folgt verwenden:

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>
);

GitHub fungiert nun also gewissermaßen als Ihr CMS für die Textteile, die Sie hosten möchten. Das obige Beispiel ruft das Markup erst ab, nachdem die Komponente im Browser geladen wurde. Wenn Sie eine statische Site benötigen, müssen Sie diese auf dem Server rendern. Gute Nachrichten! Nichts hindert Sie daran, alle Markup-Dateien auf dem Server abzurufen (mit der von Ihnen bevorzugten Caching-Strategie). Wenn Sie sich für diesen Weg entscheiden, ist es sinnvoll, die GitHub-API zu verwenden, um eine Liste aller Markup-Dateien in einem Verzeichnis zu erhalten. Bonus – GitHub-Dienstprogramme! Ich nutze die Octotree Chrome- Erweiterung schon seit einiger Zeit und empfehle sie Ihnen. Nicht ohne Vorbehalte, aber ich empfehle es trotzdem. Auf der linken Seite wird ein Bereich mit einer Baumansicht des Repositorys angezeigt, das Sie durchsuchen. Und durch dieses Video habe ich etwas über Octobox erfahren , das mir bisher ebenfalls ein sehr gutes Dienstprogramm zu sein scheint. Dies ist der Posteingang für Ihre GitHub-Probleme. Das ist alles, was Sie über ihn wissen müssen. Apropos Farben: Alle oben genannten Screenshots habe ich in einem hellen Thema gemacht, um Sie nicht zu erschrecken. Aber wenn ich bei allem anderen dunkle Farben bevorzuge, warum sollte ich mich dann mit dem totenbleichen GitHub abfinden? Hier habe ich eine Kombination aus der Stylish- Erweiterung für den Chrome-Browser (der Themes auf jede Website anwenden kann) und dem GitHub Dark- Stil verwendet . Und für den Anfang das dunkle Design der GitHub-Entwicklertools (integriert, Sie müssen es nur aktivieren) und das Atom One Dark- Design für Chrome.

Bit Bucket

Streng genommen ist es hier nicht ganz angebracht, aber ich kann einfach nicht anders, als Bitbucket zu erwähnen. Vor zwei Jahren habe ich ein Projekt gestartet und einen halben Tag damit verbracht, das beste Git-Hosting auszuwählen. Bitbucket gewann also mit deutlichem Vorsprung. Ihre Code-Review-Pipeline ist der Konkurrenz weit voraus (das war lange bevor GitHub überhaupt das Konzept eines Reviewers hatte). Seitdem hat GitHub auch Rezensionen erhalten. Leider hatte ich im letzten Jahr keine Gelegenheit, Bitbucket zu nutzen – vielleicht sind sie in etwas wieder vorangekommen. Daher empfehle ich denjenigen, die für die Auswahl eines Git-Hosting-Dienstes verantwortlich sind, auch auf Bitbucket zu achten.

Abschluss

Das ist alles! Ich hoffe, dass ich Ihnen mindestens drei Dinge sagen konnte, die Ihnen bisher unbekannt waren. Und ich hoffe auch, dass Sie beim Lesen meines Artikels eine gute Zeit hatten.