Die Lieblings-Tools der Frontend-Entwickler Technikwürze 188

Willkommen bei Technikwürze einhundertachtundachtzig. Es geht heute die Lieblingstools von Frontend-Entwicklern. Bei mir ist, Matthias Pfefferle. Hallöchen Matthias.

Guten Abend.

Und bei Matthias bin ich Jens Rochdreis. Guten Abend.

Herzlich willkommen zu Technikwürze, eurem Design- und Webstandards-Podcast. So, bevor es losgeht, möchten wir uns noch mal recht herzlich bei euch bedanken fürs viele Sharen und Twittern und Tweeten und Retweeten und Liken und Plus-Einsen und natürlich auch fürs Hören der letzten Folge. Wir sind auf über elftausend Downloads gekommen. Das ist, also davon konnten wir beim Open Web Podcast nur träumen. Das ist fantastisch und motiviert enorm.

Und, wir möchten uns in dem Zug auch noch mal bei unserem Sponsor und Hoster Mittwald bedanken, der dafür sorgt, dass trotz des hohen Traffics, Technikwürze.de immer erreichbar bleibt. Also falls ihr in Zukunft 'nen Hoster braucht oder mit eurem Hoster unzufrieden seid, dann geht doch einfach mal bei Mittwald.de vorbei und schaut euch das Ganze an. Es gibt auch spezielle Pakete für Drupal oder Typo drei oder WordPress optimiert. Einfach mal anschauen und jetzt viel Spaß beim Podcast.

Wir haben uns in Abwesenheit von David, der sich auf seinen wunderschönen Urlaub vorbereitet, mal zusammengesetzt und wollen ein wenig hoffentlich halbwegs strukturiert über unsere Lieblingstools sprechen. Fangen wir mal so mit den Basics an. Bis, auf welchem Betriebssystem arbeitest du im Wesentlichen?

Ja, das hatten wir ja vorher schon, dass wir leider heute nur den Mac-Part berücksichtigen können.

Ja, ne, schade. Bist du, gebürtiger Mac-Anwender oder, oder-

Nee, ich komme auch aus der Windows-Richtung, aber, irgendwie bietet der Mac so die, den, den, das perfekte Zwischenstück. Es ist alles schön hübsch und man hat doch trotzdem 'ne ziemlich hochwertige Konsole. Also-

Seit wie vielen Jahren arbeitest du jetzt auf dem Mac?

Ich hab im Studium angefangen, das ist jetzt seit sechs, sieben Jahren ungefähr.

Mhm. Gut.

Da, wo die weißen MacBook-Plastikdinger rausgekommen sind zu 'nem erschwinglichen Preis.

Aber du kannst dich noch so an deine Windows-Zeit erinnern?

Ja, ja, natürlich.

Und, jetzt mal nur so auf die, auf die normalen Arbeitstools, bezogen: Wie lang hat sich da, hat das für dich gedauert, dich, umzugewöhnen?

Viel schneller als gedacht. Also ich hab am Anfang sogar noch ein Windows, parallel installiert, weil ich gedacht hab, mir fehlen so viele Tools, aber ich glaub, ich hab's einmal gestartet und das war's.

Fehlt dir noch eins? Also, hmm, v-vermisst du irgendetwas noch aus deiner Windows-Zeit?

Nicht wirklich, nee. Also ab und zu so, die, die, der, das Office-Zeugs. Also so richtiger Ersatz ist dieses OpenOffice noch nicht für mich, aber sonst eigentlich nix.

Mhm. Ja gut, also über so was wollen wir ja eigentlich heute nicht reden, sondern-

Ja, eben.

Nur, nur über Sachen, nur über richtige Sachen, ne.

Also Web, fehlt mir bisher wirklich nichts.

Okay. Also ich bin ja seit Ende 2009, genau, Ende, erst seit Ende 2009 Mac User. So nach zwanzig Jahren Windows hab ich damals, den Wechsel in die Selbstständigkeit dazu genutzt, mal Tabula rasa zu machen. Und, am Anfang war das für mich echt schwierig. Ich hab dann recht lange gebraucht, um mich an die unterschiedliche Bedienweise und an unterschiedliche Programme zu gewöhnen.

Hab auch festgestellt, dass die Programme, wegen der ich eigentlich dieses, Betriebssystem haben wollte, doch nicht so toll waren-... Oder ich doch nicht brauchte. Und, bis heute vermisse ich eigentlich nur ein einziges Programm, und das ist, IrfanView. So als-

Ah.

Bildbetrachter, Allzweckwaffe. Da hab ich in der Form mit der Perfektion, was das alles kann, hab ich nichts aufm Mac gefunden. Jedenfalls nicht ein einziges Programm, das das könnte. Und was ich auch noch nicht gefunden habe aufm Mac, weswegen, weswegen ich quasi meinen Testrechner mit Windows immer noch anmache, das ist so 'n, so 'n Programm, mit dem man, sagen wir zwanzig oder dreißig Downloads hintereinander hängen kann, dass die so nacheinander abgearbeitet werden.

Ah, okay, ja. So Download-Manager.

Genau. Und weil ich, und weil ich,, na, Videos im Fernsehen auf, im, im, im Internet aufnehme, Fernsehen im Internet aufnehme- -will ich das auch schneiden und da, gibt's so 'n Super-Tool, auf Windows. Das sind so die einzigen Sachen, die mich da immer noch von ferngehalten haben, aber so im, im Frontend-Bereich, in dem eigentlichen, da, da fehlt mir jetzt gar nichts mehr. Das ist echt interessant.

Mir ist, mir ist, mir ist eins grade aufgefallen und zwar der IE.

Der kann dir doch nicht fehlen.

Ja, nein, fehlen nicht wirklich, aber es ist halt wirklich umständlich, wenn man was im IE testen will. Besonders wenn jetzt mittlerweile das ganze Büro, auf Mac umgestiegen ist.

Ja, das ist wahr und vor allen Dingen, ich, hast du mal versucht, diese von, Microsoft zur Verfügung gestellten virtuellen Maschinen aufm Mac zu installieren?

Nein, noch nie.

Es gibt da so ein, so ein GitHub, GitHub-Repository mit einem Installationsskript, das das alles machen, können soll. Und nach etwa einer Dreiviertelstunde rumgerödelt hat es dann bei mir ohne Erfolg abgebrochen. Dann habe ich das seitdem sein gelassen und, nutze dann halt doch lieber wieder meine selbst eingerichteten virtuellen Maschinen.

Da hast du recht, das ist eigentlich der größte, das größte Manko an so, an diesem Ding, an der Mac, dass, dass du mit, mit MIE nicht vernünftig testen kannst. Also nicht, dass ich darin surfen wollte, aber- -ich muss, ich muss es halt testen, ne.

Ja, eben. Und das ist das Problem. Ja.

Ja, das ist ein echtes Problem, aber meine Güte, da gibt es, da gibt es ja Lösungen für und bislang funktioniert das eigentlich mit den, mit den virtuellen Maschinen auch ganz gut und wir müssen es ja auch nicht ständig testen, ne. Das ist ja eigentlich auch...

Ja, ich versuche es mittlerweile dann halt auch einfach so: Ich, ich mache es halt besten Gewissens und, erst wenn halt, irgendwie Feedback kommt von wegen im IE so und so funktioniert es nicht, schaue ich es mir an. So geht es auch.

Das ist natürlich auch schön, ja. So Bananensoftware reift beim Endnutzer. Kennst du ein vernünftiges Screenshot-Tool? Also so ein richtig gutes für einen Mac?

Also ich habe bisher immer dieses, hmm, Skitch benutzt.

Ja, das war einmal.

Aber da jammert ja jetzt jeder, seitdem es von Evernote übernommen wurde. Ja, also es, aber es tut immer noch das, was es soll, finde ich.

Na ja, ich bin da, ich finde das nicht so prall, seitdem es von, Evernote aufgekauft wurde. Mich, mich, ärgert das eigentlich mehr. Na ja gut, aber das ist so eines der Tools, bei denen ich mir sage, aufm, auf Windows war es immer spitze, so mit IrfanView zu arbeiten, aber das, was da auf dem Mac rumkreucht und -fleucht, das kostet entweder richtig viel, so fünfzig, sechzig, Dollar oder, oder es macht einfach keinen Spaß. Oder beides.

Hm.

Aber du kennt- du kennst auch keine andere.

Ich muss gar nicht so viele, Screenshots machen.

Mhm. Ja, ich mache die immer mal wieder. Und wenn es auch nur ist, um während ich gerade surfe, immer wieder den Aufreger des Tages für mich zu screenshoten und, zum Beispiel dann, in, in einem Vortrag oder in einem Artikel zu verarbeiten.

Ah, okay. Ja.

Das braucht es dann auch manchmal. So kreative Programmierung oder wie letztens, als ich mich in der Outlook-Web Access abgemeldet habe und dann was stand, ich solle auf OK klicken und, ich wollte ja schon den Browser hochgehoben haben, um zu schauen, ob das OK-Zeichen dadrunter gerutscht ist. Da war jedenfalls okay, kein OK. Also solche, solche Scherze, ne. Da brauche ich immer mal wieder ein Screenshot-Tool. Also ein vernünftiges.

Ja, das stimmt.

Gut, gehen wir mal zu was Richtigen über. Andi.

In was entwickelst du?

In was entwickelst du? Genau. Also ein-eine der ne-neben dem Betriebssystem wunderschönsten Möglichkeiten für Flame Wars und Glaubensstreitigkeiten. Wie, was schätzt du, wie viel Editoren hast du schon durch in deiner beruflichen Laufbahn?

Also so richtig Power-Nutz-mäßig würde ich sagen vier oder so. Drei, vier.

.

Also ich glaube, ich habe bei Windows angefangen mit dem UltraEdit. Ah nee, ja, eigentlich muss ich jetzt, zu meiner Schande gestehen, dass ich mit dem Dings angefangen habe natürlich mit dem, wie heißt der Microsoft-Dinger?

Frontpage.

Ja, natürlich.

Ah, ich muss mir den Mund auswaschen.

Frontpage, die, die ganz ersten Geschichten und dann, Homeside-Dreamweaver. Dann UltraEdit, dann durchs Studium Eclipse und dann ziemlich lange Eclipse und jetzt, zum Glück Textmate.

Mhm. Textmate zwei, also, so der Ver-- der Versuch, das neu zu machen oder noch die Originalvariante?

Nee, der, der neue.

Echt? Bin ich nie mit warm geworden. Okay, also bei mir waren es sogar noch ein paar mehr Editoren als die, die du gerade aufgezählt hast. Ich dürfte auch so mindestens zehn bis fünfzehn schon durchhaben und alle hatten so für ihren, für ihre Zeit die absolute Berechtigung. Und all-alle waren so für den Zeitraum, in dem ich gearbeitet habe, genau richtig. Und, das ist auch das Schöne daran. Also auch so mit Aptana oder Eclipse, ne, habe ich eine Zeit lang gearbeitet.

Das war dann zu dem Zeitpunkt genau richtig und jetzt, brauche ich das Ding halt nicht und mache genau wie du mit Textmate rum, aber mit dem, mit der alten, also mit der- -ursprünglichen, ich weiß nicht, eins fünf, paar gequetschte- -, mache ich da rum und das ist, sehr angenehm.

Ja, also ich finde, es spricht auch nichts dagegen, mal mit, mit so 'nem Visio-Ding anzufangen, wenn man noch gar keine Ahnung hat von der ganzen Geschichte, um es mal zu lernen. Ich meine, Frontpage war jetzt halt wirklich ein Ausrutscher, das gebe ich zu. Aber gerade Homeside und Dreamweaver, die gingen ja dann echt schon.

Ja gut, aber Visio, Visio ist ja nur, eher what you see is what you could get and never will, will, never will have. Aber, also Dreamweaver fand ich immer super, solange ich nicht die Voransicht genommen habe. Also so als reiner Co-Code-Editor finde ich Dreamweaver immer noch, einsame Spitze.

Ja, aber mal um reinzukommen, weißt du, wir, wir verdienen da halt jetzt mittlerweile unser Geld, aber ich hab am Anfang halt als, als, neben der Schule, um mal ein bisschen auszuprobieren, habe ich das immer in der schönen Voransicht gemacht und hab dann gewechselt und hab geguckt, was passiert, wenn ich das jetzt änder.

Und dafür war es natürlich perfekt Und, z-zum, zum richtig entwickeln, also so, so, fieses Java Scr--, Java-Zeugs war halt der Eclipse super wegen der ganzen Code-Vervollständigung und man konnte besser im Code suchen und so weiter.

Aber was mich halt wirklich nervt bei diesen ganzen Riesendingern wie auch NetBeans und so weiter und jetzt auch diesem PHP Storm, ist halt, erstens ist es wahnsinnig groß und grad bei diesen ganzen Eclipse-Dingern, diese ganzen Abhängigkeiten von den Plugins, die man sich reinlädt. Dann hat man am Schluss irgendwie so dieses ganze Web-Plugin-Zeugs drin mit SVN und, CSS, Highlighting und so weiter.

Und dann heißt's, irgendein Plugin hat 'nen Update und dann ist man drei Tage damit beschäftigt, die ganzen Abhängigkeiten zu installieren und am Schluss installiert mir die ganze Scheiße komplett neu und dadrauf hatt, hatt ich irgendwie irgendwann keine Lust mehr und bin dann halt eben auf so was Leichteres wie den TextMate umgestiegen.

Mhm. Ist dir der, der Umstieg damals, leicht gefallen?

Also am Anfang nicht ganz so, eben weil die ganze, Code-Vervollständigung gefehlt hat. Also es ist, wenn man mit, neuen Frameworks arbeitet, wo man eben noch nicht so genau die ganzen Funktionen kennt, ist es nicht ganz so einfach.

Ja, das, -

Aber mittlerweile geht's.

Ja, also ich brauchte, glaub ich, 'nen Monat. Ich, ich weiß noch, als ich angefangen hab, mit dem, Mac zu arbeiten, da war einer meiner ersten Käufe ein TextMate, weil mir meine ganzen Kumpels davon unter anderem, genauso wie von BBEdit vorgeschwärmt hatten. Und dann hab ich TextMate aufgemacht und, hab dann erst mal, in den Einstellungen gesucht, wo ich denn die, die Menübar und so ein, die einrichten könnte. Weil ich das einfach von Windows gewohnt war, ja.

Also zum Speichern, zum Öffnen, zum Einfügen einer Tabelle, was weiß ich auch immer, drückst du auf irgend 'nen Button. Und genau diese Leisten hab ich gesucht. Die wollt ich mir erst mal konfigurieren. Um dann festzustellen, das gibt's da gar nicht. Um dann wiederum festzustellen, das musst du alles mit Tastaturkürzeln machen.

Da hatt ich mich dann schon mal ver-verflucht, um dann nach 'nem Monat,, für mich jedenfalls die, den Eindruck zu haben, dass das total geil ist, mit, mit solchen Tastaturkürzeln. Aber da muss man sich erst mal reinfinden. Denn das muss ja alles erst mal in diesen Kopf da rein und eigentlich brauche ich mein Gehirn, um was anderes mir, mir zu merken. Aber das ist echt total praktisch. Das geht schnell.

Die erste Erkenntnis für mich war auch so, ja, Texteditor, aber arg viel mehr ja wirklich nicht, nur 'n bisschen Highlighting und so. Man muss sich dann echt einarbeiten- -bis man die wirklichen Vorteile erkennt.

