seo

_posts/2024-01-19-angular-17-eine-renaissance/2024-01-19-angular-17-eine-renaissance.md

@@ -3,7 +3,7 @@ title: "Die Angular 17 Renaissance"
 description: “Ein Blogartikel über alle neuen Features und Updates in Angular 17, über Verbesserungen in Performance und Angular Developer Experience und die Angular Renaissance”
 author: "Lulëzim Ukaj"
 published_at: 2024-01-19 16:00:28.000000Z
-header_source: https://github.com/workshops-de/angular.de/blob/master/_posts/2024-01-19-angular-17-Eine-Renaissance/Header.jpg?raw=true
+header_source: https://raw.githubusercontent.com/workshops-de/angular.de/refs/heads/master/_posts/2024-01-19-angular-17-eine-renaissance/header.jpg
 header_image: header.jpg
 categories: "angular update"
 ---

_posts/2024-02-11-angular-hydration-kurz-erklaert/2024-02-11-angular-hydration-kurz-erklaert.md

@@ -31,7 +31,7 @@ Angular selbst definiert den Begriff in seiner Dokumentation wie folgt:
 <p class="left">
 <img
 style="max-width: 80%"
-src="https://github.com/workshops-de/angular.de/blob/master/_posts/2024-02-11-angular-hydration-kurz-erklaert/hydration.jpg" alt="Logo Angular Hydration"
+src="/shared/assets/img/placeholder-image.svg" alt="Logo Angular Hydration"
 class="lazy img-fluid img-rounded" data-src="hydration.jpg" data-srcset="hydration.jpg"
 />
 </p>
@@ -59,7 +59,7 @@ Um es kurz und in zwei Sätzen zu sagen. Beim Server-Side Rendering (SSR) ist es
 <p class="left">
 <img
 style="max-width:100%"
-src="https://github.com/workshops-de/angular.de/blob/master/_posts/2024-02-11-angular-hydration-kurz-erklaert/ssr.jpg" alt=""
+src="/shared/assets/img/placeholder-image.svg" alt=""
 class="lazy img-fluid img-rounded" data-src="ssr.jpg" data-srcset="ssr.jpg"
 />
 </p>
@@ -89,7 +89,7 @@ Zusammenfassend kann gesagt werden, SSR ist besonders nützlich für content-ori
 <p class="left">
 <img
 style="max-width:100%"
-src="https://github.com/workshops-de/angular.de/blob/master/_posts/2024-02-11-angular-hydration-kurz-erklaert/csr.jpg" alt=""
+src="/shared/assets/img/placeholder-image.svg" alt=""
 class="lazy img-fluid img-rounded" data-src="csr.jpg" data-srcset="csr.jpg"
 />
 </p>
@@ -121,7 +121,7 @@ Aber nach welchen Metriken wird eigentlich gemessen? Wann ist eine Webseite schn
 <p class="left">
 <img
 style="max-width:80%"
-src="https://github.com/workshops-de/angular.de/blob/master/_posts/2024-02-11-angular-hydration-kurz-erklaert/vitals.jpg" alt="Infografik Auflistung derWeb Core Vitals: Contentful Paint (LCP), dem First Input Delay (FID) und dem Cumulative Layout Shift (CLS)"
+src="/shared/assets/img/placeholder-image.svg" alt="Infografik Auflistung derWeb Core Vitals: Contentful Paint (LCP), dem First Input Delay (FID) und dem Cumulative Layout Shift (CLS)"
 class="lazy img-fluid img-rounded" data-src="vitals.jpg" data-srcset="vitals.jpg"
 />
 </p>
