tailwindcss-animate

A Tailwind CSS plugin for creating beautiful animations.

<!-- Add an animated fade and zoom entrance -->
<div class="animate-in fade-in zoom-in">...</div>

<!-- Add an animated slide to top-left exit -->
<div class="animate-out slide-out-to-top slide-out-to-left">...</div>

<!-- Control animation duration -->
<div class="... duration-300">...</div>

<!-- Control animation delay -->
<div class="... delay-150">...</div>

<!-- And so much more! -->

Installation

Install the plugin from npm:

npm install -D tailwindcss-animate

Then add the plugin to your tailwind.config.js file:

// @filename tailwind.config.js
module.exports = {
    theme: {
        // ...
    },
    plugins: [
        require("tailwindcss-animate"),
        // ...
    ],
}

Documentation

• Basic Usage
  • Changing animation delay
  • Changing animation direction
  • Changing animation…

TinyMCE

The world's #1 open source rich text editor.

Used and trusted by millions of developers, TinyMCE is the world’s most customizable, scalable, and flexible rich text editor. We’ve helped launch the likes of Atlassian, Medium, Evernote (and lots more that we can’t tell you), by empowering them to create exceptional content and experiences for their users.

With more than 350M+ downloads every year, we’re also one of the most trusted enterprise-grade open source HTML editors on the internet. There’s currently more than 100M+ products worldwide, powered by Tiny. As a high powered WYSIWYG editor, TinyMCE is built to scale, designed to innovate, and thrives on delivering results to difficult edge-cases.

You can access a full featured demo of TinyMCE in the docs on the TinyMCE website.

Get started with TinyMCE

Getting started with the TinyMCE rich text editor is easy, and for simple configurations can be done in less…

Why BSL?

Enables body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrolling of a target element (eg. modal/lightbox/flyouts/nav-menus).

Features:

• disables body scroll WITHOUT disabling scroll of a target element
• works on iOS mobile/tablet (!!)
• works on Android
• works on Safari desktop
• works on Chrome/Firefox
• works with vanilla JS and frameworks such as React / Angular / VueJS
• supports nested target elements (eg. a modal that appears on top of a flyout)
• can reserve scrollbar width
• -webkit-overflow-scrolling: touch still works

Aren't the alternative approaches sufficient?

• the approach document.body.ontouchmove = (e) => { e.preventDefault(); return false; }; locks the body scroll, but ALSO locks the scroll of a target element (eg. modal).
• the approach overflow: hidden on the body or html elements doesn't work for all browsers
• the position: fixed approach causes the body scroll to reset
• some approaches break inertia/momentum/rubber-band scrolling on iOS

LIGHT Package Size:

…

Bazinga Tools

The all-in-one toolbox for developers. https://bazinga.tools

You Are in Good Company

BAZINGA.TOOLS is the best all-in-one toolbox for all your needs...Bazinga!

—— Sheldon Lee Cooper

Your Privacy Is Guaranteed

Your data won't leave your browser.

• ✅ No cookies
• ✅ No logging
• ✅ No IP fingerprinting
• ✅ No exception reports
• ✅ No popups
• ✅ Fully open source

Development

First, install dependencies:

npm install

Second, run the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result. The page auto-updates as you edit the file.

Add New Tools

All tools are located at pages/. To add a new tool, just follow the convention of the exsiting tools. The tech stack is TypeScript + React + CSS Modules.

Your feedback and contributions are welcome!

Roadmap

• Add new tools
• Improve existing tools
• Support offline access
• Integrations (with Alfred, Raycast, Visual Studio Code...)

✏️ Griffel

CSS-in-JS with ahead-of-time compilation.

Griffel (German for stylus/pen) is CSS-in-JS with near-zero runtime, SSR support and styles defined with JavaScript objects.

🚀   Zero config start: Griffel has both runtime & build time implementations

🔥   Optional build time transforms to improve performance

💪   Type-safe styles via csstype

🧩   Uses Atomic CSS to reuse styles and avoid specificity issues with CSS

Griffel with React

npm install @griffel/react
# or
yarn add @griffel/react

Read more

Contributing

