Alle Artikel in: Webdev

Alternativen zu mod_gzip, mod_expires und mod_deflate auf United-Domains-Webspace

Da die Apache-Module mod_gzip, mod_expires und mod_deflate auf einem United-Domains-Webspace nicht zur Verfügung stehen, gab mir der Support folgende Alternativen: Zur Komprimierung lässt sich jede komprimierbare Datei als PHP-Script mit entsprechendem Header ausliefern. Dazu verwendet man eine PHP-Datei mit folgendem Inhalt Präfix: In der .htaccess wird mit folgendem Beispiel-Code erreicht, dass die dort genannten Dateitypen entsprechend anders ausgeliefert und vorweg komprimiert werden: Auf ähnliche Weise lassen sich Header mit Caching-Anweisungen für den Browser bestücken. Hier das vom Support genannte Beispiel, welches ich für meine Zwecke noch mit „Expires“-Anweisungen ergänzt habe: Die Lösung scheint ausreichend gut zu funktionieren und ist in jedem Fall mit weniger Aufwand verbunden als den Hoster zu wechseln.

Nativer OS-X-Client zur MySQL-Verwaltung

Wer häufiger mit MySQL-Datenbanken mokeln muss, kennt sicherlich phpMyAdmin, eine Web-GUI, die für einzelne Datenbank-Server und minderen Verwaltungsaufgaben wohl auch völlig ausreichend ist. Diese ist bei den allermeisten Hosting-Paketen mit dabei, die sich häufig aus einem Webserver mit PHP und eben MySQL als Datenbankserver zusammensetzen. Solange man sich die einzelnen Adressen als Bookmark hinterlegt und den Browser die Passwörter speichern lässt, ist diese Methode wohl auch ausreichend bequem. Als alter Browsertab-Messi jedoch, versuche ich mir jedes unnötige Fenster, jeden unnötigen Tab zu sparen und mag native Programme für diese Aufgaben sehr gern. Sequel Pro ist ein solches und dazu auch noch kostenfrei zu haben. Wie jedoch soll ich mich mit dem MySQL-Server verbinden, wenn dieser – wie in den meisten Fällen üblich – nur vom Webserver erreicht werden kann um Zugriffe von außen bzw. von Dritten zu verhindern? Kein Problem sofern man einen SSH-Zugang zu seinem Paket dazubekommen hat, wie er z.B. eine Selbstverständlichkeit – wenn nicht gar das eigentliche Produkt – von Uberspace ist. Verbindung zur Uberspace-MySQL-Datenbank mit Sequel Pro Uberspace dient mir hier direkt als Beispiel, dort liegt …

Javascript Countdown

Ich habe nach einem schönen JavaScript-Countdown gesucht und den folgenden gefunden. Mein Beispiel zeigt die verbleibende Zeit, bis Andi Operation „UBERIRC“ abgeschlossen haben muss, sonst droht ihm leider die Windows-8-Installation Neujahr 2100 ich den Phi besuche. Gefunden habe ich das schöne Stück hier: http://www.gieson.com/Library/projects/utilities/countdown/ Das abgewandelte Beispiel (Example 1) sieht bei mir so aus: Wie ihr seht, lässt sich das JavaScript-File sogar direkt in die WordPress-Mediathek laden um ohne weiteres Gemokel auch in einem WordPress-Beitrag eingesetzt zu werden.

PNGs klein zaubern

Mobile Geräte werden immer häufiger und wichtiger. Für die allermeisten ersetzen Tablets* und Smartphones längst die Computer zuhause. Vorrangig wird damit im Web gesurft und weil das nicht nur zuhause so schön funktioniert sondern auch unterwegs, werden viele Webseiten über das Mobilfunknetz* ausgeliefert. Dank LTE ist dieses mittlerweile schnell genug um auch große Websites auszuliefern, jedoch ist hier nicht die Bandbreite das Problem, sondern die -länge 🙂 Ruck zuck ist das Volumen verbraucht und dann lässt sich vielleicht noch eine Textnachricht ausreichend schnell durch das Nadelöhr schubsen. Um das zu verhindern heisst es: Nett sein zu seinen Besuchern Kleistert man seine Website voll mit aufwendig gestalteten, grafischen Elementen, so benutzt man gerne PNG-Dateien, da diese transparente Bereiche unterstützen und mit vielen Farben prächtig aussehen können. Um diese kleinzukriegen gibt es einen schönen Webservice: TinyPNG Dieser ist kein Allheilmittel, aber bekommt schnell und einfach ein paar Kilobytes von den Rippen der PNGs. Ganz wichtig zu beachten ist dabei: Die Qualität sinkt, ABER die Transparenz wird erhalten. Den obigen 702 Kilobyte Screenshot habe ich einmal durch das Webtool …

