Gists
On gists
JavaScript
Pipeline operator
index.js #
/* https://medium.com/@asierr/javascripts-pipeline-operator-the-game-changer-for-cleaner-code-e9eb46179510 */
const first = (x) => x + 1
const second = (x) => x + 2
const last = (x) => x + 1000
const x = 0
const result = first(second(last(x)))
const result2 = x |> increment |> square |> double;
console.log(result)
console.log(result2)
/* examples */
// before
fetch('/api/data')
.then(response => response.json())
.then(data => transformData(data))
.then(filteredData => display(filteredData));
// after
fetch('/api/data')
.then(response => response.json())
|> transformData
|> display;
// after with await
const data = await fetchData() |> parseData |> processData
// before
const slug = replaceSpaces(toLowerCase(trim(userInput)));
// after
const slug = userInput |> trim |> toLowerCase |> replaceSpaces;
On gists
Composed Path
•
JavaScript
index.js #
document.querySelector('button').addEventListener('click', (e) => {
console.log(e.composedPath())
})
On gists
Sandbox skeleton (demo code) tailwind, alpine
•
Popular ⭐
Tailwind CSS
Alpine.js
index.html #
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Sandbox - RJ</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
<!-- Code here ... -->
</body>
</html>
On gists
Glowing button
•
CSS
CSS trick
index.css #
/*
https://jsbin.com/jonekutuja/edit?html,css,output
*/
/*
Project: CSS Glowing Button
Created: Sunday, 06 March 2022
Author: Jamshid Elmi
Tutorial: https://youtu.be/b_8fHNIHFk4
*/
html, body {
display: flex;
justify-content: center;
align-items: center;
background-color: #161616;
overflow: hidden;
/* transform: scale(1.5); */
}
/* button */
.btn {
margin: 100px;
padding: 15px 40px;
border: none;
outline: none;
color: #FFF;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 12px;
}
.btn::after {
content: "";
z-index: -1;
position: absolute;
width: 100%;
height: 100%;
background-color: #333;
left: 0;
top: 0;
border-radius: 10px;
}
/* glow */
.btn::before {
content: "";
background: linear-gradient(
45deg,
#FF0000, #FF7300, #FFFB00, #48FF00,
#00FFD5, #002BFF, #FF00C8, #FF0000
);
position: absolute;
top: -2px;
left: -2px;
background-size: 600%;
z-index: -1;
width: calc(100% + 4px);
height: calc(100% + 4px);
filter: blur(8px);
animation: glowing 20s linear infinite;
transition: opacity .3s ease-in-out;
border-radius: 10px;
opacity: 0;
}
@keyframes glowing {
0% {background-position: 0 0;}
50% {background-position: 400% 0;}
100% {background-position: 0 0;}
}
/* hover */
.btn:hover::before {
opacity: 1;
}
.btn:active:after {
background: transparent;
}
.btn:active {
color: #000;
font-weight: bold;
}
On gists
Neon button
•
CSS
CSS trick
index.html #
<!-- https://jsbin.com/liyigoniku/edit?html,css,output -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Neon Button</title>
</head>
<body>
<a class="neon">Neon</a>
</body>
</html>
On gists
@property like fake replacement for animation ;)
•
CSS trick
index.css #
/*
https://yuanchuan.dev/time-uniform-for-css-animation
*/
@property --t {
syntax: "<number>";
initial-value: 0;
inherits: true;
}
@keyframes animate-time {
from { --t: 0 }
to { --t: 31536000000 }
}
/* Put animation to :root so we can use --t everywhere */
:root {
animation: animate-time 31536000000ms linear infinite;
}
div {
background: red;
width: 100px;
height: 100px;
margin: 5rem;
}
.second {
background: hsl(
calc(var(--t) * .072), 60%, 60%
);
}
div.first {
transform: rotate(
calc(var(--t) / 1000 / 10 * 1turn)
);
}
On gists
Css animated border with css @property instead of css variable
•
CSS trick
example.css #
/*
@source: https://www.youtube.com/watch?v=ezP4kbOvs_E
@demo: https://jsbin.com/rixenodiga/3/edit?html,css,output
*/
body {
background: #000;
}
@property --angle {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
.card {
/* nefunguje pro animaci, nahradi se @property */
/*
--angle: 0deg
*/
width: 300px;
height: 300px;
background: #000;
border-radius: 10px;
margin: 3rem;
position: relative;
}
.card::after,
.card::before
{
content: "";
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
border-radius: 10px;
/* vice barev */
background-image: conic-gradient(from var(--angle), red, blue, pink, orange, lime);
/* jedna a do ztracena */
/*background-image: conic-gradient(from var(--angle), transparent 80%, red); */ /* velikost definuje rozsah*/
padding: 3px;
top: 50%;
left: 50%;
translate: -50% -50%;
animation: 3s spin linear infinite;
}
.card::before {
filter: blur(1.5rem);
opacity: 0.7;
}
@keyframes spin {
from {
--angle: 0deg;
}
to {
--angle: 360deg;
}
}
On gists
Position absolute + flex + pointer events
•
CSS
CSS trick
index.html #
<!-- https://play.tailwindcss.com/FMLNwmWBhB -->
<!--
1. flex funguje i pro absolutně napozicované prvky :)
2. pointer-event: none umožní přes lupu se prokliknout na input
-->
<div class="border border-gray-300 m-5 relative flex items-center">
<span class="bg-red-500 w-4 h-4 absolute pointer-events-none"></span>
<input type="text" class="bg-gray-100 p-2 w-full block">
</div>
On gists
css grid - values
•
CSS
grid-values.css #
// https://www.vzhurudolu.cz/prirucka/css-minmax
minmax(100px, 200px) - bude 200px, lze zmenšovat pod 100px
minmax(100px, max-content) - minimálně 100px, zvětšovat se to bude podle obsahu (obrázek = maximální pixelová věc, podle délky textu)
minmax(min-content, 100px) - bude hned 100px a v případě dlouhého obsahu bude délka nejdelšího slova (u obrázků nic takového nemáme / neznáme)
fit-content(100px) - dle obsahu s maximální šířkou 100px
~ lze použít i samostatně mimo fci minmax
min-content
max-content
auto