Picture – Tag und CSS-Anweisungen

Interessant ist der Umgang von Browsern mit CSS-Anweisungen, die sich auf das Picture – Tag beziehen:

<picture>
	<source media="(min-width: 1025px)" style="display: none !important;" srcset="//someimage.net/somefile_big.jpg">
	<source media="(min-width: 726px) and (max-width: 1024px)">
	<source media="(min-width: 481px) and (max-width: 725px)" srcset="//someimage.net/somefile_medium.jpg">
	<source media="(max-width: 480px)" srcset="//someimage.net/somefile_small.jpg">
	<img src="//someimage.net/somefile_fallback.jpg" alt="some text" >
</picture>

Hier wird die CSS-Anweisung display: none ignoriert.

Die Begruendung dafuer:

Der Browser nimmt das erste source-Element, dessen media-Attribut zutrifft

www.mediaevent.de/xhtml/picture.html

Polyfilles: Anwendungsgebiete, Nutzen & Risiken

Ich bin grade eben auf die Seite Polyfill.io gestoßen.

Die Idee der dahinter stehenden API ist es, das vom Browser nicht unterstütze JavaScript Features (wie z.B. ChildNode.remove() ) nachträglich zur Verfügung gestellt werden. Dadurch ist es möglich, aktuellen Programmcode zu schreiben, aber trotzdem auch noch alte Browser wie den Internet Explorer 11 zu unterstützen.

Problematisch dabei ist, das jedoch nicht alle Features (z.B. for..of – Loops) unterstützt werden.

Problematisch ist zudem, das die API bei AB-Tests nur über performanceintensive Umwege nutzbar ist.

Natürlich sollte man derartigen Tools nicht blind vertrauen sondern mit Bedacht einsetzen. Ansonsten muss man schnell Polyfills für Polyfills für Polyfills laden, was natürlich recht hohe Ladezeiten mit sich bringt.

Um schlanken Code zu erzeugen, wertet die Seite den UserAgent vom Browser aus und schickt nur die Polyfills, die tatsächlich benötigt werden.

Hinter dem Projekt steht die Financial Times; der Code steht unter der MIT-OpenSource-Lizenz.

WordPress@Docker

Im folgenden ist ein docker-compose File zur Nutzung von WordPress mit Docker aufgeführt. Im Code fehlt noch der Container für die WordPress – CLI-Schnittstelle. Dies geht mithilfe des CLI-Tags im offiziellen WordPress Paket.

Orginalquelle ist davidyeiser

version: '3.1'

services:
  db:
    image: mariadb:latest
    container_name: wordpressdatabase
#    user: ${CURRENT_UID}
    restart: always
    volumes:
      - ../dockerfiles/db_data:/var/lib/mysql
    environment:
      MYSQL_DATABASE: exampledb
      MYSQL_USER: exampleuser
      MYSQL_PASSWORD: examplepass
      MYSQL_RANDOM_ROOT_PASSWORD: '1'
  wordpress:
    depends_on:
      - db
    image: wordpress:latest
    container_name: wordpresscore
#    user: ${CURRENT_UID}
    restart: always
    ports:
      - 8080:80
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_USER: exampleuser
      WORDPRESS_DB_PASSWORD: examplepass
      WORDPRESS_DB_NAME: exampledb
    working_dir: /var/www/html
    # avoid errors while installing plugIns
#    command: bash -c "chown -R www-data:www-data /var/www/html"
    volumes:
      - ./wp-content:/var/www/html/wp-content
      - ./uploads.ini:/usr/local/etc/php/conf.d/uploads.ini

WordPress-Standard-Tricks

WordPress ist zwar ein Super-System, das in vielen Anwendungen eine gute Basis darstellen kann. Für viele Standard-Webseiten, bei dem es hauptsächlich eine CMS-Funktion bereit stellt, ist es jedoch überdimensioniert bzw. besitzt teils sogar Voreinstellungen, die kontraproduktiv sind.

Daher sind im folgenden einige spannenden Einstellungen aufgeführt, deren Nutzung sich für fast jede Seite eignet.

„WordPress-Standard-Tricks“ weiterlesen

RegEx – gehasst und doch geliebt

Jeder, der schon einmal mit der Validierung von Daten zu tun hat, kennt es: die Validierungssyntax RegEx.

Und doch hat fast jeder Angst vor ihr bzw. traut sich nicht so richtig an sie herran. Wie simpel und doch mächtig diese Sprache tatsächlich ist, wird dabei jedoch oft erst dann klar, wenn man ein einfaches Visualisierungstool beim schreiben des entsprechenden Codes verwendet.

„RegEx – gehasst und doch geliebt“ weiterlesen