DEV Community: Iain Freestone

🚀10 Trending projects on GitHub for web developers - 4th March 2022

Iain Freestone — Fri, 04 Mar 2022 14:56:16 +0000

Trending Projects is available as a weekly newsletter please sign up at Stargazing.dev to ensure you never miss an issue.

1. react-typical

React Animated typing in ~400 bytes of JavaScript.

catalinmiron / react-typical

React typing animation in ~400 bytes 🐡 of JavaScript.

react-typical

React Animated typing in ~400 bytes 🐡 of JavaScript.

DEMO

Based on awesome typical library by @camwiegert

Youtube Video Tutorial

Install

npm install --save react-typical

Usage

import React, { Component } from 'react'
import Typical from 'react-typical'

class Example extends React.Component {
  render () {
    return (
      <Typical
        steps={['Hello', 1000, 'Hello world!', 500]}
        loop={Infinity}
        wrapper="p"
      />
    )
  }
}

Properties

prop	mandatory	type	Eg.
`steps`	yes	[]	`['Hello', 1000, 'World']`
`wrapper`	no	string	'p'
`loop`	no	number	`3`

License

This library is based on @camwiegert/typical work and it currently is just a wrapper for react.

MIT © catalinmiron

View on GitHub

2. fflip

Flexible Feature Flipping/Flagging for Node.js. fflip gives you complete control over releasing new functionality to your users based on their user id, join date, membership status, and whatever else you can think of

FredKSchott / fflip

Flexible Feature Flipping/Flagging for Node.js

fflip

Working on an experimental new design? Starting a closed beta? Rolling out a new feature over the next few weeks? Fa-fa-fa-flip it. fflip gives you complete control over releasing new functionality to your users based on their user id, join date, membership status, and whatever else you can think of. fflip's goal is to be the most powerful and extensible feature flipping/toggling module out there.

Create custom criteria to segment users & features based on your audience.
View & edit feature access in one easy place, and not scattered around your code base.
System-Agnostic: Support any database, user representation or web framework you can throw at it.
Extensible: Supports 3rd-party plugins for your favorite libraries (like our Express integration!)

npm install fflip --save

Integrations

As mentioned, fflip's goal is to be flexible enough to integrate with any web framework, database, or ORM. The following integrations are known to…

View on GitHub

3. imagesLoaded

Detect when images have been loaded.

desandro / imagesloaded

📷 JavaScript is all like "You images done yet or what?"

imagesLoaded

JavaScript is all like "You images done yet or what?"

imagesloaded.desandro.com

Detect when images have been loaded.

Install

Download

imagesloaded.pkgd.min.js minified
imagesloaded.pkgd.js un-minified

CDN

<script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.js"></script>

Package managers

Install via npm: npm install imagesloaded

Install via Yarn: yarn add imagesloaded

jQuery

You can use imagesLoaded as a jQuery Plugin.

$('#container').imagesLoaded( function() {
  // images have loaded
});

// options
$('#container').imagesLoaded( {
  // options...
  },
  function() {
    // images have loaded
  }
);

.imagesLoaded() returns a jQuery Deferred object. This allows you to use .always(), .done(), .fail() and .progress().

