DEV Community

Iain Freestone
Iain Freestone

Posted on • Originally published at iainfreestone.com

πŸš€10 Trending projects on GitHub for web developers - 19th February 2021

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

1. React Simple Animate

React UI animation made easy. Animation from style A to B,CSS keyframes animation, Chain up animation sequences and a tiny size without other dependency

GitHub logo beekai-oss / react-simple-animate

🎯 React UI animation made easy

React Simple Animate Logo - UI Animation Made Simple

React Simple Animate

React UI animation made easy

npm downloads npm npm Coverage Status

Features

  • Animation from style A to B
  • CSS keyframes animation
  • Chain up animation sequences
  • Tiny size without other dependency

Install

$ npm install react-simple-animate

Quickstart

Components

import React from "react";
import { Animate, AnimateKeyframes, AnimateGroup } from "react-simple-animate";
export default () => (
  <>
    {/* animate individual element. */}
    <Animate play start={{ opacity: 0 }} end={{ opacity: 1 }}>
      <h1>React simple animate</h1>
    </Animate>
    
    {/* animate keyframes with individual element. */}
    <AnimateKeyframes
      play
      iterationCount="infinite"
      keyframes={["opacity: 0", "opacity: 1"]}
    >
      <h1>React simple animate with keyframes</h1>
    <
…
Enter fullscreen mode Exit fullscreen mode

2. Hookstate

The simple but very powerful and incredibly fast state management for React that is based on hooks

GitHub logo avkonst / hookstate

The simple but very powerful and incredibly fast state management for React that is based on hooks

Hookstate

The most straightforward, extensible and incredibly fast state management that is based on React state hook

Why? β€’ Docs / Samples β€’ Demo application β€’ Extensions β€’ Release notes

Preface

Hookstate is a modern alternative to Redux, Mobx, Recoil, etc. It is simple to learn, easy to use, extensible, very flexible and capable to address all state management needs of large scalable applications. It has got impressive performance and predictable behavior.

Any questions? Just ask by raising a GitHub ticket.

Why Hookstate

hookstate.js.org

Migrating to version 4

hookstate.js.org/docs/migrating-to-v4

Documentation / Code samples / Demo applications

hookstate.js.org/docs/getting-started

Demo application

Development tools

hookstate.js.org/docs/devtools

Plugins / Extensions

hookstate.js.org/docs/extensions-overview

API reference

hookstate.js.org/docs/typedoc-hookstate-core

Hookstate developers workflow

This is the mono repository, which combine the Hookstate core package, extensions, docs and demo applications. pnpm is used as node_modules manager and nx as a scripts launcher. Each package defines its own…





3. rich-markdown-editor

A React and Prosemirror based editor that powers Outline and can also be used for displaying content in a read-only fashion. The editor is WYSIWYG and includes formatting tools whilst retaining the ability to write markdown shortcuts inline and output plain Markdown.

GitHub logo outline / rich-markdown-editor

The open source React and Prosemirror based markdown editor that powers Outline. Want to try it out? Create an account:

npm version CircleCI Formatted with Prettier TypeScript Sponsor

rich-markdown-editor

A React and Prosemirror based editor that powers Outline and can also be used for displaying content in a read-only fashion The editor is WYSIWYG and includes formatting tools whilst retaining the ability to write markdown shortcuts inline and output plain Markdown. See the Live demo storybook.

Important Note: This project is not attempting to be an all-purpose Markdown editor. It is built for the Outline knowledge base, and whilst others are welcome to fork or use this package in your own products, development decisions are centered around the needs of Outline.

Usage

Install

yarn add rich-markdown-editor
Enter fullscreen mode Exit fullscreen mode

or

npm install rich-markdown-editor
Enter fullscreen mode Exit fullscreen mode

Note that react, react-dom, and styled-components are required peer dependencies.

Import

import Editor from "rich-markdown-editor";

<Editor
  defaultValue="Hello world!"
/>
Enter fullscreen mode Exit fullscreen mode

Clone this repo and run the Storybook with yarn start to see a wide variety of example usage.

Props

id

…

4. Fabric.js

Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. It is also an SVG-to-canvas parser.

GitHub logo fabricjs / fabric.js

Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser

Fabric.js

A simple and powerful Javascript HTML5 canvas library.


🩺 πŸ§ͺ CodeQL


cdnjs jsdelivr Gitpod Ready-to-Code

NPM Downloads per month Bower


Sponsor asturur Sponsor melchiar Sponsor ShaMan123 Patreon


Features

  • Out of the box interactions such as scale, move, rotate, skew, group...
  • Built in shapes, controls, animations, image filters, gradients, patterns, brushes...
  • JPG, PNG, JSON and SVG i/o
  • Typed and modular
  • Unit tested

Supported Browsers/Environments

Context Supported Version Notes
Firefox βœ”οΈ 58
Safari βœ”οΈ 11
Opera βœ”οΈ chromium based
Chrome βœ”οΈ 64
Edge βœ”οΈ chromium based
Edge Legacy ❌
IE11 ❌
Node.js βœ”οΈ Node.js installation

Fabric.js Does not use transpilation by default, the browser version we support is determined by the level of canvas api we want to use and some js syntax. While JS can be easily transpiled, canvas API can't.

Installation

$ npm install fabric --save
// or
$ yarn add fabric
Enter fullscreen mode Exit fullscreen mode

Browser

cdnjs jsdelivr

See browser modules for using es6 imports in the browser or use a dedicated bundler.

Node.js

…

5. TailwindCSS

A utility-first CSS framework for rapidly building custom user interfaces.

GitHub logo tailwindlabs / tailwindcss

A utility-first CSS framework for rapid UI development.

Tailwind CSS

A utility-first CSS framework for rapidly building custom user interfaces.

Build Status Total Downloads Latest Release License


Documentation

For full documentation, visit tailwindcss.com.

Community

For help, discussion about best practices, or any other conversation that would benefit from being searchable:

Discuss Tailwind CSS on GitHub

For chatting with others using the framework:

Join the Tailwind CSS Discord Server

Contributing

If you're interested in contributing to Tailwind CSS, please read our contributing docs before submitting a pull request.







6. CASL

CASL is an isomorphic authorization JavaScript library which restricts what resources a given user is allowed to access

GitHub logo stalniy / casl

CASL is an isomorphic authorization JavaScript library which restricts what resources a given user is allowed to access

CASL

Do you like this package?

Support Ukraine πŸ‡ΊπŸ‡¦

CASL logo

Financial Contributors on Open Collective build CASL codecov CASL Join the chat at https://gitter.im/stalniy-casl/casl

CASL (pronounced /ˈkΓ¦sΙ™l/, like castle) is an isomorphic authorization JavaScript library which restricts what resources a given user is allowed to access. It's designed to be incrementally adoptable and can easily scale between a simple claim based and fully featured subject and attribute based authorization. It makes it easy to manage and share permissions across UI components, API services, and database queries.

Heavily inspired by cancan.

Features

  • Versatile An incrementally adoptable and can easily scale between a simple claim based and fully featured subject and attribute based authorization.
  • Isomorphic Can be used on frontend and backend and complementary packages make integration with major Frontend Frameworks and Backend ORMs effortless
  • TypeSafe Written in TypeScript, what makes your apps safer and developer experience more enjoyable
  • Tree shakable The core is only 6KB mingzipped and can be even smaller!
  • Declarative Thanks to…

7. React Static Tweets

Extremely fast static renderer for tweets.

GitHub logo transitive-bullshit / react-static-tweets

Extremely fast static renderer for tweets.

Deprecation Notice

Vercel released react-tweet which is a better maintained version of this library. Please use that instead.


React Static Tweets

Extremely fast static renderer for tweets.

NPM Build Status Prettier Code Formatting

React Static Tweets

Demo

Visit react-static-tweets.vercel.app and append your tweet ID. You can also append /dynamic/<tweetId> if you want to test the non-SSR version.

Why?

Twitter's embedding SDK is horribly slow and inefficient. For embedding tweets on your site (including SSR), this solution is significantly more performant. πŸ”₯

This project takes Vercel's work on static tweet rendering and packages it up into two easy-to-use NPM packages.

Features

  • ⚑ Fast - 10-100x faster than using Twitter's iframe embedding.
  • πŸ”₯ Solid - Used in production by super.so, react-notion-x, and others.
  • πŸš€ Simple - TypeScript + React.

Install

npm install react-static-tweets static-tweets date-fns
# or
yarn add react-static-tweets static-tweets date-fns
Enter fullscreen mode Exit fullscreen mode

Note: this project currently only works with Next.js (see #2 for more info).

Usage

You'll need to…





8. bcrypt.js

Optimized bcrypt in plain JavaScript with zero dependencies.

GitHub logo dcodeIO / bcrypt.js

Optimized bcrypt in plain JavaScript with zero dependencies.

bcrypt.js

Optimized bcrypt in JavaScript with zero dependencies. Compatible to the C++ bcrypt binding on node.js and also working in the browser.

build static donate ❀

Security considerations

Besides incorporating a salt to protect against rainbow table attacks, bcrypt is an adaptive function: over time, the iteration count can be increased to make it slower, so it remains resistant to brute-force search attacks even with increasing computation power. (see)

While bcrypt.js is compatible to the C++ bcrypt binding, it is written in pure JavaScript and thus slower (about 30%), effectively reducing the number of iterations that can be processed in an equal time span.

The maximum input length is 72 bytes (note that UTF8 encoded characters use up to 4 bytes) and the length of generated hashes is 60 characters.

Usage

The library is compatible with CommonJS and AMD loaders and is exposed globally as dcodeIO.bcrypt if neither is available.

…

9. Sass Boilerplate

A boilerplate for Sass projects using the 7-1 architecture pattern from Sass Guidelines.

GitHub logo KittyGiraudel / sass-boilerplate

A boilerplate for Sass projects using the 7-1 architecture pattern from Sass Guidelines.

Sass Boilerplate

This is a sample project using the 7-1 architecture pattern and sticking to Sass Guidelines writing conventions.

Each folder of this project has its own README.md file to explain the purpose and add extra information. Be sure to browse the repository to see how it works.

Using the indented syntax

Sass conversion

This boilerplate does not provide a .sass version as it would be painful to maintain both versions without an appropriate build process. However, it is very easy to convert this boilerplate to Sass indented syntax.

Clone it, head into the project and then run:

sass-convert -F scss -T sass -i -R ./  && find . -iname β€œ*.scss” -exec bash -c 'mv "$0" β€œ${0%\.scss}.sass"' {} \;

Use with Sass

When using sass - in order to build that boilerplate, one needs to:

  • install sass if not yet installed:
npm install -g sass
Enter fullscreen mode Exit fullscreen mode
  • run build command from command…

10. Devicons

An iconic font made for developers. Devicons contains 85 vectorized sharp glyphs . Devicons iconic font is free to use and licensed under MIT.

GitHub logo vorillaz / devicons

Devicons - An iconic font made for developers

Meet Devicons

an iconic font made for developers, code jedis, ninjas, HTTPsters, evangelists and nerds.

NPM version Downloads

Devicons is a full stack iconic font ready to be shipped with your next project. Created, handcrafted and coded by Theodore Vorillas Devicons contains 85 vectorized sharp glyphs Devicons iconic font is free to use and licensed under MIT.

Devicons icon set 1.8.0

Devicons

Use Devicons with a single line of code.

Thanks to the wonderful guys of jsdelivr you can now add Devicons into your project by adding the following code into the <HEAD> section of your project's HTML:

<link href='//cdn.jsdelivr.net/npm/devicons@1.8.0/css/devicons.min.css' rel='stylesheet'>

Getting Started

  1. Download and extract the repository
  2. Copy the devicons.css to your project
  3. Copy the fonts folder to your project
  4. Ensure the font urls within devicons.css properly reference the fonts path within your project.
  5. Include a reference to the devicons.css file from every webpage you need to use it.

Install using

…

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 (1)

Collapse
 
anmolkumar5 profile image
anmolkumar5

Thanks Sharing Nice List