Alle Artikel in: Webdev

JavaScript toLocaleString Format fix um gleiche Ergebnisse in jedem Browser zu bekommen

Die toLocaleString() JavaScript Funktion soll eigentlich diverse Zahlen, Daten und Variablenformate in die jeweilige Anpassung der Landes für den Client übernehmen. Dies geschieht jedoch im Browser, so dass der Browser die Hoheit darüber übernimmt, wie der formatierte String später aussehe. Negativ Beispiel An einem Beispiel soll deutlich werden wie unterschiedlich toLocaleString() in den jeweiligen Browsern ausgibt. Dazu soll eine float Zahl in eine deutsche Währungsdarstellung umformatiert werden. So sieht dann das Ergebnis in den jeweiligen Browsern aus: Browser Darstellung Firefox: 2.282,00 € Chrome: 2.282 € IE 8+: 2.282,00 € Safari: 2282 € Das ist natürlich sehr unschön, besonders wenn die übrige Website sich an einer festen Konvention der Darstellung von Preisen hält. Lösung für die unterschiedliche toLocaleString Formatierung Die Lösung für die unterschiedliche toLocaleString Formatierung liegt leider in einem externen Funktionsmodul. Ich habe für mich in accounting.js die perfekte Lösung gefunden. * jQuery vorausgesetzt Browser Darstellung Firefox: 2.282,00 EUR Chrome: 2.282,00 EUR IE 8+: 2.282,00 EUR Safari: 2.282,00 EUR

Flyout Navigation Android Touch kompatibel machen

Die meisten Flyout Navigation Menüs im Web, die per reinem CSS und mit Hilfe von Mouseover (:hover) aufgebaut sind, funktionieren nicht auf Touch-Devices (ausgenommen jüngere Apple iOS Devices). Touch Geräte haben ja kein Hover und können damit die Flyouts nicht öffnen. Ein Tap auf das Hauptelement öffnet sofort die dahinter liegende URL, statt das Flyout aufzumachen. Damit sind solche Menüs auf Touchgeräten nicht funktional. Das musste ich gestern leidvoll erkennen. Meine Navigation im Aqua Comfort Shop war bestimmt seit 3 Jahren für Android Gerät quasi nicht nutzbar. Um diesem Fehler zu begegnen, versuchen zahlreiche Anleitungen im Netz das unmögliche möglich zu machen. Ich habe bei meiner Recherche für eine Lösung viele „gefruckelten“ Overlays gesehen, die nach 0.3s eines Hovers verschwinden um den Klick auf Desktops freizugeben… usw. Kurzum, alle Anleitungen, die ich mir angesehen habe arbeiten mit Tricks die nicht HTML oder W3C konform sind. Das wollte ich nicht und habe nach einer sauberen Lösung gesucht, die meinem SEO nicht (noch weiter) schadet (als das Flyout Menü es schon eh tut). Deswegen habe ich mich …

Turbo für die Webseite – htaccess tunen, gzip injizieren und Ballast abwerfen

Mit Gzip und Deflate Compression übergewichtige Pfunde der Webseite schrumpfen sowie Müsli, ähm Cache und Expires gegen das Vergessen via htaccess optimal servieren – so gehts: Ich habe schon lange nach einer optimalen htaccess gesucht, die möglichst alle (viele) Empfehlungen von PageSpeed sauber umsetzt. Wo wenn nicht bei google wurde ich heute endlich fündig! Ich habe von der originalen htaccess Datei eine wichtige Teilmenge für mich abgezwackt, die all meinen Seiten ein paar Flügel verliehen hat! Vielleicht kann der ein oder andere damit ja auch was gescheites anfangen:

Entfernung berechnen mit Hilfe Google Maps API

Mit Hilfe der Google Maps API lässt sich die Entfernung zwischen zwei Orten sehr einfach berechnen. In diesem Beitrag möchte ich zeigen, wie man mit Hilfe der Google Maps Distance Matrix API und einem einfachen URL Aufruf oder PHP die Entfernung berechnen kann. Ich nutze diese Funktionalität ab und an bei der Planung von Touren um mal schnell zwei, drei Entfernungen zu berechnen. Das geht wesentlich schneller als über die Google Maps Web-UI und bedarf bei gemäßigter Nutzung keine Maps Lizenz. Einfach die URL mit ein paar Parametern aufrufen, und schon hat man die Entfernung zwischen Ort A und B.

jQuery Animation: Objekte dauerhaft rotieren lassen

CSS Transitions und CSS Animations sind ja schön und gut, haben aber einen entscheidenden Nachteil: Sie funktionieren nur in modernen Browsern! Wer da noch in Analytics eine nicht zu vernachlässigende Anzahl Zugriffe von Browsern hat, die CSS Transitions nicht unterstützen muss eben zusehen wie er Animationen auf eine Art umgesetzt bekommt, die auch in solchen älteren Browsern funktionieren. jQuery Rotation ist da eine Möglichkeit um Rotationen und Drehungen von HTML-Elementen umzusetzen.

CSS asynchron laden ganz ohne Blockierung des Renderings

UPDATE 11.04.2015: Es gibt eine ganz interessante Art CSS asynchron und völlig ohne jegliche Blockierung des Renderung zu laden (wichtig für Google Pagespeed)! Es basiert auf einem PHP CSS Minifier Skript, dass beliebige CSS Dateien ausließt, minifiziert, zu einem CSS kombiniert und dann in den Bereich inline einbindet. Ja genau! Inline! Das bedeutet, dass die gesamten minifizierten CSS Informationen im Quellcode on-the-fly eingetragen werden. Google Pagespeed honoriert dieses Vorgehen auf jeden Fall! So werden die CSS Dateien nicht nur asynchron geladen, nein sie werden gar nicht mehr geladen! Das Skript puffert die Minifizierung bspw. im Memcache und kann damit sehr schnell die CSS Informationen inline in den head schreiben. Diese Vorgangsweise habe ich für die mobile Darstellung bei aqua-comfort.net umgesetzt. Dort werden 6 CSS Dateien damit asynchron geladen und im head inline ausgegeben. Derzeit über eine Cache Datei, die von der HDD gelesen wird. In Zukunft werde ich die Daten dann noch in dem Memcache schreiben und von dort direkt aus dem Speicher auslesen. Derzeit arbeite ich an einer Lösung für WordPress, die alle CSS …