Latest in Snippets
Home → Snippets
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>Convert all PNGs in a folder to WEBP with FFmpeg
FFmpeg is an awesome tool that can convert not only videos but also audio and images.
On Linux and Mac, run it like this in the folder where you want the conversion to run:
On Linux and Mac, run it like this in the folder where you want the conversion to run:
for i in *.png; do ffmpeg -y -i "$i" -c:v libwebp "${i%.*}.webp"; doneFOR /F "tokens=*" %G IN ('dir /b *.png') DO ffmpeg...Simple responsive HTML/CSS maintenance page with black-and-yellow construction stripes
Here is a simple maintenance page with a black-and-yellow construction stripe at the top.
It has a hanging information board with text that you can customize, and is prepared for mobile screens as well.
CodePen Embed Fallback
It has a hanging information board with text that you can customize, and is prepared for mobile screens as well.
CodePen Embed Fallback
Pure CSS toggle switch
There's no need to use a library to implement a nice toggle for your project. This can be done with pure CSS and completely zero JavaScript.
There is a nice codepen implemented by Marcus Burnette, which involves using a
The markup We are using a checkbox input with a label after it, and...
There is a nice codepen implemented by Marcus Burnette, which involves using a
:checked pseudo-class selector on the <input type="checkbox" />. Let's see how it's done exactly.The markup We are using a checkbox input with a label after it, and...