DEV Community

Iain Freestone
Iain Freestone

Posted on

๐Ÿš€10 Trending projects on GitHub for web developers - 18th February 2022

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.

GitHub logo 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! -->
Enter fullscreen mode Exit fullscreen mode

Installation

Install the plugin from npm:

npm install -D tailwindcss-animate
Enter fullscreen mode Exit fullscreen mode

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

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

Documentation


2. TinyMCE

TinyMCE is the worldโ€™s most customizable, scalable, and flexible rich text editor. Available for React, Vue and Angular

GitHub logo 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.

Using an old version of TinyMCE? We recommend you to upgrade to TinyMCE 7 to continue receiving security updates, or consider TinyMCE 5 LTS if you need more time to upgrade.

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โ€ฆ


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).

GitHub logo willmcpo / body-scroll-lock

Body scroll locking that just works with everything ๐Ÿ˜

Body scroll lock...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: 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:

โ€ฆ


4. Bazinga

The all-in-one toolbox for developers. Data formatters, generators, converters and more.

GitHub logo luin / bazinga

๐Ÿ’ฅ The best all-in-one toolbox. Bazinga!

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
Enter fullscreen mode Exit fullscreen mode

Second, run the development server:

npm run dev
Enter fullscreen mode Exit fullscreen mode

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.

GitHub logo microsoft / griffel

CSS-in-JS with ahead-of-time compilation โšก๏ธ

Griffel's logo

CSS-in-JS with ahead-of-time compilation โšก๏ธ

NPM Downloads MIT License Github discussions

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

๐Ÿ“ ย  Experimental CSS extraction with Webpack plugin

๐Ÿž ย  Debug using Griffel DevTools extension

Griffel with React

npm install @griffel/react
# or
yarn add @griffel/react
Enter fullscreen mode Exit fullscreen mode

Learn more?

Check series episodes of Fluent UI Insights related to styling issues and Griffel ๐ŸŽฅ














EP02: Styling EP03: Griffel
Watch EP02: Styling Watch EP03: Griffel

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โ€ฆ


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.

GitHub logo tsayen / dom-to-image

Generates an image from a DOM node using HTML5 canvas

DOM to Image

Build Status

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');
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

GitHub logo pmndrs / drei

๐Ÿฅ‰ useful helpers for react-three-fiber

logo

Version Downloads Discord Shield Open in GitHub Codespaces

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 CONTRIBUTING!

npm install @react-three/drei
Enter fullscreen mode Exit fullscreen mode

Important

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

Basic usage

import { PerspectiveCamera, PositionalAudio, ... } from '@react-three/drei'
Enter fullscreen mode Exit fullscreen mode

React-native

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

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.

Documentation

https://pmndrs.github.io/drei

Warning

Below is an archive of the anchors links with their new respective locations to the documentation website. Do not update the links below, they are for reference only.

Cameras

PerspectiveCamera

Documentation has moved here

OrthographicCamera

Documentation has moved here

CubeCamera

Documentation has moved here

Controls

CameraControls

Documentation has movedโ€ฆ


8. Perfect Arrows

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

GitHub logo steveruizok / perfect-arrows

Draw perfect arrows between points and shapes.

Perfect Arrows

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

Example

๐Ÿ‘‰ Demo

Edit example

Other languages

Portuguรชs (pt-BR)

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,
โ€ฆ
Enter fullscreen mode Exit fullscreen mode

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!

GitHub logo 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

PRs Welcome

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:

demo-gif

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.

GitHub logo 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

sharp logo

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

It can be used with all JavaScript runtimes that provide support for Node-API v9, including Node.js (^18.17.0 or >= 20.3.0), Deno and Bun.

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 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
โ€ฆ
Enter fullscreen mode Exit fullscreen mode

Stargazing ๐Ÿ“ˆ

Top risers over last 7 days๐Ÿ”—

  1. Mermaid +2,341 stars
  2. AI Expert Roadmap +1,764 stars
  3. Pure Bash Bible +1,348 stars
  4. Font Awesome +952 stars
  5. Coding Interview University +857 stars

Top growth(%) over last 7 days๐Ÿ”—

  1. React Worker Components +21%
  2. React Search Box +17%
  3. njt +12%
  4. Spark Joy +11%
  5. AI Expert Roadmap +11%

Top risers over last 30 days๐Ÿ”—

  1. Coding Interview University +6,151
  2. Public APIs +5,416 stars
  3. Awesome +4,554 stars
  4. NextUI +3,956 stars
  5. Tauri +3,169 stars stars

Top growth(%) over last 30 days๐Ÿ”—

  1. NextUI +358%
  2. Mantine +52%
  3. React Worker Components +50%
  4. Learn web3 Dapp +49%
  5. 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)