Eine Seite für Frontend-Entwicklungskonferenzen (Erstellt mit 11ty auf Netlify)

Ich habe eine neue kleine Seite erstellt! Es ist eine Seite zur Auflistung kommender Konferenzen in der Welt des Front-End-Webdesigns und -entwicklungs. In den vergangenen Jahren (wie im Jahr 2017) hat Sarah Drasner diese entmutigende Aufgabe übernommen. Wir haben ein Formular für neue Konferenzbeiträge verwendet, aber es war immer noch eine ziemlich manuelle Aufgabe, im Grunde manuell einen Blogbeitrag zu bearbeiten. Ich wollte dies weiterhin tun, da ich es für wertvoll halte, eine einfache Referenzseite für Konferenzen in unserem Nischenbereich des Webs zu haben, aber ich wollte, dass die Seite Jahr für Jahr mit geringeren technischen Schulden im Wartungsaufwand weiterbestehen kann.

Also habe ich das getan!

Ich wollte es auf GitHub haben.

Also habe ich es dorthin gestellt. Ein Teil der Schönheit von GitHub ist, dass es die Idee der Zusammenarbeit durch Pull-Anfragen wirklich für jeden auf der Welt öffnet. Man benötigt ein GitHub-Konto, aber das ist kostenlos, und man muss Git zumindest auf einer geringen Ebene verstehen (was eine Hürde darstellt, die ich mit der Zeit lösen möchte), aber es lädt mehr zur Zusammenarbeit ein als etwas, das man einfach nur Leute bittet, Ihnen Inhalte und Ideen per E-Mail zu schicken.

Ich wollte den Inhalt in Markdown im Repository haben.

Das Front Matter-Format, das Markdown mit einigen Daten oben ist, ist ein so nützliches und zugängliches Format. Man benötigt fast keine Kenntnisse, nicht einmal HTML, um eine solche Datei erstellen/bearbeiten zu können.

Die eigentlichen Konferenzdaten im Repository zu haben bedeutet, dass Pull-Anfragen nicht nur für Design oder Features sind; häufiger werden sie für tatsächliche Konferenzdaten sein. Die Arbeit, diese Seite mit all den besten Konferenzen zu füllen, ist die Arbeit von uns allen, nicht nur von einer Person.

Zum Zeitpunkt des Schreibens gab es bereits 30 geschlossene Pull-Anfragen.

Ich habe 11ty verwendet, um die Seite zu erstellen.

11ty ist fast faszinierend einfach. Es sucht in einem Verzeichnis nach dem, was es verarbeiten oder in ein anderes Verzeichnis verschieben muss. Es unterstützt mein Lieblings-Templating-System out-of-the-box: Nunjucks. Plus Front Matter Markdown, wie ich oben erwähnt habe.

Ich konnte im Wesentlichen eine Karte gestalten, die die Daten anzeigt, die wir aus den Markdown-Dateien erhalten, und dann die Homepage der Seite erstellen, indem ich über diese Markdown-Dateien iteriere und die vorlagebasierte Karte anwende.

11ty basiert auf Node.js, also obwohl ich einige Momente der Lernkurve hatte, war es für mich angenehm zu arbeiten. Es gibt definitiv Konfigurationen, um die Dinge zu tun, die ich tun wollte. Zum Beispiel musste ich so eine "Sammlung" von Konferenzen erstellen, um darüber zu iterieren.

config.addCollection("conferences", function(collection) {
  let allConferences = collection.getFilteredByGlob("site/conferences/*.md");
  let futureConferences = allConferences.filter(conf => {
    return conf.data.date >= new Date();
  });
  return futureConferences;
});

Die Seite wird auf Netlify gehostet.

Ein Grund für die Verwendung von Netlify hier ist, dass es *unglaublich einfach* ist. Ich habe die Seite in Netlify erstellt, indem ich sie mit dem GitHub-Repository verbunden habe. Ich habe ihm gesagt, wie die Seite zu erstellen ist (es ist ein einzelner Befehl: eleventy) und wo sich die erstellten Seitendateien befinden (dist), und das war's. Tatsächlich ist das sogar Teil des Repos.

Nun, jedes Mal, wenn ich auf den Master-Branch pushe (oder einen Pull-Request in den Master akzeptiere), wird die Seite automatisch neu erstellt und bereitgestellt. Dauert nur Sekunden. Es ist wirklich erstaunlich.

Noch besser: Für jeden Pull-Request stellt Netlify sicher, dass zuerst alles in Ordnung ist.

Netlify ist also nicht nur extrem einfach zu bedienen, sondern ich bekomme auch viele Dinge kostenlos, wie die Tatsache, dass die Seite auf ihren CDNs usw. rasend schnell ist.

Ich bin auch begeistert, dass ich die Funktionen von Netlify hier kaum ausgeschöpft habe, sodass es noch viel zu entdecken gibt, was ich im Laufe der Zeit tun werde. Und das habe ich vor!

Ich verwende Zapier, um die Seite jeden Tag neu zu erstellen.

Es gibt eine gewisse Zeitabhängigkeit bei dieser Seite. Der Sinn dieser Seite ist es, sie als Referenz für bevorstehende Konferenzen zu nutzen. Es ist weniger interessant, vergangene Konferenzen zu sehen (obwohl wir vielleicht in Zukunft ein durchsuchbares Archiv haben können). Ich mag die Idee, vergangene Konferenzen für die Startseite zu "rippen". Wenn dies PHP (oder was auch immer) wäre, könnten wir das zur Laufzeit tun, aber dies ist bewusst eine statische Seite. Etwas wie das zur Build-Zeit zu tun, ist keine große Sache (siehe den obigen Code-Schnipsel, der nur Konferenzen zurückgibt, die nach dem heutigen Datum liegen). Aber wir können nicht einfach auf Pull-Anfragen warten, um die Seite neu zu erstellen, noch möchte ich, dass es zu einer manuellen Sache wird, die ich jeden Tag erledigen muss.

Glücklicherweise ist das mit Zapier kinderleicht.

Phil Hawksworth ging einmal extrem weit und erstellte eine Uhr-Website, die jede Minute neu erstellt.

---

Diese Seite war nicht nur ein Experiment. Ich möchte sie weiterführen! Wenn Sie eine Konferenz veranstalten, bin ich mir ziemlich sicher, dass es nicht schadet, sie hinzuzufügen, fügen Sie Ihre hinzu, solange sie einen durchsetzbaren und umsetzbaren Verhaltenskodex hat und im Bereich des Front-End-Webdesigns und der Entwicklung angesiedelt ist.