<p>Das 25-jährige Jubiläum des SELFHTML-Projekts am 04.06.2020 wurde von der Corona-Pandemie überschattet. Unser lange geplantes Treffen wurde auf den Herbst verschoben und konnte jetzt endlich vom 09.-11. Oktober in der Quadratestadt Mannheim stattfinden.<!--more--></p> <p><a href="https://blog.selfhtml.org/images/fa7f32fc-5e29-11eb-9153-b42e9947ef30.jpg"><img class="alignright size-full wp-image-1960" src="https://blog.selfhtml.org/images/fa7f32fc-5e29-11eb-9153-b42e9947ef30.jpg?size=medium" alt="" width="480" height="480" /></a><br> Die Jugendherberge ist herrlich am Rhein gelegen mit Blick auf die vielen Schiffe, die durch die starke Strömung flott talwärts fuhren. Abends gingen wir zum Italiener "Zwei Hasen", bei dem es passend Rucolasalat und anderes Hasenfutter gab.</p> <p>Der Samstag stand im Zeichen des Jubiläums. Einerseits hatten wir auf viele Ehemalige und besonders Stefan Münz gehofft - andererseits stiegen gerade in der Woche vorher die Corona-Kennziffern sowohl in Mannheim als auch in den Herkunftsorten der SELFER. Trotzdem wagte es der harte Kern zu kommen und es sind glücklicherweise wieder alle gesund nach Hause gelangt!</p> <p>Wir begannen mit einem kleinen Rückblick auf die vielfältigen Facetten des SELF-Universums:</p> <ul> <li>die SELF-Doku in einer japanischen Version</li> <li>Advents- und Valentinsaktionen</li> <li>und vieles mehr</li> </ul> <p>Übrigens: Von vielen SELFern wird immer wieder das „Upgrade“ von der Jugendherberge zum Hotel gefordert - das erste SELF-Teffen am <a href="http://selfspezial.atomic-eggs.com/artik002.html">Schliersee (1999)</a> fand in einem ebensolchen statt!</p> <p><iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:CSS3_transform-perspective-1.html" width="840" height="700"><br> </iframe></p> <p>Die Flip-Cards sind dem Motto ensprechend quadratisch und ordnen sich mit Grid Layout automatisch im verfügbaren Raum an.</p> <p><code>grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));</code></p> <p>Der dazu geplante<a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid"> Grid-Workshop</a> wurde immer weiter verschoben und dann am Sonntagmittag beim Thai-Imbiss abgehalten, wo er durch einige CodePens von Gunnar ergänzt wurde.</p> <p>Es waren Workshops geplant - der passendere Ausdruck waren wohl <strong>Lightning Talks</strong> über unsere aktuellen Interessen und Projekte:</p> <p>Julius gab uns einen Überblick über sein Projekt <strong>Single Sign-On mit OpenConnect</strong>. Schnell wurde verglichen, wie sich so etwas in Schule und Beruf, aber auch eventuell bei SELFHTML im Forum und Wiki realisieren ließe.</p> <p>Gunnar Bittersmann gab uns einen Überblick, wie man eine <strong>barrierefreie Pullout-Navigation mit Focus-trap</strong> bauen könnte. JürgenB verglich mit unserer/seiner <a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/zug%C3%A4ngliche_Dropdown-Navigation">Variante im Wiki</a>.</p> <p>Da die Zeit drängte, wurde anstelle des <strong>SVG-Workshops</strong> nur eine <a href="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-Infografik-1.html">kurze Einführung</a> gegeben und dann das Projekt der <a href="https://wiki.selfhtml.org/wiki/SVG/Tutorials/Rube-Goldberg-Maschinen">Rube-Goldberg-Maschine(n)</a> vorgestellt.</p> <p>Gunnar stellte noch einige <strong>TILs (=Today-I-Learned)</strong> vor, die zum Teil gleich in Wiki-Beispielen landeten.</p> <ul> <li><a href="https://speakerdeck.com/gunnarbittersmann/til-about-masks">TIL about masks </a>(Maskierung in SVG)</li> <li><a href="https://speakerdeck.com/gunnarbittersmann/til-about-text-orientation">TIL about text-orientation</a> (wie man Text – und nicht ein Bild! &#x1f923; – in die Vertikale dreht)</li> <li><a href="https://speakerdeck.com/gunnarbittersmann/no-limit">TIL about love minus zero/no limit</a> (Fortsetzung: IE-Bug bei vertikalem Text)</li> <li><a href="https://speakerdeck.com/gunnarbittersmann/til-about-css-and-email-clients">TIL about CSS and email clients</a> (wie einen E-Mail-Clients in den Wahnsinn treiben – und das im Urlaub)</li> </ul> <p>Ab 17:00 gingen wir am Rhein in die Quadrate und querten die Quadrate vom Schloss über Paradeplatz und Marktplatz zum Meßplatz, um uns dort beim Vietnamesen verwöhnen zu lassen. Dass die Hausnummern sich nicht auf Straßennamen, sondern die Quadrate beziehen, sollte noch zu Schwierigkeiten führen, als wir die Autofahrer zur Gastronomie lotsten.</p> <p><figure role="group" class="gallery two-cols"><figure role="group"> <a href="https://blog.selfhtml.org/images/fa6999ec-5e29-11eb-8ec7-b42e9947ef30.jpg"><img src="https://blog.selfhtml.org/images/fa6999ec-5e29-11eb-8ec7-b42e9947ef30.jpg?size=medium" alt=""></a> </figure> <figure role="group"> <a href="https://blog.selfhtml.org/images/fa6f4194-5e29-11eb-98a7-b42e9947ef30.jpg"><img src="https://blog.selfhtml.org/images/fa6f4194-5e29-11eb-98a7-b42e9947ef30.jpg?size=medium" alt=""></a> </figure> <figure role="group"> <a href="https://blog.selfhtml.org/images/fa746fc0-5e29-11eb-b467-b42e9947ef30.jpg"><img src="https://blog.selfhtml.org/images/fa746fc0-5e29-11eb-b467-b42e9947ef30.jpg?size=medium" alt=""></a> </figure> <figure role="group"> <a href="https://blog.selfhtml.org/images/fa7aada4-5e29-11eb-b5bc-b42e9947ef30.jpg"><img src="https://blog.selfhtml.org/images/fa7aada4-5e29-11eb-b5bc-b42e9947ef30.jpg?size=medium" alt=""></a> </figure> </figure></p> <p>Der Sonntag stand im Zeichen der <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Verein/Protokolle/Mitgliederversammlung_2020">Mitgliederversammlung</a>. Zum erstenmal fand diese als Video-Konferenz statt. Da danach niemand vorschnell zum Aufbruch blasen wollte, zogen wir langsam in die Innenstadt, um in einem Thai-Imbiss weiter zu diskutieren, CodePens auszutauschen und uns für's nächste Jahr in Hamburg zu verabreden.</p>