$('#container').imagesLoaded()
  .always( function( instance ) {

…

View on GitHub

4. tRPC

End-to-end typesafe APIs made easy. tRPC allows you to easily build & consume fully typesafe APIs, without schemas or code generation.

trpc / trpc

🧙‍♀️ Move Fast and Break Nothing. End-to-end typesafe APIs made easy.

tRPC

Move fast and break nothing.
End-to-end typesafe APIs made easy.

The client above is not importing any code from the server, only its type declarations.

Note

You are looking at the next-branch of tRPC which is the current work in progress representing version 11.

The functionality is stable and can be used in production, but we may do small breaking API-changes between patches until we reach 11.0.0
The packages are published with the next-tag on npm
For the list of changes made, see https://trpc.io/docs/v11/migrate-from-v10-to-v11

Intro

tRPC allows you to easily build & consume fully typesafe APIs without schemas or code generation.

Features

✅ Well-tested and production ready.
🧙‍♂️ Full static typesafety & autocompletion on the client, for inputs, outputs, and errors.
🐎 Snappy DX - No code generation, run-time bloat, or build pipeline.
🍃 Light - tRPC has zero deps and a tiny client-side footprint.
…

View on GitHub

5. Swiper

Most modern mobile touch slider with hardware accelerated transitions

nolimits4web / swiper

Most modern mobile touch slider with hardware accelerated transitions

Get Started | Documentation | Demos

Swiper

Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.

Swiper is not compatible with all platforms, it is a modern touch slider which is focused only on modern apps/platforms to bring the best experience and simplicity.

Features

Tree-shakeable: Only modules you use will be imported into your app's bundle.
Mobile-friendly: It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.
Library Agnostic: Swiper doesn't require any JavaScript libraries like jQuery, which makes Swiper much smaller and faster. It can be safely used with libraries such as jQuery, Zepto, jQuery Mobile, etc.
1:1 Touch movement: By default, Swiper provides 1:1 touch movement interaction, but this ratio can…

View on GitHub

6. BrowserStore

BrowserStore helps you persist data into various browser-based storage systems. It offers a unified interface on top of your favorite storage systems and makes it simple to persist data without worrying about implementation details.

sarahdayan / browserstore.js

Persist data into various browser-based storage systems.

BrowserStore

It also lets you plug several storage systems at once, sync data between them, and retrieve data from them with the order strategy of your choice.

Download/install

BrowserStore provides builds for different environments.

The recommended way of install is via npm or Yarn:

npm install browserstore.js

// or

yarn add browserstore.js

UMD (browser global)

Include BrowserStore in a script tag and access its methods through the global browserstore variable.

<script src="path/to/umd/browserstore.js"></script>

CommonJS (Node)

const adapter = require('browserstore.js/cjs/adapters/path/to/adapter')
const { createStore } = require('browserstore.js')

AMD (RequireJS, SystemJS, etc.)

requirejs(['path/to/amd/browserstore.js'], function(browserstore) {
  //...
}

…

View on GitHub

7. Template String Converter

VSCode extension that converts a string to a template string when "${" is typed.

meganrogge / template-string-converter

Autocorrect from quotes to backticks

Template String Converter

This Visual Studio Code extension converts a string to a template string when "${" is typed.

Settings

Name	Description	Default Value
`template-string-converter.enable`	Switches the extension on/off	true
`template-string-converter.validLanguages`	Languages the extension should apply to	svelte, typescript, javascript, typescriptreact, javascriptreact
`template-string-converter.quoteType`	single (`''`), double (`""`), or both	both
`template-string-converter.convertOutermostQuotes`	In the case of nested quotes, converts the outermost ones to backticks	false
`template-string-converter.autoRemoveTemplateString`	When `$` or `{` is deleted, replace backticks with quotes	false
`template-string-converter.convertWithinTemplateString`	Within a template string, converts strings to template strings when `${` is typed	true
`template-string-converter.addBracketsToProps`	Adds brackets to the template string for JSX properties	false

View on GitHub

8. lax.js

Simple & lightweight (<4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll.

alexfoxy / lax.js

Simple & lightweight (<4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll.

lax.js

Simple & lightweight (<4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll.

>> DEMO <<

What's new with Lax.js 2.0

Lax.js 2.0 has been completely re-written with a focus on modularity and flexibility giving you more tools to create awesome animations.

New javascript animation syntax, allowing for more advanced effect combos
Use any value to drive animations, for example mouse position, time of day .. and of course scroll!
Animations can be given inertia when scrolling
Create custom CSS bindings
Animation easings
And much more..

Examples

Documentation

1. Getting started

2. Going deeper

3. Glossary

Getting started

NPM Setup

# https://www.npmjs.com/package/lax.js
npm install lax.js
yarn add

…

View on GitHub

9. Sharer.js

Sharer.js is a very tiny JS library to create custom social share components on DOM elements for your website. No dependencies.

ellisonleao / sharer.js

🔛 🔖 Create your own social share buttons. No jquery.

sharer.js

Using Sharer.js on your project? Let me know!

Sharer.js is a very tiny JS library to create custom social share components on DOM elements for your website. No dependencies.

Documentation

Checkout the docs page for more info about installing and usage.

View on GitHub

10. commitlint

commitlint checks if your commit messages meet the conventional commit format.

conventional-changelog / commitlint

📓 Lint commit messages

Get Started | Website

Lint commit messages

Demo generated with svg-term-cli

cat docs/assets/commitlint.json | svg-term --out docs/public/assets/commitlint.svg --frame --profile=Seti --height=20 --width=80

🚓 Be a good commitizen
📦 Share configuration via npm
🤖 Tap into conventional-changelog

Get Started | Website

What is commitlint

commitlint checks if your commit messages meet the conventional commit format.

In general the pattern mostly looks like this:

type(scope?): subject  #scope is optional; multiple scopes are supported (current delimiter options: "/", "\" and ",")

Real world examples can look like this:

chore: run tests on travis ci

fix(server): send cors headers

feat(blog): add comment section

Common types according to commitlint-config-conventional (based on the Angular convention) can be:

build
chore
ci
docs
feat
…

View on GitHub

Stargazing 📈

Top risers over last 7 days🔗

build-your-own-x +1,934 stars
How to secure anything +1,659 stars
Fig +903 stars
Basic computer games +902 stars
Coding Interview University +723 stars

Top growth(%) over last 7 days🔗

Top risers over last 30 days🔗

Coding Interview University +5,271
build-your-own-x +4,685 stars
Mermaid +4,156 stars
CS Video Courses +3,852 stars
Awesome +3,674 stars

Top growth(%) over last 30 days🔗

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.

🚀10 Trending projects on GitHub for web developers - 25th February 2022

Iain Freestone — Fri, 25 Feb 2022 14:28:06 +0000

Trending Projects is available as a weekly newsletter please sign up at Stargazing.dev to ensure you never miss an issue.

1. moize

moize is a consistently blazing fast memoization library for JavaScript. It handles multiple parameters (including default values) without any additional configuration, and offers a large number of options to satisfy any number of potential use-cases.

planttheidea / moize

The consistently-fast, complete memoization solution for JS

moize

moize is a consistently blazing fast memoization library for JavaScript. It handles multiple parameters (including default values) without any additional configuration, and offers a large number of options to satisfy any number of potential use-cases.

$ npm i moize --save

Importing

ESM in browsers

import moize from 'moize';

ESM in NodeJS

import moize from 'moize/mjs/index.mjs';

CommonJS

const moize = require('moize');

…

View on GitHub

2. n8n

n8n-io / n8n

Free and source-available fair-code licensed workflow automation tool. Easily automate tasks across different services.

n8n - Workflow automation tool

n8n is an extendable workflow automation tool. With a fair-code distribution model, n8n will always have visible source code, be available to self-host, and allow you to add your own custom functions, logic and apps. n8n's node-based approach makes it highly versatile, enabling you to connect anything to everything.

Demo

📺 A short video (< 5 min) that goes over key concepts of creating workflows in n8n.

Available integrations

n8n has 200+ different nodes to automate workflows. The list can be found on: https://n8n.io/integrations

Documentation

The official n8n documentation can be found on our documentation website

Additional information and example workflows on the n8n.io website

The release notes can be found here and the list of breaking changes here.

Usage

📚 Learn how to use it from the command line
🐳 Learn how to run n8n in Docker

Start

You can try n8n without…

View on GitHub

3. React Shimmer

A powerful, customisable, Suspense-like img component that (optionally) simulates a shimmer effect while loading. (with zero dependencies!).

gokcan / react-shimmer

🌠 Async loading, performant Image component for React.js

A powerful, customisable, Suspense-like <img> component that (optionally) simulates a shimmer effect while loading. (with zero dependencies!).

Live Demo

Install

npm i react-shimmer

yarn add react-shimmer

Usage

import React from 'react'
import { Image, Shimmer } from 'react-shimmer'

function App() {
  return (
    <div>
      <Image
        src='https://source.unsplash.com/random/800x600'
        fallback={<Shimmer width={800} height={600} />}
      />
    </div>
  )
}

import React from 'react'
import { Image, Breathing } from 'react-shimmer'

function App() {
  return (
    <div>
      <Image
        src='https://source.unsplash.com/random/800x600'
        fallback={<Breathing width={800} height={600} />}
      />
    </div>
  )
}

or you can use your custom React component as a fallback:

import React from 'react'

…

View on GitHub

4. Easings.net

Simple cheat sheet to help developers pick the right easing function.

ai / easings.net

Easing Functions Cheat Sheet

Simple cheat sheet to help developers pick the right easing function.

Contributing

GitHub has great instructions on how to set up Git, fork a project and make pull requests. If you have a problem with Git, just send your files directly to andrey@sitnik.ru.

Translate

Just copy the i18n/en.yml file to i18n/CODE.yml (where CODE is the lowercased RFC 3066 language code of your target language, for example fr-ca for Canadian French) and translate all messages.

Test

Install project dependencies:
```
yarn install
```
That’s all. Run development server:
```
yarn run start
```
And open [localhost:1234] in browser.

View on GitHub

5. JavaScript to Rust ebook

From JavaScript to Rust. Map common JavaScript and node.js workflows to the Rust ecosystem.

Book can be download here

jsoverson / node-to-rust

From JavaScript to Rust ebook

This repository houses an ebook-ified version of the 24+ post series started on vino.dev.

How to build

The ebook is built using asciidoctor and requires ruby >2.3.

Install the ruby dependencies via make deps

$ make deps

Build a PDF via the command make book

$ make book

Running code and projects

All code are housed in the src/ directory.

Day 4

cargo run -p day-4-hello-world
cargo run -p day-4-strings-wtf-1 - intentionally does not compile.
cargo run -p day-4-strings-wtf-2 - intentionally does not compile.

Day 5

Reassigning

JS: node javascript/day-5/let-vs-const/reassigning.js
Rust: cargo run -p day-5-let-vs-const --bin reassigning
cargo run -p day-5-let-vs-const --bin reassigning-wrong-type - intentionally does not compile

Borrowing

cargo run -p day-5-borrowing --bin borrow
cargo run -p day-5-borrowing --bin mutable-borrow - intentionally does not compile

Day 6

cargo run -p day-6-loads-of-strs --bin 200-unique-prints
cargo run -p day-6-loads-of-strs --bin 200-prints
cargo run -p day-6-loads-of-strs…

View on GitHub

6. Add-to-Calendar button

A convenient JavaScript snippet, which lets you create beautiful buttons, where people can add events to their calendars.

add2cal / add-to-calendar-button

Reliably create beautiful Add to Calendar Buttons, where people can add events to their calendars. Without the hustle and unsupported cases.

Your next Add to Calendar Button

The convenient JavaScript Web Component, which lets you reliably create beautiful buttons, where people can add events to their calendars.

For everybody, who wants to include a button at their website or app, which enables users to easily add a specific event to their calendars It's main goal is to keep this process as easy as possible at maximum compatibility. Simply define your button configuration and everything else is automatically generated by the script Supporting calendars at Apple, Google, Microsoft (365, Outlook, Teams), Yahoo, and generic iCal.

The script, since it is a web component, integrates easily with any usual HTML webpage (VanillaJS way) as well as popular JavaScript frameworks and libraries like Angular, React, Vue, Svelte, and more.

Works with all modern browsers (Chrome, Edge, Firefox, Safari) on Windows, Mac, Android, and iOS as well as rather restricted…

View on GitHub

7. fs-extra

fs-extra adds file system methods that aren't included in the native fs module and adds promise support to the fs methods. It also uses graceful-fs to prevent EMFILE errors. It should be a drop in replacement for fs.

jprichardson / node-fs-extra

Node.js: extra methods for the fs object like copy(), remove(), mkdirs()

Node.js: fs-extra

fs-extra adds file system methods that aren't included in the native fs module and adds promise support to the fs methods. It also uses graceful-fs to prevent EMFILE errors. It should be a drop in replacement for fs.

Why?

I got tired of including mkdirp, rimraf, and ncp in most of my projects.

Installation

npm install fs-extra

Usage

CommonJS

fs-extra is a drop in replacement for native fs. All methods in fs are attached to fs-extra. All fs methods return promises if the callback isn't passed.

You don't ever need to include the original fs module again:

const fs = require('fs') // this is no longer necessary

you can now do this:

const fs = require('fs-extra')

or if you prefer to make it clear that you're using fs-extra and not fs, you may want to name…

View on GitHub

8. TinyColor

Fast, small color manipulation and conversion for JavaScript

bgrins / TinyColor

Fast, small color manipulation and conversion for JavaScript

TinyColor

JavaScript color tooling

TinyColor is a small, fast library for color manipulation and conversion in JavaScript. It allows many forms of input, while providing color conversions and other color utility functions. It has no dependencies.

Including in node

tinycolor can be installed from npm:

npm install tinycolor2

Then it can be used in your script like so:

var tinycolor = require("tinycolor2");
var color = tinycolor("red");

Or in a module like so:

import tinycolor from "tinycolor2";
var color = tinycolor("red");

Including in a browser

The package can be bundled from npm, but if you prefer to download it locally you have two choices:

ESM

It can be used as a module by downloading npm/esm/tinycolor.js or using https://esm.sh/tinycolor2.

<script type='module'>
import tinycolor from "https://esm.sh/tinycolor2";
var color = tinycolor("red")

…

View on GitHub

9. Vercel Examples

Curated collection of examples and solutions. Use these patterns to build your own robust and scalable applications.

vercel / examples

Enjoy our curated collection of examples and solutions. Use these patterns to build your own robust and scalable applications.

Vercel Examples

Enjoy our curated collection of examples and solutions. Use these patterns to build your own robust and scalable applications We're going to be shipping new examples weekly. Stay tuned!

Edge Functions – Build high-performance APIs that are deployed to every Edge Network region. Learn more.
Edge Middleware – Provide speed and personalization to your users. Learn more.
Solutions – Demos, Architectures, and Best Practices
Starter – Fully functional applications that encompass an idea as a robust starting point.

Vercel Templates

Multiple examples are being featured in Vercel's Templates, visit that page for more advanced filtering options.

For Vercelians

Examples that have front matter metadata will create a new Draft template in Contentful, for more steps on how to publish a template, read Publishing Templates.

Adding a new example

To quickly start contributing with a new example, run the following commands:

pnpm i
pnpm new-example

If…

View on GitHub

10. Adonis

The Node.js Framework highly focused on developer ergonomics, stability and confidence

adonisjs / core

AdonisJS is a TypeScript-first web framework for building web apps and API servers. It comes with support for testing, modern tooling, an ecosystem of official packages, and more.

@adonisjs/core

Fullstack MVC framework for Node.js

AdonisJs is a fullstack Web framework with focus on ergonomics and speed . It takes care of much of the Web development hassles, offering you a clean and stable API to build Web apps and micro services.

Website | Guides | Contributing

Built with ❤︎ by Harminder Virk

View on GitHub

Stargazing 📈

Top risers over last 7 days🔗

build-your-own-x +2,091 stars
How to secure anything +1,089 stars
Tauri +1,065 stars
Fig +1,037 stars
Mermaid +991 stars

Top growth(%) over last 7 days🔗

Top risers over last 30 days🔗

Coding Interview University +5,470
build-your-own-x +4,412 stars
Mermaid +4,078 stars
NextUI +3,886 stars
Public APIs +3,768 stars

Top growth(%) over last 30 days🔗

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.

🚀10 Trending projects on GitHub for web developers - 18th February 2022

Iain Freestone — Fri, 18 Feb 2022 14:41:04 +0000

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

Basic Usage

View on GitHub

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.

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…

View on GitHub

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

…

View on GitHub

4. Bazinga

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

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

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

View on GitHub

5. Griffel

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

microsoft / 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

📝 Experimental CSS extraction with Webpack plugin

🐞 Debug using Griffel DevTools extension

Griffel with React

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

Learn more?

Check series episodes of Fluent UI Insights related to styling issues and Griffel 🎥

EP02: Styling	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…

View on GitHub

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…

View on GitHub

7. drei

A growing collection of useful helpers and fully functional, ready-made abstractions for react-three-fiber.

pmndrs / drei

🥉 useful helpers 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 CONTRIBUTING!

npm install @react-three/drei

Important

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.

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

Controls

CameraControls

Documentation has moved…

View on GitHub

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.

👉 Demo

Other languages

Português (pt-BR)

Installation

npm i perfect-arrows

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,

…

View on GitHub

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…

View on GitHub

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

…

View on GitHub

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🔗

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🔗

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.

🚀10 Trending projects on GitHub for web developers - 11th February 2022

Iain Freestone — Fri, 11 Feb 2022 14:40:28 +0000

Trending Projects is available as a weekly newsletter please sign up at Stargazing.dev to ensure you never miss an issue.

1. njt

njt (npm jump to): a quick navigation tool for npm packages

kachkaev / njt

njt (npm jump to): a quick navigation tool for npm packages

🐸 njt 🐸

🐸 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]
🐸✨🐸✨🐸

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 → list of package versions with dates on npmjs.com
y → package page on…

View on GitHub

2. zx

A tool for writing better scripts. Bash is great, but when it comes to writing scripts. 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.

google / zx

A tool for writing better scripts

zx

#!/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.

Install

npm install zx

Documentation

Read documentation on google.github.io/zx.

License

Apache-2.0

Disclaimer: This is not an officially supported Google product.

View on GitHub

3. React Awesome Reveal

React components to add reveal animations using the Intersection Observer API and CSS Animations

awesome-reveal / react-awesome-reveal

React components to add reveal animations using the Intersection Observer API and CSS Animations.

React Awesome Reveal

Tip

If you like this library, please consider supporting its creator.

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

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

View on GitHub

4. Mailwind

Use Tailwind CSS to design HTML emails.

soheilpro / mailwind

Use Tailwind CSS to design HTML emails.

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…

View on GitHub

5. Staticman

eduardoboucas / staticman

💪 User-generated content for Git-powered websites

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…

View on GitHub

6. react-spring-bottom-sheet

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.

stipsan / react-spring-bottom-sheet

Accessible ♿️, Delightful ✨, & Fast 🚀

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

…

View on GitHub

7. React Search Box

An autocomplete search box built with and for React.

ghoshnirmalya / react-search-box

🎨 An autocomplete search box built with and for React

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

Prop	Description
placeholder	The placeholder text for the input box
data

…

View on GitHub

8. match-sorter

Simple, expected, and deterministic best-match sorting of an array in JavaScript

kentcdodds / match-sorter

Simple, expected, and deterministic best-match sorting of an array in JavaScript

match-sorter

Simple, expected, and deterministic best-match sorting of an array in JavaScript

Demo

The problem

You have a list of dozens, hundreds, or thousands of items
You want to filter and sort those items intelligently (maybe you have a filter input for the user)
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:

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

View on GitHub

9. find-up

Find a file or directory by walking up parent directories

sindresorhus / find-up

Find a file or directory by walking up parent directories

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 could not be found.

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

Returns a Promise for either the first path…

View on GitHub

10. mande

600 bytes convenient and modern wrapper around fetch with smart extensible defaults

posva / mande

<700 bytes convenient and modern wrapper around fetch with smart extensible defaults

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(

…

View on GitHub

Stargazing 📈

Top risers over last 7 days🔗

Coding Interview University +2,026 stars
Build your own X +1,285 stars
Medusa +1,147 stars
30 Days of JavaScript +1,132 stars
Awesome +1,111 stars

Top growth(%) over last 7 days🔗

Top risers over last 30 days🔗

Public APIs +5,786
Coding Interview University +5,521 stars
Awesome +4,464 stars
NextUI +3,812 stars
Tauri +3,319 stars stars

Top growth(%) over last 30 days🔗

NextUI +363%
Learn web3 Dapp +47%
Mantine +42%
p +39%
Remix Auth +38%

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.

🚀10 Trending projects on GitHub for web developers - 4th February 2022

Iain Freestone — Fri, 04 Feb 2022 14:44:50 +0000

Trending Projects is available as a weekly newsletter please sign up at Stargazing.dev to ensure you never miss an issue.

1. Netlify CMS

A content management system (CMS) for static site generators. Give users a simple way to edit and add content to any site built with a static site generator.

decaporg / decap-cms

A Git-based CMS for Static Site Generators

decapcms.org

A CMS for static site generators. Give users a simple way to edit and add content to any site built with a static site generator.

Decap CMS is the new name of Netlify CMS since February 2023.

Community Chat

Join us on Discord

How It Works

Decap CMS is a single-page app that you pull into the /admin part of your site.

It presents a clean UI for editing content stored in a Git repository.

You setup a YAML config to describe the content model of your site, and typically tweak the main layout of the CMS a bit to fit your own site.

When a user navigates to /admin/ they'll be prompted to log in, and once authenticated they'll be able to create new content or edit existing content.

Read more about Decap CMS Core Concepts.

Installation and Configuration

The Decap CMS can be used in…

View on GitHub

2. WebGoat

WebGoat is a deliberately insecure web application maintained by OWASP designed to teach web application security lessons.

WebGoat / WebGoat

WebGoat is a deliberately insecure application

WebGoat: A deliberately insecure Web Application

Introduction

WebGoat is a deliberately insecure web application maintained by OWASP designed to teach web application security lessons.

This program is a demonstration of common server-side application flaws. The exercises are intended to be used by people to learn about application security and penetration testing techniques.

WARNING 1: While running this program your machine will be extremely vulnerable to attack. You should disconnect from the Internet while using this program. WebGoat's default configuration binds to localhost to minimize the exposure.

WARNING 2: This program is for educational purposes only. If you attempt these techniques without authorization, you are very likely to get caught. If you are caught engaging in unauthorized hacking, most companies will fire you Claiming that you were doing security research will not work as that is the first thing that all hackers claim.

Installation instructions:

For more details check the Contribution…

View on GitHub

3. Speedy.js

Speedy.js is a compiler for a well considered, performance pitfalls free subset of JavaScript targeting WebAssembly. Because WebAssembly is statically-typed, the project uses TypeScript as type-checker and to resolve the types of the program symbols.

MichaReiser / speedy.js

Accelerate JavaScript Applications by Compiling to WebAssembly

Speedy.js

The project is very experimental and still far away from being production ready.

Getting Started

Setup LLVM

First, you need an LLVM installation that includes the experimental WebAssembly target. You can test if your LLVM installation includes the WebAssembly backend by running

llvm-config --targets-built

If the output contains the word WebAssembly you are good to go (continue with Install Cross Compiler). If not, then you have to build LLVM from source by following these instructions.

After LLVM has been built and is installed, set the path to the llvm-config executable (it is located in the installation directory) using npm config set or an .npmrc file in your project:

npm config set LLVM_CONFIG

…

View on GitHub

4. soketi

soketi is your simple, fast, and resilient open-source WebSockets server.

soketi / soketi

Next-gen, Pusher-compatible, open-source WebSockets server. Simple, fast, and resilient. 📣

soketi

Next-gen, Pusher-compatible, open-source WebSockets server. Simple, fast, and resilient. 📣

🤝 Supporting

Soketi is meant to be open source, forever and ever. It solves issues that many developers face - the one of wanting to be limitless while testing locally or performing benchmarks. More than that, itt is also suited for production usage, either it is public for your frontend applications or internal to your team.

The frequency of releases and maintenance is based on the available time, which is tight as hell. Recently, there were issues with the maintenance and this caused infrequent updates, as well as infrequent support.

To cover some of the expenses of handling new features or having to maintain the project, we would be more than happy if you can donate towards the goal. This will ensure that Soketi will be taken care of at its full extent.

💰 Sponsor the development via Github…

View on GitHub

5. unimported

unimported analyzes your code by following the require/import statements starting from your entry file. The result is a report showing which files are unimported, which dependencies are missing from your package.json, and which dependencies can be removed from your package.json.

smeijer / unimported

Find and fix dangling files and unused dependencies in your JavaScript projects.

Archived

Important

This project is no longer maintained. There's a project called knip which has more features, and is actively maintained by Lars Kappert. Thank you for using unimported over the years! Enjoy knip, and say hi to me on Twitter/X.

unimported

Find unused source files in javascript / typescript projects.

While adding new code to our projects, we might forget to remove the old code. Linters warn us for unused code in a module, but they fail to report unused files.

unimported analyzes your code by following the require/import statements starting from your entry file.

The result is a report showing which files are unimported, which dependencies are missing from your package.json, and which dependencies can be removed from your package.json.

Usage

Run the following command in the root of your project (next to package.json). The result will be as shown under example

npx

…

View on GitHub

6. react-responsive

CSS media queries in react - for responsive design, and more.

yocontra / react-responsive

CSS media queries in react - for responsive design, and more.

react-responsive

Information

Package	react-responsive
Description	Media queries in react for responsive design
Browser Version	>= IE6*
Demo

The best supported, easiest to use react media query module.

Install

$ npm install react-responsive --save

Example Usage

With Hooks

Hooks is a new feature available in 8.0.0!

import React from 'react'
import { useMediaQuery } from 'react-responsive'
const Example = () => {
  const isDesktopOrLaptop = useMediaQuery({
    query: '(min-width: 1224px)'
  })
  const isBigScreen = useMediaQuery({ query: '(min-width: 1824px)' })
  const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1224px)' })
  const isPortrait = useMediaQuery({ query: '(orientation: portrait)' })
  const isRetina = useMediaQuery({ query: '(min-resolution: 2dppx)' })

  return (
    <div>
      <h1>Device Test!</h1>
      {isDesktopOrLaptop && <p>You are a desktop or laptop</

…

View on GitHub

7. diff2html

diff2html generates pretty HTML diffs from git diff or unified diff output.

rtfpessoa / diff2html

Pretty diff to html javascript library (diff2html)

diff2html

diff2html generates pretty HTML diffs from git diff or unified diff output.

Features

Supports git and unified diffs
Line by line and Side by side diff
New and old line numbers
Inserted and removed lines
GitHub like visual style
Code syntax highlight
Line similarity matching
Easy code selection

Online Example

Go to diff2html

Distributions

jsdelivr CDN
WebJar
Node Library
NPM CLI
Manually use from jsdelivr or build the project
- Browser / Bundle
  - Parser and HTML Generator
    - bundles/js/diff2html.min.js - includes the diff parser and html generator
  - Wrapper and helper adding syntax highlight, synchronized scroll, and other nice features
    - bundles/js/diff2html-ui.min.js - includes the…

View on GitHub

8. hyperid

Uber-fast unique id generation, for Node.js and the browser

mcollina / hyperid

Uber-fast unique id generation, for Node.js and the browser

hyperid

Uber-fast unique id generation, for Node.js and the browser Here are the benchmarks:

crypto.randomUUID x 12,969,725 ops/sec ±0.88% (91 runs sampled)
hashids process.hrtime x 419,350 ops/sec ±0.66% (94 runs sampled)
hashids counter x 819,049 ops/sec ±0.58% (93 runs sampled)
shortid x 40,820 ops/sec ±2.49% (87 runs sampled)
crypto.random x 372,773 ops/sec ±2.39% (84 runs sampled)
nid x 1,614,450 ops/sec ±0.38% (93 runs sampled)
uuid.v4 x 1,446,051 ops/sec ±0.60% (98 runs sampled)
napiRsUuid.v4 x 8,676,151 ops/sec ±0.49% (97 runs sampled)
uuid.v1 x 2,051,072 ops/sec ±0.15% (99 runs sampled)
nanoid x 4,293,733 ops/sec ±0.31% (97 runs sampled)
hyperid - variable length x 25,937,129 ops/sec ±1.48% (91 runs sampled)
hyperid - fixed length x 24,970,478 ops/sec ±1.48% (92 runs sampled)
hyperid - fixed length, url safe x 25,856,735 ops/sec ±1.93% (92 runs sampled)

Fastest is hyperid - variable length,hyperid - fixed length, url safe
Slowest is shortid

Note: Benchmark run with Intel(R)…

View on GitHub

9. react-collapse

Component-wrapper for collapse animation with CSS for elements with variable and dynamic height

kunukn / react-collapse

Component-wrapper for collapse animation with CSS for elements with variable and dynamic height

react-collapse

Collapse component with CSS transition for elements with variable and dynamic height.

react-collapse

Demo

CSS required

⚠️ ️You need to add style (transition) in your own stylesheet to add animation. Here is an example.

<style>
  .collapse-css-transition {
    transition: height 280ms cubic-bezier(0.4, 0, 0.2, 1);
  }
</style>

Alternatively, you can add it using the transition prop.

Installation for React 16.8+

UMD minified ~2.3 kb, gzipped ~1.1 kb
Module minified ~2.9 kb, gzipped ~1.1 kb
CJS minified ~2.0 kb, gzipped ~1.0 kb

npm i -D @kunukn/react-collapse
# or
# yarn add -D @kunukn/react-collapse

Installation for React 16.3+

Avoid it if possible. This is no longer maintained.

UMD minified ~5.8 kb, gzipped ~2.1 kb

npm i -D @kunukn/react-collapse@^1
# or
# yarn add

…

View on GitHub

10. knex.js

A query builder for PostgreSQL, MySQL, CockroachDB, SQL Server, SQLite3 and Oracle, designed to be flexible, portable, and fun to use.

knex / knex

A query builder for PostgreSQL, MySQL, CockroachDB, SQL Server, SQLite3 and Oracle, designed to be flexible, portable, and fun to use.

knex.js

A SQL query builder that is flexible, portable, and fun to use!

A batteries-included, multi-dialect (PostgreSQL, MySQL, CockroachDB, MSSQL, SQLite3, Oracle (including Oracle Wallet Authentication)) query builder for Node.js, featuring:

Node.js versions 12+ are supported.

Take a look at the full documentation to get started!
Browse the list of plugins and tools built for knex
Check out our recipes wiki to search for solutions to some specific problems
In case of upgrading from an older version, see migration guide

You can report bugs and discuss features on the GitHub issues page or send tweets to @kibertoad.

For support and questions, join our Gitter channel.

For knex-based Object Relational Mapper, see:

To see the SQL that Knex will generate for a given query, you can use Knex Query…

View on GitHub

Stargazing 📈

Top risers over last 7 days🔗

CS Video courses +2,964 stars
NextUI +2,280 stars
LinkedIn Skills Assessements +1,237 stars
Public APIS +780 stars
Coding Interview University +768 stars

Top growth(%) over last 7 days🔗

Top risers over last 30 days🔗

Public APIs +5,703
Awesome +4,158 stars
Tauri +4,012 stars stars
30 Days of JavaScript +3,646 stars
Coding Interview University +3,587 stars

Top growth(%) over last 30 days🔗

NextUI +324%
Iconoir +136%
Fuite +64%
Amplify UI +61%
Learn web3 dapp +48%

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.

🚀10 Trending projects on GitHub for web developers - 28th January 2022

Iain Freestone — Fri, 28 Jan 2022 15:26:26 +0000

Trending Projects is available as a weekly newsletter please sign up at Stargazing.dev to ensure you never miss an issue.

1. ui-box

ui-box is a low level CSS-in-JS solution that focuses on being simple, fast and extensible. All CSS properties are set using simple React props, which allows you to easily create reusable components that can be enhanced with additional CSS properties.

segmentio / ui-box

Blazing Fast React UI Primitive

📦 ui-box is a low level CSS-in-JS solution that focuses on being simple, fast and extensible. All CSS properties are set using simple React props, which allows you to easily create reusable components that can be enhanced with additional CSS properties. This is very useful for adding things like margins to components, which would normally require adding non-reusable wrapper elements/classes.

Install

yarn add ui-box
# or
npm install --save ui-box

Usage

import Box from 'ui-box'

function Button(props) {
  return <Box is="button" padding="10px" background="red" {...props} />
}

function Example() {
  return (
    <Button disabled margin="10px">
      Hi
    </Button>
  )
}

The above example component renders a red, disabled <button> with margins.

API

Box (default export)

is

Type: string or React component type
Default: 'div'

Lets you change the underlying…

View on GitHub

2. clay.css

Easily add claymorphic styles to any HTML element with this micro class and SASS mixin.

codeAdrian / clay.css

Easily add claymorphic styles to any HTML element with this micro class and SASS mixin.

clay.css

Extensible and configurable micro CSS util class and SASS mixin for adding claymorphism styles to your components.

About

Claymorphism is a fresh new concept. The name was coined by Michał Malewicz and the designers are excited to explore the possibilities of this approach to UI design.

It features inflated fluffy 3D elements which look charming and introduce a much more vibrant look compared to the usual flat designs.

What sets claymorphism apart from neumorphism is that it floats above the background instead of being connected to it, eliminating accessibility issues and design restrictions of the latter.

Installation

CDN

<link
  rel="stylesheet"
  href="https://unpkg.com/claymorphism-css/dist/clay.css"
/>

NPM

npm i claymorphism-css

yarn add claymorphism-css

Manual

Download and add the dist/clay.css or dist/clay.scss manually.

Usage

This is a minimal, single class CSS util that applies only basic claymorphism styles:

Background
Border radius
One outset shadow
Two inset shadows

<div class="clay">

…

View on GitHub

3. React Sticky Box

Sticky Boxes with sensible behaviour if the content is bigger than the viewport.

codecks-io / react-sticky-box

Sticky boxes for contents of all sizes

React Sticky Box

Sticky Boxes with sensible behaviour if the content is bigger than the viewport.

Documentation & Demo

react-sticky-box.codecks.io

Quick Start

Use as a Component

import StickyBox from "react-sticky-box";

const Page = () => (
  <div className="row">
    <StickyBox offsetTop={20} offsetBottom={20}>
      <div>Sidebar</div>
    </StickyBox>
    <div>Content</div>
  </div>
);

Or via the `useStickyBox` hook

import {useStickyBox} from "react-sticky-box";
const Page = () => {
  const stickyRef = useStickyBox({offsetTop: 20, offsetBottom: 20})
  <div className="row">
    <aside ref={stickyRef}>
      <div>Sidebar</div>
    </aside>
    <div>Content</div>

…

View on GitHub

4. Monio

The most powerful IO monad implementation in JS, possibly in any language!

getify / monio

The most powerful IO monad implementation in JS, possibly in any language!

Monio

Monio (mō'ne-yo) provides an async-capable IO Monad (including "do" style) for JS, with several helpful companion monads (like Maybe and Either) thrown in.

Monio's IO/IOx is the most powerful IO monad implementation in JS, possibly in any language!

Note: This is obviously a marketing claim, not a provable mathematical/scientific assertion. Nevertheless, I believe it's true!

Just("Welcome, Monads")
.concat(Just(" And Friends"))
.map(v => v.toUpperCase())
.fold(Maybe.from)
.map(v => v + "!")
.fold(
    () => IO.of("--empty--"),
    greetings => IO(() => console.log(greetings))
)
.run();
// WELCOME, MONADS AND FRIENDS!

Wait, What's A "Monad"?

If you're already comfortable with Functional Programming (FP), and you're…

View on GitHub

5. Color Legend Element

A custom element (web component) suitable for use as a legend in data visualizations

clhenrick / color-legend-element

A custom element (web component) suitable for use as a legend in data visualizations

Color Legend Element

<color-legend
  titletext="Snowfall (cm)"
  scaletype="continuous"
  tickformat=".0f"
  domain="[0, 100]"
  range='["#eff3ff", "#bdd7e7", "#6baed6", "#3182bd", "#08519c"]'
>
</color-legend>

A Custom Element suitable for use as a legend in data visualizations. Built with Lit and D3JS.

Features

Render legends for continuous, discrete, threshold, and categorical scales.
Uses d3-scale's concept of a domain and a range for mapping values to visual marks.
Compatible with color interpolators from d3-scale-chromatic
Customizable via its properties / attributes and CSS variables.
Framework and bundler not required, just add a <script> tag and use it!
Small bundle size: 27kb minified and 9kb gzipped.

Installation

NOTE: the <color-legend> assumes D3JS is available as a peer dependency. At the very least this should include the following modules from the D3JS library: d3-scale, d3-array, d3-format, d3-interpolate…

View on GitHub

6. Computer Science courses with video lectures

List of Computer Science courses with video lectures.

Developer-Y / cs-video-courses

List of Computer Science courses with video lectures.

Computer Science courses with video lectures

Introduction

Please check NOTES for general information about this list.
Please refer CONTRIBUTING.md for contribution guidelines.
Please feel free to raise any genuine issue you may have, however, it has been noticed that few people open empty issues to raise their GitHub contribution on their account. Such spammers will be blocked.
You are welcome to contribute, please create PR for actual college/University level courses. Please do not add links for small MOOCs, basic tutorials, or advertisements for some sites/channels.

Table of Contents

View on GitHub

7. npm-run-all

A CLI tool to run multiple npm-scripts in parallel or sequential.

mysticatea / npm-run-all

A CLI tool to run multiple npm-scripts in parallel or sequential.

index	npm-run-all	run-s	run-p	Node API

npm-run-all

A CLI tool to run multiple npm-scripts in parallel or sequential.

⤴️ Motivation

Simplify. The official npm run-script command cannot run multiple scripts, so if we want to run multiple scripts, it's redundant a bit. Let's shorten it by glob-like patterns. Before: npm run clean && npm run build:css && npm run build:js && npm run build:html After: npm-run-all clean build:*
Cross platform. We sometimes use & to run multiple command in parallel, but cmd.exe (npm run-script uses it by default) does not support the &. Half of Node.js users are using it on Windows, so the use of & might block contributions. npm-run-all --parallel works well on Windows as well.

💿 Installation

$ npm install npm-run-all --save-dev
# or
$ yarn add npm-run-all --dev

It requires Node@>=4.

📖 Usage

CLI Commands

This npm-run-all package provides 3 CLI commands.

npm-run-all
…

View on GitHub

8. Semi-UI

A modern, comprehensive, flexible design system and React UI library

DouyinFE / semi-design

🚀A modern, comprehensive, flexible design system and React UI library. 🎨 Provide more than 3000+ Design Tokens, easy to build your design system. Make Semi Design to Any Design. 🧑🏻‍💻 Design to Code in one click

Semi-UI

A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps

English | 简体中文

🎉 Features

💪 Up to 60+ high-quality Components. Stable update since 2019
🚀 Official Design to Code (D2C) support, convert figma draft to real code in a few seconds
💅 Code to Design (C2D), automatically generate Figma UI Kit according to different themes, keep same between design and code
💕 Complete A11y support, follows W3C standards to provide keyboard interaction, focus management and ARIA for all components
💅 Design system management Semi DSM, up to 2700+ Design Tokens, make Semi Design to Any Design quickly.
🌍 Internationalization Support for Dozens of Languages, timezone, RTL support
⚙️ Strict quality assurance, covering unit testing, E2E testing, visual testing.
👏 Written in Typescript, friendly Static Type Support. Based on Foundation/Adapter architecture, easy to read and contribute
🥳 SSR (Server Side Rendering)…

View on GitHub

9. Underscore.js

Underscore.js is a utility-belt library for JavaScript that provides support for the usual functional suspects (each, map, reduce, filter...) without extending any core JavaScript objects.

jashkenas / underscore

JavaScript's utility _ belt

                   __
                  /\ \                                                         __
 __  __    ___    \_\ \     __   _ __   ____    ___    ___   _ __    __       /\_\    ____
/\ \/\ \ /' _ `\  /'_  \  /'__`\/\  __\/ ,__\  / ___\ / __`\/\  __\/'__`\     \/\ \  /',__\
\ \ \_\ \/\ \/\ \/\ \ \ \/\  __/\ \ \//\__, `\/\ \__//\ \ \ \ \ \//\  __/  __  \ \ \/\__, `\
 \ \____/\ \_\ \_\ \___,_\ \____\\ \_\\/\____/\ \____\ \____/\ \_\\ \____\/\_\ _\ \ \/\____/
  \/___/  \/_/\/_/\/__,_ /\/____/ \/_/ \/___/  \/____/\/___/  \/_/ \/____/\/_//\ \_\ \/___/
                                                                              \ \____/
                                                                               \/___/

Underscore.js is a utility-belt library for JavaScript that provides support for the usual functional suspects (each, map, reduce, filter...) without extending any core JavaScript objects.

For Docs, License, Tests, and pre-packed downloads, see https://underscorejs.org

For support and questions, please consult our security policy the gitter channel or stackoverflow

Underscore is an open-sourced component of DocumentCloud https://github.com/documentcloud

Many thanks…

View on GitHub

10. Parcel

Parcel is a zero configuration build tool for the web. It combines a great out-of-the-box development experience with a scalable architecture that can take your project from just getting started to massive production application.

parcel-bundler / parcel

The zero configuration build tool for the web. 📦🚀

Features

😍 Zero config – Parcel supports many languages and file types out of the box, from web technologies like HTML, CSS, and JavaScript, to assets like images, fonts, videos, and more. It has a built-in dev server with hot reloading, beautiful error diagnostics, and much more. No configuration needed!
⚡️ Lightning fast – Parcel's JavaScript compiler is written in Rust for native performance. Your code is built in parallel using worker threads, utilizing all of the cores on your machine. Everything is cached, so you never build the same code twice. It's like using watch mode, but even when you restart Parcel!
🚀 Automatic production optimization – Parcel optimizes your whole app for production automatically…

View on GitHub

Stargazing 📈

Top risers over last 7 days🔗

Public APIs +1,995 stars
Coding Interview University +1,512 stars
Awesome +1,220 stars
Tech Interview Handbook +1,128 stars
Mantine +972 stars

Top growth(%) over last 7 days🔗

NextUI +32%
Mantine +25%
Remix Auth +11%
Preview.js +10%
p +9%

Top risers over last 30 days🔗

Public APIs +5,366
Awesome +4,887 stars
Tauri +3,937 stars stars
30 Days of JavaScript +3,502 stars
Awesome Selfhosted +3,213 stars

Top growth(%) over last 30 days🔗

Iconoir +123%
Basic Computer Games +98%
Fuite +71%
NextUI +48%
Remix Auth +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.

🚀10 Trending projects on GitHub for web developers - 21st January 2022

Iain Freestone — Fri, 21 Jan 2022 14:30:30 +0000

Trending Projects is available as a weekly newsletter please sign up at Stargazing.dev to ensure you never miss an issue.

1. React-Text-transition

Animate your text changes.

WinterCore / react-text-transition

Animate your text changes

React-Text-transition

Animate your text changes

Installation

npm install -S react-text-transition

Using the demo

npm run dev

How to use

Example

import React from 'react';
import TextTransition, { presets } from 'react-text-transition';
const TEXTS = ['Forest', 'Building', 'Tree', 'Color'];

const App = () => {
  const [index, setIndex] = React.useState(0);

  React.useEffect(() => {
    const intervalId = setInterval(
      () => setIndex((index) => index + 1),
      3000, // every 3 seconds
    );
    return () => clearTimeout(intervalId);
  }, []);

  return (
    <h1>
      <TextTransition springConfig={presets.wobbly}>{TEXTS[index % TEXTS.length]}</TextTransition>
    </h1

…

View on GitHub

2. SunCalc

A tiny JavaScript library for calculating sun/moon positions and phases.

mourner / suncalc

A tiny JavaScript library for calculating sun/moon positions and phases.

SunCalc

SunCalc is a tiny BSD-licensed JavaScript library for calculating sun position sunlight phases (times for sunrise, sunset, dusk, etc.) moon position and lunar phase for the given location and time, created by Vladimir Agafonkin (@mourner) as a part of the SunCalc.net project.

Most calculations are based on the formulas given in the excellent Astronomy Answers articles about position of the sun and the planets. You can read about different twilight phases calculated by SunCalc in the Twilight article on Wikipedia.

Usage example

// get today's sunlight times for London
var times = SunCalc.getTimes(new Date(), 51.5, -0.1);
// format sunrise time from the Date object
var sunriseStr = times.sunrise.getHours() + ':' + times.sunrise.getMinutes();

// get position of the sun (azimuth and

…

View on GitHub

3. Simple.css

Simple.css is a classless CSS template that allows you to make a good looking website really quickly.

kevquirk / simple.css

Simple.css is a CSS template that allows you to make a good looking website really quickly.

Simple.css {}

Simple.css is a CSS template that allows you to make a good looking website really quickly.

Find out more at https://simplecss.org.

Supported Browsers

Any evergreen browser > IE11 (why is IE still a thing?)

View on GitHub

4. Danfo.js

Danfo.js is an open source, JavaScript library providing high performance, intuitive, and easy to use data structures for manipulating and processing structured data.

javascriptdata / danfojs

Danfo.js is an open source, JavaScript library providing high performance, intuitive, and easy to use data structures for manipulating and processing structured data.

Danfojs: powerful javascript data analysis toolkit

What is it?

Danfo.js is a javascript package that provides fast, flexible, and expressive data structures designed to make working with "relational" or "labeled" data both easy and intuitive. It is heavily inspired by Pandas library, and provides a similar API. This means that users familiar with Pandas, can easily pick up danfo.js.

Main Features

Danfo.js is fast and supports Tensorflow.js tensors out of the box. This means you can convert Danfo data structure to Tensors.
Easy handling of missing-data (represented as NaN) in floating point as well as non-floating point data
Size mutability: columns can be inserted/deleted from DataFrame
Automatic and explicit alignment: objects can be explicitly aligned to a set of labels, or the user can simply ignore the labels and let Series, DataFrame, etc. automatically align the data for you in computations
Powerful, flexible groupby functionality…

View on GitHub

5. canvas-datagrid

Canvas based data grid web component. Capable of displaying millions of contiguous hierarchical rows and columns without paging or loading, on a single canvas element.

TonyGermaneri / canvas-datagrid

Canvas based data grid web component. Capable of displaying millions of contiguous hierarchical rows and columns without paging or loading, on a single canvas element.

canvas-datagrid

Demo

Works with Firefox, Edge, Safari and Chrome.
Native support for touch devices (phones and tablets).
Rich documentation, tutorials, and slack support.
Single canvas element, drawn in immediate mode, data size does not impact performance.
Support for unlimited rows and columns without paging or loading.
Rich API of events, methods and properties using the familiar W3C DOM interface.
Extensible styling, filtering, formatting, resizing, selecting, and ordering.
Support for hierarchal drill in style row level inner grids as well grids in cells.
Customizable hierarchal context menu.
Built in and custom styles.
W3C Web Component. Works in all frameworks.
Per-user styles, column sizes, row sizes, view preferences and settings using localStorage.
Small file size

Documentation

Tutorials

Slack Support (message author for invite)

Style Builder

Download latest version (minified)

Tests

Source Code

Latest Test Coverage

Installation

With npm

npm install canvas-datagrid

Place the single source file ./dist/canvas-datagrid.js in your…

View on GitHub

6. Vest

Vest is a form-validation framework inspired by unit testing libraries like Mocha or Jest; It is designed to be easy to use and easy to learn by introducing their declarative syntax.

ealush / vest

Vest ✅ Declarative validations framework

Vest - Declarative validations framework

Vest Documentation

Vest is a declarative validations framework designed to simplify the process of writing and maintaining form validations for your web application. Inspired by popular unit testing libraries such as Mocha and Jest, Vest allows developers to describe their validation requirements using a suite-like syntax, separating validation logic from feature logic to create more maintainable and readable code.

Vest's framework-agnostic approach means that it can be used with any UI framework, or without any framework at all. With Vest, you can reduce code bloat, improve feature readability and maintainability, and enhance the user experience of your web application.

test('username', 'Username is required', () => {
  enforce(data.username).isNotBlank();
});
test('username', 'Username must be at least 3 chars', () => {
  enforce(data.

…

View on GitHub

7. Vanta JS

Animated 3D backgrounds for your website

tengbao / vanta

Animated 3D backgrounds for your website

Vanta JS

View demo gallery & customize effects at www.vantajs.com →

What is Vanta? / FAQs

Add 3D animated digital art to any webpage with just a few lines of code.
How it works: Vanta inserts an animated effect as a background into any HTML element.
Works with vanilla JS, React, Angular, Vue, etc.
Effects are rendered by three.js (using WebGL) or p5.js.
Effects can interact with mouse/touch inputs.
Effect parameters (e.g. color) can be easily modified to match your brand.
Total additional file size is ~120kb minified and gzipped (mostly three.js), which is smaller than comparable background images/videos.
Vanta includes many predefined effects to try out. More effects will be added soon!

View demo gallery & customize effects at www.vantajs.com →

Basic usage with script tags:

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta/dist/vanta.waves.min.js"></script>
<script

…

View on GitHub

8. Gest

A sensible GraphQL testing tool - test your GraphQL schema locally and in the cloud

mfix22 / gest

👨‍💻 A sensible GraphQL testing tool - test your GraphQL schema locally and in the cloud

A sensible GraphQL testing tool.

Usage

$ npm install -g gest

then send queries with gest (pronounced guest [/ɡest/]).

$ gest [options] [query | pathToFileWithQuery]

Examples

$ gest '{ test }'

$ gest test.graphql

# with `test.graphql` containing
{
  test
}

or multiple

$ gest test.graphql '{ test }' introspection.graphql
# will run all three queries!

REPL

If you run gest with no arguments, it will open a REPL for you to run queries in:

$ gest

Query: { test }

{
  data: {
    test: "success!"
  }
}

HTTP

If you specify a baseURL in your config, gest will send an POST request with your query correctly encoded in the body. Your baseURL must be a valid URL.

You can specify HTTP headers by using -H key=value flags.

This is especially convenient if you are using a Now workflow.

Example

…

View on GitHub

9. Falso

Create massive amounts of fake data in the browser and NodeJS. Tree Shakeable & Fully Typed.

ngneat / falso

All the Fake Data for All Your Real Needs 🙂

All the Fake Data for All Your Real Needs 🙂

Create massive amounts of fake data in the browser and NodeJS. Tree Shakeable & Fully Typed.

✅ 203 Functions
✅ Tree Shakable
✅ Fully Typed
✅ Factory Functions
✅ Entity Functions
✅ Single and Array Result

🤓 Learn about it on the docs site

Sponsoring ngneat

Sponsorships aid in the continued development and maintenance of ngneat libraries. Consider asking your company to sponsor ngneat as its core to their business and application development.

Gold Sponsors

Elevate your support by becoming a Gold Sponsor and have your logo prominently featured on our README in the top 5 repositories.

Silver Sponsors

Boost your backing by becoming a Gold Sponsor and enjoy the spotlight with your logo prominently showcased in the top 3 repositories on our README.

Bronze Sponsors

Become a bronze sponsor and get your logo on our README on GitHub.

StackBlitz

…

View on GitHub

10. Lazy Load

Vanilla JavaScript plugin for lazy loading images. Delays loading of images in long web pages. Images outside of viewport will not be loaded before user scrolls to them. This is opposite of image preloading.

tuupola / lazyload

Vanilla JavaScript plugin for lazyloading images

Lazy Load Remastered

Lazy Load delays loading of images in long web pages. Images outside of viewport will not be loaded before user scrolls to them. This is opposite of image preloading.

This is a modern vanilla JavaScript version of the original Lazy Load plugin. It uses Intersection Observer API to observe when the image enters the browsers viewport. Original code was inspired by YUI ImageLoader utility by Matt Mlinac. New version loans heavily from a blog post by Dean Hume.

Basic Usage

By default Lazy Load assumes the URL of the original high resolution image can be found in data-src attribute. You can also include an optional low resolution placeholder in the src attribute.

<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js"></script>
<img class="lazyload" data-src="img/example.jpg" width="765" height="574" />
<img class="lazyload"

…

View on GitHub

Stargazing 📈

Top risers over last 7 days🔗

Public APIs +1,525 stars
Tauri +949 stars
Free for Dev +686 stars
CyberChef +649 stars
Awesome +636 stars

Top growth(%) over last 7 days🔗

p +18%
Node Intergration Tests +14%
React Preview +13%
riju +10%
Vitest +9%

Top risers over last 30 days🔗

Awesome +4,507 stars
Awesome Self Hosted +3,757 stars
Public APIs +3,521 stars
Tabby +3,183 stars
30 Days of JavaScript +3,163 stars

Top growth(%) over last 30 days🔗

Iconoir +117%
Vitest +111%
Basic Computer Games +96%
Fuite +95%
TinySpy +52%

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.

🚀10 Trending projects on GitHub for web developers - 14th January 2022

Iain Freestone — Fri, 14 Jan 2022 14:45:14 +0000

Trending Projects is available as a weekly newsletter please sign up at Stargazing.dev to ensure you never miss an issue.

1. PptxGenJS

Create PowerPoint presentations with a powerful, concise JavaScript API.

gitbrent / PptxGenJS

Create PowerPoint presentations with a powerful, concise JavaScript API.

PptxGenJS

Create JavaScript PowerPoint Presentations

Introduction

This library creates Open Office XML (OOXML) Presentations which are compatible with Microsoft PowerPoint, Apple Keynote, and other applications.

Features

Works Everywhere

Every modern desktop and mobile browser is supported
Integrates with Node, Angular, React, and Electron
Compatible with PowerPoint, Keynote, and more

Full Featured

All major object types are available (charts, shapes, tables, etc.)
Master Slides for academic/corporate branding
SVG images, animated gifs, YouTube videos, RTL text, and Asian fonts

Simple and Powerful

The absolute easiest PowerPoint library to use
Learn as you code will full typescript definitions included
…

View on GitHub

2. antfu/p

Toolkit for managing multiple promises.

antfu / p

Toolkit for managing multiple promises

DEPRECATED, now it's part of `@antfu/utils`

@antfu/p

Toolkit for managing multiple promises.

Without

const items = [1, 2, 3, 4, 5]

(await Promise.all(items
  .map(async i => {
    const v = await multiply(i, 3)
    const even = await isEven(v)
    return [even, v]
  })))
    .filter(x => x[0])
    .map(x => x[1])

import P from '@antfu/p'

const items = [1, 2, 3, 4, 5]

await P(items)
  .map(async i => await multiply(i, 3))
  .filter(async i => await isEven(i))
// [6, 12]

import P from '@antfu/p'
const p = P(

…

View on GitHub

3. fx

Command-line tool and terminal JSON viewer

antonmedv / fx

Terminal JSON viewer & processor

f(x)

^{Special thanks to:}

Warp is a modern, Rust-based terminal with AI built in so you and your team can build great software, faster.

Visit warp.dev to learn more.

Install

brew install fx

Documentation

See full documentation at fx.wtf.

License

MIT

View on GitHub

4. http-server

A simple zero-configuration command-line HTTP server. It is powerful enough for production usage, but it's simple and hackable enough to be used for testing, local development and learning.

http-party / http-server

a simple zero-configuration command-line http server

http-server: a simple static HTTP server

http-server is a simple, zero-configuration command-line static HTTP server. It is powerful enough for production usage, but it's simple and hackable enough to be used for testing, local development and learning.

Installation:

Running on-demand:

Using npx you can run the script without installing it first:

npx http-server [path] [options]

Globally via `npm`

npm install --global http-server

This will install http-server globally so that it may be run from the command line anywhere.

Globally via Homebrew

brew install http-server

As a dependency in your `npm` package:

npm install http-server

Using Docker

Note: a public image is not provided currently, but you can build one yourself with the provided Dockerfile.

Create an image
```
docker build -t my-image
```
Run a container
```
docker run -p 8080:8080 -v "${pwd}:/public" my-image
```
In the example above we're serving the directory ./ (working directory) If you wanted to serve ./test you'd…

View on GitHub

5. color

JavaScript library for immutable color conversion and manipulation with support for CSS color strings.

Qix- / color

🌈 Javascript color conversion and manipulation library

color

JavaScript library for immutable color conversion and manipulation with support for CSS color strings.

const color = Color('#7743CE').alpha(0.5).lighten(0.5);
console.log(color.hsl().string());  // 'hsla(262, 59%, 81%, 0.5)'

console.log(color.cmyk().round().array());  // [ 16, 25, 0, 8, 0.5 ]

console.log(color.ansi256().object());  // { ansi256: 183, alpha: 0.5 }

Install

$ npm install color

Usage

const Color = require('color');

Constructors

// string constructor
const color = Color('rgb(255, 255, 255)')                       // { model: 'rgb', color: [ 255, 255, 255 ], valpha: 1 }
const color = Color('hsl(194, 53%, 79%)'

…

View on GitHub

6. perfect-cursors

Perfect interpolation for animated multiplayer cursors.

steveruizok / perfect-cursors

Perfect interpolation for multiplayer cursors.

perfect-cursors

Perfect interpolation for animated multiplayer cursors. Used in tldraw.

💕 Love this library? Consider becoming a sponsor.

Installation

yarn add perfect-cursors
# or
npm i perfect-cursors

Introduction

You can use this library to smoothly animate a cursor based on limited information.

Above: We are updating the red cursor's position once every 80 milliseconds. The perfect-cursors library is being used to correctly animate between these positions.

Animating between points

When implementing a multiplayer app, you will most likely be displaying each user's cursor location based on the information you receive from a multiplayer service such as Pusher, Liveblocks.

In a perfect world, these updates would occur "in real time": that is, arriving with zero latency and arriving at the same rate as the user's monitor.

Above: Updating the cursor instantly.

In the real world, however, services often "throttle" their updates to roughly one update every 50-80…

View on GitHub

7. Passport

Simple, unobtrusive authentication for Node.js. Passport's sole purpose is to authenticate requests, which it does through an extensible set of plugins known as strategies.

jaredhanson / passport

Simple, unobtrusive authentication for Node.js.

Passport

Passport is Express-compatible authentication middleware for Node.js.

Passport's sole purpose is to authenticate requests, which it does through an extensible set of plugins known as strategies. Passport does not mount routes or assume any particular database schema, which maximizes flexibility and allows application-level decisions to be made by the developer. The API is simple: you provide Passport a request to authenticate, and Passport provides hooks for controlling what occurs when authentication succeeds or fails.

^Sponsors

Simple Authentication
Make login our problem. Not yours

Auth0 by Okta provides a simple and customizable login page to authenticate your users. You can dynamically add new capabilities to it - including social login, multi-factor authentication, or passkeys - without making changes to your app’s code.

We help protect your app and your users from attacks - defending your application from bot attacks and detecting runtime anomalies based on suspicious IPs…

View on GitHub

8. oclif

Framework for building CLIs in Node.js. This framework was built out of the Heroku CLI but generalized to build any custom CLI. It's designed both for single-file CLIs with a few flag options, or for very complex CLIs that have subcommands (like git or heroku).

oclif / oclif

CLI for generating, building, and releasing oclif CLIs. Built by Salesforce.

`oclif` CLI

🗒 Description

This is the oclif CLI for the Open CLI Framework, that supports the development of oclif plugins and CLIs.

See the docs for more information.

🚀 Getting Started Tutorial

The Getting Started tutorial is a step-by-step guide to introduce you to oclif. If you have not developed anything in a command line before, this tutorial is a great place to get started.

See Usage below for an overview of the oclif CLI.

📌 Requirements

Currently, Node 18+ is supported. We support the LTS versions of Node. You can add the node package to your CLI to ensure users are running a specific version of Node.

📌 Migrating from V1

If you have been using…

View on GitHub

9. Meteor

Meteor is an ultra-simple environment for building modern web applications.

meteor / meteor

Meteor, the JavaScript App Platform

Meteor is an ultra-simple environment for building modern web applications.

📚 Create your applications using modern JavaScript

Benefit from the latest technology updates to rapidly prototype and develop your applications.

✨ Integrate technologies you already use

Use popular frameworks and tools right out-of-the-box. Focus on building features instead of configuring disparate components yourself.

💻 Build apps for any device

Use the same code whether you’re developing for web, iOS, Android, or desktop for a seamless update experience for your users.

🔥 Getting Started

How about trying a tutorial to get started with your favorite technology?

React
Blaze
Vue
Svelte

Next, read the documentation and get some examples.

🚀 Quick Start

On your platform, use this line:

> npm install -g meteor

🚀 To create a project:

> meteor create my-app

☄️ Run it:

cd my-app
meteor

🧱 Developer Resources

Building an application with Meteor?

Deploy…

View on GitHub

10. ReactPlayer

A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion

cookpete / react-player

A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion

ReactPlayer

A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, Mixcloud, DailyMotion and Kaltura. Not using React? No problem.

Using Next.js and need to handle video upload/processing? Check out next-video.

✨ The future of ReactPlayer

Maintenance of ReactPlayer is being taken over by Mux. Mux is a video api for developers. The team at Mux have worked on many highly respected projects and are committed to improving video tooling for developers.

ReactPlayer will remain open source, but with a higher rate of fixes and releases over time. Thanks to everyone in the community for your ongoing support.

Usage

npm install react-player # or yarn add react-player

import React from 'react'
import ReactPlayer from 'react-player'

// Render a YouTube video player
<ReactPlayer url='https://www.youtube.com/watch?v=LXb3EKWsInQ' />

By default, ReactPlayer supports many different types of url. If…

View on GitHub

Stargazing 📈

Top risers over last 7 days🔗

30 Days Of JavaScript +1,929 stars
Iconoir +885 stars
Tauri +842 stars
faker.js +812 stars
Awesome +710 stars

Top growth(%) over last 7 days🔗

faker.js +178%
Iconoir +93%
Amplify UI +36%
Fuite +27%
30 Days Of JavaScript +16%

Top risers over last 30 days🔗

Awesome +4,538 stars
Tabby +4,249 stars
Awesome Self Hosted +3,583 stars
Free Programming Books +3,387 stars
JavaScript Algorithms +2,956 stars

Top growth(%) over last 30 days🔗

Pico +202%
Rakkas +144%
md-block +107%
Iconoir +98%
Basic Computer Games +92%

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.

🚀10 Trending projects on GitHub for web developers - 7th January 2022

Iain Freestone — Fri, 07 Jan 2022 14:27:23 +0000

Trending Projects is available as a weekly newsletter please sign up at Stargazing.dev to ensure you never miss an issue.

1. Shifty

The fastest JavaScript animation engine on the web. Shifty is a tweening engine for JavaScript. It is a lightweight library meant to be encapsulated by higher level tools.

jeremyckahn / shifty

The fastest TypeScript animation engine on the web

Shifty - The fastest TypeScript animation engine on the web

main:

Shifty is a tweening engine for TypeScript. It is a lightweight library meant to be encapsulated by higher level tools. At its core, Shifty provides:

Best-in-class animation performance
Playback control of an individual tween
Extensibility hooks for key points in the tween lifecycle
Promise support for async/await programming

This is useful because it is the least amount of functionality needed to build customizable animations. Shifty is optimized to run with the minimal processing and memory overhead.

import { tween } from 'shifty'
;(async () => {
  const element = document.querySelector('#tweenable')
  const { tweenable } = await tween({
    render: ({ scale, x }) => {
      element.style.transform = `translateX(${x}px) scale(${scale})`
    },

…

View on GitHub

2. readme.so

An online drag-and-drop editor to easily build READMEs

octokatherine / readme.so

An online drag-and-drop editor to easily build READMEs

readme.so

Readme.so is an online editor to help developers make readmes for their project.

Link to production site: readme.so

Features

Choose from list of sections to add to your readme
Edit the contents of each section
Drag and drop to rearrange sections
Download your readme file

Contributing

Contributions are always welcome!

See CONTRIBUTING.md for ways to get started.

Tech Stack

Running the Dev Server

To run the dev server, run npm run dev and navigate to localhost:3000

Feedback

Feedback is appreciated! Reach out on Twitter or submit a new issue!

License

MIT

This readme was created with readme.so :)

View on GitHub

3. Epub.js

Epub.js is a JavaScript library for rendering ePub documents in the browser, across many devices.

futurepress / epub.js

Enhanced eBooks in the browser.

Epub.js v0.3

Epub.js is a JavaScript library for rendering ePub documents in the browser, across many devices.

Epub.js provides an interface for common ebook functions (such as rendering, persistence and pagination) without the need to develop a dedicated application or plugin. Importantly, it has an incredibly permissive Free BSD license.

Try it while reading Moby Dick

Why EPUB

The EPUB standard is a widely used and easily convertible format. Many books are currently in this format, and it is convertible to many other formats (such as PDF, Mobi and iBooks).

An unzipped EPUB3 is a collection of HTML5 files, CSS, images and other media – just like any other website. However, it enforces a schema of book components, which allows us to render a book and its parts based on a controlled vocabulary.

More specifically, the EPUB schema standardizes the table of contents, provides a manifest that enables the caching…

View on GitHub

4. Amplify UI

Amplify UI is an open-source UI library with cloud-connected components that are endlessly customizable, accessible, and can integrate into any application.

aws-amplify / amplify-ui

Amplify UI is a collection of accessible, themeable, performant React (and more!) components that can connect directly to the cloud.

AWS Amplify

Amplify UI

Amplify UI is an open-source UI library with cloud-connected components that are endlessly customizable, accessible, and can integrate into any application. Amplify UI consists of:

Connected components that simplify complex cloud-connected workflows, like Authenticator.
Primitive components that create consistency across Amplify UI and allow you to build complete applications that fit your brand, like Buttons and Badges.
Data-bound components that make it easy to display dynamic data, like DataStoreCollections.
Theming capabilities that allow you to customize the appearance of Amplify UI to match your brand.

Package Name	Downloads	Version
@aws-amplify/ui-react
@aws-amplify/ui-vue
@aws-amplify/ui-angular

Documentation

https://ui.docs.amplify.aws/

Getting started

https://ui.docs.amplify.aws/getting-started/installation

Component Matrix

Connected Components	React	React Native	Angular	Vue
Authenticator	✅	✅	✅	✅
In-App Messaging	✅	✅
Geo (MapView)	✅
Account Settings	✅
Storage (FileUploader)	✅
Storage (StorageImage)	✅
Liveness (FaceLivenessDetector)	✅

Primitives	React	Angular	Vue
Alert	✅
Autocomplete	✅
Badge	✅
Button	✅
Card	✅
CheckboxField	✅

…

View on GitHub

5. projen

A new generation of project generators. projen synthesizes project configuration files such as package.json, tsconfig.json, .gitignore, GitHub Workflows, eslint, jest, etc from a well-typed definition written in JavaScript.

projen / projen

Rapidly build modern applications with advanced configuration management

projen

Define and maintain complex project configuration through code

Documentation · Changelog · Project types · Join the community

projen synthesizes project configuration files such as package.json, tsconfig.json, .gitignore, GitHub Workflows, eslint, jest, etc. from a well-typed definition written in JavaScript.

As opposed to existing templating/scaffolding tools, projen is not a one-off generator. Synthesized files should never be manually edited (in fact, projen enforces that). To modify your project setup, users interact with rich strongly-typed class and execute projen to update their project configuration files.

By defining a custom project type and using projen in multiple repositories, it's possible to update configuration files and CI/CD workflows across dozens (or hundreds!?) of projects.

Check out this talk about projen from its creator.

Getting Started

projen doesn't need to be installed. You will be using npx to run projen which takes care of all required setup steps.

To create…

View on GitHub

6. tsup

The simplest and fastest way to bundle your TypeScript libraries.

egoist / tsup

The simplest and fastest way to bundle your TypeScript libraries.

tsup

Bundle your TypeScript library with no config, powered by esbuild.

👀 What can it bundle?

Anything that's supported by Node.js natively, namely .js, .json, .mjs. And TypeScript .ts, .tsx. CSS support is experimental.

⚙️ Install

Install it locally in your project folder:

npm i tsup -D
# Or Yarn
yarn add tsup --dev
# Or pnpm
pnpm add tsup -D

You can also install it globally but it's not recommended.

📖 Usage

Bundle files

tsup [...files]

Files are written into ./dist.

You can bundle multiple files in one go:

tsup src/index.ts src/cli.ts

This will output dist/index.js and dist/cli.js.

📚 Documentation

For complete usages, please dive into the docs.

For all configuration options, please see the API docs.

💬 Discussions

Head over to the discussions to share your ideas.

Project Stats

License

MIT © EGOIST

View on GitHub

7. Sakura

A minimal classless css framework / theme. Sakura supports extremely easy theming support using variables for duotone color scheming.

oxalorg / sakura

🌸 a minimal css framework/theme.

sakura: a minimal, classless CSS framework / theme.

[Go to GitHub repository]

The perfect blossom is a rare thing. You could spend your life looking for one, and it would not be a wasted life.

Just drop sakura.css into any webpage and go from an ugly-looking 1900s website to a pretty, modern website in literally 0 seconds.

It's easy to customize and build on top of sakura.

Sakura supports extremely easy theming using variables for duotone color scheming. It comes with several existing themes, which can be found in the css folder of this repository.

Demo

Compare a live page WITH and WITHOUT sakura.

https://oxal.org/projects/sakura/demo

Also, my blog is a nice place to check sakura in action with heavy text (it has a "change theme" button on the top as well):

oxal.org/blog

Bookmark

Don't want to develop using sakura but instead want to use it on websites…

View on GitHub

8. Visual Studio Code Remote Development and GitHub Codespaces

A repository of development container definitions for the VS Code Remote - Containers extension and GitHub Codespaces

microsoft / vscode-dev-containers

NOTE: Most of the contents of this repository have been migrated to the new devcontainers GitHub org (https://github.com/devcontainers). See https://github.com/devcontainers/template-starter and https://github.com/devcontainers/feature-starter for information on creating your own!

IMPORTANT NOTE: Dev containers have a new, expanded home in the dev containers GitHub org! We're so excited to connect with you there. To learn more, you can check out our migration announcement.

This repository is no longer active and was archived in November 2023. We've migrated most of the contents of this repo to the devcontainers GitHub org, as part of the work on the open Dev Container specification.

Features managed by the Dev Container spec maintainers (such as the VS Code team) are now in devcontainers/features.
Definitions/Templates managed by the Dev Container spec maintainers are now in devcontainers/templates.
mcr.microsoft.com/devcontainers and mcr.microsoft.com/vscode/devcontainers images are now published from devcontainers/images.

For new Templates/Features, you can now self-publish and optionally make them visible in-tool by following the steps one of the quick start repositories: Templates quick start, Features quick start. No need to…

View on GitHub

9. A-Frame

A web framework for building virtual reality experiences.

aframevr / aframe

🅰️ Web framework for building virtual reality experiences.

A-Frame

A web framework for building virtual reality experiences.

Site — Docs — School — Slack — Blog — Newsletter

Examples

Find more examples on the homepage, A Week of A-Frame, and WebVR Directory.

Features

👓 Virtual Reality Made Simple: A-Frame handles the 3D and WebXR boilerplate required to get running across platforms including mobile, desktop, and all headsets (compatible with a WebXR capable browser) just by dropping in <a-scene>.

❤️ Declarative HTML: HTML is easy to read and copy-and-paste. Since A-Frame can be used from HTML, A-Frame is accessible to everyone: web developers, VR and AR enthusiasts, educators, artists, makers, kids.

🔌 Entity-Component Architecture: A-Frame is a powerful framework on top of three.js, providing a declarative, composable, reusable entity-component structure for three.js. While A-Frame can be used from HTML, developers have unlimited access to JavaScript, DOM APIs, three.js, WebXR, and WebGL.

⚡…

View on GitHub

10. Tippy.js

The complete tooltip, popover, dropdown, and menu solution for the web

atomiks / tippyjs

Tooltip, popover, dropdown, and menu library

Tippy.js

The complete tooltip, popover, dropdown, and menu solution for the web

Demo and Documentation

➡️ View the latest demo & docs here

Migration Guide

Installation

Package Managers

# npm
npm i tippy.js

# Yarn
yarn add tippy.js

Import the tippy constructor and the core CSS:

import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css';

CDN

<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>

The core CSS comes bundled with the default unpkg import.

Usage

For detailed usage information, visit the docs.

Component Wrappers

React: @tippyjs/react (official)
Ember: ember-tippy (unofficial)

License

MIT

View on GitHub

Stargazing 📈

Top risers over last 7 days🔗

Basic Computer Games +1,371 stars
Awesome +1,232 stars
Awesome Self Hostsed +795 stars
Tauri +646 stars
Free Programming Books +617stars

Top growth(%) over last 7 days🔗

Basic Computer Games +69%
MindAR +58%
scroll-snap +43%
fresnel +16%
fuite +10%

Top risers over last 30 days🔗

Tabby +6,033 stars
Awesome +4,444 stars
Free Programming Books +3,747 stars
Awesome Self Hostsed +3,723 stars
JavaScript Algorithms +3,311 stars

Top growth(%) over last 30 days🔗

Pico +400%
Rakkas +141%
md-block +107%
Basic Computer Games +70%
Peeky +70%

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.

🚀10 Trending projects on GitHub for web developers - 31st December 2021

Iain Freestone — Fri, 31 Dec 2021 13:03:19 +0000

Trending Projects is available as a weekly newsletter please sign up at Stargazing.dev to ensure you never miss an issue.

1. Editor.js

A block-styled editor with clean JSON output

codex-team / editor.js

A block-style editor with clean JSON output

editorjs.io | documentation | changelog

About

Editor.js is an open-source text editor offering a variety of features to help users create and format content efficiently. It has a modern, block-style interface that allows users to easily add and arrange different types of content, such as text, images, lists, quotes, etc. Each Block is provided via a separate plugin making Editor.js extremely flexible.

Editor.js outputs a clean JSON data instead of heavy HTML markup. Use it in Web, iOS, Android, AMP, Instant Articles, speech readers, AI chatbots — everywhere. Easy to sanitize, extend and integrate with your logic.

😍 Modern UI out of the box
💎 Clean JSON output
⚙️ Well-designed API
🛍 Various Tools available
💌 Free and open source

Installation

It's quite simple:

Install Editor.js
Install tools you need
Initialize Editor's instance

Install using NPM, Yarn, or CDN:

npm i @editorjs/editorjs

Choose and install tools:

View on GitHub

2. PurgeCSS

PurgeCSS analyzes your content and your css files. Then it matches the selectors used in your files with the one in your content files. It removes unused selectors from your css, resulting in smaller css files.

FullHuman / purgecss

Remove unused CSS

PurgeCSS

What is PurgeCSS?

When you are building a website, chances are that you are using a css framework like Bootstrap, Materializecss, Foundation, etc... But you will only use a small set of the framework and a lot of unused css styles will be included.

This is where PurgeCSS comes into play. PurgeCSS analyzes your content and your css files. Then it matches the selectors used in your css files with the ones in your content files. It removes unused selectors from your css, resulting in smaller css files.

Sponsors 🥰

Documentation

You can find the PurgeCSS documentation on this website.

PurgeCSS

Plugins

Guides

Getting Started

Installation

npm install purgecss --save-dev

Usage

import { PurgeCSS } from "purgecss";
const purgeCSSResults = await new PurgeCSS(

…

View on GitHub

3. Wouter

A minimalist-friendly ~1.5KB routing for React and Preact. Nothing else but Hooks.

molefrog / wouter

🥢 A minimalist-friendly ~2.1KB routing for React and Preact

wouter is a tiny router for modern React and Preact apps that relies on Hooks.
A router you wanted so bad in your project!

Features

⚠️ These docs are for wouter v3 only. Please find the documentation for wouter@2.12.0 here

Minimum dependencies, only 2.1 KB gzipped vs 18.7KB React Router.
Supports both React and Preact! Read "Preact support" section for more details.
No top-level <Router /> component, it is fully optional.
Mimics React Router's best practices by providing familiar Route, Link Switch and Redirect components.
Has hook-based API for more granular control over routing (like animations) useLocation, useRoute and useRouter.

developers 💖 wouter

... I love Wouter. It’s tiny, fully embraces hooks, and has an intuitive and barebones API. I can accomplish everything I could with react-router with Wouter, and it just feels more minimalist while not being inconvenient.

Matt Miller, …

View on GitHub

4. bundlesize

Keep your bundle size in check

siddharthkp / bundlesize

Keep your bundle size in check

Keep your bundle size in check

Setup

npm install bundlesize --save-dev

# or

yarn add bundlesize --dev

Usage

Add it to your scripts in package.json

"scripts": {
  "test": "bundlesize"
}

Or you can use it with npx from NPM 5.2+.

npx bundlesize

Configuration

bundlesize accepts an array of files to check.

[
  {
    "path": "./build/vendor.js",
    "maxSize": "30 kB"
  },
  {
    "path": "./build/chunk-*.js",
    "maxSize": "10 kB"
  }
]

You can keep this array either in

package.json

{
  "name": "your cool library",
  "version": "1.1.2",
  "bundlesize": [
    {
      "path": "./build/vendor.js",
      "maxSize": "3 kB"
    }
  ]
}

or in a separate file

bundlesize.config.json

Format:

{
  "files": [
    {
      "path": "./dist.js"
      "maxSize": "3

…

View on GitHub

5. MindAR

Web Augmented Reality. Natural feature tracking. Image targets. Tensorflow.js

hiukim / mind-ar-js

Web Augmented Reality. Image Tracking, Face Tracking. Tensorflow.js

MindAR

MindAR is a web augmented reality library. Highlighted features include:

⭐ Support Image tracking and Face tracking. For Location or Fiducial-Markers Tracking, checkout AR.js

⭐ Written in pure javascript, end-to-end from the underlying computer vision engine to frontend

⭐ Utilize gpu (through webgl) and web worker for performance

⭐ Developer friendly. Easy to setup. With AFRAME extension, you can create an app with only 10 lines of codes

Fund Raising

MindAR is the only actively maintained web AR SDK which offer comparable features to commercial alternatives. This library is currently maintained by me as an individual developer. To raise fund for continuous development and to provide timely supports and responses to issues, here is a list of related projects/ services that you can support.

Unity WebAR Foundation

WebAR Foundation is a unity package that allows Unity developer to build WebGL-platform AR applications. It acts as a Unity Plugin that…

View on GitHub

6. Snap page

Snap page when user stops scrolling, with a customizable configuration and a consistent cross browser behaviour

lucafalasco / scroll-snap

↯ Snap page when user stops scrolling, with a customizable configuration and a consistent cross browser behaviour

`scroll-snap`

Snap page when user stops scrolling, basically implements CSS Scroll Snap, adding a customizable configuration and a consistent cross browser behaviour.

Works in all modern browsers
requestAnimationFrame for 60fps
Customizable settings (including easing functions)
No additional dependencies
No extra stylesheet

Installation

yarn add scroll-snap

You can also grab a pre-built version from unpkg

Usage

createScrollSnap(element, settings, [callback])

Arguments

`element: HTMLElement`

The HTML DOM Element to attach the scroll listener to.

`settings: Settings`

A configuration object consisting of one or more of the following keys:

`snapDestinationX: string | number`

Snap destination for x axis, should be a valid css value expressed as px | % | vw | vh

`snapDestinationY: string | number`

Snap destination for y axis, should be a valid css value expressed as px | % | vw | vh

`timeout: number`

Time in ms after which scrolling is…

View on GitHub

7. Dependency cruiser

Validate and visualize dependencies. Your rules. JavaScript, TypeScript, CoffeeScript. ES6, CommonJS, AMD.

sverweij / dependency-cruiser

Validate and visualize dependencies. Your rules. JavaScript, TypeScript, CoffeeScript. ES6, CommonJS, AMD.

Dependency cruiser

Validate and visualise dependencies. With your rules. JavaScript. TypeScript. CoffeeScript. ES6, CommonJS, AMD.

What's this do?

This runs through the dependencies in any JavaScript, TypeScript, LiveScript or CoffeeScript project and ...

... validates them against (your own) rules
... reports violated rules
- in text (for your builds)
- in graphics (for your eyeballs)

As a side effect it can generate dependency graphs in various output formats including cool visualizations you can stick on the wall to impress your grandma.

How do I use it?

Install it ...

npm install --save-dev dependency-cruiser
# or
yarn add -D dependency-cruiser
pnpm add -D dependency-cruiser

... and generate a config

npx depcruise --init

This will look around in your environment a bit, ask you some questions and create a .dependency-cruiser.js configuration file attuned to your project¹².

Show stuff to your grandma

To create a graph of the dependencies in your…

View on GitHub

8. React Rich Text Editor

Pure React rich text WYSIWYG editor based on draft-js.

sstur / react-rte

Pure React rich text WYSIWYG editor based on draft-js.

Deprecated

This repository is long ourdated and even Draft.js (on which this editor is built) is long outdated and has been superceded by Lexical.

I don't recommend you use this in your project. There are many great alternatives such as TipTap.

React Rich Text Editor

This is a UI component built completely in React that is meant to be a full-featured textarea replacement similar to CKEditor, TinyMCE and other rich text "WYSIWYG" editors. It's based on the excellent, open source Draft.js from Facebook which is performant and production-tested.

Demo

Try the editor here: react-rte.org/demo

Getting Started

$ npm install --save react-rte

RichTextEditor is the main editor component. It is comprised of the Draft.js <Editor>, some UI components (e.g. toolbar) and some helpful abstractions around getting and setting content with HTML/Markdown.

RichTextEditor is designed to be used like a textarea except that instead of value being…

View on GitHub

9. Changesets

A way to manage your versioning and changelogs with a focus on monorepos

changesets / changesets

🦋 A way to manage your versioning and changelogs with a focus on monorepos

A tool to manage versioning and changelogs
with a focus on multi-package repositories

The changesets workflow is designed to help when people are making changes, all the way through to publishing. It lets contributors declare how their changes should be released, then we automate updating package versions, and changelogs, and publishing new versions of packages based on the provided information.

Changesets has a focus on solving these problems for multi-package repositories, and keeps packages that rely on each other within the multi-package repository up-to-date, as well as making it easy to make changes to groups of packages.

How do we do that?

A changeset is an intent to release a set of packages at particular semver bump types with a summary of the changes made.

The @changesets/cli package allows you to write changeset files as you make changes, then combine any number of changesets into a release, that flattens the…

View on GitHub

10. React Table

Hooks for building fast and extendable tables and datagrids for React

TanStack / table

🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table

TanStack Table v8

Headless UI for building powerful tables & datagrids for React, Solid, Vue, Svelte, Qwik and TS/JS.

Looking for version 7 of react-table? Click here!

Enjoy this library?

Try other TanStack libraries:

Visit tanstack.com/table for docs, guides, API and more!

You may know TanStack Table by our adapter names, too!

Summary

TanStack Table is a headless table library, which means it does not ship with components, markup or styles. This means that you have full control over markup and styles (CSS, CSS-in-JS, UI Component Libraries, etc) and this is also what gives it its portable nature. You can even use it in React Native!

If you want a lightweight table with full control over markup and implementation, then you…

View on GitHub

Stargazing 📈

Top risers over last 7 days🔗

Every Programmer Should Know +1,585 stars
Tabby +1,222 stars
JavaScript Algorithms +1,219 stars
Awesome +1,196 stars
Awesome Self Hostsed +1,141stars

Top growth(%) over last 7 days🔗

Rakkas +26%
Vitest +21%
Molecule +20%
md-block +19%
React Snowfall +14%

Top risers over last 30 days🔗

Tabby +6,991 stars
Free Programming Books +4,553 stars
Every Programmer Should Know +4,522 stars
Awesome +4,395 stars
Developer Roadmap +4,253 stars

Top growth(%) over last 30 days🔗

Pico +394%
Rakkas +150%
Remix Auth +91%
React Snowfall +87%
Agrippa +85%

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.

🚀10 Trending projects on GitHub for web developers - 24th December 2021

Iain Freestone — Fri, 24 Dec 2021 14:09:57 +0000

Trending Projects is available as a weekly newsletter please sign up at Stargazing.dev to ensure you never miss an issue.

1. GitHub Wrapped

Take a look back at all the contributions you as an individual made to the open-source community

ishandeveloper / github-wrapped

Take a look back at all the contributions you as an individual made to the open-source community

Generate your report

Why do I exist?

2020 has been a challenging year for all of us.

As the year is ending, we thought to take a look back at all the contributions you as an individual made to the open-source community, during these unprecedented times.

Also, since Spotify, Snapchat and other mass platforms have their own way of year wrap up, why not us?

githubwrapped.tech

Reports

This web app deployed at githubwrapped.tech will help you to generate yearly reports that contains your stats from the beginning of this year.

Including number of commits, stars etc.

You can also save your report as an image using the 'Save Report' button and share it with the community or keep it as a memorandum :)

Project Structure

This project uses React.Js and the contents are bundled using webpack.

The contents in this project follow the following structure.

├───api
├───public
│   └───assets
└───src

…

View on GitHub

2. Vitest

A blazing fast unit test framework powered by Vite.

vitest-dev / vitest

Next generation testing framework powered by Vite.

Vitest

Next generation testing framework powered by Vite

Get involved!

Documentation | Getting Started | Examples | Why Vitest?

中文文档

Features

Vite's config, transformers, resolvers, and plugins. Use the same setup from your app!
Jest Snapshot
Chai built-in for assertions, with Jest expect compatible APIs
Smart & instant watch mode, like HMR for tests!
Native code coverage via v8 or istanbul.
Tinyspy built-in for mocking, stubbing, and spies.
JSDOM and happy-dom for DOM and browser API mocking
Browser Mode for running component tests in the browser
Components testing (Vue, React, Svelte, Lit, Marko)
Workers multi-threading via Tinypool (a lightweight fork of Piscina)
Benchmarking support with Tinybench
Workspace support
expect-type for type-level testing
ESM first, top level await
Out-of-box TypeScript / JSX support
Filtering, timeouts, concurrent for suite and tests
Sharding support
Run your tests in the browser natively (experimental)

Vitest…

View on GitHub

3. Rakkas

Rakkas is a web framework powered by React and Vite that aims to have a developer experience similar to Next.js. Many of its features are also inspired by Svelte Kit.

rakkasjs / rakkasjs

Bleeding-edge React framework powered by Vite

Read the guide | Try on CodeSandbox | Try on StackBlitz

Rakkas is a bleeding-edge full-stack React framework powered by Vite. You can consider it an up-and-coming alternative to Next.js, Remix, or Gatsby.

Important features are:

⚡ Lightning fast development server
🖥️ Streaming SSR with Suspense
🔀 Dynamic rendering (full static pages for bots, streaming for browsers)
⬇️ API-less data fetching system
🚀 Support for serverless and worker environments
📄 Static site generation
📁 Flexible file system router
⚙️ API routes with middleware support

Is Rakkas right for you?

Although many features have been implemented, Rakkas is still under heavy development. It uses experimental and/or beta features of React and Vite. Minor releases will introduce breaking changes until we hit 1.0. As such, it's not yet ready for production use. If you need…

View on GitHub

4. fuite

A tool for finding memory leaks in web apps

nolanlawson / fuite

A tool for finding memory leaks in web apps

fuite

fuite /fɥit/ French for "leak"

fuite is a CLI tool for finding memory leaks in web apps.

Introductory blog post

Tutorial video

Usage

npx fuite https://example.com

This will check for leaks and print output to stdout.

By default, fuite will assume that the site is a client-rendered webapp, and it will search for internal links on the given page. Then for each link, it will:

Click the link
Press the browser back button
Repeat to see if the scenario is leaking

For other scenarios, see scenarios.

How it works

fuite launches Chrome using Puppeteer, loads a web page, and runs a scenario against it. It runs the scenario some number of iterations (7 by default) and looks for objects that leaked 7 times (or 14 times, or 28 times). This might sound like a strange approach, but it's useful for cutting through the noise in memory analysis.

fuite…

View on GitHub

5. Theatre.js

Theatre.js is an animation library for high-fidelity motion graphics. It is designed to help you express detailed animation, enabling you to create intricate movement, and convey nuance.

theatre-js / theatre

Motion design editor for the web

Motion Design, for the web

✨ Update: Theatre.js 1.0 is around the corner. We have temporarily moved development to a private repo so we can iterate faster. We'll push our work back to this public repo soon. Terms and license will remain OSS, as before. (Also, we're hiring – join the core team!).

Theatre.js is an animation library for high-fidelity motion graphics. It is designed to help you express detailed animation, enabling you to create intricate movement, and convey nuance.

Theatre.js can be used both programmatically and visually.

You can use Theatre.js to:

Animate 3D objects made with THREE.js or other 3D libraries

Art by drei.lu
Animate HTML/SVG via React or other libraries
Design micro-interactions
Choreograph generative interactive art
Or animate any other JS variable

Documentation and Tutorials

The docs are at theatrejs.com/docs:

Video tutorials
- Crash course
- Animating with music
- Yuri Artiukh's stream with a section on…

View on GitHub

6. Molecule

Molecule is a lightweight Web IDE UI framework which is built with React.js and inspired by the VSCode.

DTStack / molecule

🚀 A lightweight Web IDE UI framework.

Molecule

A lightweight Web IDE UI Framework

中文 | English | 한국어

The Molecule is a lightweight Web IDE UI framework which is built with React.js and inspired by the VSCode. We have designed the Extension APIs similar to the VSCode, to help developers extend the Workbench in an easier way. It's convenient to integrate the Molecule with React.js applications. It has been applied to many products in DTStack

Online Preview

Features

Built-in the Visual Studio Code Workbench UI
Compatible with the Visual Studio Code ColorTheme
Customize the Workbench via React Component easily
Built-in Monaco-Editor Command Palette, Keybinding features
Support the i18n, built-in Simplified Chinese, Korean and English
Built-in Settings, support to edit and extend via the Extension
Built-in basic Explorer, Search components, and support extending via the Extension
Typescript Ready

Installation

npm install @dtinsight/molecule
# Or
yarn add @dtinsight/molecule

Basic Usage

import React from 'react';
import

…

View on GitHub

7. RFS

RFS is a unit resizing engine which was initially developed to resize font sizes. RFS is capable of rescaling basically every value for any css property with units, like margin, padding, border-radius or even box-shadow.

twbs / rfs

✩ Automates responsive resizing ✩

RFS is a unit resizing engine which was initially developed to resize font sizes (hence its abbreviation for Responsive Font Sizes). Nowadays RFS is capable of rescaling basically every value for any css property with units, like margin, padding, border-radius or even box-shadow.

The mechanism automatically calculates the appropriate values based on the dimensions of the browser viewport. It's available in one of your favourite preprocessors or postprocessor: Sass, Less, Stylus or PostCSS.

RFS

Demos

Advantages

No need to rescale paddings or margins anymore.
Text won't be chopped off in smaller viewports when RFS is applied to font sizes.
RFS will prevent the font size from rescaling…

View on GitHub

8. Clipanion

Type-safe CLI library / framework with no runtime dependencies

arcanis / clipanion

Type-safe CLI library / framework with no runtime dependencies

Clipanion

Type-safe CLI library with no runtime dependencies

Installation

yarn add clipanion

Why

Clipanion supports advanced typing mechanisms
Clipanion supports nested commands (yarn workspaces list)
Clipanion supports transparent option proxying without -- (for example yarn dlx eslint --fix)
Clipanion supports all option types you could think of (including negations, batches, ...)
Clipanion offers a Typanion integration for increased validation capabilities
Clipanion generates an optimized state machine out of your commands
Clipanion generates good-looking help pages out of the box
Clipanion offers common optional command entries out-of-the-box (e.g. version command, help command)

Clipanion is used in Yarn with great success.

Documentation

Check the website for our documentation: mael.dev/clipanion.

Migration

You can use clipanion-v3-codemod to migrate a Clipanion v2 codebase to v3.

Overview

Commands are declared by extending from the Command abstract base class, and more specifically by implementing its execute method which will then be called by…

View on GitHub

9. liqvid

A library for making interactive videos in React. For example an interactive coding demo inside a video.

liqvidjs / liqvid

Library for interactive videos in React

Liqvid

Liqvid is a library for creating interactive videos in React.

Links

Documentation

Discord

Repository structure

This is a monorepo. Here is what the various packages do:

Frontend Core

main
Provides the main liqvid package.
host
Script for pages hosting Liqvid videos; currently just handles fake fullscreen
keymap
Provides the Keymap class
playback
Provides the Playback class
polyfills
Polyfills for Liqvid videos; currently just handles Web Animations
utils
Provides the various helper functions in Utils

Backend Tools

cli
The Liqvid CLI tool
magic
Provides wackyresource macro syntax
renderer
Handles the audio, build, render, and thumbs CLI commands
serve
Development server; provides the serve CLI command

Integrations

katex
Provides KaTeX integration
react-three
Provides React Three Fiber integration

In-development

captioning
Captions editor
gsap
GSAP integration (maybe already works???)
i18n
Internationalization utilities
player
New Web Components-based <Player>
mathjax
MathJax integration
react
Probably for when Liqvid goes to Web Components…

View on GitHub

10. ajquery.js

The fastest, most lightweight, least dependency jQuery alternative.

coolaj86 / ajquery.js

The fastest, most lightweight, least dependency jQuery alternative.

ajquery.js

The fastest, most lightweight, fewest dependency jQuery alternative.
New: Now typed, Ai-enhanced, and better than ever!

Development Build: 721B (types + comments)
Production Build: 117B (min + gz)

Example Usage

Provides modern, advanced CSS4-compatible query selection:

console.log("innerText:", $("p:nth-child(2").innerText);

Install

via GitHub

my_ver="v3.0.3"

mkdir ./vendor/

curl -fsSL "https://raw.githubusercontent.com/coolaj86/ajquery.js/${my_ver}/ajquery.js" \
    -o ./vendor/ajquery.js

# Lighthouse-optimized
npx -p uglify-js@3 uglifyjs ./vendor/ajquery.js -o ./vendor/ajquery.min.js

<script src="/vendor/ajquery.js"></script>

via CDN

<script src="https://unpkg.com/ajquery@3.0.3/ajquery.min.js"></script>

Bundler-optimized:

<script src="https://unpkg.com/ajquery@3.0.3/ajquery.min.cjs"></script>

Tree-shaking-optimized:

<script src="https://unpkg.com/ajquery@3.0.3/ajquery.min.mjs"></script>

via NPM

npm install --save ajquery@3

CommonJS

let AJQuery = require("ajquery");
let $ = AJQuery.$;
let $$ = AJQuery

…

View on GitHub

Stargazing 📈

Top risers over last 7 days🔗

Tabby +1,119 stars
Free Programming Books +976 stars
Pico +915 stars
Awesome +618 stars
Developer Roadmap +567 stars

Top growth(%) over last 7 days🔗

Rakkas +74%
TinySpy +63%
Pico +45%
TuiCss +26%
envsafe +20%

Top risers over last 30 days🔗

Tabby +5,737 stars
Free Programming Books +5,312 stars
Remix +5,199 stars
Awesome +4,608 stars
Developer Roadmap +4,602 stars

Top growth(%) over last 30 days🔗

Pico +374%
Remix +125%
Rakkas +100%
Agrippa +86%
Nice Modal React +85%

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.

🚀10 Trending projects on GitHub for web developers - 17th December 2021

Iain Freestone — Fri, 17 Dec 2021 14:51:26 +0000

Trending Projects is available as a weekly newsletter please sign up at Stargazing.dev to ensure you never miss an issue.

1. Zod

TypeScript-first schema validation with static type inference. Zod is designed to be as developer-friendly as possible. The goal is to eliminate duplicative type declarations. With Zod, you declare a validator once and Zod will automatically infer the static TypeScript type.

colinhacks / zod

TypeScript-first schema validation with static type inference

Zod

✨ https://zod.dev ✨
TypeScript-first schema validation with static type inference

Documentation • Discord • npm • deno • Issues • @colinhacks • tRPC

These docs have been translated into Chinese.

Table of contents
Introduction
- Sponsors
  - Platinum
  - Gold
  - Silver
  - Bronze
  - Copper
- Ecosystem
Installation
- Requirements
- From npm (Node/Bun)
- From deno.land/x (Deno)
Basic usage
Primitives
Coercion for primitives
Literals
Strings
- Datetimes
- Dates
- Times
- IP addresses
Numbers
BigInts
NaNs
Booleans
Dates
Zod enums
Native enums
Optionals
Nullables
Objects
- .shape
- .keyof
- .extend
- .merge
- .pick/.omit
- .partial
- .deepPartial
- .required
- .passthrough
- .strict
- .strip
- .catchall
Arrays
- .element
- .nonempty
- .min/.max/.length
Tuples
Unions
Discriminated unions
Records
- Record key type
Maps
Sets
Intersections
Recursive types
- ZodType with ZodEffects
- JSON type
- Cyclical objects
Promises
Instanceof
Functions
Preprocess
Custom schemas
Schema methods
- .parse
- .parseAsync
- .safeParse
- .safeParseAsync
- .refine
  - Arguments
  - Customize error path
  - …

View on GitHub

2. Promisify

Promisify an entire class or object.This module leverages es6 Proxy and Reflect to promisify every function in an object or class instance.

wraithgar / gar-promisify

Promisify an entire class or object

@gar/promisify

Promisify an entire object or class instance

This module leverages es6 Proxy and Reflect to promisify every function in an object or class instance.

It assumes the callback that the function is expecting is the last parameter, and that it is an error-first callback with only one value i.e. (err, value) => .... This mirrors node's util.promisify method.

In order that you can use it as a one-stop-shop for all your promisify needs, you can also pass it a function. That function will be promisified as normal using node's built-in util.promisify method.

node's custom promisified functions will also be mirrored, further allowing this to be a drop-in replacement for the built-in util.promisify.

Examples

Promisify an entire object

const promisify = require('@gar/promisify')
class Foo {
  constructor (attr) {
    this.attr = attr
  }

  double (input, cb) {
    cb(

…

View on GitHub

3. Fast Node Manager (fnm)

Fast and simple Node.js version manager, built in Rust

Schniz / fnm

🚀 Fast and simple Node.js version manager, built in Rust

Fast Node Manager (`fnm`)

🚀 Fast and simple Node.js version manager, built in Rust

Features

🌎 Cross-platform support (macOS, Windows, Linux)

✨ Single file, easy installation, instant startup

🚀 Built with speed in mind

📂 Works with .node-version and .nvmrc files

Installation

Using a script (macOS/Linux)

For bash, zsh and fish shells, there's an automatic installation script.

First ensure that curl and unzip are already installed on you operating system. Then execute:

curl -fsSL https://fnm.vercel.app/install | bash

Upgrade

On macOS, it is as simple as brew upgrade fnm.

On other operating systems, upgrading fnm is almost the same as installing it. To prevent duplication in your shell config file add --skip-shell to install command.

Parameters

--install-dir

Set a custom directory for fnm to be installed. The default is $XDG_DATA_HOME/fnm (if $XDG_DATA_HOME is not defined it falls back to $HOME/.local/share/fnm on linux and $HOME/Library/Application Support/fnm on…

View on GitHub

4. React Link Preview

A React library that generates beautiful previews for your links.

Dhaiwat10 / react-link-preview

A React library that generates beautiful previews for your links.

React Link Preview

A React component that renders beautiful, fully-customizable link previews.

Demo

How to use

Install the package:

yarn add @dhaiwat10/react-link-preview

npm install @dhaiwat10/react-link-preview

Import and render the preview:

import { LinkPreview } from '@dhaiwat10/react-link-preview';

const Home = () => {
  return <LinkPreview url='https://www.youtube.com/watch?v=dQw4w9WgXcQ' width='400px' />;
};

If the component renders nothing, it means that no metadata could be scraped for the URL. Provide a fallback component if you don't want to render null.

Important

This package uses a Heroku proxy (open-source) to get around CORS issues. The public proxy receives a lot of traffic (+ there is a rate limit) and is not recommended for production use.

Recommended workflow (for production)

Please fork the proxy repo and host your own copy of it.
You can then use the customFetcher prop to pass a fetcher function that fetches…

View on GitHub

5. Sync Contribution Graph

Generates empty commits to match contributions from other public GitHub accounts.

kefimochi / sync-contribution-graph

Generates empty commits to match contributions from other public GitHub accounts.

Sync Contribution Graph

How to Use 🚀

Use this repo as a template to create a new repo, and provide a name.
Clone your new repo locally. cd into the newly created directory.
It requires NodeJS and npm (or yarn) to be installed on your machine. Run npm i or yarn install in your terminal.
Use npm start or yarn start in order to trigger a series of terminal prompts that will help with configuration

On Windows, please run it from Git Bash.

If you change your mind about these commits later, you can delete the repository and they'll disappear from your contribution graph.

Requested Information 🌳

Key	Description	Default value
`username`	The username whose graph contributions you'd like to copy.
`year`	Year that you would like to sync with provided `username`. Currently doesn't support multiple years.	Current year
`execute`	Let's the code know whether to simply generate

…

View on GitHub

6. tinyspy

A 4KB package for minimal and easy testing with no dependencies. This package was created for having a tiny spy library to use in vitest, but it can also be used in jest and other test environments.

tinylibs / tinyspy

🕵🏻‍♂️ minimal fork of nanospy, with more features

tinyspy

minimal fork of nanospy, with more features 🕵🏻‍♂️

A 10KB package for minimal and easy testing with no dependencies This package was created for having a tiny spy library to use in vitest, but it can also be used in jest and other test environments.

In case you need more tiny libraries like tinypool or tinyspy, please consider submitting an RFC

Installing

// with npm
$ npm install -D tinyspy

// with pnpm
$ pnpm install -D tinyspy

// with yarn
$ yarn install -D tinyspy

Usage

spy

Simplest usage would be:

const fn = (n) => n + '!'
const spied = spy(fn)
spied('a')

console.log(spied.called) // true
console.log(spied.callCount) // 1
console.log(spied.calls) // [['a']]
console.log(spied

…

View on GitHub

7. Amazing Developers On YouTube

A curated list of amazing development channels on YouTube. These include web development, back-end development, front-end development live coders and more!

ErikCH / DevYouTubeList

List of Development YouTube Channels

Amazing Developers On YouTube

A curated list of amazing development channels on YouTube. These include web development, back-end development, front-end development live coders and more!

Amazing Developers Of YouTube

English
Non English
- Russian
- Hindi
- Turkish
- Italian
- Bengali
- Brazilian
- Korean
- Chinese
- Hebrew
- French
- Farsi
- Spanish
- Catalan
- Indonesian
- Arabic
- German
- Polish
- Somali
- Vietnam
- Uzbek

Resources

Tutorial

These channels focus on tutorials and code along.

View on GitHub

8. bignumber.js

A JavaScript library for arbitrary-precision decimal and non-decimal arithmetic

MikeMcl / bignumber.js

A JavaScript library for arbitrary-precision decimal and non-decimal arithmetic

A JavaScript library for arbitrary-precision decimal and non-decimal arithmetic.

Features

Integers and decimals
Simple API but full-featured
Faster, smaller, and perhaps easier to use than JavaScript versions of Java's BigDecimal
8 KB minified and gzipped
Replicates the toExponential, toFixed, toPrecision and toString methods of JavaScript's Number type
Includes a toFraction and a correctly-rounded squareRoot method
Supports cryptographically-secure pseudo-random number generation
No dependencies
Wide platform compatibility: uses JavaScript 1.5 (ECMAScript 3) features only
Comprehensive documentation and test set

If a smaller and simpler library is required see big.js It's less than half the size but only works with decimal numbers and only has half the methods It also has fewer configuration options than this library, and does not allow NaN or Infinity.

See also decimal.js, which among other things adds support for non-integer powers, and performs all operations to a specified number of significant digits.

Load

…

View on GitHub

9. Capsize

Capsize makes the sizing and layout of text as predictable as every other element on the screen. Using font metadata, text can now be sized according to the height of its capital letters while trimming the space above capital letters and below the baseline.

seek-oss / capsize

Flipping how we define typography in CSS.

Capsize makes the sizing and layout of text as predictable as every other element on the screen.

Using font metadata, text can now be sized according to the height of its capital letters while trimming the space above capital letters and below the baseline.

npm install @capsizecss/core

Usage

`createStyleObject`

Returns a CSS-in-JS style object.

Import createStyleObject passing the relevant options.

import { createStyleObject } from '@capsizecss/core';

const capsizeStyles = createStyleObject({
  fontSize: 16,
  leading: 24,
  fontMetrics: {
    capHeight: 700,
    ascent: 1058,
    descent: -291,
    lineGap: 0,
    unitsPerEm: 1000,
  },
});

Note: It is recommended that you install the @capsizecss/metrics package…

View on GitHub

10. Verdaccio

Verdaccio is a simple, zero-config-required local private npm registry. No need for an entire database just to get started! Verdaccio comes out of the box with its own tiny database, and the ability to proxy other registries (eg. npmjs.org), caching the downloaded modules along the way.

verdaccio / verdaccio

📦🔐 A lightweight Node.js private proxy registry

Verdaccio stands for peace, stop the war, we will be yellow / blue 🇺🇦 until that happens.

Version Next (Development branch)

Looking for Verdaccio 6 version? Check the branch 6.x The plugins for the v6.x that are hosted within this organization are located at the verdaccio/monorepo repository, while for the next version are hosted on this project ./packages/plugins.

Note that contributing guidelines might be different based on the branch.

Verdaccio is a simple, zero-config-required local private npm registry No need for an entire database just to get started! Verdaccio comes out of the box with its own tiny database, and the ability to proxy other registries (eg. npmjs.org) caching the downloaded modules along the way. For those looking to extend their storage capabilities, Verdaccio supports various community-made plugins to hook into services such as Amazon's s3, Google Cloud Storage or create your own plugin.

Install

Node.js…

View on GitHub

Stargazing 📈

Top risers over last 7 days🔗

Tabby +1,686 stars
Pico +1,059 stars
Free Programming Books +833 stars
Type Challenges +827 stars
Developer Roadmap +1,229 stars

Top growth(%) over last 7 days🔗

Pico +157%
Qwik +28%
Remix Auth +22%
Status Page +20%
React Cool Img +18%

Top risers over last 30 days🔗

Free Programming Books +4,676 stars
Awesome +4,563 stars
Tabby +4,504 stars
Developer Roadmap +4,363 stars
Coding Interview University +3,960 stars

Top growth(%) over last 30 days🔗

Medusa +198%
Pico +184%
Nice Modal React +87%
Agrippa +85%
VSCode Front Matter +56%

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.

DEV Community: Iain Freestone

🚀10 Trending projects on GitHub for web developers - 4th March 2022

1. react-typical

catalinmiron / react-typical

React typing animation in ~400 bytes 🐡 of JavaScript.

react-typical

Youtube Video Tutorial

Install

Usage

Properties

License

2. fflip

FredKSchott / fflip

Flexible Feature Flipping/Flagging for Node.js

fflip

Integrations

3. imagesLoaded

desandro / imagesloaded

📷 JavaScript is all like "You images done yet or what?"

imagesLoaded

Install

Download

CDN

Package managers

jQuery

4. tRPC

trpc / trpc

🧙‍♀️ Move Fast and Break Nothing. End-to-end typesafe APIs made easy.

tRPC

Move fast and break nothing.End-to-end typesafe APIs made easy.

Intro

Features

5. Swiper

nolimits4web / swiper

Most modern mobile touch slider with hardware accelerated transitions

Swiper

Sponsors

Features

6. BrowserStore

sarahdayan / browserstore.js

Persist data into various browser-based storage systems.

BrowserStore

Download/install

UMD (browser global)

CommonJS (Node)

AMD (RequireJS, SystemJS, etc.)

7. Template String Converter

meganrogge / template-string-converter

Autocorrect from quotes to backticks

Template String Converter

Settings

8. lax.js

alexfoxy / lax.js

Simple & lightweight (<4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll.

lax.js

What's new with Lax.js 2.0

Examples

Documentation

1. Getting started

2. Going deeper

3. Glossary

Getting started

NPM Setup

9. Sharer.js

ellisonleao / sharer.js

🔛 🔖 Create your own social share buttons. No jquery.

sharer.js

Documentation

10. commitlint

conventional-changelog / commitlint

📓 Lint commit messages

Get Started | Website

Contents

What is commitlint

Stargazing 📈

Top risers over last 7 days🔗

Top growth(%) over last 7 days🔗

Top risers over last 30 days🔗

Top growth(%) over last 30 days🔗

🚀10 Trending projects on GitHub for web developers - 25th February 2022

Move fast and break nothing.
End-to-end typesafe APIs made easy.