Aufgabenstellung: Ich soll mit npm in ein Repository, anders: einen lokalen Ordner, nicht nur eine Version von Bootstrap im Verzeichnis node_modules/ bereit stellen, sondern diverse herunter laden. So kann ich die scss/-Ordner der unterschiedlichen Versionen leichter abgleichen, anschauen, kopieren, nutzen und jederzeit bequem updaten bzw. erneuern; ohne, dass ich auf GitHub rumsuchen muss.

Aufgabenstellung für eine Hugo-Seite war: Ein Faulpelz möchte nicht gerne eine weitere Shortcode-Datei anlegen, sondern einen Code direkt im Content einsetzen, der normalerweise nur Hugo-Templates (Partials, Shortcodes etc.) vorbehalten ist (nur dort lauffähig ist). Hier können die Hugo-eigenen .inline-Shortcodes ins Spiel kommen. Eigentlich trivial, aber zum heutigen Tag (26.3.2022) mager dokumentiert.

Auf einer Hugo-Seite will ich im Markdown ein <!--Hallo--> in den Text eingeben, so, dass der Leser den Kommentar exakt so dargestellt bekommt und ihn rauskopieren kann. Mit den Standardeinstellungen von Hugo klappt das aber nicht, weil auf der gerenderten Seite <!–Hallo–> rauskommt. Die beiden Bindestriche wurden zu einem langen Strich kombiniert. Es folgen Möglichkeiten, das zu unterbinden.

Auf einer Hugo-Seite werden Bilder eingesetzt, die die Venobox als PopUp-Feature verwenden. Die benötigt bei mir zwei zu ladende JavaScript-Dateien. Für das <FIGURE><A><IMG>-HTML-Gerüst nutze ich einen eigenen Hugo-Shortcode. Ziel ist, dass o.g. Venobox-Skripte nur in Seiten geladen werden, die diesen Shortcode verwenden und, wenn mehrfach, so, dass pro Seite nur ein <SCRIPT>-Tag eingesetzt wird.

In Betriebssystemen (OS), z.B. Windows, kann man ein Farbschema einstellen; "dark" (dunkel) oder "light" (hell), neben anderen, die hier aber nicht gemeint sind. Man spricht auch von "Dark-Mode" und "Light-Mode".

Es gibt ein CSS-MediaQuery, z.B. @media (prefers-color-scheme: dark) {…}, eine Weiche, mit der der ein guter Browser ermitteln kann, welches Schema der Besucher in seinem OS eingestellt hat.

Die Sass-Community ist stur. Am Beispiel Font-Awesome: Definiert man eine Variable $fa-var-accessible-icon: \f368; und setzt die ins SCSS, z.B. content: fa-content($fa-var-accessible-icon); kommt im CSS (meist) ein gequotetes Quadrat raus (content: "□";) , wenn man im Texteditor anschaut, anstatt content: "\f368";. Zwar funktioniert das CSS, aber eben schwer nachvollziehbar, was da nun content: ist.

"Lazy Loading" meint, dass eine Webseite Bilder verzögert lädt. Das erhöht das Erfolgserlebnis. Der Besucher sieht die Seite schon und noch unnötige Bilder werden erst bei Bedarf geladen. Anders: Wenn man eine Page öffnet, sieht man die Bilder weiter unten noch gar nicht und man scrollt/wischt sie erst in den so genannten Viewport (= für die Darstellung zur Verfügung stehender Bereich im Browser).

Es gibt Internetseiten mit Anmeldung, die senden per Email einen Sicherheitscode, den man zusätzlich für das Login eingeben muss. Bei GitHub oder alfahosting nervig, weil ich den Emailer nicht immer offen habe. Verlängern kann man die Anmeldedauer durch Cookies. Ich lasse aber beim Schließen des Firefox alle Cookies löschen. Trotz Ausnahme für z.B. github.com war dies Cookie auch weg. Wieso das denn jetzt?

Mit jedem Update eine neue Überraschung. Seit Firefox 72.0 werden die Scrollbars in der Hintergrundfarbe des BODY-Tags eingefärbt. Eigentlich als Bugfix für das so genannte Dark Theme bzw. den Dark Mode gedacht, wo es Probleme bei der Darstellung gab, ist das für viele Seiten sinnfrei bis hässlich bzw. gegen die Intention des Gestalters. Man kann das mit bisschen HTML- und CSS-Kenntnissen verhindern.

In mehreren PHP-Errog-Log-Dateien unterschiedlicher Websites fielen mir tausende Zeilen der Art "PHP Warning: Unknown: function '0' not found or invalid function name in Unknown on line 0" auf. Recht aussagelos, diese Information. Wo kam die her? Ein Hinweis war, dass ich bei allen Seiten, die PHP-Version angehoben hatte. Letztendlich war eine unpassende Server-Konfiguration Schuld. "Selber blöd!"

