Boehrsi.de - Blog

Heute beginne ich mit einer kleinen Reihe zur neuen Version meiner Homepage und dabei will ich mich von oben nach unten arbeiten. Ich beginne also an der Oberfläche und dem was man so direkt sieht und gehe dann immer weiter nach unten in den Code und das Backend. Heute ist das Thema die Geschwindigkeit meiner neuen Seite, denn die alte hatte diverse Fallstricke und Probleme. Diese waren mitunter so umfangreich das man tatsächlich spürbare Verlangsamung hatte und vor allem mit mobilen Geräten ist dies natürlich wirklich ein Problem. Um auf der neuen Seite solchen Problemen aus dem Weg zu gehen habe ich an diversen Schrauben gedreht und wenn man verschiedenen Analysetools glauben kann war ich erfolgreich. Dies könnt ihr im unteren Teil der News sehen, genau wie ein Überblick zu den kommenden Themen der Serie.

Die meisten Programmierer dürften das Problem kennen, man hängt mal wieder an einer Stelle und versucht über das Internet Hilfe zu bekommen. Man stößt auf Beiträge wo augenscheinlich eine Lösung bekannt ist, doch leider wird sie unverständlich erklärt. Solchen Problemen kann man mit Beispielen schnell und einfach aus dem Weg gehen, doch wo soll man diese platzieren, damit sie schnell und sicher für jedermann verfügbar sind. Die Antwort ist einfach und im Fall von SQL oder JavaScript bzw. jQuery auf SQLFiddle.com open_in_new bzw. JSFiddle.net open_in_new zu finden. Denn auf diesen Seiten könnt auswählen auf welcher Basis ihr arbeiten wollt (z.B. MySQL 5.5.32 oder jQuery 2.0.2) und schon könnt ihr allen nötigen Code hinterlegen und mit Hilfe einer fixen URL mit anderen Teilen. Dabei könnt ihr im Bezug auf SQL ein Schema erstellen, dieses dann mit Querys löchern und direkt das Resultat betrachten. Im Fall von JSFiddle könnt ihr sogar HTML, CSS und JavaScript Code hinterlegen und euch das Ergebnis direkt in einem Bereich des Fensters anzeigen lassen. Zwei sehr praktische Seite die einem die Möglichkeit geben Code oder Code-Teile mit anderen zu teilen und dies sogar in einer lauffähigen Version. Außerdem kann man auf diesen Seiten auch selber Dinge probieren, wenn man z.B. prüfen will ob eigener Code wirklich so funktioniert wie er soll.

Aufgrund der neuen Homepage Version und der vollständigen Umstellung auf UTF-8 Kodierung, mussten auch die RSS Feeds angepasst werden. Dadurch kam es zu einer erneuten Auslieferung der letzten 25 Feed-Einträge. Dafür entschuldige ich mich bei allen Abonnenten. Weitere Probleme sollten nicht auftreten. Außerdem sollte durch die Umstellung die Auslieferung zuverlässiger ablaufen und die Feeds sollten besser formatiert sein. Gerade auf letzteres habe ich bei der Umstellung stark geachtet und werde wie schon erwähnt auch noch etwas weiter am guten aussehen der Feeds feilen.

Nach einigen Wochen Programmierung und mindestens der selben Zeit um diverse Fehler rund um die Homepage zu beheben, ist die neue Seite nun online. Allerdings werde ich vermutlich noch bis Ende nächster Woche diverse kleinere Änderungen und Verbesserungen im Detail vornehmen. Also bitte nicht wundern wenn sich noch etwas ändert. Ändern wird sich auf jeden Fall die Anzahl meiner News, denn aufgrund des Umbaus schrieb ich in den letzten Tagen nichts mehr und das soll ja nicht zum Standard werden. In den nächsten Tagen werde ich sowohl auf alle Änderungen der neuen Seite, wie auch auf die Durchführung von manchen von diesen eingehen.

Es geht voran und aus diesem Grund hat die Anzahl der News in der letzten Zeit auch etwas abgenommen, denn eine Seite komplett neu zu schreiben bedarf nun einmal etwas Zeitaufwand. Denn aus meiner Idee die Seite in HTML5 neu zu erstellen wurde eine grundsätzliche Neuentwicklung von HTML, CSS, PHP und der Datenbank. Dabei setze ich nun auf neue Techniken, aktuelle Entwicklungsparadigmen und vor allem auf einen übersichtlichen und auch noch später verständlichen Code. Denn dies soll mir die spätere Weiterentwicklung vereinfachen. Der Status sieht wie folgt aus:

