16. Mai 2023

HTML-„Accordion“ ohne JavaScript

Dass Accordions ein beliebtes UI-Element im Webdesign sind, hatte ich hier schon mal geschrieben. Tatsächlich kann man Accordions auch ohne HTML und im Prinzip sogar ohne CSS erstellen. Hierfür gibt es das wenig bekannte HTML5-Element „details“: Ganz ohne CSS sieht das Element so aus: Lorem ipsum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam […]

• HTML

30. April 2023

Automatischer Reload von WebApps

WebApps können in vielen Fällen ein praktisches Tool sein. Insbesondere seitdem ist seit iOS 16.4 auch möglich ist Push-Nachrichten mit Web-Apps zu verschicken. Ein Praxis-Fall könnte z.B. sein: Du erhältst eine Push-Nachricht, die dich über eine Statusänderung informiert. Daraufhin öffnest du die WebApp. Das Problem: Du siehst einen alten Status, da die WebApp noch im […]

• jQuery

21. April 2023

So kann man den letzten Teil einer URL als Variablenwert / GET-Parameter in PHP nutzen

Mit folgendem htaccess-Snippet lassen sich „schöne“ URLs für Übergabe von Variablen nutzen. So kann z.B. mit dem Aufruf der URL „www.beipspiel.de/user/maxmuster“ der Variablenwert „maxmuster“ in PHP weiter genutzt werden.

• htaccess
• PHP

2. April 2023

Wie man Inhalte anderer Websites mit „Simple HTML DOM“ auslesen kann

„Simple HTML DOM“ ist ein sehr praktisches Tool um Inhalte, z.B. Job-Angebote, Immobilienangebote oder ähnliche Daten von Websites auszulesen und auf der eigenen Website weiter zu verarbeiten. So lässt sich z.B. eine Job-Börse oder Immobilienportal realisieren auf denen die Angebote mehrerer Firmen und Anbieter automatisch gelistet werden können. Um zu starten musst du die PHP-Library […]

• PHP

1. April 2023

Mehrspaltiges Layout mit gleichgroßen divs mit CSS Grid

Mit folgendem Code lässt sich mit CSS Grid ein mehr-spaltiges Layout mit divs in gleicher Höhe ohne jQuery oder JavaScript umsetzten. Box 1 Lorem ipsum, dolor sit. Box 2 Button Box 3 Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, placeat inventore. Lorem ipsum dolor sit amet. Button Box 4 Lorem ipsum dolor sit […]

• CSS
• HTML

31. März 2023

CSS-Variablen

In Programmiersprachen sind Variablen gang und gäbe. Auch in Sass gibt es Variablen. Und tatsächlich gibt es auch in CSS die Möglichkeit Variablen einzusetzen. Genau genommen heißen sie dort „custom properties“ – die dazugehörigen Funktion lautet aber „var()“… Und so funktionieren Variablen in CSS: Am sinnvollsten ist es CSS-Variablen am Anfang des Stylesheets zu definieren […]

• CSS

31. März 2023

Nur bestimmte Wörter trennen

Die CSS-Silbentrennung (hyphens: auto) ist gleichzeitig Fluch & Segen. Einerseits ist es praktisch und vermeidet, gerade bei schmalen Textspalten, größere Lücken im Text, andererseits entstehen oft sehr merkwürdige Trennungen. Inzwischen deaktiviere ich auf vielen Websites schon wieder die automatische Silbentrennung, da viele Kunden die Trennungen als störend empfinden. In manchen Situationen, besonders bei großen Headlines […]

• CSS
• HTML
• JavaScript

29. März 2023

Wiederverwendbare Blöcke in WordPress effektiv nutzen

Wiederverwendbare Blöcke sind ein hilfreiches Tool, das gleich auf 2 Arten sinnvoll genutzt werden kann. Zum einen können wiederverwendbare Blöcke direkt im Gutenberg-Editor genutzt werden. Z.B. wenn man einen bestimmten Bereich häufiger auf der Website darstellen will. So ein Block kann einfach erstellt werden, indem man den Inhalt im Gutenberg-Editor erstellt, einen oder mehrere Blöcke […]

• PHP
• WordPress

28. März 2023

Einfache Zeitsteuerung mit JavaScript oder PHP

Mit folgenden Codes kann man ein div oder andere Elemente einfach zeitgesteuert einblenden: Oder das Ganze in PHP:

• JavaScript
• PHP

25. März 2023

Contact Form 7 Kontaktformular-Template

Contact Form 7 ist im Prinzip DAS Kontaktformular-Plug-in für WordPress. Hier ist ein Code für ein beispielhaftes Formular mit häufig genutzten Feldern und Bootstrap-Spalten sowie die dazugehörige E-Mail-Vorlage zum copy&pasten. Das Ergebnis:

• HTML
• WordPress