Latest in Snippets
Home → Snippets
Small, self-contained code snippets you can drop straight into a project — each one solving a single Node.js or JavaScript problem well.
Modern JavaScript features you can use in Node.js 26
A batch of genuinely useful JavaScript additions is now unflagged in Node.js 26: Set operations (union, intersection, difference), lazy iterator helpers, RegExp.escape, Promise.try, Array.fromAsync, and Float16Array. Here's each one with real, verified output.
Temporal: the modern way to handle dates in Node.js
JavaScript's broken Date object finally has a replacement. Temporal — Stage 4 in ES2026 and enabled by default in Node.js 26 — brings immutable date/time types, real time-zone support, and sane arithmetic. Here's how to use it, with examples and the polyfill for older environments.
How to format output of international phone number with JavaScript
JavaScript offers lots of NPM packages, and every day it keep counting! I'm here to help you find those that work.
TypeScript-friendly useSize from @react-hook/resize-observer.
So you went to https://www.npmjs.com/package/@react-hook/resize-observer and copied useSize, but it has a bunch of typescript errors, and it pisses you off (I know it does).
Here's a version that is TypeScript-friendly... And not just that, it's a complete file you can put in your project and import from your components:
Here's a version that is TypeScript-friendly... And not just that, it's a complete file you can put in your project and import from your components:
import useResizeObserver from "@react-hook/resize-observer" import { useLayoutEffect, useState } from "react" const useSize = (target:any) => { const [size, setSize] = useState<DOMRectReadOnly>() useLayoutEffect(() =>...Group in a group with TailwindCSS.
Some time ago, there was a common problem of having multiple nested
group classes. Imagine having a main menu dropdown group, where top level elements are groups, and sub-level elements are groups as well. You might be tempted to use something like this:<ul class="relative"> <li class="group"> Top level item <ul class="hidden group-hover:block"> <li class="group"> Sub level items will be here <ul class="hidden group-hover:block"> <li>Sub-sub level item 1</li> <li>Sub-sub level item 2</li> <li>Sub-sub level item 3</li> </ul> </li> </ul> </li> </ul>clearTimeout or clearInterval in React Native views with React Navigation
When working on a regular React app, it is common to initialize some hooks after the component is mounted, and unbind them after the component is unmounted. However, while working on a React Native app, you might have noticed that the views are actually not unmounted, and as such your bound events and background tasks continue to run from the previous view. Here's what you can do.
useFocusEffect to the rescue
useFocusEffect to the rescue
useFocusEffect is a special hook from @react-navigation/native,...How to resize all JPGs in a folder to PNGs with a maximum width using FFmpeg?
FFmpeg is not only for converting videos, you know? I'll go straight to the point, here's how I use it.
This one command will get all JPGs in a folder, convert to PNGs and downscale it if it's more than 512px width:
This one command will get all JPGs in a folder, convert to PNGs and downscale it if it's more than 512px width:
for i in *.jpg; do ffmpeg -y -i "$i" -vf "scale='min(512,iw)':-1" -sws_flags bilinear "${i%.*}.png"; done How to convert all SVGs in a folder to PNG with Docker image?
I recently stumbled across this simple problem and realized, that I actually don't want to install any app like Inkscape just to do that. Came across this nice and simple docker image https://hub.docker.com/r/burke/svg2png.
Here's how I used it. First, I tried to run it against a single file to see if that works at all:
Here's how I used it. First, I tried to run it against a single file to see if that works at all:
docker run --rm -v `pwd`:/svg burke/svg2png "Logo.svg" -w 256error TS2792: Cannot find module 'moment'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?
Got this error when trying to import
To fix the issue, you will need to adjust your
moment into a TypeScript React (.tsx) module?To fix the issue, you will need to adjust your
tsconfig.json file and add "moduleResolution": "node" to your compilerOptions, so it looks like this:{ "compilerOptions": { ... "moduleResolution": "node", ... } }"moduleResolution": "node" setting in tsconfig.json tells the TypeScript compiler to use Node.js module resolution logic when resolving module names. This allows...Cannot augment module 'console' with value exports because it resolves to a non-module entity.
This error message appears when typings are exposed globally, yet TypeScript tries to validate module typings and the names conflict.
I got this with a Figma widget module
I got this with a Figma widget module
@figma/plugin-typings, and the solution was quite simple - add this to your .tsconfig.json:{ "compilerOptions": { ... "skipLibCheck": true, ...5 ways to create an HTTP/HTTP2 server with Node.js.
Node.js can be used to easily run a web server by using the built-in HTTP module or a web framework such as Express, Hapi, or Fastify. The process involves creating an HTTP server, setting up routes, and starting the server to listen on a specific port for incoming requests.
1. Using the built-in
1. Using the built-in
http.createServer The easiest and most typical way is to use the built-in http module.const http...Prevent CSS column break within an element
You might have had this while using the CSS
Let's look at this simple example of CSS columns. First, the HTML:
columns rule and getting rid of all those JavaScript libraries. One of the elements got suddenly cut and wraps to the next column.Let's look at this simple example of CSS columns. First, the HTML:
<div class="columns"> <div>Item 1</div> <div>Item 2, which is slightly longer</div> <div>Item 3, which is also longer and jumps to next column</div> <div>Item 4</div> <div>Item 5</div> <div>Item 6</div> </div>