Man muss sich da rein, fuchsen. So, und so geht's mir bei Sublime Text. Da hab ich jetzt, glaub ich, schon den vierten Anlauf mittlerweile gemacht, um, um herauszufinden, ob mir das Programm denn jetzt nur gefällt. Jetzt beim, letzten Ad-Adventskalender der Webkrauts gab's ja auch 'nen, 'nen Artikel, zum Thema, Sublime Text und, der Frederik, Hemberger hatte da drüber, drüber geschrieben und das, in höchsten Tönen gelobt. Pff, also mir sagt das nix.

Mir sagt das bis heute, mir gibt das bis heute nix. Ich komm damit echt nicht zurecht. Vielleicht auch, weil ich jetzt zu sehr auf TextMate ausgerichtet bin und die, die Bedienung so toll finde und genau die fehlt mir dann da in, in vielen Punkten bei Sublime. Das Einzige, was ich jetzt total klasse fand, das war für zwei Tage. Das war, dass du, den, d-das, das, Fensters splitten kannst und links 'ne andere Datei als, als rechts haben kannst. Das fand man super. Das ist mal richtig praktisch.

Und das-

Hast du-

Das hab ich halt bei, bei TextMate nicht.

Ja. Hast du mal mit solchen Sachen wie Coda oder, wie heißt das andere, Espresso Erfahrungen gemacht?

Ja, die Erfahrungen haben dann immer so exakt, fünf Minuten oder vier gedauert, bis ich dann, festgestellt habe, dass das definitiv, dass, dass ich nicht zu deren Zielgruppe gehöre. Und, der, bei dem, was war 'n das? Coda war's, glaub ich. Genau, Coda gab's doch jetzt vor 'nem halben Jahr etwa 'ne neue Version, die sie mit viel Trara und Tamtam angekündigt hatten.

Und, ich war willens und bereit, die auszuprobieren und dann kam so am Tag der Veröffentlichung, kam dann heraus, dass die bei allen CSS3-Eigenschaften nur, WebKit ein, integriert hatten. Also wenn du dann-

Ah, okay, ja, ja.

Wenn du dann irgendwas geschrieben hast an CSS-Eigenschaft, dann, hat der Editor dir das Ganze nur mit dem WebKit-Präfix geschrieben. Und weißt du, schlechten Code möcht ich persönlich schreiben und nicht meinem Editor überlassen. Und ich find so was ein absolutes Unding. Und dann kam noch hinzu, dass, dass grade, dass ja auch mit in die, in die Zeit fiel, wo Sass, und Less immer, immer, beliebter wurden. Und da gab's von Anfang an überhaupt keine Unterstützung dafür.

Dafür geb ich nicht so viel Geld aus. Was soll 'n das? Also der, der Editor, war für mich völlig, das, den brauchte ich nicht. Und, dann ich glaub, der, der, entweder war's, war's das Coda oder der Espresso, einer von beiden, bei dem, schrieb man dann CSS auch mehr dadurch, dass man's nicht geschrieben hat, sondern in Einstellungsfenstern dann, in Select-Feldern irgendwas aus, ausgesucht hat.

Also in der Zeit, in der ich da mit der Maus irgendwelche Felder bediene, hab ich mein CSS 15-mal geschrieben. Das, für mich, für mich ist das nix. Ja, für mich ist das definitiv nix. Ich bin, ich mein, hab's ja, ich merk's jetzt seit, August arbeite ich in 'nem, in 'nem Projekt, wo wir, auf Sass leider am Anfang verzichtet haben und, - Jetzt arbeite ich halt seit einem halben Jahr ohne Präprozessor und, vermisse ihn schon wieder.

Deswegen, wenn ich das nächste Mal wieder die Chance habe, mit einem Präprozessor zu arbeiten, dann sind diese ganzen Editoren eh für mich Füße, weil ich mein CSS anders schreibe, als diese ganzen, Editoren es mir helfen würden. Also da, da brauche ich-- ich, ich merke wirklich immer mehr, dass, dass ich so einen schlichten Editor wie Textmate oder auch Sublime eigentlich nur brauche und nicht diese ganzen Helfer. Helferlein finde ich dann eher auf der richtigen Codeebene wichtig.

Also entweder dieses Sass, also ein Präprozessor, Sass oder, oder Less oder Stylus, was man halt gerade so nutzt. Und, und das frühere Zen Coding, das jetzt Emmet heißt, warum auch immer, was auch immer Emmet heißt. Nutzt du das?

Emmet?

Ja, Zen Coding, Emmet.

Keine Ahnung. Habe noch nie gehört.

Echt nicht?

Nee.

Also das, das, wenn wir uns das nächste Mal sehen, zeige ich dir das mal, aber das solltest du dir dringend anschauen. Emmet Punkt io. Da schreibst du quasi mit, CS-- schreibst du in CSS-Notation, drückst eine Tastenkombination und dann kommt aus der CSS-Notation HTML rausgefallen. Und das ist, richtig spitze.

Wenn du dann genau weißt, wie dein, Code aufgebaut ist, dann, hast du da in Windeseile, eine Struktur geschrieben oder du hast, eine Liste mit fünf, sechs Ein-Einträgen, also sagen wir mal eine Navigation. Ja, und also Liste mit, auch noch mit Links innen drin. Da schreibst du einfach nur, eine ganz kurze CSS-Notation mit, noch mit einer Erweiterung wie mal fünf meinetwegen, um halt fünf Listenelemente rausz-rauszuhauen.

Tastenkombination und zack, fällt dir deine Liste mit, mit fünf Verlinkungen raus. Und das ist einfach eine unheimliche Zeitersparung, eine Ersparnis. So was finde ich dann schon eher wichtig, als dass, der, der Editor mir da groß weiterhilft.

Dann gehen wir doch gleich zu den, zu den nützlichen kleinen Präprozessoren und, kommen dann nachher auf unseren eigentlichen nächsten Punkt zurück. Was, was benutzt du denn lieber? Hast du mit beidem Erfahrung, mit Sass und Less, oder?

Nein, nein. Also ich, ich habe, ich, mir, mir ging es, mir ging es da so wie vielen anderen auch. Ich habe, lange Zeit gedacht: „Ach Gott, ich kann doch Sass, ich kann doch, CSS schreiben. Wozu brauche ich denn so was wie, wie Sass?" Und dann habe ich, in einem kleinen Projekt, einfach mal den, die Probe gemacht, ob mir das, denn zusagt.

Denn ich habe dann von vielen gehört, dass sie da, einfach hin und weg waren davon und irgendwas musste doch da dran sein, ne, wenn gestandene, vernünftige Entwickler auf einmal so begeistert davon waren. Und, dann habe ich das mal ausprobiert und war genauso schnell hin und weg.

Und ich habe mich damals für Sass entschieden, aus zwei Gründen: Zum einen, erschien es mir, dass da am meisten Wirbel drum gemacht wird und, dementsprechend bekommst du dann am meisten Erweiterungen, Hilfen, ja, Hilfetexte, Artikel, was auch immer dazu. Und das hat sich auch als wahr herausgestellt. Ich glaube, es gibt kein einziges Buch über Less, aber dafür schon mehrere über Sass. Und, zum anderen, finde ich, hat Less einen Konstruktionsfehler.

Und ich weiß nicht, ob es da noch mehrere Konstruktionsfehler gibt, die ich nicht kenne. Und der Konstruktionsfehler ist für mich, dass damals die allerersten Versionen, so aufgebaut waren, dass das CSS im Browser generiert wurde. Also dass-

Ah ja, über JavaScript, ja.

Genau. Und, das finde ich absolut, unnütz. Ich möchte mir ja die Arbeit erleichtern, aber das möchte ich nicht als, als Schuld quasi dem, dem Nutzer aufbürden. Ich sehe, sehe da gar keinen Nutzen dran.

Das definitiv.

Und da, da, das ist für mich schon mal ein Konstruktionsfehler. Und dann kam, und dann weiß ich halt nicht, welche weiteren Konstruktionsfehler es dann noch gibt. Ich sehe aber, dass es da durchaus 'nen, 'nen, 'ne große Anwendungsbreite gibt, zum Beispiel für alle diejenigen, die mit ASP.net, arbeiten, in irgendeiner Form in, in einer Microsoft-Umgebung arbeiten, weil diese dot Net-Geschichte, Visual Studio hat, schon seit längerem eine Erweiterung für Less.

Ah, okay.

Und erst sehr spät ist dann Sass hinzugekommen und da-- und du musst halt für Sass, brauchst du halt Ruby im Hintergrund. Das ist ja bei uns Mac-Usern im Hintergrund dabei. Das war dann für mich der letzte Punkt, der, der es mich dann hat ausprobieren lassen. Weißt du? Dann brauchte ich einfach nur das Terminal öffnen, was ich zwar nicht mag, aber ich habe mich mal getraut und dann einfach das mal installiert und dann lief das.

Während, wenn ich jetzt auf dem PC bin, ich habe es mal ausprobiert auf meinem alten Netbook, da musst du natürlich erst mal Ruby nachinstallieren und, das fühlt sich auch schon ein bisschen wie ein Fremdkörper an, während wenn du dann in so einem Visual Studio einfach nur eine Erweiterung dazuklickst und, musst dich da nicht weiter drum kümmern und das läuft dann out of the box, dann ist, wäre das für mich das Killerargument, ne.

Also ich habe zwar jetzt den Eindruck, dass Sass in, in manchen Funktionen einen Schritt weiter ist, aber ich kann mir auch gut vorstellen, dass Less, wenn die mal wieder aufwachen, das auch nach, ziehen werden und dass die dann so halbwegs gleichauf sind. Also ich finde, ich würde da jetzt keinen Glaubenskrieg draus machen. Ich für meinen Teil finde Sass klasse, aber ich kann jeden und jedem nur einladen, das mal auszuprobieren.

Der wird schnell feststellen, dass man damit auf einmal richtig viel Spaß haben kann, um, mit, mit größeren Projekten oder auch mit kleineren Projekten zu arbeiten. Das macht auf einmal ganz andere, ganz andere Freude.

Sollen wir noch kurz mal zusammenfassen, warum überhaupt? Wir haben ja noch gar nicht erwähnt, was es überhaupt ist und warum's ein, eigentlich viel cooler ist. Oder kann man da schon fast davon ausgehen, dass es jeder kennt?

Also ich würde ja bei der, bei der Zielgruppe und unseres, Podcasts mal davon ausgehen, dass alle schon mal davon gehört haben. Aber wir können es noch mal kurz zusammenfassen. Also, mit Sass kann ich quasi, hmm, Pro, CSS programmieren.

Also ja, eigentlich kann man es programmieren nennen, denn im Hintergrund läuft 'n, 'n Ruby-Dienst, der schaut, was ich da gerade verbrochen habe an, an einer speziellen Datei oder mehreren speziellen Dateien, die, die überprüft werden und,, in einer speziellen Syntax geschrieben werden können, nicht müssen, sondern können. Und, dieses Ruby, ja, lässt dann hinten ein CSS rausfallen, das aber, ja, also verkürzt entstehen kann.

Also wir können, wir können, sagen wir mal, eine Zeile schreiben und am Ende kommen fünfzehn Zeilen dabei heraus. Ja. Also ich programmiere mein CSS und dadurch habe ich das, was ich jetzt persönlich schreibe, ist sehr viel kompakter als das, was am Ende hinten rauskommt.

Ja, mir kommt's auch-- Also ich find, man kann auch zum Beispiel 'nen, 'nen, Style Guide viel besser abbilden. Man hat zum Beispiel eben die Möglichkeit, zum Beispiel Farben in Variablen zu packen und eben die überall wiederzuverwenden. Und wenn man irgendwann mal eine Farbe austauschen will, braucht man nur an einer zentralen Stelle die Variable zu ändern. Man hat die Möglichkeit, modular vorzugehen.

Das heißt, man kann irgendwie die, die, die ganzen Bereiche logisch kapseln und auch in einem eigenen File anlegen und das dann inkludieren. Man hat die Möglichkeit, Funktionen zu schreiben, wie zum Beispiel, eine Funktion für mach mir runde Ecken an die Box und, kann die dann einfach mit reinziehen und so weiter.

Also ich find, die ersten beiden-

Man kann die Eigenschaften kapseln.

Ich find die ersten beiden Punkte genau die Punkte, mit denen du so quasi einen Einstrugs, Einstieg findest, so als Einstiegsdroge. Also der, der, die Einstiegsdroge waren für mich eigentlich die Variablen. Das war damals ein kleines Projekt, bei dem mir klar war, da gibt's, da gibt's, sechs, nee, sechs oder acht verschiedene, ich weiß schon gar nicht mehr, oder acht verschiedene Bereiche. Die waren alle mit unterschiedlichen Farben versehen, aber ansonsten war ja alles gleich.

Und, es war also dann nur eine Frage des Austausches einer Farbe an einem, an einem Ort, ja, einer, einer, einer Farbreferenz an einem Ort. Und, das, das lief mit diesen Variablen einfach super. Das ist, arbeits, zeitersparend.

Und wenn man dann auch noch feststellt, man kann, seine CSS-Dateien in, sagen wir mal, dreißig kleine CSS-Dateichen unterteilen, am Ende kommt aber nur eine einzige dabei herausgefallen- -dann merkt man erst mal, wie effektiv man arbeiten kann, weil man auf einmal mit Imports arbeiten kann, ohne dass das-- Die, die bleiben, die bleiben bei mir im Entwicklungs, Zusammenhang.

Das ist halt alles viel übersichtlicher.

Ja, man, man, man arbeitet so, wie man es nicht mehr arbeiten sollte oder noch nie, konnte, weil man halt, getrennt hat seinen kleinen Arbeitsbereich und das Ergebnis. Das Ergebnis ist was vollkommen anderes, was dann hinten rausfällt. Und das finde ich schon richtig, klasse. Und da gibt's jetzt mittlerweile so viele hübsche Ideen, mit denen man arbeiten kann. Also, das, das ist richtig, können wir sagen, das ist CSS für Erwachsene. Ne?

Also und bei, und, ich habe jetzt nicht so die vertiefte Ahnung von JavaScript, aber genau das, muss wohl bei Coffee, CoffeeScript dann auch der Fall sein. Auch so JavaScript für Erwachsene. Ich bin da ja eher so für Jugendliche. Ich nehme da lieber jQuery.

Ich glaube, das sind, ja, sind unter, unterschiedliche Anwendungsfälle. Es, es ist halt auch viel einfacher, JavaScript-Code zu schreiben und ähnlich wie bei Sass oder Less brauchst du halt die Hälfte, wenn nicht sogar noch weniger an, an Code, um aufs gleiche Resultat zu kommen. Und es funktioniert nach dem gleichen Prinzip letztendlich. Also es ist halt auch eine, eine optimierte Syntax, aber letztendlich wird auch JavaScript-Code, rausgeschmissen, der eben voll funktionsfähig ist.

Ja und JavaScript hat ja noch mal einen großen Vorteil gegenüber CSS. Es ist schon mal eine Programmiersprache. Während du bei CSS dir nichts, erleichtern kannst, indem du irgendwas programmieren könntest. Es gibt ja einfach keine Möglichkeiten. Und, also wenn du zum Beispiel so was wie, wie Compass dann noch mal als Zusatztool für Sass nutzt, dann kannst du dir qua, kannst du dir zum Beispiel von Compass, ganze, Sprites generieren lassen. Ach nee, da kommen wir nachher noch zu, ne?

