Und ich überlade ihn doch!

In C++ ist es fast schon selbstverständlich jeden Operator mit allen möglichen Operandentypen zu überladen. Man kann für seine eigene Klasse ein „+” oder „~” Operator definieren und so Funktionen auf die Objekte anwenden. Das wohl beste Beispiel für dieses Überladen ist die cout-Funktion, die den „<<”-Operator überlädt um Objekte über den Standard-Stream auszugeben. Das gleiche wollte ich mit C# erreichen um ein Objekt einem anderen zuzuweisen und sich diese zwei „<<” und „>>” optimal als Richtungsanzeige eignen, welches Objekt welchem zugewiesen wird. Leicht gesagt, die Implementierung war nur wenige Zeilen Code. Doch beim Compilieren wurde ich zu tiefst enttäuscht. Man bekommt einen Compilerfehler CS0564:

Der erste Operand eines überladenen Schiebeoperators muss den enthaltenen Typ aufweisen, und der zweite Operand muss eine ganze Zahl sein.

The first operand of an overloaded shift operator must have the same type as the containing type, and the type of the second operand must be int

Es wurde versucht, einen Schiebeoperator (<< oder >>) mit Operanden zu überladen, die über den falschen Typ verfügen. Der erste Operand muss dem Typ selbst und der zweite Operand dem Typ int entsprechen.

Mein Code dazu sah zunächst so aus:

public class ShiftList {
  List<ShiftList> _list;
  ShiftList() {
    _list = new List<ShiftList>();
  }
  public ShiftList operator<<(ShiftList s1, ShiftList s2) {
    s1._list.AddRange(s2);
    return s1;
  }
}

Die Suche im Internet war auch nicht hilfreich. Es häuften sich Kommentare, wie: „Mit etwas anderem als int shiften ergibt keinen Sinn, deswegen ist es verboten.” Mit einer solchen Aussage wollte ich mich natürlich nicht abfinden. Und nur weil es nicht so klug ist, heißt es nicht, dass man mir das auch verbieten darf. Ich mein, wo kommen wir denn da hin? Also hier eine Lösung für alle die das genauso frustet wie mich. Sie ist nicht sehr schön und bringt eine Menge Overhead mit sich, aber hier geht es ja nur um Funktion.

public class ShiftList
{
  List<ShiftList> _list;
  int id = -1;
  static List<ShiftList> _shifts = new List<ShiftList>();

  public ShiftList ()
  {
    _list = new List<ShiftList> ();
  }

  public static ShiftList operator<< (ShiftList s1, int s2) {
    ShiftList s = new ShiftList ();
    s._list.AddRange (s1._list);
    s._list.AddRange (_shifts[s2]._list);
    return s;
  }

  public static implicit operator int(ShiftList s) {
    if(s.id == -1) {
      s.id = _shifts.Count;
      _shifts.Add (s);
    }
    return s.id;
  }
} 

Der Trick ist eine implizite Konvertierung zu int, die eine ID, in diesem Fall einfach der Index einer Liste, zurückgibt, auf die in dem Shift-Operator zugegriffen werden kann. Der Rest passiert quasi von allein:

ShiftList x1 = new ShiftList (), x2 = new ShiftList ();
...
ShiftList x3 = x1 << x2;

Ausblick:

Wie man leicht sieht, ist dieser Code weit von effizient und hochperformant entfernt. Er dient in erster Linie zur Verschönerung des Codes, weil ich unübersichtliche Zeilen mit sehr kurzen ersetzten konnte. Wer Zeit- und Resourcenkritisch arbeiten will, sollte sich beispielsweise Gedanken über eine bessere Indizierung machen. Da alles in zwei Aufrufen geschieht, muss man sich auch sehr genau mit Threadsicherheit beschäftigen, sollte man sein Programm auf mehr als einen Thread ausweiten wollen. Wer viele Objekte hat sollte auch daran denken, die Objekte aus der Liste wieder zu entfernen, nachdem der Shift-Operator seine Arbeit getan hat und vieles mehr. Kurz gesagt, es besteht viel Optimierungsbedarf und will man andere Klassen, als die Klasse selbst anhängen, muss noch weit mehr Arbeit investiert werden, aber es tut genau das, was ich wollte und das ist alles was zählt :)

HTML/CSS unerwünschte Markierung verhindern

Wer erinnert sich noch an die Zeit, als Hover-Effekte nicht mit CSS sondern mit Bildern und Javascript gelöst wurden. Das war nicht nur sehr statisch, sondern auch anstrengend zu implementieren für wenig Effekt. Heute in der Zeit von CSS3, mit Farbverläufe, runden Ecken und :hover legt man einfach einen Button an, indem man ihm einen Text gibt und ihn danach bunt macht. Dadurch braucht man kein lästiges Bild mehr, das erst vom Server geladen werden muss. Am Ende sieht das etwa so aus:

Jetzt bekommt man aber auch die Schattenseite von purem HTML zu spüren. Es ist Text. Und Text kann markiert werden. Wer will kann es gern ausprobieren. Für alle, die dafür zu faul sind, habe ich das bereits vorbereitet:

Markierter Button

Das passiert nicht nur bei Buttons. Speziell Links, besondere Überschriften, oder ein Text, der eigentlich als Logo gedacht war, kann so völlig entstellt werden. Der Horror für jeden Designer, der, nachdem ihm das zum ersten Mal auffällt, plötzlich die gesamte in Mühe erstellte Seite Stück für Stück markiert und sagt, wie schrecklich sie doch plötzlich ist…

Doch auch dieses Problem hat eine einfache Lösung. Abhilfe schafft hierfür das CSS Attribut content. Hiermit kann einem HTML Element Text hinzugefügt werden, der nicht markiert werden kann. Auch hier habe ich schon einmal etwas vorbereitet:

Versucht man nun den Button zu markieren, werden nur noch die beiden Leerzeichen links und rechts davon markiert. (Im richtigen Design sollten solche Leerzeichen auch entfernt werden und durch CSS margin, padding oder position gelöst werden.)

Umgesetzt wird es durch einen Button (oder jedes andere beliebige Tag), der jetzt keinen Inhalt mehr hat. Die Klasse testbutton1 enthält wie gewohnt alle Eigenschaften, die daraus einen hübschen Button machen.

 <button class="testbutton1"></button>

Den Inhalt des Buttons fügt man über folgenden CSS-Code hinzu:
button.testbutton1:before {
 content: "Button 2";
}

Mit diesen wenigen Zeilen erhält man den Button wie oben beschrieben. Kein lästiges Markieren mehr. Diese Technik kann auf vieles übertragen werden. Prinzipiell ist eine Anwendung auf alle Tags denkbar, wie beispielsweise span, a, oder h#. Wichtig hierbei ist das Pseudo-Element :before. Es wäre auch :after möglich, wichtig ist jedoch, dass es nicht ohne eines dieser Elemente benutzt wird. Manche Browser unterstützen es. Andere, wie der Internet Explorer, erzeugen die Ausgabe nur mit :before oder :after.

Nach dieser Einführung ist aber noch eine wichtige Frage offen: Warum soll ich jetzt nicht auf meiner gesamten Seite mit dieser Technik sämtliche Markierung verhindern? Ernsthaft, das ist nicht immer sinnvoll! Stellt euch vor, ich hätte diesen Artikel mit dieser Technik verfasst. Bisher habe ich nur 4 Zeilen Code, aber ohne die Möglichkeit diese zu markieren, wären die Meisten von euch genervt.

Zuletzt möchte ich noch einen Ausblick geben, wie diese Technik noch verfeinert werden kann. Das statische content: “string”; mag in vielen Fällen ausreichend sein. Manchmal möchte man das ganze aber auch dynamischer gestallten und den Inhalt über PHP, Javascript oder wie auch immer setzen. Hierfür kann content angeleitet werden, ein Attribut statt eines Textes zu verwenden:

CSS: content: attr(data−content);

HTML: <button class="testbutton1" data−content="Button 1"></button>

Wenn wir das ganze jetzt noch mit Javascript verbinden, ist es beispielsweise möglich, das Attribut und damit die Anzeige zu verändern: (Klickt, wenn ihr er herausfinden wollt, was ich meine ;) )

Kurz notiert: Fonts für’s Web

Immer mal wieder kommt man aus Designgründen auf die wirklich unbequeme Idee, keinen Standardfont für das eigene Website-Design zu verwenden.
Nicht immer hat man jedoch den entsprechenden Font in allen möglichen Dateiformaten vorhanden und noch viel weniger will man sich damit beschäftigen, wie man diese verschiedenen Files jetzt in den eigenen Code implementiert, um, ohne dass die Browser irgendwelche Fehler werfen, in allen Browsern das selbe Look-and-Feel zu erzeugen. Dafür gibt es glücklicherweise eine einfache Lösung. Unter http://www.fontsquirrel.com/tools/webfont-generator muss man nur kurz das eigene Fontfile hochladen und erhält ein Archiv, dass den konvertierten Font, eine einzubauende css-Datei sowie eine Anleitung enthält. Einfach traumhaft :D