Trending Projects is available as a weekly newsletter please sign up at Stargazing.dev to ensure you never miss an issue.
1. tailwindcss-animate
A Tailwind CSS plugin for creating beautiful animations.
jamiebuilds
/
tailwindcss-animate
A Tailwind CSS plugin for creating beautiful animations
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
2. TinyMCE
TinyMCE is the world’s most customizable, scalable, and flexible rich text editor. Available for React, Vue and Angular
tinymce
/
tinymce
The world's #1 JavaScript library for rich text editing. Available for React, Vue and Angular
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…
3. Body scroll lock
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).
willmcpo
/
body-scroll-lock
Body scroll locking that just works with everything 😏
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: touchstill 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: hiddenon the body or html elements doesn't work for all browsers - the
position: fixedapproach causes the body scroll to reset - some approaches break inertia/momentum/rubber-band scrolling on iOS
LIGHT Package Size:
…
4. Bazinga
The all-in-one toolbox for developers. Data formatters, generators, converters and more.
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...)
5. Griffel
Griffel (German for stylus/pen) is CSS-in-JS with near-zero runtime, SSR support and styles defined with JavaScript objects.
✏️ 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.
Griffel with React
npm install @griffel/react
# or
yarn add @griffel/react
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…
6. dom-to-image
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.
tsayen
/
dom-to-image
Generates an image from a DOM node using HTML5 canvas
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…
7. drei
A growing collection of useful helpers and fully functional, ready-made abstractions for react-three-fiber.
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
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
8. Perfect Arrows
A set of functions for drawing perfect arrows between points and shapes.
steveruizok
/
perfect-arrows
Draw perfect arrows between points and shapes.
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.
Other languages
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,…9. Learn Git Branching
An interactive git visualization and tutorial. Aspiring students of git can use this app to educate and challenge themselves towards mastery of git!
pcottle
/
learnGitBranching
An interactive git visualization and tutorial. Aspiring students of git can use this app to educate and challenge themselves towards mastery of git!
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…
10. sharp
High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP, AVIF and TIFF images. Uses the libvips library.
lovell
/
sharp
High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP, AVIF and TIFF images. Uses the libvips library.
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,…Stargazing 📈
Top risers over last 7 days🔗
- Mermaid +2,341 stars
- AI Expert Roadmap +1,764 stars
- Pure Bash Bible +1,348 stars
- Font Awesome +952 stars
- Coding Interview University +857 stars
Top growth(%) over last 7 days🔗
- React Worker Components +21%
- React Search Box +17%
- njt +12%
- Spark Joy +11%
- AI Expert Roadmap +11%
Top risers over last 30 days🔗
- Coding Interview University +6,151
- Public APIs +5,416 stars
- Awesome +4,554 stars
- NextUI +3,956 stars
- Tauri +3,169 stars stars
Top growth(%) over last 30 days🔗
- NextUI +358%
- Mantine +52%
- React Worker Components +50%
- Learn web3 Dapp +49%
- Medusa +42%
For all for the latest rankings please checkout Stargazing.dev
Trending Projects is available as a weekly newsletter please sign up at Stargazing.dev to ensure you never miss an issue.
If you enjoyed this article you can follow me on Twitter where I regularly post about HTML, CSS and JavaScript.
Top comments (0)