Oder, was ich auch jetzt mal genutzt habe, das ist, du kannst dir, du kannst dir einfach Inline-Bilder, also diese Base64 codierten Bilder- -die kannst du dir dann auch reinziehen lassen. Also für, für den IE sieben machst, verlinkst du das Bild und für alle anderen Browser machst du daraus ein Inline-Bild. Das ist schon cool.

Oder, Compass bringt noch viele Kompatibilitätssachen wie eben runde Ecken oder, wenn man irgendwelche Grid Frameworks noch mit reinholen will oder so weiter.

Ja, wobei das, also mir ist das zu groß, zu mächtig und, der, der Output ist mir auch manchmal, gefällt mir manchmal nicht. Deswegen, ich nutze Compass eigentlich überhaupt gar nicht, sondern nur, so für, für ganze Kleinigkeiten und, und ansonsten dafür, dass es mit Compass Watch geht das Ganze viel einfacher als mit Sass Watch. Also du kannst da, dieser, dieser, der Befehl in der, im Terminal Compass Watch, also achte mal bitte auf diesen Ordner.

Der ist, mächtiger als, als das Gleiche bei Sass, hab ich so den Eindruck und, nutz ich halt das. Und man weiß es ja nicht, ob man vielleicht nicht doch irgendwann mal Compass braucht. Also, ne, das ist-

Man weiß es nicht.

Man weiß es nicht, also machen wir einfach mal.

Aber um jetzt noch mal die, die Überleitung zu unserem übersprungenen Thema hinzubekommen: Was ich gemerkt hab bei der Nutzung von, Sass, also ich benutz auch Sass statt Less, ist, dass man viel machen oder, ja, teilweise relativ viel machen muss, bis das Ganze deployfähig ist.

Wenn man jetzt zum Beispiel sagt, okay, man, man will nur ein CSS rausrendern, dann ist das ja noch in Ordnung, weil dann kann man, wie du eben vorhin angesprochen hast, eben so 'n, so 'n, Befehl in der Konsole öffnen, der eben jede Änderung direkt, ins CSS kompiliert. Aber sobald man eben mehrere CSS-Files hat, die man auch noch in unterschiedlichen Versionen haben will, einmal irgendwie minified, einmal original und so weiter, dann wird das Ganze schon ziemlich nervig.

Und deswegen find ich die Idee gar nicht schlecht, dass man jetzt, also so, so grad in den, in den letzten Monaten ziemlich viele Projekte entstehen, die Funktionalität ins Frontend bringen, die man vom Backend schon gewohnt ist oder von, also sagen wir mal, höherwertigen Programmiersprachen oder Frameworks. Und, zwar als, paar Beispiele dieses Yeoman oder wie man's ausspricht oder Grunt JS, die ich-- Also mit, mit Grunt kä-kämpf ich noch 'n bisschen.

Das will noch nicht so, wie ich will, aber vom, von der Idee her find ich's ziemlich gut, weil, beispielsweise Grunt JS eben mir die Möglichkeit bietet, so immer wiederkehrende Tasks, in 'nem JavaScript-File zu definieren und ich dann eben nur noch einen Befehl ausführen muss, der mir im Hintergrund alles durchrattert.

Wie zum Beispiel kombinier mir die Files in, die Sass-Files in ein File und mach 'nen minifiedes, CSS draus und mach das Gleiche mit den Files oder, oder einfach nur generell minify mir das JavaScript, minify mir, das CSS oder was sind denn noch so Sachen, die man immer wieder macht? Ich glaub, es gibt auch Bildoptimierung noch. Das, also es ist beliebig erweiterbar. Es gibt diverse Plugins dafür.

Ja und gerade, also ich hab mich jetzt vor Kurzem an, an einen Icon Font gewagt und da bin ich eigentlich ziemlich froh über eben das Grunt JS, weil ich da ziemlich viele unterschiedliche CSS-Files rauslasse, was per Hand irgendwie fünf, sechs unterschiedliche Konsolenaufrufe wären.

Aha, okay. Also ich hab bislang noch nie so richtig kapiert – ich hab's versucht, herauszufinden – ich hab's noch nie richtig kapiert, ob und in welcher Form so etwas für, für mich, nützlich wäre, weil, ich meine Arbeit bislang nicht für so wahnsinnig kompliziert erachtet habe, ne. Also ich schreib da halt so ein bissi HTML und CSS und hin und wieder mal ein bisschen JavaScript und, das Höchste der Gefühle ist dann so dieses, Compass Watch.

Da rödelt dann im Hintergrund so ein bissi Ruby rum und, hinten fällt dann, eine bis, fünfzehn CSS-Dateien raus. Jo. Und? Gut, und dann, gut, ich, ich mach natürlich auch keinen Produktionscode. Ich hab jetzt also auch nicht die, den Wunsch, dass da mein CSS noch minifiziert wird, damit ich, damit ich da ein bisschen, Platz spare, ja. Also ich, ich schreib ja eigentlich immer mein-- Ich mach ja immer Vorlagen für andere.

Ja, aber jetzt gerade, also d-du hast ja zum Beispiel vorhin gefragt, per Twitter, glaub ich, was denn die ideale Arbeitsweise mit Sass in großen Teams ist.

Ja, genau.

Mit Versionierungssystem. Und das wär zum Beispiel die ideale Variante, eben im, in der We, im Versionierungssystem die generierten CSS eben nicht mit hochzuladen, sondern einfach nur per Grunt-File zu definieren: Was muss alles gemacht werden, dass am Schluss das Projekt so ist, wie es sein soll. Aber im Versionierungssystem, also Git oder im SVN, liegen praktisch nur die Sass-Files.

Ja, ja, okay. So, so weit bin ich ja dann auch schon. Also so weit bin ich ja auch schon, dass mir klar ist, wenn ich in einem Team arbeite, dass ich dann auf keinen Fall das generierte CSS-File, auch deployen muss oder, gar in, in Git oder in, ins SVN hochschieben muss. Das, bringt ja nur Käse. Vor allen Dingen brauchst du's ja gar nicht, ne. Also der, der, die eigentliche Arbeitsgrundlage ist ja, sind ja dann die SCSS-Dateien.

Aber die, -- Trotzdem muss ja dann nachher auf dem, auf dem Staging Server, auf dem Testserver für alle, nicht nur auf dem lokalen, auf dem ich arbeite, sondern auf dem Testserver für alle muss ja dann auch eine, kompilierte, also ausgegebene, korrekte, richtige CSS-Datei liegen.

Dementsprechend muss ja dieser, dieser, Prozess, den das Sass macht bei mir aufm Rechner, das ist ja der Gag ans Ganze, dass das bei mir in meiner Entwicklungsumgebung alles passiert, ja, und, diese auch nie verlassen muss. Dass die, dieser Prozess, den ich bei mir angestoßen habe, der muss ja dann theoretisch, nee, praktisch auf dem, auf dem Testserver und nachher aufm Produktionsse, Server ja auch passieren. Und da war jetzt, da, da hab ich halt einfach keine Erfahrung mit, ne.

Und, aber, aber ich hab dann noch mal mit nem Entwickler, mit nem Backend-Entwickler gesprochen und, ja, das, das, da bin ich dann immer wieder ganz begeistert, ne. Dann kommt er so: "Jo, wir machen ja dann auch unser Deployment." Da kommt das dann halt mit rein. Das ist für den dann gar keine Frage und gar kein Problem. Da ich so nie arbeite, war das für mich dann erst mal ein Buch mit sieben Siegeln, aber ich bin ja froh, immer wieder neu dazulernen zu können.

Also ich arbeite so einfach nicht, ne.

Ja, und da kommt bei mir halt dann wahrscheinlich auch wieder der Backend-Entwickler rau, durch.

Mhm. Aber das ist ja die, die Erkenntnis, das ist ja die Erkenntnis, die, die ich auch, hatte, als ich jetzt, zum Beispiel oder als wir zusammen an diesem, an der Technikwirtse, Planung, gearbeitet haben und so mal alles runtergeschrieben haben, und ich dann noch mal so drüber nachgedacht hab, fiel mir dann auch wieder ein: Na ja, ich arbeite jetzt halt so, aber das ist ja auch meine spezielle Art zu arbeiten und die hat nicht jeder.

Also ich, ich arbeite ja, ich hab ja im seltensten Falle 'nen Endprojekt, an dem ich arbeite. Im Normalfall arbeite ich anderen zu. Dass ich jetzt, wie jetzt gerade, gerade arbeite ich halt an 'nem Endprojekt. Das ist mal 'ne, 'ne, zwar nicht 'ne Ausnahme, aber das ist, ja, es kommt halt nicht ständig vor, ne. Es kommt sehr, sehr oft vor, dass ich einfach nur, nur anderen zuarbeite und die das Ganze dann noch mal modifizieren. Die brauchen, also muss das Ganze nie perfekt, ankommen, ne.

Und im, im Normalfall würd ich auch sagen: Na gut, dann bauen wir halt, oder sagen wir dem CMS, das dahinter steht, sagen wir halt, minifizier mal bitte schön die ganzen, CSS- und JavaScript-Dateien oder wir sagen's dem Server, dass er das machen soll. Also diese, diese, diese Frage, dieses Problem stellt sich mir nie, aber offensichtlich haben das ja schon andere für sich gelöst. Das ist-

Ja, du musst halt immer bedenken, wenn halt 'ne, 'ne große Anzahl an Leuten dran arbeitet und, jetzt irgendjemand zum Beispiel, auf die Idee kommt, wir, wir arbeiten jetzt mit Sass, dann und im, im schlimmsten Fall nur er davon Ahnung hat, dann ist es ja immer 'nen Problem, wenn er jetzt hergehen muss und sagen muss, demjenigen, der das dann auf den Server aufspielt, von wegen: "Du musst noch das machen, das machen, das machen, das machen", dann ist die, die Fehlerquote halt relativ hoch, weil wenn er irgendwas vergisst davon, dann ist halt die Kacke am Dampfen.

Und, das, und dafür find ich's halt gut, weil man da eben einfach diese ganzen Prozesse, die noch gemacht werden müssen, eben mach aus dem Sass 'n CSS, mach aus dem CoffeeScript, richtiges JavaScript, minify mir das, guck mir, guck, ob das JavaScript,, valide ist und so weiter.

Wenn man das einfach alles, als Prozesse definieren kann und dann am Schluss aufm Server, wenn's hochgespielt ist, einfach nur noch Grunt aus, also in der Kommandozeile eben Grunt eintippen muss und dann eben alles fertig gemacht wird, mehr oder weniger. Und für solche Sachen ist es eben gedacht. Also klar, an kleinen Projekten, die ich jetzt, alleine mach oder so was, da brauch ich's auch nicht wirklich.

Ja, ich, ich, ich werde die Tage auch mal wieder reinsch-schauen, vielleicht werd ich's irgendwann mal kapieren. Irgendwann macht's vielleicht bei mir halt Klick, dass ich den Nutzen für mich er-erkenne. Ich find's jedenfalls total klasse, dass es solche Sachen gibt. Da geb ich dir auch vollkommen recht, weil solche, also im Pr-, im Prinzip spricht ja nichts dagegen, dass wir uns mit, mit 'ner Programmierung, einfach Arbeit erleichtern.

Wofür, wofür haben wir denn diese blöde, blöden Kisten, die man programmieren kann, die da Computer heißen? Also für irgendwas müssen die doch nutze sein. Aber du hast mich eben noch auf eine Sache gebracht, die ich zu dem Thema, Präprozessor noch unbedingt mal loswerden wollte.

Ich denke, wir sollten dazu auch mal 'ne eigene Sendung machen, aber, wo wir schon mal grad dabei waren, muss ich unbedingt drauf hinweisen, so doll ich diese Dinger auch finde, sie machen nur dann Sinn, wenn man entweder komplett alleine damit arbeitet oder wenn im Team, es auch alle konsequent nutzen. In dem Moment, wo irgendjemand auf die, spitzenmäßige Idee kommt, in das generierte CSS noch mal ganz kurz ein oder zwei Zeilen Code-

Oh ja

... reinzuschreiben, da hat man halt verloren, ne. Also weil im, beim nächsten Mal, kompilieren wird, wird diese Ergänzung überschrieben. Also wenn man sich dafür entscheidet, mit, mit so 'nem Präprozessor zu arbeiten, dann gibt's nichts Halbes. Dann, das ist, das ist wie, wie mit halbschwanger, ne. Also- Dann geht's halt nur entweder alle und komplett oder gar nicht.

Das spricht eben auch wieder dafür, dann die fertig generierten Sachen auch nicht mit ins Versionierungssystem mit reinzunehmen, dass auch niemand auf die Idee kommt, so was zu machen.

Richtig, aber dann muss man auch für sich einschätzen können, ob man in einer, in einer Umgebung arbeitet, wo, der, wo die Floskel "Kannst du nicht mal eben?"-... Zur Gewohnheit geworden ist oder nicht. Denn wenn, so alle fünf Minuten "Kannst du nicht mal eben?" um die Ecke kommt, dann ist, ist blöd, ne. So wie: "Kannst du nicht mal eben mal schnell?" Das geht in, eine CSS-Datei unten noch mal kurz 'ne, 'ne Zeile reinschreiben.

Natürlich wesentlich schneller, als wenn man, jetzt erst mal feststellen muss, wo in welcher, Sass-Datei das Ganze war, das Ganze noch mal neu kompilieren und hochladen muss. Dann ist auch nichts mal, schnell mit "Kannst du nicht mal eben aufm Server ganz schnell?" Das geht dann auch nicht mehr, ne. Also direktes Editieren aufm Server, das müsste man dann eher so doppelt machen, ne.

Also einmal schnell aufm Server korrigieren, was man sowieso nie tun sollte, und dann, aber ganz schnell in der eigenen Umgebung im Sass-File nachziehen. Das ist einfach übel. So was darf man dann halt nicht mehr machen. Ich, ich weiß, das ist schlechter Stil, aber, wir wissen ja auch beide, dass schlechter Stil, bei manchen zum guten Ton gehört.

Man muss sich ja auch manchmal fügen. Man kann ja nicht immer machen, was man will, leider.

Ja, man ist manchmal von den, von der Umgebung dazu gezwungen, blöd zu arbeiten. Ich weiß, ich kenn das. Hast du schon mal mit Yeoman gearbeitet?

Ich hab jetzt erst mal versucht, diese Einzelteile zu machen. Also ich hab, mir eben das Grunt erst mal angeguckt und das kürzlich von Twitter released Bower, was so eine Art Paketmanagementsystem ist und an Yeoman hab ich mich noch nicht so richtig rangetraut. Das ist ja eigentlich nur noch mal so ein, ah, die, die, die eierlegende Wollmilchsau außen rum, die intern ja eigentlich nichts anderes benutzt als Bower, Grunt, JS und was weiß ich noch alles.

Ja. Und ich, ich glaube, ich werd auch nie in meinem Leben, wirklich Yeoman nutzen, also fürchte ich mal, weil mir das so vorkommt, also zum einen nutzt es die anderen beiden, Varianten, wie du schon gesagt hast, und zum anderen ist das einfach so ein, so ein Fertigpaket, wo ich schon mit mindestens mit der Hälfte nicht entweder gar nichts anfangen kann oder nichts anfangen will.

