Trending Projects is available as a weekly newsletter please sign up at www.iainfreestone.com to ensure you never miss an issue.
1. Docz
Docz makes it easy to write and publish beautiful interactive documentation for your code. Create MDX files showcasing your code and Docz turns them into a live-reloading, production-ready site.
Docz makes it easy to write and publish beautiful interactive documentation for your code.
Create MDX files showcasing your code and Docz turns them into a live-reloading, production-ready site.
Table of Contents
Why?
Documenting code is one of the most important and time-heavy processes when developing software.
A lot of time is spent on building and maintaining custom documentation sites.
Docz enables you to quickly create live-reloading, seo-friendly, production-ready documentation sites with MDX and customize the look, feel and behavior when required by leveraging GatsbyJS and Gatsby theme shadowing.
Getting started
There's also a create-docz-app which you can be using to start new projects with docz even quicker but it's totally independent from docz, therefore not officially supported Once we strongly don't believe that it should be part of what we want to bring…
2. mo · js
The motion graphics toolbelt for the web. mo · js is a javascript motion graphics library that is a fast, retina ready, modular and open source.
mo · js –
The motion graphics toolbelt for the web.
Intro
mo · js is a javascript motion graphics library that is a fast, retina ready, modular and open source. In comparison to other libraries, it has a different syntax and code animation structure approach. The declarative API provides you a complete control over the animation, making it customizable with ease.
The library provides built-in components to start animating from scratch like html, shape, swirl, burst and stagger, but also bring you tools to help craft your animation in a most natural way. Using mojs on your site will enhance the user experience, enrich your content visually and create delightful animations precisely.
Install
Use with a bundler
Mojs is published on the NPM registry and GPR registry, so you can install it through the command line interpreter using your favorite package manager. This is the best way…
3. Twitter API Client
A user-friendly Node.js / JavaScript client library for interacting with the Twitter API.
FeedHive
/
twitter-api-client
A user-friendly Node.js / JavaScript client library for interacting with the Twitter API.
Twitter API Client
Node.js client for Twitter API
Table of content
Features
Getting Started
Get your Twitter credentials
You will need to create a set of Twitter developer credentials from your Twitter Developer account.
If you don't have one already, apply for a developer account here.
It takes about 5 minutes.
Install
npm i twitter-api-client
Usage
import { TwitterClient } from 'twitter-api-client';
const twitterClient = new TwitterClient({
apiKey: '<YOUR-TWITTER-API-KEY>',
apiSecret: '<YOUR-TWITTER-API-SECRET>',
accessToken: '<YOUR-TWITTER-ACCESS-TOKEN>',
accessTokenSecret: '<YOUR-TWITTER-ACCESS-TOKEN-SECRET>',
});
// Search for a user
const data = await twitterClient.accountsAndUsers.usersSearch({ q: 'twitterDev' })
…4. web3.js
The Ethereum JavaScript API which connects to the Generic JSON-RPC spec.
web3.js - Ethereum JavaScript API
This is the Ethereum JavaScript API which connects to the Generic JSON-RPC spec.
You need to run a local or remote Ethereum node to use this library.
Please read the documentation for more.
Installation
Node
npm install web3
Yarn
yarn add web3
In the Browser
Use the prebuilt dist/web3.min.js
, or
build using the web3.js repository:
npm run build
Then include dist/web3.min.js
in your html file
This will expose Web3
on the window object.
Or via jsDelivr CDN:
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
UNPKG:
<script src="https://unpkg.com/web3@latest/dist/web3.min.js"></script>
Usage
// In Node.js
const Web3 = require('web3');
let web3 = new Web3('ws://localhost:8546');
console.log(web3);
> {
eth: ... ,
shh: ... ,
utils: ...,
...
}
Additionally you…
5. renature
A physics-based animation library for React focused on modeling natural world forces.
FormidableLabs
/
renature
A physics-based animation library for React focused on modeling natural world forces.
renature
renature
is a physics-based animation library for React focused on modeling natural world forces like gravity, friction, and fluid dynamics, exposed as a set of React hooks.
✨ Features
-
🎣 A small set of declarative React hooks for animating with ease. -
🌌 Support for non-traditional physics-based animations using gravity, friction, fluid resistance, and more. -
🧮 Mathematically accurate and type-safe physics, powered by ReScript. -
🔁 Start, stop, delay, and loop animations with our Controller API. -
0️⃣ A tiny animation library with zero dependencies!
📃 Documentation
renature
's documentation lives on our docs site. Notice something inaccurate or confusing? Feel free to open an issue or make a pull request to help improve the documentation for everyone! The source for our docs site lives in this repo in the docs
folder.
Maintenance Status
Active: Formidable is actively working…
6. use-gesture
use-gesture is a library that let you bind richer mouse and touch events to any component or view. With the data you receive, it becomes trivial to set up gestures, and often takes no more than a few lines of code.
pmndrs
/
use-gesture
👇Bread n butter utility for component-tied mouse/touch gestures in React and Vanilla Javascript.
@use-gesture
@use-gesture is a library that let you bind richer mouse and touch events to any component or view. With the data you receive, it becomes trivial to set up gestures, and often takes no more than a few lines of code.
You can use it stand-alone, but to make the most of it you should combine it with an animation library like react-spring, though you can most certainly use any other.
The demos are real click them!
Installation
React
#Yarn
yarn add @use-gesture/react
#NPM
npm install @use-gesture/react
Vanilla javascript
#Yarn
yarn add @use-gesture/vanilla
#NPM
npm install @use-gesture/vanilla
Full documentation website
Simple example
React
import { useSpring, animated } from '@react-spring/web'
import { useDrag } from '@use-gesture/react'
function Example() {
const [{ x, y }, api] = useSpring(()
…7. cheerio
Fast, flexible, and lean implementation of core jQuery designed specifically for the server.
cheeriojs
/
cheerio
Fast, flexible, and lean implementation of core jQuery designed specifically for the server.
cheerio
Fast, flexible & lean implementation of core jQuery designed specifically for the server.
const cheerio = require('cheerio');
const $ = cheerio.load('<h2 class="title">Hello world</h2>');
$('h2.title').text('Hello there!');
$('h2').addClass('welcome');
$.html();
//=> <html><head></head><body><h2 class="title welcome">Hello there!</h2></body></html>
Note
We are currently working on the 1.0.0 release of cheerio on the main
branch. The source code for the last published version, 0.22.0
, can be found here.
Installation
npm install cheerio
Features
ϟ Blazingly fast: Cheerio works with a very simple, consistent DOM model. As a result parsing, manipulating, and…
8. DocToc
Generates table of contents for markdown files inside local git repository. Links are compatible with anchors generated by github or other sites.
thlorenz
/
doctoc
📜 Generates table of contents for markdown files inside local git repository. Links are compatible with anchors generated by github or other sites.
DocToc
Generates table of contents for markdown files inside local git repository. Links are compatible with anchors generated by github or other sites via a command line flag.
Table of Contents generated with DocToc
- Installation
-
Usage
- Adding toc to all files in a directory and sub directories
- Update existing doctoc TOCs effortlessly
- Adding toc to individual files
- Using doctoc to generate links compatible with other sites
- Specifying location of toc
- Specifying a custom TOC title
- Specifying a maximum heading level for TOC entries
- Printing to stdout
- Usage as a
git
hook
Installation
npm install -g doctoc
Usage
In its simplest usage, you can pass one or more files or folders to the
doctoc
command. This will update the TOCs of each file specified as well as of
each markdown file found by recursively searching each folder. Below are some
examples.
Adding toc to all files in a directory
…9. Styleguidist
Isolated React component development environment with a living style guide
styleguidist
/
react-styleguidist
Isolated React component development environment with a living style guide
React Styleguidist is a component development environment with hot reloaded dev server and a living style guide that you can share with your team. It lists component propTypes
and shows live, editable usage examples based on Markdown files. Check out the demo style guide.
Usage
- Getting Started: install and run Styleguidist
- Documenting components: how to write documentation
- Locating components: point Styleguidist to your React components
- Configuring webpack: tell Styleguidist how to load your code
- Cookbook: how to solve common tasks with Styleguidist
Advanced documentation
Examples
- Basic style guide, source
- Style guide with sections, source
- Style guide with customized styles, source
- Style guide with custom express endpoints, source
- Create React App integration, source
Showcase
Real projects using React Styleguidist:
10. Pts
A library for visualization and creative-coding
williamngan
/
pts
A library for visualization and creative-coding
Pts
Pts is a typescript/javascript library for visualization and creative-coding.
Get started at ptsjs.org.
Please give it a try, file issues, and send feedbacks to @williamngan. Thank you!
Usage
Option 1
Get the latest pts.js
or pts.min.js
(in dist folder). Alternatively use a CDN service like cdnjs or jsdelivr or unpkg. Then add it to your html page like this:
<script type="text/javascript" src="path/to/pts.js"></script>
Pts is pretty lightweight. Currently at ~90kb minified and 26kb gzipped.
Option 2:
Install via npm install pts
. Then you can choose to import some parts of Pts into your project as needed.
import {CanvasSpace, Pt, Group, Line} from 'pts';
To quickly get started, try download or clone these repos:
- pts-starter-kit: Get started with a sample app using npm and webpack
- pts-react-example: Try…
Stargazing 📈
Top risers over last 7 days
- Front-End Checklist +1,665 stars
- Best websites a programmer should visit +1,445 stars
- eDEX-UI +1,350 stars
- Slidev +1,235 stars
- umami +844 stars
Top growth(%) over last 7 days
- htmr +27%
- useStateMachine +24%
- Observable Plot +15%
- Elder.js +15%
- Slidev +15%
Top risers over last 30 days
- Public APIs +6,543 stars
- Coding Interview University +5,535 stars
- Web Developer Roadmap +5,200 stars
- Free Programming Books +4,960 stars
- Build your own X +4,350 stars
Top growth(%) over last 30 days
- github-elements +132%
- superplate +73%
- party.js +72%
- Fig +72%
- Supabase +43%
Trending Projects is available as a weekly newsletter please sign up at www.iainfreestone.com to ensure you never miss an issue.
If you enjoyed this article you can follow me on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.
Top comments (2)
Hey you should take a look at appwrite.io
Check out issue 45 number 2, I am already on the case
Issue 45
Oh perfect! I missed that 😊