Die Lieblings-Tools der Frontend-Entwickler

Kommentare (36)

• Matthias Mees

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

• Matthias Pfefferle

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

• Marius

  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 ;)

  • Matthias Pfefferle

    @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!

• Matthias Mees

  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. :-)

• Jörg Dittmann

  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.

• Philip

  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.

  • Matthias Pfefferle

    @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":https://github.com/technikwuerze vor und wir versuchen es in einer der nächsten Folgen ausführlicher zu behandeln.

    @Christian fixed!

• Christian

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

• Marcel Kalveram

  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.

• Sebastian

  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

• Christian

  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

• Reini

  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

  • Jens Grochtdreis

    @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. :-)

• Chris

  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.

  • Jens Grochtdreis

    @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.

• HerrZ

  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

  • Jens Grochtdreis

    @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.

• Daniel

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

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

• Andy

  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 ;)

  • Jens Grochtdreis

    @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 :-)

• rockpianist

  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

• Hans

  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

  • Marius

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

• Simon

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

• René Höhle

  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é

  • Jens Grochtdreis

    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.

• Manuel

  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.

• Veit

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

• macx

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

• Johannes Haseitl

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

• Jenis

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

• Martin

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

• Bettina

  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

• Bettina

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