Though it is really awesome there is a lack of modern coding standards and patterns in some projects like WordPress and Drupal. In both projects the API is functional. The hook system is flexible it is easy and it is fast, but it is also a pure PITA. Another part I’m not very happy about is the way both projects handle the templating. When you look at the WordPress default theme HTML code is defined in functions and everything is mixed up. There is a tendency, but nothing more.

Things are changing in Drupal as they introduce more and more components from Symfony, which is to me THE shining example of clean and proper coding.

An unbearable amount of developers is working with those technologies and most of the websites are based on them. It may make it harder to motive programmers when the implementation standard advances, but programmers are getting better and better and these projects could lift the level of the whole developing community by miles… and they should.

In the HTML5 spec the custom data attributes are clearly defined for use for in your own application.

These attributes are not intended for use by software that is independent of the site that uses the attributes.

Passing data to JavaScript

There has always been the problem of how to get data out of your database through your server logic to the fron end. I’ve tried and used those endless long JavaScript arrays/objects. One problem was the mapping between the array/object and the corresponding element. There was always the need of passing an identifier in the id like:

<div id="post_7">foo</div>

When you want to show a sequence of entries you have to loop through your data twice (in the header section and the body) or you build up PHP-arrays or strings of doom. No matter which solution you chose it won’t have anything to do with clean templating.
Another problem is, the markup is spoiled with tons of JavaScript and senseless ids.

There’s also the possibility to load your data with AJAX, which is absolutely valid when you render your templates in the frontend. But as soon as you use AJAX your application is stateful and you have to deal with the impacts like loading and waiting.

There’s also the possibility to save the data in other attributes and there are also some that fit semantically like title or href, but most of your data won’t fit in a standard attribute.

A clean representation might look like this:

<a title="John Doe" href="#john-doe" data-id="7" data-eye-color="blue">John Doe</a>


Selecting elements in JavaScript

When you implement a dynamic web application you always need to select elements. Modern Browsers support query selectors like jQuery or other frameworks do. Usually you use ids for selecting certain elements and classes for a set of them. Using classes is a really bad habit as they should be used for styling the elements only. It is possible to separate classes for logic and style but it is very very likely you mess them up.

Bad:

<style>
.itm {
color: blue;
}
</style>
<script>
var $itms = $('.itm');
</script>
<ul><li class="itm">A</li><li class="itm">B</li></ul>


Good:

<style>
.blue {
color: blue;
}
</style>
<script>
var $itms = $('.itm');
</script>
<ul><li class="blue itm">A</li><li class="blue itm">B</li></ul>

Better:

<style>
.itm {
color: blue;
}
</style>
<script>
var $itms = $('[data-itm]');
</script>
<ul><li class="blue" data-itm>A</li><li class="blue" data-itm>B</li></ul>

You need to be aware that those selectors are slower than class names and you may return to class names when your application gets slow, but this solution may fit most of your needs. It may also help to save your elements in vars as long as you work with a reference of them.

Storing data in JavaScript

There is always the question where the data should be saved. There is data that could be saved in your DOM-element, like position, but others may be saved in an array or object.

By using data-*-attributes your data is where it belongs, on your element, also the transition is seemless. As you could pass your initial data from your server to the frontend.

<div data-box data-x="5" data-y="7"></div>
<script>
$('[data-box]').data('x', 10);
</script>


Upshot

Since I use these patterns my code looks cleaner then ever. Now there is absolutely no need to write any JavaScript code in the HTML-Document. I put the data where it belongs to its logical place. The concern of the elements is also clear.

Use those attributes now! Your coding style will improve and the result will be much better.

What i need now is syntax highlighting that distinguishes between attributes for representation and logic.

• http://ejohn.org/blog/html-5-data-attributes/
• http://danwebb.net/2010/1/27/put-that-data-attribute-away-son-you-might-hurt-someone
• http://dev.w3.org/html5/spec/global-attributes.html#embedding-custom-non-visible-data-with-the-data-*-attributes
• http://roytomeij.com/2012/dont-use-class-names-to-find-HTML-elements-with-JS.html
• http://chriseppstein.github.com/blog/2010/09/01/blurring-the-line-between-content-and-presentation-with-data-attributes/

UPDATE 8.10.2012

Also read this article, which gives further information on the speed of the selectors, also by @roy (thx @jayeff) http://roytomeij.com/2012/follow-up-don-t-use-class-names-to-find-html-elements-with-js.html

I’m hoping for a lot of interaction and that i may help some of you.

Just write

WordPress bietet mit dieser Funktion eine Oberfläche, die sich auf das Schreiben reduziert. Das ist technisch nicht aufregend, aber nett gemacht und fokusiert den Schreiber.

HTML5