Also ich hab nie was mit Backbone geschrieben und ich werde, außer man wirft mich mit Geld zu, oder ich komme in so ein Projekt rein, auch freiwillig nichts mit Twitter Bootstrap anfangen und das ist halt dann da drin, ne. Was soll ich damit?

Ich glaub, es ist halt so, um, mal schnell ein Demoprojekt oder so was, hochzu-zupeppen, ist es, glaube ich, ganz gut. Also so was von wegen ich, ich muss jetzt irgendwie eine Demoanwende, eine Demowebseite schreiben und die muss morgen Mittag fertig sein, damit ich was zum zeigen hab. Für so was ist es, glaube ich, ganz gut, aber für produktiv würde ich's, glaube ich, auch nicht einsetzen.

Ja gut, aber-

Auch dieses-

Aber die, die, diese Idee, also die, die, diese Möglichkeit, mal eben schnell so 'ne, so 'n Prototypen meinetwegen kreieren, kannst du ja eigentlich auch nur mit Tools machen, mit denen du dich auskennst. Und, wenn jetzt bei Yeoman, Backbone und, Twitter Bootstrap dabei ist, musst du dich mit beiden auskennen.

Ja, das stimmt.

Ne? Und dann, brauche ich aber auch das nicht, brauche ich diese Yeoman nicht.

Ja, wobei-

Dann kann ich das auch so nutzen.

Mit dem Bootstrap, da, also, das Beispiel, was ich mir angeguckt hab, da wird ja schon eine Demoseite so weit zusammengeschustert, dass du praktisch nur noch, Inhalt reinmachen musst und ist fertig. Bei Backbone stimme ich dir zu. Also ohne Backbone zu kennen, ist man mit dem Yeoman natürlich auch nicht schneller. Das stimmt.

Aber, also das mit dem Bower finde ich, finde ich ganz nett von der Idee her, dass du eben relativ schnell, Frontend-Lips, dir installieren kannst, ohne die eben immer mühselig zusammenzusuchen. So von wegen ich brauche jetzt halt gerade in dem Projekt jQuery, dann brauche ich nicht auf die Seite gehen, mir das Zip runterladen in einen Ordner zu entpacken, sondern ich gehe halt einfach hin und mache Bower install, install jQuery und es ist halt an der Stelle, wo ich's brauche.

Das finde ich eine ganz nette Idee.

Das ist wahr, ja. Das ist absolut praktisch.

Genau. Und ich glaube, du kannst da auch dann eben so, so, da bin ich mir aber nicht sicher, ich glaube, du kannst so Abhängigkeiten noch definieren, dass du eben sagen kannst-

Ja, das stimmt.

Ich brauche für das Projekt jetzt das und das und er installiert mir alles.

Ja, und du kannst, glaube ich, auch deine eigenen Ziele angeben, ne. Das ist ja dann auch wichtig. Also du, und das Ganze ist, mit einer Jason-Notation, richtig? Ja, genau. Das ist auch wieder, das ist Jason. Das heißt, das versteht sogar der Yensi. Ja, ist doch das Schöne, ne? Also ich, ich find das, optimal wäre jetzt für mich persönlich jetzt, wenn ich dafür 'ne, 'ne Oberfläche hätte, wo ich dann einfach nur noch so ein paar, Checkboxen anklicken muss und unten auf Senden klicke.

Das, da-das fände ich ja dann wieder toll, aber das wird es natürlich nicht geben, weil ech-echte Männer machen das ja auf der Kommandozeile, wie wir wissen.

Ich, ich wollt grad sagen, da schimpfst du noch rum bei dem RSS-Editor, dass du alles über irgendwelche Knöpfe machen musst und da ist es jetzt okay.

Ja, ich, also ich, ich geb ja zu, ich bin da immer noch, Windows versaut und, ich, bin immer noch nicht mit, mit der Kommandozeile warm geworden. So richtig mögen wir uns immer noch nicht.

Das kommt.

Ja, wahrscheinlich. Wahrscheinlich. Irgendwann mal, ich muss mich mal wieder mit Vitali, Friedman unterhalten, der war so begeistert, so im Sommer, als ich mal mit ihm, mich mit ihm getroffen hatte, von der Kommandozeile und er wollte da so ganz tief einsta, eintauchen. Der kann einen ja so schön begeistern. Vielleicht, vielleicht kriege ich dann endlich mal den, den Dreh. Ja, was hätten wir denn noch Hübsches? Ach ja, wir haben's ja schon ein paar Mal angesprochen, so, Twitter Bootstrap und-

Ja, du hast grad geschimpft. Schimpf mal fertig.

Und andere, und andere, ja, was heißt schimpfen? Also ich, ich find so, also ich persönlich bin ja ein großer Freund von, von Frameworks, weil ich glaube, ich muss nicht alles, was, schon fünfzehntausendmal gelöst worden ist, zum fünfzehntausendersten Mal lösen. Und, so ein, so ein Framework, ermöglicht es mir ja auch immer wiederkehrende einfache, Taten schnell, Arbeiten schnell zu erledigen. Also deswegen finde ich ja Frameworks generell klasse.

Und auch so ein Framework wie jQuery zum Beispiel macht ja viele Sachen noch einfacher, ne, weil, weil es eine einfache API gibt, die unterschiedliche Implementierung oder auch ein bisschen kompliziertere JavaScript-Implementierung vereinfacht. Deswegen find ich das schon klasse. Ich bin aber auch nicht, glaub aber auch nicht, dass es sinnvoll ist, dass man sich mit zu vielen von diesen Dingern auseinandersetzt.

Und, also man sollte eins gut kennen, vielleicht noch ein zweites Mal, gesehen haben, aber ich muss jetzt nicht fürs erst, muss jetzt nicht vier oder fünf Frameworks, nutzen und, unterschiedlich einsetzen. Also glaub ich jedenfalls. Man sollte eins gut kennen und, das halt wie so 'n, wie, wie so 'n Werkzeugkoffer nutzen, ne. Also- Ein Toolset. Das ist, es ist ja nicht die, die fertige Webseite, sondern das ist meine Basis. Von der aus geh ich, geh ich dann los.

Und die soll mir einfach nur 'n bisschen, wiederkehrende, Arbeiten abnehmen, mehr nicht. Und, ich persönlich finde Bootstrap einfach, überschätzt und, ich mich ärger so dieser Hype da drum. Deswegen hab ich da vielleicht 'n bisschen, geranted. Für mich ist das Problem, ums mal so kurz zu machen, für mich ist das Problem im Wesentlichen, dass du eine, keine wirkliche Trennung zwischen, zwischen Layout und, und Design hast. Da ist alles miteinander vermengt.

Das ist 'n, das ist 'n Riesenkonvolut, egal ob du's noch brauchst oder nicht. Und wenn es da nicht so vernünftige, Oberflächen für gäb, kämst du durch das, durch dieses Konvolut auch gar nicht so richtig durch. Was allerdings total klasse ist bei diesem Bootstrap, das sind die ganzen, das sind die ganzen Beispielimplementierungen, ne. Also was, was du so an Tools hast. Und das ist natürlich, total klasse.

Da, da hast du natürlich dann schnell 'nen Prototypen zusammengebaut mit ganz vielen Einzelteilen, die, die man so braucht, um eine, ansehnliche Webseite hinzubekommen.

Wunderhübsche Tabellen, tolle Buttons.

Mhm. Ja, aber teilweise ist der, hat der, glaub ich, auch 'n bisschen gewöhnungsbedürftig, ums mal freundlich auszudrücken. Jo. -

Also-

Die, die, das Ding ist, glaub ich, auch nicht, für responsive geeignet. Also kriegt man natürlich alles in irgendeiner Form hin, aber so out of the box schon mal gar nicht. Vielleicht kommt das ja noch.

Da muss ich sagen, da dachte ich eigentlich, dass es da ziemlich stark ist in dem Responsive Zeugs.

Ja, echt? Hat sich das geändert? Gut, okay.

Ja. Also das fand ich eigentlich ziemlich gut. Was mich brutal nervt, ist, dass jetzt mittlerweile jede zweite Seite Twitter Bootstrap-mäßig aussieht. Mit diesem großen grauen halbrunden Dings oben und so weiter und der, der Menübar drüber. Das Problem an so schnell aufsetzen ist halt auch, dass es jeder halt auch schnell aufsetzt. Und dann hat man halt jede zweite Demoseite in dem Twitter Bootstrap Design gerade.

Ja, ja. Das ist, das ist auch ziemlich fürchterlich, wobei man das denen definitiv nicht vorwerfen kann. Also die Einfallslos-

Nein, natürlich nicht.

Die Einfallslosigkeit der Anwender kann man ja den Herstellern eines solchen Dings nicht, nicht vorwei, vorwerfen. Also das, da können sie nichts für. Ich find, ich find diese, die, die Sammlung der einzelnen Tools find ich einfach super. Also das, das ist total klasse. Das find ich einfach inspirierend. Ich will mir die ganze Zeit das schon, schon nehmen als, als Blaupause dann für Jaml, weil das ist dann so das, was ich bevorzuge.

Bei dem hab ich einfach den, den großen Vorteil, dass ich, also zum einen kann ich mit dem Ding mehr machen, ja, mit Jaml, weil ich dann nicht nur 'n Grid Framework hab, sondern auch Spalten mit machen kann. Das geht halt bei diesen ganzen, bei, bei allen anderen, Frameworks geht das nicht, ne. Die haben alle, die kennen alle nur Grids. Also ich glaub, die Amis, die Amis kennen nichts anderes als Grids. Ich frag mich warum, aber ist so. Und, das ist auch bei Foundation nicht anders.

Und, dann, kannst du aber bei Jaml zum Beispiel die, das Design einfach killen, indem du einfach nur eine Datei nicht in, nicht inkludierst oder halt löscht. Und dann, dann hast du kein Design. Das, das find ich prima, weil dann kann ich halt loslegen.

Oder ich nehm die Designdatei und habe die getrennt von dem Layout und, modifiziere meine Designdatei, ändere da die Farben, ändere da die Schriftgröße, ändere da die Abstände, ändere da drin dann alles und, dann sieht's auch, nach einigem, nach einiger Arbeit auch nicht mehr so aus wie die Vorlage. Da, da hab ich einfach 'ne, 'ne feinere Trennung. Das find ich wesentlich praktischer. Gut, kann man ja vielleicht bei Bootstrap und Foundation dann auf, SAS- oder LESS-Ebene machen.

Aber ich glaub, dass, der, der, die resultierende Größe der, der, des CSS ist einfach viel zu gigantisch.

Ja, und die Abhängigkeiten sind doch größer, als ich gedacht hab. Also ich hab am Anfang auch gedacht: Okay, jetzt lass ich mir irgendwie mal nur das CSS für die Buttons raus, weil ich nur die Buttons hübsch brauch. Und dann hat doch immer irgend 'ne Kleinteiligkeit gilt, weil irgendwelche Sachen, global definiert wurden und, die dann eben in dem, eigens generierten Button CSS nicht drin sind oder so.

Also ich stimm dir da schon zu, wenn, also ich bin auch eher der Freund von vielen kleinen Sachen, die eben genau das machen, was sie sollen und gar nicht viel mehr und, bin eher dafür, man, man stückelt sich das dann zusammen, so wie man's braucht, als dass man so diese eierlegende Wollmilchsau hat und stundenlang damit beschäftigt ist, um Sachen wieder rauszubekommen.

Also lieber, bisschen Zeit verwenden, um Funktionalität reinzubekommen, als viel Zeit drauf zu verwenden, Funktionalität rauszuschmeißen.

Definitiv, definitiv. Deswegen find ich den Ansatz bei, bei Jaml einfach wesentlich praktischer. Ich hab da 'ne, die, die absolute, Trennung zwischen dem, was wichtig ist und dem, was nett ist. Ja, also wichtig ist dann einfach nur die Base, beziehungsweise die Spezialdatei für die alten JEs. Die zwei, die zwei CSS-Dateien brauche ich, und mehr brauche ich nicht. Das ist YAML, fertig. Und, dies, das sind dann irgendwie zehn Kilobyte oder so.

Und, und alles andere, was dann wirklich, was da wirklich dazukommt, das ist mein Design und da kann ich die, den Vorschlag, den der Dirk Jesse gemacht hat, nehmen, aber ich muss es nicht. Kann mich da austoben, wie ich möchte. Und, ich hab dann diese, diese klare Trennung und, den, die hab ich halt bei dem Bootstrap nicht und ich weiß nicht, wie das bei Foundation ist. Ich glaub, da ist es wahrscheinlich, da ist es, genauso wie bei Bootstrap.

Also wenn ich da keine vernünftige Trennung habe, dann, dann ist das für mich einfach mehr Arbeit. Und ich hab zwar dann eventuell, einfach nur ganz schnell einen schönen Prototypen zusammengeschustert. Der Prototyp ist aber doch dann, eigentlich so eine Wegwerfware, oder? Und, also-

Ja, es ist dann halt wirklich ein Prototyp, ja.

Ja, aber es ist doch, es wär doch schöner, wenn ich einen Prototypen hätte, mit dem ich dann auch gleich weiterarbeiten kann. Also bei dem die, bei dem die, die Basis, meine HTML und mein CSS so gut ist, dass ich, den, den Prototypen gleich als erste Iteration, sehen kann und an dem gleich weiterarbeiten kann. Und das, sehe ich jetzt bei, Twitter Bootstrap, so nicht.

Zumindest nicht so einfach, ja.

Nö, also das-- Ich bin da kein großer Freund von, aber auf der anderen Seite, lieber das nehmen als schlecht selber geschrieben. Also man sollte sich einfach damit mal auseinandersetzen. Man sollte da, man sollte mal anfangen, damit zu arbeiten und dann, leckt man vielleicht Blut und, fängt dann an, sich damit genauer zu beschäftigen und kommt dann, kommt dann zu was anderem eventuell oder vielleicht auch einfach zu einer schlichteren Variante.

Oder man macht's dann gleich ganz schlicht, und springt dann auf HTML5 Boilerplate. Hast du das schon mal genutzt?

Nur als Inspiration. Also ich hab's nie komplett benutzt, sondern klau mir halt da Sachen raus. Also, ich guck, ich guck halt, was ich-

Du hast grade, du bist grade sehr schlecht zu er-- Ah ja, jetzt, jetzt kommst du ein bisschen besser rüber. Entschuldigung.

Okay, kein Problem. Ja-

Schon wieder schlecht. Schon wieder schlecht. Ich glaub, wir müssen mal kurz unterbrechen mit, mit unserem Freund Skype und, dann uns gleich noch mal wieder einwählen.

Okay, okay.

Einen Moment.

Diese technische Störung wurde Ihnen präsentiert von Skype.

So, da sind wir jetzt wieder. Nächster Versuch, nachdem uns Skype jetzt eben grade ein bisschen einen Strich durch die Rechnung gemacht hat. Ja, wir waren bei, HTML5 Boilerplate. Also du nutzt es mehr so als Inspiration, also quasi als, als Steinbruch, richtig?

Genau, ich guck halt, was, was ich für ein Problem hab und dann schaue ich, wie-- ob's bei HTML5 Boilerplate irgend 'ne Lösung dazu gibt und dann nehme ich aber auch nur spezifisch die Lösung. Also ich nehm nicht diese ganzen HTAccess-Files und, ja, keine Ahnung, was es noch alles gibt.

