clemtre
9 months ago
2 changed files with 98 additions and 4 deletions
@ -0,0 +1,88 @@ |
|||||
|
<!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> |
||||
Loading…
Reference in new issue