From 51b237dd8ee670011359a0b97129a0bd4ba23482 Mon Sep 17 00:00:00 2001
From: Leyla Becker <git@jan-leila.com>
Date: Wed, 18 Feb 2026 15:31:31 -0600
Subject: [PATCH] feat: continued to write page

---
 .../remove-tracking-params-from-links.md      | 292 ++++++++----------
 1 file changed, 135 insertions(+), 157 deletions(-)

diff --git a/posts/drafts/remove-tracking-params-from-links.md b/posts/drafts/remove-tracking-params-from-links.md
index b91ea11..0505727 100644
--- a/posts/drafts/remove-tracking-params-from-links.md
+++ b/posts/drafts/remove-tracking-params-from-links.md
@@ -1,6 +1,5 @@
-- you should be removing tracking information from all of your links.
 
-parts of a url:
+## What is a Link/URL
 
 <style>
 .url-container {
@@ -51,6 +50,13 @@ parts of a url:
   font-size: 0.9em;
 }
 
+.url-required {
+  color: #dc2626;
+  font-size: 0.7em;
+  vertical-align: super;
+  font-weight: bold;
+}
+
 .url-legend-color {
   width: 1em;
   height: 1em;
@@ -62,20 +68,14 @@ parts of a url:
 .url-part-protocol { color: #db2777; }
 .url-legend-protocol { background: #db2777; }
 
-.url-part-subdomain { color: #0891b2; }
-.url-legend-subdomain { background: #0891b2; }
+.url-part-hostname { color: #2563eb; }
+.url-legend-hostname { background: #2563eb; }
 
-.url-part-domain { color: #2563eb; }
-.url-legend-domain { background: #2563eb; }
+.url-part-port { color: #0891b2; }
+.url-legend-port { background: #0891b2; }
 
-.url-part-tld { color: #16a34a; }
-.url-legend-tld { background: #16a34a; }
-
-.url-part-port { color: #ca8a04; }
-.url-legend-port { background: #ca8a04; }
-
-.url-part-path { color: #ea580c; }
-.url-legend-path { background: #ea580c; }
+.url-part-path { color: #16a34a; }
+.url-legend-path { background: #16a34a; }
 
 .url-part-query { color: #dc2626; }
 .url-legend-query { background: #dc2626; }
@@ -99,9 +99,7 @@ parts of a url:
 
 /* When hovering URL parts, highlight matching legend items */
 .url-container:has(.url-example [data-part="protocol"]:hover) .url-legend [data-part="protocol"],
-.url-container:has(.url-example [data-part="subdomain"]:hover) .url-legend [data-part="subdomain"],
-.url-container:has(.url-example [data-part="domain"]:hover) .url-legend [data-part="domain"],
-.url-container:has(.url-example [data-part="tld"]:hover) .url-legend [data-part="tld"],
+.url-container:has(.url-example [data-part="hostname"]:hover) .url-legend [data-part="hostname"],
 .url-container:has(.url-example [data-part="port"]:hover) .url-legend [data-part="port"],
 .url-container:has(.url-example [data-part="path"]:hover) .url-legend [data-part="path"],
 .url-container:has(.url-example [data-part="query"]:hover) .url-legend [data-part="query"],
@@ -119,9 +117,7 @@ parts of a url:
 
 /* When hovering legend items, highlight matching URL parts */
 .url-container:has(.url-legend [data-part="protocol"]:hover) .url-example [data-part="protocol"],
-.url-container:has(.url-legend [data-part="subdomain"]:hover) .url-example [data-part="subdomain"],
-.url-container:has(.url-legend [data-part="domain"]:hover) .url-example [data-part="domain"],
-.url-container:has(.url-legend [data-part="tld"]:hover) .url-example [data-part="tld"],
+.url-container:has(.url-legend [data-part="hostname"]:hover) .url-example [data-part="hostname"],
 .url-container:has(.url-legend [data-part="port"]:hover) .url-example [data-part="port"],
 .url-container:has(.url-legend [data-part="path"]:hover) .url-example [data-part="path"],
 .url-container:has(.url-legend [data-part="query"]:hover) .url-example [data-part="query"],
@@ -138,34 +134,24 @@ parts of a url:
 
 <div class="url-container">
 <div class="url-example" role="figure" aria-labelledby="url-example-caption">
-  <span class="url-part-protocol" aria-describedby="legend-protocol" data-part="protocol">https://</span><span class="url-part-subdomain" aria-describedby="legend-subdomain" data-part="subdomain">www.</span><span class="url-part-domain" aria-describedby="legend-domain" data-part="domain">example</span><span class="url-part-tld" aria-describedby="legend-tld" data-part="tld">.com</span><span class="url-part-port" aria-describedby="legend-port" data-part="port">:443</span><span class="url-part-path" aria-describedby="legend-path" data-part="path">/products/shoes</span><span class="url-part-query" aria-describedby="legend-query" data-part="query">?utm_source=facebook&utm_campaign=summer_sale&fbclid=abc123</span><span class="url-part-fragment" aria-describedby="legend-fragment" data-part="fragment">#reviews</span>
+  <span class="url-part-protocol" aria-describedby="legend-protocol" data-part="protocol">https://</span><span class="url-part-hostname" aria-describedby="legend-hostname" data-part="hostname">www.example.com</span><span class="url-part-port" aria-describedby="legend-port" data-part="port">:443</span><span class="url-part-path" aria-describedby="legend-path" data-part="path">/products/shoes</span><span class="url-part-query" aria-describedby="legend-query" data-part="query">?utm_source=facebook&utm_campaign=summer_sale&fbclid=abc123</span><span class="url-part-fragment" aria-describedby="legend-fragment" data-part="fragment">#reviews</span>
 </div>
 
 <div class="url-legend" role="list" aria-label="URL component legend">
   <div class="url-legend-item" role="listitem" id="legend-protocol" data-part="protocol">
     <span class="url-legend-color url-legend-protocol" aria-hidden="true"></span>
-    <span class="url-legend-label">Protocol</span>
-    <span class="url-legend-desc">How to communicate with the server (https is encrypted, http is not)</span>
+    <span class="url-legend-label">Protocol<span class="url-required">*</span></span>
+    <span class="url-legend-desc">What protocol to use to communicate with the server. (https, ftp, etc...)</span>
   </div>
-  <div class="url-legend-item" role="listitem" id="legend-subdomain" data-part="subdomain">
-    <span class="url-legend-color url-legend-subdomain" aria-hidden="true"></span>
-    <span class="url-legend-label">Subdomain</span>
-    <span class="url-legend-desc">A subdivision of the main domain, often used for different services</span>
-  </div>
-  <div class="url-legend-item" role="listitem" id="legend-domain" data-part="domain">
-    <span class="url-legend-color url-legend-domain" aria-hidden="true"></span>
-    <span class="url-legend-label">Domain</span>
-    <span class="url-legend-desc">The human-readable name that identifies the website</span>
-  </div>
-  <div class="url-legend-item" role="listitem" id="legend-tld" data-part="tld">
-    <span class="url-legend-color url-legend-tld" aria-hidden="true"></span>
-    <span class="url-legend-label">TLD</span>
-    <span class="url-legend-desc">Top-Level Domain, the suffix like .com, .org, or .net</span>
+  <div class="url-legend-item" role="listitem" id="legend-hostname" data-part="hostname">
+    <span class="url-legend-color url-legend-hostname" aria-hidden="true"></span>
+    <span class="url-legend-label">Hostname<span class="url-required">*</span></span>
+    <span class="url-legend-desc">Name of the website used to look up the IP address of the server</span>
   </div>
   <div class="url-legend-item" role="listitem" id="legend-port" data-part="port">
     <span class="url-legend-color url-legend-port" aria-hidden="true"></span>
     <span class="url-legend-label">Port</span>
-    <span class="url-legend-desc">Network port number (443 is default for HTTPS, 80 for HTTP)</span>
+    <span class="url-legend-desc">Network port to connect to (default to 443 for https, and 80 for http)</span>
   </div>
   <div class="url-legend-item" role="listitem" id="legend-path" data-part="path">
     <span class="url-legend-color url-legend-path" aria-hidden="true"></span>
@@ -175,7 +161,7 @@ parts of a url:
   <div class="url-legend-item" role="listitem" id="legend-query" data-part="query">
     <span class="url-legend-color url-legend-query" aria-hidden="true"></span>
     <span class="url-legend-label">Query Params</span>
-    <span class="url-legend-desc">Key-value pairs that pass data to the page  often used for tracking</span>
+    <span class="url-legend-desc">Key-value pairs that pass data to the page</span>
   </div>
   <div class="url-legend-item" role="listitem" id="legend-fragment" data-part="fragment">
     <span class="url-legend-color url-legend-fragment" aria-hidden="true"></span>
@@ -206,9 +192,11 @@ parts of a url:
 })();
 </script>
 
-## Understanding Query Parameters
+## Query Parameters
 
-Query parameters are the part of a URL that comes after the `?`. They consist of key-value pairs that pass data to the page. Let's break down how they work:
+Query parameters are a part of a URL that are used to encode some data about a page in its url. They are intended to be optional values but *sometimes* ~~most of the time~~ developers don't actually read or remember technical documentation and RFC's that outline how technologies are supposed to be used and put mandatory data in the optional parameters. [^1]
+
+[^1]: While the query parameters are not directly defined as optional they are not a part of the main path which should on its own define a unique stable path to any given element. If a query parameter is needed to fetch a specific resource then the path is by definition not uniquely identifying that resource.
 
 <style>
 .query-container {
@@ -294,39 +282,27 @@ Query parameters are the part of a URL that comes after the `?`. They consist of
   transition: box-shadow 0.2s, background 0.2s;
 }
 
-.query-container.hovering .query-param-group.highlighted {
-  border-radius: 0.25em;
-  box-shadow: 
-    inset 0 0 0.5em 0.25em rgba(0, 0, 0, 0.06),
-    0 0 0.75rem 0.5rem rgba(0, 0, 0, 0.06),
-    0 0 1.25rem 1rem rgba(0, 0, 0, 0.04),
-    0 0 2rem 1.5rem rgba(0, 0, 0, 0.02);
-}
-
-/* Base: dim everything when hovering (NOT param-groups, only their children) */
-.query-container.hovering .query-example > span[data-qpart],
-.query-container.hovering .query-param-group > span[data-qpart],
-.query-container.hovering .query-legend-item {
+/* Cross-highlighting using :has() - no JavaScript needed */
+/* Base: dim everything when hovering any interactive element */
+.query-container:has([data-qpart]:hover) [data-qpart],
+.query-container:has([data-qparam]:hover) [data-qpart],
+.query-container:has([data-qpart]:hover) .query-legend-item,
+.query-container:has([data-qparam]:hover) .query-legend-item {
   opacity: 0.3;
 }
 
-/* Highlighted spans in URL */
-.query-container.hovering .query-example span[data-qpart].highlighted {
-  opacity: 1 !important;
-  border-radius: 0.25em;
-  box-shadow: 
-    inset 0 0 0.5em 0.25em rgba(0, 0, 0, 0.06),
-    0 0 0.75rem 0.5rem rgba(0, 0, 0, 0.06),
-    0 0 1.25rem 1rem rgba(0, 0, 0, 0.04),
-    0 0 2rem 1.5rem rgba(0, 0, 0, 0.02);
-}
-
-/* Spans inside highlighted param groups should have full opacity */
-.query-container.hovering .query-param-group.highlighted > span[data-qpart] {
+/* Keep hovered element visible */
+.query-container [data-qpart]:hover,
+.query-container [data-qparam]:hover {
   opacity: 1 !important;
 }
 
-.query-container .query-legend-item.highlighted {
+/* When hovering URL structure parts, highlight matching legend items */
+.query-container:has(.query-example [data-qpart="delimiter"]:hover) .query-legend [data-qpart="delimiter"],
+.query-container:has(.query-example [data-qpart="key"]:hover) .query-legend [data-qpart="key"],
+.query-container:has(.query-example [data-qpart="equals"]:hover) .query-legend [data-qpart="equals"],
+.query-container:has(.query-example [data-qpart="value"]:hover) .query-legend [data-qpart="value"],
+.query-container:has(.query-example [data-qpart="separator"]:hover) .query-legend [data-qpart="separator"] {
   opacity: 1 !important;
   padding: 0.5em 0.75em;
   margin: -0.5em -0.75em;
@@ -338,6 +314,55 @@ Query parameters are the part of a URL that comes after the `?`. They consist of
     0 0 2rem 1.5rem rgba(0, 0, 0, 0.02);
 }
 
+/* When hovering URL parameter groups/spans, highlight matching parameter legend items */
+.query-container:has(.query-example [data-qparam="size"]:hover) .query-legend [data-qparam="size"],
+.query-container:has(.query-example [data-qparam="color"]:hover) .query-legend [data-qparam="color"],
+.query-container:has(.query-example [data-qparam="utm"]:hover) .query-legend [data-qparam="utm"] {
+  opacity: 1 !important;
+  padding: 0.5em 0.75em;
+  margin: -0.5em -0.75em;
+  border-radius: 0.5em;
+  box-shadow: 
+    inset 0 0 0.5em 0.25em rgba(0, 0, 0, 0.06),
+    0 0 0.75rem 0.5rem rgba(0, 0, 0, 0.06),
+    0 0 1.25rem 1rem rgba(0, 0, 0, 0.04),
+    0 0 2rem 1.5rem rgba(0, 0, 0, 0.02);
+}
+
+/* When hovering legend structure items, highlight matching URL parts */
+.query-container:has(.query-legend [data-qpart="delimiter"]:hover) .query-example [data-qpart="delimiter"],
+.query-container:has(.query-legend [data-qpart="key"]:hover) .query-example [data-qpart="key"],
+.query-container:has(.query-legend [data-qpart="equals"]:hover) .query-example [data-qpart="equals"],
+.query-container:has(.query-legend [data-qpart="value"]:hover) .query-example [data-qpart="value"],
+.query-container:has(.query-legend [data-qpart="separator"]:hover) .query-example [data-qpart="separator"] {
+  opacity: 1 !important;
+  border-radius: 0.25em;
+  box-shadow: 
+    inset 0 0 0.5em 0.25em rgba(0, 0, 0, 0.06),
+    0 0 0.75rem 0.5rem rgba(0, 0, 0, 0.06),
+    0 0 1.25rem 1rem rgba(0, 0, 0, 0.04),
+    0 0 2rem 1.5rem rgba(0, 0, 0, 0.02);
+}
+
+/* When hovering legend parameter items, highlight matching param groups AND their children */
+.query-container:has(.query-legend [data-qparam="size"]:hover) .query-example .query-param-group[data-qparam="size"],
+.query-container:has(.query-legend [data-qparam="color"]:hover) .query-example .query-param-group[data-qparam="color"],
+.query-container:has(.query-legend [data-qparam="utm"]:hover) .query-example .query-param-group[data-qparam="utm"] {
+  border-radius: 0.25em;
+  box-shadow: 
+    inset 0 0 0.5em 0.25em rgba(0, 0, 0, 0.06),
+    0 0 0.75rem 0.5rem rgba(0, 0, 0, 0.06),
+    0 0 1.25rem 1rem rgba(0, 0, 0, 0.04),
+    0 0 2rem 1.5rem rgba(0, 0, 0, 0.02);
+}
+
+/* Ensure children of highlighted param groups are visible */
+.query-container:has(.query-legend [data-qparam="size"]:hover) .query-example .query-param-group[data-qparam="size"] > span,
+.query-container:has(.query-legend [data-qparam="color"]:hover) .query-example .query-param-group[data-qparam="color"] > span,
+.query-container:has(.query-legend [data-qparam="utm"]:hover) .query-example .query-param-group[data-qparam="utm"] > span {
+  opacity: 1 !important;
+}
+
 .query-legend-section {
   margin-top: 1em;
   padding-top: 0.75em;
@@ -365,7 +390,7 @@ Query parameters are the part of a URL that comes after the `?`. They consist of
 
 <div class="query-container" id="query-container">
 <div class="query-example" role="figure" aria-label="Query parameter example">
-  <span class="query-part-delimiter" data-qpart="delimiter">?</span><span class="query-param-group" data-qparam="size"><span class="query-part-key" data-qpart="key" data-qparam="size">size</span><span class="query-part-equals" data-qpart="equals" data-qparam="size">=</span><span class="query-part-value" data-qpart="value" data-qparam="size">medium</span></span><span class="query-part-separator" data-qpart="separator">&</span><span class="query-param-group" data-qparam="color"><span class="query-part-key" data-qpart="key" data-qparam="color">color</span><span class="query-part-equals" data-qpart="equals" data-qparam="color">=</span><span class="query-part-value" data-qpart="value" data-qparam="color">light%20blue</span></span><span class="query-part-separator" data-qpart="separator">&</span><span class="query-param-group" data-qparam="utm"><span class="query-part-key" data-qpart="key" data-qparam="utm">utm_source</span><span class="query-part-equals" data-qpart="equals" data-qparam="utm">=</span><span class="query-part-value" data-qpart="value" data-qparam="utm">facebook</span></span><span class="query-part-separator" data-qpart="separator">&</span><span class="query-param-group" data-qparam="fbclid"><span class="query-part-key" data-qpart="key" data-qparam="fbclid">fbclid</span><span class="query-part-equals" data-qpart="equals" data-qparam="fbclid">=</span><span class="query-part-value" data-qpart="value" data-qparam="fbclid">abc123xyz</span></span>
+  <span class="query-part-delimiter" data-qpart="delimiter">?</span><span class="query-param-group" data-qparam="size"><span class="query-part-key" data-qpart="key" data-qparam="size">size</span><span class="query-part-equals" data-qpart="equals" data-qparam="size">=</span><span class="query-part-value" data-qpart="value" data-qparam="size">medium</span></span><span class="query-part-separator" data-qpart="separator">&</span><span class="query-param-group" data-qparam="color"><span class="query-part-key" data-qpart="key" data-qparam="color">color</span><span class="query-part-equals" data-qpart="equals" data-qparam="color">=</span><span class="query-part-value" data-qpart="value" data-qparam="color">light%20blue</span></span><span class="query-part-separator" data-qpart="separator">&</span><span class="query-param-group" data-qparam="utm"><span class="query-part-key" data-qpart="key" data-qparam="utm">utm_source</span><span class="query-part-equals" data-qpart="equals" data-qparam="utm">=</span><span class="query-part-value" data-qpart="value" data-qparam="utm">facebook</span></span>
 </div>
 
 <div class="query-legend" role="list" aria-label="Query parameter legend">
@@ -401,112 +426,38 @@ Query parameters are the part of a URL that comes after the `?`. They consist of
   </div>
   <div class="query-legend-item" role="listitem" data-qparam="size">
     <span class="query-legend-label query-param-label">size=medium</span>
-    <span class="query-legend-desc">Useful parameter — tells the page which size to select</span>
+    <span class="query-legend-desc">tells the page which size use a medium size</span>
   </div>
   <div class="query-legend-item" role="listitem" data-qparam="color">
     <span class="query-legend-label query-param-label">color=light%20blue</span>
-    <span class="query-legend-desc">Useful parameter — tells the page which color variant to show</span>
+    <span class="query-legend-desc">special characters are encoded with a % then a number</span>
   </div>
   <div class="query-legend-item" role="listitem" data-qparam="utm">
     <span class="query-legend-label query-param-label">utm_source=facebook</span>
-    <span class="query-legend-desc">⚠️ Tracking parameter — tells the site you came from Facebook</span>
-  </div>
-  <div class="query-legend-item" role="listitem" data-qparam="fbclid">
-    <span class="query-legend-label query-param-label">fbclid=abc123xyz</span>
-    <span class="query-legend-desc">⚠️ Tracking parameter — Facebook's click ID to track your activity</span>
+    <span class="query-legend-desc">this param was secretly added to the link when it was posted on facebook</span>
   </div>
 </div>
 </div>
 
 <script>
 (function() {
-  const container = document.getElementById('query-container');
-  const queryExample = container.querySelector('.query-example');
-  const exampleSpans = container.querySelectorAll('.query-example span[data-qpart]');
-  const paramGroups = container.querySelectorAll('.query-param-group');
-  const legendItems = container.querySelectorAll('.query-legend-item');
+  const queryExample = document.querySelector('#query-container .query-example');
+  const legendItems = document.querySelectorAll('#query-container .query-legend-item');
   
-  function clearHighlights() {
-    container.classList.remove('hovering');
-    exampleSpans.forEach(s => s.classList.remove('highlighted'));
-    paramGroups.forEach(g => g.classList.remove('highlighted'));
-    legendItems.forEach(l => l.classList.remove('highlighted'));
-  }
-  
-  // Hovering spans in the example URL - highlight only that single element + related legend items
-  exampleSpans.forEach(span => {
-    span.addEventListener('mouseenter', (e) => {
-      e.stopPropagation(); // Prevent parent group from triggering
-      clearHighlights();
-      container.classList.add('hovering');
-      
-      // Highlight only THIS span
-      span.classList.add('highlighted');
-      
-      // Highlight the Structure legend item for this part type
-      const qpart = span.dataset.qpart;
-      if (qpart) {
-        legendItems.forEach(item => {
-          if (item.dataset.qpart === qpart) {
-            item.classList.add('highlighted');
-          }
-        });
-      }
-      
-      // Highlight the Parameter legend item for this parameter
-      const qparam = span.dataset.qparam;
-      if (qparam) {
-        legendItems.forEach(item => {
-          if (item.dataset.qparam === qparam) {
-            item.classList.add('highlighted');
-          }
-        });
-      }
-    });
-    span.addEventListener('mouseleave', clearHighlights);
-  });
-  
-  // Hovering legend items
   legendItems.forEach(item => {
     item.addEventListener('mouseenter', () => {
-      clearHighlights();
-      container.classList.add('hovering');
-      
-      // Highlight this legend item
-      item.classList.add('highlighted');
-      
       const qpart = item.dataset.qpart;
       const qparam = item.dataset.qparam;
       
-      // Structure legend: highlight ALL matching URL parts
-      if (qpart) {
-        exampleSpans.forEach(span => {
-          if (span.dataset.qpart === qpart) {
-            span.classList.add('highlighted');
-          }
-        });
-      }
-      
-      // Parameter legend (example): highlight the param GROUP container
-      if (qparam) {
-        paramGroups.forEach(group => {
-          if (group.dataset.qparam === qparam) {
-            group.classList.add('highlighted');
-          }
-        });
-      }
-      
-      // Scroll to first matching element
+      // Find target element to scroll to
       let scrollTarget = null;
       if (qpart) {
-        const firstPart = container.querySelector('.query-example [data-qpart="' + qpart + '"]');
-        if (firstPart) scrollTarget = firstPart;
+        scrollTarget = document.querySelector(`#query-container .query-example [data-qpart="${qpart}"]`);
       } else if (qparam) {
-        const group = container.querySelector('.query-param-group[data-qparam="' + qparam + '"]');
-        if (group) scrollTarget = group;
+        scrollTarget = document.querySelector(`#query-container .query-param-group[data-qparam="${qparam}"]`);
       }
       
-      if (scrollTarget) {
+      if (scrollTarget && queryExample) {
         const containerRect = queryExample.getBoundingClientRect();
         const partRect = scrollTarget.getBoundingClientRect();
         const partCenter = partRect.left - containerRect.left + queryExample.scrollLeft + (partRect.width / 2);
@@ -514,17 +465,44 @@ Query parameters are the part of a URL that comes after the `?`. They consist of
         queryExample.scrollTo({ left: scrollPos, behavior: 'smooth' });
       }
     });
-    item.addEventListener('mouseleave', clearHighlights);
   });
 })();
 </script>
 
-explain what each part does
+These parameters can be very useful for things like saying how many items should be returned with a query, what specific page the query is for, or for filters on a page itself.
 
-explain why a website would want to use query parameters
+`limit=50`, `page=2`, `sort=latest`, `name=JohnJohn%20Doe`, etc...
 
-teach that tech companies then started to use that information to track how users use their websites
+If there are any extra query parameter in a websites URL it isn't harmful to the function of the website because the website and its server can simply just ignore the unused parameters.
 
+Over time ad tech companies learned that they can take any arbitrary URL that is displayed on their website and just add their own query parameters to it.
+
+A common format that these tracking parameters take are [UTM tracking codes](https://wikipedia.org/wiki/UTM_parameters).
+
+| query parameter | description |
+| --- | --- |
+| utm_source | how did you get to the site |
+| utm_medium | what type of link was used to get you to the site |
+| utm_campaign | what specific promotion brought you here |
+| utm_term | search term used |
+| utm_content | what specific page element was clicked to bring you to the page |
+
+From there the host site can use that data to track analytics how users got to their site or how their site is being used and if the page is using any scripts served up by those same ad tech companies or tooling they have built then those scripts and tools can harvest that data and send it back to the ad tech company to track user habits.
+
+While UTM codes are probably the most common way that tracking information is added to links, they are not the only way and there is nothing stopping companies from using other techniques.
+
+One such technique is though the usage of URL shorteners. Not only can url shorteners hide the usage of tracking query parameters behind short nice looking redirect, URL shortener companies also track the ip address's of all users who click on a link as well as embed cookies into your browser sessions to track what sites you are visiting specific down to the individual user level.
+
+## So why is this bad
 explain why that is a bad thing for privacy, and personal life
+- you didn't consent to being tracked you just wanted to open a webpage
+- can be used to make targeted ads work better and influence people behavers and beliefs
+- can be used to track what you specifically are looking at on the internet and who you know
+- it can be used to track and build profiles of who knows who
 
-give example of tracking links and how to protect against them
\ No newline at end of file
+## How can you help protect yourself and others
+
+give example of tracking links and how to protect against them
+- delete it manually
+- browser plugins that remove it
+- desktop apps that scan your clipboard for them
\ No newline at end of file