This project welcomes contributions and suggestions, please see CONTRIBUTING.md to get started.

Trademarks

This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow Microsoft's Trademark & Brand Guidelines Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship Any use of third-party trademarks or logos are subject…

DOM to Image

What is it

dom-to-image is a library which can turn arbitrary DOM node into a vector (SVG) or raster (PNG or JPEG) image, written in JavaScript. It's based on domvas by Paul Bakaus and has been completely rewritten, with some bugs fixed and some new features (like web font and image support) added.

Installation

NPM

npm install dom-to-image

Then load

/* in ES 6 */
import domtoimage from 'dom-to-image';
/* in ES 5 */
var domtoimage = require('dom-to-image');

Bower

bower install dom-to-image

Include either src/dom-to-image.js or dist/dom-to-image.min.js in your page and it will make the domtoimage variable available in the global scope.

<script src="path/to/dom-to-image.min.js" />
<script>
  domtoimage.toPng(node)
  //...
</script>

Usage

All the top level functions accept DOM node and rendering options and return promises, which are fulfilled with corresponding…

A growing collection of useful helpers and fully functional, ready-made abstractions for react-three-fiber. If you make a component that is generic enough to be useful to others, think about making it available here through a PR!

npm install @react-three/drei

👉 this package is using the stand-alone three-stdlib instead of three/examples/jsm. 👈

Basic usage:

import { PerspectiveCamera, PositionalAudio, ... } from '@react-three/drei'

React-native:

import { PerspectiveCamera, PositionalAudio, ... } from '@react-three/drei/native'

The native route of the library does not export Html or Loader. The default export of the library is web which does export Html and Loader.

Index

Perfect Arrows

A set of functions for drawing perfect arrows between points and shapes.

• getArrow - For point-to-point arrows.
• getBoxToBoxArrow - For rectangle-to-rectangle arrows.

👉 Demo

Installation

npm i perfect-arrows

or

yarn add perfect-arrows

Usage

The functions in this library provide only the information needed to draw an arrow. You'll need to draw the arrow yourself using your technology of choice. See below for an example React component with SVG.

getArrow(x0, y0, x1, y1, options)

The getArrow function accepts the position of two points and returns an array containing information for:

• three points: a start, end, and control point
• three angles: an end, start, and center

You can use this information to draw an arc and arrow-heads. You can use the options object to tweak the return values.

const arrow = getArrow(0, 0, 100, 200, {
  bow: 0,

LearnGitBranching

LearnGitBranching is a git repository visualizer, sandbox, and a series of educational tutorials and challenges. Its primary purpose is to help developers understand git through the power of visualization (something that's absent when working on the command line). This is achieved through a game with different levels to get acquainted with the different git commands.

You can input a variety of commands into LearnGitBranching (LGB) -- as commands are processed, the nearby commit tree will dynamically update to reflect the effects of each command:

This visualization combined with tutorials and "levels" can help both beginners and intermediate developers polish their version control skills. A quick demo is available here https://pcottle.github.io/learnGitBranching/?demo

Or, you can launch the application normally here https://pcottle.github.io/learnGitBranching/

Sandbox Mode

By default the application launches in "sandbox mode" with a basic repository already created. Here you can enter commands and mess around with a repository as much as…

sharp

The typical use case for this high speed Node.js module is to convert large images in common formats to smaller, web-friendly JPEG, PNG, WebP, GIF and AVIF images of varying dimensions.

Resizing an image is typically 4x-5x faster than using the quickest ImageMagick and GraphicsMagick settings due to its use of libvips.

Colour spaces, embedded ICC profiles and alpha transparency channels are all handled correctly Lanczos resampling ensures quality is not sacrificed for speed.

As well as image resizing, operations such as rotation, extraction, compositing and gamma correction are available.

Most modern macOS, Windows and Linux systems running Node.js >= 12.13.0 do not require any additional install or runtime dependencies.

Documentation

Visit sharp.pixelplumbing.com for complete installation instructions API documentation benchmark tests and changelog.

Examples

npm install sharp

const sharp = require('sharp');

Callback

sharp(inputBuffer)
  .resize(320,