deploy: 0c401d0

cheatsheets/web/svg.html

@@ -262,58 +262,6 @@ <h3 id="svg-as-a-background-image">SVG as a Background Image</h3>
   </li>
 </ul>
 
-<h3 id="using-javascript">Using JavaScript</h3>
-
-<ul>
-  <li><strong>How to Use</strong>:
-    <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"svg-container"</span><span class="nt">&gt;&lt;/div&gt;</span>
-<span class="nt">&lt;script&gt;</span>
-  <span class="nf">fetch</span><span class="p">(</span><span class="dl">'</span><span class="s1">image.svg</span><span class="dl">'</span><span class="p">)</span>
-    <span class="p">.</span><span class="nf">then</span><span class="p">(</span><span class="nx">response</span> <span class="o">=&gt;</span> <span class="nx">response</span><span class="p">.</span><span class="nf">text</span><span class="p">())</span>
-    <span class="p">.</span><span class="nf">then</span><span class="p">(</span><span class="nx">data</span> <span class="o">=&gt;</span> <span class="p">{</span>
-      <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">svg-container</span><span class="dl">'</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">data</span><span class="p">;</span>
-    <span class="p">});</span>
-<span class="nt">&lt;/script&gt;</span>
-</code></pre></div>    </div>
-    <p>Using async-await:</p>
-    <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;script </span><span class="na">type=</span><span class="s">"module"</span><span class="nt">&gt;</span>
-<span class="k">async</span> <span class="kd">function</span> <span class="nf">fetchSVG</span><span class="p">(</span><span class="nx">url</span><span class="p">)</span> <span class="p">{</span>
-  <span class="kd">const</span> <span class="nx">response</span> <span class="o">=</span> <span class="k">await</span> <span class="nf">fetch</span><span class="p">(</span><span class="nx">url</span><span class="p">);</span>
-  <span class="k">if </span><span class="p">(</span><span class="o">!</span><span class="nx">response</span><span class="p">.</span><span class="nx">ok</span><span class="p">)</span> <span class="p">{</span>
-    <span class="k">throw</span> <span class="k">new</span> <span class="nc">Error</span><span class="p">(</span><span class="dl">'</span><span class="s1">Network response was not ok</span><span class="dl">'</span><span class="p">);</span>
-  <span class="p">}</span>
-  <span class="k">return</span> <span class="nx">response</span><span class="p">.</span><span class="nf">text</span><span class="p">();</span>
-<span class="p">}</span>
-
-<span class="kd">const</span> <span class="nx">svgContainer</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">svg-container</span><span class="dl">'</span><span class="p">);</span>
-
-<span class="k">async</span> <span class="kd">function</span> <span class="nf">loadSVG</span><span class="p">()</span> <span class="p">{</span>
-  <span class="k">try</span> <span class="p">{</span>
-    <span class="kd">const</span> <span class="nx">data</span> <span class="o">=</span> <span class="k">await</span> <span class="nf">fetchSVG</span><span class="p">(</span><span class="dl">'</span><span class="s1">image.svg</span><span class="dl">'</span><span class="p">);</span>
-    <span class="nx">svgContainer</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">data</span><span class="p">;</span>
-  <span class="p">}</span> <span class="k">catch </span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
-    <span class="nx">console</span><span class="p">.</span><span class="nf">error</span><span class="p">(</span><span class="dl">'</span><span class="s1">Error loading SVG:</span><span class="dl">'</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
-  <span class="p">}</span>
-<span class="p">}</span>
-
-<span class="nf">loadSVG</span><span class="p">();</span>
-<span class="nt">&lt;/script&gt;</span>
-</code></pre></div>    </div>
-  </li>
-  <li><strong>Pros</strong>:
-    <ul>
-      <li>Allows dynamic SVG loading.</li>
-      <li>Can manipulate SVG after loading.</li>
-    </ul>
-  </li>
-  <li><strong>Cons</strong>:
-    <ul>
-      <li>More complex implementation.</li>
-      <li>Requires JavaScript to be enabled.</li>
-    </ul>
-  </li>
-</ul>
-
 <h2 id="set-color">Set color</h2>
 
 <p>How to change the color if and SVG is defined directly in the HTML (not loaded externally).</p>

cheatsheets/web/svg.md

@@ -70,51 +70,6 @@ Choose the method that best fits your project needs based on control, complexity
 - **Cons**:
   - Limited control over SVG properties.
   - Cannot be manipulated with scripts.
-
-### Using JavaScript
-
-- **How to Use**:
-  ```html
-  <div id="svg-container"></div>
-  <script>
-    fetch('image.svg')
-      .then(response => response.text())
-      .then(data => {
-        document.getElementById('svg-container').innerHTML = data;
-      });
-  </script>
-  ```
-  Using async-await:
-  ```html
-  <script type="module">
-  async function fetchSVG(url) {
-    const response = await fetch(url);
-    if (!response.ok) {
-      throw new Error('Network response was not ok');
-    }
-    return response.text();
-  }
-
-  const svgContainer = document.getElementById('svg-container');
-
-  async function loadSVG() {
-    try {
-      const data = await fetchSVG('image.svg');
-      svgContainer.innerHTML = data;
-    } catch (error) {
-      console.error('Error loading SVG:', error);
-    }
-  }
-
-  loadSVG();
-  </script>
-  ```
-- **Pros**:
-  - Allows dynamic SVG loading.
-  - Can manipulate SVG after loading.
-- **Cons**:
-  - More complex implementation.
-  - Requires JavaScript to be enabled.
 
 
 ## Set color

feed.xml

@@ -1 +1 @@
-<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="4.3.3">Jekyll</generator><link href="https://michaelcurrin.github.io/dev-cheatsheets/feed.xml" rel="self" type="application/atom+xml" /><link href="https://michaelcurrin.github.io/dev-cheatsheets/" rel="alternate" type="text/html" /><updated>2024-08-28T14:02:44+00:00</updated><id>https://michaelcurrin.github.io/dev-cheatsheets/feed.xml</id><title type="html">Dev Cheatsheets</title><subtitle>A collection of code snippets and CLI guides for quick and easy reference while coding</subtitle><author><name>Michael Currin</name></author></feed>
+<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="4.3.3">Jekyll</generator><link href="https://michaelcurrin.github.io/dev-cheatsheets/feed.xml" rel="self" type="application/atom+xml" /><link href="https://michaelcurrin.github.io/dev-cheatsheets/" rel="alternate" type="text/html" /><updated>2024-08-28T14:03:59+00:00</updated><id>https://michaelcurrin.github.io/dev-cheatsheets/feed.xml</id><title type="html">Dev Cheatsheets</title><subtitle>A collection of code snippets and CLI guides for quick and easy reference while coding</subtitle><author><name>Michael Currin</name></author></feed>