Ja, das finde ich 'ne, find ich eine gute Vorgehensweise. Ich wüsste jetzt auch nicht, was, warum ich das Gesamte nehmen sollte. Das Gesamte sowieso nicht. Also das ist, das ist ja wie bei eigentlich bei jedem, bei jedem Framework. Die geben dir erst mal alles und dann schmeißt du das raus, was du nicht brauchst, ne. Das ist eigentlich auch vernünftig.

Aber ich fand halt, also bei Boilerplate muss ich sagen, lässt sich's einfacher klauen wie zum Beispiel bei Bootstrap.

Ja. Ja gut, aber das ist, da kann man jetzt auch nicht wirklich vergleichen. Also der Boilerplate bietet dir ja nun gar nichts, um mit CSS wirklich, zu arbeiten, bis auf, bis auf die Normalisierung. Aber, pff, ja Gott, die haben sie sich ja auch nicht selber ausgedacht, sondern haben das Normalize einfach integriert als interessantes Projekt, wenn ich das richtig im Kopf habe. Und das ist ja auch okay so.

Also ich, ich glaub jetzt auch nicht, dass wir da jetzt noch ein weiteres, Framework brauchen, ne. Also ich, ich mach mir da immer einen Spaß mit dem Dirk Jesse draus. Wenn ich mal wieder über irgendein Grid-System gestolpert bin, schicke ich ihm den Link zu. Den kennt er dann meistens schon.

Und wir, und wir lachen uns dann mal wieder eine Runde drüber kaputt, dass es mal wieder einen 960 GS-Klon gibt, der wieder die Welt rettet, wo dann irgendein Magazin wieder drüber schreibt, wie toll das Ding doch ist. Dabei ist das auch nichts Besonderes. Also von dieser, von dieser Art Frameworks, die alle das Gleiche sind, gibt's ja schon mindestens hundert. Und da brauchen wir jetzt mit Boiler, HTML5 Boilerplate bräuchten wir jetzt nicht noch eins. Also. Ne?

Aber die, das, was die da so an, an Einzelideen haben, das ist schon interessant. Ich muss allerdings auch, gestehen, ich find, es fast noch interessanter, die, im, im GitHub Repository zu lesen bei denen. Also grad so, es gibt so manche Diskussionen um Einzel, um einzelne Details, die so richtig, das ist richtig irre, was da, sich Gedanken gemacht wird oder was die Leute für, für, für Wissen haben. Das ist echt fantastisch.

Also wenn du dir, wenn du mal guckst, was die diskutiert haben über den, die Einbindung von Conditional Comments, was da an, an, an Forschung auf einmal dahinter steckte, das war phänomenal. Also allein dafür, lohnt es sich schon, dieses Projekt mal genauer unter die Lupe zu nehmen. Also kurz gefasst: Wenn du, wenn du so einen Conditional Comment um das HTML-Element herum machst, dann, stört es den Internet Explorer, das, das Laden des CSS im Internet Explorer nicht.

Während wenn du es einfach, wenn du einfach so einen Conditional Comment in, in den Head reinschreibst, dann blockt es zumindestens im IE8 das Laden mal für kurze Zeit. Und wenn du aber nun mal einen leeren Conditional Comment dann reinschreibst, dann blockt's das Laden nicht. Das muss man erst mal alles herausfinden. Und das, weißt du, das stand dann so in, in, in, im GitHub, in der Diskussion zu 'nem, zu irgend'nem Commit drin oder zu einem Pull Request. Super.

Also allein dafür, ist dieses, dieses Projekt schon klasse.

Also da muss ich halt sagen, das schätze ich aus an dem HTML5 Boilerplate. Also es macht halt einen, einen sehr soliden Eindruck und man merkt, dass sich die Leute Gedanken dadrüber machen. Also es ist, wenn man da irgendwas raus, klaut, ist so ein böses Wort, wenn man sich davon etwas ausleiht, kann man davon ausgehen, dass es auch gut ist.

Ja, ja, es ist auf jeden Fall gut, gut durchdacht. Ob ich's haben will, ist eine andere Geschichte, aber es ist auf alle Fälle gut durchdacht. Definitiv. Ja. Nächster Punkt waren Template Engines.

Ja, ich glaub, da du die auch nicht nutzt, ist es bisschen schwierig, zu, drüber zu sprechen, weil es Front-End-Template-Engines sind und, ich hab bisher noch keinen wirklichen Verwendungszweck für so was gefunden. Also dass direkt per JavaScript das Frontend geändert wird anhand vom, also praktisch, logiklose Frontends.

Ja, hab ich zum Glück auch noch nicht gehabt. Wir haben halt beide noch nicht so richtig JavaScript-intensive Applikationen gebaut, ne. Was ich da, das Einzige, was, was, ja, was ich noch so interessant finde, ist, wenn ich mich richtig entsinne, ist diesen Mustache, gibt's das nicht nur für JavaScript, sondern auch für serverseitige Skriptsprachen.

Und dann find ich das schon wieder total klasse, wenn man sich, auf eine, Template-Sprache einigt, wenn man eine lernt, die man sowohl in PHP als auch in Ruby als auch in JavaScript nachher nutzen kann. Das find ich schon wieder cool, wenn man es gebrauchen kann.

Aber das, dadurch, dass es logiklos ist, ist es ziemlich schwierig zu benutzen oder ver-ver-versteh ich logiklos falsch?

Ich glaube, logiklos heißt einfach nur, dass du da keine Programmiermöglichkeiten drin hast, oder?

Ja, aber dann ist es ja schwierig. Also wenn ich nicht mal die Möglichkeit hab, irgendwie, 'nen Array durchzugehen und so was, find ich ziemlich schwierig.

Okay. Ja, also ich hab, da auch keine, keine Anwendung bislang gehabt. Genau, ich les hier gerade, Mustache kann man in Ruby, JavaScript, Python, Java, Dotnet, Action Script, Coffee Script, Node.js und so weiter und so fort. Und das ist sogar in C++, wenn man unbedingt möchte. Okay, nutzen wir beide nicht, also gehen wir bis zum, zum nächsten Punkt.

Ah, glaub, falls es jemand interessiert, bei GitHub schreiben und dann suchen wir uns jemanden, der davon Ahnung hat.

Ja, genau.

Wir versuchen halt gerade die ganzen, die ganzen In-Themen der letzten Monate mal durchzugehen und da ist es, definitiv auch 'n Punkt gewesen.

Es ist vielleicht auch einfach nur, selbst wenn wir uns nicht damit auskennen, für jemanden, anderes, also für einen der Hörer 'ne Möglichkeit, sich damit mal zu beschäftigen, weil es jetzt erst mal davon hört oder mal wieder dran erinnert wird.

Genau. Also auf alle Fälle mal angucken, Mustache oder Handlebars. Logiklose Frontend Templates.

Gut. Ja, Bildchen und noch kleinere Bildchen, Grafiken und Icons. Jo, das war, wär unser nächstes Thema. Sprites. Nutzt du die intensiv?

überhaupt nicht.

Ich hin und wieder. Es gibt einfach viele Momente, in denen es, gar nicht so praktisch ist. Also wenn, wenn die, die Implementierung eine, eines Icons es, für mich fast unmöglich macht, da, dann das Sprite zu nutzen, weil ich das Ganze im Hintergrund irgendwie nach rechts platzieren muss oder solche Scherze.

Ja. Also ich find's halt ätzend, erstens mal das Sprite zu erstellen, dann, wenn sich halt irgendwie was ändert, find ich's wahnsinnig umständlich.

Oh.

Und also ich versteh natürlich, dass man irgendwie ab 'ner gewissen, ab 'nem gewissen Grad an, an, Zugriffen, die man hat, dass man da versucht, eben Zugriffe zu sparen und eben nicht so viele Bilder laden will und die möglichst klein haben will, dann versteh ich das, aber, also bisher hab ich, noch nicht so wirklich an so High-Performance-Seiten gearbeitet, dass es für mich irgendwie wichtig wäre.

Mhm. Also für, das Erstellen der, der Seiten hat man ja 'n Grafiker. Und wenn man keinen zur Hand hat, muss man sich halt mal mit Compass auseinandersetzen. Das ist dann nämlich das Schöne, man kann bei, Compass, also diesem Zusatz-Framework für, für Sass, kann man Einzeldateien von Compass zu einem Sprite zusammensetzen lassen.

Und, nicht nur das, also nicht nur, dass, nicht nur, dass, man einfach Einzeldateien in einen Ordner reinschmeißt und der Inhalt dann zu 'nem Sprite wird, sondern Compass schreibt dann auch noch, dass das daraus resultierende CSS selber und gibt, vergibt Namen, vergibt die Positionen, alles. Alles das, was ansonsten ja total nervig ist. Es macht ja-

Dann sollte ich dafür vielleicht doch noch mal draufgucken, ja.

Ja, also das, das ist, total klasse. Denn was du dafür nur machen musst, ist neben ein paar kleinen Zeilen, Sass-Code oder Compass, dann die einzelnen Dateien in eine einzige, in einen, in einen Ordner reinschmeißen. Das kriegst du noch hin.

Das schaff ich noch.

Ne? Das schaffst du noch. Und dann, jo, und dann generiert der dir daraus dann ein, Sprite. Und, schreib das CSS selber und das find ich schon super. Dann macht's Spaß und dann macht's auch Sinn. Ansonsten, je größer das Ganze wird, umso, ätzender ist es ja, das ganze per Hand zu, zu Fuß zu machen. Und, grade so für das Ausmessen, der Positionen und der Größen nutz ich immer Sprite Cow. Kennst du das?

Nö.

Kennst du das?

Nö.

Nee? Also-

Sprite Cow.

Sprite Cow Org oder Com, ich weiß es nicht. Das ist 'ne simple Webseite, in die du, ein Bild reinziehst oder hochlädst und, dann wird dir dieses, Bild, dieses Sprite angezeigt und dann gehst du mit 'nem Markier, mit 'nem Markierungstool auf, auf eines dieser, Einzelgrafiken in dem Sprite, markierst das und dann wird dir dadrunter der, resultierende, der notwendige CSS-Code angezeigt. Also wie viel minus Pixel nach links, also horizontal oder vertikal du eingeben musst. Und das ist super.

Was natürlich auch trotzdem, viel Arbeit kostet, wenn du dann so, zwanzig, dreißig Sprites, also Einzelgrafiken in deinem Sprite hast, musst du dir alle einzeln notieren und, - -ne, angeben, während, da, da sind wir dann wieder bei der Frage: „Villa Riba und Villa Bacho", ne? Während, bei dem einen, du grade bei der, beim Drittel von Sprite Cow bist, sind die anderen schon fünfzehn Elemente weiter, weil sie das Ganze halt mit, Kompass geschrieben haben.

Ja, aber ansonsten geb ich dir recht, macht Sprites keinen Spaß, aber, ist durchaus 'ne, 'ne sinnvolle, A-Angelegenheit bei, bei Webseiten, die zu nutzen.

Da stellt sich die Frage, ja, weil w-wir machen ja, w-unter Grafiken und Icons kommt ja jetzt auch, als zweiter Punkt die Icon Fonts. Machen die die Sprites überflüssig? Benut-- Hast du bisher Sprites nur für so kleine Icons benutzt oder hast du auch so größere Sachen wie kleine Logos, so was mit reingepackt?

Beides. Also kommt wirklich drauf an, ja. Also alles, alles, was irgendwie 'n kleines Bildchen ist und, und, und so eingebunden ist, dass ich das auch tatsächlich vernünftig platzieren kann. Ja. Normalerweise, wenn ich jetzt, zum Beispiel Webseiten hab, bei denen ich auf 'n IE7 mal verzichten kann oder auf manche Details verzichten kann, dann, dann ist das sogar noch viel einfacher, weil ich dann mit, generiertem Content arbeiten kann, also mit, einfach so mit After oder Before.

Wobei im IE7, dem helf ich dann halt m-mit, mit JavaScript 'n bisschen auf die Beine und dann geht das auch. Dann, dann kann man auch, dann kann man auch so 'n Sprite nutzen, um, einzelne kleine Icons ein bisschen freier, in 'nem, in einem Modul zu, zu platzieren, indem man mit After und Before generierten Content erzeugt, und dem dann 'n Hintergrundbildchen gibt und das ist dann genau dieses eine Sprite, Element. Und da, da hab ich eigentlich immer nur mit Bildern gearbeitet.

Ich hab noch nie mit, mit so eigenen, mit selbst erstellten Fonts gearbeitet. Und das ist ja-

Echt nicht?

Nee, noch nie.

Weil, es gibt nämlich zum Beispiel auch mit Font Custom gibt's die Möglichkeit, genauso wie bei, Compass, sich, 'nen Icon Font selbst zu generieren. Also das Einzige, was man machen muss, ist, es SVG-Dateien in 'nen Ordner zu packen und der generiert einem dann praktisch den Icon Font draus.

Da, da hast du jetzt aber ein großes Wor, einen, einen großen Satz gelassen ausgesprochen. Das Einzige, was man tun muss, ist 'ne SVG-Datei da reinzupacken. Wenn ich, wenn ich das so dem geneigten Normal-Web, Webdesigner, in, in der, Agentur deiner Wahl in Frankfurt und Umgebung erzähle, dann guckt der mich blöd an.

Na ja, aber mit 'nem Vektorprogramm soll er ja umgehen können, oder?

Weiß ich nicht, ob die das können. Also ich bin mir da dessen nicht so richtig sicher. Photoshop und dann können die, Photoshop und dann können die auch meistens noch Photoshop. Und wenn sie das nicht können, dann können sie Photoshop.

Ah, weil, weil mit, mit Illustrator kann man ja zumindest dann 'n SVG-Export machen. Na ja, okay, aber trotzdem. Also es ist auf alle Fälle einfacher wie das Ganze mit 'nem fiesen Font-Editor zusammenzubauen.

Mhm. Okay.

Also sagen wir nicht einfach, sondern einfacher. Nein, aber ich bin, ich bin wirklich, also d-diese, diese ganzen Icon Fonts sind jetzt auch, seit letz-- oder Anfang letzten Jahres der, der Renner überhaupt und mit, Twitter Bootstrap kam ja dann auch das Font Awesome oder Awesome Font, keine Ahnung.

Awesome Font.

Und ich bin schon großer Fan davon, weil also d-d-der größte Vorteil ist eben, dass sie frei skalierbar sind. Was mich bei dem ganzen anderen Zeugs ziemlich nervt, weil du dann irgendwie fünf Bilder brauchst, in allen möglichen Größen. Si-sie sind beliebig eben einfärbbar, nicht beliebig, also so-solange halt nur einfarbig ist, Verläufe oder so was hat. Also sie haben halt alle Eigenschaften, die 'nen Text hat und für so, so kleine Icon-Geschichten ist es einfach ideal.

Ja, find ich auch. Also der, der, der Jess hat das ja bei YAML auch integriert für, glaub ich jedenfalls. Oder nee, er hatte, nee, der hat, der hatte noch, UTF-8, Codes, noch integriert für die Buttons.

Ah ja.

Das fand ich auch 'ne ganz pfiffige Geschichte. Mein, mein, ich, ich hatte mich, nachdem ich das so gelesen hatte mit den UTF-acht und dann später mit Font Awesome und, auch das, was du diese Kasten-Fonts, also überhaupt diese ganzen selbst erstellten Fonts. Nachdem ich das gelesen hatte, war ich erst total begeistert. Dann hab ich ja gedacht: Boah, super, da können wir ja so richtig viel machen.

