DEV Community

Iain Freestone
Iain Freestone

Posted on

๐Ÿš€10 Trending projects on GitHub for web developers - 4th March 2022

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.

GitHub logo catalinmiron / react-typical

React typing animation in ~400 bytes ๐Ÿก of JavaScript.

react-typical

React Animated typing in ~400 bytes ๐Ÿก of JavaScript.

DEMO

React Typical

Based on awesome typical library by @camwiegert

NPM JavaScript Style Guide

React-Typical - Animated typing without the headaches

Youtube Video Tutorial

react-typing-indicator-thumbnail-v2

Install

npm install --save react-typical
Enter fullscreen mode Exit fullscreen mode

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"
      />
    )
  }
}
Enter fullscreen mode Exit fullscreen mode

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

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


3. imagesLoaded

Detect when images have been loaded.

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

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

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

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

$('#container').imagesLoaded()
  .always( function( instance ) {
โ€ฆ
Enter fullscreen mode Exit fullscreen mode

4. tRPC

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

GitHub logo trpc / trpc

๐Ÿง™โ€โ™€๏ธ End-to-end typesafe APIs made easy

tRPC

End-to-end typesafe APIs made easy

codecov MIT License Discord

Demo

The client above is not importing any code from the server, only it's type declarations


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.
  • ๐Ÿปย  Easy to add to your existing brownfield project.
  • ๐Ÿ”‹ย  Batteries included - React.js/Next.js/Express.js adapters. (But tRPC is not tied to React - reach out if you want to make a Svelte/Vue/... adapter)
  • ๐Ÿฅƒย  Subscriptions support.
  • โšก๏ธย  Request batching - requests made at the same time can be automatically combined into one
  • ๐Ÿ‘€ย  Quite a few examples in the ./examples-folder

Quickstart

There are a few examples that youโ€ฆ


5. Swiper

Most modern mobile touch slider with hardware accelerated transitions

GitHub logo nolimits4web / swiper

Most modern mobile touch slider with hardware accelerated transitions

Get Started | Documentation | Demos

Financial Contributors on Open Collective Build status jsDelivr Hits tree-shakeable types included

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.

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

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

CommonJS (Node)

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

AMD (RequireJS, SystemJS, etc.)

requirejs(['path/to/amd/browserstore.js'], function(browserstore) {
  //...
}
โ€ฆ
Enter fullscreen mode Exit fullscreen mode

7. Template String Converter

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

GitHub logo meganrogge / template-string-converter

Autocorrect from quotes to backticks

Template String Converter

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

typing a dollar sign then open curly brace within a string converts the quotes to backticks

Settings

Name Description
template-string-converter.enable Switches the extension on/off
template-string-converter.validLanguages Languages the extension should apply to
template-string-converter.quoteType single (''), double (""), or both
template-string-converter.convertOutermostQuotes In the case of nested quotes, converts the outermost ones to backticks
template-string-converter.autoRemoveTemplateString When $ or { is deleted, replace backticks with quotes typing a dollar sign and open curly brace converts the quotes to backticks. deleting the $ sign causes the backticks to be replaced with quotes
template-string-converter.convertWithinTemplateString Within a template string, converts strings to template strings when ${ is typed
template-string-converter.addBracketsToProps Adds brackets to the template string for JSX properties typing a dollar sign then open curly brace with addBracketsToProps set to true converts the quotes to backticks and adds brackets around the property

8. lax.js

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

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

Lax 2.0 Gif

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

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.

GitHub logo ellisonleao / sharer.js

๐Ÿ”› ๐Ÿ”– Create your own social share buttons. No jquery.


sharer.js

Follow me on twitter

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.

GitHub logo conventional-changelog / commitlint

๐Ÿ““ Lint commit messages

Get Started | Let's chat slack | Website

Lint commit messages

Demo generated with svg-term-cli

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

npm latest CircleCI

  • ๐Ÿš“ 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 ",")
Enter fullscreen mode Exit fullscreen mode

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
  • fix
  • perf
  • refactor
  • โ€ฆ

Stargazing ๐Ÿ“ˆ

Top risers over last 7 days๐Ÿ”—

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

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

  1. How to secure anything +24%
  2. envsafe +24%
  3. SyncedStore +18%
  4. Basic computer games +17%
  5. Qwik +14%

Top risers over last 30 days๐Ÿ”—

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

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

  1. NextUI +110%
  2. React Tree +67%
  3. Basic computer games +57%
  4. Medusa +42%
  5. 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.

Discussion (2)

Collapse
rohittater255 profile image
Rohit Tater

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

Collapse
cednore profile image
Y2Vkbm9yZQ==

The newsletter stopped at 4th of March. What happened to further issues? @iainfreestone