Nach langer Recherche fand ich einen Artikel, der dieses Phänomen in wenigen Sätzen beschreibt: Demnach war das ein Problem der Rendering-Engine im Safari.

Der Bug kann aber umgangen werden, wenn das richtige Element einen negativen Außenabstand (margin) erhält. Die folgenden zwei Zeilen brachten die Lösung:

1
2
3
4

element {
  margin:  -1px 0;
  padding: 1px 0;
}

Hatte einer von euch schon das Problem?

Vorbereitung

Alle Checkboxen, die zusammengehören, haben in der Regel denselben Wert im name-Attribut. (In unserem Beispiel items[].) Dieser Wert wird also auch als Referent verwendet, um alle Checkboxen auszuwählen. Wir erstellen also eine neue Checkbox und geben dem data-reference-Attribut den Wert items[]. Das entspricht dem name-Attribut der Checkboxen.

Der Code

Gehen wir von diesem HTML Konstrukt aus:

1
2
3
4
5
6
7

<label for="item-1"><input id="item-1" type="checkbox" name="items[]" value="1" /> Ben</label>
<label for="item-2"><input id="item-2" type="checkbox" name="items[]" value="2" /> John</label>
<label for="item-3"><input id="item-3" type="checkbox" name="items[]" value="3" /> Felix</label>
<label for="item-4"><input id="item-4" type="checkbox" name="items[]" value="4" /> Alex</label>
<label for="item-5"><input id="item-5" type="checkbox" name="items[]" value="5" /> Tim</label>
 
<label><input id="select-all" type="checkbox" name="select-all" value="" data-reference="items[]" /> Select all</label>

Klick man nun die Checkbox mit der ID select-all an, so werden alle Checkboxen mit dem Namen selektiert und ausgewählt.

1
2
3
4
5
6
7
8
9
10
11

$('#select-all').on('click', function (e) {
  var activator = $(this);
  var reference = activator.data('reference');
 
  if (activator.is(':checked')) {
    $(':checkbox[name="' + reference + '"]').attr('checked', 'checked');
  }
  else {
    $(':checkbox[name="' + reference + '"]').removeAttr('checked');
  }
});

Im Grunde genommen war’s das auch schon. Das jQuery Plugin wurde nur um eine weitere Option erweitert: Es kann den Status der Checkboxen umkehren. Ausgewählte Checkboxen werden abgewählt und umgekehrt.

Vorbereitung

Als Ersten benötigen wir eine Datenbanktabelle, in der die Events eingetragen werden. In diesem Beispiel besteht ein Event nur aus einem Datum und einem Titel. Für die Demonstration sollte das auch genügen.

1
2
3
4
5
6

