Snippets about js
23 snippets
-
SNP132
Lerp and clamp
Two one-liners every game and animation ends up needing.
5 lines of js in 3 blocks, 8 lines of explanation.
#935 -
SNP129
Crisp pixel art on a canvas
The canvas smooths scaled sprites too. Turn it off, in two places.
9 lines of js and css in 2 blocks, 6 lines of explanation.
#513 -
SNP122
Load .env files in Node without a package
dotenv is built into Node now.
2 lines of sh in 2 blocks, 7 lines of explanation.
#42A -
SNP121
Compute page data in beforeAll, not beforeRender
A Stati hook that writes front matter in beforeRender makes those pages rebuild on every build.
20 lines of js in 2 blocks, 12 lines of explanation.
#471 -
SNP102
Seeded random numbers in JavaScript
Math.random() can't be seeded. For procedural levels you need one that can.
11 lines of js in 1 block, 5 lines of explanation.
#512 -
SNP099
Clean up event listeners in useEffect
The resize listener that stayed alive after the component was gone, and how to not do that.
14 lines of jsx in 2 blocks, 5 lines of explanation.
#A51 -
SNP084
__dirname in ES modules
It's gone in ESM. Here is the replacement, and the newer, nicer one.
9 lines of js in 3 blocks, 4 lines of explanation.
#45A -
SNP079
v-model on your own component with defineModel
Vue 3.4 made two-way binding on custom components a one-liner.
8 lines of vue in 2 blocks, 5 lines of explanation.
#B41 -
SNP076
Environment variables in Nuxt
Runtime config, the NUXT_ prefix and which values end up in the browser.
10 lines of ts and sh in 2 blocks, 7 lines of explanation.
#614 -
SNP072
Do something when an element scrolls into view
Lazy loading, fade-ins and "read" markers without a scroll listener.
12 lines of js in 1 block, 7 lines of explanation.
#935 -
SNP067
Redirect from a route middleware in Nuxt
Send people who aren't logged in to the login page before the page even renders.
10 lines of js and vue in 2 blocks, 6 lines of explanation.
#694 -
SNP061
Format dates without a library
Intl.DateTimeFormat does most of what you used moment or date-fns for.
12 lines of js in 2 blocks, 4 lines of explanation.
#351 -
SNP056
Group an array by a key
Object.groupBy is finally a thing. Here it is, with the fallback for older runtimes.
9 lines of js in 2 blocks, 3 lines of explanation.
#496 -
SNP052
Fetch with a timeout
fetch() waits forever by default. Give up after a few seconds.
6 lines of js in 2 blocks, 4 lines of explanation.
#25A -
SNP042
Shuffle an array properly
The sort(() => Math.random() - 0.5) trick is biased. Fisher-Yates is just as short and actually random.
9 lines of js in 1 block, 5 lines of explanation.
#2B4 -
SNP038
Read a JSON file in Node
Two ways, one of them without any fs code at all.
4 lines of js in 2 blocks, 4 lines of explanation.
#416 -
SNP036
Sleep in Node without writing a timeout function
Node ships a promise-based setTimeout, so the little helper from my old snippet isn't needed there.
6 lines of js in 2 blocks, 6 lines of explanation.
#B63 -
SNP034
Watch a nested property in Vue
Your watcher doesn't fire when something deep inside an object changes. Here is why and what to do.
2 lines of js in 2 blocks, 6 lines of explanation.
#6B1 -
SNP031
Copy text to the clipboard
The modern clipboard API in three lines, with the gotchas.
8 lines of js in 2 blocks, 5 lines of explanation.
#592 -
SNP022
Debounce a function in plain JavaScript
Run a function only after the user stopped typing, without pulling in a library for it.
10 lines of js in 2 blocks, 5 lines of explanation.
#B31 -
SNP015
Create timeout in an async function
To throttle the execution of our async function we will create a timeout method.
4 lines of js in 2 blocks, 4 lines of explanation.
#B96 -
SNP013
Get query parameters in Nuxt
Read the GET request query parameters in your code.
1 line of js in 1 block, 2 lines of explanation.
#249 -
SNP003
Select all text in input field on click the Vue JS way
Comparing the traditional javascript way with the Vue event you can use.
2 lines of html in 2 blocks, 3 lines of explanation.
#24B