• HTML5 Layout neu entwickeln - Abgeschlossen
• CSS3 Anpassungen erstellen - Abgeschlossen
• Grafiken anpassen - Zu 0% abgeschlossen
• Datenbank Struktur neu erstellen (MySQL) - Abgeschlossen
• Öffentlichen Bereich neu programmieren (PHP) - Zu 80% abgeschlossen
• Private Bereiche neu programmieren (PHP) - Zu 10% abgeschlossen
• Datenbankkonvertierung auf die neue Struktur (MySQL) - Zu 0% abgeschlossen

Der Plan war es das Design meiner Homepage neu zu gestalten und mittels CSS3 zu optimieren. Dies konnte ich in einer ersten Version wesentlich schneller als gedacht umsetzen. Verbunden mit dem neuen Design war es mein Plan auch etwas an der PHP Struktur im Hintergrund zu machen. Die Änderungen werden allerdings wesentlich umfangreicher und betreffen auch die zugrunde liegende Datenbank. Denn selbige werde ich zusammen mit dem Design und dem PHP Code nun auch überholen. Man merkt einfach das ich die Seite über Jahre aufgebaut habe und mein Grundwissen bezüglich der genutzten Techniken erst mit der Zeit angestiegen ist. Somit gibt es mittlerweile diverse unnütze Felder oder gar ganze Tabellen. Im Bereich der PHP - MySQL Verbindung werde ich die kompletten Bereiche zur Nutzung der Datenbank neu schreiben und auf PHP Data Objects (PDO) open_in_new umsteigen, da die alten DB Routinen ab PHP 5.5 als veraltet gelten. Mit PDO muss ich mir eine komplett neue Syntax für die Nutzung der Datenbank aneignen und auch dies wird natürlich etwas Zeit kosten. Man sieht also aus einem schlichten Re-Design wird eine quasi komplett neue Seite. Somit dürfte der Sprung auf Version 7 die mit größten Änderungen an der Seite seit entstehen beinhalten. Ihr werdet davon wohl vorrangig das neue Design sehen und vielleicht eine Verbesserung der Geschwindigkeit bemerken aber so soll es auch sein. Sollte Interesse bestehen werde ich die geplante Tutorial-Reihe auch auf einige PHP / MySQL Dinge ausweiten.

Der erste Schritt ist getan und das wesentlich schneller als erwartet. Denn nachdem ich die Entscheidung bezüglich der Neuerstellung oder Weiternutzung des Design getroffen hatte, bin ich jetzt auf dem Stand das mein neues Design im Grundsatz steht.

Dabei habe ich die folgende Dinge getan bzw. genutzt:

• HTML5 - Die neue Seite nutzt die neuen HTML5 Tags sofern sinnvoll und soll somit übersichtlicher (im Code) werden.
  • Semantische Objekte - Die neuen Tags, welche anstatt von diversen DIV Objekten genutzt werden, setzte ich entsprechend der Spezifikation ein.
  • Korrekte Tags in Beiträgen - Anstatt von dick geschriebenen Text und ähnlichem wird an entsprechenden Stellen nun ein H Tag oder ähnliches verwendet.
  • Multimedia - Je nachdem welche Quellen eingebunden werden, kommen die neuen AUDIO und VIDEO Tags zum Einsatz.
  • Formulare - In diesem Bereich sieht die Unterstützung in den Browsern für die neuen Input Elemente noch nicht so gut aus aber ich werde sie trotzdem schon einsetzen und mit Fall Back Optionen versehen.
• CSS3 - Ich nutze die Möglichkeiten von CSS3, versuche dabei das Dokument möglichst übersichtlich zu halten und effektiv zu Gliedern.
  • Media Queries - Ein wichtiger Teil der neuen Seite um selbige für Desktop, Tablets und Smartphones gleichermaßen nutzbar zu machen (Responsive Webdesign open_in_new).
  • Gezeichnete Objekte - Durch die neuen Border Eigenschaften werden z.B. Dreiecke bzw. Pfeile nicht als Bilder sondern via CSS eingebunden
  • Schatten - Genau wie die gezeichneten Objekte werden Schatten auf der neuen Seite direkt via CSS eingebunden und nicht als Bilder.
  • Kompatibilität - Ich versuche mit keinen bzw. möglichst wenigen Hacks auszukommen und trotzdem eine große Zahl an Browsern zu erreichen. Allerdings werde ich mich davon entfernen sehr ausgefallene oder alte System zu unterstützen (z.B. IE 6 oder 7).
• Bilder - Aufgrund der umfangreichen Möglichkeiten von CSS3 werde ich versuchen bis auf das Header Bild und die Social Bilder keine Bilder für das Design zu nutzen. Die kommt mir selbst auch zu gute denn ich bin leider unfassbar unfähig in Sachen Design.

