deploy: 29d6d57

presentations/misc/css-2024/001-ziele/index.html

@@ -23,7 +23,8 @@
 
       <section data-slide-class="images" class="mi-slide 
       images "    data-transition="convex">
-      <section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude" data-transition="{"transition":"none"}"><div><h1 class="title">Wo will ich hin?</h1></div></section>
+      <section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude" data-transition="{"transition":"none"}"><div><h1 class="title">Checkin?</h1></div></section>
+<section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude" data-transition="{"transition":"none"}"><div><h1 class="title">Wo will ich hin?</h1></div></section>
 <section data-slide-shortcode-class="simple-text" class="simple" data-transition="{"transition":"none"}">
     <div><h1 class="title">Ziele des Workshops</h1><ul>
 <li>kleiner Denkanstoß zum Thema «Lean Web Development» und Web Standards</li>

presentations/misc/css-2024/010-web/index.html

@@ -23,12 +23,12 @@
 
       <section data-slide-class="images" class="mi-slide 
       images "    data-transition="convex">
-      <section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude" data-transition="{"transition":"rotate"}"><div><h1 class="title">Web as a Technology?</h1></div></section>
+      <section data-slide-shortcode-class="interlude" data-background-color="#2b2b2b" class="image screenshot interlude" data-transition="{"transition":"rotate"}"><div><h1 class="title">Web as a Technology?</h1></div></section>
 <section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude" data-transition="{"transition":"none"}"><div><h1 class="title">Web as a Plattform?</h1></div></section>
 <section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude" data-transition="{"transition":"none"}"><div><h1 class="title">Web as a Medium?</h1></div></section>
-<section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude" data-transition="{"transition":"none"}"><div><h1 class="title">Web of Functionalities?</h1></div></section>
-<section data-slide-shortcode-class="interlude" data-background-color="#2b2b2b" class="image screenshot interlude" data-transition="{"transition":"none"}"><div><h1 class="title">Web of Content?</h1></div></section>
-<section data-slide-shortcode-class="interlude" data-background-color="#2b2b2b" class="image screenshot interlude" ><div><h1 class="title">I ❤️ the web!</h1></div></section>
+<section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude" data-transition="{"transition":"none"}"><div><h1 class="title">Web of Functionalities?</h1></div></section>
+<section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude" data-transition="{"transition":"none"}"><div><h1 class="title">Web of Content?</h1></div></section>
+<section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude" ><div><h1 class="title">I ❤️ the web!</h1></div></section>
 
 
 

presentations/misc/css-2024/025-seperation-of-concerns/index.html

@@ -27,7 +27,7 @@
 </h1></div></section>
 <section data-slide-shortcode-class="question" class="question"><div><h1 class="title"><p>What is the idea behind the concept «Separation of Concerns»?</p>
 </h1></div></section>
-<section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude" ><div><h1 class="title">Separation of Concerns</h1><h2 class="subtitle js-delay"><p>HTML, CSS, Javascript</p>
+<section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude" ><div><h1 class="title">Separation of Concerns</h1><h2 class="subtitle js-delay"><p>HTML, CSS, Javascript</p>
 </h2></div></section>
 <section data-slide-shortcode-class="qa" class="qa" ><div class="qa-wrap"><h1 class="qa-question">Law of instrument</h1><p class="qa-answer fragment">The law of the instrument, law of the hammer, Maslow's hammer, or golden hammer is a cognitive bias that involves an over-reliance on a familiar tool. Abraham Maslow wrote in 1966, «If the only tool you have is a hammer, it is tempting to treat everything as if it were a nail.»</p></div></section>
 <section  class="statement"><div><h1 class="title">Greenfield vs. Brownfield</h1><div class="fragment">oder: Woran erkenne ich ein erfolgreiches Web Projekt?</div></div></section>
