🐸 npm jump to 🐸
njt.vercel.app

Do you type package names in your search engine and then navigate to their source, homepage, changelog and so on? 🕐🕑🕒🕓🕔

Save five seconds thousands of times by quickly jumping to the right URL:

🐸✨🐸✨🐸
njt <package> [destination]
🐸✨🐸✨🐸

• b → package cost estimation on bundlephobia.com
• c → changelog
• g → github (gitlab, etc.) repository root
• h → homepage (aliased as w for website or d for docs)
• i → issues
• n → package info on npmjs.com
• p → pull requests (aliased as m for merge requests)
• r → list of github releases
• s → source (often same as repository root, but can be its subdirectory in case of a monorepo)
• t → list of git tags
• u → package contents preview on unpkg.com
• v → list of package versions with dates on npmjs.com
• y → package page on…

#!/usr/bin/env zx

await $`cat package.json | grep name`

const branch = await $`git branch --show-current`
await $`dep deploy --branch=${branch}`

await Promise.all([
  $`sleep 1; echo 1`,
  $`sleep 2; echo 2`,
  $`sleep 3; echo 3`,
])

const name = 'foo bar'
await $`mkdir /tmp/${name}`

Bash is great, but when it comes to writing more complex scripts, many people prefer a more convenient programming language. JavaScript is a perfect choice, but the Node.js standard library requires additional hassle before using. The zx package provides useful wrappers around child_process, escapes arguments and gives sensible defaults.

npm install zx

Read documentation on google.github.io/zx.

Apache-2.0

Disclaimer: This is not an officially supported Google product.

React Awesome Reveal is a library for React apps written in TypeScript that adds reveal animations using the Intersection Observer API to detect when the elements appear in the viewport. Animations are internally provided by Emotion and implemented as CSS Animations to benefit from hardware acceleration.

• Features
• Installation
• Quick Start
• Supported Effects
  • Attention Seekers
  • Props
  • Example
  • Chaining Multiple Animations
• Custom Animations
  • Other Props
• Intersection Observer
  • Polyfill
• Past Releases
• License

• 🎁 Modern stack – It is built for modern React and supports React 18
• 🏷 TypeScript support – It is written in TypeScript to improve the DX
• 🍃 Lightweight – Very little footprint on your project
• ⚙️ Uses native APIs – Intersection Observer and CSS Animations are now supported by all browsers
• 🚀 Fast – Buttery smooth experience thanks to the use…

Use Tailwind CSS to design HTML emails.

Tailwind makes it very easy to design websites, why not use it to design HTML emails? I've been using this for volt.fm and pikaso.me and it has made my life a lot easier.

npm install -g mailwind

Design your HTML email using the Tailwind utility classes like you normally would for the web.

Then run the following command to generate the corresponding CSS file:

mailwind --input-html email.html --output-css style.css

Or run this command to generate an inlined HTML file:

mailwind --input-html email.html --output-html email-inlined.html

--input-css

The path to your base CSS file. Use this if you need to write custom CSS. Defaults to style.css.

--input-html

The path to your HTML email file.

--output-css

The path to the CSS file that will be generated.

--output-html

The path to the inlined HTML file that will be generated.

--tailwind-config

The path…

Static sites with superpowers

Staticman is a Node.js application that receives user-generated content and uploads it as data files to a GitHub and/or GitLab repository. In practice, this allows you to have dynamic content (e.g. blog post comments) as part of a fully static website, as long as your site automatically deploys on every push to GitHub and/or GitLab, as seen on GitHub Pages, GitLab Pages, Netlify and others.

It consists of a small web service that handles the POST requests from your forms, runs various forms of validation and manipulation defined by you and finally pushes them to your repository as data files. You can choose to enable moderation, which means files will be pushed to a separate branch and a pull request will be created for your approval, or disable it completely, meaning that files will be pushed to the main branch automatically.

You…

react-spring-bottom-sheet is built on top of react-spring and react-use-gesture. It busts the myth that accessibility and supporting keyboard navigation and screen readers are allegedly at odds with delightful, beautiful, and highly animated UIs. Every animation and transition use CSS custom properties instead of manipulating them directly, allowing complete control over the experience from CSS alone.

npm i react-spring-bottom-sheet

import { useState } from 'react'
import { BottomSheet } from 'react-spring-bottom-sheet'
// if setting up the CSS is tricky, you can add this to your page somewhere:
// <link rel="stylesheet" href="https://unpkg.com/react-spring-bottom-sheet/dist/style.css" crossorigin="anonymous">
import 'react-spring-bottom-sheet/dist/style.css'

export default function Example() {
  const [open, setOpen] = useState(false)
  return (
    <>
      <button onClick={() => setOpen(true)}>Open</button>
      <BottomSheet open={open}>My awesome

Demo

1. You have a list of dozens, hundreds, or thousands of items
2. You want to filter and sort those items intelligently (maybe you have a filter input for the user)
3. You want simple, expected, and deterministic sorting of the items (no fancy math algorithm that fancily changes the sorting as they type)

This follows a simple and sensible (user friendly) algorithm that makes it easy for you to filter and sort a list of items based on given input. Items are ranked based on sensible criteria that result in a better user experience.

To explain the ranking system, I'll use countries as an example:

1. CASE SENSITIVE EQUALS: Case-sensitive equality trumps all. These will be first. (ex. France would match France, but not france)
2. EQUALS: Case-insensitive equality (ex. France would match…

Find a file or directory by walking up parent directories

npm install find-up

/
└── Users
    └── sindresorhus
        ├── unicorn.png
        └── foo
            └── bar
                ├── baz
                └── example.js

example.js

import path from 'node:path';
import {findUp, pathExists} from 'find-up';

console.log(await findUp('unicorn.png'));
//=> '/Users/sindresorhus/unicorn.png'

console.log(await findUp(['rainbow.png', 'unicorn.png']));
//=> '/Users/sindresorhus/unicorn.png'

console.log(await findUp(async directory => {
    const hasUnicorns = await pathExists(path.join(directory, 'unicorn.png'));
    return hasUnicorns && directory;
}, {type: 'directory'}));
//=> '/Users/sindresorhus'

Returns a Promise for either the path or undefined if it could not be found.

Returns a Promise for either the first path…

Simple, light and extensible wrapper around fetch with smart defaults

Requires fetch support.

mande has better defaults to communicate with APIs using fetch, so instead of writing:

// creating a new user
fetch('/api/users', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    name: 'Dio',
    password: 'irejectmyhumanityjojo',
  }),
})
  .then((response) => {
    if (response.status >= 200 && response.status < 300) {
      return response.json()
    }
    // reject if the response is not 2xx
    throw new Error(response.statusText)
  })
  .then((user) => {
    // ...
  })

You can write:

const users = mande('/api/users')
users
  .post(