Dann kam als erster, Knackpunkt, da, dass wir da nicht mit unterschiedlichen Farben und mit Verläufen und so arbeiten können.

Doch, natürlich geht das.

Oder? Nee.

Verläufe. Mit, mit CSS3 halt. Also alles, was halt irgendwie auch mit Text möglich ist-

Echt?

-verlaufstechnisch geht auch mit den Icons.

Okay, dann hab ich's nur falsch verstanden. Und was mich dann noch erst abgeschreckt hatte, das, das war, dass, dass die, na du, du gibst ja normalerweise so 'nen Buchstaben ein, der wird dann, und der wird dann umgewandelt in, in, in, in, in Icon, richtig?

Und, der wird dann aber auch, beim Screenreader vorgelesen und - Das, da hat jetzt aber dann, der Eric Eggers sich relativ, zügig drum gekümmert gehabt und, ist mittlerweile vor Kurzem noch 'nen zweiten, nen, 'nen neuen Artikel zu dem Thema geschrieben. Da gibt's wohl mittlerweile eine, eine gute Lösung, um das, um das zu verhindern.

Also es gibt wohl eine, so 'ne, so 'ne Art privaten Bereich innerhalb von Schriftdateien, in die man dann diese ganzen Icons reinschmeißen könnte und dann, dann lesen die Screenreader dann auch nichts vor, weil die brauchen das ja nun wirklich nicht vorlesen, ne? Also so 'n, so 'n Icon bringt da ja nix. Das ist ja für- Für Sehende ist das ja ganz niedlich, ist das ja ganz hilfreich. Nur für die ist es da. Aber, warum soll dann 'n Screenreader auf einmal X vorlesen, ja?

Nur weil da- Nur weil da das Icon von GitHub ist. Macht ja keinen Sinn.

Genau. Und da, das wäre eben der Punkt, das, das lebt aber im, im Bereich des-- oder nicht im Bereich, im Machbaren des Erstellers. Das heißt, das ist kein generelles Problem, sondern das kommt halt drauf an, wie sauber der Icon-Font-Bauer arbeitet. Also Font Awesome zum Beispiel, die benutzen den privaten Unicode-Bereich. Das ist einfach, das sind Unicode-Zeichen, die eben vom Betriebssystem nicht vordefiniert sind. Das heißt, da gibt's auch gar nix vorzulesen.

Und, wenn die benutzt werden, dann wird da halt eben komplett von allen möglichen Screenreadern ignoriert und dann funktioniert das auch super.

Könnt ich mir eigentlich auch 'nen Font nehmen und die einzelnen, Inhalte einfach nur innerhalb dieses, dieses, dieser Datei in den privaten Bereich verschieben? Ginge das? Also gibt's da Editoren für, mit denen man das machen kann? Hab ja keine Ahnung, wie so was aufgebaut ist.

Also ich hab, bisher auch nur sehr, also ich hab nur an der Oberfläche gekratzt. Also ich hab bisher auch nur, mit 'nem SVE, SVG-Editor die, mir eben die Icons erstellt und dann gesagt, für welchen Unicode, also für welchen Unicode sie benutzt werden sollen und hab die dann rausrendern lassen. Mehr auch noch nicht.

Aber also prinzipiell ist es sicherlich möglich zu sagen, man nimmt jetzt 'ne normale Schriftart her und, lässt das A jetzt nicht aufm A erscheinen, sondern auf 'nem ganz anderen Code.

Also ich, stelle schon fest, ich muss mich da doch noch mal genauer mit auseinandersetzen. Doch. Also da gibt's ja auch massig, gibt's ja massig in dem Bereich mittlerweile. Also ich find das schon irre.

Also was mich auch bisschen nervt, ist, dass die, dass da wenig Kreativität herrscht. Also das, ich mach mich da so bisschen drüber lustig, wie ihr über die Grid-Systeme. Hab ich's Gefühl, es kommt irgendwie jede, jede Woche 'nen neues Icon-Set raus, was aber wieder genau die gleichen Icons setzt wie irgend 'n anderes. Bloß 'ne, 'ne Kante ist irgendwie bisschen anders oder das eine ist bisschen runder als das andere, aber prinzipiell stellen sie alles das Gleiche dar.

Also es gibt halt 'nen Ordner und 'nen Share-Icon und 'nen RSS-Icon und 'nen Häuschen und so weiter. Also es ist wenig Kreativität da. Also manche sind jetzt hergegangen und haben zum Beispiel auch Smileys gemacht.

Juhu.

Was ist sonst nett. Yeah, endlich mal.

Juhu.

Nein, aber also zumindest mal was bisschen anderes und nicht immer das Gleiche. Also Font Awesome ist jetzt da, das macht's ganz gut. Mal für 'n paar andere Anwendungsfälle jetzt noch was suchen. Also was, was auch zum Beispiel ganz cool ist, es gibt auch wieder 'nen paar, die, Social Ne, Social Network Icons als, als Font bringen. Was gibt's denn noch für Geschichten?

Da guck ich immer drum herum. Diese Social-Dingeskirchen-Dinger, die gehen mir immer so auf den Keks. Aber die Leute wollen's ja.

Ja. Die Leute brauchen ein Google+ und ein Twitter und ein Facebook.

Ja. Na ja, gut. Anderes Thema. -

Ja, auf alle Fälle find ich sie eben für so, für so kleine Geschichten ganz cool, weil sie sich auch dem Text anpassen. Macht Spaß, sollte man sich auf alle Fälle mal angucken. Und es ist verdammt einfach, so was selber zu erstellen.

Ja, mit diesem Font Custom oder wie?

Entweder das oder es gibt so Anleitungen, wie man mit 'nem, SVG-Editor ganz einfach den auch selber erstellen kann. Ich weiß jetzt nicht, wie er heißt. Kann ich mal in die Show Notes noch mit reinpacken. Also es ist, ich bin ja überhaupt nicht der Gestalter und Designer und so weiter und selbst für mich war's relativ einfach. Kann man mal ausprobieren.

Ja, da hab ich definitiv noch, ein Feld, zu entdecken. Ja, ich find's, ich find das, find das durchaus, alles, was mich, dazu in die Lage versetzt, auf Bilder zu verzichten und das Ganze auch noch, ja, so flexibel wie möglich realisieren lässt, hat sofort meine Sympathie. Also wenn ich, wenn ich auf so, so Icons verzichten kann, wie, ja, Edit oder Speichern oder was weiß ich so was, ne. Oder einfach nur so 'n Haken. Wenn ich darauf verzichten kann, dann bin ich, bin ich glei, sofort begeistert.

Ich will halt nur, auch 'ne Lösung haben, die möglichst, schmal ist. Weil, wenn ich zum Beispiel einfach nur so, sagen wir mal, ich brauche nur zehn, zehn kleine Icons, um 'ne Applikation, auszustatten. Wenn ich diese zehn Icons nehme und selbst in vierfacher Größe oder fünffacher Größe implementiere, und nur die, dann einfüge in meine Webseite und bin damit vielleicht immer noch, um, um den Faktor zehn kleiner als so 'ne Schriftdatei, dann hat die Schriftdatei natürlich bei mir verloren, ne.

Also wenn du dir jetzt mal Font Awesome anguckst-

Ja, natürlich.

Da sind ja gefühlte zwei Millionen Icons drin, ne. Wie viel sind's? Zweihundertneunundvierzig. Zweihundertneunundvierzig Icons. Wer braucht bitte schön zweihundertneunundvierzig Icons? Wenn wir uns mal drauf, wenn wir uns drauf, drauf einigen können, dass wir vielleicht zwanzig brauchen, dann bräuchte ich jetzt zweihundertneunundzwanzig nicht. Kann ich die dann rausschmeißen oder muss ich die mitladen? Und, haben die jetzt 'n Gewicht oder fällt das nicht ins Gewicht?

Das, das sind noch so die Sachen, die für mich, noch interessant wären.

Kommt alles. Also es gibt mittlerweile auch so Custom Tools, wo du sagen kannst, ich will nur die zehn Icons von Font Awesome, dann werden eben nur die rausgerechnet und so weiter. Also es ist grad alles im Kommen. Da passiert sicherlich auch noch 'ne ganze Menge.

Aber wenn du mal sich mal so diese Font Awesome-Seite anguckt, da sind schon geile Sachen dabei. Das sieht schon richtig super aus und die kann man auch wirklich, gut benutzen, also als, als Icons, auf 'nem, auf 'nem Button. Also das macht schon 'n schlanken Fuß, find ich schon nicht schlecht. Also das-

Und sie funktionieren sogar im IE sechs.

Ja, ist das nicht irre? Du musst dir jetzt den Mund auswaschen. Du hast das, Unwort gesagt. Ja, das ist schon toll.

Als Überleitung bekommen.

Nee, schon, ist schon klasse. Das ist wirklich richtig gut. Ja, der Browser, dessen Name nicht genannt werden darf, weißt du doch.

Nein, ich meinte als Überleitung für-

Ach so.

Unseren letzten Punkt.

Vorletzten oder so. The browser who shall not be named. Ja, gut, wir, wir haben natürlich jetzt, den Nachteil, wir haben, wir sind beide, Macjoten. Wir sind, arbeiten beide auf 'm Mac. Also wir können gar nicht sagen, dass unser Arbeitsbrowser 'n IE ist. Was, hast du, hast du einen dezidierten Arbeitsbrowser? Und wenn ja, welchen?

Ich bin wieder zu Safari gewechselt, seitdem dieses ganze, iCloud-Gedöns gekommen ist.

Echt, das nutzt du? Du, du nutzt das? Ah ja, okay. Dann du, dann bist du der eine Nutzer.

Ja. Also ich find's halt riesig mit der Leseliste und, und den, den gesharten, Bookmarks und so weiter. Brauch ich kein Read it later mehr und so Geschichten. Passt alles. Und, mittlerweile sind ja diese ganzen Developer, also mit dem letzten Safari-Update kann man halt auch endlich mal die Developer Tools benutzen. Also das war vor, vorhin grausam.

Mhm. Also für mich ist ja der Safari so was wie der IE. Die sind etwa, die, die sind etwa, die sind etwa genauso schnell in der Weiterentwicklung. Also das war ja, es war ja mal anders, aber die, die binden das ja a-offensichtlich mittlerweile auch so an den, an den, an die, Betriebssystem-Releases, nur dass die halt beim, beim Mac 'n bisschen schneller kommen. Also ich nutz den eigentlich gar nicht. Nö, ich hab das mal 'ne kurz kurze Zeit, nutz den gar nicht.

Aber ich, mittlerweile mach ich so 'ne Unterscheidung zwischen, Recherche und einseitigem Arbeitstool. Ich hab früher nur Firefox genutzt und, also im Wesentlichen wegen erst der Web Developer Toolbar und dann später Firebug. Dann hab ich irgendwann mal, da wurde der irgendwann aber auch so langsam durch die ganzen Extensions, die ihn ja überhaupt erst so reizvoll gemacht haben, dass ich, Firefox so gut wie gar nicht mehr benutzt hab.

Aber ich hab, bin nie so richtig warm geworden mit dem, mit den Developer Tools bei Chrome, oder bei, Safari. Bin ich nie so warm geworden. Und mittlerweile, lese ich, oder arbeite ich also inhaltlich, nur in Chrome. Und, aber so Webseiten checken, was das angeht, das mach ich fast ausschließlich mit, mit Firefox.

Was mich an dem Firefox bisschen stört, ist dieses eigene, die, die eigenen Debug-Sachen und, Developer Tools.

Die stören dich?

Nee, die sind nicht so schick wie, wie, -

Die sind grade schick.

Ja, aber nicht so schick wie, ah, vorhin hast du's erwähnt,, Firebug. Ich fand Firebug großartig und ich hab mich so an den Firebug gewöhnt. Und, irgendwie komm ich mit den, den jetzt fest implementierten Developer-Sachen nicht, m-m-mit denen werd ich nicht warm.

Also ich find Firebug auch richtig schön, aber ich gewöhne mich immer mehr an diese Tools bei, bei Firefox. Also grad für was Schnelles, da, gewöhn ich mich immer mehr dran. Aber was so richtig klasse ist, das ist, Browsergrößen testen. Hast du das mal ausprobiert?

Das ist aber dann in, in der Web Developer Toolbar, oder?

Nee, nee, das ist, seit, uh, Firefox fünfzehn oder so, unter Webentwickler Bildschirmgrößen testen.

Ah, okay.

Das musste man machen. Also aufm, aufm Mac ist das, was ist das? Alt Command M. Also einfach mal, einfach mal so, so wild mit beiden Händen unten draufhauen. Alt Command M, Bildschirmgrößen testen. Und dann, dann öff-, dann öffnet sich diese, die Webseite in 'nem kleinen Bereich, den du modifizieren kannst und kannst dann, so typische Größen von Smartphones oder, oder von Tablets testen.

Kannst du, kannst du auch selber modifizieren die Größe und kannst auch die Ausrichtung, ändern, also mal Landscape und mal Porträtmodus. Und, das Schicke daran ist, dass auch die dafür passenden Media Queries dann geworfen werden.

Ah, okay.

Du hast zwar dann immer noch keine Simulation, wie das auf dem Firefox auf Android aussieht. Ne, weil die ganzen, die, die, die ganzen betriebssystemspezifischen, Elemente wie Formulare, Elemente natürlich nicht generiert werden. Aber du kannst schon mal austesten, ob, deine Media Query, die du, die du hoffentlich nutzt, dann auch, vernünftig reagiert oder ob das Ganze, wild aussieht. Das find ich total klasse. Das, hab ich in der letzten Zeit, nur genutzt.

Und da, da ist der, ist der, das kannst du zwar auch mit Chrome machen, ich schätze mal auch mit Safari, nur der Weg dorthin ist, nicht so schön bequem. Der ist, gut versteckt. Und, ich find, also was das angeht, die, alles, was es an Entwicklertools gibt bei, bei Firefox immer noch sehr viel durchdachter und viel besser als, als bei Chrome. Das macht mir immer noch viel mehr Spaß. Aber, oh Gott, ist halt Geschmackssache, ne.

Ja. Also, aber man muss schon sagen, es ist nicht mehr, nicht mehr ganz so schlimm. Also es nähert sich alles an. Also man hat, nahezu in jedem Brow-Browser mittlerweile einigermaßen gescheite Developer Tools. Das heißt, man kann eigentlich schon mit jedem entwickeln. Mit jedem auf dem Mac erhältlichen Browser kann man schon entwickeln.

Oh ja, klar. Ja, weil wer immer noch im Hintertreffen ist, das ist der Internet Explodierer, aber, kennen wir ja nicht anders. Die sind zwar auch nicht so richtig schlecht, die, Entwicklertools, aber die kommen, an keinen, an keine Entwicklertools der anderen ran. Also auch nicht an-

Was ich sagen muss, wo ich großer Fan von bin, ist mit dem, oh, was ist grade aktuell, acht oder so was? Neun schon? Internet Explorer?

Zehn.

Zehn sogar? Oh Mann.

Du bist aber echt, ganz hart, hart am Puls der Zeit, ne. Unser Internet Explorer acht.

