Donnerstag18. Oktober 2012

Am Montag, dem 15.10.2012 hat mein kleines CSS Framework YAML seinen 7. Geburtstag gefeiert. Und nachdem ich weder bei YUI, noch bei Blueprint CSS in den letzten Jahren eine maßgebliche Weiterentwicklung feststellen kann, dürfte YAML das mit Abstand am längsten und am kontinuierlichsten gepflegte CSS Framework überhaupt sein.

Letztes Jahr um diese Zeit habe ich einiges an Frust vor mir her geschoben. YAML 3.x war zwar auf einem technisch guten Stand, Optik der Website und Doku, sowie die gesamte Struktur der Doku haben mich über die Jahre hinsichtlich der Pflege arg in die Knie gezwungen. Und so war es nach 6 Jahren im letzten Oktober relativ ruhig um das Projekt geworden. Eine Vorabversion von dem, was im Januar 2012 als YAML4 das Licht der Welt erblickte, lag zu diesem Zeitpunkt bereits über Monate auf meiner Festplatte, jedoch fehlte die zündende Idee, die dahinterstehenden Konzepte einfacher zu vermitteln und vor allem für die Anwendung des Frameworks von der 150-seitigen Doku wegzukommen. Gleichzeitig ging es mit meinem Langzeitprojekt, dem Nachfolger des YAML Builders in das dritte Entwicklungsjahr und auch hier stockte die Weiterentwicklung aus purem Zeitmangel. Damals habe ich eine Entscheidung getroffen, über die ich heute sehr sehr glücklich bin. Ich habe mich entschlossen, mich in 2012 nur noch auf die Webaktivitäten zu konzentrieren, die mir am Herzen liegen und bei denen ich selbst einen unmittelbaren Einfluss auf deren Weiterentwicklung habe. Eine Konsequenz daraus war, dass ich mich nach vielen Jahren aus der Redaktion der Webkrauts zurückgezogen habe.

Nun ist das verflixte siebte Jahr ist vorüber und die Dinge haben sich, zwar etwas anders als gedacht, andererseits besser als gehofft, entwickelt. Anfang Dezember 2011 ist bei YAML endlich der Knoten geplatzt und alle wichtigen Konzeptentscheidungen für YAML4 waren getroffen. Die Umsetzung der neuen Projektseite hat mir über den Jahreswechsel sehr viel Spaß gemacht und YAML 4 ist hervorragend angenommen worden. Insbesondere das Feature der Progressiven Linearisierung von Grids, Spalten und Formularen hat sich als außerordenlich komfortabel in der Anwendung erwiesen und ist gleichermaßen eines der Alleinstellungsmerkmale von YAML gegenüber der Vielzahl an uniformen CSS-Frameworks, die sich in erster Linie über ihren Namen unterscheiden.

Damit wären wir beim zweiten Teil, kürzeren Teil der Geschichte angelangt, denn auch mein Langzeitprojekt “Thinkin’ Tags” konnte ich im September erfolgreich an den Start bringen, womit auch dieses Projekt nun endlich in den Sichtbereich der Frontendentwicklung kommt und ich nicht mehr nur im stillen Kämmerlein über den Features dieses neuen Entwicklertools brüte. Am letzten Montag, habe ich deshalb auch den Jungs vom Working Draft Podcast Rede und Antwort gestanden auf Ihre Fragen zu Thinkin’ Tags.

Somit ist dieses siebente Jahr für mich ein ganz besonderes gewesen und ich freue sehr auf die nächsten Schritte, die beide Projekte in den kommenden 12 Monaten gehen werden.


Die Überschriften meiner Blogbeiträge werden offensichtlich vorhersehbar. Aber mal ohne Witz: In diesen beiden Themengebieten zeichnet eines der “next big things” in der Frontendentwicklung ab. Die heute zwingend erforderliche Flexibilität von CSS-Layouts (Stichwort: Responsive Design) bedingt eine möglichst enge und frühzeitige Zusammenarbeit von Designern und Frontendentwicklern. Dies bedingt auf Entwicklerseite, Ideen schnell realisieren und testen zu können.

Zu beiden Themen hat Jens Grochtdreis auf der diesjährigen Webtech gesprochen und ganz offensichtlich zwei sehr interessante Vorträge gehalten. Offensichtlich, weil ich leider nicht in Mainz dabei sein konnte, mich aber die frisch in seinem Weblog veröffentlichten Folien inhaltlich begeistern. Deshalb kann ich Euch nur empfehlen: schaut sie Euch unbedingt an.

Jens erster Vortrag spricht das Thema “Modulares Design” an. Er zeigt dazu einige Beispiele aus dem Projekte Structurae, welches Jens und ich gemeinsam bestritten haben und bei dem eben diese Modularität – und damit deren einfache Wiederverwendbarkeit – ein extrem wichtiger Erfolgsfaktor war, denn als Aufgabe stand ein vollständiges Redesign einer sehr datenintensiven Website unter großem Zeitdruck und dem Bedarf an Flexibilität bei der Positionierung einer Vielzahl optionaler Layoutbausteine. Beide Ziele haben wir unter Einhaltung von Zeitplan und Budget geschafft, was im Vorfeld alles andere als sicher war. Ich kann diese Enge Zusammenarbeit der Entwickler deshalb wärmstens empfehlen.

