Started a new draft post

ProgrammerAL · ProgrammerAL · commit fa8c80a6fae0 · 2025-04-26T15:22:44.000-04:00
diff --git a/src/ProgrammerAl.Site.Content/Posts/draft_20250426_SecurityIsLayersComic/comic.svg b/src/ProgrammerAl.Site.Content/Posts/draft_20250426_SecurityIsLayersComic/comic.svg
@@ -0,0 +1,224 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink" 
+    role="img"
+    aria-labelledby="titleId descId"
+    overflow="visible"
+    viewBox="0 0 800 300">
+    <title id="titleId">Security is done in Layers</title>
+    <desc id="descId"></desc>
+
+    <style>
+        :root {
+            --background-color: white;
+            --text-color: black;
+            --line-color: black;
+        }
+
+        @media (prefers-color-scheme: dark) {
+            :root {
+                --background-color: black;
+                --text-color: white;
+                --line-color: white;
+            }
+        }
+
+        .background {
+            fill: var(--background-color);
+        }
+
+        .debug-rect {
+            fill: green;
+        }
+
+        .signature-text { 
+            font-family: Verdana;
+            font-size: 8px;
+            fill: var(--text-color);
+        }
+
+        .section-title-text { 
+            font-family: Verdana;
+            font-size: 14px;
+            fill: var(--text-color);
+        }
+
+        .title-text { 
+            font-family: Verdana;
+            font-size: 24px;
+            font-weight: bold;
+            fill: var(--text-color);
+        }
+
+        .section-border { 
+            fill: var(--background-color);
+            stroke: var(--line-color);
+            stroke-width: 1.5;
+        }
+
+        .layer-circle-line {
+            fill: none;
+            stroke: var(--line-color);
+            stroke-width: 1.5;
+        }
+
+        .person { 
+            fill: var(--background-color);
+            stroke: var(--line-color);
+            stroke-width: 3;
+        }
+
+        .talking-line { 
+            fill: var(--background-color);
+            stroke: var(--line-color);
+            stroke-width: 0.6;
+        }
+
+        @keyframes talking-animation-1 {
+            0% {
+                visibility: hidden;
+            }
+            50% {
+                visibility: visible;
+            }
+        }
+
+        .talking-text-1 { 
+            font-family: Verdana;
+            font-size: 18px;
+            fill: var(--text-color);
+            visibility: hidden;
+            animation-delay: 3s;
+            animation: talking-animation-1 3s infinite;
+        }
+
+        .talking-text-2 { 
+            font-family: Verdana;
+            font-size: 18px;
+            fill: var(--text-color);
+            visibility: hidden;
+            animation-delay: 6s;
+            animation: talking-animation-1 3s infinite;
+        }
+
+        .request-text { 
+            font-family: Verdana;
+            font-size: 18px;
+            fill: var(--text-color);
+        }
+
+    </style>
+
+    <rect x="0" y="0" width="600" height="300" class="background">
+    </rect>
+
+    <!-- <rect x="0" y="0" width="800" height="300" class="debug-rect">
+    </rect> -->
+
+    <g>
+        <svg x="0" y="0">
+            <text x="150" y="25" class="title-text">Cybersecurity Best Practices: Layers</text>
+        </svg>
+    </g>
+
+    <!-- Panel 1 - Explanation -->
+    <g>
+        <svg x="10" y="30" width="200" height="560" >
+            <rect x="5" y="5" width="190" height="240" class="section-border">
+            </rect>
+            <text x="15" y="25" class="section-title-text">Security is like an onion</text>
+            <text x="50" y="40" class="section-title-text">It has layers</text>
+
+            <circle cx="95" cy="130" r="10" class="layer-circle-line" />
+            <circle cx="95" cy="130" r="20" class="layer-circle-line" />
+            <circle cx="95" cy="130" r="30" class="layer-circle-line" />
+            <circle cx="95" cy="130" r="40" class="layer-circle-line" />
+            <circle cx="95" cy="130" r="50" class="layer-circle-line" />
+            <circle cx="95" cy="130" r="60" class="layer-circle-line" />
+            <circle cx="95" cy="130" r="70" class="layer-circle-line" />
+            <circle cx="95" cy="130" r="80" class="layer-circle-line" />
+        </svg>
+    </g>
+
+    <!-- Panel 2 - Onions have layers -->
+    <g>
+        <svg x="210" y="30" width="200" height="560" >
+            <rect x="5" y="5" width="190" height="240" class="section-border">
+            </rect>
+            <text x="30" y="25" class="section-title-text">Ogres have layers</text>
+
+            <!-- Head -->
+            <ellipse cx="100" cy="140" rx="60" ry="80" class="person" />
+            
+            <!-- Eyes -->
+            <circle cx="80" cy="120" r="8" class="person" />
+            <circle cx="120" cy="120" r="8" class="person" />
+            
+            <!-- Mouth -->
+            <path d="M 70 170 Q 100 200, 130 170" class="person" />
+            
+            <!-- Left Ear -->
+            <path d="M 49 100, 30 70" class="person" />
+            <path d="M 55 89, 40 70" class="person" />
+            <circle cx="35" cy="65" r="10" class="person" />
+
+            <!-- Right Ear -->
+            <path d="M 146 90, 155 70" class="person" />
+            <path d="M 152 100, 165 70" class="person" />
+            <circle cx="161" cy="61" r="10" class="person" />
+        </svg>
+    </g>
+
+    <g>
+        <svg x="410" y="30" width="400" height="560" viewBox="0 0 400 560" clip-path="url(#clip)">
+            <defs>
+                <clipPath id="clip">
+                <rect width="387" height="247" rx="10"/>
+                </clipPath>
+            </defs>
+            <rect x="5" y="5" width="380" height="240" class="section-border">
+            </rect>
+            <text x="110" y="25" class="section-title-text">Logical Conclusion:</text>
+            <text x="30" y="40" class="section-title-text">The best cybersecurity professionals are ogres</text>
+
+            <!-- Head -->
+            <ellipse cx="100" cy="140" rx="60" ry="80" class="person" />
+            
+            <!-- Eyes -->
+            <circle cx="80" cy="120" r="8" class="person" />
+            <circle cx="120" cy="120" r="8" class="person" />
+            
+            <!-- Mouth -->
+            <path d="M 70 170 Q 100 140, 130 170" class="person" />
+            
+            <!-- Left Ear -->
+            <path d="M 49 100, 30 70" class="person" />
+            <path d="M 55 89, 40 70" class="person" />
+            <circle cx="35" cy="65" r="10" class="person" />
+
+            <!-- Right Ear -->
+            <path d="M 146 90, 155 70" class="person" />
+            <path d="M 152 100, 165 70" class="person" />
+            <circle cx="161" cy="61" r="10" class="person" />
+
+
+            <text x="0" y="0" class="request-text">
+                HTTP REQUEST
+                     <animateMotion 
+                        path="M 400 130 H 157 Q 200 200 200 400" 
+                        dur="2s"
+                        repeatCount="indefinite"/>
+            </text>
+
+            <text x="180" y="90" class="talking-text-1">
+                No! Bad Request!
+             </text>
+
+            <text x="160" y="105" class="talking-text-2">
+                Come back with a JWT!
+             </text>
+        </svg>
+    </g>
+
+    <text x="726" y="32" class="signature-text">@ProgrammerAL</text>
+
+</svg>
diff --git a/src/ProgrammerAl.Site.Content/Posts/draft_20250426_SecurityIsLayersComic/post.md b/src/ProgrammerAl.Site.Content/Posts/draft_20250426_SecurityIsLayersComic/post.md
@@ -0,0 +1,14 @@
+Title: "Updating Dependencies Comic"
+Published: 2024/12/01
+Tags: 
+- comic
+- humor
+---
+
+## Updating Dependencies
+
+Be honest, when was the last time you made sure all dependencies were updated? NuGets, NPMs, etc? It's bad for security (vulnerabilities become public knowledge, supply chain attacks), and it's bad for maintainability (more work when you do upgrade).
+
+Shameless self promotion. I made a .NET Tool to update dependency packages (among other things). It's detailed [in an older post here](/posts/20241103_CodeUpdater).
+
+I think we've all been in the above situation. Delaying an update to those dependencies because we know the current configuration "works". But that's just focusing on the feature. The feature works, but security and maintainability might already be broken and we don't even attempt to test it. Maybe in the new year we should all resolve to stay on top of updates. Hint hint, wink wink.