Das Standard Theme Twenty Eleven unterstützt jetzt komplett HTML5. Nachdem es unzählige WordPress Blogs im Netz gibt, die auf das Standard Theme zurück greifen, wird es die Verbreitung von HTML5 weiter vorantreiben.

Responsive

Das Standardtheme ist nicht nur voll in HTML5 umgesetzt sondern auch responsive. Das heißt die Darstellung passt sich auf das jeweilige Ausgabegerät an. Egal ob Tablet, Smartphone oder normaler Computer, es wird immer eine optimierte Darstellung geliefert (oder definiert). Das ist großartig.

IE6 gone

IE6 wird nicht mehr unterstützt. Nachdem unter anderem Facebook auf diesen Entwickler Horror keine Rücksicht mehr nimmt, macht das jetzt auch WordPress.

Vor allem die letzten drei Features haben mich sehr erfreut, sie spiegeln die aktuellen Trends wieder und verhelfen uns zu einer besseren Erfahrung im Netz.

http://opengameart.org/browse-menu/audio/25/10
Ressourcen für Spiele sind natürlich immer eine gute Quelle. Viel Open Source und auf der richtigen Seite gute Qualität.

http://www.freesound.org/index.php
Vielzahl an Soundfiles. Teilweise in guter Qualität.

Garage Band
MacOS Software, die auf vielen Geräten installiert und ein wahrer Fundus für Soundeffekte hoher Qualität ist.

http://soungle.com
Soungle ist eine Sound Suchmaschine. Doch wie es sich mit Suchmaschinen so hat, lässt die Qualität oft zu wünschen übrig.

http://soundbible.com/
Sieht zwar aus wie ein Blog, bietet aber dann doch etliche ordentliche Files.

Welche kennt ihr?

Der Unterschied zwischen Twitter und Facebook wurde mir zu diesem Ausmaß erst durch den Vergleich von der Facebook Places API mit jener von Foursquare klar. “Twitter – Facebook” und “Foursquare – Facebook Places”, das ist eine schlüssige Assoziation mit der man bei der Musterung sicher ein paar IQ-Punkte ergattern könnte. Der Unterschied: Auf Foursquare lässt es sich problemlos heraus finden wer an welchem Ort eingecheckt ist, die GraphAPI von Facebook zeigt einem standardmäßig aber nur die Freunde. Ein kleiner, aber entscheidender Unterschied. Facebook will bestehende Verbindungen zwischen Menschen stärken. Foursquare/Twitter will neue Verbindungen schaffen. Auf Twitter wird man mit “who to follow” empfohlen, bei Facebook sind es “Personen die Du vielleicht kennst”. Durch Pages zieht Facebook auch eine klare Zäsur zwischen Freunden und Marken, Vereinen usw…, bei Twitter existiert das nicht.

Reduziert man Facebook nur auf den Newsfeed, ist es von Gestaltung und Funktionalität mit Twitter vergleichbar. Trotzdem würde es sich anders entwickeln. Diese Tatsache zeigt wie groß das Feld der sozialen Netzwerke ist und wie unterschiedliche Communities gebaut werden können. Als Entwickler bleibt man also motiviert. Dreht man ein paar Mechanik-Schrauben ein Stückchen weiter, kann schon ein neues großartiges Netzwerk entstehen. Es gilt lediglich die richtige Anzahl der Umdrehungen zu finden.

Easy.

Das Internet ist ein böser Ort. Komplett unpersönlich vereinsamt es Menschen durch seiner Oberflächlichkeit. Suggeriert den Menschen Freundschaft wo keine ist, verlernt ihnen die wahre Einsamkeit, mit seiner falschen Allgegenwertigkeit und Nähe. Bindungen die so das wirkliche Leben nicht überstehen würde. Eine Ansammlung Perverser, die ungehemmt ihre tiefsten Abgründe entfalten und mit anderen Perversen teilen können. Es bedient in jedem Fall einen Abgrund, den Voyeurismus, mit sich exhibitionierenden Unwissenden, allesamt Opfer des Systems.

Abschalten!

…wieder einschalten und mit anderen Augen sehen.

Kreativität, überall. Menschen bauen, basteln und vernetzen sich. Lassen andere teil haben. Ein Kleinod an Inhalten, unbearbeitet, roh und authentisch. Bilder, Videos und Anleitungen animieren und begeistern Millionen über die ganze Welt verbreitet. Kein Hochglanz, aber ehrlich. Vielschichtig in seinen Meinungen und der Darstellung. Eine Masse an Stimmen, die eine einzelne verkümmern lassen, auch wenn sie in noch so großen Lettern auf Nasen geschrieben wird. Es sind Zutaten die wir vorfinden. Keine vorgekaute Kost, die an einem Stammtisch aufgewärmt im Ganzen runter gewürgt werden kann. Verbindungen, die echte Freundschaften nicht ersetzen, aber zu solchen wachsen können und die die Reichweite des eigenen Kirchtums um Weiten überschreiten. Und bei Bedarf kann man ja immer noch:
Abschalten!

