Entwicklungsblog von ZEIT ONLINE
Kategorie:

Entwicklung

Block, Element, Modifier

Von 20. Januar 2015 um 10:26 Uhr

Das Schwierige an CSS ist, dass es so einfach ist. Obschon leicht erlernt, ist es jedoch schwer zu strukturieren und wirkt oft undurchschaubar. Findet man keinen sauberen Weg, seinen Code zu organisieren, wächst die Codemenge oft exponentiell zur Projektlänge an.

In Just Try and Do a Good Job schreibt Chris Coyier, dass er weder Namenskonventionen noch andere spezielle Methodiken nutzt, um sein CSS zu schreiben. Vielmehr versucht er mithilfe seiner Erfahrung und weniger Richtlinien, immer gute Arbeit (a good job) zu machen. Er schränkt dabei ein, dass er hauptsächlich alleine arbeitet und so seinen Stil leicht einhalten kann. Für Teams reicht die Arbeitsanweisung »Do a good job« selten aus. Zumal oft unterschiedliche Vorstellungen davon herrschen, was genau das denn bedeutet, trotz Coding Richtlinien.

Das Entwicklungsteam von ZEIT ONLINE hat hier viele, oft schmerzliche Erfahrungen gesammelt. Zu Zeiten des Relaunch 2009 hatten wir für uns einen CSS-Schreibstil entwickelt, der unseren damaligen Arbeitsumständen sehr entgegen kam und am damaligen state of the art orientiert war. Leider wissen wir heute, dass wir damit CSS gebaut haben, das zwar gut funktioniert, aber sehr schwierig zu warten ist. Die Weiterentwicklung der Seite führt zu immer mehr Code. Da nie ganz klar ist, welcher Code wo noch in Gebrauch ist, ist es gefährlich, eigentlich überflüssigen Code zu entfernen. Der sogenannte code bloat kann die Website-Performance aber schnell verschlechtern. Wir haben natürlich immer wieder an dem Problem gearbeitet, aber die gewünschten Performance-Werte letztlich nie erreichen können – oder auch nur unsere Entwickler besonders entlasten.

Aus diesem Grund haben wir uns für die Einführung der sehr rigiden Namenskonvention BEM entschieden. BEM steht für Block, Element, Modifier, was schon die drei Entitäten beschreibt, in die wir unseren CSS-Code in Zukunft unterteilen. Blöcke sind unabhängige Einheiten in einer Website, die für sich allein stehen können und einen Teil der Nutzeroberfläche repräsentieren. Dies kann beispielsweise ein Logo, ein Suchformular oder ein Menü sein. Blöcke können weitere Blöcke enthalten, was sie von den Elementen unterscheidet. Diese sind für sich allein gestellt nutzlos, funktionieren nur in ihrem Block. Zu guter Letzt gibt es noch Modifikatoren. Das sind zusätzliche Klassen, die an Blöcke oder Elemente geschrieben werden, um unterschiedliche Status abzubilden. Alle Blöcke, Elemente und die Modifikatoren werden durch Klassen repräsentiert, die per Benennung grob ihre Aufgabe und genau ihre Beziehung zueinander ausdrücken. Im Stylesheet wird ausschließlich mit diesen Klassen gearbeitet, alle anderen Selektoren sind quasi verboten.

The one “rule”ish thing I really believe in: keep your selector specificities fairly low and flat across your whole project. — Chris Coyier

Die Namenskonvention mit den doppelten Unterstrichen oder Minuszeichen – die man durchaus nach seinen Vorstellungen ändern kann – und das zweifelsohne hohe Aufkommen an Klassen-Attributen im HTML wirken zunächst etwas ungewöhnlich. Die einzelnen Blöcke werden dadurch voneinander völlig unabhängig. Sie können leicht und sicher editiert werden. Die Spezifität aller Elemente ist auf zwei Stufen festgezurrt, die Kaskade damit außer Kraft gesetzt. Aber gerade das hilft; vor allem in den ganz großen Projekten, in denen nicht mehr jeder jeden Codeblock kennt. Was also zunächst nach zusätzlicher Arbeit aussieht, kommt der Realität der Entwicklung und vor allem der Weiterentwicklung einer Nachrichtenseite sehr entgegen. Ziel ist es letztendlich, Code zu schreiben, der gut und sicher zu modifizieren ist. Diese Anforderung ist durch die vollständige Modularisierung und die flache Hierarchie der Klassen in BEM erfüllt.