Der zweite Vortrag von Jens dreht sich vollständig um das Thema “Rapid Prototyping” mit YAML. Er basiert auf den Erfahrungen von Jens bei seiner Arbeit mit YAML und dem Workflow, den Jens über die letzten Jahre für sich entwickelt hat. Jens diese Erfahrungen seit vielen Jahren mit mir, wodurch ich extrem wertvolles Feedback für die Weiterentwicklung meines CSS Frameworks erhalte. Ich empfehle die Folien dieses Vortrags insbesondere den YAML-Nutzern, die noch immer ein wenig Hemmungen vor dem Umstieg auf YAML 4 und dem neuen Dokumentationskonzept haben. In seinen Folien zeigt Jens sehr anschaulich, wie sich das Benamungskonzept der CSS-Klassen bei YAML 4 funktioniert, und welche Vorteile die neue Dokumentation für bei der unmittelbaren Arbeit mit sich bringt.

Also schaut Euch den Blogbeitrag und die Folien der Vorträge an und vielleicht hält Jens ja einen oder gar beide Vorträge bei anderer Gelegenheit noch einmal.


Sonntag30. September 2012

Vor wenigen Tagen ging Thinkin’ Tags nach dreijähriger Entwicklungsarbeit endlich live. Nachdem auch dieser Schritt recht reibunglos ablief ist jetzt ein guter Zeitpunkt, dass ich ein paar Worte über meine Motivation und die Zielrichtung dieses Projekts verliere.

Motivation

“Da geht noch mehr!”. So dachte ich im Somer 2008, wenige Monate nachdem ich die Version 1.0 des YAML Builders veröffentlicht hatte, der seinerzeit neben dem bis heute unveränderten YUI Grid Builder ziemlich alleine stand mit seiner Funktionalität. Mittlerweile gibt es einige Projekte dieser Art, z.B.  Jetstrap oder auch einige Wordpress-Themes mit visuellen Anpassungsmöglichkeiten (z.B. Elegant Builder). Was mich jedoch bereits damals störte, war der Umstand, dass man mit diesen Buildern auf recht einfache Weise das HTML-Gerüst eines Layouts zusammenstellen konnte, CSS jedoch außen vor blieb. Letztlich konnte man sich also einen groben Rohbau einer Seite zusammenklicken, landete anschließend aber doch im Texteditor seiner Wahl, in dem 90% der eigentlichen Arbeit erledigt wurden. "Webseiten bauen ist halt Handarbeit!" – sagt einem schließlich jeder professionelle Webentwickler.

Den gesamten Beitrag lesen


Mittwoch26. September 2012

Ich bin aufgeregt wie ein kleines Kind. Eine sehr sehr lange Zeit geht heute zuende, in der ich vor meinem Rechner saß und an meinem neuen Projekt gearbeitet habe. In dieser Zeit, die im Frühjahr 2009 begann, gab es immer wieder Verzögerungen (über ein Jahr ist seit dem ersten Aufruf an Tester vergangen), Unterbrechungen und auch den einen oder anderen Rückschlag zu verkraften. Aber die Idee blieb immer spannend und damit auch die Motivation hoch, weiterzumachen.

Heute ist es nun soweit, “Thinkin’ Tags” öffnet seine Pforten und steht ab sofort als “Public Alpha” zur Nutzung bereit. Dabei handelt es sich um einen visuellen Editor zur Erstellung von Website Prototypen bis hin zu vollständigen CSS Layouts. Entstanden ist “Thinkin’ Tags” aus dem Wunsch heraus, im YAML Builder mehr Gestaltungsfreiheit zu haben. Herausgekommen ist ein völlig neuer Ansatz, CSS Layouts vollständig im Browser zu entwerfen. Dieser Ansatz basiert auf dem Gedanken, dass ein visueller Workflow nur dann funktionieren kann, wenn die Applikation den Anwender zurückhaltend unterstützt. Diese Unterstützung besteht darin, dass die Layoutentwicklung auf Basis eines CSS Frameworks erfolgt und die Applikation die Funktionalität dieses CSS Frameworks kennt. Das führt dazu, dass es einerseits möglich ist, dem Anwender komplexe Layoutelemente in die Hand zu geben, um seinen Arbeitsfortschritt zu beschleunigen und gleichzeitig dafür Sorge zu tragen, dass unbedacht gewählte CSS-Eigenschaften die Funktionalität des Frameworks nicht unwissentlich behindern. Diese beiden Aspekte fehlten bisher sämtlichen visuellen Gestaltungsansätzen, weshalb das fröhliche Klicken und Schieben von Elementen mit einem enormen Kontrollverlust verbunden war. Thinkin’ Tags unterstützt momentan zunächst zwei CSS-Frameworks. Dies ist zum einen – Achtung: Überraschung – YAML 4. Zum anderen ist es Blueprint CSS. Bereits während der Entwicklung von Thinkin’ Tags hat sich jedoch gezeigt, dass simple Grid-Frameworks ohne eigene UI Komponenten den Entwurfsprozess nicht wirklich zu beschleunigen vermögen. Ich denke, hier wird die Erweiterung der Framework-Palette eher in Richtung Twitter Bootstrap und Foundation erfolgen, deren Implementation spannend ist, hinsichtlich des Prototypings für Oberflächen von Webapplikationen.