Vor 10 Tagen ist eine von mir mit entwickelte Facebook App gesperrt worden. Man bekommt ein Email, das man das Passwort seines Facebook Accounts reseten solle. Der App selber merkt man es vorerst nicht an, sie ist über die App-Url oder das Tab nach wie vor zu erreichen. Lediglich die API, oder ein Teil davon, kann nicht mehr verwendet werden, was bei sauberer Programmierung und dementsprechender Fehlerbehandlung kein Problem sein sollte. Facebook reagiert dann auf folgende Emailanfragen durchaus schnell. Dabei handelt es sich natürlich nicht um Minuten, aber immerhin nur um Stunden.

Auf unser Nachfragen wurden wir daraufhingewiesen, dass die App nicht von Facebook selber gesperrt wurde, sondern automatisch. Welche Mechanismen da wie greifen und welche Heuristiken verwendet werden ist unklar. Die Policy Verletzungen waren durchaus offensichtlich, dass sie rigoros durchgesetzt werden aber neu. Es ist auch durchaus denkbar, dass Dritte die App bei Facebook angeschwärzt haben.

Alles in Allem aber eine sehr unangenehme Geschichte, wenn man aber die technischen Möglichkeiten ausreizt und an die Grenze geht, ist eine Sperrung durchaus im bereich des Möglichen. Wenn man auf solchen Plattformen entwickelt, begibt man sich in eine Abhängigkeit die Ohnmächtig macht. Egal ob auf Twitter, Facebook oder für einen der App Stores, man legt sein Werk in die Hände von höheren Mächten und muss sich nach deren Spielregeln, die teils recht willkürlich angelegt und gehandhabt werden, richten. Dies reduziert sich nicht nur auf die Programmierung, wie man bei den Änderungen der Pages letzte Woche gesehen hat. Facebook entscheidet da plötzlich was für Fans relevant ist und was nicht.

Ein großer Faktor ist die Unklarheit. Facebook bietet zwar Policies an, allerdings sind diese nicht wirklich klar. Mehrdeutigkeiten scheinen Programm zu sein. Wie die Policies durchgesetzt werden ist ebenso unklar. Was erschwerend dazu kommt: Facebook ist nicht greifbar. Es bietet zwar mehrere Kanäle, doch dass die aus einem Forum, einem Kontaktformular und einem Bug-Tracking Tool bestehen sagt schon alles darüber aus.

Was ich daraus gelernt habe? Man ist in der Abhängigkeit von Facebook und muss sich dessen bewusst sein, vor allem wenn man die technischen Möglichkeiten ausloten will und in sich in Graubereichen bewegt. Die Polices alleine sind sicher kein Maßstab, um ein besseres Gefühl zu bekommen sollte Probleme anderer Entwickler im diesen Bereich aufmerksam beobachten werden.

Als Programmierer ist der Begriff “Framework” alltäglich. Ob als Datenbankabstraktion (Doctrine,…), Entwicklungstool (Grails,…), Zwischenebene um Browserschächen in JavaScript (jQuery,..) und CSS (960gs,…) auszumerzen oder einfach das Entwickeln leichter zu machen und nicht jedes Mal das Rad erneut zu erfinden (alle zuvor genannten und unzählige mehr). Es ist eine vielfältige Welt in der man entwickelt und um nicht auf alle Feinheiten selber eingehen zu müssen, legen sich die Frameworks wie ein plüschig weicher Schwamm dazwischen und sorgen dafür dass man die Unebenheiten nicht spürt.

Über das Appstore Konzept, welches ja durchaus vergleichbar ist, hab ich ja bereits geschrieben. Doch Framework-Strukturen scheinen sich auch in anderen Lebensbereichen ab zu bilden. Klassisches Beispiel die Medien. War man vor den neuen Medien noch den Kanten einiger weniger, starker Zeitungen, Fernseh- und Radiosender ausgesetzt, hat man mit dem Internet die Möglichkeit einen viel ambivalenteren Blick auf die Dinge zu bekommen. Mit Twitter und Facebook bekommt man direkten Einblick auf das Geschehen geliefert, ungefiltert, authentisch und aus den unterschiedlichsten Betrachtungsweisen.

“Networken”, einer der hässlichsten Begriffe mit dem geistigen Ziehvater der “Freunderl Wirtschaft”, hat sich etabliert, ist Salon fähig geworden und ein wichtiges Tool für jeden der auf Aufträge, Jobs, Ressourcen oder Projekte angewiesen ist.

Herkömmliche, stark gerichtete, engstirnige Konzepte wie traditionelle Medien, Staat und Religion können mit diesen neuen Strukturen nicht mehr mithalten und sind nicht nur deshalb in einer starken Sinnkrise.

I’ve created a short example of the behaviour.