Blog >>> Crew_

Crew Hackathon XVII

Der vergangene Hackathon fand zwar noch im letzten Jahr statt, wir wollen euch die Ergebnisse trotzdem nicht vorenthalten. Wir haben vier spannende Themen bearbeitet!
03.01.2023
Phil-Bastian Berndt
Phil-Bastian Berndt
Entwickler, Gründer
Crew Hackathon XVII

Näheres zum Ablauf unserer Hackathons ist in Ausgabe XIV, XIII oder XII nachzulesen. Wir steigen hier direkt in die Themen ein:

Tabler Icons als eigenes Elixir-Package

  • Team: Lennart & Flo
  • Ziel: npm-Abhängikeit auf Tabler Icons entfernen

Wir arbeiten täglich mit Open-Source-Software. Entsprechend schauen wir uns gerne um und sind ebenfalls daran interessiert, eigene Arbeit öffentlich zu machen. Schon seit längerer Zeit benutzen wir in unseren Projekten Tabler Icons. Dabei handelt es sich um ein Paket von über 3.000 frei zugänglichen SVG Icons. Um die Icons in unseren Elixir-Projekten nutzen zu können, hatten wir uns zuvor eine eigene Lösung gebaut, welche die Icons zur Compile Time aus den node_modules lädt und intern als Phoenix.Component zur Verfügung stellt. Dies hat den Nachteil, dass wir Tabler Icons immer explizit als Abhängigkeit in unseren Projekten hinzufügen müssen.

In diesem kleinen Projekt haben wir ein eigenständiges Elixir-Package entwickelt, welches die Icons ohne weitere Abhängigkeiten nutzbar macht. Inspiriert wurden wir von ex_heroicons. Dabei handelt es sich um ein Paket, welches die Heroicons kapselt und als HEEX-Komponenten bereitstellt.

Zunächst haben wir einen Mix-Task gebaut, der alle SVGs der Tabler Icons von einer bestimmten Version als .zip in das Projekt lädt, entpackt und in den /assets Ordner kopiert (siehe). Anschließend haben wir einen weiteren Mix-Task erstellt, der diese Icons mit Hilfe eines Template Scripts in eine .ex Datei schreibt (siehe). Hier fügen wir dynamisch Dokumentation und Pfade der SVGs hinzu. Nun kann man über diese Datei jedes Icon als Funktion aufrufen und erhält eine entsprechendes Phoenix.Component, welche in HEEX-Templates eingebaut werden kann. Ebenfalls können beliebige HTML-Attribute an die Funktion übergeben werden.

Das Paket haben wir auf hex.pm veröffentlicht.

esbuild statt Laravel Mix (Webpack)

  • Team: Oli & Phil
  • Ziel: Optimierung des Projekt-Workflows durch Einsatz von esbuild

Der technologische Wandel und die stetigen Fortschritte in sämtlichen Bereichen der Softwareentwicklung begleitet uns bei unserer täglichen Arbeit. Durch diese kontinuierliche Veränderung müssen wir unsere eingesetzten Werkzeuge regelmäßig überprüfen. Das Ziel bei diesem Thema war für Sourceboat somit ganz eigennützig und ging darum, unser allgemeines Projekt-Setup zu verschlanken und schneller zu machen.

Dabei haben wir uns besonders darauf konzentriert, den Einsatz des Paketmanager npm in eigenen Elixir-Projekten so weit wie möglich herunterzufahren und wenn möglich sogar ganz zu entfernen. Orientierung fanden wir dabei am aktuellsten Boilerplate-Setup vom Phoenix Framework, wo ebenfalls komplett auf npm verzichtet wird.

Als Ergebnis konnten wir Laravel Mix und somit Webpack komplett durch den performanteren Bundler esbuild ersetzen. Die Abhängigkeit Tailwind CSS laden wir direkt über den Elixir eigenen Package Manager Hex.

Auch wenn npm noch nicht komplett entfernt ist, haben wir mit dieser Hackathon-Session einen rund zehnfachen Geschwindigkeitsvorteil gegenüber der vorherigen Version erarbeitet. Der Projekt-Workflow folgt damit modernsten Best Practices und zieht mit den neusten Fortschritten gleich.

Changelog Generator

  • Team: Kevin & Sebastian
  • Ziel: automatische Generierung von Changelogs

In allen Projekten, an denen wir arbeiten, gibt es ein Changelog mit allen Änderungen der entsprechenden Release-Version. Sobald wir ein neues Release in der Produktivumgebung veröffentlichen, wird das Changelog erweitert. Diese Anpassungen geschahen in den meisten Projekten händisch und beinhalten in der Regel eine Liste der Merge Requests, welche im Milestone des Releases enthalten sind. Die Automatisierung der Erstellung dieser Liste erschien uns sinnvoll.

Wir haben daher ein Elixir-Skript geschrieben, welches nach dem letzten Git-Tag im Projekt sucht und alle Merge Requests des dazugehörigen Milestones auflistet. Durch Labels an den Merge Requests werden die Einträge der Liste direkt in Kategorien (Guidelines) geordnet. Um das händische Kopieren dieser Liste in die entsprechende Release-Beschreibung zu vermeiden, haben wir das Skript so erweitert, dass ein GitLab-Release erstellt, das Changelog als Beschreibung hinzufügt und mit dem entsprechenden Milestone verknüpft wird.

Das entsprechende Skript wird nun automatisch bei jedem Release durch die CI-Pipline ausgeführt, sodass in Zukunft niemand mehr händisch das Changelog pflegen muss.

Today I Learned

  • Team: Tristan & Mats
  • Ziel: Learnings konservieren & teilen

Wir lernen fast jeden Tag etwas dazu, was auch für andere Softwareentwickler:innen interessant sein kann. Um dieses Knowhow mit Anderen zu teilen, haben wir eine Art Mini-Blog entworfen, auf dem wir unser täglich gesammeltes Wissen veröffentlichen können. Im Gegensatz zu einem normalen Blogpost, der meist über 1.000 Wörter lang sein kann, besteht ein “Today I Learned” Post eher aus einer kurzen Erklärung und einem Code-Beispiel. Zudem werden die Inhalte auf Englisch verfasst. Wenn wir also etwas Neues gelernt haben, können wir das nun in kleinen “Today I Learned”-Posts mit anderen Entwickler:innen teilen. Die Inhalte findet ihr demnächst hier auf unserer Website.

Teilen @
Lust auf was Neues?
Aktuelle Stellenangebote >>>