Mit dem heute erreichten Meilenstein, wird die Weiterentwicklung für mich noch spannender, denn das Nutzerfeedback wird entscheidend dafür sein, wohin sich Thinkin’ Tags zukünftig entwickelt. Eine Focussierung auf das Erstellen von Prototypen ist gleichermaßen denkbar, wie die volle Konzentration auf größtmögliche Freiheit für den Anwender, um CSS Layouts bis ins Detail auszuarbeiten, was das Projekt in Richtung einer echten IDE treiben würde. Was genau Thinkin’ Tags aktuell zu leisten im Stande ist, lässt sich in wenigen Worten nur schwer erklären. Deshalb meine Empfehlung: Schaut Euch den Screencast auf der Website an, dieser zeigt, was in 25 Minuten so alles möglich ist.

Deshalb erhoffe ich mir von diesem Public Alpha Release möglichst viel und detailliertes Nutzerfeedback darüber, was Thinkin’ Tags heute schon ist, was der Applikation fehlt und wo ihr – insofern sie Euch gefällt – ihren zukünftigen Platz im Workflow der Frontendentwicklung seht.

Für den Moment lehne ich mich also ein wenig zurück und freue mich auf Euer Feedback. In den kommenden Tagen und Wochen werde ich dann im Detail über das eine oder andere Feature, bzw. über deren technische Hintergründe berichten, denn in Sachen Applikationsentwicklung mit JavaScript ist das schon ein ordentlicher Brocken geworden.


Dienstag28. August 2012

Im Dezember letzten Jahres habe ich bereits über meine Erfahrungen mit Sublime Text 2 geschrieben und das eine oder andere Plugin empfohlen, welches die Arbeit mit HTML/CSS und JavaScript erleichtert. Damals habe ich mich gefreut, dass ich erstmals in einem Editor unter Windows ohne größere Verrenkungen einen Linter ans Laufen gebracht habe, um meine JavaScript-Files auf problematischen Code hin überprüfen zu können. Mittlerweile ist Sublime Text 2 in der finalen Fassung 2.0.1. erhältlich und auch beim Linting ist alles mittlerweile noch viel bequemer geworden.

Das Plugin der Stunde heisst “SublimeLinter” und liefert ein Live-Linting für JavaScript, CSS und noch zahlreiche andere Sprachen und Formate (Ruby, Java, Perl). Installiert wird es sinnvollerweise über den überaus bequemen Plugin-Manager PackageControl, der alle installierten Plugins selbstständig auf dem jeweils aktuellen Stand hält (bequemer geht’s nicht mehr).

Für Mac-Nutzer war’s das bereits, Windows Nutzer müssen sich zusätzlich Node.js installieren, um in den Genuss des Live-Lintings zu kommen. Hintergrund dafür ist, dass OS X standardmäßig eine JavaScript-Engine mit an Bord hat (genannt: JavaScriptCore), während man unter diese mit Node.js nachrüsten muss. Mittlerweile ist aber auch Node unter Windows mit bequemen 2..3 Klicks einrichtet - also keine echte Hürde mehr. Dann noch ein Neustart des Editors und es kann losgehen.

Sobald man eine JavaScript-Datei geöffnet hat, arbeitet der Linter im Hintergrund. Entdeckt er einen Fehler, so wird die entsprechende Code-Zeile mit einem weißen Rahmen umrandet, wie im Screenshot zu erkennen ist. Die einzelnen Fehler lassen sich per Tastaturkürzel (Nächster Fehler: Strg+Alt+E, vorheriger Fehler: Strg+Alt+Shift+E ) ansteuern. Ist der Cursor auf der markierten Zeile, so findet man in der Statusleiste des Editors (die befindet sich üblicherweise am unteren Rand) eine Erklärung, was der Linter auszusetzen hat und in der Codezeile ist die betreffende Stelle zusätzlich mit einem weißen Unterstrich markiert. Das Überprüfen von bestehendem Code, wie auch das Schreiben von sauberem JavaScript wird damit wirklich sehr erleichtert.

Die Konfiguration des Linters ist ebenfalls - dank Sublime Text - sehr übersichtlich gelöst. Über Preferences->Package-Settings-SublimeLinter öffnet man zunächst die Datei “Settings - Default”, kopiert sich deren Inhalt und fügt sie in die - über das gleiche Menü erreichbare - “Settings - User” ein. Anschließend kann der Linter nach Herzenslust konfiguriert werden - zumal alle Optionen dokumentiert sind.


Seite 3 von 44 Seiten

 <  1 2 3 4 5 >  Letzte »