@@ -136,7 +136,7 @@ Der Fokus der Web Core Vitals (und damit haben diese auch den größten Einfluss
 <p class="left">
 <img
 style="max-width:80%"
-src="https://github.com/workshops-de/angular.de/blob/master/_posts/2024-02-11-angular-hydration-kurz-erklaert/largestcontentfulpaint.jpg" alt="Infografik Darstellung des Largest Contentful Paint am Beispiel der Webansicht für Instagram"
+src="/shared/assets/img/placeholder-image.svg" alt="Infografik Darstellung des Largest Contentful Paint am Beispiel der Webansicht für Instagram"
 class="lazy img-fluid img-rounded" data-src="largestcontentfulpaint.jpg" data-srcset="largestcontentfulpaint.jpg"
 />
 </p>
@@ -146,7 +146,7 @@ Der LCP ist quasi der erste Eindruck deiner Seite. Gemessen wird, wie lange es d
 <p class="left">
 <img
 style="max-width:80%"
-src="https://github.com/workshops-de/angular.de/blob/master/_posts/2024-02-11-angular-hydration-kurz-erklaert/cumulativeshift.jpg" alt="Infografik CLS: Button verschiebt sich nach unten durch verzögerte Einblendung von Inhalten in Webansicht"
+src="/shared/assets/img/placeholder-image.svg" alt="Infografik CLS: Button verschiebt sich nach unten durch verzögerte Einblendung von Inhalten in Webansicht"
 class="lazy img-fluid img-rounded" data-src="cumulativeshift.jpg" data-srcset="cumulativeshift.jpg"
 />
 </p>
@@ -162,7 +162,7 @@ Angular unterstützt serverseitiges Rendering (SSR) bereits seit einiger Zeit du
 <p class="left">
 <img
 style="max-width:80%"
-src="https://github.com/workshops-de/angular.de/blob/master/_posts/2024-02-11-angular-hydration-kurz-erklaert/gif-destructive-hydration.gif" alt="Prozesses der destruktiven Hydration als Gif"
+src="/shared/assets/img/placeholder-image.svg" alt="Prozesses der destruktiven Hydration als Gif"
 class="lazy img-fluid img-rounded" data-src="gif-destructive-hydration.gif" data-srcset="gif-destructive-hydration.gif"
 />
 </p>
@@ -184,7 +184,7 @@ Die Full App Non-Destructive Hydration hat genau da angesetzt, indem das bereits
 <p class="left">
 <img
 style="max-width:80%"
-src="https://github.com/workshops-de/angular.de/blob/master/_posts/2024-02-11-angular-hydration-kurz-erklaert/gif-full-hydration.gif" alt="Prozesses der non-dedstructive Hydration als Gif"
+src="/shared/assets/img/placeholder-image.svg" alt="Prozesses der non-dedstructive Hydration als Gif"
 class="lazy img-fluid img-rounded" data-src="gif-full-hydration.gif" data-srcset="gif-full-hydration.gif"
 />
 </p>
@@ -205,7 +205,7 @@ Gleichzeitig hat sich die partielle Hydration in der Webentwicklung etabliert. H
 <p class="left">
 <img
 style="max-width:80%"
-src="https://github.com/workshops-de/angular.de/blob/master/_posts/2024-02-11-angular-hydration-kurz-erklaert/gif-partial-hydration.gif" alt="Prozesses der partiellen Hydration als Gif"
+src="/shared/assets/img/placeholder-image.svg" alt="Prozesses der partiellen Hydration als Gif"
 class="lazy img-fluid img-rounded" data-src="gif-partial-hydration.gif" data-srcset="gif-partial-hydration.gif"
 />
 </p>

_posts/2024-03-15-webdave-im-gespraech-mit-juri-strumpflohner/2024-03-15-webdave-im-gespraech-mit-juri-strumpflohner.md

@@ -53,7 +53,7 @@ Nx funktioniert modular, sodass du nur die Features nutzen kannst, die du wirkli
 
 <img
 style="max-width: 80%"
-src="https://github.com/workshops-de/angular.de/blob/master/_posts/2024-03-15-webdave-im-gespraech-mit-juri-strumpflohner/infographic.jpg?raw=true" alt="Infographik zum Aufbau eines NX Workspaces"
+src="/shared/assets/img/placeholder-image.svg" alt="Infographik zum Aufbau eines NX Workspaces"
 class="lazy img-fluid img-rounded" data-src="infographic.jpg" data-srcset="infographic.jpg"
 />
 
@@ -135,7 +135,7 @@ Der Vorteil einer globalen Installation von NX ist, dass du Befehle für NX nich
 
 <img
 style="max-width: 40%"
-src="https://github.com/workshops-de/angular.de/blob/master/_posts/2024-03-15-webdave-im-gespraech-mit-juri-strumpflohner/profilepic.jpeg" alt="Portrait Juri Strumpflohner"
+src="/shared/assets/img/placeholder-image.svg" alt="Portrait Juri Strumpflohner"
 class="lazy img-fluid img-rounded" data-src="profilepic.jpg" data-srcset="profilepic.jpg"
 />
 

_posts/2024-05-02-angular-signal-inputs/2024-05-02-angular-signal-inputs.md

@@ -20,7 +20,7 @@ Mit einem Minor Update der Version 17 hat das Angular-Team ein neues Feature, [S
 <p class="left">
 <img
 style="max-width: 80%"
-src="https://github.com/workshops-de/angular.de/blob/master/_posts/2024-05-02-angular-signal-inputs/2.jpg" alt="Infografik, die den Data Flow von einer Parentkomponente zur Childkomponente darstellt"
+src="/shared/assets/img/placeholder-image.svg" alt="Infografik, die den Data Flow von einer Parentkomponente zur Childkomponente darstellt"
 class="lazy img-fluid img-rounded" data-src="2.jpg" data-srcset="2.jpg"
 />
 </p>
@@ -34,7 +34,7 @@ Um das Ganze verständlicher zu machen, betrachten wir ein einfaches Beispiel:
 <p class="left">
 <img
 style="max-width: 80%"
-src="https://github.com/workshops-de/angular.de/blob/master/_posts/2024-05-02-angular-signal-inputs/1.jpg" alt="Grafische Darstellung einer Grußkarten Web-Anwendung bestehend aus zwei select-Elementen und einer Textbox"
+src="/shared/assets/img/placeholder-image.svg" alt="Grafische Darstellung einer Grußkarten Web-Anwendung bestehend aus zwei select-Elementen und einer Textbox"
 class="lazy img-fluid img-rounded" data-src="1.jpg" data-srcset="1.jpg"
 />
 </p>

_posts/2024-06-11-angular-18-die-renaissance-geht-weiter/2024-06-11-angular-18-die-renaissance-geht-weiter.md

@@ -45,7 +45,7 @@ Das Ganze könnt ihr euch zusammen mit Webdave anschauen! Hier ist der Link zum
 <p class="left">
 <img
 style="max-width: 80%"
-src="https://github.com/workshops-de/angular.de/blob/master/_posts/2024-06-11-angular-18-die-renaissance-geht-weiter/zoneless.jpg" alt="Illustration von Händen, die ein leeres Plakat halten mit dem Zoneless-Logo"
+src="/shared/assets/img/placeholder-image.svg" alt="Illustration von Händen, die ein leeres Plakat halten mit dem Zoneless-Logo"
 class="lazy img-fluid img-rounded" data-src="zoneless.jpg" data-srcset="zoneless.jpg"
 />
 </p>
@@ -139,7 +139,7 @@ export class SearchComponent {
 <p class="left">
 <img
 style="max-width: 80%"
-src="https://github.com/workshops-de/angular.de/blob/master/_posts/2024-06-11-angular-18-die-renaissance-geht-weiter/hydration.jpg" alt="Illustration von Händen, die ein leeres Plakat halten mit dem Hydration-Logo"
+src="/shared/assets/img/placeholder-image.svg" alt="Illustration von Händen, die ein leeres Plakat halten mit dem Hydration-Logo"
 class="lazy img-fluid img-rounded" data-src="hydration.jpg" data-srcset="hydration.jpg"
 />
 </p>
@@ -161,7 +161,7 @@ Ein Update gab es auch für den i18n Hydration Support. I18n ist ein Numeronym u
 <p class="left">
 <img
 style="max-width: 80%"
-src="https://github.com/workshops-de/angular.de/blob/master/_posts/2024-06-11-angular-18-die-renaissance-geht-weiter/wiz.jpg" alt="Illustration von Händen, die ein leeres Plakat halten mit dem Wiz-Logo"
+src="/shared/assets/img/placeholder-image.svg" alt="Illustration von Händen, die ein leeres Plakat halten mit dem Wiz-Logo"
 class="lazy img-fluid img-rounded" data-src="wiz.jpg" data-srcset="wiz.jpg"
 />
 </p>
@@ -187,7 +187,7 @@ bootstrapApplication(App, {
 <p class="left">
 <img
 style="max-width: 80%"
-src="https://github.com/workshops-de/angular.de/blob/master/_posts/2024-06-11-angular-18-die-renaissance-geht-weiter/angulardev.jpg" alt="Illustration von Händen, die ein leeres Plakat halten mit dem AngularDev-Logo"
+src="/shared/assets/img/placeholder-image.svg" alt="Illustration von Händen, die ein leeres Plakat halten mit dem AngularDev-Logo"
 class="lazy img-fluid img-rounded" data-src="angulardev.jpg" data-srcset="angulardev.jpg"
 />
 </p>
@@ -203,7 +203,7 @@ class="lazy img-fluid img-rounded" data-src="angulardev.jpg" data-srcset="angula
 <p class="left">
 <img
 style="max-width: 80%"
-src="https://github.com/workshops-de/angular.de/blob/master/_posts/2024-06-11-angular-18-die-renaissance-geht-weiter/material.jpg" alt="Illustration von Händen, die ein leeres Plakat halten mit dem Material-Logo"
+src="/shared/assets/img/placeholder-image.svg" alt="Illustration von Händen, die ein leeres Plakat halten mit dem Material-Logo"
 class="lazy img-fluid img-rounded" data-src="material.jpg" data-srcset="material.jpg"
 />
 </p>
@@ -261,7 +261,7 @@ Für Unternehmen gibt es nun das Early Access Programm. Wer daran teilnehmen mö
 <p class="left">
 <img
 style="max-width: 80%"
-src="https://github.com/workshops-de/angular.de/blob/master/_posts/2024-06-11-angular-18-die-renaissance-geht-weiter/firebase.jpg" alt="Illustration von Händen, die ein leeres Plakat halten mit dem Firebase-Logo"
+src="/shared/assets/img/placeholder-image.svg" alt="Illustration von Händen, die ein leeres Plakat halten mit dem Firebase-Logo"
 class="lazy img-fluid img-rounded" data-src="firebase.jpg" data-srcset="firebase.jpg"
 />
 </p>
@@ -281,7 +281,7 @@ Mehr Informationen gibt es dazu [hier](https://firebase.blog/posts/2024/05/intro
 <p class="left">
 <img
 style="max-width: 80%"
-src="https://github.com/workshops-de/angular.de/blob/master/_posts/2024-06-11-angular-18-die-renaissance-geht-weiter/ngde.jpg" alt="Illustration von Händen, die ein leeres Plakat halten mit dem NG-DE Logo"
+src="/shared/assets/img/placeholder-image.svg" alt="Illustration von Händen, die ein leeres Plakat halten mit dem NG-DE Logo"
 class="lazy img-fluid img-rounded" data-src="ngde.jpg" data-srcset="ngde.jpg"
 />
 </p>

_posts/2024-06-18-open-community-marvin-heilemann/2024-06-18-open-community-marvin-heilemann.md

@@ -123,7 +123,7 @@ Abweichungen können entstehen, je nachdem in welchem Browser getestet oder Ger
 <p class="left">
     <img
         style="max-width: 80%"
-        src="https://github.com/workshops-de/angular.de/blob/master/_posts/2024-06-11-angular-18-die-renaissance-geht-weiter/szenario1typea.jpg" alt="Screenshot aus den Angular DevTools Profiler, zeigt die Initial Loading Time - 15ms"
+        src="/shared/assets/img/placeholder-image.svg" alt="Screenshot aus den Angular DevTools Profiler, zeigt die Initial Loading Time - 15ms"
         class="lazy img-fluid img-rounded" data-src="szenario1typea.jpg" data-srcset="szenario1typea.jpg"
     />
     <br>
@@ -134,7 +134,7 @@ Abweichungen können entstehen, je nachdem in welchem Browser getestet oder Ger
 <p class="left">
     <img
         style="max-width: 80%"
-        src="https://github.com/workshops-de/angular.de/blob/master/_posts/2024-06-11-angular-18-die-renaissance-geht-weiter/szenario1typeb.jpg" alt="Screenshot aus den Angular DevTools Profiler, zeigt die Initial Loading Time - 14ms"
+        src="/shared/assets/img/placeholder-image.svg" alt="Screenshot aus den Angular DevTools Profiler, zeigt die Initial Loading Time - 14ms"
         class="lazy img-fluid img-rounded" data-src="szenario1typeb.jpg" data-srcset="szenario1typeb.jpg"
     />
     <br>
@@ -151,7 +151,7 @@ Darüber hinaus sieht man, dass beide Initials so gut wie gleich sind, was die F
 <p class="left">
     <img
         style="max-width: 80%"
-        src="https://github.com/workshops-de/angular.de/blob/master/_posts/2024-06-11-angular-18-die-renaissance-geht-weiter/szenario2typea.jpg" alt="Screenshot aus den Angular DevTools Profiler, zeigt die Initial Loading Time - 17ms"
+        src="/shared/assets/img/placeholder-image.svg" alt="Screenshot aus den Angular DevTools Profiler, zeigt die Initial Loading Time - 17ms"
         class="lazy img-fluid img-rounded" data-src="szenario2typea.jpg" data-srcset="szenario2typea.jpg"
     />
     <br>
@@ -162,7 +162,7 @@ Darüber hinaus sieht man, dass beide Initials so gut wie gleich sind, was die F
 <p class="left">
     <img
         style="max-width: 80%"
-        src="https://github.com/workshops-de/angular.de/blob/master/_posts/2024-06-11-angular-18-die-renaissance-geht-weiter/szenario2typeb.jpg" alt="Screenshot aus den Angular DevTools Profiler, zeigt die Initial Loading Time - 12ms"
+        src="/shared/assets/img/placeholder-image.svg" alt="Screenshot aus den Angular DevTools Profiler, zeigt die Initial Loading Time - 12ms"
         class="lazy img-fluid img-rounded" data-src="szenario2typeb.jpg" data-srcset="szenario2typeb.jpg"
     />
     <br>
@@ -179,7 +179,7 @@ Hier sieht man ganz gut, dass Type A ein wenig schlechter performt als Type B. D
 <p class="left">
     <img
         style="max-width: 80%"
-        src="https://github.com/workshops-de/angular.de/blob/master/_posts/2024-06-11-angular-18-die-renaissance-geht-weiter/szenario3typea.jpg" alt="Screenshot aus den Angular DevTools Profiler, zeigt die Initial Loading Time - 4ms"
+        src="/shared/assets/img/placeholder-image.svg" alt="Screenshot aus den Angular DevTools Profiler, zeigt die Initial Loading Time - 4ms"
         class="lazy img-fluid img-rounded" data-src="szenario3typea.jpg" data-srcset="szenario3typea.jpg"
     />
     <br>
@@ -190,7 +190,7 @@ Hier sieht man ganz gut, dass Type A ein wenig schlechter performt als Type B. D
 <p class="left">
     <img
         style="max-width: 80%"
-        src="https://github.com/workshops-de/angular.de/blob/master/_posts/2024-06-11-angular-18-die-renaissance-geht-weiter/szenario3typeb.jpg" alt="Screenshot aus den Angular DevTools Profiler, zeigt die Initial Loading Time - 3ms"
+        src="/shared/assets/img/placeholder-image.svg" alt="Screenshot aus den Angular DevTools Profiler, zeigt die Initial Loading Time - 3ms"
         class="lazy img-fluid img-rounded" data-src="szenario3typeb.jpg" data-srcset="szenario3typeb.jpg"
     />
     <br>

_posts/2024-08-26-webdave-im-gespraech-mit-mark-thompson/2024-08-26-webdave-im-gespraech-mit-mark-thompson.md

@@ -50,7 +50,7 @@ Ob Junior oder Senior, Marks Ratschläge bieten wertvolle Orientierung für dein
 
 <img
 style="max-width: 40%"
-src="https://github.com/workshops-de/angular.de/blob/master/_posts/2024-08-26-webdave-im-gespraech-mit-mark-thompson/profilepic.jpg" alt="Portrait Mark Thompson"
+src="/shared/assets/img/placeholder-image.svg" alt="Portrait Mark Thompson"
 class="lazy img-fluid img-rounded" data-src="profilepic.jpg" data-srcset="profilepic.jpg"
 />