Favicon für Pixelkünstler

Webdienste machen es uns einfach mal auf die schnelle ein geeignetes Favicon für die eigene Website zu erstellen. Dazu gehört auch der X-Icon Editor. Wie zu erwarten lassen sich dort Bild-Dateien hochladen, zuschneiden und exportieren. Zusätzlich kann man jedoch für jede Auflösung – denn das Favicon fällt gleich in 4 Auflösungen in einer Datei heraus – das Pixeltool in die Hand nehmen und sein Icon aufhübschen. Natürlich lässt sich so das Icon auch gänzlich von Hand erstellen – etwas Kreativität vorausgesetzt. Bevor man sich zum Ende die Datei auswerfen lässt, gibt es noch eine hübsche Preview Option, so kann man mit einem Blick noch kleine Makel erkennen und korrigieren.

Seite lässt sich in älteren Internet Explorer Versionen nicht scrollen

Wenn man anders als zu Urzeiten üblich seine Website nicht mit einer Tabelle gestaltet, kommt es schon mal vor, dass man beim Testen mit älteren Versionen des Internet Explorers vor einem Ausschnitt seiner Seite steht. Anscheinend schneidet der Browser außerhalb des Sichtbereichs den Inhalt ab, als wäre für das beinhaltende Element overflow: hidden; gesetzt. Dem wirkt man einfach entgegen durch Überschreiben der entsprechenden Einstellung mit html, body { overflow:auto !important; } in seiner CSS-Datei. Die bessere Lösung ist natürlich den Benutzer der alten Version darauf hinzuweisen und ihm eine neue Version aufzuzwingen bzw. einen Browser-Wechsel vorzuschlagen 🙂 Aber unter Umständen ist das ja leider keine Option.

CSS: Relative Werte für Margin und Padding

Lieber Computer, ich spreche nicht von Martin und Pudding. #autocorrect Relative Werte für Margin und Padding werden immer anhand der Breite des Elternelements berechnet. Beim Dahinschreiben erscheint es jedoch logisch wenn man mit Folgendem einen von der Höhe abhängigen Rahmen festlegt: margin-top: 13%; Hilfreich ist das Ganze natürlich, wenn man einen relativ berechneten, aber gleichmäßig großen Rahmen um ein Objekt bilden möchte. Sollte man aber wünschen ein Element von der Höhe abhängig zu positionieren, kann man sich unter Umständen mit position: relative; top: 13%; weiterhelfen. Sinngemäß dienen Margin und Padding ja auch nicht der Positionierung von Elementen, aber das ist gerade zu eine Geschmacksfrage 🙂

CSS: Background-Image mit festem Abstand von rechts / unten positionieren

Mit CSS haben wir die Möglichkeit ein Background-Image zu positionieren. Wir können es bündig an den vier Seiten ausrichten oder auch zentrieren. background-position: left bottom; background-position: right top; background-position: center center; Wir können es aber auch mit absoluten oder relativen Werten von der linken oberen Ecke aus positionieren. background-position: 100px 200px; background-position: 30% 20px; Leider fehlt jedoch die Möglichkeit einen anderen Ursprung als die linke obere Ecke zu wählen, so dass wir nicht ohne weiteres ein Bild mit festem Abstand von z.B. rechts ausrichten können. Einzige Abhilfe schafft bisher nur das Hintergrundbild auf der gewünschten Seite mit Transparenz zu vergrößern. Mit Pixelmator wie mit vielen anderen Programmen auch lässt sich das schnell und einfach durch vergrößern der Arbeitsfläche erledigen. Bloß noch darauf achten, dass der Hintergrund auch wirklich transparent ist und man hat so z.B. ein Offset von 100 Pixeln geschaffen, so dass das gewünschte Hintergrundbild beim rechtsseitigen ausrichten genau 100 Pixel vom rechten Rand entfernt ist.

HTTP Header abfragen mit CURL

Ab und zu mag man gerne mal erfahren was der Server auf seine HTTP Anfrage sagt. Der Browser antwortet ja hübsch für den Menschen, aber wenn man wissen möchte was zum Beispiel die Suchmaschine findet hinter der Adresse hilft einem CURL weiter. Im Terminal einfach curl -I domain.tld schreiben und man bekommt die Antwort zu sehen mit der wohl am meisten relevanten Information des gesendeten Codes. Wenn man weitergeleitet wird mit einem Redirect und nicht zu Fuß die Schritte nachverfolgen will, kann man noch den Parameter -L anhängen. Das sieht dann so aus: curl -I -L domain.tld Wenn das sauber zum Ziel führt kann man auch davon ausgehen dass neben Maschinen auch alle gängigen Browser das verstehen, anders als komisches Weitergeleite mit anderen Methoden.