Okay, okay. Aber dass man mittlerweile, diese Kompatibilität direkt dort einstellen kann und, früher hat man ja irgendwie noch irgendwelche fiesen Tools installieren müssen, dass man IE sechs bis was oder IE fünf bis irgendwie sieben auf einem Rechner hat, haben können. Mittlerweile kann man das ja alles schön simulieren und das funktioniert.

Ja, aber da bin ich, ja, bin ich aber ganz vorsichtig. Also ich hab zu oft es schon erlebt, dass, genau diese Simulation, in die Hose gegangen ist. Also das braucht's nicht, echt nicht. Die, da bin ich eher vorsichtig. Da, da nutz ich lieber 'ne virtuelle Maschine mit 'nem richtig fertig, installierten, Browser. Das ist zwar eklig, aber ich mein, das ist auch nicht anders bei, beim Safari, ne. Da, da kannst du auch nicht so einfach mehrere Varianten nebeneinander testen. Das ist halt so.

Wir können halt nur, wir können nur froh sein, dass Safari nicht so eine Verbreitung hat wie, wie andere Browser. Sonst müssten wir die alten Versionen auch noch alle testen.

Nichts über den Safari. So schlimm ist er doch gar nicht.

Nee, ich, ich find's einfach nur immer, eklig, dass, dass es Browser gibt, die so eng verzahnt sind mit dem Betriebssystem.

Ja, alles stimmt.

Also bei, also Microsoft ist dafür verprügelt worden ohne Ende und, und, bei Apple sagen sie halt: „Aber ja, Sachen, na, ist doch Apple, die sind doch im Grunde genommen gut."

Ist doch WebKit.

Was, was ja, was ja nicht stimmt, aber, hm, sind halt nur anders doof. Und mich ärgert das einfach, weil, weil's keine, keine grundlegende Notwendigkeit dafür gäb. Und, ich muss halt diesen ganzen Kram dann testen, genauso wie du. Ich muss das ja dann einfach testen. Ich muss sicherstellen, dass das Ganze funktioniert. Und ich kann da immer nur froh sein, dass es keinen Kunden bislang gab, der, gewünscht hat, dass es auch in der, noch in der fünf Jahre alten Safari-Version noch getestet wird.

Weil dann bist du nämlich dabei, noch, am besten noch irgendwelche alten, Mac-Computer zu suchen, auf denen du noch irgendein OS X 10.3 oder so was, was installieren könnt, ne.

Aber du weißt ja, ich test ja auch nicht. Bei mir testet der User.

Ja, manchmal muss man da auch, entspannter sein. Nur weißt du, wenn du dann, die, wenn der Kunde so was dann, tatsächlich auch nachprüft und, du dann im, im Vertrag auch so was, abgemacht hast.

Pixelgenau ist dies eigentlich auf allen Browsern.

Ja gut, das, also wenn ich, wenn, wenn ich jetzt persönlich nicht als, als Untervertragler quasi bei 'ner Agentur, sondern ich persönlich, 'n Kundenkontakt habe, dann gibt's so was bei mir nicht. Wenn der Kunde so was haben will, dann soll er sich jemand anderen suchen. Da bin ich, da bin ich mittlerweile eisenhart, weil ich, echt keinen Bock auf, auf so einen Stress hab. Also so, sowas wie die Pixel genau in, sagen wir mal, zehn verschiedenen Browsern.

Nee, nee, dann soll sich jemand anders den Tag damit versauen. So viel können die mir gar nicht geben. Das muss es echt nicht sein. Alter, da bist du nachher in Zweifelsfalle dabei, zwei Wochen zu entwickeln und zwei Monate zu testen. Was soll denn das? Dafür, dass es niemand erkennt. Denn we-- denn wer surft schon mit zwei Browsern parallel nebeneinander außer dir? Kein normaler Mensch tut so etwas.

Ja, also, aber dann, hast du bei dir auch eine Einheit zwischen Arbeitsbrowser und, und Surfbrowser oder wie?

Ja, also ich muss sagen, ich verwende schon häufig auch den, den Firefox. Also gerade zum Entwickeln, wie du schon sagst, es die, die, die, besten Tools und die umfangreichsten Plugins kriegt man halt immer noch für den Firefox. Also der Chrome schließt immer mehr auf, aber also der Firefox auch bisher finde ich, ja, also er steht hinten an.

Ich frag mich immer noch, wie wir so vor 2004 oder 2005 haben Web-Webseiten entwickeln können. Ich kann mir das gar nicht mehr vorstellen, wie das damals war, wie wir herausgefunden haben, warum etwas nicht funktionierte. Damals gab's keine Web Developer Toolbar. Wann kam denn Firebug raus? 2007 oder so oder 2006. Also-

Grad JavaScript, war-

Das ist unfassbar.

Echte, ja.

Und jedes Mal, weißt du, wenn ich jedes Mal, wenn ich auf so einem, mobilen Endgerät teste, dann möchte ich so mit der rechten Maustaste klicken und sagen, in Firebug untersuchen.

Warum nimmt der jetzt das DSS hier nicht?

Genau, ich möcht dann immer so klicken und sagen, in Firebug untersuchen, ist dann nicht. Und ich bin jedes Mal wieder entnervt, dass es das nicht gibt. Gut, wir sollten mal so langsam ein bisschen schneller machen. Ich hab bei mir festgestellt, dass ich unheimlich viele Hilfeseiten immer wieder ansurfe.

Ich würde jetzt ungerne alle aufzählen, die, die ich so nutze, aber es gibt so ein paar, die ich, grundsätzlich total wichtig finde, die jeder, können, kennen sollte und die jeder auch, fast täglich ansurfen sollte. Also "Can I use?" zum Beispiel. Wenn ich irgendetwas, mit der CSS3 schreibe, muss ich erst mal in meinen Augen nachchecken, ob's denn genügend Browser gibt, die das Ganze verstehen.

Und, das, mit der "Can I use?" kann ich danach, vollziehen, welche Techniken von welchen Browsern in welcher Version unterstützt werden oder ob überhaupt gar nicht. Das find ich immer total hilfreich. Nutzt du das auch oder hast du dafür auch deine-

Nee, ich hör, ich hör dir gerade gespannt zu und ruf die Seiten parallel auf, weil ich glaube, die von den verlinkten kenne ich keine.

Ah, okay. Und dann, was ich genauso klasse finde, ist, HTML5 please.

Ah doch, den, den, das kenne ich, ja.

Was, bezeichnenderweise nicht nur HTML5, sondern auch CSS3 beinhaltet. Auch 'ne sehr schöne Möglichkeit, um mal rauszufinden, ob eine Technik, die man nutzen möchte, gut genug vertreten ist in allen Browsern. Und, wenn nein, ob man sie denn überhaupt gar nicht nutzen sollte oder ob's irgendwelche JavaScript Polyfills gibt, mit denen man, versprengte Browser zur Mitarbeit bewegen könnte.

Also wenn du mal so aufrufst, ne, dann siehst du zum Beispiel Box Reflection, da steht ganz fett dahinter Avoid. Dann klickst du das auf und dann wird dir kurz erklärt, warum du das, unterlassen solltest. Oder Box Shadow steht Caution. Handle with care. Ne, und warum? Dann kannst du noch nachfragen, kannst du noch, klicken, wie viel Prozent der Browser das unterstützen oder wo die, die Haken dabei sind. Das find ich total klasse.

Das find ich total wichtig, weil wir einfach in, uns in einer, Phase befinden, wo wir mit, Tech, mit, uns mit neuen Techniken und mit alten Browsern, rumschlagen müssen. Ne, neue Techniken, die noch nicht überall implementiert sind und alte Browser, die mit den neuen Techniken generell nichts anfangen können. Und dann gibt's da super Hinweise. Also das find ich 'ne total wichtige Seite. Den CSS3 Click Chart, ja, hatte ich mal dazu geschrieben, kann man auch nutzen.

Und was mich in der letzten Zeit auch sehr, was mir sehr geholfen hat, bis ich mir mein eigenes, SAS-Mix in geschrieben habe, das ist eine Seite, bei der man RGBA-Werte in den passenden Filterwert für alte Internet Explorer umwandeln kann. Denn man kann, man kann, über einen, über einen Verlaufsfilter, RGBA auch im IE acht, sieben und sechs, simulieren.

Ach krass.

Ja, ne? Das ist total cool, weil der, der, der Gag ist, der, dieser Verlaufsfilter hat nicht nur einfach einen Farbwert, sondern er hat auch einen Transparenzwert. Und wenn du dem Browser sagst, er soll mal bitte einen Verlauf von schwarz in schwarz machen, macht er das ja auch. Der fragt da ja nicht nach, ob das Ganze jetzt einen Sinn hat oder nicht.

Da macht er halt einen Verlauf von schwarz in schwarz und du schreibst du noch dazu, dass dieser Verlauf bitte mit einer Transparenz von fünfzig Prozent sein soll. Und schon, hast du deinen fünfzig Prozent schwarz RGBA Code und den gibst du dem IE, dem alten IE mit, IE acht, sieben und sechs.

Und, da, da es halt nicht einfach ist herauszufinden, was der RGBA-Wert in, in der speziellen, Notation für 'n IE, dann für, für 'n Buchstaben-Zahlen-Kombination hat, brauchen wir halt entweder einen mathematischen Taschenrechner, oder halt diese Webseite. Da gibt man oben den RGBA-Wert ein und unten kommt dafür dann- Der, der IE-Farbwert raus und dann gibt's unten noch einen Beispiel, Code, wie man das Ganze einzubinden hat. Und die Seite finde ich, finde ich total klasse.

Ich lerne heute Abend auch sehr viel.

Das freut mich. Also die, nee, also die Seite finde ich total wichtig. Die brauche ich auch immer. Genauso wie halt so was wie die API von, von jQuery und wo ich auch, fast täglich drauf gehe, kann ich nur empfehlen, ist MDN, also die, das Microsoft, das Mozilla Developer Network.

Wolltest du Microsoft sagen?

Ja, ja,, bei denen heißt MSDN. Und ist auch sehr empfehlenswert. Das ist, ist zwar nah an Augenkrebs, aber es ist auch sehr empfehlenswert, sehr, inhalts, reich, aber halt nicht so aufgebaut wie bei, bei Mozilla, weil denn Mozilla bietet da eigentlich eine, eine super, herstellerneutrale Dokumentation von HTML, CSS und JavaScript und bietet auch noch zusätzlich, Dokumentation für die eigenen, Mozilla Mods Prefixed CSS-Eigenschaften und auch für so manche WebKit-Eigenschaft.

Und beim Internet Explorer findest du da einfach unheimlich viele Infos über deren speziellen alte Filter, die es jetzt ja mittlerweile seit IE zehn auch nicht mehr gibt, und, über so einige Spezial-, Fälle beim IE. Da findest du halt auch sehr viel. Aber MDN, das, da bin ich immer wieder dabei, nachzuschlagen. Das ist wirklich gut. Da wird ja jetzt mit Webplattform.org wird ja jetzt versucht was-

Genau, wollte ich gerade sagen.

Ja. Ja gut, aber die, also die, bei Webplatform, Plattform haben sie ja schon Informationen von so einigen Browserherstellern eingepflegt, aber das ist ja noch im Werden. Da ist ja- Da, da ist ja noch viel zu tun.

Wirkt so ein bisschen wie der Nachfolger von Self HTML.

Oh, das wäre jetzt aber sehr viel Bauchstreicheln für Self HTML. Ja gut, also das, das ist auch so eine Sache, so, so schön es war, damit zu lernen, würde ich heute jedem davon abraten und ich tue das auch immer aktiv, da noch hinzugehen, weil die Information einfach schon extrem veraltet ist.

Ja, das stimmt natürlich. Ja.

Es ist zwar schade, dass es, keine gleichwertige deutsche Dokumentation mehr gibt, aber ich denke mir, wer das professionell betreibt, diesen Job und nicht mal Englisch lesen kann, der sollte sowieso sich mal hinterfragen. Ne, es werden überall noch Fachkräfte in allen möglichen anderen Bereichen gesucht, denke ich mir. Oder es gibt Englischkurse. Also man muss das einfach lernen, ja, lesen. Und Webplattform.org, ja, also ich, ich gehe immer noch zu, zu MDN.

Aber Web, Webplattform.org, da wird ja jetzt auch, fleißig dran gearbeitet. Anfang Februar gibt's ja auch einen, einen, so einen Doc Sprint oder wie sich das nennt, wo versucht wird, die Dokumentation ein bisschen aufzupolieren und, neu, neue Inhalte einzupflegen. Gibt's in Ber-

Ja, das haben sie immer wieder mal. Ja.

Ja, gibt's jetzt in Berlin.

Ah, sogar.

Ja, kann ich leider nicht, weil das das Wochenende, das Karnevalswochenende ist und wir kriegen Besuch. Die Berliner kennen, interessiert sich natürlich nicht für, für Karneval, was ich, was ich durchaus verstehe. Ja, an dem Wochenende passiert das in Berlin. Ja, also das sind so ganz wichtige Info, Infoseiten. Es gibt natürlich noch so ein paar mehr. DocHub finde ich zum Beispiel auch eine sehr interessante Sache. Habe ich ganz vergessen zu, zu notieren. DocHub Punkt io.

Da, wird, werden die Informationen alle aus MDN rausgezogen und man kann- Kann dann über CSS, HTML, JavaScript, das DOM, sogar noch über jQuery, PHP und Python, sich informieren und, hat dann links einfach nur, eine Liste der Elemente oder Eigenschaften und, bekommt dann rechts den, die, die Inhalte, ohne großen Designschnickschnack präsentiert. Also das ist eine sehr, schnelle-

Open Strip.

Ja, wahrscheinlich. Das ist eine sehr, schnelle Möglichkeit, um sich zu informieren. Finde ich auch, wirklich brillant. Und, boah, das sind so die, die wichtigsten Geschichten. Stack Overflow ist natürlich immer gut, ne. Stackoverflow.com mal zu durchsuchen. Ist der Hammer, was es da so gibt. Das, ist schon spannend. Und, für CSS3 fällt mir noch ein CSS3-files.com, das macht ein Österreicher.

Und, das ist eine sehr ausführliche Dokumentation, von allem, was sich in irgendeiner Form um CSS3 dreht. Ich sollte das, glaube ich, auch noch mal eintragen. Ja. Weißt du noch irgendwas? Oder nicht so viel?

Nee, ich bin da erst noch am Reinwachsen.

Ah ja, okay.

Bin noch nicht so lange so tief im, im Frontend mit dabei. Also bisher hauptsächlich auf den, auf der semantischen Schiene wegen Eigeninteresse und jetzt erst seit Kurzem auch beruflich. Und deswegen werde ich mir die Liste danach dann auch anschauen.

Mach dat. Ja, dann, hast du noch, irgendein anderes, The-Thema? Ach so, genau, mir, mir ist noch eine Sache, aufgefallen, als ich drüber nachgedacht habe, mit welchen Tools ich so arbeite, dass ich in der letzten Zeit, sagen wir mal im letzten Jahr, extrem viel mit Cloud Tools arbeite. Also ich habe schon, ganze Kundenprojekte zum Beispiel nur, in, Google Docs abgefeiert. Und muss sagen, das ist klasse.

Wenn du, ne, also du hast in, in, in Google Docs kannst du quasi 'n Ticket-Tool nachbilden, indem du anfängst, alles mögliche zu dokumentieren oder Anforderungen zu schreiben, und Kommenta, mit in Kommentaren diskutierst. Das geht, das geht total super. Das geht, intuitiver als diese ganzen Ticket-Tools. Du kannst, schneller damit arbeiten.

