Über Roger Dudler

Software Engineer with a passion for pixelperfect web products. UX. CSS. JQuery. node.js. PHP. TerrificJS. Java. Swiss. @Namics.

Clarify – Ein Toolkit für den Frontend Workflow

Der Frontend Entwicklungsprozess in einem Projekt wird immer komplexer und zeitaufwendiger. Aufgrund einer Vielzahl von Zielgeräten und Auflösungen, Verhaltensweisen, Animationen, CSS3, HTML5, etc. steigen zwangsläufig auch die Aufwände und die Komplexität während Konzeptionsphase in allen Disziplinen. Dieser Wandel ist enorm spannend und bietet fast unendliche Möglichkeiten. Es ist aus meiner Sicht aber auch der Moment über die Effizienz im Workflow nachzudenken.

Wir setzen mit Terrific ein fantastisches Werkzeug ein, dass uns ermöglicht modulare und wartbare Frontendbausteine effizient umzusetzen. Es gehört aber nach wie vor zu jedem Projekt dazu, die Spezifikationen zu komplettieren, seien dies nun Vermassungen, Farbcodes, Verhaltensweisen, Geschwindigkeiten von Übergängen, etc. Aber genau diese Erarbeitung kostet Zeit und kann optimiert werden.

Aus diesem Grund ist durch Diskussionen mit Experten aus den Bereichen UX, Design, Projektleitung & Entwicklung innerhalb kurzer Zeit ein Tool entstanden, das einzelne dieser Arbeiten mit kleinen Hilfsmitteln versucht zu unterstützten. Clarify. Es handelt sich dabei um eine Webapplikation mit einer darunterliegenden Datenbank. Nachfolgend gibt es einen Vorgeschmack der Funktionen des aktuellen Prototyps.

Projekte & Screens

Clarify erlaubt das Erfassen von Projekten und das Hochladen von Screens (JPG, PNG) zu jedem Projekt. Es listet diese übersichtlich in der Projektansicht auf. Ein Klick auf einen Screen öffnet die Toolansicht. Sie besteht aus mehreren Layern, u.a. Kommentare, Vermassungen, Farben, Schriften, etc. Initial befindet man sich auf der Kommentaransicht.

Kommentare

Im Kommentarlayer ist es möglich Punkte mit Nummern auf dem Screen zu platzieren und dazu jeweils einen Beschreibungstext zu hinterlegen. Denkbar sind Implementierungshinweise, Infos zu Modulen oder einfach nur Annotationen.

Vermassung

Jeder Frontend Entwickler hat seine Tools um Abstände & Grössen zu vermassen (falls nicht schon bei der Designübergabe vorhanden). So richtig glücklich wurde ich aber noch mit keinem. Nachfolgend sieht man die Vermassungsfunktion von Clarify. Sie zeigt eine Lupe ähnlich wie bei einem Color Picker für den Start- und Endpunkt an. Nachfolgend wird die Breite & Höhe angezeigt. Nachträglich kann die Vermassung angepasst werden. Alle Vermassungen werden in der Datenbank für spätere Outputs wie einem Styleguide gespeichert.

Farben

Das Tool erlaubt Designern und Entwicklern, je nach Workflow, Farben direkt vom Screen zu picken. In Clarify werden die ausgewählten Farben in eine Projektfarbbibliothek hinzugefügt und vom jeweiligen Screen referenziert. Dies erlaubt uns in Zukunft z.B. für ein Projekt automatisiert LESS Templates mit Farben anzulegen. Desweiteren hat man immer den Überblick, welche Farben über das gesamte Projekt hinweg verwendet werden.

Es ist auch möglich eine Farbe anstatt vom Screen zu picken, über die Farbbibliothek auf einen Screen zu ziehen. Dies ist z.B. hilfreich, wenn man im Vorhinein schon weiss, dass dies genau dieses Gelb sein muss, unabhängig davon ob es einen Hauch von jener abweicht.

Embedding

Der Kommentarlayer kann bereits im jetzigen Zustand in andere Systeme per Javascript eingebettet werden. Dies ist hilfreich z.B. in einem Wiki oder im Jira Bugtracking. Man hat dann immer eine aktuelle Version des automatisch skalierten Screens mit den Kommentarpunkten, ohne das man von Hand in Photoshop beginnen muss Punkte zu zeichnen.

Styleguide

Ein möglicher Output von Clarify (dank der strukturiert erfassten Daten) könnte ein Styleguide sein. Hier ein ganz einfaches Beispiel:

Roadmap

Dies ist der heutige Stand des Prototyps, in der nächsten Phase entstehen die Werkzeuge für Verhalten (Dropdown, Slider, etc.) und für Schriften (Zeilenhöhen, Schriftgrössen, px/em). Ich bin gespannt was ihr so darüber denkt, welche Ideen ihr zu dem Thema habt. Last was von euch hören, via Kommentare oder Mail (roger.dudler@namics.com). Mein Ziel ist es Clarify so schnell als möglich zu veröffentlichen und allen zugänglich zu machen. Stay tuned.

