CSS3 Animationen mit SASS Mixins einfach umsetzen

Vor ein paar Wochen zum ersten Mal CSS3 Animationen eingesetzt. Dabei kamen dann wieder die obligatorischen Vendor-Prefixes ins Spiel. So etwas ist aber für einen Webentwickler wie mich nicht gerade zufriedenstellend und normalerweise nimmt einem SASS die Sache ja ab. Leider habe ich für CSS Animations keine Standard-Mixin in SASS bzw. Compass gefunden. Auch bei Github gab es keine allgemeinen Lösungen. Dort wurden meist nur für ganz spezifische Animationen Mixins angeboten.

Mixins für Animationen

Da eine Animation viele Eigenschaften kennt, habe ich mit selbst drei kleines Mixins geschrieben, die für so gut wie alle Anwendungsfälle ausreichen sollten. Man muss zwar jede Eigenschaft einzeln definieren, hat damit aber volle Freiheit bei der Gestaltung der Animation und muss nicht auf fest definierte Mixins für bestimmt Animationen zurückgreifen. Die Mixins sind wie folgt definiert:

Weiterlesen →

Mobile First Design mit SASS für alte Internet Explorer umsetzen

Wie ich euch ja schon in meinem letzten Artikel erzählt habe, setze ich seit einiger Zeit SASS bzw. Compass ein. Für das Redesign einer Website habe ich mich für den Mobile Fist Ansatz entschieden. Für diejenigen von euch, die damit nichts anfangen können: Bei Mobile First entwickelt man ein Design zuerst für kleine Bildschirmauflösungen, also z.B. Smartphones, und entwickelt dieses dann Schrittweise bis zur Desktop-Version weiter.

Das Problem dieses Ansatzes mit älteren Internet Explorern

Für die technische Umsetzung verwendet man immer CSS Media Queries. Man definiert bei Mobile First dann zuerst die Eigenschaften für mobile Endgeräte und anschließend über weitere Anweisungen in einem Media Query die Anweisungen für die größeren Auflösungen. In SASS könnte es vereinfacht wie folgt aussehen:

Weiterlesen →

SASS oder Compass-Dateien in eclipse automatisch beim Speichern kompilieren

Ich arbeite seit einigen Wochen mit Compass und bin bisher begeistert. Eine Sache die mich anfangs aber gestört hat war die Notwendigkeit die Dateien immer kompilieren zu müssen. Meine erste Idee war es, die Dateien von einem PHP-Skript direkt auf dem Server kompilieren zu lassen. Dazu habe ich dann sogar mit PHPSass einen passenden Kompiler gefunden. Aber irgendwie war ich dann von der Idee doch nicht so begeistert.

Kompilieren über einen Watch-Prozess

Wer SASS bzw. Compass kennt, der wird sich jetzt wohl fragen, wieso ich nicht einfach einen Watch-Prozess starte, der ja genau dafür da ist. Gestartet wird er innerhalb des Projekts wie folgt:

Weiterlesen →

Videos vom WP Camp 2012 endlich online

Viele von euch haben wohl schon sehnsüchtig darauf gewartet, nun sind sie endlich da: Die Videos vom WP Camp 2012 in Berlin. Die Sessions aus dem Beuth-Saal wurden während des Camps vom einem Uniprojekt live ins Netz gestreamt. Somit konnten auch viele die Session miterleben, die nicht persönlich vor Ort sein konnten.

Wer die Sessions aber auch im Live-Stream nicht verfolgen konnte oder vor Ort eine andere Sessions zur gleichen Zeit besucht hat, kann sich nun diese Sessions in aller Ruhe noch einmal ansehen.

Wir möchten dem Team der Beuth Hochschule noch einmal ganz herzlich für ihre tolle Arbeit beim Streaming und auch bei der Nachbearbeitung der Sessions danken. Aber nun wie angekündigt hier die Videos zu WP Camp:

Videos WP Camp 2012 Berlin

Eclipse an die Windows Taskbar anheften

Wie schon bei Windows 7 kann man auch bei Windows 8 Programme an der Taskbar anheften. Leider macht das Eclipse nicht von sich aus. Hat man Eclipse normal gestartet und versucht es anzuheften, bekommt man nach einem Rechtsklick auf das Icon nur folgende Optionen angeboten:

Der erste Lösungsversuch

Leider findet man hier keine Option zum anpinnen an die Taskleiste. Aber als versierter Windows Nutzer weiß man sich ja zu helfen. Man zieht sich also einfach das Icon per Drap and Drop auf die Taskleiste und schon ist es angepinnt. Leider ärgert einen Eclipse aber auch hier wieder. Denn nachdem man es dann gestartet hat erscheint ein zweites Icon. Das erste, welches man geklickt hat, ist nicht aktiv markiert und man kann es lediglich wieder entfernen:

Weiterlesen →

URL-Rewrite ohne Weitergabe des Query-Strings

Heute habe ich mal wieder ein nützliches kleines Snippet für euch. Ich stand vor kurzem vor dem Problem, dass ich bei einem Rewrite den Query-String entfernen wollte. Normalerweise ist es bei Rewrites ja so, dass ein vorhandener Query-String nur dann weitergegeben wird, wenn bei der RewriteRule das QSA-Flag gesetzt wurde.