<p>Das 25-jährige Jubiläum des SELFHTML-Projekts am 04.06.2020 wurde von der Corona-Pandemie überschattet. Unser lange geplantes Treffen wurde auf den Herbst verschoben und konnte jetzt endlich vom 09.-11. Oktober in der Quadratestadt Mannheim stattfinden.<!--more--></p> <p><a href="https://blog.selfhtml.org/images/fa7f32fc-5e29-11eb-9153-b42e9947ef30.jpg"><img class="alignright size-full wp-image-1960" src="https://blog.selfhtml.org/images/fa7f32fc-5e29-11eb-9153-b42e9947ef30.jpg?size=medium" alt="" width="480" height="480" /></a><br> Die Jugendherberge ist herrlich am Rhein gelegen mit Blick auf die vielen Schiffe, die durch die starke Strömung flott talwärts fuhren. Abends gingen wir zum Italiener "Zwei Hasen", bei dem es passend Rucolasalat und anderes Hasenfutter gab.</p> <p>Der Samstag stand im Zeichen des Jubiläums. Einerseits hatten wir auf viele Ehemalige und besonders Stefan Münz gehofft - andererseits stiegen gerade in der Woche vorher die Corona-Kennziffern sowohl in Mannheim als auch in den Herkunftsorten der SELFER. Trotzdem wagte es der harte Kern zu kommen und es sind glücklicherweise wieder alle gesund nach Hause gelangt!</p> <p>Wir begannen mit einem kleinen Rückblick auf die vielfältigen Facetten des SELF-Universums:</p> <ul> <li>die SELF-Doku in einer japanischen Version</li> <li>Advents- und Valentinsaktionen</li> <li>und vieles mehr</li> </ul> <p>Übrigens: Von vielen SELFern wird immer wieder das „Upgrade“ von der Jugendherberge zum Hotel gefordert - das erste SELF-Teffen am <a href="http://selfspezial.atomic-eggs.com/artik002.html">Schliersee (1999)</a> fand in einem ebensolchen statt!</p> <p><iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:CSS3_transform-perspective-1.html" width="840" height="700"><br> </iframe></p> <p>Die Flip-Cards sind dem Motto ensprechend quadratisch und ordnen sich mit Grid Layout automatisch im verfügbaren Raum an.</p> <p><code>grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));</code></p> <p>Der dazu geplante<a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid"> Grid-Workshop</a> wurde immer weiter verschoben und dann am Sonntagmittag beim Thai-Imbiss abgehalten, wo er durch einige CodePens von Gunnar ergänzt wurde.</p> <p>Es waren Workshops geplant - der passendere Ausdruck waren wohl <strong>Lightning Talks</strong> über unsere aktuellen Interessen und Projekte:</p> <p>Julius gab uns einen Überblick über sein Projekt <strong>Single Sign-On mit OpenConnect</strong>. Schnell wurde verglichen, wie sich so etwas in Schule und Beruf, aber auch eventuell bei SELFHTML im Forum und Wiki realisieren ließe.</p> <p>Gunnar Bittersmann gab uns einen Überblick, wie man eine <strong>barrierefreie Pullout-Navigation mit Focus-trap</strong> bauen könnte. JürgenB verglich mit unserer/seiner <a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/zug%C3%A4ngliche_Dropdown-Navigation">Variante im Wiki</a>.</p> <p>Da die Zeit drängte, wurde anstelle des <strong>SVG-Workshops</strong> nur eine <a href="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-Infografik-1.html">kurze Einführung</a> gegeben und dann das Projekt der <a href="https://wiki.selfhtml.org/wiki/SVG/Tutorials/Rube-Goldberg-Maschinen">Rube-Goldberg-Maschine(n)</a> vorgestellt.</p> <p>Gunnar stellte noch einige <strong>TILs (=Today-I-Learned)</strong> vor, die zum Teil gleich in Wiki-Beispielen landeten.</p> <ul> <li><a href="https://speakerdeck.com/gunnarbittersmann/til-about-masks">TIL about masks </a>(Maskierung in SVG)</li> <li><a href="https://speakerdeck.com/gunnarbittersmann/til-about-text-orientation">TIL about text-orientation</a> (wie man Text – und nicht ein Bild! &#x1f923; – in die Vertikale dreht)</li> <li><a href="https://speakerdeck.com/gunnarbittersmann/no-limit">TIL about love minus zero/no limit</a> (Fortsetzung: IE-Bug bei vertikalem Text)</li> <li><a href="https://speakerdeck.com/gunnarbittersmann/til-about-css-and-email-clients">TIL about CSS and email clients</a> (wie einen E-Mail-Clients in den Wahnsinn treiben – und das im Urlaub)</li> </ul> <p>Ab 17:00 gingen wir am Rhein in die Quadrate und querten die Quadrate vom Schloss über Paradeplatz und Marktplatz zum Meßplatz, um uns dort beim Vietnamesen verwöhnen zu lassen. Dass die Hausnummern sich nicht auf Straßennamen, sondern die Quadrate beziehen, sollte noch zu Schwierigkeiten führen, als wir die Autofahrer zur Gastronomie lotsten.</p> <p><figure role="group" class="gallery two-cols"><figure role="group"> <a href="https://blog.selfhtml.org/images/fa6999ec-5e29-11eb-8ec7-b42e9947ef30.jpg"><img src="https://blog.selfhtml.org/images/fa6999ec-5e29-11eb-8ec7-b42e9947ef30.jpg?size=medium" alt=""></a> </figure> <figure role="group"> <a href="https://blog.selfhtml.org/images/fa6f4194-5e29-11eb-98a7-b42e9947ef30.jpg"><img src="https://blog.selfhtml.org/images/fa6f4194-5e29-11eb-98a7-b42e9947ef30.jpg?size=medium" alt=""></a> </figure> <figure role="group"> <a href="https://blog.selfhtml.org/images/fa746fc0-5e29-11eb-b467-b42e9947ef30.jpg"><img src="https://blog.selfhtml.org/images/fa746fc0-5e29-11eb-b467-b42e9947ef30.jpg?size=medium" alt=""></a> </figure> <figure role="group"> <a href="https://blog.selfhtml.org/images/fa7aada4-5e29-11eb-b5bc-b42e9947ef30.jpg"><img src="https://blog.selfhtml.org/images/fa7aada4-5e29-11eb-b5bc-b42e9947ef30.jpg?size=medium" alt=""></a> </figure> </figure></p> <p>Der Sonntag stand im Zeichen der <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Verein/Protokolle/Mitgliederversammlung_2020">Mitgliederversammlung</a>. Zum erstenmal fand diese als Video-Konferenz statt. Da danach niemand vorschnell zum Aufbruch blasen wollte, zogen wir langsam in die Innenstadt, um in einem Thai-Imbiss weiter zu diksutieren, CodePens auszutauschen und uns für's nächste Jahr in Hamburg zu verabreden.</p>