<!DOCTYPE html>
< html >
< head >
< title > < / title >
< meta charset = "utf-8" / >
< link rel = "stylesheet" href = "cssVarFilledCookies.css" >
< link rel = "stylesheet" href = "style.css" >
< script defer src = "cssVarFilledCookies.js" > < / script >
< / head >
< body >
< p class = "demo" >
< span > css< / span > < span > Var< / span > < span > Filled< / span > < span > Cookies< / span > < span > < / span > < span > js< / span >
< / p >
< footer >
< p >
Cookies, or the act of storing data client-side is an
interesting concept. Unfortunately, it has been used and
abused by sending the locally stored data to a server. Most
of the time, the cookies are filled with a user token, while
the actual data is stored server-side. This centralized
misuse of the cookies is rotting the internet, either
serving the purpose of tracking a shopping card state, or
identifying someone across websites for targeted
advertisements.
< span > Let's make nicer cookies !< / span > what variables are
you going to expose on your webpage ?
< p > cssVarFilledCookies.js is released under CC4r license,
code and documentation available at this adress → < a href = "https://git.vvvvvvaria.org/clemtre/cssVarFilledCookies.js" > git.vvvvvvaria.org/clemtre/cssVarFilledCookies.js< / a > < / p >
< / p >
< p > First public written occurrence of the term “ cookies” to
describe data stored client side from a browser dates to an article from
the financial times of 1996, the article is called < em > This bug in your PC is a smart cookie< / em > and is archived here :
< ul >
< li >
< a href = "https://archive.org/stream/FinancialTimes1996UKEnglish/Feb%2012%201996%2C%20Financial%20Times%2C%20%2312%2C%20UK%20%28en%29_djvu.txt" > Financial Times · 1996/ 02/ 12 · txt< / a >
< / li >
< li >
< a href = "https://ia600607.us.archive.org/24/items/FinancialTimes1996UKEnglish/Feb%2012%201996%2C%20Financial%20Times%2C%20%2312%2C%20UK%20%28en%29_text.pdf" > Financial Times · 1996/ 02/ 12 · pdf< / a > < / p >
< / li >
< / ul >
< / footer >
< / body >
< / html >
< style >
:root {
--colorA : violet;
--colorB : darkgreen;
--colorC : purple;
--font-size: 24px;
--point-size: 6px;
--angle : 8deg;
--background: whitesmoke;
--background-text: lightyellow;
--underline-style : wavy;
--duration: 60s;
--width-footer:min(800px, 100%);
}
span{font-size:calc(var(--font-size) * 2);display:inline-block}
span:nth-of-type(3n){color:var(--colorA);}
span:nth-of-type(3n - 1){color:var(--colorB);}
span:nth-of-type(3n - 2){color:var(--colorC);}
body {background:var(--background)}
@keyframes rotation {
from {transform:rotate(0deg)}
to {transform:rotate(360deg)}
}
@keyframes blink {
from {background:transparent}
to {background:fuchsia}
}
span:nth-of-type(2){text-decoration:underline var(--underline-style)}
span:nth-of-type(4){transform:rotate(var(--angle))}
span:nth-of-type(5){background:var(--colorB);
width:var(--point-size);
height:var(--point-size);
border-radius:100%;margin-bottom:auto
}
.demo { width:fit-content; animation: rotation var(--duration) infinite linear; background:var(--background-text)}
body {height:calc(100vh - 20px); display:flex;justify-content:center;align-items:center}
#cvfc{border-color:var(--colorA) !important;
animation:blink .5s alternate linear;
animation-iteration-count:4;
}
footer {position:fixed;bottom:10px;left:10px;max-width:var(--width-footer);}
footer p, footer span, ul{font-size:var(--font-size)}
< / style >
