labuero

< frontend developer >

  1. grunt.js – Einer für alles

    Handlebars, LESS, requireJS, responsive Images, die Anzahl der Tools und Best Practices in der immer komplexer werdenden Welt der Frontend Entwicklung ist schier unüberschaubar groß geworden. Und jedes Tool, jedes Vorgehen verlangt seinen eigenen Workflow. Grunt bedeutet sowohl grunzen als auch Arbeitstier womit sowohl Logo als auch die Aufgabe des Tools erklärt wären. Hiermit können wir fast alles was einem im Arbeitsalltag beim Umgang mit HTML, CSS und Javascript begegnet, unter einem Dach automatisieren. Im dem folgenden Tutorial versuche ich euch den Einstieg, mit der Einrichtung von Grunt zusammen mit einem SASS Prozess, zu vereinfachen.

    grunt-banner

    weiterlesen »

  2. Formulare – Der ungehobelte Verkäufer im Netz

    Als großer Freund von guter User Experience, bringen mich viele Formular Layouts, die auf meinem Tisch landen und noch mehr Beispiele aus dem Netz, immer wieder zum Kopfschütteln. Warum gibt man sich bei der Darstellung seines Produkts soviel Mühe, begegnet dem Kunden an der virtuellen Kasse, dem Formular, dann in einem Ton, bei dem jedem lokalen Laden um die Ecke, ziemlich bald die Kunden weglaufen würden?

    weiterlesen »

  3. Grunt.js für Frontend Entwickler. Der einfache Einstieg.

    Heutzutage jonglieren wir in unseren Webseiten mit etlichen CSS-Dateien, riesigen Javascripten und diversen jQuery Plugins umher. Für den Livebetrieb ist natürlich alles schön zusammengefasst, um möglichst wenige Requests an den Server zu senden. Und natürlich wird alles minifziert, um Kilobytes zu sparen. Und nach der dritten kleinen Anpassungen hat man keine Lust mehr, all diese Schritte von Hand zu machen. Hier kommt ein Build System ins Spiel, mit dem wir das alles, und sogar noch viel mehr, automatisieren können.

    Für Frontend-Entwickler eignet sich meiner Meinung nach am besten grunt.js. Es basiert auf Javascript, weswegen die Einstiegshürde relativ gering ist, und wird von node.js angetrieben. Ich möchte in einem kleinen Tutorial zeigen, wie einfach es ist, grunt schon bei kleineren Projekten mit nur wenig Javscript und CSS zu verwenden. Wer nicht abtippen möchte, das beschriebene Projekt gibt es ganz am Ende auch als Download.

    weiterlesen »

  4. Gamification. Der heilige Gral der Motivation?

    Seit 22 Jahren bin ich begeisterter Computerspieler – oder etwas cooler: ich bin ein „Gamer“. Am Anfang noch mit dem Atari 2600 und Pacman (NOM NOM NOM) über das 8 Bit starke SEGA Mastersystem, Amiga 600 & 1200, Playstation bis hin zum aktuellen PC habe ich viele Stationen durchlaufen. Die Anschaffung des Amiga und des ersten PC wurden den Eltern damals so begründet, dass man damit seine Hausaufgaben machen könne. Natürlich!

    Atari 2600 – Einstieg in die Computerspielwelt

    Vor ungefähr 3 Jahren kamen plötzlich die Marktingabteilungen und Werber um die Ecke, um meine schöne Gamewelt für ihre Zwecke zu missbrauchen. Sie feiern seit her Gamification als den heiligen Gral, um gelangweilte User zu motivieren und sie angeblich Dinge tun zu lassen, die man sonst teuer nach Indien outsourcen müsste. Totgeglaubten Konzepten wird neues Leben eingehaucht und Startups kaufen ganze Serverfarmen ein, um dem Ansturm, den sie ihren Geldgebern voraussagen, gerecht zu werden. Dafür gibt es von mir den „AWESOME OPTIMISM BADGE“!

    weiterlesen »

  5. Gridsystem ohne Kopfschmerzen mit box-sizing

    Quizfrage: Eine Box hat eine Breite von 200 Pixeln, einen Innenabstand zu allen Seiten von 20 Pixel und einen Rand von 2 Pixel. Wie breit ist die Box? Wer schon ein bisschen mit CSS gearbeitet hat und das Box Modell kennt, der kommt hier auf 244 Pixel. Das ist zum Einen ein etwas krummer Wert und zum Anderen, kann dieses Verhalten in einem CSS Raster auch schnell zu Problemen führen. Um dem Herr zu werden, endet dies meist in vielen zusätzlichen CSS-Klassen oder viel Rechenarbeit beim umstellen des Rasters, was auch wieder zusätzliche Fehlerquellen mit sich bringt. Bisher war das auch für mich Alltag, bis ich dann in einem Vortrag von Vitaly Friedman vom Smashing Magazin saß.

    weiterlesen »