Am besten kompiliert man SCSS mithilfe von Konsole-Tools wie npm. Ich habe diese Möglichkeit beim Programmieren ohne bremsenden Aufwand nicht. Ich nutze bei(!) der Arbeit von Webseiten einen PHP-SCSS-Compiler, basierend auf scssphp/scssphp, der mir das CSS on-the-fly erstell. Crux: Die Vendor-Prefix-Mixins wurden in BS4 entfernt. Der PHP-Compiler kann die Browser-Prefixe also auch nicht einbauen.

Wie alle Internet-Browser hat der Vivaldi die Option sich Anmeldedaten für Webseiten zu merken. In den Einstellungen für "Privatsphäre" gibt es das Häkchenfeld "Webseitenpasswörter speichern". In dieser Ecke kann man auch gemerkte Passwörter löschen oder anzeigen. Wenn man sich auf einer Webseite angemeldet hat, fragt Viavaldi "Passwort speichern?", was man per Knopf "Nie" auch ablehnen kann.

Der Zugang zu Teilen einer Webseite wurde mit einem .htaccess-Verzeichnisschutz gesperrt. Ein simpler Cron-Job, der einen Link der Seite aufruft, soll aber regelmäßig ungehindert Zugriff haben, um ein Wartungs-Skript im verschlossenen Bereich der Internetseite automatisch auszuführen. Natürlich wird zusätzlich ein Sicherheits-Token verwendet, was hier aber nicht Thema ist.

Firefox bietet ungefragt und vorab aktiviert den Nutzern eine Verbindung zum Service Pocket an, eine Art erweiterter Lesezeichen-Service, ähnlich wie man ihn aus Browsern kennt. Man speichert irgendwo auf einem fremden Server, für den man sich natürlich auch registrieren muss, seine Lesezeichen und kann dann von diversen Geräten und aus diversen Browsern auf seine Lesezeichen zugreifen.

Einige CSS-Tricks kursieren im Internet, mit denen man bspw. eingebettete Flash-Videos responsiv auf die Webseite bekommt. Problem ist ja immer die Höhe und Breite beim Skalieren passend hinzubekommen. Ab Bootstrap 3 sind ein paar CSS-Klassen schon integriert, die für bestimmte Ratios (Seitenverhältnisse) passen. Mit einer Berechnung kann man eigene CSS-Klassen für beliebige Ratios ermitteln.

Immer öfter lädt man auf GitHub Pakete herunter, die nicht direkt einsatzbereit sind; z.B. fehlen CSS-Dateien. Stattdessen liegen den Paketen SASS- oder LESS-Dateien bei, die man wiederholt via Konsole kompilieren muss, will man sie nach eigenen Wünschen anpassen und testen. Passt meist gar nicht in meinen Arbeitsablauf, weshalb ich oftmals Tools wie das Open-Source-Programm Koala von Ethan Lai nutze.

Eine der Neuerungen in HTML5, die ich besonders fand, war die Erlaubnis CSS-STYLE-Tags überall setzen zu dürfen und nicht nur im HEAD-Tag. Zwar war das schon lange Gang und Gäbe, da Browser keine Probleme mit dem "unerlaubten" Vorgehen haben, aber eben nicht ganz sauber und der W3C-Validator bemängelt das.

In LESS kann man Variablen vordefinieren. Farbwerte, Paddings und mehr. Hilfreich z.B., will man mal einen Grauton etwas heller stellen, Man muss nicht in diversen Dateien die color-Werte anpassen, sondern kann das an 1 Stelle erledigen. Bootstrap 3 übertreibt mit diesem Feature etwas und ich suche mir regelmäßig einen Wolf. Erster Schritt, eine sortierbare Übersicht. Vielleicht hilft's was.

Webseitenerstellern wird spätestens unter Windows 10 mit Browser Edge aufgefallen sein, dass Telefonnummern auf Webseiten markiert werden, obwohl man gar keine entsprechende App o,ä. installiert hat. Das gab es schon mit Internet Explorer 11, aber nur auf bestimmten Geräten. Seine Webseite kann man von vornherein so präparieren, dass diese Funktion abgeschaltet ist. 

Bootstrap 3 bringt für Icons und Symbole den Webfont glyphicons-halflings-regular mit. Man kann via CSS-Klassen Symbole anzeigen. Da in Joomla 3 mit Bootstrap 2 der Icomoon-Font verwendet wird, plante ich eine Übersetzungsdatei in LESS zu schreiben, um die icon-Klassen im HTML weiterverwenden zu können. Die Kurzlebigkeit überholte mich, sozusagen.