Aber nun wollte ich einen existierenden Query-String von einem Rewrite entfernen. Dazu habe ich dann eine recht einfache Lösung gefunden. Man muss lediglich ein Fragezeichen das die Ziel-URL anhängen. Es könnte dann wie folgt aussehen:

RewriteCond %{QUERY_STRING} .+
RewriteRule ^script.php$ script.php?

Wir prüfen also zuerst, ob es einen Query-String gibt und entfernen diesen dann für das angegebene Skript durch Anhängen des Fragezeichens.

Zugegeben braucht man so etwas nur sehr selten, aber ich habe lange nach einer Möglichkeit gesucht genau das direkt per Mod-Rewrite zu lösen und nicht erst im Skript selbst. Ich hoffe es hilft auch euch weiter, wenn ihr ein ähnliches Problem habt.

Windows 8 Pro 64 bit auf einem Thinkpad R61

Vor fast genau 3 Jahren habe ich in meinem Artikel Windows 7 Professional 64 bit auf einem Thinkpad R61 – Ein Erfahrungsbericht beschrieben, wie Windows 7 in der 64 bit Version auf einem Thinkpad R61 läuft. Damals war ich sehr überrascht darüber, wie gut es funktioniert.

Jetzt ist mein Laptop also schon drei Jahre älter als damals und ich habe mich aber trotzdem getraut, ihm Windows 8 zuzumuten. Ich hatte Windows 8 vorher noch nicht getestet und somit war es auch für mich interessant zu sehen, wie gut die neue Oberfläche auf einem normalen Notebook funktioniert.

Weiterlesen →

Kickoff zum WP Camp 2012 in Berlin

Heute geht es endlich los! Ab 19 Uhr könnt ihr mich auf der Warm-Up-Party im Al Hamra treffen. Frank hat dazu auch einen Termin in Google+ angelegt. Ihr müsst euch aber nicht extra vorher anmelden. Kommt einfach vorbei, auch wenn ihr es morgen nicht zum WP Camp schafft.

Am Samstag geht es dann richtig los. Der Sessionplan steht und die Vorbereitungen sind abgeschlossen. Ich freue mich schon riesig auf das Event und kann es kaum erwarten euch alle dort zu treffen. Alleine die Tatsache, dass ich morgen wohl schon um 5:30 Uhr aufstehen muss um pünktlich zum Aufbau vor Ort zu sein passt nicht so ganz zu meinem Begriff von einem schönen Wochenende. Aber wir alle aus dem Team tun das unglaublich gerne, damit ihr alle ein unvergessliches Event erleben könnt!

Wer es bisher noch nicht getan hat sollte sich schon mal den Zeit- und Sessionplan ansehen, damit ihr euch schon heute überlegen könnt, welche Sessions ihr morgen auf jeden Fall besuchen möchtet.

Am Sonntag gibt es dann wieder im Al Hamra ab 10 Uhr unser Frühstücksbuffet, für alle, die noch nicht genug von uns haben. Auch hier würde sich das Team über eine rege Teilnahme sehr freuen. Also dann bis heute Abend bzw. morgen ab 9 Uhr!

WP-Minify mit Jetpack nutzen

Ich setze wie vermutlich die meisten von euch das Jetpack-Plugin von Automattic ein. Zusätzlich dazu habe ich vor einiger Zeit das Plugin WP-Minify installiert. Dieses Plugin bietet euch die Möglichkeit alle in HEAD eingebundenen JavaScript- und CSS-Dateien zu einer einzelnen Datei zusammenfassen zu lassen, die dann auch noch minified wird. Ihr erspart womit euren Nutzern nicht nur unnötige HTTP-Requests, sondern es sinkt auch das gesamte zu übertragende Datenvolumen für JavaScript und CSS. Solltet ihr bei euch keine Caching-Header für JavaScript und CSS gesetzt haben, so übernimmt das Plugin auch diese Aufgabe. Leider gibt es aber Probleme beim gleichzeitigen Einsatz von Jetpack und WP-Minify. Die Lösung ist aber recht einfach.

Weiterlesen →

Jetzt gleich zum WP Camp 2012 anmelden und über Design abstimmen

Wie ich euch ja bereits Ende Mai berichtet hatte, findet dieses Jahr DAS WordPress Community Event in Berlin statt, genauer gesagt am 13. Oktober in der Beuth-Hochschule und dass ich in diesem Jahr zum Organisationsteam gehöre.

Von den insgesamt 250 Plätzen sind schon über 100 weg und das nach erst ca. einem Monat. Also wartet nicht zu lange und registriert euch noch heute! Ihr könnt dann auch noch über das Design für das Camps abstimmen. Im Moment liefern sich drei Entwürfe ein Kopf-an-Kopf-Rennen. Du kannst also mit deiner Stimme noch bis zum. 6. August deinem Favoriten zum Sieg verhelfen!

Wenn du nicht nur als Besucher zum Camp kommen möchtest, sondern die anderen Teilnehmer mit deinem Wissen in einer Session bereichern möchtest, dann hinterlasse und einfach einen Kommentar in unserem Call for Papers Beitrag. Anschließend kannst du deine Session in einer kurzen Zusammenfassung vorstellen.

Wie du also sehen kannst laufen die Vorbereitungen zum Camp auf Hochtouren und auch deine Beteiligung ist wichtig, damit es ein unvergessliches Event für die gesamte WordPress Community wird.

Das gesamte Team freut sich schon auf sehr darauf, auch wenn wir noch viel Arbeit bis dahin vor uns haben.