Die Eclipse Foundation hat mal wieder einen neuen Release der freien IDE Eclipse online gestellt, wie ich gestern bei Heise lesen konnte open_in_new. Die aktuelle Version hat die Nummer 4.3 und hört auf den Namen Kepler, die nächste Version wird vermutlich den Namen Luna tragen. Innerhalb von Eclipse sind 71 feste Projekte involviert. Insgesamt hat das Projekt mittlerweile ca. 58 Millionen Zeilen Code, was durchaus ein riesiger Wert ist. Die neue Version soll durch eine bessere Performance und weniger Bugs auftrumpfen können. Außerdem gibt es natürlich Unterstützung für verschiedene neue Umgebungen oder APIs, dazu gehört z.B. das Eclipse Web Tools Project 3.5 mit Java EE 7.

Ich selber habe am gestrigen Donnerstag etwas mehr als eine Stunde investiert und mein produktiv genutztes Eclipse aktualisiert. Eigentlich soll man dies ja nicht tun, sondern eine neue frische Eclipse Version herunterladen und dort alles entsprechend einrichten und importieren. Auf diese Art kann man erst einmal prüfen ob alles in der neuen Version noch ohne Problem genutzt werden kann. Ich war etwas wagemutig und habe trotz diverser Plugins ein Update durchgeführt. Meine ersten Tests zeigen keine Probleme und ich konnte ohne irgendwelche Aussetzer weiterarbeiten. Im unteren Teil der News könnt ihr einen kurzen Auszug meiner Plugins sehen, sodass ihr wisst welche Tools vermutlich auch bei euch ohne Probleme weiterhin laufen werden.

Youtube Videos werden quasi überall im Netz eingebunden und natürlich auch auf meiner Seite. Denn Reviews oder Vorstellungsvideos von Hardware oder Gaming Videos vermitteln einfach ein besseres Bild als reiner Text und Bilder. Somit ist es mir auch ziemlich wichtig das ich viele Videos ohne Probleme einbinden kann. Youtube Videos kann man an sich recht einfach einbinden, einfach den Code auf der Youtube Seite des entsprechenden Videos kopieren und alles wird erledigt. Aber dabei werden relativ viele Informationen und Daten von der Youtube Seite geladen und dies bremst bei vielen Videos manchmal sehr stark. Zumindest konnte ich einen messbaren Unterschied feststellen.

Die Lösung für dieses Problem ist weniger Daten direkt von Youtube zu beziehen und etwas mehr Arbeit “selbst” zu erledigen. Dies kann man durch externe Bibliotheken (php-youtube-easy-embed-manager open_in_new, YouTube-Lite-Embed open_in_new) lösen die man auf dem eigenen Webspace ablegt und einbindet. Ich selber wollte aber nicht wegen ein paar Youtube Videos eine extra Bibliothek einbinden, denn dies wiederum war mir etwas zu viel. Die Lösung für mich ist ein kleines selbst erstelltes JavaScript, dieses nutzt die Youtube API und bindet Videos sehr simpel und sparsam ein. Wen interessiert wie ich dies umsetze, der sollte im unteren Teil der News weiterlesen.

Eine Homepage besteht aus vielen Komponenten und damit alles wirklich gut läuft muss man auch möglichst viele dieser Komponenten beachten. Dazu eine kleine Infografik welche einen groben Überblick geben soll aber keinen Anspruch auf komplette Vollständigkeit hat.

open_in_new

Ich werde über eine Reihe von Optimierungen schreiben und heute beginne ich mit den CSS Sprites open_in_new und wie man sie, meiner Meinung nach sehr einfach nutzen kann. Im Bezug auf die obere Grafik sind CSS Sprites sowohl im Server Bereich verankert, wie auch im Coding Bereich. Dies ist dadurch begründet was CSS Sprites eigentlich sind. Denn es handelt sich hierbei um eine optimierte Art viele kleine Bilder, wie z. B. Icons oder kleinere Info-Bilder, auszuliefern die häufig auch mehrfach auf einer Seite angezeigt werden.
Es geht darum den Aufwand beim laden zu reduzieren, indem man nicht sehr viele kleine Bilder lädt, sondern ein großes mit allen Icons und über CSS die einzelnen Bereiche, welche gezeigt werden sollen, angibt. Dies reduziert die Requests welche zum laden der Seite benötigt werden und spart häufig sogar noch Traffic, außerdem werden Bildwechsel flüssiger dargestellt. Bildlich dargestellt wird der im folgenden blaue Bereich um diverse Abfragen verkleinert, während der grüne Bereich nur geringfügig mehr zu tun hat. Wie man das ganze nun umsetzen kann ohne wirklich viel Aufwand zu betreiben erläutere ich im unteren Teil der News.