Um auf einer Übersichtsseite weitere Beiträge zu erreichen, ist die Verwendung eines »Load More«-Buttons eine beliebte Methode. Hierbei werden via JavaScript (AJAX) weitere Beiträge unter den zuvor angezeigten Beiträgen geladen, ohne dass die gesamte Unterseite neu geladen werden muss. Wenn JavaScript deaktiviert ist oder nicht geladen werden kann, ist es sinnvoll, als Fallback die klassische Pagination zu verwenden.
Touch und Scroll Event Listeners sind u.a. nützlich, um Interaktionen zu verfolgen und um individuelle Bildläufe im Browser zu erstellen. Leider können sie stark die Performance einer Website beeinträchtigen. Passive Event Listeners lösen dieses Problem.
Sketch ist als UX/UI-Design-Tool u.a. auch deshalb so populär, da Sketch-Dokumente sich leicht im Frontend weiterverarbeiten lassen. Eine dieser Möglichkeiten ist das Auslesen von JSON aus Sketch. Im Kern ist jede Sketch-Datei ein gezippter Ordner mit enthaltenen JSON-Dateien. Im Umkehrschluss können aus Code auch neue Sketch-Dokumente erzeugt werden, wie Airbnb mit react-sketchapp beeindruckend vorgemacht hat.
Seit WordPress 5.0 ist der Gutenberg-Editor fester Bestandteil des WordPress-Cores und liefert eine Vielzahl an Blöcken, mit denen ihr Inhalte darstellen bzw. strukturieren könnt. Häufig bieten einzelne Blöcke jedoch ungewünschte redaktionelle Freiheiten, weshalb sie deaktiviert werden sollen. Mit Hilfe einer sog. Whitelist könnt ihr nur bestimmte Gutenberg-Blöcke zulassen und mit einer Blacklist gezielt Blöcke entfernen.
Die Formularelemente von HTML5 bieten zahlreichen Möglichkeiten um komplexe Funktionalitäten mit verhältnismäßig einfachen Mitteln herzustellen. Mit Hilfe des nativen HTML Color Pickers kann beispielsweise ein Farbton ausgewählt werden, der dann wiederum dazu benutzt werden kann in Echtzeit Bereiche umzufärben. Dazu muss der gewählte Farbwert per JavaScript ausgelesen und an eine CSS Variable übergeben werden.
In WordPress ist es mit Hilfe der wp_localize_script-Funktion möglich, PHP-Variablen an JavaScript zu übergeben. Diese Funktion ist besonders hilfreich, wenn man in einer mehrsprachige Website mit Übersetzungs-Strings arbeitet oder wenn Inhalte über AJAX nachgeladen werden sollen. In diesem Beitrag zeigen wir euch, wie ihr PHP-Variablen in WordPress richtig an JavaScript übergebt. Beitrag zu Ende lesen
Mit dem <dialog>-Element von HTML steht eine native Methode zur Verfügung um ein Dialogfenster bzw. einen Modal Screen zu erzeugen. Im Gegensatz zu selbstgebauten Lösungen wie einer Lightbox, ist die semantische Qualität der von <dialog> deutlich besser. In Kombination mit JavaScript kann das Fenster geöffnet oder geschlossen werden. In diesem Beitrag geben wir euch eine kurze Übersicht über die Eigenschaften des Elements.
Moderne Web- bzw. Frontend-Entwicklung entwickelt sich rasend schnell weiter und umfasst zahlreiche Technologien und Tools. Es ist schwer den Überblick …
Beitrag zu Ende lesenScrolling zählt zu den elementaren Bedienkonzepten im Web. Dennoch gibt es viele Probleme bei der Implementierung der gewünschten Scrolling-Funktion sowie beim …
Beitrag zu Ende lesenDie Front-End Tooling Umfrage hat ein ziemlich geradliniges Ziel – herauszufinden welche Werkzeuge von Frontend-Entwickler derzeit in unserer Branche eingesetzt werden. …
Beitrag zu Ende lesenLaut dem Analyse-Tool PageSpeed Insights von Google sollen JavaScript- und CSS-Ressourcen, die das Rendering blockieren, nicht in Inhalten »above the …
Beitrag zu Ende lesenSpeckyboy hat vergangene Woche einen interessanten Artikel zum Thema JavaScript und CSS veröffentlicht den Ihr Euch unbedingt anschauen solltet wenn …
Beitrag zu Ende lesenVor einiger Zeit habe ich in einem kleinen Tutorial erklärt wie man mehrere Standorte in einer Google Karte anzeigen lässt. …
Beitrag zu Ende lesen