Also ich hatte auch schon Ticket-Tools, bei denen ich,, zwei Felder oder drei Felder eigentlich nur ausfüllen musste, aber es wurden mir so etwa dreißig Felder zum Ausfüllen, präsentiert. Ne? Und, das macht natürlich wenig Spaß und bei, bei, bei so Google Doc, da schreibst du halt deine einzelnen Absätze oder auch Listenpunkte. Kannst ja Absätze oder auch Überschriften noch einfügen und, kannst im Zweifelsfall 'n Screenshot einfügen. Hast alles so auf einer Seite.

Kannst die als PDF ausgeben, kannst das Ganze kommentieren, kannst in den Kommen, in den Kommentaren diskutieren. Also ich find das super und vor allen Dingen, es ist, die wenigsten Kunden sind ja nur wirklich dazu, geistig, bereit, geistig moralisch dazu bereit, sich mit Ticket-Tools auseinanderzusetzen. Ne? Und die kennen, die kennen halt ihr Word und, fertig.

Und, bevor ich dann anfange, so 'n E-Mail-Massaker zu machen, wo die mir dann ständig irgend 'n Word-Dokument zuschicken, und wir dann mit, Überarbeitungsmarkierungen arbeiten, hab ich, dann relativ schnell angefangen, mit das Ganze in Google Docs rüberzuziehen. Ich bin damit echt, zufrieden.

Nutzt du auch diese, wie heißt denn, Google Files heißt's nicht. Wie heißt denn-

Google Drive.

Google Drive, weil, soviel ich weiß, haben sie das ziemlich, nett kombiniert, oder? Du hast ja auch alles, was du eben in deinem Google Docs hast, kannst du auch über Google Drive syncen.

Ja, aber der, der, der, die letzten beiden Jobs, bei denen ich so was gemacht habe, sind noch vor der Einführung von Google Drive gewesen. Ne? Und, ich hab ansonsten, der, der Letzte, mit dem ich das gemacht hab, war der Herr Gesse für seine Firma, für so den Verlag, in dem er arbeitet. Und, da ich mit dem sowieso 'n eigenen Ordner bei Dropbox habe, haben wir dann, wenn wir Dateien ausgetauscht haben- -, über Dropbox das da, das Ganze gemacht.

Das wär ja dann noch die Alternative, aber im Normalfall brauche ich so was dann eher nicht für Dateien auszutauschen, sondern um Dokumentation, an der Dokumentation zu arbeiten oder um, ja, um Fehler zu dokumentieren, so was. Und das fand ich total praktisch.

Ich fand die Kombination recht schick, dass du zwar alles online editieren kannst, aber auch praktisch gleichzeitig, dass das File mit deinem, mit deinem Filesystem am Rechner syncen kannst.

Ach so, ja klar. Das ist jetzt automatisch der Fall.

Du editierst es in der Firma, genau, du editierst es in der Firma direkt im Browser und hast es dann, wenn du zu Hause bist, auch lokal als Doc-File auf der Platte liegen oder so.

Richtig, ja.

Das find ich auch 'ne ganz schicke Kombi.

Ja, das ist jetzt richtig klasse. Das, das stimmt, ja. Also das ist der eine Punkt, wo ich jetzt immer mehr in der Cloud arbeite und, aber wo ich so richtig intensiv in der Cloud arbeite, weil ich ja auch, Schulungen, halte. Das, das sind so, so Sachen wie JS Bin oder JS Fiddle. Hast du mit so was schon mal gearbeitet?

Eher weniger. Also-

Also das sind so-

Ich seh's immer wieder als, als, als Demos von, von anderen- -die eben ihren JavaScript Code dann eben gleich präsentieren.

Genau und du hast ja den großen Vorteil, du hast nicht nur bei 'ner, also ich könnt ja, ich könnt ja jederzeit auch 'ne Testseite erstellen und die bei mir auf den Server hochladen und dann kann jeder, sich das anschauen und, beeindruckt sein oder abgestoßen. Aber du kommst ja dann, schwierig an den Code ran. Du müsstest zum Beispiel das JavaScript und das CSS immer alles direkt in die Seite reinschreiben, oder du musst dann einzelne Dateien aufrufen.

Du musst dir den Quellcode immer separat anschauen und du kannst ihn halt auch nicht direkt editieren. Du kannst nichts direkt daran arbeiten, sondern musst immer lokal was arbeiten und dann auf den Server hochladen. Und, diese, diese Dinger, wie, was ich so nutze, das ist im Wesentlichen JS Fiddle und für schnelle, Demos, wie zum Beispiel in meinem Uni-Kurs, nutze ich dann mal JS Bin.

Diese, diese Tools, ermöglichen es dir, im Browser selber in einer Umgebung, die so ähnlich aussieht wie 'n Editor, Code reinzuschreiben, der dann sofort, angezeigt wird, der dann da umgesetzt wird und man kann mit anderen zusammenarbeiten. Man kann,, das, ich könnte dir 'nen, 'nen Code schicken und du könntest den verändern.

Und ich kann dann, anhand der URL, die sich dann geändert hat, kann ich mir dann deine Änderungen anschauen, und, und bewerten und entweder übernehmen oder wieder weiterverändern. Wir können also an einem, an einem Objekt immer arbeiten. Die Tools funktionieren im, im Detail schon unterschiedlich, aber das ist so im Prinzip der Gag. Und, so was wie JS, also JS Bin zum Beispiel, genauso wie Debled von der Lea Vu, haben den großen Vorteil, dass sie sofort darauf reagieren, was du tust.

Ja. Also ich, grad in dem Fall, den du genannt hast, grade wenn du irgendwie was präsentierst, wenn du vor 'ner Klasse oder vor 'ner Hochschulklasse stehst und ihnen eben zeigst, wie die Auswirkungen sind, da seh ich schon echt enorme Vorteile, ja. Weil du nicht immer den Editor aufmachen musst, die Änderungen machen, dann wieder in den Browser wechseln- -Reload drücken und so was, ja.

Ja, also ich hab ja, jetzt die letzten drei Jahre in meinem Wintersemester an der Uni hier in Mainz gelehrt, für, in, bei den, bei den Informatikern. Und, da hab ich mir am Anfang auch überlegt, wie ich denn zum Beispiel mal 'n bisschen Live Coding zeigen könnte. Und so am Anfang, ich glaube, im ersten Semester hab ich das, wenn ich das mal gemacht hab, meistens so gemacht, dass ich dann den Code wirklich abgespeichert hab.

Und dann in den Browser rüber gewechselt bin oder direkt in, in Firebug, was geändert habe. Aber jetzt so in dem, in der letzten Semester hab ich wirklich intensiv, JS Bin genutzt und hab dann, hab dann einfach ein bisschen HTML hinzugefügt und dann haben sie sofort gesehen: "Ah, okay, so sieht das jetzt aus." Und dann hab ich 'n bisschen CSS hinzugefügt: "Ah, so sieht das jetzt aus. So wird aus einer Liste eine Navigation." Und dann siehst du das ganz schrittweise.

Und das Allercoolste daran ist, die können sich die, du kannst dir dann die, die URL nehmen, in deinem Browser aufrufen und ich schreibe an der Seite weiter, und, das, aktualisiert sich sofort bei dir. Also ich, während ich an der Seite weiterschreibe, aktualisiert sich der Stand bei dir direkt aufm Browser, auf, auf deinem Rechner. Das können wir auch, könnten wir jetzt, während wir sprechen, hier tun. Da müssen wir noch nicht mal im selben Netzwerk sein.

Was ich auch faszinierend finde-

Das ist super.

Was ich, was ich grad beim JS Bin halt auch noch, entdeckt hab, ist, der unterstützt ja auch diese, diese ganzen Präprozessoren. Also ich kann ja, ich brauch ja nicht HTML schreiben, sondern ich kann Markdown schreiben, ich kann Less, oder Stylus schreiben, ich kann CoffeeScript schreiben, JavaScript, TrueScript und was weiß ich noch alles. Das ist ja auch ganz schick.

Ja, JS Fiddle kann das auch und CodePen kann das auch.

Sauber.

Der, der einzige Haken bei der ganzen Geschichte ist in meinen Augen immer nur der Umgang mit den entstandenen Dateien. Also bei JS Bin zum Beispiel kannst du den ganzen keinen vernünftigen Titel geben. Und, es wird so ziemlich jeder Stand, abgespeichert und, wenn du dann dein, wenn du dir dann selber 'nen Account mal ge-ge-genommen hast zum Beispiel, also wenn du jetzt so 'n Poweruser bist wie ich, dann, wird das, Ganze sehr schnell unübersichtlich.

Und auch bei JS Fiddle, und bei Dabblet und bei CodePen ist das nicht anders. JS Bin und JS Fiddle speichern in einem eigenen System die Sachen ab und CodePen und Dabblet speichern das Ganze dann als, GitHub Gist. Was-

Ah, okay.

Und, alle, alle, Lösungen haben gemein, dass sie einfach ab, sagen wir mal, zehn Beispieldateien komplett unübersichtlich werden. Und ich hab bei J-JS Fiddle hab ich bestimmt zweihundert, Einzel, Einzelfeature, Einzeldateien oder noch mehr. Teilweise selber gemacht, teilweise aber auch von anderen, dann geforkt, ne? Also du kannst ja auch- Bei all diesen Tools kannst du ja dir 'ne, 'ne Datei nehmen und einfach auf Fork drücken, dann wird in deinem Account dann eine Kopie erzeugt.

Aber was die alle nicht können, das ist, mal das Ganze zu taggen oder in, in Ordner zu verschieben. Und, also ich hab bei JS Fiddle bin ich dann dazu übergegangen, hab mir dann alle Liste, eine Liste aller meiner Fiddles ausgeben lassen und hab die dann händisch über eine Stunde lang die einzelnen, Fiddles in, in 'ne statische HTML-Datei kopiert und, dem dann, Titel gegeben und in einzelne, einzelne Kapitel unterteilt, damit ich das, dann wiederfinde. Das ist meine, meine Arbeitsgrundlage.

Aber keines dieser Systeme kann man vernünftig, sortieren. Das ist, noch echt übel. Und das, das geht ja bei diesen GitHub Gists auch nicht, ne? Und das ist echt schade, weil du mit GitHub echt tolle Sachen machen kannst und diese ganzen Gists sind ja auch super. Aber wenn ich dann so hundert Gists habe oder zweihundert, pff, was weiß ich, wo der Schnipsel ist, den ich suche. Ne? Also da, da muss noch so einiges geschehen, aber da kann man unheimlich effektiv arbeiten.

Da kann man super mit anderen, Informationen austauschen. Darum geht's ja nachher eigentlich, ne? Also ich hab dann 'n Problem, sch-, schildere dir das Problem, skizziere das, schick dir, schick dir den Link und du kannst dir das Ganze angucken, und, direkt in dem, was ich gemacht habe, auch schon die Lösung ausprobieren. Und, das find ich einfach, grandios. Da kann man richtig gut zusammenarbeiten. Jo, also ich wär dann jetzt im Wesentlichen mit den Sachen durch.

Und wenn wir das mal so Revue passieren lassen, das waren jetzt auch nur anderthalb Stunden oder so, -

Fast schon, fast sogar ein bisschen länger, ja.

Ja. Wenn wir das mal so Revue passieren lassen, das sind so 'n paar viele Tools, die wir so nutzen, oder?

Ja, es kommt doch 'n bisschen was zusammen und, das Schöne ist auf alle Fälle, dass es noch nicht am Ende ist, weil ganz viele Sachen, die wir aufgezählt haben, hab ich jetzt erst in, im, im letzten Jahr entdeckt. Und, ja.

Da, da, also ich bin mir auch sicher, da kommt noch ganz viel auf uns zu. Da kommen bestimmt noch ganz, ganz viele neue Tools. Und wir haben auch bestimmt noch ganz viele Tools und, Inf-Infoseiten auch vergessen.

Sicherlich.

Das waren jetzt nur so die wichtigsten, so in etwa. Aber es waren jetzt nicht all die Sachen, die, die wir jetzt tatsächlich nutzen. Da kommt noch, da fehlen noch einige. Und ich erinnere mich da immer nur an meine Anfangszeit, in der, in der Werbeagentur. Ich war da so in 'ner, ich hab angefangen in 'ner, so 'ner klassischen Printagentur, mit, mit der Gina da damals zusammen.

Und, da sollten irgendwann mal die Designer, dann alle zusätzlich zu Freehand, mit denen sie immer gearbeitet haben und Photoshop, auf einmal QuarkXPress lernen. Und dann, und dann später auch noch, wie heißt denn dieses Ding von Adobe, das, gegen QuarkXPress dann gewonnen hat?.

Ich weiß, was du meinst.

Dieses Designtool von, von Adobe. Das kam dann-

Ah, InDesign.

Genau, InDesign. Das, das kam dann ga-damals gerade frisch auf den Markt. Und da ha-haben die ja fast, revoltiert. Das wären ja vier Programme und das ist ja so kompliziert. Da hab ich denen dann erst mal erzählt damals, war jetzt so Anfang 2002 oder so was, dass ich, bevor ich überhaupt anfange zu arbeiten, schon zehn Programme gestartet habe und dann im Zweifelsfall im Laufe des Tages noch fünfzehn dazukommen.

Und die fangen dann an mit, die haben sich damals dann über vier Programme beschwert. Aber das ist nicht besser geworden. Das wird eher, immer komplizierter, ne? Ich find da, ich find das spannend. Aber man muss natürlich auch, da geistig rege bleiben, ne. Also ich, ich merk es-

Ja, man muss ein bisschen offen sein. Also man muss zwischendurch immer mal wieder so den Drang haben, so, jetzt ist es Zeit für was Neues, weil entweder mein Tool jetzt nicht aufm, also nicht mehr am Puls der Zeit ist oder so. Ist wichtig, dass man halt am Ball bleibt und sich öfters mal nach was Neuem umschaut. Und wenn man dann irgendwie auf den, auf den Trichter kommt, das Tool, was man gerade verwendet, ist, immer noch das Beste, dann ist es ja auch gut. Aber zumindest sich mal umgucken.

Das stimmt, ja. Ein schönes Schlusswort. Also bleibt geistig rege und guckt euch um und bleibt uns so lange gewogen bis zum nächsten, Termin bei Technikwürze. Vielen Dank, Matthias.

Gerne, gerne. Ich danke dir.

Bis zum nächsten Mal.

Ja, und falls ihr, ein Thema von dem heute angerissenen ganz interessant findet, dann kann ich euch nur raten, bei uns, GitHub Repository vorbeizuschauen. Das github.com/technikwürze mit U E und, dort rege Themen vorzuschlagen und auch gerne Themen, die wir heute angerissen haben, dass wir die mal ein bisschen detaillierter durchgehen.

Jo, da gibt's bestimmt noch viel drüber zu erzählen. Da, da finden sich noch ein paar Themen für die nächsten Monate. Ja, bis zum nächsten Mal. Tschüss.

Bis zum nächsten Mal. Tschüss. Mehr Qualität im Webdesign durch Webstandards. Tipps und Tricks zur Umsetzung findet ihr bei den Webkrauts auf Webkrauts.de für ein besseres Web. Weitere Informationen und die Links zur Sendung auf technikwürze.de