Den Aufwand, den der Einsatz einer solchen Namenskonvention mit sich bringt, fangen wir durch Tools wie Sass (siehe auch BEM-Notation) oder grunt zumindest zum Teil wieder ab. In der Automatisierung liegt dann auch die Möglichkeit, den Code laufend zu prüfen und zu messen. Und nur wer misst, kann seine Performance erhöhen.

Nico Brünjes ist Teamleiter Frontend bei ZEIT ONLINE.

Kategorien: Entwicklung

Lieber authentisch als perfekt

Von 20. November 2014 um 11:04 Uhr

Das Licht ist gedämpft, ein DJ spielt Lounge-Musik. Menschen, vorwiegend Männer in Hipsterkluft, stehen murmelnd in Gruppen beisammen und halten sich an ihren Getränken fest. Eine aufsteigende Tribüne nimmt den großen Saal im Berliner Admiralspalast fast komplett ein, vorne auf der Leinwand grüßt ein Abbild des Organisators als Comicfigur. Alles erinnert ein wenig an Kino.
Doch die Getränke sind nicht alkohol- sondern koffeinhaltig, es ist 10 Uhr morgens und die Besucher sind nicht nur zum Vergnügen da. Es geht um die Optimierung von Code. Es ist der erste Tag der Beyond Tellerrand, einer Konferenz für Webdesigner und -entwickler.

btfconf-ct

Infostand der c’t auf der Beyond Tellerrand

Allerdings ist der erste Vortrag des Tages doch vergnüglich. Alles was man braucht, um die Sache spannend zu machen, sind einige Laser, beziehungsweise einige Laser mehr. Mit diesen realisiert der Brite Seb Lee-Delisle eindrucksvolle Spiel- und Klangexperimente. Das genügt vollkommen, um das Publikum nicht direkt nach dem Kaffee zur Club Mate greifen zu lassen.

Das, was Lee-Delisle vorstellt, ist bunt, schrill und sehr unterhaltsam, um so erstaunlicher das Ende des Vortrages. Dort fallen plötzlich Sätze wie “There is no such thing as natural talent” und “there is always someone better than you”. Zum Rest des Vortrags, der unerschöpfliche Kreativität wie die einfachste Sache der Welt wirken ließ, passt das nur bedingt. Es macht nachdenklich, dass jemand, der Kunstprojekte programmiert und sich jenseits der ausgetretenen Programmierpfade bewegt, den Druck der Branche dennoch zu empfinden scheint.

Die Webbranche, in der Lee-Delisle und höchstwahrscheinlich die Mehrzahl der anwesenden Besucher agiert, ist anspruchsvoll. Oft sind Dinge, die man neu dazugelernt hat, zu dem Zeitpunkt, an dem man sie richtig versteht, schon wieder veraltet. So veraltet, dass man sich fast nicht einmal mehr zuzugeben traut, sie je gelernt zu haben. Solche einst gehypten und nun totgesagten Technologien gibt es viele. Ein Beispiel dafür ist Flash, eine Technik, die Webseiten einst im großen Stil zum Blinken und Klingen und damit das Multimediaerlebnis ins vorher überwiegend dröge Internet gebracht hat. Mittlerweile hat es etwas Anrüchiges, Flash als ernsthafte Option für eine Webseite auch nur in Erwägung zu ziehen. Inzwischen gibt es weit bessere und einfachere Möglichkeiten für beeindruckende Webeffekte, ob sie nun notwendig sind oder nicht.

Etwas verschämt gibt es auch in einem Vortrag auf der Beyond Tellerrand Anspielungen auf diese ehemaligen Flash-Entwickler, von denen einige unter den Zuschauern sein dürften. Der Rest hat das Glück gehabt, einmal etwas mit gutem Gewissen ausgesessen zu haben.

Zu entscheiden, wann man sich den Luxus des Aussitzens gönnen kann, ist allerdings nicht leicht. Dies wird in der Konferenzpause deutlich, in der im Vorraum die Getränkebecher aufgefüllt werden können.  Nur wenig offen zur Schau gestelltes Unwissen ist zu hören. Die Frage: “Wie, das kennst du etwa nicht?” scheint hier so gefürchtet zu sein wie Alkoholknappheit auf der Firmenweihnachtsfeier. Zu Recht, denn man will einem Gegenüber, der eine solche Frage genüsslich stellt, keine Genugtuung gönnen.

