Was ist Google Pagespeed? Google Pagespeed ist ein Onlinetool, welches die Performance deiner Seite anhand verschiedenster Parameter messen kann. Inzwischen wird zwischen mobiler und Desktopgeschwindigkeit unterschieden. Außerdem testet Pagespeed die Seite auch auf „Usability“. Neben der besseren User Experience wirkt sich ein guter Pagespeed auch positiv auf Ranking deiner Seite in der Google Such … Weiterlesen
Terminal42 stellt mit der Erweiterung mp_forms eine Möglichkeit zur Verfügung, mit der man ein in Contao generiertes Formular auf mehre Seiten (= Schritte) aufteilen kann. Leider ist die Erweiterung nicht sonderlich ausführlich dokumentiert, daher dachte ich, dass hier hier einmal kurz auf die Nutzung eingehe. Installation und generelle Einrichtung Nach der Installation erhält man verschiedene neu … Weiterlesen
Lange Zeit führte zur Feature-Detection von Browsern quasi kein Weg an JavaScript-Libraries, wie zum Beispiel dem bekannten Modernizr vorbei. Doch mit der @supports -Regel, die ein Teil der "CSS3 Conditional Rules" darstellt, zu der beispielsweise auch die bekannten @media -Queries zählen, ist es möglich über reines CSS den Feature-Umfang eines Browsers abzufragen. In einigen Fällen kann man hier … Weiterlesen
Mit Hilfe des Kirby Gallery Plugins von Tim Oetting möchte ich euch zeigen, wie man eine Galerie als Masonry-Grid ausgeben lassen kann. Wem Masonry jetzt nichts sagt, kann sich auf der Masonry Seite die Beispiele anschauen. Im Wesentlichen handelt es sich um eine Javascript Library, die automatisch ein optimal aufgeteiltes Grid erzeugt. Masonry Library Das Kirby Gallery Plugin stellt nur die … Weiterlesen
Eine viel benutzte Methode, um DOM-Elemente mit undefinierter Breite (z.B. Überschriften) und Höhe zu zentrieren, ist die Verschiebung über den "translate"-Hack: .zentriert { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } Man verschiebt damit quasi den Ursprung der Positionierung von der linken, oberen Ecke auf den Mittelpunkt des Elements. Dabei kann es passieren, da … Weiterlesen
Mit der clip-path CSS-Property ist es möglich komplexe Formen als Maske zu generieren, die dann nur einen definierten Teil des Elements anzeigen. Von der Funktion her also vergleichbar mit z.B. Schnittmasken im Adobe Illustrator. Die Maske kann über einen Pfad oder eine externe SVG-Grafik definiert werden. Anwendung Ich hatte zum Beispiel einen Fall, bei dem ein Bild in einem Oktagon dargestellt w … Weiterlesen
Ich bin vor Kurzem auf diesen Artikel popup: yes von labnol.org gestoßen, der eine leichtgewichtigere und performantere Lösung beschreibt, um Youtube-Videos zum embedden. Laut labnol werden beim klassischen Embedding fast 500 kb an JavaScript Daten mit mehreren HTTP-Requests geladen, egal ob man sich das Video wirklich anschaut oder nicht. Diesen Prozess kann man umgehen, indem man automatisiert n … Weiterlesen
In letzter Zeit hatte ich öfters das Problem, dass SD-Karten, die ich über den Kartenleser des MacBooks beschreiben wollte, als schreibgeschützt, beziehungsweise als "nur lesbar" im Finder angezeigt wurden. Ein Problem, was man unter Umständen für längere Zeit gar nicht bemerkt, wenn man beispielsweise die SD-Karte nur im MacBook nutzt, wenn man Fotos von einer Digitalkamera lädt, aber dabei keine … Weiterlesen
Wenn man in Shopware 5 ein eigenes Theme auf Basis des Shopware-eigenen Responsive Themes erstellt, empfiehlt es sich, die eigenen Änderungen am Style mit Hilfe einer neuen CSS-Datei einzubinden. Die Shopware Dokumentation schlägt hier zum Beispiel vor, dass man die CSS-Datei über die Theme.php Datei einbindet. Das Problem hierbei ist, dass man das Theme nach jeder Änderung an der CSS-Datei über das … Weiterlesen
Definition und Nutzung Mit dem CSS :not()-Selektor lassen sich gezielt Elemente von einer CSS-Regel ausschließen. Die Syntax ist sehr einfach: :not(.class) { property: value; } So kann man beispielsweise Elemente, die eine spezielle Klasse haben, von einer Anweisung ausschließen: <article> <p>Lorem Ipsum</p> <p class="different">Lorem Ipsum</p> <p>Lorem I … Weiterlesen
Für CSS background-images gibt es schon lange die beliebte und weit verbreitete Möglichkeit, das Hintergrundbild eines Elementes so zu beschneiden und skalieren, dass es seine ursprüngliche Proportionen behält und nicht verzerrt wird. Gleiches war lange nicht ohne weiteres für Bilder möglich, die direkt über den <img> -Tag eingebunden werden. Wenn man hier eine feste Höhe und Breite angibt, die nic … Weiterlesen
Wenn ihr Kirby auf Uberspace benutzt und die gzip-Komprimierung nutzen wollt, reicht das oft angebene und dokumentierte hinzufügen des mod_deflate in der .htaccess nicht aus. Diese Methode funktioniert nur bei statischen Inhalten, nicht bei PHP-Skripten, wie es bei Kirby der Fall ist. Dazu gibt es im Uberspace Wiki auch eine entsprechende Anmerkung. Statt der .htaccess muss man auf Uberspace … Weiterlesen