@@ -39,6 +39,9 @@
     <div><h1 class="title">Embrace the Platform</h1><p>Rather than using dependencies or libraries, use the native JavaScript methods and Browser APIs that are baked right in for free whenever you can.<br>
 <small>Chris Ferdinandi // <a href="https://leanweb.dev/ebook/lean-web-principles/#principle-1-embrace-the-platform">Lean Web Principles</a></small></p>
 </div></section>
+<section data-slide-shortcode-class="simple-text" class="simple" >
+    <div><h1 class="title">Web Standards</h1><p>Features, die einmal im Browser implementiert sind bleiben i.d.R. drin.</p>
+</div></section>
 
 
 

presentations/misc/css-2024/100-anwendungsbeispiel/index.html

@@ -23,7 +23,7 @@
 
       <section data-slide-class="images" class="mi-slide 
       images "    data-transition="convex">
-      <section data-slide-shortcode-class="interlude" data-background-color="#2b2b2b" class="image screenshot interlude" data-transition="{"transition":"none"}"><div><h1 class="title">Anwendungsbeispiel</h1></div></section>
+      <section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude" data-transition="{"transition":"none"}"><div><h1 class="title">Anwendungsbeispiel</h1></div></section>
 <section data-slide-shortcode-class="simple-text" class="simple" data-transition="{"transition":"none"}">
     <div><h1 class="title">Digitales Cranach Masterpieces Coffeetable Book</h1></div></section>
 

presentations/misc/css-2024/210-custom-properties/index.html

@@ -23,7 +23,7 @@
 
       <section data-slide-class="wrap" class="mi-slide 
       wrap "    data-transition="fade">
-      <section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude" ><div><h1 class="title">Custom Properties</h1><h2 class="subtitle js-delay"><p><a href="https://caniuse.com/css-variables">Baseline since April 2017</a></p>
+      <section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude" ><div><h1 class="title">Custom Properties</h1><h2 class="subtitle js-delay"><p><a href="https://caniuse.com/css-variables">Baseline since April 2017</a></p>
 </h2></div></section>
 <section data-slide-shortcode-class="cite" class="cite"><div class="cite"><blockquote class="typo-quote"><p>Custom properties are entities defined by CSS authors that represent specific values to be reused throughout a document.</p><cite></cite></blockquote></div></section>
 <section data-slide-shortcode-class="question" class="question"><div><h1 class="title"><p>Was ist der Unterschied zwischen Custom Properties und <a href="https://sass-lang.com/playground/#eJxtTrsOgCAQ2+8rbtARI7rp15B4eCQIBpk0/rsiPhaHSy9t01bKQi/CqjBShw1NPRSWRTQjxw6lrMtMOB8mZU+mTQwwqYHCBogVU/DpQeQmI6L2LorFrGfkm97fmjWOBFMuuHqyssMF8/bn+yY85nQ7HNr0NEo=">Sass Variables</a>?</p>

presentations/misc/css-2024/220-nesting/index.html

@@ -23,7 +23,7 @@
 
       <section data-slide-class="images" class="mi-slide 
       images "    data-transition="fade">
-      <section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude" ><div><h1 class="title">CSS Nesting</h1><h2 class="subtitle js-delay"><p><a href="https://caniuse.com/?search=nesting">Baseline since April 2023</a></p>
+      <section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude" ><div><h1 class="title">CSS Nesting</h1><h2 class="subtitle js-delay"><p><a href="https://caniuse.com/?search=nesting">Baseline since April 2023</a></p>
 </h2></div></section>
 <section data-slide-shortcode-class="simple-text" class="simple" data-transition="fade">
     <div><h1 class="title">CSS Nesting</h1><p>The CSS nesting module defines a syntax for nesting selectors, providing the ability to nest one style rule inside another, with the selector of the child rule relative to the selector of the parent rule.</p>

presentations/misc/css-2024/250-broken-grid/index.html

@@ -23,7 +23,7 @@
 
       <section data-slide-class="wrap" class="mi-slide 
       wrap "    data-transition="convex">
