localhost via virtualbox - auch mit Domainauflösung

geschrieben von carsten

Bei der Webentwicklung kommt es immer wieder auf gründliches und möglichst allumfassendes Testen an.

Was sieht meine Webseite in einem älteren Browser aus, funktioniert mein JavaScript Code auch in einem anderen Betriebssystem, etc? Wer dabei lokal entwickelt, muss auf Dienste wie browsershots u.ä. leider verzichten und kommt deshalb um virtuelle Maschinen (VM) aller Art nicht drumrum.

Die Virtualbox ist da schon recht komfortabel und über ein GUI zu administrieren, was ich sehr bevorzuge. In wenigen Minuten ist ein neues System installiert, mit einem Netzwerkadapter ausgestattet und im www unterwegs.

Damit bin ich also genauso weit wie mit o.g. Browsershots. Ich kann Webseiten testen, die sich bereits auf einem Liveserver befinden. Leider ist das nur die halbe Miete.

Gebe ich aber nun z.B. http://localhost/pixelfans/ im Browser meiner virtuellen Maschine ein, bekomme ich eine Fehlermeldung, weil mein virtueller Freund innerhalb seiner eigenen Grenzen nach dem Verzeichnis /pixelfans sucht und das logischerweise dort nicht existiert. Die VM sollte also auf meinem echten - physischen - Rechner nach dem Verzeichniss suchen, das weiß sie nur leider noch nicht.

Ein kurzer Blick in die aktuelle virtuelle Konfiguration verrät mir, dass mein Gateway - also der echte Rechner - die IP 10.0.2.2 besitzt. Folglich führt mich der Aufruf http://10.0.2.2/pixelfans/ zum Ziel und meine lokale Webseite wird angezeigt. Soweit so gut.

Um beim Entwicklen und Testen nah am Livesystem zu sein, bietet sich häufig an, auch unter xampp bzw. wampp vermeintliche Domainnamen oder sogar Subdomains zu etablieren. In meinem Fall bekomme ich nun zwar mein Verzeichniss /pixelfans mit allen Inhalten ausgeliefert, es sieht aber total zerhackt aus weil jegliche referenzierten Daten, wie Stylesheets, Scripte und Bilder fehlen. Die sucht mein virtueller Browser nämlich unter http://pixelfans.dev/... und findet nix, weil er noch nicht weiß, wohin er diese Anfrage routen soll.

Helfen wir ihm, indem wir in der hosts-Datei der virtuellen Maschine einige Zeilen ergänzen, die wir aus der eigenen hosts-Datei der physischen Maschine fast vollständig kopieren können.

In der physischen hosts-datei steht also

127.0.0.1 pixelfans.dev
127.0.0.1 http://www.pixelfans.dev
127.0.0.1 labs.pixelfans.dev

und in die virtuelle hosts-Datei tragen wir also Folgendes ein:

10.0.2.2 pixelfans.dev
10.0.2.2 http://www.pixelfans.dev
10.0.2.2 labs.pixelfans.dev

Speichern, Browser aktualisieren, Bingo fertig!

Im Übrigen weiß wikipedia sehr gut, wo sich die hosts-Datei auf unterschiedlichsten Systemen befindet.

Nach einer kurzen Recherchen dazu, habe ich erfahren, dass die IP 10.0.2.2 der Standard ist. Man kann sich also den Blick in die Konfiguration sparen und sie analog verwenden. Unter Umständen muss in der VM noch das Virtualbox-Paket "Guest Additions" nachinstalliert werden, das macht virtualbox aber auf Wunsch von alleine und man hat damit keine Nervereien

Kategorie: News | Trackbacks (0) | Permalink

You could see happy faces

geschrieben von carsten

, if you had thought about your wordpress plugins.

Nein jetzt mal ehrlich. Man kann tolle Sachen mit wordpress Plugins machen, aber nur solange man dabei sein Ziel nicht aus den Augen verliert.

You could see clickable smiley faces here if you had JavaScript activated

Kategorie: News | Trackbacks (0) | Permalink

Dem Link auf der Spur

geschrieben von carsten

Vor kurzem habe ich in meiner Webentwicklerwerkzeugtasche etwas entdeckt, dass mir bisher nie aufgefallen war. Einen kleinen unscheinbaren Link, eingebettet in eine ganze Liste, gleich aussehnder, kleiner, unscheinbarer Links, der auf den title All Smush.it™ hörte. Ich hatte mir vorgestellt, wie der Link mit Namen Smush.it die geöffnete Webseite, wie in einem Comic zersmushen, und zerboooomen würde. Die eckigen Klammern würden nur so durch die Gegend fliegen und überall läge bruchstückhafter Code, hier und da mal ein Rest zuckendes und flackerndes Javascript. Nach diesem Klick hätte man nirgends mehr ein penibel validiertes 3-Spalten Layout mit flüssigen Containern gefunden, nichts mehr, alles wäre gesmusht. Auf den ersten Klick offenbarrte sich mir jedoch noch nicht die wahre Größe, denn vielmehr ein neues reinweißes Fenster, welches seelenruhig auf die Eingabe einer Adresse wartete. Ich war enttäuscht. Das war gestern Abend.

Heute habe ich es dann noch einmal gewagt, anderer Ort, anderer Rechner, anderes Betriebssystem, anderer Browser. Ich navigierte durch meine Werkzeugtasche bis zu der Stelle, wo ich gestern Abend diesem heimtückischen kleinen Link begegnet war. Heute, ein neuer Tag, eine neue Hoffnung auf das große Smushen und keine Zeit zu verlieren. Ich klicke.

Wow, ich werde beeindruckt!
Vor mir entblättert sich eine Liste, wunderschöner kleiner Grafiken, Icons und Hintergrundbildern. Alphabetisch sortiert und um bis zu 83% gesmusht. Sagenhaft. Leider habe ich von all’ dem nichts mitbekommen, es war still, sofort nach meinem Klick entblätterte sich die Liste und ich habe nicht eine einzige eckige Klammer fliegen sehen.
Nichts für ungut. Nachdem sich jede Zeile dieser Liste mit dem Grad der Smushung in Prozent - scheinbar selbstständig - vervollständigt hatte, eröffnete sich mir eines Element.
Über der Liste bot sich mir hellgelb schimmernd, ein ehrwürdig anmutender Button zum Download all’ dieser, geboomt, gebangt und gesmushten Grafiken und Icons.

Das coole daran. Der ganze Spaß gehört zu YSlow, einer Firefoxentension, die mir auf diese Weise anbietet, alle Grafiken, etc. einer Webseite mit einmal zu reduzieren, zu komprimieren und zu guter Letzt zu smushen.
Das Ergebnis kann sich sehen lassen, selbst radikal klein gehaltene .pngs oder .gifs schrumpft dieses Werkzeug wie von Geisterhand auf einen unterschiedlich kleineren Wert. In Ausnahmefällen waren auch mal ein paar “No savings” Bemerkungen dabei, aber es war die Minderzahl. Über den Download bekomme ich nun alle meine Dateien in Ihrem Original Verzeichnisbaum zurück. Das ist ein cooler Spaß, weil ich auf diese Weise mit einem Schlag über 50kB Ladelast verloren habe. Verückt, dass ich das noch nie entdeckt habe, obwohl ich mit YSlow schon so lange arbeite.

Wer’s fachlicher mag, gebe in die Suchmaschine seiner Wahl “smush.it” ein und erfreue sich an der Fülle von Informationen.
Hinterher ist man immer klüger.

Kategorie: News | Trackbacks (0) | Permalink