/
Gists
/
JavaScript
Gists - JavaScript
On gists
Currying fn
•
JavaScript
curryfn.js #
// Currying function for calculating the total price
function calculateTotal(price) {
return function(tax) {
return function(quantity) {
return price * quantity * (1 + tax);
};
};
}
// Create a curried function for a specific product
const calculateTotalForProduct = calculateTotal(10.99); // Set the base price
// Calculate the total price for a specific product with 8% tax and 3 quantity
const total = calculateTotalForProduct(0.08)(3);
console.log(`Total Price: $${total.toFixed(2)}`);
On gists
JavaScript
ES 6
webp image javascript browser detection
detection.js #
// https://www.jianshu.com/p/3ab716ee1a2e
const supportsWebp = ({ createImageBitmap, Image }) => {
if (!createImageBitmap || !Image) return Promise.resolve(false);
return new Promise(resolve => {
const image = new Image();
image.onload = () => {
createImageBitmap(image)
.then(() => {
resolve(true);
})
.catch(() => {
resolve(false);
});
};
image.onerror = () => {
resolve(false);
};
image.src = 'data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=';
});
};
const webpIsSupported = () => {
let memo = null;
return () => {
if (!memo) {
memo = supportsWebp(window);
console.log('memo');
}
return memo;
};
};
const result = webpIsSupported();
result()
.then(res => {
alert('OK', res);
})
.catch(err => {
alert(err);
});
result()
.then(res => {
alert('OK', res);
})
.catch(err => {
alert(err);
});
On gists
reveal.js
•
JavaScript
reveal.js #
function reveal() {
var reveals = document.querySelectorAll(".reveal");
for (var i = 0; i < reveals.length; i++) {
var windowHeight = window.innerHeight;
var elementTop = reveals[i].getBoundingClientRect().top;
var elementVisible = 150;
if (elementTop < windowHeight - elementVisible) {
reveals[i].classList.add("active");
} else {
reveals[i].classList.remove("active");
}
}
}
window.addEventListener("scroll", reveal);
On gists
JavaScript
Simple reveal
reveal.js #
function reveal() {
var reveals = document.querySelectorAll(".reveal");
for (var i = 0; i < reveals.length; i++) {
var windowHeight = window.innerHeight;
var elementTop = reveals[i].getBoundingClientRect().top;
var elementVisible = 150;
if (elementTop < windowHeight - elementVisible) {
reveals[i].classList.add("active");
} else {
reveals[i].classList.remove("active");
}
}
}
window.addEventListener("scroll", reveal);
On gists
JavaScript
Scroll header - IntersectionObserver by KP
demo.html #
<!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" />
<title>Document</title>
<style>
.primary-header {
--_bg: hsl(0 0% 100%);
--_logo-color: hsl(0, 0%, 5%);
--_nav-link-color: hsl(37, 82%, 20%);
padding: 1rem;
background: var(--_bg);
position: sticky;
top: 0;
}
/* for demo, probably not the best idea */
.primary-header,
.primary-header * {
transition: 500ms;
}
.primary-header.sticking {
--_bg: #333;
--_logo-color: #fff;
--_nav-link-color: #f00;
}
.primary-header__inner {
display: flex;
justify-content: space-between;
}
.primary-header a {
color: var(--_nav-link-color);
}
.primary-header a:hover,
.primary-header a:focus {
opacity: 0.7;
}
.logo {
color: var(--_logo-color);
}
.nav-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: clamp(0.5rem, 5vw, 2rem);
}
:root {
/* either --dark-mode or --no-dark-mode */
--color-scheme: var(--dark-mode);
--font-family: system-ui;
--fs-300: clamp(0.94rem, calc(0.92rem + 0.08vw), 0.98rem);
--fs-400: clamp(1.13rem, calc(1.06rem + 0.33vw), 1.31rem);
--fs-500: clamp(1.35rem, calc(1.21rem + 0.69vw), 1.75rem);
--fs-600: clamp(1.62rem, calc(1.37rem + 1.24vw), 2.33rem);
--fs-700: clamp(1.94rem, calc(1.54rem + 2.03vw), 3.11rem);
--fs-800: clamp(2.33rem, calc(1.7rem + 3.15vw), 4.14rem);
--fs-900: clamp(2.8rem, calc(1.85rem + 4.74vw), 5.52rem);
--clr-primary-300: hsl(219, 76%, 55%);
--clr-primary-400: hsl(219, 76%, 40%);
--clr-primary-500: hsl(219, 76%, 25%);
--clr-secondary-300: hsl(269, 75%, 55%);
--clr-secondary-400: hsl(269, 75%, 40%);
--clr-secondary-500: hsl(269, 75%, 25%);
--clr-accent-300: hsl(358, 72%, 65%);
--clr-accent-400: hsl(358, 72%, 50%);
--clr-accent-500: hsl(358, 72%, 35%);
/* settings */
--no-dark-mode: light;
--dark-mode: dark light;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: var(--font-family);
font-size: var(--fs-400);
line-height: 1.6;
}
.wrapper {
width: min(65rem, 100% - 2rem);
margin-inline: auto;
}
.site-title {
font-size: var(--fs-900);
line-height: 1.05;
text-transform: uppercase;
}
.section-title {
font-size: var(--fs-800);
line-height: 1.1;
}
.visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
</style>
</head>
<body>
<header class="primary-header">
<div class="wrapper">
<div class="primary-header__inner">
<span class="logo">LOGO</span>
<ul class="nav-list">
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</header>
<main>
<div class="wrapper">
<h1>Lorem ipsum dolor sit amet consectetuer adipiscing elit</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa <strong>strong</strong>. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede <a class="external ext" href="#">link</a>
mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.
</p>
<h1>Lorem ipsum dolor sit amet consectetuer adipiscing elit</h1>
<h2>Aenean commodo ligula eget dolor aenean massa</h2>
<img
src="/image-2.jpg"
alt="consectetuer adipiscing
elit"
/>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
<h2>Aenean commodo ligula eget dolor aenean massa</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
<ul>
<li>Lorem ipsum dolor sit amet consectetuer.</li>
<li>Aenean commodo ligula eget dolor.</li>
<li>Aenean massa cum sociis natoque penatibus.</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
<form action="#" method="post">
<fieldset>
<label for="name">Name:</label>
<input
type="text"
id="name"
placeholder="Enter your
full name"
/>
<label for="email">Email:</label>
<input
type="email"
id="email"
placeholder="Enter
your email address"
/>
<label for="message">Message:</label>
<textarea
id="message"
placeholder="What's on your
mind?"
></textarea>
<input type="submit" value="Send message" />
</fieldset>
</form>
<img
src="/image-3.jpg"
alt="consectetuer adipiscing
elit"
/>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
<table class="data">
<tr>
<th>Entry Header 1</th>
<th>Entry Header 2</th>
<th>Entry Header 3</th>
<th>Entry Header 4</th>
</tr>
<tr>
<td>Entry First Line 1</td>
<td>Entry First Line 2</td>
<td>Entry First Line 3</td>
<td>Entry First Line 4</td>
</tr>
<tr>
<td>Entry Line 1</td>
<td>Entry Line 2</td>
<td>Entry Line 3</td>
<td>Entry Line 4</td>
</tr>
<tr>
<td>Entry Last Line 1</td>
<td>Entry Last Line 2</td>
<td>Entry Last Line 3</td>
<td>Entry Last Line 4</td>
</tr>
</table>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
</div>
</main>
<script>
// For this tutorial on YT:
// https://youtu.be/V-CBdlfCPic
const primaryHeader = document.querySelector('.primary-header');
const scrollWatcher = document.createElement('div');
scrollWatcher.setAttribute('data-scroll-watcher', '');
primaryHeader.before(scrollWatcher);
const navObserver = new IntersectionObserver(
entries => {
primaryHeader.classList.toggle('sticking', !entries[0].isIntersecting);
},
{ rootMargin: '500px 0px 0px 0px' }
);
navObserver.observe(scrollWatcher);
</script>
</body>
</html>
On gists
JavaScript
CSS
CSS trick
Prevent Body Scrolling on iOS
ios-prevent-scroll-fix.js #
const $body = document.querySelector('body');
let scrollPosition = 0;
export default {
enable() {
scrollPosition = window.pageYOffset;
$body.style.overflow = 'hidden';
$body.style.position = 'fixed';
$body.style.top = `-${scrollPosition}px`;
$body.style.width = '100%';
},
disable() {
$body.style.removeProperty('overflow');
$body.style.removeProperty('position');
$body.style.removeProperty('top');
$body.style.removeProperty('width');
window.scrollTo(0, scrollPosition);
}
};
On gists
JavaScript
ES 6
Infinity loading
Infinity loading.js #
/* OLD */
let currentPage = 1;
let totalPages = 5;
window.addEventListener('scroll', function() {
// Check if the user has reached the bottom of the page
if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
// Check if there are more pages to load
if (currentPage < totalPages) {
// Fetch the data
await fetch('url')
currentPage++
}
}
});
/* NEW */
/* https://javascript.plainenglish.io/you-dont-need-using-scroll-event-to-load-data-infinite-b893c46a84ea */
let isVisible = false;
// the element visible / unvisble will trigger the function.
const observer = new IntersectionObserver(entries => {
isVisible = entries[0].isIntersecting
if (entries[0].isIntersecting) {
// load new content
loadData().then(() => {
setTimeout(() => {
// if the loading element still visible means the list height is less than container
// so try to load more
isVisible && loadData()
}, 100)
})
}
});
observer.observe(document.querySelector('.more')
On gists
JavaScript
Fast images via API fetch
fetch.js #
fetch("https://dog.ceo/api/breeds/image/random/10")
.then((response) => response.json())
.then((data) => data.message)
.then(arrayOfLinks => console.log(arrayOfLinks))
On gists
JavaScript
No need remove event listener
examples.js #
// https://javascript.plainenglish.io/you-dont-need-removeeventlistener-to-remove-dom-event-listeners-12db93cd8bf6
// 1. once
document.querySelector('#btn').addEventListener('click', () => {
console.log('clicked');
}, {once: true});
// 2. AbortController
const controller = new AbortController();
document.querySelector('#btn').addEventListener('click', () => {
console.log('clicked');
}, { signal: controller.signal });
// abort the listener!
controller.abort();
// or
const controller = new AbortController();
const { signal } = controller;
document.querySelector('#btn').addEventListener('click', () => {
console.log('clicked');
}, { signal });
document.querySelector('#btn').addEventListener('mouseenter', () => {
console.log('mouseenter');
}, { signal })
window.addEventListener('scroll', () => {
console.log('scroll');
}, { signal })
// Remove all listeners at once:
controller.abort();
// 3. clone element
const button = document.querySelector('#btn');
button.replaceWith(button.cloneNode(true));
On gists
JavaScript
JS oneliners
ES 6
prevAll, nextAll in pure jS (jQuery replacement)
index.html #
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li id="selected">6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>