03 Feb 2013

Technikwürze 188 (S04/E01) Die Lieblings-Tools der Frontend-Entwickler

Immer wieder fragen uns die Zuhörer, welche Programme, Editoren und Helferlein wir als Frontend-Entwickler einsetzen. In dieser Sendung geben wir die Antwort!

Höre Technikwürze auf SoundCloud: Diese Folge | Alle Folgen

In Abwesenheit von David sprachen Matthias Pfefferle und Jens Grochtdreis über ihre bevorzugten Tools. Das Thema bietet Stoff für lange Unterhaltungen, was sich in der Länge der Folge eindeutig niederschlug.

Wahl des Betriebssystems

  • Mac, Windows oder Linux?
  • Vernünftiges Screenshot-Tool für Mac? PC?

Welche IDE oder Editoren

Task-spezifische IDEs oder Alleskönner? Sind grosse IDEs, wie NetBeans, PHPStorm oder WebStorm auch auch für Frontend-Entwickler interessant?

Das Projekt aufsetzen

Viele Projekte haben die gleiche Basis und viele Arbeitsschritte wiederholen sich immer wieder. Diese Tools können helfen, das zu optimieren:

Yeoman

  • init: yeoman init backbone
  • models erstellen: yeoman init backbone:model modelName
  • build: JS und CSS optimieren, validieren und minifien
  • außerdem: Testsystem, Paket-Management, Task-Management, uvm.

Paketmanagement mit Bower (ähnlich wie npm oder RubyGems)

  • Pakete installieren: bower install jquery
  • Pakete updaten: bower update jquery-ui

Taskmanagement mit Grunt.js

  • Immer wiederkehrende Tasks definieren: minify, test, compile (Sass/Less), lint, …

Nützliche Frameworks

Frameworks helfen beim besseren Umgang mit Formaten und bieten Möglichkeiten, die das Format nicht selbst unterstützt.

Nützliche Libraries

Klassiker

Erwähnenswert

Templating Engines

Wo macht Templating im Frontend Sinn? Macht es überhaupt Sinn?

Grafiken und Icons

Sprites

  • Nur eine Grafik
  • besseres Caching
  • geringere Ladezeiten
  • lassen sich mit Compass sehr einfach erstellen

Icon Fonts

  • “beliebig” skalierbar
  • über “color:” farblich beliebig anpassbar
  • Verläufe auch über CSS möglich

Tools

Hilfeseiten

Austausch mit Anderen bzw. Erstellung von Demos

Dieser Beitrag wurde am Sonntag, 3. Februar 2013 um 19:18 Uhr in der Kategorie Podcast veröffentlicht.
Kommentare sind im Moment nicht erlaubt, du kannst aber einen Trackback von deiner Seite aus senden.

