You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
89 lines
3.3 KiB
89 lines
3.3 KiB
9 months ago
|
<!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>
|
||
|
|
<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>
|