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.
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
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
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…
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?"
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 ) {
…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
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.
- …
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.
Sponsors
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…
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
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.
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) {
//...
}
…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
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.
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
- Scroll effect
- Horizontal snap scroll
- Inertia
- Video/Gif playback
- Cursor position
- Text input
- Update HTML content
- Preset Explorer
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
…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.
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.
10. commitlint
commitlint checks if your commit messages meet the conventional commit format.
conventional-changelog / commitlint
📓 Lint commit messages
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
Contents
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
- …
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🔗
- How to secure anything +24%
- envsafe +24%
- SyncedStore +18%
- Basic computer games +17%
- Qwik +14%
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🔗
- NextUI +110%
- React Tree +67%
- Basic computer games +57%
- Medusa +42%
- Learn web3 Dapp +39%
For all for the latest rankings please checkout Stargazing.dev
Trending Projects is available as a weekly newsletter please sign up at Stargazing.dev to ensure you never miss an issue.
If you enjoyed this article you can follow me on Twitter where I regularly post about HTML, CSS and JavaScript.
Top comments (6)
These 10 Trending projects on GitHub for web developers - 4th March 2022 are the best, and it provides us information that we need to know. If you go to these guys you will find the best services with the best results.
Best Contract management software is a tool designed to automate and streamline the contract management process for businesses.
Contract management tools make it easier for legal and business teams to create, negotiate, sign, renew and report on business contracts by automating the manual work traditionally involved in a contract workflow.
I have recently started new Blog where you can Check popular apps with Refer and Earn Program In india.
Posts links
1 Indmoney
2 B21 Invest
3 banksathi
4 livpure
5 Happy Easy Go
6 Eatclub
7 12% Club referral
8 fth daily
We'd be thankful if you can stop by Social Media Combo and give us your thoughts.
The newsletter stopped at 4th of March. What happened to further issues? @iainfreestone
Check a post I wrote on designing a WordPress website here