Array.at Negative Indices
const arr = [
'one', 'two',
'three', 'four'
];
console.log(
arr.at(-1),
arr.at(-2),
arr.at(0)
);
Array.at
allows negative index values to be used to read elements from an array. I’ve seen this done using a Proxy in the past.
Golfed Min/Max
Math.min(a,b) // 13 chars
a<b?a:b // 7 chars
Math.max(a,b)
a>b?a:b
Another small golfing gem from codegolf stackexchange. This isn’t immediately obvious, but cool to note when golfing.
It’s also worth mentioning that if your code is long enough, aliasing Math.min
and/or Math.max
may be shorter in the long run:
m = Math.min
Math.min(a,b) // 13 chars
a<b?a:b // 7 chars
m(a,b) // 6 chars
Complementary HSL
const a = document.body.appendChild(document.createElement('div')),
b = document.body.appendChild(document.createElement('div'));
let degA = degB = 0;
const size = {
width: '100px',
height: '100px'
};
Object.assign(a.style, size);
Object.assign(b.style, size);
function loop() {
degA += 1;
degB = degA + 180;
a.style.background = `hsl(${degA}deg, 100%, 50%)`;
b.style.background = `hsl(${degB}deg, 100%, 50%)`;
requestAnimationFrame(loop);
}
loop();
In HSL a hue difference of 180 degrees between two values will create a set of complimentary colors.
Wiggly Line Canvas
const canvas = document.body.appendChild(
document.createElement('canvas')
);
const c = canvas.getContext('2d');
document.body.style.margin = 0;
function resize() {
canvas.width = innerWidth;
canvas.height = innerHeight;
}
addEventListener('resize', resize);
resize();
const PAD = 50;
const RAD = 2;
const SPEED = 20;
const TWO_PI = Math.PI * 2;
let mode = 'draw';
let t = Math.random() * TWO_PI,
x = innerWidth / 2,
y = innerHeight / 2,
vx = 0, vy = 0, ta = 0;
function loop() {
for (var i = 0; i < SPEED; i++) {
t = Math.sin(ta) * TWO_PI;
vx = RAD * Math.cos(t);
vy = RAD * Math.sin(t);
ta += Math.random() * 0.1 - 0.05;
x += vx;
y += vy;
if (Math.random() < 0.005) {
mode = 'no draw';
} else if (Math.random() < 0.005) {
mode = 'draw';
}
if (mode === 'draw') {
c.fillStyle = 'red';
c.fillRect(x, y, 2, 2);
}
if (x < -PAD) {
x = innerWidth + PAD;
} else if (x > innerWidth + PAD) {
x = -PAD;
}
if (y < -PAD) {
y = innerHeight + PAD;
} else if (y > innerHeight + PAD) {
y = -PAD;
}
}
requestAnimationFrame(loop);
}
loop();
Recently saw this in some very old code – cool trick for moving things in a wiggly way – or in this case, drawing a wiggly line.
Array Sum Golfed
a = [1, 2, 3, 6, 9];
sum = eval(a.join`+`);
console.log(sum);
Found myself doing something like this a few times… easy golfed array sum. I saw this over at codegolf stackexchange here.
That whole thread is a great. I plan to post more from there in the future.