<!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 can be 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.< / p >
< p id = "bake" > < / p >
< p > < b > cssVarFilledCookies.js< / b > 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 > From the < a
href="https://fr.wikipedia.org/wiki/Cookie_(informatique)#Historique">french
wikipedia article about cookies< / a > , the 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;
--padding : 20px;
--font-size: 20px;
--point-size: 6px;
--angle : 8deg;
--amplitude : 40deg;
--steps: 5;
--background: whitesmoke;
--background-text: lightyellow;
--underline-style : wavy;
--duration: 4s;
--width-footer:min(800px, 100%);
--indent:50px;
--conclusion:"Let's bake nicer cookies.";
--gradient-radius:40vw;
}
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:skew(calc(var(--amplitude) * -1))}
to {transform:skew(var(--amplitude))}
}
@keyframes blink {
from {font-weight:bold}
50% {font-weight:bold}
51% {font-weight:normal}
to {font-weight:normal}
}
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) alternate infinite
steps(var(--steps), end);
background:var(--background-text);
padding:var(--padding);
}
body {height:calc(100vh - 20px);
display:flex;justify-content:center;align-items:center;
background: radial-gradient(
circle at 25px 30px, var(--colorB),
var(--background) var(--gradient-radius))
}
#cvfc{
border-color:var(--colorA) !important;
background:white;
}
#cvfc:hover{color:black;background:lightcyan}
footer {position:fixed;bottom:10px;left:10px;max-width:var(--width-footer);}
footer p, footer span, ul{font-size:var(--font-size)}
a {color:var(--colorB)}
b {font-weight:normal; color:var(--colorC)}
footer p, ul{margin:0}
ul {padding-left:var(--indent)}
footer p:not(:first-of-type) {text-indent:var(--indent)}
#bake::after {display:block;content:var(--conclusion)}
< / style >
