Vor einiger Zeit habe ich eine Einführung in ein Standard-Frontend-Projekt gegeben und dabei mit Blick auf die package.json einige Dinge etwas vereinfacht. In diesem Beitrag möchte ich daher einige dieser Details genauer zeigen. Übrigens: zu diesem Thema habe ich vor ein paar Jahren auch etwas im Blog der codecentric geschrieben. Der Artikel ist größtenteils noch aktuell und wird durch diesen Beitrag ergänzt.

Für diesen Blog möchte ich ein paar Dinge aus dem JavaScript Umfeld zusammenfassen, die mir immer wieder begegnen und stellenweise auch mal für Probleme sorgen. Prototypen sind etwas, dass immer mal wieder für Verwirrung sorgt und hier möchte ich versuchen, dass ganze verständlich zu erklären.

JavaScript ist eine prototypenbasierte Programmiersprache. Das bedeutet also zunächst, dass JavaScript Objektorientierung unterstützt. Laut Definition allerdings eine "ohne Klassen" (was nicht stimmt, mehr dazu später im Artikel).

Während in anderen Programmiersprachen Objekte durch die Instanziierung einer Klasse erzeugt werden (x = new Foo("bar")), wird in prototypenbasierten ein Objekt durch das Klonen eines bereits existierenden Objekts instanziiert. Klonen bedeutet, dass der Klon alle Eigenschaften des Originals hat und nutzen kann.

In meinem letzten Beitrag habe ich bewusst noch ein paar Dinge unterschlagen, die im Umgang mit this hilfreich sein können: bind, apply und call. Zum einen war der Artikel schon gefühlt lang genug und außerdem nutze ich die drei Methoden (so gut wie) nie. Da mich Tobias aber darauf hingewiesen hat, hole ich das Ganze hier nach.

Gerade als ich mit JavaScript losgelegt habe, habe ich versucht this in meinem Code zu vermeiden. Ich sage nur undefined is not a function. Zu beliebig wirkte das Verhalten, verglichen mit anderen Sprachen, die ich damals kannte.

Da ich immer mal wieder gefragt werde, wie das Ganze denn funktioniert, dachte ich mir, ich schreibe es hier mal zusammen.

In meinem Eleventy Tutorial habe ich ja bereits gezeigt, wie man einen Blog mit Eleventy aufsetzen kann und auch, wie man CSS in eine Eleventy Webseite integieren kann.

Da ich gerne mit Tailwind CSS arbeite, möchte ich dieses natürlich auch in meinen privaten Projekten einsetzen und habe hier auch einige Setups ausprobiert. Die meisten setzen hierbei PostCSS und TailwindCSS "klassisch" auf und passen dann die Skripte in der package.json so an, dass erst die Eleventy Seite gebaut wird und dann das passende CSS generiert wird. Das kann man so tun, machte in meinen Augen aber das Setup in der package.json komplizierter.

Meine Alternative nutzt Eleventy Bordmittel, um das CSS zu generieren und fügt sich mit wenigen Zeilen Code in die bestehende Konfiguration ein.

Einer der Gründe, weshalb ich ein großer Fan von Eleventy bin, ist die Möglichkeit, Templates mit beliebigen Daten anzureichern und daraus Seiten zu generieren. Früher habe ich Seiten normalerweise mit Wordpress erstellt, da ich es kannte und damit meine Probleme lösen konnte. Als ich dann anfing, einen Podcast zu veröffentlichen, brachte mich Christian (@derschepp) auf die Idee, mit einem static-site generator meine Webseite zu veröffentlichen, da es hier ja möglich sei aus externen Daten, wie einem RSS-Feed, die Webseite zu erzeugen.

Eleventy (11ty) ist schon seit einigen Jahren mein Tool der Wahl, wenn es um die Erstellung von Webseiten geht. Dabei eignet sich Eleventy sowohl für eine einfache statische Seite, einen Blog wie diesen oder auch die Seite zu meinem Podcast Ready for Review. Das schöne ist, dass man hier recht schnell gute Ergebnisse erzielen kann und daher zeige ich in diesem Tutorial, die Grundlagen um einen Blog zu erstellen.

For developers, who are not working on the frontend, but would like to get at least an overview there.

In this article I will provide a first insight into a typical frontend project and thereby help you to orientate yourself there a little bit. Even if you see your focus in other areas of the application, you can't avoid the frontend from time to time. Fortunately, there are a few standards that you can use as a guide.

So we take a view how to set up an existing frontend application locally and then start, test or build it. In all steps there is the risk that it was of course solved a little differently in the respective project. In many cases this can be discussed, but we assume that the developers have their reasons. So if your project differs from what I write here, you'll have to ask your colleagues.

Für Entwickler:Innen, die nicht im Frontend aktiv sind, sich aber zumindest einen Überblick dort verschaffen wollen.

In diesem Artikel möchte ich einen ersten Überblick über ein typisches Frontend-Projekt geben und dabei helfen, sich dort etwas zu orientieren. Auch wenn man seinen Schwerpunkt in anderen Bereichen der Anwendung sieht, kommt man hin und wieder nicht am Frontend vorbei. Glücklicherweise gibt es hier ein paar Standards, an denen man sich orientieren kann.

Wir sehen uns also an wie man eine bestehende Frontend-Anwendung lokal einrichtet und dann auch starten, testen oder bauen kann. Bei allen Schritten besteht die Gefahr, dass es natürlich gerade im jeweiligen Projekt etwas anders gelöst wurde. In vielen Fällen kann man das sicher diskutieren, aber wir gehen mal davon aus, dass die Entwickler sich dabei was gedacht haben. Sollte Euer Projekt also davon abweichen, was ich hier schreibe, müsst ihr wohl mal bei den Kolleg:Innen nachfragen.