Schnelle HTML und CSS Entwicklung mit Emmet

Emmet Logo

Wenn man weniger tippt, hat man mehr Zeit für das Wesentliche. Das Motto versuche ich meinen Azubis beizubringen. Lieber etwas mehr Zeit investieren und sich über die Problemstellung Gedanken machen, anstatt jedes Zeichen im Editor selbst zu tippen. (Leider scheint es immer noch Alltag bei vielen zu sein.) Und genau hier kommt Emmet ins Spiel.

Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow (Quelle: www.emmet.io)

Entwicklertools unter Windows installieren

In meinen aktuellen Projekten werden eine Menge Tools bei der Entwicklung eingesetzt. Dazu gehören: Sass, Compass, Grunt, Bower, Composer, Git, Node.js und Capistrano. All diese Tools lassen sich in wenigen Minuten auf meinem Linux-System installieren und einfach bedienen. Doch immer wieder kommt die Frage, wie man das Ganze unter Windows zum Laufen bekommt. Also habe ich mir eine frische Windows-VM eingerichtet, probiert und dokumentiert.

 

Page Visibility API – HTML5 APIs

Wir kennen alle das Problem mit den Tabs: Man hat immer gefühlte 50 offen. Bei den 49 davon laufen Aktionen ab, die man als Besucher in dem Moment gar nicht mitbekommt. Damit meine ich automatisierte Slider, AJAX-Abfragen und andere coole Dinge. Das Problem dabei ist, dass diese unnötige Last erzeugen (client- aber auch serverseitig), auch wenn der Benutzer es nicht sieht. Und hier kann das Page Visibility API von HTML5 helfen. Mit dem Page Visibility API kann man auslesen, ob die Seite im Moment sichtbar ist.

Battery Status API – HTML5 APIs

Dank HTML5 haben die Entwickler immer mehr Zugriff auf die Sensoren der Geräte. Aktuell arbeite ich an einem kleinen Projekt, dass primär auf mobilen Geräten laufen wird. Dabei ist es mir wichtig, dass die Anwendung performant ist und das Gerät nicht so stark belastet. Konkret möchte ich auf die Animationen verzichten und den Benutzer warnen, wenn der Akkustand gering wird. An dieser Stelle kommt das Battery Status API zum Einsatz. Damit kann man problemlos den Zustand des Akkus bestimmen.

 

Feld Widget mit einem Hook ändern – Drupal 7

hook_field_widget_form_alter

Heute musste ich ein Drupal Formular so erweitern, dass ein Feld, in Abhängigkeit von seinem Wert, das Widget ändert. Konkret war es so, dass das Feld nicht angezeigt werden sollte, wenn es schon einen Wert hat. Die einfachste Lösung wäre es also das Widget auf „hidden“ zu setzen. Dafür wurde zusätzlich das Modul Hidden Field Widgets verwendet.

Zusatzfelder beim Benutzer individuell validieren – Drupal 7

Registrierungsformular in Drupal 7

In Drupal 7 kann man dem Benutzerprofil beliebige weitere Felder hinzufügen. Unter People » Account settings » Manage fields stehen einen eine reihe von Feldtypen und Widgets zur Auswahl. Diese kann man auch bequem von Drupal validieren lassen. Mithilfe weiterer Module, wie zum Beispiel Field validation, sind auch komplexe Validatoren möglich. Doch was tun, wenn der Wert anhand einer externen Schnittstelle geprüft werden soll? Anhand dieses Beispiels zeige ich heute, wie man sich in das Registrierformular einhängt und zusätzliche Validatoren bereitstellt.

 

Artefakte, schwarze Linien, im Safari auf dem iPad

Bei einem Projekt hatte ich ein ungewöhnliches Phänomen: Auf dem Display wurden, horizontale 1 Pixel breite, Linien angezeigt. Diese ließen sich nicht mit Firebug oder anderen Entwickler-Werkzeugen ausfindig machen. Doch nicht nur das: Die Linien blieben dann dauerhaft auf dem Display, auch wenn man eine andere Website aufruft. Nur der Klick auf „Cookies und Daten löschen, in den Einstellungen von Safari sorgte für das Verschwinden der Linien. Dazu muss man sagen, dass das HTML Gerüst nicht besonders einfach gestrickt war. Es war ein Slider mit vielen Video Elemente und Flowplayer Integration.

Alle Checkboxen selektieren

Screenshot vom Code

In diesem kurzen Tutorial möchte ich euch zeigen, wie man ein kleines Script schreibt, dass alle Checkboxen aus- oder abwählt. Diese Funktion wird bei praktisch jeder Anwendung gebraucht. Und leider viel zu oft immer neu geschrieben. Aus diesem Grund habe ich das Script in Form eines jQuery Plugins geschrieben und auf GitHub.com veröffentlicht. Wer also auf der Suche nach solch einem Plugin ist, der kann sich gerne bedienen.

 

Einfachen PHP Event-Kalender erstellen

Einfacher Kalender mit PHP in 100 Zeilen

Im Juni 2009 habe ich ein Tutorial geschrieben, wie man einen einfachen Kalender mit PHP erstellt. Dieses Tutorial ist immer noch sehr beliebt und gehört zu den erfolgreichsten in diesem Blog. Jedoch bekomme ich immer wieder E-Mail und Kommentare mit der Frage, wie man Events in diesem Kalender anzeigen könnte. Darauf möchte ich heute kurz eingehen.

Bower: Paketmanager von Twitter

Bower-Logo
Bower: Paketmanager von Twitter (Quelle: twitter.github.com/bower/

Bower ist ein Paketmanager aus dem Hause Twitter. Das Tool erlaubt es uns Fremdbibliotheken, wie Lightboxen, Twitter Bootstap, bequem zu installieren und diese später zu aktualisieren. Ebenso kann Bower Abhängigkeiten auflösen und die nötigten Pakete installieren.