Kommentare

  • 1.
    Matthias Mees
    am 4. Februar 2013, 16:38 Uhr

    Der Link zu Font-Custom stimmt nicht mehr – http://fontcustom.com müsste der Richtige sein. In dem Zusammenhang sollte man unbedingt auch noch Fontello erwähnen.

  • 2.
    Matthias Pfefferle
    am 4. Februar 2013, 18:14 Uhr

    Ups! Fehler behoben und Liste aktualisiert! Vielen Dank für den Hinweis und den Tipp mit Fontello.

  • 3.
    Marius
    am 4. Februar 2013, 19:04 Uhr

    Hallo,
    das war eine interessante Folge! Aber ich hätte da noch Anmerkungen:
    Zu Sublime Text: Ich finde man dort wunderbar mit der Tastatur navigieren. Z.B. mit CMD+P, was eine Palette aufruft die sich problemlos nach Snippets und was auch immer durchsuchen lässt. Zusätzlich lässt sich aber wohl auch die TextMate Navigation aktivieren! Dazu kann ich nichts sagen, weil ich selber diese nie genutzt habe.

    Zu Bootstrap: Grundsätzlich sollte klar sein, dass Bootstrap wohl nie zum Erstelle “einfacher” Webseiten gedacht war, sondern für Webapps. Was die Trennung von Layout und Design angeht habt vll recht, aber es wäre mir bisher nicht negativ aufgefallen. Ich finde, dass es auf LESS-Ebene sehr gut getrennt ist in eine nahezu eine Datei pro Komponente/Funktion/... Um eine Art neutrales Starttemplate zu erhalten, kann man auf der Webseite ein GUI verwenden – wurde ja im Podcast für andere Dinge auch gewünscht ;) – , in dem alle Variablen bearbeitet werden können, vor dem Download. So habe ich z.B. eine simple Version in Schwarz-Weiß als Ausgangspunkt für mich erstellt. In Sachen Responsive-Design finde ich BS ebenfalls garnicht so schlecht. Es gibt entweder feste Umbruchpunkte oder aber flexible Grids. Vielleicht solltet ihr euch das Teil doch noch einmal anschaun ;)

  • 4.
    Matthias Mees
    am 6. Februar 2013, 02:15 Uhr

    Noch ein Hinweis, weil’s mir grad aufgefallen ist: Chrome hat mittlerweile auch eine Art Testmodus für responsive Designs.

    Seite aufrufen, Developer-Tools öffnen, unten rechts in der Ecke auf das Settings-Rädchen klicken, zum Tab „Overrides“ wechseln. Über „User Agent“ kann man (unter anderem) auch einige Mobilgeräte auswählen, über „Device metrics“ etwas exotischere Auflösungen einstellen.

    Ich habe leider keinen Schimmer, in welcher Versionsnummer das eingeführt wurde, aber das sollte ja mittlerweile ohnehin egal sein. :-)

  • 5.
    Jörg Dittmann
    am 9. Februar 2013, 13:49 Uhr

    Zu dem Thema Web-Fonts passt die Seite http://icomoon.io/app/ sehr gut. Vom Aufbau das gleiche wie Fontello aber mit der Möglichkeit eigene Grafiken im SVG-Format in seinen Custom-Font zu integrieren.

  • 6.
    Philip
    am 12. Februar 2013, 19:44 Uhr

    Schade, dass ich als Zuhörer das Gefühl habe, dass bei diesen vielen interessanten Themen etwas demotiviert durch den Potcast moderiert wird. Sätze wie “Joa, Templating Engines haben wir beide noch nicht benutzt, also nächstes Thema…” werfen bei mir die Frage auf, ob man dieses überhaupt hätte im Potcast erwähnen müssen. Da hilft auch der Hinweis nicht, dass man sich darüber selbst auf Github informieren soll, wenn man mehr darüber erfahren möchte. Ein bisschen mehr Begeisterung für die Themen hätte ich mir schon gewünscht.

  • 7.
    Christian
    am 13. Februar 2013, 12:39 Uhr

    Hallo,
    die Folge finde ich sehr informativ, vielen Dank!
    Allerdings ist der Link zu compass defekt, da hat sich scheinbar der interne Pfad davorgesetzt.

  • 8.
    Matthias Pfefferle
    am 13. Februar 2013, 13:21 Uhr

    @Marius Ich stimme dir zu:

    Grundsätzlich sollte klar sein, dass Bootstrap wohl nie zum Erstelle “einfacher” Webseiten gedacht war, sondern für Webapps.

    Um Settings-Seiten, Backends und Dokumentationen zu erstellen ist Bootstrap einfach perfekt und ich finde das responsive Grid auch super!

    @Matthias Das haben sie aber gut versteckt! Vielen Dank für den Tipp, funktioniert super!

  • 9.
    Matthias Pfefferle
    am 13. Februar 2013, 13:24 Uhr

    @Philip Wir wollten die Frontend-Template-Engines einfach der Vollständigkeit halber erwähnt haben, auch wenn wir bisher noch nichts damit gemacht haben. Immerhin sollte der Podcast eine Art “Rundumschlag” sein. Wenn dir das eine oder andere Thema zu kurz kam, dann schlag es einfach auf github vor und wir versuchen es in einer der nächsten Folgen ausführlicher zu behandeln.

    @Christian fixed!

  • 10.
    Marcel Kalveram
    am 13. Februar 2013, 13:58 Uhr

    Eine super Folge, hat Spaß gemacht zuzuhören.

    Ich erinnere mich, dass gesagt wurde, auf mobilen Endgeräten könne man kein Debugging vornehmen wie z.B. mit Firebug. Es gibt mittlerweile aber einige Tools (allen voran Weinre und Adobe Edge Inspect) mit denen man eine ähnliche Umgebung zur Verfügung gestellt bekommt.

    Zufälligerweise und passend zum Thema habe ich heute auf http://www.specrunner.net einen Blog-Post fertiggestellt, in dem ich auf 4 konkrete Scaffolding Tools eingehe, unter anderem auch Yeoman. Hoffe euch gefällt’s.

  • 11.
    Sebastian
    am 14. Februar 2013, 09:59 Uhr

    Hallo zum Thema jsfiddle & co noch eine Empfehlung. Ich nutze in letzter Zeit nur noch http://plnkr.co/.

    Dort wurden genau die Schwächen behoben, die im Podcast erwähnt wurden.

    Gruß,
    Sebastian

  • 12.
    Christian
    am 20. Februar 2013, 09:02 Uhr

    Zum Thema css sprites ist mir noch eine weitere interessante Seite untergekommen, die sogar das Herstellen des sprite files unterstützt und dem user erspart, die einzelnen Grafiken auswählen zu müssen: http://spritepad.wearekiss.com/
    Vielleicht hilft’s dem einen oder anderen weiter.

    Beste Grüße
    Christian

  • 13.
    Reini
    am 23. Februar 2013, 14:11 Uhr

    Also nach der ersten halben Stunde verstehe ich nicht, warum ihr einen Mac verwendet?

    Da wird aufgezählt, was alles nicht oder nur schlecht mit dem Mac funktioniert, dass man 1 Monat für irgend einen Editor zum Erlernen benötigt, damit man damit überhaupt sinnvoll arbeiten kann und man auch für alle anderen Tools lange Zeit benötigen, damit man damit arbeiten kann, weil man für alles irgendwelche Short-Cuts auswendig wissen muss.

    Warum verwendet ihr dann einen Mac, wenn es so kompliziert ist?
    Der einzige Grund für mich wäre, dass ich eine Konsole mit einer (Unix-) Shell habe, dass wir aber von euch auch nicht verwendet.

    Nur weil irgend jemand sagt, dass es cool ist?

    Seit ihr nach all dem um-/erlernen soviel produktiver mit dem Mac, dass ihr das dann wieder alles aufgeholt habt, als wenn ihr weiter mit einem Windows Rechner gearbeitet hättet?

    Worin liegt dann der Sinn einen Mac zu verwenden?

    Ich habe sowohl Windows-PC als auch Mac, aber aufgrund der doch sehr mühsamen Umstellung, mache ich mit dem Mac eigentlich nichts.

    Vermutlich muss man da einfach einen Schnitt machen und alle Windows Rechner entfernen/herschenken/wegwerfen, damit man gezwungen ist, mit dem Mac zu arbeiten, ansonsten tut man sich das vermutlich nicht an…

    LG
    Reini

  • 14.
    Jens Grochtdreis
    am 27. Februar 2013, 14:24 Uhr

    @Reini: Ich habe davon erzählt, wie schwer mir der Umstieg von einer Plattform auf die andere fiel. Es ist meiner Erfahrung nach ein Mythos, dass ein solcher Umstieg einfach und schnell funktioniert.

    Aber es hat sich gelohnt. Nicht nur finde ich die Bedienung der Software am Mac angenehmer. Ich finde auch die Optik sehr viel angenehmer. Bei Windows bessert sich das langsam. Das war ernsthaft einer meiner Hauptbeweggründe für den Wechsel.

    Tut mir leid, wenn Dich das genervt hat. Wir haben einfach drauflos geredet. Das macht für mich den Reiz des Podcasts aus, weil wir kein Drehbuch haben.

    Ignorier es einfach, wenn es Dich nervt. :-)

  • 15.
    Chris
    am 28. Februar 2013, 20:55 Uhr

    Hmm. Also das mit dem LESS finde ich etwas einseitig dargestllt. Ja, es gibt die Möglichkeit, dass ganze im Browser rendern zu lassen, und damit auf den Client auszulagern.

    Wenn man sich die LESS-Seite aber mal ansieht, steht da auch dabei, dass das ein ein Node-Modul ist und auf der Console Dateien compiliert.

    Der Browser-Renderer ist allerdings beim Prototyping von Designs extrem genial, da er auch eine Art Livereload der LESS-Daten macht.

    Ich benutze übrigens Grunt, um ein Watchtool laufen zu lassen, welches mit RECESS von Twitter, die CSS-Syntax vereinheitlicht. Und RECESS kommt auch mit LESS klar… Danach compiled das ganze in ein CSS.

  • 16.
    HerrZ
    am 1. März 2013, 17:36 Uhr

    Was spricht dagegen, anstelle von Sass .php Dateien für Stylesheets zu verwenden?

    Z.B.
    style.css:
    @import url(style.css.php);

    style.css.php:

    mfg

  • 17.
    Jens Grochtdreis
    am 1. März 2013, 19:01 Uhr

    @Chris: Warum einseitig? Ich sage doch nur, dass LESS einen Konstruktionsfehler hat. Dass es mittlerweile eher serverseitig generiert wird, ist mir dabei egal. Es ist in meinen Augen ein Konstruktions-, ein Denkfehler gewesen. Und da ich befürchte, dass sich ähnliche Konstruktionsfehler wie das clientseitige CSS-parsen irgendwo verstecken, kam das Projekt für mich nicht in Frage.

    Wenn es Dir besser gefällt, dann sei es drum. Ich finde die Nutzung eines Präprozessors klasse. Welchen ich nutze ist meine Geschmackssache und ich habe sie begründet. Das hat nichts mit Einseitigkeit zu tun.

  • 18.
    Jens Grochtdreis
    am 1. März 2013, 19:03 Uhr

    @HerrZ: Ein Präprozessor kann einen Menge mehr, ale einfach nur nicht direkt CSS zu schreiben. All die hübschen Farbfunktionen kann man nicht einfach mal mit einer Zeile PHP nachbauen. Solche Präprozessoren sind recht komplex und intelligent. UND: sie erzeugen das CSS auf meinem Rechner und nicht zur Laufzeit auf dem Server. Das finde ich noch das Beste an der Sache.

  • 19.
    Daniel
    am 2. März 2013, 13:08 Uhr

    Super Folge!
    Vielen Dank für den interessanten Podcast!

    Ich wünsche mir mehr von Webdevelopment, Frontend, Backend Themen.

  • 20.
    Andy
    am 21. März 2013, 23:33 Uhr

    Vielen Dank für die hilfreichen Tipps.

    Hier noch ein sehr nützliches Tool für die Verwendung von Sass und Compass unter Windows:
    Scout – Compass and Sass without all the hass(le) http://mhs.github.com/scout-app/

    Damit kann man sich auch die Ruby Installation sparen ;)

  • 21.
    Jens Grochtdreis
    am 22. März 2013, 07:25 Uhr

    @Andy: genau dieses Tool habe ich auch einmal genutzt. Nur leider erzeugte es irgendwann Fehler. Es gab Farbcodes falsch aus. Erst dachte ich, es wäre Sass, aber es lag an Scout.

    Die Applikation wird wohl nur langsam weiterentwickelt. Deshalb habe ich dann auf das Tool verzichtet. Man muss auf der Kommandozeile sehr wenig tun. Und das Wenige kann ich mir merken :-)

  • 22.
    rockpianist
    am 30. März 2013, 14:08 Uhr

    Ich kann mich Nr. 22 überhaupt nicht anschließen. Erst mal selbst etwas auf die Beine stellen, bevor gemeckert wird.
    Ich habe gelernt, dass für mich ein Plattformwechsel von PC auf Mac keinen Sinn (mehr) macht.
    Gruß rp

  • 23.
    Hans
    am 4. April 2013, 16:11 Uhr

    was is mit meinem lieblingspodcast los ?!

    ich benötige mindestens einmal wöchentlich eine folge technikwuerze ;)

    könnte ihr mir vergleichbare alternativen nennen? finde keine!

    lG Hans

  • 24.
    Marius
    am 7. April 2013, 13:35 Uhr

    @Hans:
    workingdraft.de – erscheint wöchentlich und sendet Montags live.

  • 25.
    Simon
    am 29. Mai 2013, 12:32 Uhr

    Internet Explorer testen, ohne Windows: http://browserling.com/

  • 26.
    René Höhle
    am 7. November 2013, 22:49 Uhr

    Hallo Jens,

    also da wir ja schon eine Schulung bei uns hatten und auch das Thema mit Sass aufkam.

    Also wir haben ja LESS und SASS im Einsatz. Also bei LESS ist es nicht so, dass es NUR per Javascript funktioniert. Es gibt auch für LESS Interpreter in PHP, Python und Ruby.

    Zudem ist es so, dass man die SASS-Dateien mit ins GIT (Versionskontrolle) einchecken kann und die Generierung dann durch ein Deployment-System (Jenkins oder ähnliches) durchführen lassen kann.

    Das Deployment ist am Ende nichts anderes als ein Tool, welches sich per SSH auf den Server verbindet und Befehle ausführt. Bei einem Deployment mit GIT wird ein GIT-Pull auf dem Server ausgeführt um sich die neuen Dateien zu holen und dann per COMPASS die SASS-Dateien auf dem Server generieren zu lassen.

    Hierfür braucht man kein Grunt und kann sogar eine SASS-Config anlegen die angibt wohin die CSS-Dateien generiert werden sollen.

    Man sollte NICHT die generierten CSS-Dateien mit einchecken, da man sonst nach jeder Änderung eines Kollegen einen Merge-Konflikt hat, da sich die eine minifizierte Zeile geändert hat.

    Zudem kann man mit Jenkins auch prüfen, ob die SASS-Dateien auch ohne Fehler generiert werden können bevor diese auch online gestellt werden geschweige denn fehlerhaft auf dem Server generiert werden.

    Dies ist für dich natürlich nun nicht so relevant, da du ja eher Frontend machst aber vielleicht hilft es ja jemandem weiter der ggf. SASS in einem Team einsetzen möchte.

    Gruß,
    René

  • 27.
    Jens Grochtdreis
    am 8. November 2013, 07:23 Uhr

    Hallo René, auch für Dich nocheinmal: ich weiss sehr wohl, dass es für LESS diverse Interpreter gibt. Aber die Grundidee war, CSS im Browser zu konvertieren. Das empfinde ich als eine sehr schlechte Idee. Ich mag auch prefixfree nicht für produktive Projekte. Wenn ich etwas demonstrieren will, dann ist prefixfree praktisch.

    Und da LESS mit dieser abwegigen Idee geschaffen wurde, CSS zur Laufzeit zur erzeugen, mag ich diese Sprache nicht. Denn wer weiss, welche Fallen noch lauern. Und ich bin mir sicher, dass ich diese Argumentation nicht nur schriftlich, sondern auch im Podcast so abgegeben habe.

    Und mit den Deployment-Tools siehst Du ganz richtig: es mag sowas geben, aber ich habe keine Ahnung davon. Also kann ich es nicht einschätzen und also rede ich nicht darüber. Ganz einfach.

    Du darfst zudem nicht vergessen, dass ich oft nicht direkt in einem Team arbeite, sondern den Backend-Entwicklern zuarbeite, zeitlich abgegrenzt und ich für mich selber genauso ein Build-Tool im Frontend benötige, wie andere im Backend. Mittlerweile habe ich bei Grunt Blut geleckt.

  • 28.
    Manuel
    am 16. Januar 2014, 13:35 Uhr

    Jörg Dittmann da stimme ich dir nur zu.
    Zwar ist icomoon nach ihrem Update etwas schwerer zu handeln, aber insgesamt ein sehr flexibles Tool. Zwar waren für den IE ein paar Customs notwendig, aber nun nach über 1 1/2 Jahren Arbeit habe ich mir damit ein super System aufsetzen können, welches flexibel auch über eigene Icons erweiterbar ist.

  • 29.
    Veit
    am 29. Januar 2014, 10:05 Uhr

    ...auch ich warte nach nun bald einem Jahr auf die nächste Folge.
    Wie geht´s weiter? Muss ich mir “Sorgen machen”?

  • 30.
    macx
    am 30. Januar 2014, 10:14 Uhr

    Die nächste Sendung ist in Planung, geht bald los.

  • 31.
    Johannes Haseitl
    am 15. Februar 2014, 14:25 Uhr

    Da das Thema Screenshot-Tool auf dem Mac aufkam: eine gute Alternative zum “bösen” Skitch ist Monosnap. Es ist kostenlos im AppStore zu haben und bietet auch eine einfache Möglichkeit Dateien über den eigenen FTP-Server zu teilen.

  • 32.
    Jenis
    am 20. Oktober 2014, 19:38 Uhr

    Wärs es nicht klüger, die Podcast endgültig einzustellen, wenn du keine Zeit mehr davfür hast?

  • 33.
    Martin
    am 13. Januar 2015, 13:04 Uhr

    Erst einem Geld für ne neue Ausrüstung aus der Tasche ziehn dann einstellen. Sehr seriös, nicht. :/

  • 34.
    Bettina
    am 1. Juni 2016, 19:39 Uhr

    Hallo :)

    Ich bin durch Zufall auf eurem Podcast gestoßen, nachdem ich mehr ungeplant als geplant nun als Webentwicklerin agiere. Ich stehe noch am Anfang und daher finde ich euren Blog absolut perfekt für mich.

    Ich kann euch super folgen und Dinge für mich adaptieren und so dem Kunden ein tolles Erlebnis bieten und daran wachsen. ( High End Websites stehen natürlich nicht auf meiner Liste aber hierfür würde ich auch nie werben, denn das geht über meine aktuellen Fähigkeiten hinaus!)

    PS.: Ich als Anfänger liebe Webstorm über alles – es hilft mir bei vielen Dinge, die einfach Erfahrung benötigen.

    PS.: Google Chrome hat auch so einen Simulator

  • 35.
    Bettina
    am 1. Juni 2016, 19:42 Uhr

    hat gerade realisiert, dass ihr seit Ewigkeiten nix mehr macht Mein IPhone tat so als wärt ihr aktiv…. Neeeiiinnnn :(

Dein eigener Kommentar

Die Kommentarfunktion für diesen Beitrag wurde deaktiviert.