-      <section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude" ><div><h1 class="title">Broken Grid via CSS Grid</h1><h2 class="subtitle js-delay"><p><a href="https://caniuse.com/css-grid">Global Availability &gt; 97%</a></p>
+      <section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude" ><div><h1 class="title">Broken Grid via CSS Grid</h1><h2 class="subtitle js-delay"><p><a href="https://caniuse.com/css-grid">Global Availability &gt; 97%</a></p>
 </h2></div></section>
 <section data-slide-shortcode-class="screenshot" class="image is-fullscreen no-shadow" data-background="./images/broken-grid-00.jpg" data-transition="fade" ><div class="bu"><p><p><a href="https://blog.hubspot.com/website/broken-grid-layouts">Broken Grid</a> Example</p>
 </p></div></section>

presentations/misc/css-2024/290-why-animations/index.html

@@ -23,7 +23,7 @@
 
       <section data-slide-class="wrap" class="mi-slide 
       wrap "    data-transition="convex">
-      <section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude" ><div><h1 class="title">Warum Transitions & Animations?</h1></div></section>
+      <section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude" ><div><h1 class="title">Warum Transitions & Animations?</h1></div></section>
 <section  class="statement"><div><h1 class="title">UI movement helps to build a mental model.</h1></div></section>
 <section  class="statement"><div><h1 class="title">UI motion attracts user attention.</h1></div></section>
 <section  class="statement"><div><h1 class="title">UI motion increases the joy of use.</h1><div class="fragment">When it's used properly and wisely. 🧐</div></div></section><footer><ul>

presentations/misc/css-2024/300-css-transitions/index.html

@@ -23,7 +23,7 @@
 
       <section data-slide-class="wrap" class="mi-slide 
       wrap "    data-transition="fade">
-      <section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude" ><div><h1 class="title">CSS Transitions</h1><h2 class="subtitle js-delay"><p><a href="https://caniuse.com/css-transitions">Baseline since ~2019</a></p>
+      <section data-slide-shortcode-class="interlude" data-background-color="#2b2b2b" class="image screenshot interlude" ><div><h1 class="title">CSS Transitions</h1><h2 class="subtitle js-delay"><p><a href="https://caniuse.com/css-transitions">Baseline since ~2019</a></p>
 </h2></div></section>
 <section data-slide-shortcode-class="simple-text" class="simple" >
     <div><h1 class="title">CSS Transitions</h1><p>CSS transitions provide a way to control animation speed when changing CSS properties.</p>

presentations/misc/css-2024/400-keyframe-animations/index.html

@@ -23,7 +23,7 @@
 
       <section data-slide-class="wrap" class="mi-slide 
       wrap "    data-transition="convex">
-      <section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude" ><div><h1 class="title">CSS Animations</h1></div></section>
+      <section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude" ><div><h1 class="title">CSS Animations</h1></div></section>
 <section data-slide-shortcode-class="simple-text" class="simple" >
     <div><h1 class="title">CSS Animations</h1><p>CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components: a <em>style describing the CSS animation</em> and a <em>set of keyframes</em> that indicate the start and end states of the animation's style, as well as possible intermediate waypoints.</p>
 </div></section>

presentations/misc/css-2024/400-scroll-driven-animations/index.html

@@ -23,7 +23,7 @@
 
       <section data-slide-class="wrap" class="mi-slide 
       wrap "    data-transition="convex">
-      <section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude" ><div><h1 class="title">Scroll-Driven Animations</h1><h2 class="subtitle js-delay"><p><a href="https://caniuse.com/?search=scroll-timeline">Experimental Feature</a></p>
+      <section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude" ><div><h1 class="title">Scroll-Driven Animations</h1><h2 class="subtitle js-delay"><p><a href="https://caniuse.com/?search=scroll-timeline">Experimental Feature</a></p>
 </h2></div></section>
 <section data-slide-shortcode-class="simple-text" class="simple" >
     <div><h1 class="title">Scroll-Driven Animations</h1><p>The CSS scroll-driven animations module allows you to <strong>animate property values</strong> based on a progression <strong>along a scroll-based timeline</strong> instead of the default time-based document timeline. This means that you can <strong>animate an element by scrolling a scrollable element</strong>, rather than just by the passing of time.</p>

