more defer examples

d-koppenhagen · Dec 10, 2023 · bd63753 · bd63753
1 parent 13c3cbd
commit bd63753
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 55 deletions.
diff --git a/src/app/alert-list/alert-list.component.html b/src/app/alert-list/alert-list.component.html
@@ -1,4 +1,5 @@
-@for (alert of activeAlerts(); track $index;) {
+@for (alert of activeAlerts(); track alert.title;) {
+  <!-- @for (alert of activeAlerts(); track $index;) { -->
   <app-alert-region
     [role]="alert.role"
     [title]="alert.title"

diff --git a/src/app/alert.service.ts b/src/app/alert.service.ts
@@ -18,60 +18,60 @@ export type Alert = {
 })
 export class AlertService {
   public alerts = signal<Alert[]>([
-    // {
-    //   role: "log",
-    //   title: "Log",
-    //   description: "A simple log",
-    //   politeness: "polite",
-    //   timer: 2000,
-    //   duration: 3000,
-    //   active: true
-    // },
-    // {
-    //   role: "alert",
-    //   title: "Alert",
-    //   description: "A very important alert message",
-    //   politeness: "assertive",
-    //   timer: 200,
-    //   duration: 2000,
-    //   active: true
-    // },
-    // {
-    //   role: "status",
-    //   title: "Status",
-    //   description: "A status alert which isn't that important",
-    //   politeness: "polite",
-    //   timer: 3000,
-    //   duration: 2000,
-    //   active: true
-    // },
-    // {
-    //   role: "marquee",
-    //   title: "Marquee",
-    //   description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.",
-    //   politeness: "polite",
-    //   timer: 500,
-    //   duration: 10000,
-    //   active: true
-    // },
-    // {
-    //   role: "progress",
-    //   title: "Progress",
-    //   description: "Step 1 of 4 finished.",
-    //   politeness: "polite",
-    //   timer: 6000,
-    //   duration: 3000,
-    //   active: true
-    // },
-    // {
-    //   role: "timer",
-    //   title: "Timer",
-    //   description: "2 minutes left",
-    //   politeness: "polite",
-    //   timer: 7000,
-    //   duration: 3000,
-    //   active: true
-    // },
+    {
+      role: "log",
+      title: "Log",
+      description: "A simple log",
+      politeness: "polite",
+      timer: 2000,
+      duration: 3000,
+      active: true
+    },
+    {
+      role: "alert",
+      title: "Alert",
+      description: "A very important alert message",
+      politeness: "assertive",
+      timer: 200,
+      duration: 2000,
+      active: true
+    },
+    {
+      role: "status",
+      title: "Status",
+      description: "A status alert which isn't that important",
+      politeness: "polite",
+      timer: 3000,
+      duration: 2000,
+      active: true
+    },
+    {
+      role: "marquee",
+      title: "Marquee",
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.",
+      politeness: "polite",
+      timer: 500,
+      duration: 10000,
+      active: true
+    },
+    {
+      role: "progress",
+      title: "Progress",
+      description: "Step 1 of 4 finished.",
+      politeness: "polite",
+      timer: 6000,
+      duration: 3000,
+      active: true
+    },
+    {
+      role: "timer",
+      title: "Timer",
+      description: "2 minutes left",
+      politeness: "polite",
+      timer: 7000,
+      duration: 3000,
+      active: true
+    },
   ])
 
   constructor() {}
@@ -103,6 +103,7 @@ export class AlertService {
   }
 
   deactivateAlert(title: string) {
+    console.log('❌ deactivate', title)
     this.activateOrDeactivateAlert(title, false)
   }
 }
diff --git a/src/app/home-view/home-view.component.html b/src/app/home-view/home-view.component.html
@@ -2,6 +2,22 @@
 <h1>Hello, meetup people 👋🏼</h1>
 <p>Let's talk about accessibility and how Angular helps us to improve it.</p>
 
+<h2>Contact</h2>
+<ul>
+  <li><a href="mailto:mail@k9n.dev" target="_blank">Mail: mail&#64;k9n.dev</a></li>
+  <li><a href="https://github.com/d-koppenhagen" target="_blank">Github: d-koppenhagen</a></li>
+  <li><a href="https://twitter.com/d_koppenhagen" target="_blank">X (Twitter): d_koppenhagen</a></li>
+  <li><a href="https://linkedin.com/in/d-koppenhagen" target="_blank">LinkedIn: d-koppenhagen</a></li>
+  <li><a href="https://xing.com/profile/Danny_Koppenhagen" target="_blank">Xing: Danny_Koppenhagen</a></li>
+  <li><a href="https://techhub.social/@k9n" target="_blank">Mastodon: techhub.social/&#64;k9n</a></li>
+</ul>
+
+<h2>Deferred Loading</h2>
+
+<p>When using deferred loading, you should keep in mind, that screenreaders probably don't notice changes once the deferred block is loaded when already in focus.</p>
+
+<h3>on timer</h3>
+
 <p aria-atomic="true" aria-live="polite">
 @defer (on timer(10000)) {
   <ngx-lipsum [config]="config"></ngx-lipsum>
@@ -13,3 +29,15 @@ <h1>Hello, meetup people 👋🏼</h1>
   Error...
 }
 </p>
+
+<h3>on viewport</h3>
+
+<div aria-atomic="true" aria-live="polite">
+@defer (on viewport) {
+  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w1nzeme4ix1lgw38epwb.jpeg" alt="a woman with her hands on her knees, appearing to be squinting at an object in the distance captioned When someone says they don't need web accessibility" loading="lazy" width="460" height="603">
+} @placeholder(minimum 3000) {
+  <div class="placeholder" tabindex="0"></div>
+}
+</div>
+
+
diff --git a/src/app/home-view/home-view.component.scss b/src/app/home-view/home-view.component.scss
@@ -11,3 +11,30 @@ p {
   margin-top: 1rem;
   font-size: 1.5rem;
 }
+
+ul {
+  font-size: 1.2rem;
+  list-style: square;
+
+  li {
+    line-height: 1.5;
+  }
+}
+
+
+.placeholder {
+  width: 460px;
+  height: 603px;
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: loading 1.5s infinite;
+}
+
+@keyframes loading {
+  0% {
+      background-position: 200% 0;
+  }
+  100% {
+      background-position: -200% 0;
+  }
+}
diff --git a/src/assets/meme.jpeg b/src/assets/meme.jpeg