Stammtisch am Mittwoch

[Matthias Scharwies]

Hallo zusammen,

im Sommer war Gartenzeit, jetzt sitzen wir wieder drinnen und wollen wieder auf unseren Stammtisch aufmerksam machen.

Am nächsten Mittwoch wollen wir die Plattform wechseln und uns auf SenfCall^[1] treffen.

Bitte folgt diesem Einladungslink:

lecture.senfcall.de/sel-frs-506-gkg

• Es basiert auf BBB, ist deutsch und kostenlos
• läuft im Browser, wir müssen nichts hosten oder installieren
• nur der Initiator muss registriert sein → niederschwellig!
• kein Ruckeln im Bild, alles perfekt.

Zwei Nachteile / Features sind uns im Test aufgefallen.

1. Nur der Einladende kann den Bildschirm teilen, bzw anderen den Präsentationsmodus geben
2. Video und Chat werden nach Beenden der Konferenz gelöscht;
   Nützliche Links müssen gleich geöffnet oder kopiert werden.

---

1. Senfcall, die DSGVO-Konforme Zoom Alternative (notioneers.io) Herzliche Grüße
   Matthias Scharwies ↩︎

[Ryuno-Ki]

Moin Matthias,

In den letzten Wochen waren wir immer nur zu dritt oder viert, wäre schön, wenn mal wieder mehr kämen.

Auf Discord wohl kaum 🙈

Gruß,

[Matthias Scharwies]

Guten Morgen,

sorry, dass es so lange mit meiner Zusammenfassung gedauert hat: Wir waren zu sechst und es ging um den OnePager und wie man von Abschnitt zu Abschnitt scrollen kann.

Relativ schnell war klar, dass eine scrollbare Bildergalerie und Lazy loading in einen eigenen Artikel ausgelagert werden sollten.^[1] Und es gab ja bereits ein ToDo:

Hier der neu aufgebaute Artikel:

Bilder präsentieren

Die ersten Beispiele zeigen scrollbare Bildergalerien.^[2]

@Rolf B Ja, ich hätte scroll-button() und scroll-marker von Anfang an in Minimalbeispielen trennen sollen.

• Das erstere sind wirklich mit der Tab-Taste bedienbare Buttons
• Die scroll-marker und scroll-marker-group sind „nur“ visuelle Alternativen von thumb und track des Scrollbalken -
  man kann kann in das Widget hineintabben und dann mit den Pfeiltasten navigieren.

@JürgenB hat eine Steuerung mit JS entwickelt - hier fiel auf, dass beim Einsatz der Pseudo-Elemente das Scrollen deaktiviert wurde. Hier kommt scroll-behavior ins Spiel - mit smooth kann das Scrollen wieder aktiviert, mit auto auf diskreten Wechsel umgestellt werden.

Bildunterschriften

Dieses Kapitel war bereits vorhanden, ich habe hier aber einige Zwischenschritte übersprungen und vor allem den Unterschied Bildunterschrift_vs._Bildbeschreibung besser berücksichtigt.

Lazy Loading

„Das hat ja nichts mit CSS zu tun“ - Trotzdem hatte ich seit Jahren von einem Image Reveal geträumt. Mittlerweile geht das mit reinem CSS. ^[3]

		@keyframes reveal {
			from {
				opacity: 0;
				clip-path: inset(45% 20% 45% 20%);
			}
			to {
				opacity: 1;
				clip-path: inset(0% 0% 0% 0%);
			}
		}

		.image-reveal {
			animation: linear reveal both;
			animation-timeline: view();
			animation-range: entry 25% cover 50%;
		}

„Wirklich?“ - „Ja, wobei alle modernen Scroll-Eigenschaften bis jetzt (Stand: November 2025) nur im Chrome, Edge und Opera gehen. Im Safari und Firefox sieht man aber alle Inhalte - progressive enhancement. Und ich hoffe, dass sie bald nachziehen werden.“

Bertie und ich hoffen, dass wir am nächsten Mittwoch^[4] unseren neuen OnePager vorstellen können. Auch dort sind einige Sachen, die man vorher mit JavaScript programmieren musste, bereits mit CSS möglich!

Könnte jemand bis dahin bitte diesen Artikel durchlesen und Anregungen und Kritikpunkte sammeln?

Herzliche Grüße
Matthias Scharwies

---

1. Kurzfristig war der Bildwechsler im Gespräch, aber da ging es ja um eine Lightbox mit dialog. ↩︎

2. Wir hatten mehrere Sets von mehr oder weniger schönen Rastergrafiken. @Bertie hat hier ein neues Set von Landschaftsbildern angelegt, die als SVG mit 10KB viel leichter als irgendwelche JGPs sind. ↩︎

3. Hat jemand eine Idee, ob – und wenn ja, wie - man die figcaptions auch animieren sollte? ↩︎

4. Ich fahre jetzt 3 Tage ins Schullandheim in die Hersbrucker Schweiz! ↩︎

[Matthias Scharwies]

Guten Morgen,

vor 2 Wochen hatten wir das Projekt OnePager vorgestellt.

Dabei sind uns einige Sachen aufgefallen, die wir mit euch diskutieren wollen.

Wir sind ab 20:00 online

(Hilfe:Discord)

Herzliche Grüße
Matthias Scharwies

[Matthias Scharwies]

Hallo zusammen,

heute ging's wieder um den OnePager und die Bildergalerien mit Scroll Snap.
Ein Blog-Beitrag kommt am Montag.

Um zu prüfen, ob wir auf dem richtigen Weg sind, testeten wir die Beispielseiten mit dem wave.webaim.org-Tool.

Dazu klärte uns @Hörnchen über NFCs (und den schnellen Weg zum Reichtum) auf.

---

Am nächsten Mittwoch wollen wir die Plattform wechseln und uns auf SenfCall^[1] treffen.

Bitte folgt diesem Einladungslink:

lecture.senfcall.de/sel-frs-506-gkg

• Es basiert auf BBB, ist deutsch und kostenlos
• läuft im Browser, wir müssen nichts hosten oder installieren
• nur der Initiator muss registriert sein → niederschwellig!
• kein Ruckeln im Bild, alles perfekt.

Zwei Nachteile / Features sind uns im Test aufgefallen.

1. Nur der Einladende kann den Bildschirm teilen, bzw anderen den Präsentationsmodus geben
2. Video und Chat werden nach Beenden der Konferenz gelöscht;
   Nützliche Links müssen gleich geöffnet oder kopiert werden.

Herzliche Grüße
Matthias Scharwies

---

1. Senfcall, die DSGVO-Konforme Zoom Alternative (notioneers.io) ↩︎

[Ryuno-Ki]

Moin Matthias,

wieder ab 20:00 Uhr?

Gruß,

[Matthias Scharwies]

Servus!

Moin Matthias,

wieder ab 20:00 Uhr?

Gruß,

Ja! Ca. 90min.

Herzliche Grüße
Matthias Scharwies