jan-leila/volpe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: released page

Browse source
This commit is contained in:
Leyla Becker 2026-02-19 17:23:00 -06:00
parent e06bdb38fe
commit 9a80850230
1 changed files with 0 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

923
posts/drafts/remove-tracking-params-from-links.md
View file

@ -1,923 +0,0 @@
## Your internet traffic is being tracked
When you open up your phone and click on or share links through websites and applications, those platforms are secretly injecting tracking information into the URLs. You didn't consent to being tracked, you just wanted to open a webpage.
While you may feel like this is not that important to your life, the information being tracked in those links has large impacts on your life.
### They're building profiles on you
The metadata that corporations collect about you is used to make predictions on your behavior and keep track of who you know and how. This data can be used to track what you specifically are looking at on the internet, who you communicate with, and how often. Over time, this builds detailed profiles of who knows who, mapping out your entire social network without your knowledge or consent.
### Algorithmic feeds are shaping your mental health
From the data collected, corporations use algorithmic feeds and advertisements to influence your behavior in subtle ways. Research has shown that these algorithmically-curated feeds contribute to rising depression and anxiety rates, particularly among young people.[^facebook_depression] The algorithms are optimized for engagement, not wellbeing; engagement often means amplifying content that triggers strong emotional responses like outrage, fear, or inadequacy.
### You're being isolated from your community
The current dominant cultural hegemony uses these algorithmic feeds to isolate you from community and reinforce its dominance. By showing you content designed to keep you scrolling alone rather than connecting with others, these systems harm community bonds and political movements. When everyone is seeing a personalized feed, shared experiences and collective action become harder to organize.
### Advertisements are manipulating your choices
Through the mere exposure effect, targeted advertisements influence you to buy things you wouldn't have otherwise purchased. The more you see something, the more familiar and trustworthy it feels; even if you never consciously engage with the ad[^mere_exposure_effect]. This same principle can be weaponized to influence elections by driving engagement or familiarity with specific ballot options, candidates, or political messaging.[^facebook_electoral_interference]
### Activists and movements are being surveilled
This tracking infrastructure is also used to monitor activists and social movements.[^tracking_activists] The same metadata that helps advertisers target you can help authorities track who attends protests, who organizes meetings, and who communicates with whom. Even if you agree with what the groups in power are doing right now, you shouldn't hand them the tools they need to stop caring about what you think in the future.
### It makes the web worse for everyone
Beyond the privacy, and political implications, tracking parameters make links harder for people to read and share. A clean URL like `example.com/article` becomes an incomprehensible mess like `example.com/article?utm_source=facebook&utm_medium=social&fbclid=abc123xyz`. Removing these trackers saves screen space, internet bandwidth, and leaves the people around you with more energy at the end of the day for the things that they care about.
[^facebook_depression]: Internal Facebook research leaked in 2021 showed the company was aware that Instagram was harmful to teenage mental health, particularly for teen girls experiencing depression, anxiety, and body image issues. See: [Wall Street Journal's Facebook Files investigation](https://www.wsj.com/articles/facebook-knows-instagram-is-toxic-for-teen-girls-company-documents-show-11631620739)
[^mere_exposure_effect]: The more that you are exposed to something the more likely you are to have a positive opinion about it even if you are not aware of this bias being built from the advertisements. https://wikipedia.org/wiki/Mere-exposure_effect
[^facebook_electoral_interference]: Facebook's own research demonstrated that the platform could influence voter turnout and potentially election outcomes. A 2012 study published in Nature showed Facebook could increase voter turnout through social messaging. See: [Bond et al., "A 61-million-person experiment in social influence and political mobilization"](https://www.nature.com/articles/nature11421)
[^tracking_activists]: Government agencies use metadata and location tracking to monitor movements and activists. [404 Media's investigation into ICE's neighborhood monitoring tools](https://www.404media.co/inside-ices-tool-to-monitor-phones-in-entire-neighborhoods/) While this specific example isn't directly about data that they have harvested from tracker links they could very easily do the same thing to get an idea of who is involved with what movements.
## How do Links/URLs work
<style>
.url-container {
margin: var(--space-element) 0;
}
.url-example {
font-family: monospace;
font-size: 1.2em;
padding: var(--space-element);
background: var(--color-bg-surface);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-card);
margin-bottom: var(--space-element);
overflow-x: auto;
white-space: nowrap;
}
.url-example span,
.url-legend-item {
transition: opacity 0.2s;
cursor: pointer;
}
.url-legend {
display: flex;
flex-direction: column;
gap: 0.75em;
padding: var(--space-element);
background: var(--color-bg-surface);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-card);
}
.url-legend-item {
display: flex;
align-items: flex-start;
gap: var(--space-tight);
}
.url-legend-item .url-legend-label {
font-weight: var(--font-weight-semibold, 600);
min-width: 8em;
}
.url-legend-item .url-legend-desc {
color: var(--color-text-muted);
font-size: var(--font-size-small);
}
.url-required {
color: var(--color-legend-5);
font-size: 0.7em;
vertical-align: super;
font-weight: var(--font-weight-bold);
}
.url-legend-color {
width: 1em;
height: 1em;
border-radius: var(--radius-inline);
flex-shrink: 0;
margin-top: 0.2em;
}
.url-part-protocol { color: var(--color-legend-1); }
.url-legend-protocol { background: var(--color-legend-1); }
.url-part-hostname { color: var(--color-legend-2); }
.url-legend-hostname { background: var(--color-legend-2); }
.url-part-port { color: var(--color-legend-3); }
.url-legend-port { background: var(--color-legend-3); }
.url-part-path { color: var(--color-legend-4); }
.url-legend-path { background: var(--color-legend-4); }
.url-part-query { color: var(--color-legend-5); }
.url-legend-query { background: var(--color-legend-5); }
.url-part-fragment { color: var(--color-legend-6); }
.url-legend-fragment { background: var(--color-legend-6); }
/* Cross-highlighting using :has() - no JavaScript needed */
.url-container:has([data-part]:hover) [data-part] { opacity: 0.4; }
/* Keep hovered element visible but without glow */
.url-container [data-part]:hover { opacity: 1 !important; }
/* Highlight style with neutral glow */
.url-highlight {
opacity: 1 !important;
background: rgba(0, 0, 0, 0.08);
box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.12);
border-radius: 4px;
}
/* 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="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"],
.url-container:has(.url-example [data-part="fragment"]:hover) .url-legend [data-part="fragment"] {
opacity: 1 !important;
padding: var(--space-tight) 0.75em;
margin: calc(-1 * var(--space-tight)) -0.75em;
border-radius: var(--radius-block);
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 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="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"],
.url-container:has(.url-legend [data-part="fragment"]:hover) .url-example [data-part="fragment"] {
opacity: 1 !important;
border-radius: var(--radius-micro, 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);
}
</style>
<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-hostname" aria-describedby="legend-hostname" data-part="hostname">eggsexposed.com</span><span class="url-part-port" aria-describedby="legend-port" data-part="port"></span>
</div>
<div class="url-example" role="figure" aria-labelledby="url-example-caption">
<span class="url-part-protocol" aria-describedby="legend-protocol" data-part="protocol">http://</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">:8080</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-example" role="figure" aria-labelledby="url-example-caption">
<span class="url-part-protocol" aria-describedby="legend-protocol" data-part="protocol">ftp://</span><span class="url-part-hostname" aria-describedby="legend-hostname" data-part="hostname">192.168.0.2</span><span class="url-part-port" aria-describedby="legend-port" data-part="port">:20</span><span class="url-part-path" aria-describedby="legend-path" data-part="path">/lambda/documents</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 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-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 to connect to (defaults 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>
<span class="url-legend-label">Path</span>
<span class="url-legend-desc">The specific page or resource location on the server</span>
</div>
<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</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>
<span class="url-legend-label">Fragment</span>
<span class="url-legend-desc">Links to a specific section within the page (not sent to server)</span>
</div>
</div>
</div>
<script>
(function() {
const legendItems = document.querySelectorAll('.url-legend-item[data-part]');
legendItems.forEach(item => {
item.addEventListener('mouseenter', () => {
const part = item.dataset.part;
const urlPart = document.querySelector(`.url-example [data-part="${part}"]`);
if (urlPart) {
const urlExample = urlPart.closest('.url-example');
if (urlExample) {
const containerRect = urlExample.getBoundingClientRect();
const partRect = urlPart.getBoundingClientRect();
const partCenter = partRect.left - containerRect.left + urlExample.scrollLeft + (partRect.width / 2);
const scrollTarget = partCenter - (containerRect.width / 2);
urlExample.scrollTo({ left: scrollTarget, behavior: 'smooth' });
}
}
});
});
})();
</script>
## Query Parameters
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. [^query_params_docs]
[^query_params_docs]: 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. Youtube is an example of developers not using these value like they should be. Links like this [`https://www.youtube.com/watch?v=dQw4w9WgXcQ`](https://www.youtube.com/watch?v=dQw4w9WgXcQ) should instead be designed to look something like this `https://www.youtube.com/watch/video/dQw4w9WgXcQ`
<style>
.query-container {
margin: var(--space-element) 0;
}
.query-example {
font-family: monospace;
font-size: 1.2em;
padding: var(--space-element);
background: var(--color-bg-surface);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-card);
margin-bottom: var(--space-element);
overflow-x: auto;
white-space: nowrap;
}
.query-example span,
.query-legend-item {
transition: opacity 0.2s, box-shadow 0.2s;
cursor: pointer;
}
.query-legend {
display: flex;
flex-direction: column;
gap: 0.75em;
padding: var(--space-element);
background: var(--color-bg-surface);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-card);
}
.query-legend-item {
display: flex;
align-items: flex-start;
gap: var(--space-tight);
}
.query-legend-item .query-legend-label {
font-weight: var(--font-weight-semibold, 600);
min-width: 8em;
}
.query-legend-item[data-qparam] .query-legend-label {
min-width: auto;
}
.query-legend-item .query-legend-desc {
color: var(--color-text-muted);
font-size: var(--font-size-small);
}
.query-legend-color {
width: 1em;
height: 1em;
border-radius: var(--radius-inline);
flex-shrink: 0;
margin-top: 0.2em;
}
/* Structure colors - using legend color system */
.query-part-delimiter { color: var(--color-legend-1); }
.query-legend-delimiter { background: var(--color-legend-1); }
.query-part-key { color: var(--color-legend-2); }
.query-legend-key { background: var(--color-legend-2); }
.query-part-equals { color: var(--color-legend-7); }
.query-legend-equals { background: var(--color-legend-7); }
.query-part-value { color: var(--color-legend-4); }
.query-legend-value { background: var(--color-legend-4); }
.query-part-separator { color: var(--color-legend-6); }
.query-legend-separator { background: var(--color-legend-6); }
/* Parameter group highlighting in URL */
.query-param-group {
display: inline;
border-radius: var(--radius-micro, 0.25em);
transition: box-shadow 0.2s, background 0.2s;
}
/* 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;
}
/* Keep hovered element visible */
.query-container [data-qpart]:hover,
.query-container [data-qparam]:hover {
opacity: 1 !important;
}
/* 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: var(--space-tight) 0.75em;
margin: calc(-1 * var(--space-tight)) -0.75em;
border-radius: var(--radius-block);
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 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: var(--space-tight) 0.75em;
margin: calc(-1 * var(--space-tight)) -0.75em;
border-radius: var(--radius-block);
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: var(--radius-micro, 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: var(--radius-micro, 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: var(--space-element);
padding-top: 0.75em;
border-top: 1px solid var(--color-border-default);
}
.query-legend-section-title {
font-weight: var(--font-weight-semibold, 600);
font-size: 0.85em;
color: var(--color-text-muted);
margin-bottom: var(--space-tight);
}
/* Parameter legend labels - styled as code blocks */
.query-param-label {
font-family: monospace;
font-size: var(--font-size-small);
background: var(--color-bg-surface);
padding: 0.15em 0.4em;
border-radius: var(--radius-inline);
border: 1px solid var(--color-border-default);
min-width: auto;
}
</style>
<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>
</div>
<div class="query-legend" role="list" aria-label="Query parameter legend">
<div class="query-legend-section-title">Structure</div>
<div class="query-legend-item" role="listitem" data-qpart="delimiter">
<span class="query-legend-color query-legend-delimiter" aria-hidden="true"></span>
<span class="query-legend-label query-label-delimiter">? Delimiter</span>
<span class="query-legend-desc">Marks the start of query parameters in a URL</span>
</div>
<div class="query-legend-item" role="listitem" data-qpart="key">
<span class="query-legend-color query-legend-key" aria-hidden="true"></span>
<span class="query-legend-label query-label-key">Key</span>
<span class="query-legend-desc">The name of the data being passed</span>
</div>
<div class="query-legend-item" role="listitem" data-qpart="equals">
<span class="query-legend-color query-legend-equals" aria-hidden="true"></span>
<span class="query-legend-label query-label-equals">= Assignment</span>
<span class="query-legend-desc">Connects each key to its value</span>
</div>
<div class="query-legend-item" role="listitem" data-qpart="value">
<span class="query-legend-color query-legend-value" aria-hidden="true"></span>
<span class="query-legend-label query-label-value">Value</span>
<span class="query-legend-desc">The actual data being passed</span>
</div>
<div class="query-legend-item" role="listitem" data-qpart="separator">
<span class="query-legend-color query-legend-separator" aria-hidden="true"></span>
<span class="query-legend-label query-label-separator">& Separator</span>
<span class="query-legend-desc">Separates multiple key-value pairs</span>
</div>
<div class="query-legend-section">
<div class="query-legend-section-title">Parameters in this example</div>
</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">tells the page to 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">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">this param was secretly added to the link when it was posted on facebook</span>
</div>
</div>
</div>
<script>
(function() {
const queryExample = document.querySelector('#query-container .query-example');
const legendItems = document.querySelectorAll('#query-container .query-legend-item');
legendItems.forEach(item => {
item.addEventListener('mouseenter', () => {
const qpart = item.dataset.qpart;
const qparam = item.dataset.qparam;
// Find target element to scroll to
let scrollTarget = null;
if (qpart) {
scrollTarget = document.querySelector(`#query-container .query-example [data-qpart="${qpart}"]`);
} else if (qparam) {
scrollTarget = document.querySelector(`#query-container .query-param-group[data-qparam="${qparam}"]`);
}
if (scrollTarget && queryExample) {
const containerRect = queryExample.getBoundingClientRect();
const partRect = scrollTarget.getBoundingClientRect();
const partCenter = partRect.left - containerRect.left + queryExample.scrollLeft + (partRect.width / 2);
const scrollPos = partCenter - (containerRect.width / 2);
queryExample.scrollTo({ left: scrollPos, behavior: 'smooth' });
}
});
});
})();
</script>
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.
`limit=50`, `page=2`, `sort=latest`, `name=JohnJohn%20Doe`, etc...
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.
## How can you help protect yourself and others
### Just remove them manually
The most basic low tech way to remove the trackers is to just delete them yourself or just not copy them. This can help protect people that you are sharing the links with but it can become a bit tedious to manually copy every single link you want to visit and remove the trackers from its link.
<style>
/* Browser/Platform Detection Styles */
.protect-section {
margin: var(--space-block) 0;
}
.protect-section h3 {
margin-bottom: 0.75em;
}
/* Extension/App card icon styling */
.extension-icon,
.app-icon {
width: 2.5em;
height: 2.5em;
flex-shrink: 0;
}
.extension-icon img,
.app-icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* Extension card styling */
.extension-card {
display: flex;
align-items: flex-start;
gap: var(--space-element);
padding: var(--space-element);
background: var(--color-bg-surface);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-card);
margin-bottom: 0.75em;
text-decoration: none;
color: inherit;
transition: border-color 0.2s, box-shadow 0.2s;
}
.extension-card:hover {
border-color: var(--color-border-focus);
box-shadow: var(--shadow-card);
}
.extension-info {
flex: 1;
}
.extension-name {
font-weight: var(--font-weight-semibold, 600);
color: var(--color-text-heading);
margin-bottom: var(--space-micro);
}
.extension-desc {
font-size: var(--font-size-small);
color: var(--color-text-muted);
margin: 0;
}
.extension-badge {
display: inline-block;
font-size: 0.75em;
padding: 0.2em var(--space-tight);
border-radius: var(--radius-inline);
background: var(--color-text-link);
color: white;
margin-left: var(--space-tight);
vertical-align: middle;
}
/* Browser-specific highlighting - all hidden by default */
.browser-detected-firefox,
.browser-detected-chrome,
.browser-detected-edge {
display: none;
}
.browser-list-fallback {
display: block;
}
.browser-dropdown-container {
display: none;
}
/* Remove border from expandable inside dropdown containers */
.browser-dropdown-container .expandable,
.platform-dropdown-container .expandable {
border: none;
margin: 0;
}
.browser-dropdown-container .expandable summary,
.platform-dropdown-container .expandable summary {
background: none;
padding: var(--space-tight) 0;
border-bottom: none;
}
.browser-dropdown-container .expandable[open] summary,
.platform-dropdown-container .expandable[open] summary {
border-bottom: none;
margin-bottom: var(--space-tight);
}
/* Firefox detection using -moz prefixed properties */
@supports (-moz-appearance: none) {
.browser-detected-firefox {
display: block;
}
/* Ensure Chrome/Edge stay hidden even though Firefox supports -webkit-appearance */
.browser-detected-chrome,
.browser-detected-edge {
display: none !important;
}
.browser-list-fallback {
display: none;
}
.browser-dropdown-container {
display: block;
}
.browser-dropdown-container .browser-firefox {
display: none;
}
}
/* Chrome/Chromium/Edge detection - only when NOT Firefox */
@supports (-webkit-appearance: none) and (not (-moz-appearance: none)) {
.browser-detected-chrome {
display: block;
}
.browser-list-fallback {
display: none;
}
.browser-dropdown-container {
display: block;
}
.browser-dropdown-container .browser-chrome {
display: none;
}
}
/* Platform detection for desktop/mobile */
.platform-detected {
display: none;
}
.platform-list-fallback {
display: block;
}
.platform-dropdown-container {
display: none;
}
/* Platform app cards */
.app-card {
display: flex;
align-items: flex-start;
gap: var(--space-element);
padding: var(--space-element);
background: var(--color-bg-surface);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-card);
margin-bottom: 0.75em;
text-decoration: none;
color: inherit;
transition: border-color 0.2s, box-shadow 0.2s;
}
.app-card:hover {
border-color: var(--color-border-focus);
box-shadow: var(--shadow-card);
}
.app-info {
flex: 1;
}
.app-name {
font-weight: var(--font-weight-semibold, 600);
color: var(--color-text-heading);
margin-bottom: var(--space-micro);
}
.app-desc {
font-size: var(--font-size-small);
color: var(--color-text-muted);
margin: 0;
}
.app-platforms {
display: flex;
gap: var(--space-tight);
margin-top: var(--space-tight);
}
.platform-tag {
font-size: 0.75em;
padding: 0.2em var(--space-tight);
border-radius: var(--radius-inline);
background: var(--color-border-default);
color: var(--color-text-primary);
}
/* Section dividers */
.protect-divider {
margin: var(--space-section) 0;
border: none;
border-top: 1px solid var(--color-border-default);
}
</style>
### Install browser extensions to automate it for you
You can install browser extensions that automatically remove tracking parameters from URLs as you browse:
#### ClearURL
<div class="protect-section">
<div class="browser-detected-firefox">
<a href="https://addons.mozilla.org/en-US/firefox/addon/clearurls/" class="extension-card" target="_blank" rel="noopener">
<div class="extension-icon"><img src="{{ 'firefox-icon.svg' | fileHash('assets') }}" alt="Firefox"></div>
<div class="extension-info">
<div class="extension-name">ClearURLs for Firefox<span class="extension-badge">Recommended for your browser</span></div>
<p class="extension-desc">Removes tracking elements from URLs automatically</p>
</div>
</a>
</div>
<div class="browser-detected-chrome">
<a href="https://chromewebstore.google.com/detail/clearurls/lckanjgmijmafbedllaakclkaicjfmnk" class="extension-card" target="_blank" rel="noopener">
<div class="extension-icon"><img src="{{ 'chrome-icon.svg' | fileHash('assets') }}" alt="Chrome"></div>
<div class="extension-info">
<div class="extension-name">ClearURLs for Chrome<span class="extension-badge">Recommended for your browser</span></div>
<p class="extension-desc">Removes tracking elements from URLs automatically</p>
</div>
</a>
</div>
<div class="browser-detected-edge">
<a href="https://microsoftedge.microsoft.com/addons/detail/clearurls/mdkdmaickkfdekbjdoojfalpbkgaddei" class="extension-card" target="_blank" rel="noopener">
<div class="extension-icon"><img src="{{ 'edge-icon.svg' | fileHash('assets') }}" alt="Edge"></div>
<div class="extension-info">
<div class="extension-name">ClearURLs for Edge<span class="extension-badge">Recommended for your browser</span></div>
<p class="extension-desc">Removes tracking elements from URLs automatically</p>
</div>
</a>
</div>
<div class="browser-dropdown-container">
<details class="expandable">
<summary>Show all browsers</summary>
<a href="https://addons.mozilla.org/en-US/firefox/addon/clearurls/" class="extension-card browser-firefox" target="_blank" rel="noopener">
<div class="extension-icon"><img src="{{ 'firefox-icon.svg' | fileHash('assets') }}" alt="Firefox"></div>
<div class="extension-info">
<div class="extension-name">ClearURLs for Firefox</div>
<p class="extension-desc">Removes tracking elements from URLs automatically</p>
</div>
</a>
<a href="https://chromewebstore.google.com/detail/clearurls/lckanjgmijmafbedllaakclkaicjfmnk" class="extension-card browser-chrome" target="_blank" rel="noopener">
<div class="extension-icon"><img src="{{ 'chrome-icon.svg' | fileHash('assets') }}" alt="Chrome"></div>
<div class="extension-info">
<div class="extension-name">ClearURLs for Chrome</div>
<p class="extension-desc">Removes tracking elements from URLs automatically</p>
</div>
</a>
<a href="https://microsoftedge.microsoft.com/addons/detail/clearurls/mdkdmaickkfdekbjdoojfalpbkgaddei" class="extension-card browser-edge" target="_blank" rel="noopener">
<div class="extension-icon"><img src="{{ 'edge-icon.svg' | fileHash('assets') }}" alt="Edge"></div>
<div class="extension-info">
<div class="extension-name">ClearURLs for Edge</div>
<p class="extension-desc">Removes tracking elements from URLs automatically</p>
</div>
</a>
</details>
</div>
<div class="browser-list-fallback">
<a href="https://addons.mozilla.org/en-US/firefox/addon/clearurls/" class="extension-card" target="_blank" rel="noopener">
<div class="extension-icon"><img src="{{ 'firefox-icon.svg' | fileHash('assets') }}" alt="Firefox"></div>
<div class="extension-info">
<div class="extension-name">ClearURLs for Firefox</div>
<p class="extension-desc">Removes tracking elements from URLs automatically</p>
</div>
</a>
<a href="https://chromewebstore.google.com/detail/clearurls/lckanjgmijmafbedllaakclkaicjfmnk" class="extension-card" target="_blank" rel="noopener">
<div class="extension-icon"><img src="{{ 'chrome-icon.svg' | fileHash('assets') }}" alt="Chrome"></div>
<div class="extension-info">
<div class="extension-name">ClearURLs for Chrome</div>
<p class="extension-desc">Removes tracking elements from URLs automatically</p>
</div>
</a>
<a href="https://microsoftedge.microsoft.com/addons/detail/clearurls/mdkdmaickkfdekbjdoojfalpbkgaddei" class="extension-card" target="_blank" rel="noopener">
<div class="extension-icon"><img src="{{ 'edge-icon.svg' | fileHash('assets') }}" alt="Edge"></div>
<div class="extension-info">
<div class="extension-name">ClearURLs for Edge</div>
<p class="extension-desc">Removes tracking elements from URLs automatically</p>
</div>
</a>
</div>
</div>
[Source Code](https://github.com/ClearURLs/Addon)
<!-- ### Desktop applications
Clipboard monitoring apps that automatically clean URLs when you copy them:
<div class="protect-section">
<div class="platform-list-fallback">
<a href="" class="app-card" target="_blank" rel="noopener">
<div class="app-info">
<div class="app-name"></div>
<p class="app-desc"></p>
<div class="app-platforms">
<span class="platform-tag">Linux</span>
</div>
</div>
</a>
</div>
</div> -->
### Mobile applications
There are some mobile apps that can also help remove trackers from links:
<div class="protect-section">
<div class="platform-list-fallback">
<a href="https://f-droid.org/packages/com.svenjacobs.app.leon/" class="app-card" target="_blank" rel="noopener">
<div class="app-icon"><img src="{{ 'android-icon.svg' | fileHash('assets') }}" alt="Android"></div>
<div class="app-info">
<div class="app-name">Leon</div>
<p class="app-desc">Android share target app that removes tracking parameters from URLs. Share any link to Leon before sharing elsewhere.</p>
<div class="app-platforms">
<span class="platform-tag">Android</span>
<span class="platform-tag">F-Droid</span>
</div>
</div>
</a>
</div>
</div>
### Use websites with tools to do it for you
You can also use web tools that you can give a URL and it will clean it for you:
<div class="protect-section">
<div class="platform-list-fallback">
<a href="https://linkcleaner.app/" class="app-card" target="_blank" rel="noopener">
<div class="app-icon"><img src="{{ 'link-icon.svg' | fileHash('assets') }}" alt="Web Tool"></div>
<div class="app-info">
<div class="app-name">LinkCleaner</div>
<p class="app-desc">Paste any URL and get a clean version without tracking parameters. Works in your browser - no installation needed.</p>
</div>
</a>
</div>
</div>
### URL unshortening and redirect following tools
<div class="protect-section">
<div class="platform-list-fallback">
<a href="https://unshorten.it/" class="app-card" target="_blank" rel="noopener">
<div class="app-icon"><img src="{{ 'link-icon.svg' | fileHash('assets') }}" alt="Web Tool"></div>
<div class="app-info">
<div class="app-name">Unshorten.It!</div>
</div>
</a>
<a href="https://wheregoes.com/" class="app-card" target="_blank" rel="noopener">
<div class="app-icon"><img src="{{ 'link-icon.svg' | fileHash('assets') }}" alt="Web Tool"></div>
<div class="app-info">
<div class="app-name">WhereGoes</div>
</div>
</a>
<a href="https://www.expandurl.net/" class="app-card" target="_blank" rel="noopener">
<div class="app-icon"><img src="{{ 'link-icon.svg' | fileHash('assets') }}" alt="Web Tool"></div>
<div class="app-info">
<div class="app-name">ExpandURL</div>
</div>
</a>
</div>
</div>