CREATE TABLE IF NOT EXISTS `events` (
  `id` INT(11) NOT NULL AUTO_INCREMENT,
  `date` DATE NOT NULL,
  `title` VARCHAR(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

Ausgabe

Um die Events für den Kalender aus der Datenbank auszulesen, muss zuerst eine Verbindung zu der Datenbank hergestellt werden.

45

$db = new mysqli('localhost', 'test', 'passwort', 'test');

Die Zeilennummern beziehen sich auf das original Kalender Tutorial, dass am Anfang des Artikels verlinkt ist!

Ist das erfolgt, werden die Event des ausgewählten Monats aus der Datenbank auslesen.

46

$result = $db->query("SELECT * FROM `events` WHERE DATE_FORMAT(`date`, '%Y-%m') = '".strftime('%Y-%m', mktime(0, 0, 0, $month, 1, $year))."'");

Jetzt gehen wir die Ergebnisse durch und schreiben die Events in ein zweidimensionales Array. Als Schlüssel nehmen wir das Datum des Events.

48
49
50
51
52

$events = array();
while($event = $result->fetch_object())
{
  $events[$event->date][] = $event->title;
}

Als letzten Schritt müssen wir nur noch in der for-Schleife gucken, ob an dem Tag ein Event eingetragen ist und wenn ja, diesen irgendwie ausgeben. Zusätzlich bekommt die Zelle der Tabelle eine Klasse. Das erreichen wir, indem wir gucken, ob das aktuelle Datum als Schlüssel im Array definiert ist.

Bei der Ausgabe habe ich nur ein i-Element mit einem „T“ in Klammern ausgegeben. Das title-Attribut beinhaltet die Event-Titel Komma getrennt. (Diese werden dann als Tooltip angezeigt.)

137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169

<?php for($day = 1; $day <= $total_days; $day++):?>
 
  <?php $class = array();?>
 
  <?php // Wenn das aktuelle Datum dem "Schleifeninhalt" entspricht ?>
  <?php if(($n_month == $month) && ($n_year == $year) && ($day == $n_day)):?>
    <?php $class[] = 'today';?>
  <?php endif;?>
 
  <?php // Wenn an dem Tag Events eingetragen sind ?>
  <?php $has_events = false;?>
  <?php if(array_key_exists(strftime('%Y-%m-%d', mktime(0, 0, 0, $month, $day, $year)), $events)):?>
    <?php $has_events = true;?>
  <?php endif;?>
 
  <td id="day-<?php echo $day;?>" class="<?php echo implode(' ', $class);?>">
    <?php echo $day;?>
    <?php if($has_events === true):?>
      <i class="icon-info" title="<?php echo implode(', ', $events[strftime('%Y-%m-%d', mktime(0, 0, 0, $month, $day, $year))]);?>">(T)</i>
    <?php endif;?>
  </td>
 
  <?php $day_offset++;?>
 
  <?php // Für neue Woche eine neue Zeile beginnen ?>
  <?php if($day_offset == 7):?>
    <?php $day_offset = 0;?>
    <?php if($day < $total_days):?>
    </tr>
    <tr>
    <?php endif;?>
  <?php endif;?>
<?php endfor;?>

Dies ist eine Erweiterung des Kalenders aus dem Artikel: Einfacher Kalender mit PHP in 100 Zeilen

Das war’s! Ihr habt nun einen voll funktionsfähigen Event-Kalender.
Wenn ihr die Ausgabe anders haben möchtet, dann müsst ihr nur den Bereich der for-Schleife anpassen.

Installieren

Bower lässt sich leicht über den Node Package Manager (npm) installieren:

npm install -g bower

Pakete suchen

Bower erlaubt eine recht bequeme Suche nach verfügbaren Paketen:

bower search

bower search package

Wer lieber eine grafische Oberfläche bevorzugt, der kann sich auf sindresorhus.com/bower-components umschauen.

Pakete installieren

Bower kann die Pakete nicht nur aus seinem Repository installieren. Auch das Installieren direkt von GitHub oder per HTTP ist möglich. Dabei kann in der Regel eine feste Version angegeben werden, damit Kompatibilitätsprobleme ausgeschlossen werden können. Bower legt die Pakete dann standardmäßig im „components“ Verzeichnis ab.

bower install bootstrap-sass

bower install bootstrap-sass#2.1.1

bower install git://github.com/jlong/sass-twitter-bootstrap.git

bower install https://github.com/jlong/sass-twitter-bootstrap.git

Alternativ habt ihr sogar die Möglichkeit Pakete von der eigenen Festplatte zu installieren:

bower install /home/www/github/netbeans-code-templates

Pakete aktualisieren

Pakete lassen sich ebenso einfach aktualisieren. Der folgender Aufruf genügt:

bower update

Wichtig zu wissen ist es, dass der Aufruf alle Pakete aktualisiert. Will man hingegen nur eins aktualisieren, so muss man einfach eine neuere Version installieren:

bower install bootstrap-sass#2.2.1

Pakete deinstallieren

Auch das Deinstallieren geht denkbar einfach;

bower uninstall bootstrap-sass

Projekt verwalten

Die gezeigten Kommandos sind an sich sehr cool, jedoch ist die Verwaltung eines Projekts so recht schwierig. Aus diesem Grund kann man eine components.json-Datei anlegen, die alle benötigten Pakete auflistet. Anschließend genügt der folgende Aufruf:

bower install

Eine components.json beinhaltet in unserem Beispiel den folgenden Code:

{
  "name": "StarStormDesign",
  "version": "1.0",
  "dependencies": {
    "bootstrap-sass": "2.2.1"
}

Unter „dependencies“ können nun alle Pakete angegeben werden, die wir benötigen.

Bower konfigurieren

Will man seine Pakete nicht in dem „components“ Verzeichnis haben oder die components.json-Datei andern benennen, so benötigt man eine Konfigurationsdatei namens .bowerrc. Diese beinhaltet ebenfalls JSON:

{
  "directory": "third-party",
  "json": "libraries.json"
}

Dort kann man unter anderem das Zielverzeichnis definieren.

Fazit

Mit Bower habt ihr ein tolles Tool zur Verwaltung von Paketen. Bequemes installieren und aktualisieren von Paketen ist jederzeit problemlos möglich. Diese können dann auf die „ignore“-Liste bei der Versionskontrolle kommen.

Es wäre doch gut, wenn wir pro Widget eine eigene CSS Datei hätten. Diese beinhaltet sämtlichen Code, den wir für das Widget benötigen. Das hat aber zur Folge, dass man unzählige Dateien in eine Seite einbinden muss. Außerdem hätte man immer irgendwo redundanten Code.

Als ein Widget bezeichne ich ein Element der Seite, der für dich geschlossen ist und theoretisch auch in einem anderen Projekt eingesetzt werden könnte. Beispiel: Slider, Tabs, Akkordions, Header, Footer, Schnellsuche usw.

Eine mögliche Lösung für viele Probleme sind sogenannte Präprozessoren. Diese haben eine CSS ähnliche Syntax und erweitern das CSS um Features, die die Arbeit mit CSS erleichtern. Es wird dabei immer richtigen CSS kompiliert.

Was ist Sass?

Sass (Syntactically Awesome Stylesheets) ist eins dieser Präprozessoren. Sass Dateien haben die Dateiendung .scss und werden können nach der üblichen CSS Syntax geschrieben werden. Eigentlich kann auch jede CSS-Datei einfach in eine SCSS-Datei umbenannt werden, wenn man ab einem bestimmten Moment mit Sass arbeiten möchte.

Um Sass verwenden zu können, ist Ruby erforderlich. Auf Unix-basierten Systemen sollte Ruby schon vorinstalliert sein. Auf Windows lässt es sich leicht installieren.

Eine Installationsanleitung findet ihr auf der offiziellen Seite.

Welche Vorteile bring Sass?

Variablen

Ein Segen für alle Frontend-Entwickler werden die Variablen sein. Sass erlaubt es uns diese zu definieren und somit alle Größen, Farben und Abstände an einem separaten Ort zu lagern. Es ist nicht mehr nötig aufwendig nach einem Farbwert zu suchen, wenn man an einer anderen Stelle diese Farbe erneut braucht. (Ober was noch schlimmer ist: Man öffnet erneut die Vorlage und pickt sich die Farbe raus. Dann kann es passieren, dass der Wert minimal, für das Auge vielleicht gar nicht sichtbar, abweicht. Somit wäre auch ein Suchen/Ersetzen nutzlos.) Muss eine Änderung erfolgen, so geschieht die an nur einer Stelle.

$headline-color: #ccc;
h1 { color: $headline-color; }
h2 { color: $headline-color; }

Verschachtelung

In Sass können die CSS-Regeln verschachtelt werden. Das erhöht die Übersicht extrem und gibt ein bisschen die Verschachtelung in der HTML-Datei wieder. Jedoch Achtung: Diese Funktion kann dazu verleiten sehr lange Selektoren zu erzeugen. Diese sind komplexer und weniger effizient.

ul {
  margin: 0;
 
  li {
    display: inline-block;
 
    a {
      display: block;
      color: #00f;
 
      &.active {
        color: #f00;
      }
    }
  }
}

ul {}
ul li {}
ul li a {}
ul li a.active {}

Das & entspricht dabei dem Eltern-Selektor.

Mixins

Mixins sind Sass Bausteine, die immer wieder verwendet werden können. Diese Bausteine können leicht mit einer @include Anweisung eingefügt werden. Dabei wird der Code, der im Mixin erzeugt wird, einfach an der Stelle des @include eingefügt.

@mixin text-color($color: #000, $headline: 0) {
  @if $headline == 1 {
    font-weight: bold;
  }
  color: $color;
}
 
h1 {
  @include text-color(red, 1);
}

h1 {
  font-weight: bold;
  color: red;
}

Ein Mixin ähnelt vom Aufbau einer Funktion von einer Programmiersprache. Es kann Parameter entgegennehmen und sogar if-Abfragen beinhalten.

Vererbung

Ein sehr oft verwendetes Feature ist die Vererbung in Sass. So lassen sich die CSS-Regeln sehr schnell und einfach auf ein anderes Element übertragen, ohne redundanten Code schreiben zu müssen. Ein gutes Beispiel hierfür wären Infoboxen. Diese gibt es meistens in verschiedenen Farben, aber mit einem gleichen Aufbau. (Fehlermeldung, Hinweis, Erfolgsnachricht usw.)

.message {
  border: 1px solid transparent;
  padding: 10px;
}
.error {
  @extend .message;
  border-color: red;
  color: red;
}
.success {
  @extend .message;
  border-color: green;
  color: green;
}

.message, .error, .success {
  border: 1px solid transparent;
  padding: 10px;
}
.error {
  border-color: red;
  color: red;
}
.success {
  border-color: green;
  color: green;
}

In den meisten Fällen ist es sinnvoller die Vererbung, anstelle von Mixins, zu verwenden, da der Code nicht wiederholt wird.

Zusammenfassen in eine Datei

Ich habe oben schon erwähnt, dass es viel einfacher wäre, wenn man pro Widget eine CSS-Datei hätte. Mit Sass können wir so problemlos arbeiten, denn es besteht immer die Möglichkeit mehrere SCSS-Datein, beim Kompilieren, zu einer einzigen CSS-Datei umzuwandeln.

Sass fasst alle Dateien in eine zusammen, die mit einem Unterstrich beginnen und in eine andere Datei, mit der @import Anweisung, geladen werden.

@import 'variables';
@import 'reset';
@import 'layout';
@import 'widget-xy';

Fazit

Mit Sass ist es möglich sehr große Projekte sehr sauber zu gestalten und Anpassungen in kürzester Zeit durchzuführen. Wobei ich Sass nicht nur für große Projekte empfehle.

Natürlich erfordert die Einarbeitung etwas Zeit, diese werdet ihr jedoch in kürzester Zeit wieder einholen.

Heutige Themen

• Meta-Tag: news_keywords
• Update: Rich Snippets Testing Tool
• Webmaster Guidlines
• Responsive Patterns
• Studie
• Icon Fonts: Vor- und Nachteile
• Guide: Gooogle Web Forms
• Neue Plattform für Webentwickler
• Unterhaltung: iPhone 5

Meta-Tag: news_keywords

Google hat wieder etwas Neues parat und führt ein neues Meta-Tag »news_keywords« ein. Damit sollen Artikel in Google News schneller zugeordnet werden. Dabei wird nicht der normale Algorithmus von Google  verwendet, da dieser für den Newsbereich etwas zu langsam ist.

Update: Rich Snippets Testing Tool

Durch Vladimir Simović bin ich auf die Aktualisierung des Testing Tool für die Rich Snippets von Google aufmerksam geworden. Wie es aussieht, wird in Zukunft mehr Wert darauf gelegt. Ich finde das wirklich klasse.

Webmaster Guidlines

Und da wir schon bei Google sind: Es wurden neue Guidelines für Webmaster veröffentlicht. Da sagt Google ganz klar, was die Suchmaschine nicht will/abstraft.

Responsive Patterns

Responsive Webdesign ist jetzt voll in! Und auch ich taste mich langsam durch die “unerforschte” Technologie. Dabei bin ich auf eine Seite mit Responsive Patterns (Entwurfsmuster) gestoßen. (Das sind bewährte Lösungsansätze für wiederkehrende Probleme.)

Studie

Eine Studie gibt es heute auch: Was wünschen sich die Angestellten? Natürlich mehr Ruhe.

Icon Fonts: Vor- und Nachteile

Auf codingpeople.com werden die Vor- und Nachteile von Icon Fonts sehr gut erläutert.

Guide: Gooogle Web Forms

Gestern habe ich noch auf die “Getting Started” Seite der Google Fonts verwiesen, als mich ein Kollege etwas fragte. Heute habe ich ein Beginner’s Guide to Using Google Web Fonts am Start.

Neue Plattform für Webentwickler

Ganz neu: W3C, Adobe, Facebook, Google, HP, Microsoft, Nokia,  Mozilla und Opera haben zusammen eine neue Plattform für Webentwickler gegründet. Das Ding ist noch in einer sehr frühen Alpha Version, aber man kann gespannt sein. Ich frage mich was dann aus dem Mozilla Developer Network wird. Finde das ist eine super Wissensquelle!

Unterhaltung: iPhone 5

Und zu guterletzt ein kleiner Lacher: The iPhone 5 (Parody) Ad: A Taller Change

Menu

Für das Menü-Widget wurde der Grundstein bereits in der Version 1.8 gelegt. Es war in dem Autovervollständigungs-Widget untergebracht. Ab der Version 1.9 kann man dieses auch für das Projekt nutzen. Auf der offiziellen Seite findet ihr Demos und die Dokumentation.

Spinner

Das Spinner-Widget sieht auf den ersten Blick wie das Standard-Widget von einem HTML5 input-Element vom Typ »number« aus. Auf der rechten Seite des Feldes werden einfach zwei Pfeile, nach unten und oben, ausgegeben. Mit diesen kann man den Wert des Feldes verändern. Ich muss zugeben, dass mir der Nutzen nicht gleich offensichtlich erschien. Schließlich kann man die neuen HTML5 „input types“ verwenden. Der Vorteil des Spinner-Widgets ist, dass man den Wert auch mit dem Mausrad und per Tastatur (hoch / runter) ändern kann und man in das Feld auch Währungen unterbringen kann. Schaut es euch einfach mal an. Auf der offiziellen Seite findet ihr Demos und die Dokumentation.

Tooltip

Jetzt hat man auch direkt mit jQuery UI die Möglichkeit Tooltips einzublenden. Es ist kein weiteres Plugin mehr nötig. Für das Ein- und Ausblenden kann dabei auf die jQuery UI Effekte zurückgegriffen werden. Auf der offiziellen Seite findet ihr Demos und die Dokumentation.

Weitere Änderungen könnt ihr dem offiziellen Artikel entnehmen.

Relaunch der Webseite

Die Webseite von jQuery UI wurde überarbeitet und hat ein neues Design bekommen. Ich sage nur, dass es mir kein bisschen gefällt. Furchtbar!

Wie ist eure Meinung zu dem Relaunch? Top oder Flop?

Um das API bei den Entwicklern etwas zu bewerben, wurde von Google eine neue Webseite, unter der Domain www.morethanamap.com, mit zahlreichen Demos veröffentlicht. Dabei zeigen die Demos alle möglichen Funktionen, die man als Entwickler gerne gebrauchen könnte, wenn man ein neues Projekt plant, wo man Maps sinnvoll einsetzen könnte. Zum Beispiel werden alle Flüge von und nach London in einem Zeitraffer angezeigt. Weitere Demos befassen sich mit den Themen Routenberechnung, Orte, Bevölkerungsentwicklung der Welt und einiges mehr.

Auf jeden Fall eine sehr gelungene Webseite, mit wirklich interessanten Demos. Also ein Surftipp von mir.

Wie das bei NetBeans so üblich ist, wurde die neue Version neben dem aktuellen Release auf der Festplatte installiert. Das lief wie immer absolut problemlos. Der Vorteil an einer parallelen Installation ist, dass man jederzeit die frühere Version benutzen kann, falls man nicht zufrieden ist oder es zu Problemen kommt.

Nach der Installation kommt auch in der Version 7.3 die Abfrage, ob man die Einstellungen aus der früheren Version übernehmen möchte. Klar doch! Lief auch problemlos. Nur die Position der Werkzeuge wurde wie immer durcheinandergebracht. Das liegt aber wohl auch daran, dass man diese Einstellungen auch nicht exportieren kann. Schade eigentlich. Aber das kann man in wenigen Minuten wieder einstellen.

Features

HTML, CSS und JavaScript

In der Version 7.3 wurde vieles verändert. So hat ein überarbeiteter JavaScript Editor den Weg in diese Version gefunden.Die Entwickler haben es leider nicht mehr geschafft diesen vor dem Release von 7.2 fertigzustellen. Somit gibt es jetzt auch eine Autovervollständigung in jQuery. Es werden bei den Selektoren sogar die vorhandenen Elemente, IDs und Klassen angeboten.
Ich war auch sehr erfreut zu sehen, dass der Support von Twig-Templates weiter verbessert wurde. Inzwischen bietet NetBeans auch eine Autovervollständigung für die Tags an.

Ihr könnt jetzt gleich ein neues Projekt von Typ »HTML5 Application« erstellen. Und da war ich wirklich sehr überrascht! Ihr könnt nämlich gleich ein vordefiniertes Template aus dem Archive wählen oder online ein Template auswählen. Dabei stehen euch folgende Templates zur Verfügung: AngularJS Seed, Initializr: Bootstrap, Initializr: Clasic, Initializr: Responsive, HTML5 Boilerplate v4.0.0, HTML5 Boilerplate v3.0.2, Twitter Bootstrap und Mobile Boilerplate.

Anschließend habt ihr sogar die Möglichkeit eine oder mehrere JavaScript Bibliotheken auszuwählen, die gleich in das gewünschte Verzeichnis des Projekts heruntergeladen werden. Dabei stehen, geschätzt, 40 Bibliotheken zur Auswahl. Darunter CSS3Pie, History.js, jQuery, jQuery UI, Knockout, Modernizr, MooTools, Prefixfree, Socket.io, underscore.js und viele mehr. Also richtig cooles Zeug. Kein nerviges manuelles herunterladen der Bibliotheken mehr.

Außerdem sind es oft die kleinen Dinge im Leben, die einen glücklich machen. Der Editor hat schon immer die öffnende, bzw. schließende, Tags hervorgehoben. Doch was war, als das öffnende Element nicht mehr im sichtbaren Bereich war? Richtig: Nichts! Man musste scrollen und gucken, welches Tag gelb hervorgehoben ist. Auch da haben die Entwickler Abhilfe geschaffen. In der Version 7.3 wird das öffnende Tag in einem Overlay am oberen Rand eingeblendet, zusammen mit all seinen Attributen!

Zusätzlich könnt ihr, im HTML definierten, neue IDs und Klassen per Tastenkombination in die CSS-Datei übertragen. Dann braucht ihr die ID oder Klasse nur noch anzuklicken und ihr landet in der CSS-Datei bei der Definition.

Was ganz Großes ist die neue Möglichkeit JavaScript zu debuggen. Die Entwickler von NetBeans haben dazu eine Erweiterung für Google Chrome erstellt, die vieles vereinfacht:

• Beim Speichern der Datei wird der Browser automatisch aktualisiert.
• Änderungen an CSS werden sofort im Browser angezeigt.
• Und einiges mehr.

Ich muss aber zugeben, dass ich diese Funktion noch nicht testen konnte. Aber sobald ich Zeit dazu finde, werde ich davon berichten.

Auch der Support von der Template-Engine »Smarty« wurde weiter verbessert. So wurde der Parser verfeinert und warnt bei fehlenden Tags. Weiter werde ich auf das Thema nicht eingehen, da ich selber nicht mit »Smarty« arbeite und somit nicht viel testen kann.

PHP

Auch bei der Arbeit mit PHP hat sich einiges verändert. Es wurde ein Parser für Annotations gebaut, der die Namensräume berücksichtigt. Damit sollen die Probleme mit Symfony 2 und Doctrine 2 vorgebeugt werden.

Auch der Composer hat den Einzug in NetBeans 7.3 gefunden. Man muss also nicht mehr über die Konsole das Update, oder Ähnliches, ausführen. Ein simpler Rechtsklick genügt. (Auch wenn man sich darüber streiten kann, was tatsächlich schneller ist.)

Allgemeines

Die Entwickler haben jetzt die Möglichkeit kürzlich geschlossene Dateien, über ein Tastaturkürzel, zu öffnen. Ähnlich wie das bei den kürzlich geschlossenen Tabs im Firefox und Chrome ist. Nur wurde hier als Tastaturkürzel Strg + Alt + T gewählt, was bei Ubuntu die Konsole öffnet. Es lässt sich auch sehr schnell, unter Tools » Options » Keymap, ein anderes Kürzel auswählen.

Fazit

Ich arbeite in letzter Zeit sehr viel mit JavaScript und Twig und deswegen kommt für mich die Beta Version von NetBeans wie gerufen! Ich muss sagen, dass die Version, für eine Beta, sehr stabil läuft und ich sehr glücklich damit bin. Ich konnte beim eintägigen Arbeiten keine Probleme feststellen. Da kann man sich schon auf das fertige Produkt freuen.

1. Antispam Bee

Das Plugin von Sergej Müller gehört fast bei allen zum Standard. Es schützt WordPress vor Spam und das mit sehr großem Erfolg und ich dabei noch unbedenklich für die deutschen Benutzer.

2. AddQuicktag

Mit dem Plugin von Frank Bültge lassen sich im WordPress Editor weitere Buttons für die eigenen Shortcodes anlegen. Eine wirklich einfache und schnelle Sache. Das coolste Feature ist wohl, dass man die Einstellungen exportieren und somit schnell auf andere Installationen übertragen kann.

3. Feed Delay

Dieses Plugin unterdrückt die sofortige Veröffentlichung des Feeds. Ich neige leider dazu viele Fehler erst nach der Veröffentlichung zu merken und zu korrigieren. Dank Feed Delay bleiben die Fehler den Feed-Lesern erspart. Das Plugin wurde aber seit Ewigkeiten nicht mehr upgedatet, somit würde ich mich über eine Alternative sehr freuen.

4. Google Authenticator

Sicherheit geht immer vor Bequemlichkeit! Mit diesem Plugin habe ich die Zwei Faktor-Authentifizierung auch in meinen Blogs. Wie bei Google und Dropbox muss man zu dem Benutzernamen und Passwort immer noch das generierte Token angeben. Weiterer Vorteil dieses Plugins ist, dass die Funktion sich pro Benutzer aktivieren lässt. So können sich Gäste bequem ohne Token anmelden, während die Admins ohne Token nicht rein kommen.

5. Limit Login Attempts

Limit Login Attempts sperrt den Benutzer nach mehreren fehlerhaften Login-Versuchen einfach für eine bestimmte Zeit aus. Nach mehreren Sperren kann eine längere Sperrzeit definiert werden. Alle Parameter sind dabei frei einstellbar. Dadurch kann man wenigstens die vielen Bots vom „Bruteforcen“ abhalten. Das Plugin verwende ich aber nur da, wo der Google Authenticator nicht installiert ist.

6. WordPress Backup to Dropbox

Das Plugin speichert in regelmäßigen Abständen gewünschte Dateien der WordPress Installation inklusive der Datenbank in der Dropbox*. Eine, aus meiner Sicht, sehr bequeme Backup-Lösung.

7. WordPress SEO by Yoast

Dies ist ein super SEO Plugin das ich in vielen Installationen verwende. Erfüllt eigentlich alle meine Wünsche und erzeugt sogar eine XML-Sitemap, sodass weitere Plugins entfallen können.

8. WP Permalauts Extended

Das Plugin schreibt die deutschen Umlaute um, sodass die URLs korrekt erzeugt werden.

Um ehrlich zu sein, habe ich kaum andere Plugins im Einsatz.
Was habt ihr für Plugins im Einsatz und welche könntet ihr mir empfehlen?