Zum Glück folgt der nächste Vortrag, gehalten von der US-amerikanischen Webdesignerin Zoe Mickley Gillenwaters. Er trägt den Titel CSS lessons learned the hard way in dem sie ausführlich über Fehler bei ihrer Arbeit mit der Stylingsprache CSS berichtet. Gillenwaters weist darauf hin, wie wichtig diese Fehler für ihr Fortkommen waren, und macht deutlich, wie wichtig es sein kann, Fragen zu stellen. Auch dann, wenn damit vielleicht Wissenslücken eingestanden werden.

Auch Art Director und Grafikdesigner Andrew Clarke versucht, dem Publikum mehr Selbstvertrauen zu raten. Clarke liegt etwas über dem Altersdurchschnitt der Twenty bis Thirtysomethings und zitiert auf seinen Folien George Orwell, aber auch sich selbst. Was beim Hörer hängenbleibt, ist sein Appell, weniger in Trends und Schablonen zu denken – mehr Authentizität statt mehr Perfektionismus. Clarke ist einer der Initiatoren der Geek Mental Help Week, einer durch Beiträge verschiedener Autoren gestützten Webaktion, die sich kürzlich mit psychischen Problemen von Entwicklern und Designern auseinandersetzte.

Es ist ein Bewusstsein für den Leistungsdruck in der Webbranche entstanden – dieser Eindruck entsteht bei der Konferenz. Entwickler und Designer sind des “schneller, höher, weiter” der digitalen Revolution müde geworden.
Den letzten Vortrag mit dem  schlichten Titel Design and Happiness hält Stefan Sagemeister. Am Ende singt der gesamte Saal die Ode an die Freude.

Anika Szuppa ist Frontendentwicklerin bei ZEIT ONLINE.

Kategorien: Entwicklung

Einstieg ins Programmieren für Jugendliche mit Python und Blender

Von 12. September 2013 um 10:34 Uhr

ZEIT ONLINE war am vergangenen Wochenende im Veranstaltungsraum der Berliner Redaktion Gastgeber für den vom Python Software Verband (PySV) veranstalteten Workshop “Pymove3D Python Kurs Für Einsteiger”, der sich an Jugendliche im Alter von 13 bis 21 Jahren richtete.

schueler_programmier_workshop_zeit-online

Im ersten Teil wurden allgemeine Programmiergrundlagen vermittelt: Variablen, Datentypen, Operatoren, For-Schleifen, If-Bedingungen, Funktionen. Python – übrigens auch eine Programmiersprache für zentrale Dienste der ZEIT ONLINE Architektur – gilt als eine aufgrund ihrer eleganten Syntax einfach zu erlernende Sprache. Zudem ist Python eine gute Wahl für einen Einsteiger-Workshop, weil die Schnittstellen zum 3D-Renderingprogramm Blender Python verstehen. So ist es möglich, einfache Blender-Objekte (sichtbar als einfache geometrische Figuren) programmatisch zu erstellen, zu bewegen oder einzufärben. Auf diese Weise konnten dann im zweiten Teil des Workshops die im ersten Teil erworbenen Grundlagen praktisch und anschaulich angewendet werden.

Bildschirmfoto 2013-09-12 um 10.27.34

Wie schon Python eignet sich Blender sowohl zum Lernen auf einfachem Niveau als auch für den professionellen Einsatz. Davon konnten sich die Teilnehmer einen Eindruck verschaffen, indem zwischendurch zur Auflockerung der ohnehin schon lockeren Atmosphäre Filme gezeigt wurden, die mit Blender produziert wurden.


Tears of Steel – Blender Foundation’s fourth short Open Movie


Big Buck Bunny

Die Teilnehmer zeigten sich anschließend sehr zufrieden mit dem Wochenende; gerade auch, weil der Workshop eine praxisnahe Ergänzung zum Informatikunterricht in der Schule darstellte. Stefania Trabucchi, Peter Koppatz und Joren Retel vom PySV sowie Ron Drongowski und Thomas Baumann von ZEIT ONLINE bedauerten, dass sich für den Workshop keine Teilnehmerinnen angemeldet hatten.

Wer nicht dabei sein konnte oder nach Lesen dieses Berichts neugierig geworden ist, kann sich auf der Webseite zum Workshop über die Python-Grundlagen und das Zusammenspiel von Python und Blender informieren.

Der nächste Workshop dieser Art soll voraussichtlich im Oktober bei ZEIT ONLINE in Hamburg veranstaltet werden. Der genaue Termin wird, sobald bekannt, hier im Artikel und bei uns auf Twitter bekanntgegeben. Über die Anmeldung insbesondere auch von Mädchen und jungen Frauen würden sich Veranstalter und Gastgeber sehr freuen.

Weitere Informationen: