Okay, hallo. Zuerst ein kurzer Hinweis. Der Beamer funktioniert, der ist völlig in Ordnung.

Ich fand es gestern Nacht witzig noch einen kleinen Effekt einzubauen, weil es um Code geht und ich unbedingt einen Glitch drin haben wollte.

Insofern soll das so. Für die, die es interessiert, es ist ein Effekt mit Clip Paths und Blend Modes.

Es liegen fünf Bilder übereinander und über CSS-Animationen werden die gegenseitig verschoben.

Funktioniert also ohne JavaScript. Komme ich gleich nochmal drauf.

Effizienter Code. Es geht hier um Frontend.

Wenn ich hier eine Frontend Spezi sein sollte, für den habe ich vermutlich nicht so viele neue Sachen in dem Vortrag.

Das ist auch der Grund, warum die anderen Kollegen von den Referenten vermutlich alle in dem anderen Vortrag sind.

Richtig gewahl. Ansonsten zeige ich viele Beispiele aus der Praxis, was eben nicht richtig funktioniert.

Und sage dann jeweils was dazu.

Kurzvorstellungen gab es schon. Ich komme aus Dortmund, bin selbstständig.

Ich bin mit der Frontend Entwicklung. Ich helfe Leuten bei Drupal. Ich mache ein bisschen WordPress.

Die meisten Beispiele, die ich gleich bringe, kommen aus der Drupal-Welt.

Man sieht nur, was Drupal macht und was da hinten rauskommt. Die Beispiele werden dann trotzdem Frontend sein.

Ich war lange Zeit Redakteur bei der Screenguide, aber die Screenguide wurde vor ein paar Monaten eingestellt.

Deswegen habe ich jetzt Zeit, mit Freunden Podcasts zu machen.

Es geht um effizienten Code. Was ist effizienter Code? Das ist sehr breit gefasst.

Es gibt dieses Zitat von Ken Thompson.

One of my most productive days was throwing away one thousand lines of code.

Wenn es nur so einfach wäre, einfach nur den Code rauszuschmeißen.

Was ist effizienter Code? Man könnte auf die Idee kommen, effizient ist kurz.

Oder effizienter Code ist kommentierter Code. In erster Linie sollte der Code verständlich sein.

Es könnte darum gehen, dass man Bibliotheken einsetzt, damit man weniger Arbeit selbst hat.

Es könnte andersherum darum gehen, dass man möglichst wenig Bibliotheken einsetzt, damit man sich keine Abhängigkeiten schafft.

Es könnte bedeuten, dass das was man produziert möglichst zugänglich ist.

Zugänglich bedeutet, auf verschiedenen Geräten sichtbar, in verschiedenen Browserversionen und barrierefrei.

Es könnte bedeuten, dass es performant ist. Performant kann man auf zwei aller Weise verstehen.

Zum einen, wie schnell kommt das, was die Webseite ausliefert, überhaupt beim Endgerät an.

Oder man bezieht es auf den kleinen, selbst wie performant laufen zum Beispiel irgendwelche Animationen ab.

Man kann es noch breiter fassen und sagen, effizient ist alles, was innerhalb der Deadline fertig ist.

Oder effizient ist alles, was innerhalb des Budgets fertig wird.

Oder zusammengefasst, wieso funktioniert doch, gut ist.

Eine andere Zusammenfassung wäre für den Code, make it correct, make it clear, make it concise, make it fast.

In dieser Reihenfolge.

Für mich kommt es bei vielen Projekten darauf an, dass der Code vor allen Dingen wartbar ist.

Das hängt von der Größe des Projektes ab.

Wenn man nur so mittelständisches Unternehmen hat und dafür einmal eine Webseite macht und sich dann 2, 3 Jahre nichts daran rührt,

dann muss das aber nicht unbedingt wartbar sein, denn nach 3 Jahren schmeißt man das vielleicht sowieso in die Tonne

und macht es komplett neu.

Aber wenn man größere Projekte hat, an denen man langfristig was tut, muss man da alle paar Wochen dran.

Und dann sollte der Code wartbar sein, damit man sich noch zurechtfindet.

Die meisten Beispiele werden sich gleich da drum drehen.

Ich zeige also ein paar Beispiele aus der Praxis aus den letzten zwei Jahren.

Bei einigen Stellen kann man sich fragen, warum ist das immer noch so?

Das sollten Leute doch besser wissen, aber es kommt wieder und wieder vor.

Fangen wir an mit kürzeren Code.

Die Beispiele, die ich zeige, sind alle recht einfach.

Das ist eine einfache Vorschleife.

Die geht einfach nur 1000 Mal durch und würde 1000 Mal die dritte Zeile ausdrucken.

Das sind jetzt 4 Zeilen. Das ist so ein übliches Beispiel für kurzen Code.