Kategorien
Contao Frontend: HTML5, CSS3, jQuery

JavaScripts/jQuery in Contao besser zusammenfassen

Wenn man wie im Artikel von Rocksolid unter Schritt 4 beschrieben, die JavaScript-/jQuery-Dateien in Contao zusammenfassen möchte, müssen erstmal die Dateipfade herausgefunden (die in Contao 3.5 kein einheitliches Muster haben*). Nachfolgend die kompletten Blöcke für deren Templates unter Berücksichtigung der Standard-Templates:

Mediaelement (j_mediaelement.html5)

<?php
  $GLOBALS['TL_JAVASCRIPT'][] = 'assets/jquery/mediaelement/'.MEDIAELEMENT.'/js/mediaelement-and-player.min.js|static';
?>

Colorbox (j_colorbox.html5)

<?php
  $GLOBALS['TL_JAVASCRIPT'][] = 'assets/jquery/colorbox/'.COLORBOX.'/js/colorbox.min.js|static';
?>

Accordion (j_accordion.html5)

<?php
  $GLOBALS['TL_JAVASCRIPT'][] = 'assets/jquery/ui/'.JQUERY_UI.'/jquery-ui.min.js|static';
?>

Slider (j_slider.html5)

<?php
  $GLOBALS['TL_JAVASCRIPT'][] = 'assets/swipe/'.SWIPE.'/js/swipe.min.js|static';
?>

Table Sorter (j_tablesort.html5)

<?php
  $GLOBALS['TL_JAVASCRIPT'][] = 'assets/jquery/tablesorter/'.TABLESORTER.'/js/tablesorter.js|static';
?>

Die Konstanten wie JQUERY_UI oder SWIPE sind unter system/config/constants.php definiert und geben die Versionsnummer der Scripts zurück.

* sei es wegen verschiedenen Vendors oder anderer Dateistruktur

Kategorien
Browser Frontend: HTML5, CSS3, jQuery

iOS 9/Safari: was tun, wenn die responsive Website nicht mehr über die komplette Breite geht?

Unter iOS 9 kann es dazu kommen, dass responsive Seiten in der Breite schrumpfen, wenn ein Element breiter als der Viewport ist. Mögliche Lösung: die Viewport-Angabe um shrink-to-fit=no ergänzen, so wird dann <meta name="viewport" content="initial-scale=1, width=device-width, shrink-to-fit=no"> daraus.

Oft gibt es auch den Tipp, maximum-scale auf 1 oder user-scalable auf no zu setzen, aber das lasst ihr mal lieber, da man sonst nicht mehr zoomen kann.

(Erinnert sich noch jemand an viewport=minimal-ui? Hahaha …)

Kategorien
Frontend: HTML5, CSS3, jQuery Webentwicklung

Fwd: how to h2 in apache (HTTP/2 for Apache httpd)

Support for HTTP/2 is finally being released with Apache httpd 2.4.17! This pages gives advice on how to build/deploy/configure it. The plan is to update this as people find out new things (read: bugs) or give recommendations on what works best for them.

Stefan Eissing hat einen Überblick über HTTP/2, welches mit der Version 2.4.17 in Apache verfügbar ist, angelegt: wie es geht, was geht und was nicht geht.

Quelle: how to h2 in apache

Kategorien
Frontend: HTML5, CSS3, jQuery

Google Search Console (ehemals Webmaster Tools) sagt falsche Verwendung von rel=alternative / hreflang an – ein Beispiel und erster Einblick

Google Search Console (ehemals Webmaster Tools, siehe Google-Webmaster-Blog) schickte mir eine Mail, dass die link rel="alternate" / hreflang-Implementierung auf michelbalzer.de falsch wäre. Also ging ich der Sache auf den Grund um den Fehler zu finden und zu sehen, wie das überhaupt in der Search Console aussieht.

Was hreflang überhaupt ist und kann, erkläre ich auf der Seite hreflang für sprach- und regionsbezogene Webseiten.

Zunächst einmal die Nachricht in Google Search Console:

Kategorien
Frontend: HTML5, CSS3, jQuery

Fwd: Another 20 Docs and Guides for Front-End Developers

Louis Lazaris hat eine Liste über Frontend-Tools, Info-Seiten und Anleitungen zusammengestellt. Sehr interessant finde ich Mastering the :nth-child (was man hier nicht alles kombinieren kann) und den Code Fight Club.

Aber auch einige Flexbox-Hilfestellungen gibt es (Flexbox adventures, flexbugs), ein Thema mit dem ich mich auch mal umgehender mit beschäftigen möchte.

Another 20 Docs and Guides for Front-End Developers

Kategorien
Frontend: HTML5, CSS3, jQuery Typographie Webdesign/Gestaltung

Silbentrennung im Browser mit CSS hyphens

„Die Texte hätten wir gerne in Blocksatz.“ Spätestens hier gilt es zu überprüfen wie es um die Silbentrennung im Browser steht: geht, aber nicht ohne Präfixe und lang-Attribut, und erst recht nicht überall.

Kategorien
Frontend: HTML5, CSS3, jQuery Webdesign/Gestaltung

HTML5 Boilerplate 5.0

Das allseits bekannte HTML5 Boilerplate trägt nun Versionsnummer 5.0. Die IE6- und IE7-Unterstützung – und damit auch der furchtbare Conditional-Comment-HTML-Head – sind raus, normalize.css wird in der 3.0.2-er Version eingebunden, jQuery 1.11.12 ist drin, .ir ist weg (Image Replacement), eine .editorconfig liegt bei und die weiteren Änderungen stehen im Changelog. Die letzte Version des Boilerplate stammt übrigens aus September 2013.

(Faszinierend finde ich die Diskussion ob doctype oder DOCTYPE.)

Kategorien
Browser

Google Chrome auf Android-4.3+-Geräten: Versionsunterschiede innerhalb einer Version

Peter-Paul Koch ist aufgefallen, dass es inzwischen verschiedene Chrome-Versionen der gleichen Chrome-Version auf Android-Geräten unterschiedlicher Hersteller gibt. Es sind keine großen Unterschiede, aber sie fallen auf. Als Beispiele nennt er die Unterstützung von <input type="datetime"> und unterschiedliches Zoomverhalten.