Ein ganz besonderer Dank für die spannenden Diskussionen geht an Thommy, Olaf, Daniel, Alex, Remo & Ernst & das gesamte Team Roman!

Git – the simple guide – Ein Rückblick

Freizeitprojekte sind eine wichtige Weiterbildungsmöglichkeit für ambitionierte Web Entwickler. Hunderte neue Libraries, Technologien & Techniken erscheinen jeden Monat. Da mitzuhalten und up-to-date zu bleiben ist schwierig. Selbst für Leute die viel Zeit in genau dieses „up-to-date bleiben“ auf Twitter & Co. investieren. Meist reicht es nicht, nur von diesen Neuerungen zu hören, man muss diese ausprobieren um sie zu bewerten und ihre Tauglichkeit für Projekte zu evaluieren.

Letzten Freitag habe ich mich im Rahmen der Vorbereitung für einen internen Workshop etwas tiefer in Git (Ein Source Control Management System à la SVN) eingearbeitet. Während der Einarbeitung viel mir auf, das viele Grundlagen – trotz diverser vorhandener Anleitungen und Bücher – nicht einfach zu verstehen sind. Ich habe mir überlegt, wie man diese einfacher erklären könnte. Dazu ist als kleines Projekt eine Anleitung zum Einstieg in git entstanden. Primär um das Thema selbst besser zu verstehen und den Kollegen als Dokument zu geben…

Die Seite befindet sich unter:
http://rogerdudler.github.com/git-guide

Da auch andere die gleichen Verständnisprobleme gehabt haben könnten, habe ich den Link auf Twitter geteilt. Am Montag landete der Link dann irgendwie auf news.ycombinator.com und verbreitete sich innert weniger Stunden zusätzlich über Twitter & Co. Das Zwischenfazit nach 3 Tagen lautet: Über 50’000 Besucher & 3’500 Tweets. Nachfolgend ein paar der Tweets:

https://twitter.com/newsycombinator/status/156436338642653185
https://twitter.com/cvander/status/156463086092566528
https://twitter.com/cowboy/status/156448264596619264

Mittlerweile wurde der Guide von netten Leuten aus der Community neben Englisch und Deutsch in Französisch, Italienisch, Spanisch & Russisch übersetzt.

Meine Learnings für solche Projekte

  • grosser Tweet Button (Facebook, G+ nicht zwingend)
  • einfaches und zeitgemässes Design
  • Kommentarmöglichkeit (z.B. Disqus)
  • einfache Contribute Möglichkeit (z.B. GitHub)
  • Während der Buzz Phase aktiv auf Kommentare reagieren
  • Veröffentlichungszeit beachten (auf USA Rücksicht nehmen)
  • Auf Tech-News Seiten posten (dzone, reddit, etc.)
  • Knackiger Titel (damit das tweeten leichter fällt)

Dieser Blog Post soll andere Entwickler motivieren, mehr ihrer Gedanken & Arbeiten zu veröffentlichen. Auch dann, wenn sie vielleicht denken, dass hundert Andere das besser können – oder auch schon darüber geschrieben haben.

Dank Nina Jaeschke gibt es nun übrigens auch ein Cheat Sheet (PDF) zum Download. Ich freue mich schon auf die nächsten Projekte. Infos gibt’s jeweils zuerst über Twitter (@rogerdudler)

Erster! – Die Namics Blogs neu auf WordPress. Das technische Gedöns.

Die fünf Namics Blogs wurden in den letzten Wochen von Movable Type auf WordPress migriert. Die grösste Herausforderung des Projektes war die vollständige Datenübernahme aus dem etwas in die Jahre gekommenen Movable Type System. Bei mehr als 2’000 Posts wäre eine manuelle Nachbearbeitung im grossen Stil schlicht nicht tragbar gewesen. Wichtig war uns auch eine wartbare technologische Plattform, sowie die Integration unseres Frontend Frameworks Terrific. Der nachfolgende Artikel für Technik-Interessierte beschreibt einige Eckpunkte und technische Details des Projektes.

(mehr …)

Frontend 2011 – Das Wichtigste in Kürze

Vom 10. bis 12. Oktober fand in Oslo die Frontend 2011 Konferenz statt. Es handelt sich dabei um eine internationale Konferenz mit namhaften Speakern und einem guten Themenmix aus UX Design, Frontend Engineering und Konzeption, aber auch Marketing und Research kamen nicht zu kurz. Ich hatte die Gelegenheit an dieser teilzunehmen und möchte im folgenden Artikel einige interessante Talks und Eindrücke zusammenfassen. Ich habe mich bei der Auswahl der Talks bewusst für viele Themen ausserhalb meines Aufgabengebietes, der Entwicklung, entschieden. Aus meiner Sicht eine unglaublich wertvolle Horizonterweiterung, die ich allen nur empfehlen kann. Die Konferenz bestand aus zwei Vortragstagen und einem Tag Masterclasses, eine Art Workshops. Zu den Masterclasses wird es demnächst einen separaten Artikel geben.

4024-6233508241_fd85cd86d3_b-thumb-500x332-4023.jpg

Photo: Aleksander Dye

(mehr …)