🐸 njt 🐸

🐸 npm jump to 🐸
njt.vercel.app

Are you typing npm package names in your search engine to then manually navigate to their source, homepage, changelog, versions and so on? 🕐🕑🕒🕓🕔

Save five seconds thousands of times by quickly jumping to the right URL Here is a magic spell to remember:

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

Available destinations

• 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…

🐚 zx

#!/usr/bin/env zx

await $`cat package.json | grep name`

let 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`,
])

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

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

Install

npm i -g zx

Requirement: Node version >= 16.0.0

Documentation

Write your scripts in a file with .mjs extension in order to be able to use await on top level. If you prefer the…

React Awesome Reveal

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.

Table Of Contents

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

Features

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

Mailwind

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.

Install

npm install -g mailwind

Usage

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

Options

--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…

Staticman

Static sites with superpowers

Introduction

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.

Installation

npm i react-spring-bottom-sheet

Getting started

Basic usage

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

Installation

# npm
npm i react-search-box --save
# yarn
yarn add react-search-box

Usage

import React, { Component } from "react";
import ReactSearchBox from "react-search-box";

export default class App extends Component {
  data = [
    {
      key: "john",
      value: "John Doe",
    },
    {
      key: "jane",
      value: "Jane Doe",
    },
    {
      key: "mary",
      value: "Mary Phillips",
    },
    {
      key: "robert",
      value: "Robert",
    },
    {
      key: "karius",
      value: "Karius",
    },
  ];

  render() {
    return (
      <ReactSearchBox
        placeholder="Placeholder"
        value="Doe"
        data={this.data}
        callback={(record) => console.log(record)}
      />
    );
  }
}

Props

Demo

The problem

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 solution

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-up

Find a file or directory by walking up parent directories

Install

$ npm install find-up

Usage

/
└── 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'

API

findUp(name, options?)

findUp(matcher, options?)

Returns a Promise for either the path or undefined if it couldn't be found.

findUp([...name], options?)

Returns a Promise for either the first path…

mande

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(