presentations/misc/css-2024/500-view-transitions/index.html

@@ -23,7 +23,7 @@
 
       <section data-slide-class="wrap" class="mi-slide 
       wrap "    data-transition="convex">
-      <section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude" ><div><h1 class="title">View Transitions API</h1><h2 class="subtitle js-delay"><p><a href="https://caniuse.com/?search=View%20Transitions%20API">Experimental Feature</a></p>
+      <section data-slide-shortcode-class="interlude" data-background-color="#2b2b2b" class="image screenshot interlude" ><div><h1 class="title">View Transitions API</h1><h2 class="subtitle js-delay"><p><a href="https://caniuse.com/?search=View%20Transitions%20API">Experimental Feature</a></p>
 </h2></div></section>
 <section data-slide-shortcode-class="simple-text" class="simple" >
     <div><h1 class="title">View Transitions</h1><p>The View Transitions API provides a mechanism for easily creating animated transitions between different website views. This includes animating between DOM states in a single-page app (SPA), and <span class="fragment"><strong>animating the navigation between documents in a multi-page app (MPA)</strong>.</span><span class="fragment">🕺🏼🙌🏽</span></p>

presentations/misc/css-2024/600-popover-api/index.html

@@ -23,7 +23,7 @@
 
       <section data-slide-class="wrap" class="mi-slide 
       wrap "    data-transition="convex">
-      <section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude" ><div><h1 class="title">Popover API</h1><h2 class="subtitle js-delay"><p><a href="https://caniuse.com/?search=View%20Transitions%20API">Baseline since 2024</a></p>
+      <section data-slide-shortcode-class="interlude" data-background-color="#2b2b2b" class="image screenshot interlude" ><div><h1 class="title">Popover API</h1><h2 class="subtitle js-delay"><p><a href="https://caniuse.com/?search=View%20Transitions%20API">Baseline since 2024</a></p>
 </h2></div></section>
 <section data-slide-shortcode-class="simple-text" class="simple" >
     <div><h1 class="title">Popover API</h1><p>The Popover API provides developers with a standard, consistent, flexible mechanism for displaying popover content on top of other page content. Popover content can be controlled either declaratively using HTML attributes, or via JavaScript.</p>

presentations/misc/css-2024/900-ausblick/index.html

@@ -23,7 +23,7 @@
 
       <section data-slide-class="wrap" class="mi-slide 
       wrap "    data-transition="convex">
-      <section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude" ><div><h1 class="title">Wie geht's weiter?</h1></div></section>
+      <section data-slide-shortcode-class="interlude" data-background-color="#2b2b2b" class="image screenshot interlude" ><div><h1 class="title">Wie geht's weiter?</h1></div></section>
 <section data-slide-shortcode-class="simple-text" class="simple" >
     <div><h1 class="title">Diggin Deeper</h1><ul class="colored-list">
   <li>Checkout <a href="https://leanweb.dev">The Lean Web</a></li>
@@ -32,7 +32,7 @@
   <li>Checkout <a href="https://io.google/2024/explore/83764202-1ca2-4491-a731-c4d3701624d4/">The state of CSS and Web UI, Google I/O Talk from Una Kravets</a></li>
 </ul>
 </div></section>
-<section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude" ><div><h1 class="title">🔨</h1><h2 class="subtitle js-delay"><p>Der Hammer hilft nicht immer.</p>
+<section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude" ><div><h1 class="title">🧰</h1><h2 class="subtitle js-delay"><p>Gut gepackte Werkzeugkiste lohnt sich!</p>
 </h2></div></section>